/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
YARRA STYLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
STYLE VARIABLES - Add client specific colours here
–––––––––––––––––––––––––––––––––––––––––––––––––– */

:root {
    --client-text-highlight-color: #008767;
    --client-black: #162A32;
    --client-white: white;
    --client-link-color: var(--client-text-highlight-color);
    --client-hover-text-color: var(--client-text-highlight-color);
    --client-greyBtn-bg-color: #efefef;
    --client-greyBtn-hover-color: #d4d4d4;
    --client-greyBtn-hover-bk-color: #008767;
    --client-button-bg-color: #0088d2;
    --client-button-hover-bg-color: #016699;
    --client-button-border-color: var(--client-button-bg-color);
    --client-button-border-hover-color: var(--client-button-hover-bg-color);
    --zip-danger-color: #C51A4B;
    --zip-danger-hover-color: #9E153C;
    /* footer colors */

    --footer-main-bg-color: #172a31;
    --secondary-footer-bg-color: #45555a;
}

/* General elements */

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--client-text-highlight-color);
}

a {
    color: var(--client-link-color);
}

/*
.button.button-primary, 
section.confirmationPayment .payment-method-select-items input[type="radio"]:checked ~ label, 
section.confirmationPayment .payment-method-select-items label.button-primary,  
.day-list label.button-primary, 
section.confirmationPayment .payment-method-select-items .day-list input[type="radio"]:checked ~ label, 
.rooms-card-list .card-footer label.button-primary, 
section.confirmationPayment .payment-method-select-items .rooms-card-list .card-footer input[type="radio"]:checked ~ label, 
.day-list .rooms-card-list .card-footer input:checked + label, 
button.button-primary, .appointment .toolbar .datepicker-col button, 
input[type="submit"].button-primary, 
input[type="reset"].button-primary, 
input[type="button"].button-primary{
    color: var(--client-white);
    background-color: var(--client-button-bg-color);
    border-color: var(--client-button-border-color);
}*/

.day-list input:checked+label {
    color: var(--client-text-highlight-color) !important;
    background-color: #d4d4d4;
    border-color: var(--client-text-highlight-color);
}

/*
.button.button-primary:hover, section.confirmationPayment .payment-method-select-items input[type=radio]:checked ~ label:hover, section.confirmationPayment .payment-method-select-items label.button-primary:hover, .day-list label.button-primary:hover, section.confirmationPayment .payment-method-select-items .day-list input[type=radio]:checked ~ label:hover, .day-list input:checked + label:hover, .rooms-card-list .card-footer label.button-primary:hover, section.confirmationPayment .payment-method-select-items .rooms-card-list .card-footer input[type=radio]:checked ~ label:hover, .day-list .rooms-card-list .card-footer input:checked + label:hover, .button.button-primary:focus, section.confirmationPayment .payment-method-select-items input[type=radio]:checked ~ label:focus, section.confirmationPayment .payment-method-select-items label.button-primary:focus, .day-list label.button-primary:focus, section.confirmationPayment .payment-method-select-items .day-list input[type=radio]:checked ~ label:focus, .day-list input:checked + label:focus, .rooms-card-list .card-footer label.button-primary:focus, section.confirmationPayment .payment-method-select-items .rooms-card-list .card-footer input[type=radio]:checked ~ label:focus, .day-list .rooms-card-list .card-footer input:checked + label:focus,
button.button-primary:hover,
.appointment .toolbar .datepicker-col button:hover,
button.button-primary:focus,
.appointment .toolbar .datepicker-col button:focus,
input[type=submit].button-primary:hover,
input[type=submit].button-primary:focus,
input[type=reset].button-primary:hover,
input[type=reset].button-primary:focus,
input[type=button].button-primary:hover,
input[type=button].button-primary:focus,
#aGetAvailabiliy:hover {
    background-color: var(--client-button-hover-bg-color);
    border-color: var(--client-button-border-hover-color);
    color: white;
}*/

.button,
section.confirmationPayment .payment-method-select-items input[type="radio"]:checked~label,
section.confirmationPayment .payment-method-select-items label,
.day-list input:checked+label,
.day-list label,
.rooms-card-list .card-footer label,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    box-shadow: none;
    color: var(--client-text-highlight-color);
}



.button:hover,
section.confirmationPayment .payment-method-select-items input[type="radio"]:checked~label:hover,
section.confirmationPayment .payment-method-select-items label:hover,
.day-list input:checked+label:hover,
.day-list label:hover,
.rooms-card-list .card-footer label:hover,
.button:focus,
section.confirmationPayment .payment-method-select-items input[type="radio"]:checked~label:focus,
section.confirmationPayment .payment-method-select-items label:focus,
.day-list input:checked+label:focus,
.day-list label:focus,
.rooms-card-list .card-footer label:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="button"]:hover,
input[type="button"]:focus {
    box-shadow: none;
    color: var(--client-text-highlight-color);
    border: 1px solid var(--client-greyBtn-hover-bk-color);
    /* background-color: #d4d4d4; */
}




/* Header */

.logo a img {
    height: 100px;
}

.site-header {
    background-color: white;
    border-bottom: 3px solid var(--client-black);
}

.site-header .accountNameText span,
.site-header .accountNameText span::after {
    color: var(--client-black);
}

.site-header .accountNameText span:hover,
.site-header .accountNameText span:active,
.site-header .accountNameText span:focus-within {
    background-color: var(--client-hover-bg-color);
    color: var(--client-hover-text-color);
}

.site-header .accountNameText span::after:hover,
.site-header .accountNameText span::after:focus,
.site-header .accountNameText span::after:focus-within {}

#mainMenu {
    background-color: var(--client-black);
}

#BreadcrumbSticky {
    background-color: var(--client-black);
    height: 50px;
    color: white;
}

#BreadcrumbSticky .wrap {
    height: 50px;
    padding-bottom: 5px;
}

#BreadcrumbSticky .wrap .row {
    height: 100%;
    padding-top: 0;
}

#BreadcrumbSticky .wrap .row nav ol {
    padding-top: 0;
    align-items: baseline;
}

#BreadcrumbSticky .wrap .row #CancelButtonToggle {
    padding-top: 0;
}

#BreadcrumbSticky .wrap .row #CancelButtonToggle a {
    color: white;
    background-color: var(--client-black);
    border: 1px solid white;
}

#BreadcrumbSticky .wrap .row #CancelButtonToggle a:hover {
    background-color: var(--zip-danger-color);
    border-color: var(--zip-danger-color);
}

.breadcrumb-item a,
.breadcrumb-item+.breadcrumb-item::before {
    color: white;
}

/* Loading animations */


.fa-spinner::before {
    color: var(--client-text-highlight-color);
}


/* Footer */

footer {
    margin-top: 100px;
}

footer .footer-main .footer-links .hlist>li.social-links a img {
    width: 2.5625rem;
    height: 2.5625rem;
}

.footer-links {
    width: 100%;
}

.footer-links .hlist a {
    color: #e6e6e6;
    font-weight: 300;
}

.footer-links .hlist li {
    display: inline-block;
    flex: 1 0 auto;
    margin: 0 16px;
}

.footer-links .hlist .social-links li {
    margin-right: 5px;
}


.footer-links .hlist {
    display: flex;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}


.footer-main {
    background-color: #45555a;
}

footer .footer-bottom {
    background-color: #172a31;
    color: #cfd8dc;
    font-size: .8125rem;
    line-height: 1.0625rem;
    letter-spacing: -.02rem;
}

footer .footer-bottom .footer-bottom-top {
    padding: 1.875rem .625rem;
    position: relative;
    border-bottom: 1px solid #9ca3a6;
}

footer .footer-bottom .footer-bottom-bottom {
    padding: 1.875rem .625rem;
    font-size: .875rem;
    width: 100%;
}

.yarra-city-acknowledgement {
    width: 70%;
    display: inline-block;
}

.footer-bottom-top a {
    position: absolute;
    right: 1.3125rem;
    color: white;
    text-decoration: none;
    font-size: 1rem;
}

.footer-bottom-top a i {
    padding: 15px 17px;
    background-color: #2f4046;
    font-size: 1rem;
    margin-left: 5px;
}

.footer-bottom-bottom div {
    display: inline-block;
    font-size: .75rem;
}


.footer-bottom-bottom .show-for-medium-up {
    display: inline-block;
    float: right;
    line-height: 1rem;
    text-align: right;
    width: 40%;
}

.footer-bottom-bottom .show-for-medium-up p {
    text-align: right;
}

@media (max-width: 937px) {
    .footer-links .hlist li {
        flex: none;
    }
}

@media (max-width: 897px) {
    .footer-links .hlist li {
        flex: none;
        margin: 0 10px
    }

    .social-links .hlist li {
        margin: 0 5px;
    }



    .footer-bottom-top a.back-to-top {
        position: static;
        display: block;
        margin: 0 auto 15px auto;
        padding: 10px;
        background-color: var(--client-button-bg-color);
        width: 200px;
        border-radius: 5px;
        text-align: center;
    }

    .back-to-top i {
        display: none;
    }

    .yarra-city-acknowledgement {
        width: 100%;
    }

    .show-for-medium-up {
        width: 60%;
    }
}

@media (max-width:822px) {
    .footer-links .hlist .social-links {
        margin: 0;
        margin-top: 25px;
        width: 100%;
    }
}

@media (max-width: 730px) {

    .yarra-city-acknowledgement p,
    .footer-bottom-bottom {
        text-align: center;
    }

    footer .footer-bottom .footer-bottom-top {
        border-bottom: 0px;
        padding-bottom: 0px;
    }

    .footer-bottom-bottom .show-for-medium-up p {
        display: none;
    }

    footer .footer-bottom .footer-bottom-bottom {
        padding-bottom: 20px;
        padding-top: 10px;
    }
}