/* 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. */

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

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

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

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

p {
    font-family: Avenir;
}
span {
    font-size: 14px;
    font-family: Avenir;
}

.span-bold {
    font-weight: bold;
}
label {
    font-family: Avenir;
}

input::-webkit-input-placeholder {
    font-family: Avenir, Arial, Helvetica, sans-serif;
}

input:-ms-input-placeholder {
    font-family: Avenir, Arial, Helvetica, sans-serif;
}

input:-moz-placeholder {
    font-family: Avenir, Arial, Helvetica, sans-serif;
}

input::-moz-placeholder {
    font-family: Avenir, Arial, Helvetica, sans-serif;
}
.background-img-div p {
    text-align: center;
    /*   font-family: ivypresto-display;*/
    font-family: "ivypresto-display";
    color: #253746;
    font-size: 50px;
    /*  font-weight: bold;*/
}

#appointment-text {
    text-align: center;
  
}

h1, h2,  h6 {
    font-family: ivypresto-display;
}
h3 {
    font-family: Avenir Book;
    font-weight:600 !important;
}


.appointment-fail-text{
    color: #9E3E2D;
}

/*h2{
    font-family: 'Times New Roman';
}*/


/*.text-danger {
    color: #9E3E2D !important;
}
*/

/*ENG OF FONTS AREA*/

.no-store-message {
    background-color: #212529;
    color: #fff;
    border-radius: 1rem;
    text-align: center;

    
}

#appointment-img img {
    margin-bottom: 35px;
}

.background-img-div {
    /*  width:50%;
    margin-top: 6rem;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
}

    .background-img-div img {
        min-width: 114px;
        width: 15rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

  

    .background-img-div span {
        text-align: center;
        font-family: Avenir;
        color: #253746;
        font-size: 16px;
        /*  font-weight: bold;*/
    }

.main-content {
    position: relative;
  margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
}

#header-link {
    margin-right: 20px;
}

input{
    font-size: 200px;
}

/*@media (min-height: 800px) and (min-width: 768px) {
    .main-content {
        position: relative;
        bottom: 0;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: auto;
    }
}*/


/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

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

.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);
}

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

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /*Margin bottom by footer height */
  
}

#rc-imageselect, .g-recaptcha {
    display: inline;
    /*//the most important*/
}

#rc-imageselect {
    max-width: 100%;
}

.g-recaptcha > div > div {
    width: 100% !important;
    height: 78px;
    transform: scale(0.77);
   /* //the code to rescale the captcha obtained in this page webkit-transform:scale(0.77);*/
    text-align: center;
    position: relative;
}

    .footer {
        position: relative;
        bottom: 0;
        width: 100%;
        white-space: nowrap;
        line-height: 60px; /* Vertically center the text there */
        background-color: rgb(37,55,70);
    }

    .footerText {
        color: white;
      
        font-size: 15px;
        width: 100%;
      
    }
    /*.form-check-input{
margin-left: 5px;
}*/

    /*form-check-label {
    margin-right: 5px;
}
*/
    .label-yes {
        margin-right: 5px;
    }

    /*end of footer*/
    .btn {
        min-height: 55px;
    }

    .clear-lb-btn {
        background-color: white;
        color: black;
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
        border-color: rgb(129,139,148);
        border-width: 2px;
        /*  padding-top:1rem;*/
        padding-bottom: 1.5rem;
        width: 13rem;
        height: 2rem;
        font-weight: bold;
        min-height: 25px;
    }

        .clear-lb-btn:hover {
            background-color: rgb(246,247,246);
        }

        .clear-lb-btn:hover:disabled{
            background-color: white;
        }

    .blck-lb-btn {
        background-color: rgb(37,55,70);
        color: white;
        font-size: 16px;
        font-family: Avenir;
        border-color: rgb(37,55,70);
        border-width: 2px;
        margin-top: 1rem;
        width: 15rem;
    }

        .blck-lb-btn:hover:enabled {
            background-color: rgb(246,247,246);
        }
        .blck-lb-btn:hover:disabled {
            background-color: rgb(37,55,70);
            color:white;
        }

        .blck-lb-btn.home-appointment {
            width: 24rem;
        }

    .center {
        margin-top: 4.5rem;
        position: relative;
        top: 81%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .bottom-right {
        margin-top: 10rem;
        position: relative;
        top: 81%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-130%, -50%);
    }

    #back-button img {
        width: 90%;
        height: auto;
        transform: translate(230%, -500%);
    }

button.link {
    background: none;
    border: none;
    text-decoration: underline;
    padding-top: 0.5rem;
    float: none;
    font-family: Avenir;
}

    .link:focus {
        outline: none;
        box-shadow: none;
    }

    .centerBrochureImg {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }

    .input-validation-error {
        border-color: #9E3E2D !important;
        border-width: 2px !important;
        color: #9E3E2D !important;
        float: right !important;
    }

    .val-text {
        float: right;
        color: #9E3E2D !important;
    }

    #no-locationid {
        color: #9E3E2D;
        float: right;
    }

#invalid-postcode {
    color: #9E3E2D;
    float: right;
}

    #invalid-manualpostcode, #invalid-manualpostcode-roi {
        color: #9E3E2D;
        float: right;
    }

#invalid-contactnumber {
    color: #9E3E2D;
    float: right;
}

#incorrectdate {
    color: #9E3E2D;
    float: right;
}
#incorrectdate-appointment {
    color: #9E3E2D;
    float: right;
}

#no-slots p {
    margin-top: 16px
}


.ErrorControl {
    border-color: blue !important;
}

    .date-placeholder::before {
        content: attr(placeholder);
    }

    .date-placeholder:hover::before {
        content: "";
    }

    .time-placeholder::before {
        content: attr(placeholder);
    }

    .time-placeholder:hover::before {
        content: "";
    }


    /*appointment boxes*/
    #container-appointment {
        /*    width: 90%;
    margin-top: 2rem;
    position: relative;*/

        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
    }



    #first {
        width: 28rem;
        float: left;
        height: 23rem;
        background-color: white;
        display: grid;
        margin-top: 1rem;
        margin-right: 1rem;
        margin-left: 6rem;
        position: relative;
    }

    #second {
        width: 28rem;
        float: right;
        height: 23rem;
        background-color: white;
        margin-top: 1rem;
        padding-top: 0.6rem;
        position: relative;
        display: grid;
    }

    #clear {
        clear: both;
    }

    .centerAppointmentBox {
        text-align: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        padding-top: 3rem
    }

   
    @media screen and (max-width: 1182px) {
        #first {
            width: 20rem;
            float: left;
            height: 23rem;
            background-color: white;
            display: grid;
            margin-top: 1rem;
            margin-right: 1rem;
            margin-left: 6rem;
            position: relative;
        }

        #second {
            width: 20rem;
            float: right;
            height: 23rem;
            background-color: white;
            margin-top: 1rem;
            padding-top: 0.6rem;
            position: relative;
            display: grid;
        }
    }

    @media screen and (max-width: 1199px) {
        #container-appointment {
            flex-direction: column;
        }

        #first {
            margin: auto;
            width: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #second {
            width: auto;
            margin-top: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }



    #bs-logo {
        width: 200px;
    }

    .container-brochure {
        position: relative;
        text-align: center;
        color: white;
        height: auto;
    }

    .background-brochure {
        height: auto;
        width: 100%;
    }


.centered-brochure-thankyou {
    position: absolute;
    top: 96%;
    left: 50%;
    background-color: rgb(246,247,246);
    transform: translate(-50%, -92.5%);
    color: rgb(37,55,70);
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 0%
}

.centered {
    position: absolute;
    top: 96%;
    left: 50%;
    background-color: rgb(246,247,246);
    transform: translate(-50%, -96.5%);
    color: rgb(37,55,70);
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 0%
}

    .brochureThankYou {
        margin-bottom: 8%
    }





@media only screen and (min-width: 279px) and (max-width: 767px) {
    .centered-brochure-thankyou {
       
        width: 101%;
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 60px;
        padding-bottom: 60px;
        transform: translate(-50%, 1%);
    }

    .centered {
        width: 101%;
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 60px;
        padding-bottom: 60px;
        transform: translate(-50%, 1%);
    }
}

@media only screen and (min-width: 768px) and (max-width: 1000px) {
    .centered-brochure-thankyou {
        width: 100.5%;
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 60px;
        padding-bottom: 60px;
        transform: translate(-50%, 1%);
    }
    .centered {
        width: 100.5%;
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 60px;
        padding-bottom: 60px;
        transform: translate(-50%, 1%);
    }
    .footerText{
        font-size: 16px;
    }
}


    li {
        display: table-cell;
        text-align: center;
        padding: 0 20px 0 20px;
    }

    /*#btnFind {
    z-index: 1000;
    position: absolute;
    right: 3px;
    top: 3px;
    color: white;
    font-size: 16px;
    padding: 10px 20px 10px 20px;
    min-height: 46px;
    border-radius: 0px;
}*/

#btnFind {
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 17px 25px 17px 25px;
    font-family: Avenir;
}

    #manual-address {
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .calender_list {
        margin: 0 auto;
        padding: 0;
        width: 95%;
    }

        .calender_list ul {
            list-style: none;
            width: auto;
            margin: 1px -4px;
            padding: 0;
        }

            .calender_list ul li {
                margin: 0px 1%;
                padding: 0;
                display: inline-block;
                vertical-align: top;
            }

                .calender_list ul li:after {
                    display: none;
                }

                .calender_list ul li a {
                    width: 100%;
                    height: 40px;
                    border: 1px solid #e4e4e4;
                    border-radius: 6px;
                    text-align: center;
                    display: block;
                    font-family: 'Source Sans Pro', sans-serif;
                    font-size: 18px;
                    line-height: 0px;
                    color: #4e4e4e;
                    text-decoration: none;
                    padding: 20px 50px;
                    margin: 0 0 14px;
                    background-color: white;
                }

                    .calender_list ul li a:hover {
                        background-color: #9E3E2D;
                        color: #FFF;
                    }

                .calender_list ul li.selected a {
                    background-color: black;
                    color: #FFF;
                }

    .calender_list_selected {
        background-color: #9E3E2D !important;
        color: #FFF !important;
    }

    .calender_sect .calender_txt_cont {
        margin: 9px 0 0;
        padding: 0;
        width: 100%;
        border-radius: 6px;
        border: 1px solid #e4e4e4;
    }

        .calender_sect .calender_txt_cont h4 {
            font-size: 24px;
            color: #4e4e4e;
            line-height: 26px;
            border-bottom: 1px solid #e4e4e4;
            text-align: center;
            padding: 13px 0;
        }

        .calender_sect .calender_txt_cont .calender_list_cont {
            margin: 0 auto;
            padding: 40px 0;
            width: 94%;
            text-align: center;
        }

            .calender_sect .calender_txt_cont .calender_list_cont strong {
                font-family: 'Source Sans Pro', sans-serif;
                font-size: 24px;
                line-height: 26px;
                color: #86cd0b;
                font-weight: bold;
            }


    @media screen and (max-width: 420px) {
        .calender_list ul li {
            width: 100% !important;
        }
          #btnFind{
        margin: auto;
    }

        #manual-address {
            /* margin-right: 2rem;
       */
        }


        #hkd-title {
            padding-top: 10px;
            font-size: 1.5rem;
            font-family: Arial, Helvetica, sans-serif;
            padding-bottom: 10px;
            margin-bottom: 0px;
        }

        .bottom-right {
            margin-top: 6.5rem;
            position: relative;
            top: 8%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-260%, -50%);
        }

        .style-img-div {
            width: 100px;
            height: 100px;
        }

        .style-img {
            max-height: 100px;
        }

        #toggle-map {
            display: none;
        }
        .footerText{
            font-size: 8px;
        }
    }

 
    @media screen and (max-width: 820px) {
        #container-appointment {
            flex-direction: column;
        }

        .background-img-div img {
            width: 12rem;
        }

        .background-img-div p {
            font-size: 30px;
        }

        .footerText {
            color: white;
            font-size: 8px;
            width: 50%;
        }

        button.link {
            float: none;
        }
         #btnFind {
        margin: auto;
    }
    }

    @media screen 
        and (min-width: 912px)
    and (max-width:992px){


        .footerText{
            font-size: 16px;
        }

        #btnFind {
            margin: auto;
        }
    }
@media screen and (max-width: 361px) {
    .footerText {
        font-size: 6px;
    }
}

    @media screen and (max-width: 767px) {
        #background-img-div {
            margin-top: -90px;
        }

        .bottom-right {
            margin-top: 6.5rem;
            position: relative;
            top: 8%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-250%, -50%);
        }

        .shape-flex {
            margin: 0px -25px;
        }

        .calender_list ul li {
            width: 60%;
            margin-left: 0;
            margin-top: 1rem;
        }

            .calender_list ul li a {
                font-size: 13px;
            }

        .update-consultation, .book-consultation {
            width: 100%;
            font-size: 16px;
        }

        button[data-toggle="collapse"] {
            font-size: 1.25rem;
        }

        .ui-datepicker .ui-datepicker-title {
            font-size: 16px !important;
        }

        .ui-datepicker .ui-datepicker-next span {
            width: 100px !important;
            left: 66% !important;
        }

        .ui-datepicker .ui-datepicker-prev span {
            width: 100px !important;
            right: 66% !important;
        }

        .ui-datepicker-calendar th span {
            font-size: 14px !important;
        }

        .calender_cont {
            width: 100% !important;
        }

        #nav-steps-row {
            top: 45px;
        }

        #main-accordion, .update-consultation-div, #rebook-accordion {
            margin-top: 130px !important;
        }

        .map_txt .map_txt_cont ul li p {
            font-size: 14px;
        }

        .w-line:after, .w-line-grn:after {
            top: -13% !important;
            width: 90px !important;
        }

        .nav-steps {
            margin-top: 10px !important;
        }

        .step-img {
            width: 20px;
        }

        li[id*=step] {
            padding: 0 10px 0 10px;
        }

        .mre-abt-chk-lbl {
            font-size: 14px;
        }
    }

    @media screen and (min-with: 476px) {
        .bottom-right {
            margin-top: 6.5rem;
            position: relative;
            top: 8%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-260%, -50%);
        }
    }

    @media screen and (min-width: 768px) {
        .shape-flex {
            width: 500px;
            margin: auto;
        }

        #what-to-expect-img-div {
            height: 350px;
        }

        .calender_list ul li {
            width: 85%;
        }


        .bottom-right {
            margin-top: 12rem;
            position: relative;
            top: 8%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-590%, -50%);
        }

        .calender_list ul {
            margin: 0 40px -10px -10px
        }


            .calender_list ul li {
                margin: 0px 1% 0 0%;
                padding: 0px 1% 1% 0;
                display: inline-block;
                vertical-align: top;
            }

                .calender_list ul li a {
                    font-size: 14px;
                }

        .colour-div {
            margin: 0px 20px;
        }
    }


    @media screen and (min-width: 992px) {
        .colour-div {
            margin: 0px 0px;
        }

        button.link {
            padding-top: 1rem;
            font-size: 14px;
        }
           #btnFind {
        margin-right: 20px;
    }
        /* #manual-address {
        margin-right: 3.4rem;
    }
*/
        .calender_list ul {
            margin: 0 40px -10px -10px
        }

        .bottom-right {
            margin-top: 12rem;
            position: relative;
            top: 8%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-135%, -230%);
        }

        .calender_list ul li {
            margin: 0px 1% 0 0%;
            padding: 0px 1% 0 0;
            display: inline-block;
            vertical-align: top;
        }

            .calender_list ul li a {
                font-size: 12px;
            }

        #buying-guides-row {
            margin-top: 3rem !important;
            margin-bottom: 3rem !important;
        }

        #thank-you-container {
            margin-top: 160px;
        }

        .shape-flex {
            margin: 0px;
        }

        #toggle-map {
            display: none;
        }

        .your-bathroom-list {
            float: right;
        }

        #bathroomonly-label, #openplan-label {
            text-align: left;
        }

        .your-bathroom-list-item {
            display: block;
        }

        .choose-bathroom {
            padding-left: 5rem !important;
        }

        #what-to-expect-img-div {
            height: 470px;
        }

        #bathroom-fitting-div, #buying-guides-div {
            margin-top: 85px;
        }

        .calender_list ul li {
            width: 49%;
        }

        .choose-colour-title {
            margin-left: 15px;
        }

        .your-room-radio-div > ul, .water-system-radio-div > ul, .your-bathroom {
            margin-left: 100px;
        }
    }
    /*@media screen and (max-width: 991px) {
    .bottom-right {
        margin-top: 12rem;
        position: relative;
        top: 8%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-590%, -50%);
    }
}*/
    @media screen and (min-width: 1020px) {
        .colour-div {
            margin: 0px 10px;
        }

        #what-to-expect-img-div {
            height: 560px;
        }

        #finance-offer-title {
            white-space: nowrap;
        }

        .calender_list ul li {
            width: 48%;
        }


            .calender_list ul li a {
                font-size: 16px;
            }

        #thank-you-msg-div-container {
            padding: 0 10rem !important;
        }

        #rebook-thank-you-msg-div-container {
            padding: 0 5rem !important;
        }

        #thank-you-msg-div {
            margin-top: 5rem;
        }

        #bathroom-fitting-div, #buying-guides-div {
            margin-top: 115px;
        }

        .choose-colour-title {
            margin-left: 25px;
        }

        .your-room-radio-div > ul, .water-system-radio-div > ul, .your-bathroom {
            margin-left: 115px;
        }
    }

@media only screen and (Min-width:446px) and (Max-width : 767px) {
    #back-button img {
        width: 90%;
        height: auto;
        transform: translate(-100%, -300%);
    }
}




    .text-center {
        text-align: center !important;
    }

    .no-users {
        pointer-events: none;
        opacity: 0.5;
        background-color: rgb(238,238,238);
    }

    /*.btnFind:hover:disabled {
    background-color: blue;
}*/



    #earliest:focus {
        background-color: blue;
    }

.text-error {
    border-color: #9E3E2D;
    border-width: 1px;
}

    /*.ui-datepicker .ui-widget-content {
    background: #86cd0b none;
}

#datepicker {
    background-color: #86cd0b;
}
*/


    /*
    MEDIA QUERIES 
*/

    @media (max-width: 40em){
        .no-store-message {
          padding: 0.5em
        }
    }