﻿.public-p-container {
    width: 100%;
    max-width: 840px;
    margin: 0 auto;
}


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 250px;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/*Menu*/
.form-group-sm label {
    max-width: 100%;
    margin-bottom: 1px;
    font-weight: normal;
    font-size: 12px;
    color: #104680; 
}

a.nav-link, a.blzclick {
    cursor: pointer;
}


/*Validation*/

.validation-message {
    margin-left: 2px;
    font-size: 11px;
    color: #ed5565;
}

.field-validation-error {
    font-size: 11px;
    color: #ed5565;
}

.input-validation-error {
    border-color: #dc3545;
}
.form-control.invalid {
    border-color: #dc3545;
}

ul.validation-errors {
    padding: 10px 35px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: #f8ecec;
    border-color: #ebccd1;
}

ul > li.validation-message {
    color: #dc3545;
    font-size: 13px;
}

.validation-summary-valid {
    display: none;
}

.validation-summary-errors {
    color: #ed5565;
    font-size: 13px;
}

a .text-expanded {
    display: none;
}

a:not(.collapsed) .text-expanded {
    display: inline;
}

a:not(.collapsed) .text-collapsed {
    display: none;
}

.tblServices {
    margin-top: 10px;
    margin-bottom: 10px;
}

    .tblServices th, .tblServices td {
        padding: 0.75rem;
        vertical-align: middle;
        border-top: 1px solid #dee2e6;
        line-height: 1.2;
    }

    .tblServices tr:first-child td {
        border: none;
    }

    .tblServices tr:last-child td {
    }

/*
    .tblServices > thead > tr > th,
    .tblServices > tbody > tr > th,
    .tblServices > tfoot > tr > th,
    .tblServices > thead > tr > td,
    .tblServices > tbody > tr > td,
    .tblServices > tfoot > tr > td,
    .tblServices > tr > th { 
        width: 1%;
        white-space: nowrap;
    }*/

    .tblServices .min {
        width: 1%; 
    } 

 

select.calendar-select {
    position: relative;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 37.33px;
    padding-left: 0.5rem;
    border: 1px solid #b3b4b6;
    border-radius: 3px;
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.125rem) center, calc(100% - 0.75rem) center;
    background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
    background-repeat: no-repeat;
}

.calendar2 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}


@media (max-width: 450px) {
    .calendar2 {
        gap: 4px;
    }
}

.day { 
    min-width: 0; /* critical */
}


.btnCalendar2 {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0;
    margin: 0;
    min-width: 0;
    font-size: 12px;
    border-radius: 4px;
}

.btnCalendar2:disabled {
    background-color: #fad6dc;
    border-color: #eca7c2;
}
   
.btnCalendar2 .fill {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--percent);
    background: #2d81e739;
    transition: height 0.3s ease;
    color: #ffffff;
}


.outofmonth:not(.btn-blue) {
    color: #52555a8b;
}
.outofmonth:disabled {
    color: #52555a8b; 
}
      

.categoryShimmer { 
    height: 53px;
    background: linear-gradient(90deg, rgba(15,23,42,.06) 0%, rgba(15,23,42,.10) 35%, rgba(255,255,255,.65) 50%, rgba(15,23,42,.10) 65%, rgba(15,23,42,.06) 100%);
    background-size: 220% 100%;
    animation: ccs-shimmer 1.35s ease-in-out infinite; 
}

.calendarShimmer {
    height: 35px;
    background: linear-gradient(90deg, rgba(15,23,42,.06) 0%, rgba(15,23,42,.10) 35%, rgba(255,255,255,.65) 50%, rgba(15,23,42,.10) 65%, rgba(15,23,42,.06) 100%);
    background-size: 220% 100%;
    animation: ccs-shimmer 1.35s ease-in-out infinite;
    border: 1px solid rgba(15,23,42,.3);
}


.timeslots {
    padding: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lh-11 {
    line-height: 1.1;
}

.lh-12 {
    line-height: 1.2;
}

.btn-timeslot {
    position: relative;
    min-height: 35px;
    font-size: 13px;
    flex: 0 0 calc(50% - 6px); /* two per row, account for gap */
    border-radius: 4px; 
}

.mw-25 {
    min-width: 25px;
} 

.mw-35 {
    min-width: 35px;
} 

.mw-40 {
    min-width: 40px;
} 

.mw-45 { 
    min-width: 45px; 
}


ul.alert-errors {
    padding: 0;
    border: none;
    margin-bottom: 0px;
    list-style-type: none;
}

    ul.alert-errors > li {
        color: #dc3545;
        font-size: 12px;
        padding: 0;
    }


@keyframes ccs-shimmer {
    0%{ background-position: 120% 0; }
    100%{ background-position: -120% 0; }
}

@media (min-width: 450px) {

    .tableCalendar > thead > tr > th,
    .tableCalendar > tbody > tr > th,
    .tableCalendar > tfoot > tr > th,
    .tableCalendar > thead > tr > td,
    .tableCalendar > tbody > tr > td,
    .tableCalendar > tfoot > tr > td,
    .tableCalendar > tr > th {
        padding: 4px 7px;
    }
     
}

/*Google auto complete*/
.pac-container {
    z-index: 9000;
}
    /*tools*/

    .expandToBottom {
    min-height: calc(100vh - 360px);
}

@media (max-width: 1199.98px) {
    .expandToBottom {
        min-height: calc(100vh - 440px);
    }
}


/*Summary*/



.tableSummary > tbody > tr > td { 
    line-height: 1.2;
    padding: 0.5rem 1rem !important;
    font-size: .85em !important;
    vertical-align: middle;
}

.tableSummary > thead > tr > th {
    padding: 0.5rem 1rem !important;
    font-size: 0.9em !important;
}


/*Top Wizard*/

.sw-theme-circles {
    width: 100%;
}

.sw-theme-circles > ul.step-anchor {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin-bottom: 1.25rem;
    width: 100%;
}


.sw-main > ul.step-anchor > li.wizard-progressbar {
    position: absolute;
    z-index: 2;
    top: 1rem;
    bottom: 0;
    height: 0.25rem; 
    background-color: #2c87d3;
    transition: all 150ms;
}
    .sw-theme-circles > ul.step-anchor > li .step-description {
        position: absolute;
        left: 0;
        width: 100%;
        text-align: center;
        margin-top: 0.15rem;
        font-size: 12px;
    }

    .sw-theme-circles > ul.step-anchor > li.done > a:hover, .sw-theme-circles > ul.step-anchor > li.active ~ li.done > a:hover {
        border-width: 4px;
        font-size: 12px;
    }
.sw-theme-circles > ul.step-anchor > li.nav-item.active > a, .sw-theme-circles > ul.step-anchor > li.nav-item.done > a {
    background-color: #fff;
    color: #45464b;
    border-color: inherit !important;
}

    .sw-theme-circles > ul.step-anchor > li.nav-item > a, .sw-theme-circles > ul.step-anchor > li.nav-item.active ~ li.done > a {
        position: relative;
        z-index: 3;
        margin: 0 auto;
        padding: 0;
        width: 2.25rem;
        height: 2.25rem;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        color: #45464b;
        font-size: 11px;
        background-color: #fff;
        border: 4px solid;
        border-color: inherit !important;
        border-radius: 50%;
        box-shadow: none !important;
    }


/*Modals*/
.bgc-footer {
    border-top-color: #e4e9ee !important;
    
    background-color: #eff3f8 !important;
}

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        max-width: 800px;
    } 
}

@media (min-width: 1200px) {
    .modal-xl {
        max-width: 1140px;
    } 
}
