body {
    font-family: 'Poppins','Open Sans', sans-serif !important;
    font-size: 0.95rem;
}

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

@media (max-width: 600px) {

    body {
        font-family: 'Poppins','Open Sans', sans-serif !important;
        font-size: 14px !important;
    }
    .clearfix-mobile::after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
    }

    .no-float-mobile{
        float:none !important;
    }

    .card-overlay {
        font-size: 14px !important;
    }

    h1 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    h4 {
        font-size: 1.1rem;
    }

    h5 {
        font-size: 1.05rem;
    }

    h6 {
        font-size: 1rem;
    }

    .card-overlay .promo-expiry{
        float:none !important;
    }
 
    .form-group.flexed {
        display: block;
    }

        .form-group.flexed > div > input {
            margin-left: 0px !important;
            margin-right: 0px !important;
        }

    .changePassword-popup-content {
        min-width: 90%;
    }
}

@media (max-width: 800px) {
    .changePassword-popup-content {
        min-width: 70%;
    }

    .RecoverAccountContainer {
        min-width: 70%;
    }
}



body::-webkit-scrollbar {
        width: 10px;
        height: 10px;
}
 
body::-webkit-scrollbar-track {
     background-color: rgba(227, 227, 227, 0.14);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}
 
body::-webkit-scrollbar-thumb {
    border-radius: 10px;
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

::placeholder {
    color: #c5c5c5 !important;
   
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins-SemiBold','Open Sans', sans-serif !important;
}
 
.title {
    font-weight: 600;
    margin: 25px 0;
}

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

.page-container {
    width: 1100px;
    margin: 0 auto; 
}

.center{
    text-align: center;
}

strong, .card-title, .list-group-header {
    font-family: 'Poppins-SemiBold';
}

.bolder {
    font-family: 'Poppins-Bold';
}

.float-right-lax{
    /** not so important float**/
    float: right;
}

.float-left-lax {
    /** not so important float**/
    float: left;
}

.clearfix::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-toggler {
    color: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0.1);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-collapse.collapse.show li.nav-item {
    border-bottom: 1px solid #ebebeb;
}


.navbar-collapse .show-collapse {
    display: block;
}


.navbar-collapse .hide-collapse {
    display: none;
}

@media (min-width: 992px) {
    .navbar-collapse .show-collapse {
        display: none;
    }

    .navbar-collapse .hide-collapse {
        display: block;
    }
}

.navbar .nav-item.active .nav-link {
    font-weight:bold;
}

#MainNavigation .nav-item a.nav-link {
    margin-right: 50px;
}
 
.nav-pills .nav-link {
    border-radius: 0px !important;
}

    .nav-pills .nav-link.active {
        border-bottom-width: 2px !important;
        font-weight: bolder;
    }

    .nav-pills .nav-link:hover:not(.active) {
        font-weight: bolder; 
    }


.booking-filter-banner {
    position: relative;
    padding: 10px;
    border: 1px solid;
    background: #ffffff;
    color: #4f4f4f;
    border-radius: 3px;
    margin-top: 20px;
    font-size: 1rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}

    .booking-filter-banner .clear-banner:after {
        content: '\e5cd';
        font-family: 'Material Icons';
        float: right;
        background: #fbfbfb;
        color: #919191;
        width: 30px;
        height: 30px;
        padding: 1px 6px;
        border-radius: 20px;
        border: 1px solid #d9d9d9;
        margin-top: 4px;
        cursor: pointer;
    }


.message.error {
    color: #d31414;
}

.message.success {
    color: #11b93f;
}

.summary-message-container {
    display: none;
    margin: 10px 0;
    color: black;
    border-left: 10px solid rgba(0,0,0,0.39);
    padding: 10px;
    background-color: #eeeeee;
}

    .summary-message-container.success {
        border-left: 10px solid #009b28;
        background-color: #6dba3d;
        color: white;
    }

    .summary-message-container.error {
        border-left: 10px solid #ce2c2c;
        background-color: #e68181;
        color: white;
    }

.no-event{
    pointer-events:none;
}

label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}


input.borderless, select.borderless {
    border: none;
    outline: none !important;
}


#condensedMenuBar.collapse {
    position: absolute;
    z-index: 2000;
    width: 30%;
    left: 0;
    padding: 16px;
}

#condensedMenuBar.collapsing {
    position: absolute;
    width: 30%;
    left: 0;
    top: 55px;
    padding: 16px; 
}

#condensedMenuBar.collapse.show {
    width: 30%;
    left: 0;
    top: 55px; 
}
@media (max-width: 991px) {
    #menuBar.collapse {
        position: absolute;
        z-index: 2000;
        width: 30%;
        right: 0;
        padding: 16px;
    }

    #menuBar.collapsing {
        position: absolute;
        width: 30%;
        right: 0;
        top: 55px;
        padding: 16px;
    }

    #menuBar.collapse.show {
        width: 30%;
        right: 0;
        top: 55px;
    }
}

@media (max-width: 750px) {
    #menuBar.collapsing, #condensedMenuBar.collapsing {
        width: 50%; /* width of sidebar */
    }

    #menuBar.collapse.show, #condensedMenuBar.collapse.show {
        width: 50%; /* width of sidebar */
    } 
}

@media (max-width: 500px) { 
    #menuBar.collapsing, #condensedMenuBar.collapsing { 
        width: 80%; /* width of sidebar */
    }

    #menuBar.collapse.show, #condensedMenuBar.collapse.show {
        width: 80%; /* width of sidebar */
    } 
}

.section{
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.section > .title{
    margin-bottom: 20px;
}

.w-initial{
    width: initial !important;
}

.description{
    white-space: pre-line;
}

.clickable .svg-icon {
    pointer-events: none;
}

.svg-icon{
    margin: 0 5px;
}

.svg-icon.icon-sm {
    height: 18px; 
    width: 18px; 
}

.svg-icon.rating-star {
    transform: scale(1.3);
    fill: #ffa834;
    margin: 0px;
}

.svg-icon.rating-star.empty { 
    fill: #e4e4e4; 
}

.carousel .card {
    border: none;
}

.card-img { 

    background-color: #eee;
}


.card-img.square{
    width: 100%;
    height: auto; 
    position:relative;
}


.card-img.square::after{
  content: "";
  display: block;
  padding-bottom: 100%;
}
 

.card-img.square > img{
    position: absolute;
    top: 0;
    left: 0;
}

.card-img.square > .carousel{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
 
.card-img > img {
    width: 100%;
    height: 100%;
    object-fit:cover;
    object-position:center;
}

.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: black;
    font-size: 18px;
    background-color: rgba(246, 246, 246, 0.5);
    padding-bottom: 10px;
}

 .card-overlay .promo-expiry{
        float:right;
}


.photo-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
}

.photo-thumb-sm {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

    .photo-thumb.round, .photo-thumb-sm.round {
        border-radius: 35px;
        border: 1px solid #dadada;
    }


.embed-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.embed-responsive-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

#MainContainer {
    position: relative;
    min-height: 100vh;
    padding-bottom: 300px; /* Footer height */
}

@media (max-width: 768px) 
{ 
    #MainContainer { 
        padding-bottom: 520px; /* Footer height */
    }

    footer {
        text-align:center;
    }
}


footer {
    text-align: left;
    position: absolute;
    bottom: 0;
    width: 100%;
    min-height: 220px; 
}
 
.hover-control.carousel-control > .icon {
    opacity: 0;
    pointer-events:none;
}

.hover-control.carousel-control:hover > .icon {
    opacity: 0.5;
}


.carousel-control > .icon {
    background-color: #f4f4f4;
    color: black;
    height: 40px;
    width: 40px;
    margin: 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-duration: .6s;
    transition-property: opacity;
}

.carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 100%;
}
 
.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: .6s;
    transition-property: opacity;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
    opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
    opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
    transform: translateX(0);
    transform: translate3d(0, 0, 0);
}

.location-detail {
    padding: 20px;
    background-color: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 5px;
    margin-bottom: 20px;
}

    .location-detail > div {
        display: block;
        margin-bottom: 13px;
    }

        .location-detail > div > label {
            display: block;
        }

    .location-detail .opening-hours-item {
        display: block;
    }

        .location-detail .opening-hours-item > .day {
            width: 100px;
            display: inline-block;
        }

    .location-detail a {
        color: #000000;
        text-decoration: underline;
        text-decoration-color: #c8c8c8;
    }



#CompanyHeader {
    z-index: 50;
}

#CompanyHeader .btn {
    width: initial !important;
}

#Copyright {
    font-size: 12px;
}

#Copyright a { 
    font-weight: 600;
}

 
/** SLIDER **/
#MainSliderContainer .full-height {
    height: 800px;
}

#MainSliderContainer .half-height {
    height: 500px;
}

#MainSliderContainer .carousel {
    position: relative; 
    height: inherit;
    overflow: hidden;
}

.carousel-inner.row{
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.carousel .carousel-inner, .carousel .carousel-item {
    width: 100%;
    height: 100%;
}


.carousel img {
    vertical-align: middle;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


#MainSliderContainer .carousel-indicators {
    z-index: 0;
}
 
 
@media (min-width: 765px) { 
    .carousel-multi .carousel-inner .active + .carousel-item {
        display: block;
    }

    .carousel-multi.multi-3 .carousel-inner .active + .carousel-item,
    .carousel-multi.multi-3 .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }

    .carousel-multi.multi-4 .carousel-inner .active + .carousel-item,
    .carousel-multi.multi-4 .carousel-inner .active + .carousel-item + .carousel-item,
    .carousel-multi.multi-4 .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }


    .carousel-multi .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-multi .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-multi.multi-3 .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    .carousel-multi.multi-4 .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    .carousel-multi.multi-4 .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }

    .carousel-multi.multi-2 .carousel-inner .active.carousel-item + .carousel-item + .carousel-item,
    .carousel-multi.multi-3 .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .carousel-multi.multi-4 .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0; 
        z-index: -1;
        display: block;
        visibility: visible;
    }

    .carousel-multi.multi-2 .carousel-inner .active.carousel-item + .carousel-item + .carousel-item,
    .carousel-multi.multi-3 .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .carousel-multi.multi-4 .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item { 
        right: -50%; 
    }

     
    .carousel-multi.multi-3 .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        right: -33.33%;
    }
     
    .carousel-multi.multi-4 .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        right: -25%;
    }


    .carousel-multi .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .carousel-multi .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-multi .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-multi .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-multi.multi-3 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .carousel-multi.multi-4 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .carousel-multi.multi-4 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* farthest right hidden item must be also positioned for animations */
    .carousel-multi .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }


    /* right or prev direction */
    .carousel-multi .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-multi .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-multi .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-multi.multi-3 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .carousel-multi.multi-4 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .carousel-multi.multi-4 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

    .carousel-control.hide-on-full{
        display: none;
    }
}
 

@media (max-width: 1100px) {
    .page-container {
        width: 100%;
    }
}

#SimplePhotoSection {
    max-width: 500px;
    width: 50%;
    float: left;
    margin: 0 20px 20px 0;
}

#SimplePhotoSection {
    /*display: flex;
    justify-content: center;
    align-items: center;*/
}

#SimplePromoSlider  {
    height: 500px;
}


#SimplePromoSlider .carousel-item .card, #SimplePromoSlider .promo-item {
    height: 100%;
    background-color: transparent;
}

#SimplePromoSlider .carousel-item img {
    object-fit: cover;
}

#SimplePromoSlider .card {
    padding-left: 50px;
    padding-right: 50px;
}

#SimplePromoSlider .card-overlay{    
    padding-left: 50px;
    padding-right: 50px;
}


#SimplePromoSlider .carousel-control-next {
    right: -10px;
}

#SimplePromoSlider .carousel-control-prev {
    left: -10px;
}

@media (max-width: 550px) {
    #SimplePhotoSection {
        max-width: initial;
        width: 100%;
        float: none;
        margin: 20px 0px;
    }

    #SimplePromoSlider .card {
        padding-left: 0px;
        padding-right: 0px;
    }


    #SimplePromoSlider .carousel-control-next {
        right: 0px;
    }

    #SimplePromoSlider .carousel-control-prev {
        left: 0px;
    }
}



#PromoSlider .promo-item, #PromoSlider .promo-item .card {
    height: 100%;
}

#VideoCarousel .video-item .card-img:not(.embed-container) {
    width: 100%;
    height: auto;
    max-height: 500px;
    overflow: hidden;
}
#VideoCarousel .video-item .card-img.embed-container {
    max-height: 500px;
}


#VideoCarousel .card {
    padding-left: 50px;
    padding-right: 50px;
}

#VideoCarousel .carousel-control-next {
    right: -10px;
}

#VideoCarousel .carousel-control-prev {
    left: -10px;
}

.video-item .card-img .play-overlay {
    background-color: rgba(255, 255, 255, 0.51);
    position: absolute;
    transform: scale(0.8);
    min-height: 150px;
    min-width: 150px;
    height: 100%;
    width: 100%;
    -webkit-mask: url(Images/play-button.svg) no-repeat 50% 50%;
    mask: url(Images/play-button.svg) no-repeat 50% 50%;
}

.video-item .card-img:hover .play-overlay {
    background-color: white;
    transition: background-color 0.3s ease-in-out;
}

.clickable-overlay {
    background-color: rgba(0, 0, 0, 0.51);
    cursor:pointer;
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 20px;
    font-weight: 600;
    color: white;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.card-img:hover .clickable-overlay {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.clickable-overlay .title {
    padding: 10px;
    border: 2px solid #fff;
    border-radius: 26px;
    margin: auto;
}


.clickable:hover {
    cursor: pointer;
}

#BlogCarousel .clickable > .card:hover .card-img {
    filter: grayscale(1);
    transition: filter 0.5s ease-in-out;
}

#HomeServicesList .tab-content{
    min-height: 160px;
}

.service-item .card {
    display: flex;
    flex-direction: row;
}

.service-item .card-img.square {
    max-width: 200px;
    max-height: 200px; 
    position: relative;
}

.service-detail-item {
    display: table;
    border-collapse: separate;
    border-spacing: 35px 8px;
}

.service-detail-item > div {
    display: table-cell;
    vertical-align: top;
}

.service-detail-item div:first-child { 
    margin-left: -35px;
}
.service-detail-item div:last-child { 
    margin-right: -35px;
}

.service-detail-item .service-photo {
    width: 255px;
}

@media (max-width: 500px) {
    .service-detail-item {
        display: block;
        border-collapse: separate;
        border-spacing: 35px 8px;
    }
        .service-detail-item > div {
            display: block;
            vertical-align: top;
            margin-bottom: 20px;
        }

        .service-detail-item div:first-child {
            margin-left: 0;
        }

        .service-detail-item div:last-child {
            margin-right: 0;
        }

        .service-detail-item .service-photo {
            width: 100%;
            margin-bottom: 20px;
        }
}


#BookContainer{
    padding-top:20px;
    padding-bottom: 20px;
}

#LocationMap {
    height: 300px;
    width: 100%;
}

.loader-circle {
    background-color: transparent; 
    min-height: 150px;
    min-width: 150px;
    height: 100%;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
}

.loader-circle > img{
    height: 100px;
    width: 100px;
    margin: 0 auto;
}


.loader-circle.loader-sm > img{
    height: 50px;
    width: 50px; 
}


.load-more-container {
    width: 200px;
    text-align: center;
    margin: 0 auto;
    padding: 34px;
}
 

.popup-overlay {
    position: fixed;
    overflow-y: scroll;
    overscroll-behavior: contain;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.43);
    z-index: 999;
    transition: 0.5s ease-in-out;
}

.popup-container {
    margin: 30px auto;
    width: 1100px;
    max-width: 95%;
    padding: 20px;
    min-height: 80vh;
    position: relative;
}

.popup-body {
    background-color: #ffffff;
}

.popup-close {
    cursor:pointer;
    background-color: rgba(255, 255, 255, 0.51);
    position: absolute;
    transform: scale(0.2);
    height: 100px;
    width: 96px;
    top: -26px;
    right: -15px;
    -webkit-mask: url(Images/close-x.svg) no-repeat 50% 50%;
    mask: url(Images/close-x.svg) no-repeat 50% 50%;
}

.popup-body .card-img{
    height: 600px;
    position:relative;
}

.popup-body .carousel{
    height:100%;
    width:100%;
    
}
.popup-body .carousel img {
    height: 100%;
    width: 100%;
        object-fit: contain;
}

.loading-item {
    opacity: 0.3;
    pointer-events: none;
}

#MainContent.loading-item {
    opacity: 1;
    pointer-events: none;
}

.calendar-picker-message-container {
    border-radius: 5px;
    background: white;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    padding: 1rem;
}

.calendar-previous-icon {
    display: block;
    height: 37px;
    width: 30px;
    float: left;
    background-image: url('Images/left_arrow.png');
}

.calendar-next-icon {
    display: block;
    height: 37px;
    width: 30px;
    padding: 0;
    float: right;
    margin: 0;
    background-image: url(Images/right_arrow.png);
}


.img-uploader {
    margin-bottom: 10px;
    padding: 10px;
    overflow: visible;
    border-radius: 3px;
    width: 150px;
    height: 150px;
    border: 1px solid #dddddd;
    text-align: center;
    display: inline-table;
    margin-right: 15px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}


    .img-uploader input {
        cursor: pointer !important;
        position: absolute;
        margin: 0;
        padding: 0;
        width: 150px;
        height: 150px;
        outline: none;
        opacity: 0;
    }

    .img-uploader img.requestPhotoThumbnail {
        background-color: rgba(246, 246, 246, 0.74);
        width: 100%;
        height: 100%;
        border-radius: 10px;
        border: 2px dashed #d7d7d7;
    }

    .img-uploader .removePhotoBtn {
        width: 30px;
        position: absolute;
        border-radius: 30px;
        border: 2px solid #545454;
        background: white;
        padding: 4px;
        box-shadow: 0px 3px 4px 1px rgba(0,0,0,0.39);
        cursor: pointer;
        z-index: 1;
    }

    .img-uploader .removePhotoBtn2 {
        cursor:pointer;
        background: #f3f3f3;
        border-radius: 20px;
        width: 40px;
        height: 40px;
        padding: 8px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    }
        .img-uploader .removePhotoBtn img {
            width: 100%;
            height: 100%;
        }

.img-uploader {
    margin-bottom: 10px;
    padding: 10px;
    overflow: visible;
    border-radius: 3px;
    width: 150px;
    height: 150px;
    border: 1px solid #ededed;
    text-align: center;
    display: inline-table;
    margin-right: 15px;
}


    .img-uploader input {
        cursor: pointer !important;
        position: absolute;
        margin: 0;
        padding: 0;
        width: 150px;
        height: 150px;
        outline: none;
        opacity: 0;
    }

    .img-uploader img.requestPhotoThumbnail {
        background-color: rgba(246, 246, 246, 0.74);
        width: 100%;
        height: 100%;
        border-radius: 10px;
        border: 2px dashed #d7d7d7;
    }

    .img-uploader .removePhotoBtn {
        width: 30px;
        position: absolute;
        border-radius: 30px;
        border: 2px solid #545454;
        background: white;
        padding: 4px;
        box-shadow: 0px 3px 4px 1px rgba(0,0,0,0.39);
        cursor: pointer;
        z-index: 1;
    }

        .img-uploader .removePhotoBtn img {
            width: 100%;
            height: 100%;
        }

/*** Theme Defaults ***/

hr {
    border-color: #eeeeee;
    opacity: 0.2;
}

.nav-tabs {
    width: 100%;
    display: table;
    border-bottom: 5px solid #000000;
}

.nav-tabs .nav-item.active, .nav-tabs .nav-link.active {
        color: #ffffff;
        background-color: #000000;
        border: none;
}

.text-validate {
    color: red !important;
}
 
.text-primary {
    color: #000000;
}

.text-primary a {
        color: #000000;
    }
a.text-primary:hover, a.text-primary:focus {
    color: #000000;
}
 
.action-link {
    cursor: pointer;
    font-weight: 600;
}


.btn {
    font-weight: 600;
}

.btn-primary {
    color: #ffffff;
    background-color: #000000;
    /* border: none;*/ 
    border: 2px solid #000000;
    width: 100%;
}

    .btn-primary:hover, .btn-primary:active {
        color: #ffffff;
        background-color: #000000;
        /*border: none;*/
    }

.btn-secondary {
    background-color: #fff;
    border: 2px solid #000000;
    width: 100%;
    color: #000000;
}

    .btn-secondary:hover, .btn-secondary:active {
        background-color: #fff;
        color: #000000;
        border: 2px solid #000000;
    }

.btn-time {
    background-color: #fff;
    border: 2px solid #000000;
    color: #000;
    font-size: 12px;
    border-radius: 21px;
    margin: 10px;
}

    .btn-time:hover {
        background-color: #000000;
        color: #ffffff; 
    }


.btn.disabled, .btn:disabled {
    opacity: 1;
    color: #fff;
    background-color: #8e8e8e;
    border-color: #eee;
    cursor: not-allowed;
}

.btn-secondary.disabled, .btn-secondary:disabled {
    color: #fff !important;
    background-color: #c3c3c3 !important;
    border-color: #c3c3c3 !important;
    cursor: default;
    pointer-events: none;
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff !important;
    background-color: #c3c3c3 !important;
    border-color: #c3c3c3 !important;
    cursor: default;
    pointer-events: none;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.coupon-container {
    display: grid;
    margin-bottom: 10px;
}

.loyalty-codes .coupon-btn-detail {
    display: table-row;
    width: 100%;
    margin: 2px 0;
}


.loyalty-codes .coupon-btn.redeemed {
    background-color: transparent;
    border: 3px solid #099809;
    border-radius: 20px;
    padding: 8px;
    display: inline-table;
    vertical-align: top;
    cursor: pointer;
}

.loyalty-codes .coupon-btn {
    background-color: transparent;
    /*border: 2px solid #000000;*/
    border-radius: 20px;
    padding: 8px;
    display: inline-table;
    vertical-align: top;
    cursor: pointer;
}

.btn-package-redeem {
    background-color: #588d50;
    color: #ffffff;
    border: 2px solid;
}

.btn-package-redeem.redeemed {
    background-color: white;
    color: #25ba00;
    border: 3px solid;
}

.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #000000 !important;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    
}


.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: rgba(255,255,255,0.12); 
    outline: 0;
}

.flexed {
    display: flex;
}
  
.form-group.flexed {
    display: flex;
}

    .form-group.flexed label {
        min-width: 110px;
    }

    .form-group.flexed > div {
        width: 100% !important;
    }


.list-group .list-group-item:hover {
    background-color: rgba(255,255,255,0.15);
    cursor: pointer;
}

.popup-list ul li:hover {
    background-color: rgba(255,255,255,0.15);
    cursor: pointer;
}


footer {
    background-color: #ffffff;
    color: #303030;
}

    footer a, footer .svg-icon {
        opacity: 0.8;
        color: #303030;
        fill: #303030;
    }

        footer .svg-icon:hover, footer a:hover {
            opacity: 1;
        }

.nav-container {
    background-color: #ffffff;
    color: #000000;
}

.navbar .navbar-nav .nav-link {
    color: #000000;
    opacity: 0.8;
}

    .navbar .navbar-nav .nav-link:hover {
        opacity: 1;
    }

#MainSliderContainer {
    color: #000000;
}


.horizontal-menu {
    white-space: nowrap;
    position: relative;
    padding: 0 20px;
    box-sizing: border-box;
    -ms-overflow-style: none;
}

 
.pn-ProductNav {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    position: relative;
}

.pn-ProductNav .js {
    display: none;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.pn-ProductNav::-webkit-scrollbar {
    display: none;
}
 
.pn-ProductNav_Contents {
    float: left;
    transition: transform .2s ease-in-out;
    position: relative;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    display: block !important; 
}

.pn-ProductNav_Contents-no-transition {
    transition: none;
}

.pn-ProductNav_Link {
    text-decoration: none;
    color: #888;  
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border: 1px solid transparent;
    padding: 0 11px; 
    margin-bottom: -1px;
} 
 
 

.pn-Advancer {
    appearance: none;
    background: transparent;
    padding: 0;
    border: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    transition: opacity .3s;
}

.pn-Advancer:hover {
   cursor: pointer;
}

.pn-Advancer_Left {
    left: 0; 
}

.horizontal-menu[data-overflowing="both"] .pn-Advancer_Left, .horizontal-menu[data-overflowing="left"] .pn-Advancer_Left {
    opacity: 1;
}

 

.pn-Advancer_Right {
    right: 0;  
}

.horizontal-menu[data-overflowing="both"] .pn-Advancer_Right, .horizontal-menu[data-overflowing="right"] .pn-Advancer_Right {
    opacity: 1;
}



.pn-Advancer_Icon {
    transform: scale(0.5);
    width: 20px;
    height: 44px;
    fill: #bbb;
}

.pn-ProductNav_Indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100px;
    background-color: transparent;
    transform-origin: 0 0;
    transition: transform .2s ease-in-out, background-color .2s ease-in-out;
}

.pricing-item {
    display: table;
    width: 100%;
    border-bottom: 1px solid rgb(214 214 214 / 39%);
}
 

.pricing-subitem label.left-detail {
    font-weight: 100;
}

.pricing-subitem.success {
    color: #099809;
}

.pricing-item .left-detail, .pricing-subitem .left-detail {
    float: left;
    width: 100px;
    text-align: left;
}


.pricing-item .right-detail, .pricing-subitem .right-detail {
    float: right;
    width: 100px;
    text-align: right;
}

.pricing-item .middle-detail, .pricing-subitem .middle-detail {
    font-size: 10px;
    display: table-cell;
    text-align: center;
    width: 70%;
    padding: 0px;
    vertical-align: top;
    margin: 0px;
    float: left;
}


    .pricing-item .middle-detail.error, .pricing-subitem .middle-detail.error {
        color: red;
    }



.pricing-subitem {
    display: table;
    width: 100%;
}

.pricing-item:last-child {
    border-bottom: none;
}

.hide-on-mobile {
    display: inherit;
}


.show-on-mobile {
    display:none !important;
}

@media (max-width: 600px) {
    .hide-on-mobile {
        display: none !important;
    }


    .show-on-mobile {
        display: inherit !important;
    }
}


.numberSpinner-widget {
    display: inline-flex;
}

.numberSpinner-widget input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.numberSpinner-widget input[type=number]::-webkit-inner-spin-button,
.numberSpinner-widget input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.numberSpinner-widget .input[type="number"] {
    border: 2px solid #ddd;
    display: inline-flex;
}


.numberSpinner-widget .btn {
    outline: none;
    -webkit-appearance: none;
    background-color: #d8d9de;
    border: none;
    align-items: center;
    justify-content: center;
    width: 25px;
    padding: 0;
    height: 25px;
    font-weight: bolder;
    border-radius: 50%;
    margin: 0;
    position: relative;
}

.numberSpinner-widget input[type=number] {
    max-width: 4rem;
    min-width: 4rem;
    background: transparent;
    border: none;
    outline: none !important;
    border-width: 0 2px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    z-index: 9;
}

.numberSpinner-widget select {
    max-width: 4rem;
    min-width: 4rem;
    height: 26px;
    opacity: 0;
    position: absolute;
    left: 25px;
    top: 0px;
    width: calc(100% - 59px);
    z-index: 1;
}

.number-spinner  {
    opacity: 0; 
} 

.numberSpinner-widget .number-spinner {
    opacity: 1;
}


.numberSpinner-widget .btn.disabled {
    pointer-events:none;
    opacity: 0.3;
}

.number-badge {
    border-radius: 50% !important;
    padding: 6px !important;
    min-width: 25px !important;
    min-height: 25px;
    border: 1px solid #eee;
    color: #3a3a3a !important;
    background: #f1f1f1 !important;
}

 ::-webkit-input-placeholder {
    text-align: center !important;
}
input[type="search"] { 
     -webkit-appearance: searchfield;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}


.popup-btn {
    min-width: 150px;
    margin-top: 25px;
    width: initial !important;
}

.page-popup {
    position: fixed;
    background: rgba(93, 92, 92, 0.51);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.popup-content {
    max-height: 90%;
    overflow-y: auto;
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    background: #fff;
    box-shadow: 1px 1px 1px #b5ada7;
    padding: 16px;
    transform: translateY(-50%);
}

.popup-list ul {
    list-style-type: none;
    text-align: left;
    padding: 0;
}

    .popup-list ul li {
        font-weight: 600;
        padding: 10px;
        border-bottom: 1px solid #eee
    }


        .popup-list ul li.divider {
            border-bottom: none;
        }

.popup-list li.divider:hover {
    background-color: transparent !important;
    cursor: default !important;
}

ul.custom-counter {
    padding: 0;
    list-style: none;
}

    ul.custom-counter li {
        counter-increment: step-counter;
        margin-bottom: 10px;
    }

    ul.custom-counter li > * {
        margin-left: 30px;
    }

    ul.custom-counter li:before {
        content: counter(step-counter);
        display: table-cell;
        float: left;
        font-size: 8px; 
        background-color: #3c3c3c;
        color: white;
        font-weight: bold;
        padding-top: 4px;
        border-radius: 50%;
        min-width: 20px;
        min-height: 20px;
        text-align: center;
    }

.close-icon {
    height: 20px;
    float: right;
    cursor: pointer;
}

.card-title {
    font-weight: 600;
}

span.divider:after {
    /* Jira COJ-3507 - Login Efficiency - 2026-08-06 - Changing the literal U+25CF below to its CSS escape for the same
       reason as the U+25BC further down this file (see the long note there): with nothing declaring this stylesheet's
       encoding the raw UTF-8 bytes were decoded one character per byte and the dot rendered as mojibake. */
    content: '\25CF';
    margin: 0px 10px;
    color: #e0e0e0;
}

.subtitle {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #ababab;
}

    .subtitle.small {
        font-size: 10px !important;
    }


.legend-icon {
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 50%;
    margin: -1px 9px;
}

.status-text.small {
    font-weight: 600;
    text-transform: uppercase !important;
    font-size: 10px;
    margin-left: 10px;
}

::placeholder {
    text-align: left !important;
}
 

/**************************************** CUSTOMER ***************************************/

#ClientAccountContainerTogglePane {
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 100%;
    background: white;
    z-index: 1;
}

    #ClientAccountContainerTogglePane:hover {
        cursor: pointer;
        background: #fbfbfb;
        border-right: 1px dotted #efefef;
    }

    #ClientAccountContainerTogglePane.open:hover:before {
        /* Jira COJ-3507 - Login Efficiency - 2026-08-06 - Changing the literal U+2BC8 below to its CSS escape, same
           encoding reason as the other content glyphs in this file. */
        content: '\2BC8';
        position: absolute;
        top: 50%;
        left: 1px;
        color: #c1c1c1;
        font-size: 13px;
    }

    #ClientAccountContainerTogglePane.minimized:hover:before {
        /* Jira COJ-3507 - Login Efficiency - 2026-08-06 - Changing the literal U+2BC7 below to its CSS escape, same
           encoding reason as the other content glyphs in this file. */
        content: '\2BC7';
        position: absolute;
        top: 50%;
        left: 1px;
        color: #c1c1c1;
        font-size: 13px;
    }

.panel-container {
    font-size: 14px;
    width: 500px;
    max-width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    right: -100%;
    background-color: white;
    z-index: 100;
    box-shadow: 0px 4px 9px -4px #0d0d0d;
    -webkit-box-shadow: 0px 4px 9px -4px #0d0d0d;
}
 
    .panel-container .panel {
        position: absolute;
        overflow: auto;
        width: 100%;
        height: 100%;
        border: none !important;
        padding: 20px !important;
        -webkit-box-shadow: none;
        box-shadow: none;
    }


    .panel-container hr {
        margin-left: -20px;
        margin-right: -20px;
    }

    .panel-container .subtitle .material-icons {
        font-size: 12px;
        margin-right: 6px;
    }


    .panel-container .close-btn {
        cursor: pointer;
        padding: 10px;
        font-size: 16px;
    }


    .panel-container label {
        margin-bottom: 3px;
    }

    .panel-container input, .panel-container select {
        text-align: left;
        background-color: white;
    }

    .panel-container form.view-mode .view-element {
        display: initial;
    }

    .panel-container form.view-mode .edit-element, .panel-container form.view-mode .add-element {
        display: none;
    }

    .panel-container form.edit-mode .view-element, .panel-container form.edit-mode .add-element {
        display: none;
    }

    .panel-container form.edit-mode .edit-element {
        display: initial;
    }
     
    .panel-container .edit-profile-element .form-group {
        margin-bottom: 10px;
    }

    .panel-container.loading:after, .activity-box.loading:after {
        content: "Please wait \A " url(Images/ajax-loader-sm.gif);
        background: white;
        margin: 0 auto;
        top: 50%;
        width: 180px;
        padding: 23px;
        text-align: center;
        position: absolute;
        white-space: pre;
        left: 0;
        right: 0;
        border-radius: 10px;
        transform: translateY(-50%);
        font-weight: bolder;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    }

#ClientDetailTabs .nav-item.active, #ClientDetailTabs .nav-link {
    font-size: initial !important;
    background-color: #ffffff !important;
    font-size: 12px !important;
}

    #ClientDetailTabs .nav-item.active, #ClientDetailTabs .nav-link.active {
        color: #000000;
        border: none;
        font-weight: bold;
    }

#ClientDetailTabs {
    display: block;
    border-bottom: 3px ​solid #eeeeee !important;
}

#ClientDetailTabs  {
    width: 100%;
    display: table;
    /* Jira 230 - Customer Sub-Profiles - 2026-08-19 - Adding table-layout: fixed below because the default
       "auto" table layout sizes each cell to just fit its content -- fine when every tab had a wide text
       label, but once the tabs became icon-only, each cell shrank to the icon's own tiny width and the whole
       row clustered on the left instead of spreading evenly across the full strip. Fixed layout forces every
       .nav-item cell to the same width regardless of content. */
    table-layout: fixed;
    border-bottom: 5px solid #000000;
}

    #ClientDetailTabs .nav-item.active, #ClientDetailTabs .nav-link.active { 
        background-color: #000000;
        border: none;
    } 

    #ClientDetailTabs .nav-item {
        background-color: transparent;
        border: none;
        text-transform: uppercase;
    }

    #ClientDetailTabs .nav-item, #ClientDetailTabs .nav-link {
        color: #303030;
        background-color: transparent;
        border: none;
    }

    #ClientDetailTabs .nav-item {
        display: table-cell;
    }
     

    #ClientDetailTabs .nav-item {
        background-color: transparent;
        border: none;
        text-transform: uppercase;
    }

    #ClientDetailTabs nav-item, .nav-tabs .nav-link {
        color: #303030;
        background-color: transparent;
        border: none;
    }

    #ClientDetailTabs .nav-link {
        width: 100% !important;
        display: table;
        text-align: center;
        padding: 10px;
    }

/* START - Jira COJ-3327 - Fix Customer Details Icons - 2026-09-25
   Adding below because per the COJ-3327 mockup the account panel's icon-only tab strip should use much bigger icons
   and badges, matching the same change on the Staff Calendar's customer panel (CalendarModule module.css). Sizes are
   inline styles on each tab in _ClientDetail.cshtml, so !important is needed to win over them; setting them once
   here keeps every tab (including the conditional Products / Sub-Profiles tabs) consistent. */
#ClientDetailTabs .nav-link .material-icons {
    font-size: 25px !important;
}

        #ClientDetailTabs .nav-link > span > span[class*="-count"] {
            /* Jira COJ-3327 - Fix Customer Details Icons - 2026-09-25 - Enlarging the badge and its number below (was 20px / 0.72rem) because testing feedback asked for bigger, easier-to-read counts; bold keeps two-digit counts legible at this size. */
            top: -8px !important;
            right: -10px !important;
            min-width: 20px !important;
            height: 20px !important;
            line-height: 20px !important;
            font-size: 10px !important;
            font-weight: 600 !important;
            padding: 0 4px !important;
            border-radius: 12px !important;
        }

/* Changing the strip below from the equal-width table cells above to a space-between flex row because testing on
   the Staff Calendar's matching panel showed the table layout leaves a gap at each end (each icon sits centred in
   its own cell, so the first and last icons are inset by half a cell); the mockup has them running edge to edge.
   nowrap keeps all tabs on one line, and the .nav-link width:100% above is reset so each tab only takes its icon's
   width and space-between can spread the rest evenly. The 20px side padding cancels the -20px bleed margins on the
   strip's wrapper div in _ClientDetail.cshtml, so the first/last icons line up with the panel content's edges.
   These must stay below the rules above so they win. */
#ClientDetailTabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    padding: 0 20px !important;
}

/* Hiding any .nav clearfix pseudo-elements below because in a flex row they become empty flex items at each end,
   which space-between would make room for and push the real tabs inwards. */
#ClientDetailTabs::before,
#ClientDetailTabs::after {
    display: none !important;
}

#ClientDetailTabs .nav-item {
    display: block !important;
    flex: 0 0 auto !important;
}

#ClientDetailTabs .nav-link {
    width: auto !important;
    display: block !important;
    padding: 10px 8px !important;
}
/* END - Jira COJ-3327 - Fix Customer Details Icons - 2026-09-25 */


.user-round-thumbnail {
    display: table-cell;
    text-align: center;
    vertical-align: top;
    border-radius: 50%;
}

    .user-round-thumbnail img {
        width: 50px;
        height: 50px;
        object-fit: cover;
    }

    .user-round-thumbnail .initials {
        width: 50px;
        height: 50px;
        font-size: 16px;
        display: block;
        background-color: #eee;
        color: #808080;
        line-height: 50px;
        font-weight: 900;
        border-radius: 50%;
    }

    .user-round-thumbnail.thumbnail-sm img {
        width: 25px;
        height: 25px;
        object-fit: cover;
    }

    .user-round-thumbnail.thumbnail-sm .initials {
        width: 25px;
        height: 25px;
        font-size: 8px;
        line-height: 25px;
    }

.client-detail-card {
    display: flex;
    align-items: center;
}

    .client-detail-card .user-loyalty {
        float: right;
        margin-left: 30px;
        display: flex;
    }

        .client-detail-card .user-loyalty .material-icons {
            font-size: 11px;
            margin-right: 5px;
        }


#ClientAllergyContainer .allergy-item {
    display: flex;
    align-items: center;
    display: flex;
    align-items: center;
    padding: 4px 0px;
    border-bottom: 1px dashed #c7c7c7;
}

#ClientAllergyContainer input.allergy-name {
    margin-right: 10px;
    height: 15px;
    padding: 0;
    border: none;
}



.NoOutLine {
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-width: 1.5px;
}

    .NoOutLine:focus {
        outline: none;
        border-bottom-color: rebeccapurple;
    }

input[type="password"]::placeholder {
    text-align: left;
}

.changePassword-popup-content {
    overflow-y: auto;
    position: relative;
    top: 50%;
    width: 450px;
    max-width: 90%;
    text-align: center;
    background: #fff;
    box-shadow: 1px 1px 1px #b5ada7;
    transform: translateY(-50%);
    margin: auto;
    border-radius: 10px;
    padding: 16px;
}

.togglePassword_icon {
    position: absolute;
    top: 5px;
    right: 25px;
    width: 20px;
    font-size: 20px;
}

    .togglePassword_icon::after {
        position: absolute;
        content: '\e8f5';
        font-family: 'Material Icons';
    }

    .togglePassword_icon.show::after { 
        content: '\e8f4';
        font-family: 'Material Icons';
    }

.password_rules {
    color: grey;
    margin-bottom: 12px;
    margin-top: 10px;
}


.flat-btn {
    font-size: 10px;
    border: 1px solid #c5c5c5;
    padding: 1px 11px;
    border-radius: 4px;
    background-color: #f3f3f3;
    cursor: pointer;
}

.hide {
    display: none !important;
}

.faux-select {
    display: flex !important;
    align-items: center;
}

    .faux-select .displayed {
        position: absolute;
        margin-left: 10px;
    }

        .faux-select .displayed:after {
            /* Jira COJ-3507 - Login Efficiency - 2026-08-06 - Changing the literal U+25BC (down-pointing triangle)
               below to its CSS escape because it was rendering as three garbage characters beside the country code on
               the login popup. The content of this file is UTF-8, but it had no byte order mark and no @charset rule,
               so the browser had nothing telling it the encoding and decoded the glyph's three UTF-8 bytes one
               character per byte. Every other stylesheet in this solution (module.css, standards.css) does start with a
               BOM, which is why only this one was affected - a BOM has now been added here too.
               The escape is the belt to that braces: it is plain ASCII, so it produces the same glyph no matter what
               encoding the stylesheet is read as, and it survives a build or deploy step stripping the BOM again -
               which is evidently something that can happen to this file.
               Deliberately no example of the garbled text here: writing it would put the very bytes this comment is
               about back into the file. */
            content: '\25BC';
            margin-left: 5px;
        }

    .faux-select .actual {
        opacity: 0 !important;
    }



/**************************************** APPOINTMENT ***************************************/

.appointment-list-item {
    display: flex;
    align-items: center;
    margin-top: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
    margin-left: -20px;
    padding: 20px;
    position: relative;
}


    .appointment-list-item.clickable:hover {
        background-color: #fdfdfd;
        cursor: pointer;
    }

    .appointment-list-item .details {
        width: 100%;
    }

        .appointment-list-item .details .subtitle {
            font-size: 10px;
            margin: 3px 0px;
        }


    .appointment-list-item .price {
        min-width: 70px;
        text-align: right;
        font-weight: 600;
    }

    .appointment-list-item .date-item {
        margin-right: 20px;
        text-align: center;
    }

        .appointment-list-item .date-item .day {
            font-size: 14px;
            font-weight: 600;
        }

        .appointment-list-item .date-item .month {
            color: gray;
        }


.appointment-block.confirmed, .snackbar.confirmed, .legend-icon.confirmed {
    background-color: #a5eec4;
    color: #000000;
    border: 1px solid #89d2a8;
}

.appointment-block.pending, .snackbar.pending, .legend-icon.pending {
    background-color: #90a6f9;
    color: #000000;
    border: 1px solid #7683b3;
}

.appointment-block.cancelled, .snackbar.cancelled, .legend-icon.cancelled {
    background-color: #fe8284;
    color: #000000;
    border: 1px solid #fe8284;
}

.appointment-block.completed, .snackbar.completed, .legend-icon.completed {
    background-color: #eee;
    color: #000000;
    border: 1px solid #d4d4d4;
}



#AppointmentDetailTabs {
    margin-top: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
    margin-left: -20px;
    padding-top: 35px;
    border-bottom: 1px solid #eee;
}

    #AppointmentDetailTabs > li > a {
        color: #5c5c5c;
        margin-right: 2px;
        line-height: 1.42857143;
        position: relative;
        display: block;
        padding: 10px 15px;
        text-transform: capitalize !important;
        border: none;
    }

    #AppointmentDetailTabs .nav-link.active {
        color: #303030;
        background-color: transparent !important;
        font-weight: 600;
        border-bottom-width: 3px !important;
        border-bottom: solid;
    }




.variable-price-tag {
    background: #d2e7d2;
    border: 1px solid green;
    border-radius: 20px;
    padding: 8px;
    font-size: 10px;
    margin-right: 11px;
    margin-bottom: 6px;
}


    .variable-price-tag > span {
        display: flex;
        align-items: center;
    }

        .variable-price-tag > span > * {
            margin: 0px 3px;
        }

    .variable-price-tag .material-icons {
        font-size: small;
    }

    .variable-price-tag .material-icons, .variable-price-tag .price {
        color: #72ae72;
    }


    .variable-price-tag > .desc {
    }

    .variable-price-tag > .price {
        font-weight: bolder;
        color: #72ae72;
    }


#CustomerAppointmentsList .req-action-indicator {
    position: absolute;
    top: 0;
    font-size: 12px;
    right: 12px;
    color: white;
    display: flex;
    align-items: center;
    background-color: #7fb96c;
    padding: 3px 20px;
    margin-right: -20px;
    border-radius: 10px 0px 0px 10px;
    box-shadow: 5px 2px 2px 1px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 5px 2px 2px 1px rgba(0, 0, 0, 0.12);
}

#AppointmentReviewContainer {
    text-align: center;
}


    #AppointmentReviewContainer .rating-star {
        height: 40px;
        width: 40px;
        cursor: pointer;
    }

        #AppointmentReviewContainer .rating-star.filled-rating {
            filter: invert(21%) sepia(89%) saturate(2753%) hue-rotate(250deg) brightness(89%) contrast(101%);
        }

    #AppointmentReviewContainer .rating-comment {
        margin: 15px 10px;
        font-weight: 900;
        position: relative
    }

        #AppointmentReviewContainer .rating-comment::before {
            content: ' ';
            height: 15px;
            width: 15px;
            position: absolute;
            left: -23px;
            transform: scale(0.7) rotateY(180deg);
            background-color: black;
            -webkit-mask: url(images/quotation.svg) no-repeat 50% 50%;
            mask: url(images/quotation.svg) no-repeat 50% 50%;
        }

        #AppointmentReviewContainer .rating-comment::after {
            content: ' ';
            height: 15px;
            width: 15px;
            position: absolute;
            right: -23px;
            transform: scale(0.7);
            background-color: black;
            -webkit-mask: url(images/quotation.svg) no-repeat 50% 50%;
            mask: url(images/quotation.svg) no-repeat 50% 50%;
        }


.specialRequest-photo .thumbnail {
    height: 100px;
    width: 100px;
    display: inline;
}


/**************************************** FORMS ***************************************/

.form-list-item .status {
    font-size: 10px;
    padding: 5px 15px;
    margin: 0px 7px;
    border-radius: 20px;
}

    .form-list-item .status.incomplete {
        color: #ffb253;
        background: #fff1d7;
    }

    .form-list-item .status.complete {
        color: #72bb53;
        background: #dfedd6;
    }

    .form-list-item .status.expired {
        color: #d81a1a;
        background: #ffd7d7;
    }

.form-list-item .btn {
    height: initial;
    font-size: 10px;
}


.var-price-dd {
    width: 599px;
    position: absolute;
    right: 20px;
    top: 70px;
    z-index: 99;
    max-width: 100%;
}

.price-ii.green-color.material-icons {
    font-size: 15px;
    color: #72bb53;
    margin-right: 4px;
    position: relative;
}

.btn-SPD {
    background: transparent;
    font-size: 13px;
}

    .btn-SPD:hover {
        color: #72bb53;
    }

.vp-row {
    text-align: left;
}

.vpp-tag {
    padding: 6px 22px;
    display: inline-block;
    border-radius: 112px;
    background: #dfedd6;
    color: #72bb53;
    border: 1px solid #72bb53;
    font-size: 15px;
    max-width: 100%;
    margin-top: 15px;
    margin-bottom: 10px;
}

.vp-promotional {
    text-align: left;
}

.vpp-tag .material-icons {
    position: relative;
    top: 5px;
    font-size: 18px;
}

.var-pricing h2 {
    font-size: 22px;
    color: #72bb53;
}

.green-price {
    color: #72bb53;
}


.variable-price-tag {
    background: #d2e7d2;
    border: 1px solid green;
    border-radius: 20px;
    padding: 8px;
    font-size: 10px;
    margin-right: 11px;
    margin-bottom: 6px;
}


    .variable-price-tag > span {
        display: flex;
        align-items: center;
    }

        .variable-price-tag > span > * {
            margin: 0px 3px;
        }

    .variable-price-tag .material-icons {
        font-size: small;
    }

    .variable-price-tag .material-icons, .variable-price-tag .price {
        color: #72ae72;
    }


    .variable-price-tag > .desc {
    }

    .variable-price-tag > .price {
        font-weight: bolder;
        color: #72ae72;
    }


#TipsContainer {
    text-align: center;
}

#TipPercentageButtons {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

    #TipPercentageButtons > .btn-group {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0px 10px;
    }

        #TipPercentageButtons > .btn-group > .btn {
            border: 1px solid #ddd;
            height: 50px;
            width: 50px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            background-color: white;
            color: black;
        }

        #TipPercentageButtons > .btn-group > .text {
            font-size: 12px;
            margin-top: 8px;
        }

        #TipPercentageButtons > .btn-group.active > .btn {
            color: white;
            background-color: #000000;
        }

        #TipPercentageButtons > .btn-group.active > .text {
            font-weight: bold;
        }

        #TipPercentageButtons > .btn-group:not(.active):hover > .btn {
            color: black;
            background-color: #bdbdbd;
        }
 

/**************************************** Keyframes ***************************************/
 
@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%);
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }

    100% {
        transform: translateY(0);
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
    }
}


@keyframes slideUp {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

/************************* Jira COJ-3507 - Login Efficiency - 2026-08-03 - reCAPTCHA badge *************************/

/* Jira COJ-3507 - Login Efficiency - 2026-08-03 - Inserting the rule below because the reCAPTCHA v3 script
   (https://www.google.com/recaptcha/api.js?render=...) auto-injects a floating "protected by reCAPTCHA" badge into
   the bottom-right corner of every widget page. The badge overlaps the booking calendar and the checkout buttons,
   and on non-whitelisted domains it also renders a red site-key error on top of the page content. Google's
   reCAPTCHA branding terms permit hiding the badge ONLY when the attribution notice is displayed in the user flow
   instead - that notice is rendered by Views/Shared/_RecaptchaAttribution.cshtml.

   IMPORTANT for the next developer: this MUST stay visibility:hidden. Do NOT switch it to display:none or
   opacity:0 - display:none prevents the badge iframe from being laid out, which stops grecaptcha.execute() from
   returning a token in some browsers and would silently break the v3 login validation in booking-customer.js. */
.grecaptcha-badge {
    visibility: hidden;
}

/* Jira COJ-3507 - Login Efficiency - 2026-08-03 - Inserting the styles below because the attribution notice that
   replaces the hidden badge has to remain readable (Google requires it to be legible) while staying unobtrusive at
   the bottom of the page, and its links must be visually distinguishable as links. */
.recaptcha-attribution {
    padding: 10px 15px 15px 15px;
    text-align: center;
    font-size: 11px;
    line-height: 1.4;
    color: #6c757d;
}

    .recaptcha-attribution a {
        color: #6c757d;
        text-decoration: underline;
    }

        .recaptcha-attribution a:hover,
        .recaptcha-attribution a:focus {
            color: #000000;
            text-decoration: underline;
        }

/* START - COJ-3507 - Login Efficiency - 2026-09-08
   Show/hide password toggle, shared by _LoginForm-Login.cshtml and
   _LoginForm-RegisterForm.cshtml.

   Lives in common.css because that is the only stylesheet all three layouts link
   (_Layout, _LayoutBooking and Areas/Cart/.../_Layout). booking.css is not in the
   "~/Content/css" bundle and the Cart layout never links it, so rules parked there
   never reached /Cart/Auth/SignIn - the toggle rendered as a bare default button
   below the field.

   The toggle is a <button type="button">, not a <span>: Mobile Safari only
   synthesizes a click for elements it considers clickable, so a tapped <span> whose
   only handler is delegated on document never fired on iOS - the toggle was dead on
   iPhone while working on desktop and Android. A real button is clickable by
   definition, and also gives us keyboard and screen-reader access for free.
   type="button" is required: these sit inside #LoginForm / #RegisterForm and a bare
   <button> would submit the form.

   Do NOT add the "icon" class to these buttons: cart-style.css carries
   ".icon, .icon > img { height: 25px; width: auto }" at the same specificity and
   loads after common.css, which would override the sizing below. */
.pwd-field-wrapper {
    position: relative;
}

.pwd-field-wrapper input {
    padding-right: 44px;
}

.pwd-toggle-icon {
    /* Full-height 44px strip down the right edge of the field, so the glyph reads as
       part of the input and the tap target still meets Apple's 44pt minimum. */
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px !important;
    line-height: 1;
    cursor: pointer;
    /* strip the native button chrome so it reads as a bare icon inside the field */
    background: none;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    color: #555555;
    -webkit-appearance: none;
    appearance: none;
}

.pwd-toggle-icon:hover,
.pwd-toggle-icon:active,
.pwd-toggle-icon:focus {
    background: none;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    color: #555555;
}

.pwd-toggle-icon:focus-visible {
    outline: 2px solid #007aff;
    outline-offset: -4px;
    border-radius: 3px;
}
/* END - COJ-3507 - Login Efficiency - 2026-09-08 */