/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */


/*---------------------------- CSS STYLESHEET TABLE OF CONTENTS ----------------------------*/
/*---------main colours*/
/*---------text buttons and links*/
/*---------container elements*/
/*---------header*/
/*---------table elements*/
/*---------forms*/
/*---------footer*/
/*---------Page specific styling*/
/*---------------------------- END CSS STYLESHEET TABLE OF CONTENTS END ----------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html, body {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}




/*============================== main colours ==============================*/
:root {
    --white: #ffffff;
    --light-grey: #eeeeee;
    --mid-grey: #404040;
    --background: #eaf4f6;
    --primary-blue: #428ce7;
    --mid-blue: #4a90e2;
    --text: #404040;
    --charcoal: #353535;
    --green: #34a853;
    --orange: #fbbc05;
    --red: #ea4335;
    /*=== Colour Selection Box RG ===*/
    --blueBright: #2d7ff9;
    --blueBase: #1283da;
    --blueDark1: #2750ae;
    --blueLight1: #9cc7ff;
    --blueLight2: #cfdfff;
    --purpleLight: #ede2fe;
    --purple: #fcb400;
    --purpleBase: #7c39ed;
    --purpleBright: #8b46ff;
    --purpleLight1: #cdb0ff;
    --purpleLight2: #ede2fe;
    --pinkBase: #e929ba;
    --pinkBright: #ff08c2;
    --pinkDark1: #b2158b;
    --pinkLight1: #f99de2;
    --pinkLight2: #ffdaf6;
    --redBright: #f82b60;
    --redBase: #e52e4d;
    --redDark1: #ba1e45;
    --redLight1: #ff9eb7;
    --redLight2: #ffdce5;
    --orangeBright: #ff6f2c;
    --orangeBase: #f7653b;
    --orangeDark1: #d74d26;
    --orangeLight1: #ffa981;
    --orangeLight2: #fee2d5;
    --yellowBright: #fcb400;
    --yellowBase: #e08d00;
    --yellowDark1: #b87503;
    --yellowLight1: #ffd66e;
    --yellowLight2: #ffeab6;
    --cyanBright: #18bfff;
    --cyanBase: #01a9db;
    --cyanDark1: #0b76b7;
    --cyanLight1: #77d1f3;
    --cyanLight2: #d0f0fd;
    --tealBright: #20d9d2;
    --tealBase: #02aaa4;
    --tealDark1: #06a09b;
    --tealLight1: #72ddc3;
    --tealLight2: #c2f5e9;
    --greenBright: #20c933;
    --greenBase: #11af22;
    --greenDark1: #338a17;
    --greenLight1: #93e088;
    --greenLight2: #d1f7c4;
    --greyBright: #666;
    --greyBase: #666;
    --greyDark1: #444;
    --greyLight1: #ccc;
    --greyLight2: #eee;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

/*============================== text buttons and links ==============================*/

h1, .h1 {
    font-size: 2rem;
}

/* added text-decoration: underline to overwrite the print.scss file */
a {
    color: var(--mid-grey);
    text-decoration: underline;
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}


.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn-menu {
    color: #fff;
    width: 100px;
    background-color: #1b6ec2;
    border-color: #1861ac;
    vertical-align: top;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

p, a, .font-weight-lighter td,
.font-weight-lighter td a,
form p a {
    font-weight: 400;
}

/* ----------------------------- buttons ----------------------------- */

.btn {
    display: inline-block;
    font-weight: 400;
    /* RH disable color: #212529;*/
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 5px;
    font-size: 75%;
    line-height: 1.5;
    border-radius: 3px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


/*RH - I have removed this and added bespoke style in the site css*/
/*.btn-primary:hover {
  color: var(--white);
  background-color: var(--charcoal);
  border-color: var(--charcoal);
}*/

/* closed button */
/*tr.closed{
  border-top:  0;
  border-right:  0;
  border-bottom:  0;
  border-left:  2px solid var(--red) !important;
  opacity:  0.5;
}

tr.closed .closed-text{
  color: var(--red);
}
*/
/* followup button */
/*tr.followup,
tr.postponed{
  border-top:  0;
  border-right:  0;
  border-bottom:  0;
  border-left:  2px solid var(--orange);
}


tr.followup .followup-text,
tr.postponed .postponed-text{
  color: var(--orange);
}
*/

/* QUOTES - number of items in table ----*/
.form-actions label.control-label {
    /*background-color: #fff;*/
    /*border: 1px solid var(--primary-blue);*/
    color: var(--primary-blue);
    padding: 4px;
    border-radius: 3px;
    margin: 0 5px;
}

    /* QUOTES - number of items in table :HOVER ----*/

    .form-actions label.control-label:hover {
        /*color: #fff;*/
        /*background-color: var(--primary-blue);*/
        /*border-color: var(--primary-blue);*/
        /*padding: 5px;*/
        border-radius: 3px;
        margin: 5px;
        text-decoration: none;
        opacity: 1;
    }


/* CQUOTES - REATE NEW button ----*/

body.shedsScreen table.table tbody > td {
    width: fit-content;
    display: flex;
    flex-direction: column;
}

.userCentre main table tr td:last-of-type {
    min-width: 180px;
}

a.btn-details,
a.btn-edit,
a.btn-select,
button.btn-todo,
button.btn-details,
a.btn-delete,
a.btn-new,
a.btn-primary.btn-details,
a.btn-primary.btn-edit,
button.btn-primary.btn-todo,
button.btn-primary.btn-details,
a.btn-primary.btn-delete,
a.btn-primary.btn-new {
    padding: 5px;
    border-radius: 3px;
    text-transform: uppercase;
    text-align: center;
    width: auto;
    display: inline-block;
    font-size: 75%;
    text-decoration: none;
}


a.btn-fixed {
    padding: 5px;
    border-radius: 3px;
    text-transform: uppercase;
    text-align: center;
    width: 100px;
    display: inline-block;
    font-size: 75%;
    text-decoration: none;
}
/*All CREATE button - class added via script*/
a.btn-new,
a.btn-primary.btn-new {
    color: var(--primary-blue);
    border: 1px solid var(--primary-blue);
    background-color: transparent;
}

    /*All CREATE button - hover*/
    a.btn-new:hover,
    a.btn-primary.btn-new:hover {
        color: var(--white);
        border: 1px solid var(--primary-blue);
        background-color: var(--primary-blue);
    }

/*All details button - class added via script*/
a.btn-details,
button.btn-details,
a.btn-primary.btn-details,
button.btn-primary.btn-details {
    color: var(--green);
    border: 1px solid var(--green);
    background-color: transparent;
}

    /*All details button - hover*/
    a.btn-details:hover,
    button.btn-details:hover,
    a.btn-primary.btn-details:hover,
    button.btn-primary.btn-details:hover {
        color: var(--white);
        border: 1px solid var(--green);
        background-color: var(--green);
    }


/*All edit button - class added via script*/
a.btn-edit,
a.btn-primary.btn-edit {
    color: var(--orange);
    border: 1px solid var(--orange);
    background-color: transparent;
}

    /*All edit button  hover*/
    a.btn-edit:hover,
    a.btn-primary.btn-edit:hover {
        color: var(--white);
        border: 1px solid var(--orange);
        background-color: var(--orange);
    }

/*All todo button - class added via script*/
button.btn-todo,
button.btn-primary.btn-todo {
    color: var(--primary-blue);
    border: 1px solid var(--primary-blue);
    background-color: transparent;
}

    /*All todo button  hover*/
    button.btn-todo:hover,
    button.btn-primary.btn-todo:hover {
        color: var(--white);
        border: 1px solid var(--primary-blue);
        background-color: var(--primary-blue);
    }

/*All delete button - clasa added via script*/
a.btn-delete,
a.btn-primary.btn-delete,
a.btn-danger.btn-delete {
    color: var(--red);
    border: 1px solid var(--red);
    background-color: transparent;
}

    /*All delete button - hover*/
    a.btn-delete:hover,
    a.btn-primary.btn-delete:hover,
    a.btn-danger.btn-delete:hover {
        color: var(--white);
        border: 1px solid var(--red);
        background-color: var(--red);
    }

/*All select button - class added via script*/
a.btn-select,
a.btn-primary.btn-select {
    color: var(--purple);
    border: 1px solid var(--purple);
    background-color: transparent;
}

    /*All edit button  hover*/
    a.btn-select:hover,
    a.btn-primary.btn-select:hover {
        color: var(--white);
        border: 1px solid var(--purple);
        background-color: var(--purple);
    }


/*
#enquiryInteractionsDetails tbody tr td:not(:last-of-type) > a[href*="/Interactions/Edit"]{
  color: var(--mid-grey);
  border: 0;
}*/

/*.userLinkButtons tr td:last-of-type a.btn {
    margin: 0.25rem;
}*/

/* these are the buttons across the top fo the table */
tr td:last-of-type a[href*="/User/"].btn,
tr td:last-of-type a[href*="/Enquiries/"].btn,
tr td:last-of-type a[href*="/Quotes/"].btn,
tr td:last-of-type a[href*="/Projects/"].btn,
tr td:last-of-type a[href*="/Interactions/"].btn {
    font-size: 75%;
    margin: 0 5px;
    display: inline-block;
}

/*override spacing for .userLinkButtons*/
.userLinkButtons td dl a[href*="/User/"].btn,
.userLinkButtons td dl a[href*="/Enquiries/"].btn,
.userLinkButtons td dl a[href*="/Quotes/"].btn,
.userLinkButtons td dl a[href*="/Projects/"].btn,
.userLinkButtons td dl a[href*="/Interactions/"].btn {
    margin: 0.25rem;
}


/*---- Container elements ------*/

body {
    font-family: 'Poppins', Helvetica, sans-serif;
    font-size: 13px;
    min-width: 100%;
    background-color: var(--background);
    display: table;
}

.container\,.userCentre,
.userCentre {
    padding: 2rem;
}

main.main {
    margin: 2rem 0;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
}




/* ============================== header ============================== */

header nav .container {
    max-width: 100vw;
    margin: 0;
}

@media (min-width: 1200px) {
    header .container {
        max-width: unset;
    }
}

@media (min-width: 992px) {
    header .container {
        max-width: unset;
    }
}


@media (min-width: 768px) {
    header .container {
        max-width: unset;
    }
}


@media (min-width: 676px) {
    header .container {
        max-width: unset;
    }
}

header .bkg-white {
    color: var(--mid-blue);
}

header .container {
    max-width: unset;
    Width: 100%;
}

header a,
header a:hover {
    text-decoration: none;
}

/* header - used important to overwrite bootstrap bg-white important declaration */
nav.navbar.bg-white {
    background-color: var(--primary-blue) !important;
    color: #fff;
}
/* header - used important to overwrite bootstrap text-dark important declaration */
a.nav-link.text-dark,
button.nav-link.btn.btn-link.text-dark {
    color: #fff !important;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

nav.mb-3 {
    margin-bottom: 0 !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #000;
    font-size: .75rem;
    letter-spacing: -.5px;
    display: block;
    font-weight: 700;
    text-transform: uppercase;
}



/* ============================== table elements ============================== */

/*---------------Table head tHead*/

.table thead th {
    vertical-align: middle;
    border-bottom: 0;
    border-top: 0;
    border: 0;
}

thead a,
tbody th a,
thead a,
thead p,
thead p a {
    font-weight: bold;
    text-decoration: none;
}


/*-------------Table body tbody*/

/* style the parent of the table on the enquiries page .userCentre main > table.enqIndex,*/
/*.pb-3 table table table,*/
body.shedsScreen .pb-3 {
    border: solid 2rem #fff;
    box-shadow: 0 10px 25px 0 rgb(50 50 93 / 7%), 0 5px 15px 0 rgb(0 0 0 / 7%);
    background-color: #fff;
    width: 100%;
    margin: 0px auto; /*was20px*/

    table-layout: auto;
    margin-bottom: 0rem; /*was 2rem*/
}

/*removed the padding so that the links take up full space*/
#enquiryDetailsIndex.table tbody tr td,
#projectDetailsIndex.table tbody tr td {
    padding: 5px;
}


/*max wisdth of cells*/
table#quotesIndex td,
table#interactionIndex td {
    max-width: 35ch;
}

.userCentre main > table,
.userCentre main > table td,
.userCentre main > table th {
    border-collapse: collapse;
}

/*.userCentre main > table th,
.userCentre main > table td {
  line-height: 17px;
  vertical-align: middle;
  min-width: 100px; 

}*/

#enquiryDetailsIndex th, #enquiryDetailsIndex td,
#projectDetailsIndex th, #projectDetailsIndex td {
    line-height: 17px;
    vertical-align: middle;
    min-width: 85px;
    max-width: 130px;
    white-space: normal;
}



/* data input */
.table thead th form input.userFilter {
    width: 15ch;
}

table.highlightedTable tr td:first-child,
table.highlightedTable tr th:first-child {
    padding-left: 20px;
}


/*--------- Elements in  the Table body */

/* Zebra striping on specific tables */
table.highlightedTable tbody tr:nth-of-type(odd),
body.shedsScreen .userCentre table.table tbody tr:nth-of-type(odd),
body.Dashboard tbody tr:nth-of-type(odd) {
    background-color: var(--light-grey);
}

table.highlightedTable tbody tr:nth-of-type(even),
body.shedsScreen .userCentre table.table tbody tr:nth-of-type(even) {
    background-color: #ffffff;
}



table.highlightedTable tbody > tr:hover,
/*interactions page*/
body.shedsScreen .userCentre table.table tbody tr:hover {
    background: var(--background);
    opacity: 1;
}



tbody th a,
tbody td a,
tbody td a:hover {
    text-decoration: none;
}




/* style the elements in the form at the top o fthe enquiries page */
body.Enquiries form p {
    display: flex;
    height: 1rem;
    align-items: center;
}

/* --*/
input {
    overflow: visible;
    padding: 5px 5px;
    margin: 0 5px 0 5px;
}

/*some table cells have a fixed with because of bootstrap class - overwirte that*/
dd.col-sm-10 {
    margin: 0;
    max-width: unset;
}

/* adding padding */
.userSaveSpace tbody td {
    padding-bottom: 5px;
    padding-top: 5px;
}



.fixedTable th {
    min-width: 5rem;
    width: 5rem;
    white-space: nowrap;
    padding-left: 0;
    padding-right: 0;
}

.fixedTable td {
    padding: 0;
    vertical-align: middle
}

.fixedTableLarge th {
    min-width: 10rem;
    width: 10rem;
    white-space: nowrap;
    padding-left: 0;
    padding-right: 0;
}

.fixedTableLarge td {
    padding: 0;
    vertical-align: middle
}

.fixedTableOptimized th {
    min-width: 5rem;
    width: 5rem;
    white-space: nowrap;
    padding-left: 0;
    padding-right: 0;
}

.fixedTableOptimized td {
    padding: 0;
    vertical-align: middle
}


.btn.align-bottom {
    vertical-align: middle !important;
}

/* ==============================  FORMS ============================== */

form a {
    text-decoration: none;
}


/* ============================== Footer ============================== */
footer,
.footer {
    position: relative;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */

    font-size: 1rem;
    font-family: montserrat,open sans,segoe ui,helvetica,Arial,sans-serif;
    background-color: var(--mid-grey);
    color: #fff;
    overflow: visible;
}

    footer .container {
        padding-top: 0rem;
        padding-bottom: 0rem;
        position: relative;
        margin: 0 2rem;
    }


    footer.border-top.footer.text-muted {
        color: #fff !important;
    }


/* ============================== PAGE SPECIFIC STYLING and OVERWRITES ============================== */
/* ----- dashboard page ---- */
body.Dashboard table {
    background-color: transparent;
}

/* RHS */

.pc20Column {
    width: 20%;
    min-width: 500px;
    padding-left: 32px;
}

dd.col-sm-10 {
    margin: 0;
}


/* Enquiries page SELECTED ENRTY DATA ----- */

.userCentre main td.selectedItem,
td.selectedItem {
    text-align: left;
    min-width: 25ch;
}

    .userCentre main td.selectedItem div .row,
    td.selectedItem div .row {
        margin: 0;
        margin-left: 0;
        margin-right: 0;
    }

    td.selectedItem div dt {
        width: 100%;
        display: block;
        text-wrap: none;
        max-width: unset;
        /*max-width: 100%;*/
        white-space: nowrap;
        /*flex: unset;*/
        margin-top: 5px;
        padding: 5px;
        background-color: var(--light-grey);
    }

    td.selectedItem dd.col-sm-10 {
        margin: 0 0 10px 0;
        padding: 0 0 0 5px;
    }



/* ============================== Custom DAshboard ============================== */

#dashboard main {
    padding: 1rem;
}

#dashboard h2 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

#dashboard h3 {
    font-size: 1rem;
}

.text-block.label p,
.text-block.label-2 p {
    font-weight: bold;
}

.text-block.label p,
.text-block.label-2 p,
.data p {
    font-size: 0.9rem;
    color: #212529;
    margin-right: 1rem;
}

.columns {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-left: 0px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}



section.content-wrapper .columns > div.column {
    margin: 1rem 0;
    width: 100%;
}

@media (min-width: 768px) {
    section.content-wrapper .columns > div.column {
        width: calc(25% - 2rem);
        margin: 1rem 1rem 1rem 1rem;
    }

        section.content-wrapper .columns > div.column:first-child {
            margin: 1rem 1rem 1rem 0;
        }

        section.content-wrapper .columns > div.column:last-child {
            margin: 1rem 0 1rem 1rem;
        }
}


.f-row {
    display: flex;
    flex-direction: row;
}

.f-col {
    display: flex;
    flex-direction: column;
}


.tile {
    background-color: #fff;
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
    padding: 8px;
}

.columns-2 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.columns-3 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.columns-4 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.div-block-2 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}





/******/
.userCentre.enquiries {
    margin: 0;
}

body.shedsScreen .userCentre.enquiries .pb-3 {
    padding: 0 !important;
    background-color: transparent;
    border: 0;
    box-shadow: none;
}
/* .e-panel {
  height: auto!important;
} */
.detail-content {
    max-height: 200px;
    overflow-y: auto;
}

.selectedDetails textarea {
    width: 100%;
}

.userCentre.enquiries .selectedItemHeader {
    font-size: 1.5rem;
}

    .userCentre.enquiries .selectedItemHeader span {
        font-weight: normal;
        font-style: italic;
        font-size: 1.2rem;
    }

.nav-tabs-mobile {
    display: none;
}

.container\,.userCentre.enquiries {
    padding: 0;
    margin: 0;
}

@media (min-width: 1600px) {
    .enquiries .selectedDetails .col-sm-3,
    .enquiries .selectedDetails .col-sm-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 1600px) {
    .userCentre.enquiries .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .nav-tabs-mobile {
        display: flex;
    }
}