:root {
    --wizard-stepper--active: rgba(101,113,255,.2);
    --wizard-stepper--active-font: #0d6efd ;
    --wizard-circle-border-color: #0d6efd!important;
    --wizard-line-color: #dee2e6;
    --wizard-circle-color: #dee2e6;
    --wizard-stepper--disabled: #dee2e6;
    --wizard-stepper--disabled-font: #dee2e6;
    --primary-color: #0d6efd!important;
    --wizard-stepper--btn-bg: rgba(101,113,255,.2);
    --wizard-stepper--btn-color: #6571ff;
    --wizard-stepper--btn-border-color: transparent;
}

.ripple-primary .p-ink {
    background: rgb(33 150 243 / 30%);
}

.ripple-danger .p-ink {
    background: rgb(211 47 47 / 30%);
}

.ripple-warning .p-ink {
    background: rgb(255 193 7 / 30%);
}

.ripple-success .p-ink {
    background: rgb(16 183 89 / 30%);
}

.font-style-normal {
    font-style: normal;
}

.p-input-icon-left .p-input-icon-right > .p-inputtext {
    padding-left: 2rem;
}

.w-stepper {
    --circle-size: clamp(0.5rem, 1vw, 1.25rem) !important;
}

.step-view {
    background: transparent!important;
}

.step-view .col-12 {
    padding-top: 0!important;
    padding-bottom: 0!important;
}

.w_stepper__item_content::before {
    border: 2px solid transparent;
}

.w-stepper__item.active .w_stepper__item_content::before, .w-stepper__item.completed .w_stepper__item_content::before {
    border-color: var(--wizard-circle-border-color);
}

.w-stepper__item.active:not(:first-child)::before, .w-stepper__item.completed:not(:first-child)::before {
    background-color: var(--wizard-circle-border-color)!important;
}

.w-stepper__item.active .w_stepper__item_content::before {
    background-color: var(--wizard-circle-border-color)!important;
}

.w-stepper__item.active, .w-stepper__item.completed {
    color: var(--wizard-stepper--active-font)!important;
}

.w-stepper__item:not(:first-child)::before {
    z-index: 0!important;
}

.form-control:disabled {
    opacity: 1!important;
}

.p-dialog .p-dialog-header {
    padding: 1rem!important;
    border-bottom: 1px solid rgba(72, 94, 144, 0.16)!important;
    border-radius: 0!important;
}

.p-dialog .p-dialog-footer {
    padding: 0 2rem 1.5rem 2rem!important;
}

.p-dialog .p-dialog-footer button {
    min-width: 100px;
}

.p-dialog .p-dialog-footer button:last-child, .p-button .p-button-icon-left:not(.pi) {
    margin-right: 0!important;
}

.p-dialog .p-dialog-header h3 {
    margin-bottom: 0;
    /* color: #0036af; */
    /* font-weight: bold; */
}

.p-float-label.p-input-icon-left, .p-float-label.p-input-icon-right,
.p-float-label .p-input-icon-left, .p-float-label .p-input-icon-right {
    display: block;
}

.p-float-label.p-input-icon-right .p-calendar,
.p-float-label .p-inputnumber {
    display: flex;
}

.p-float-label .p-input-icon-left .p-inputtext, .p-float-label .p-input-icon-right .p-inputtext {
    width: 100%;
}

.p-float-label input:focus ~ label, .p-float-label input.p-filled ~ label, .p-float-label textarea:focus ~ label, .p-float-label textarea.p-filled ~ label, .p-float-label .p-inputwrapper-focus ~ label, .p-float-label .p-inputwrapper-filled ~ label {
    top: 2px!important;
    background: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    color: #2196F3;
}

.p-dialog .p-dialog-content {
    padding: 1rem 2rem 1.5rem!important;
}

.p-dialog .p-dialog-content .field:first-child {
    margin-top: 0.25rem;
}

.vr-wizard--footer {
    margin-top: 20px;
}

/* .p-datatable .p-datatable-thead > tr > th,
.p-datatable .p-datatable-tbody > tr > td {
    padding: 8px 10px;
} */

.p-button+.p-button {
    margin-left: 0.5rem;
}

/* .p-datatable .p-datatable-thead > tr > th,
.p-datatable .p-datatable-tbody > tr > td {
    white-space: nowrap;
    line-height: 1.5;
} */

.p-toast {
    width: 20rem!important;
    font-size: 0.85rem!important;
}

.p-toast-top-right {
    top: 65px!important;
    right: 10px!important;
}

.vr-wizard--btn {
    background: var(--wizard-stepper--btn-bg) !important;
    color: var(--wizard-stepper--btn-color) !important;
    border: 1px solid var(--wizard-stepper--btn-border-color) !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
    margin: 0 0.5rem !important;
}

.vr-wizard--btn:disabled {
    background: var(--wizard-stepper--active)!important;
    color: var(--wizard-stepper--active-font)!important;
    opacity: 0.5 !important;
    cursor: no-drop!important;
}

.p-error, .p-float-label > .p-invalid + label {
    color: #f44336!important;
}

.p-error {
    line-height: 1.2;
    display: inline-block;
}

.p-confirm-dialog .p-dialog-footer .btn-default {
    background-color: transparent;
    /* color: #2196F3!important; */
    border: 1px solid #e9ecef!important;
    /* font-size: 1rem!important; */
}

.p-confirm-dialog .p-dialog-footer .btn-default:enabled:hover {
    background: rgb(33 150 243 / 4%)!important;
    box-shadow: none;
}

.p-confirm-dialog .p-dialog-footer .btn-default:enabled:focus {
    box-shadow: none;
}

.table-image {
    max-width: 100px;
    max-height: 45px;
    display: block;
    margin: auto;
}

.p-disabled.p-dropdown {
    background: #e0e6ed!important;
    cursor: not-allowed !important;
}

.p-error:not(.pi) {
    line-height: 1!important;
}

.p-error:empty:not(.pi) {
    display: none;
}

.p-inputtext:enabled:focus {
    box-shadow: none!important;
}

.wd-200 {
    width: 200px!important;
}

.theme-calendar.p-datepicker {
    padding: 0!important;
    width: 307.875px!important;
    min-width: 307.875px!important;
    max-width: 307.875px!important;
}

.theme-calendar.p-datepicker .p-datepicker-header {
    padding: 0 1rem!important;
    padding-top: 0.5rem!important;
    border-bottom: 0!important;
}

.theme-calendar.p-datepicker table {
    font-size: 14px!important;
    margin: 0 10px 10px!important;
    width: calc(100% - 20px)!important;
}

.theme-calendar.p-datepicker .p-yearpicker, .theme-calendar.p-datepicker .p-monthpicker {
    margin: 0 10px 10px!important;
}

.theme-calendar.p-datepicker table th, .theme-calendar.p-datepicker table td {
    padding: 0!important;
}

.theme-calendar.p-datepicker table th > span {
    width: auto!important;
    height: auto!important;
}

.theme-calendar.p-datepicker table td > span {
    width: 39px!important;
    max-width: 39px!important;
    height: 39px!important;
    line-height: 39px!important;
    margin: 0!important;
}

.theme-calendar.p-datepicker table th {
    text-align: center;
    color: rgba(0,0,0,0.54);
    font-weight: 600;
}

.theme-calendar.p-datepicker table td.p-datepicker-today > span.p-highlight, .theme-calendar.p-datepicker table td > span.p-highlight {
    background: #0d6efd!important;
    border-color: #0d6efd!important;
    color: #fff!important;
}

.p-datepicker table td.p-datepicker-today > span {
    border-color: #959ea9!important;
    background: transparent!important;
}

.p-datepicker table td > span:focus, .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus, .p-dropdown:not(.p-disabled).p-focus {
    box-shadow: none!important;
}

.theme-calendar.p-datepicker .p-datepicker-header .p-datepicker-title {
    display: flex;
    justify-content: center;
    width: 207px;
}

.theme-calendar.p-datepicker .p-datepicker-header .p-datepicker-title button {
    font-size: 110%!important;
    font-weight: 300!important;
    text-align: center;
}

.theme-calendar.p-datepicker .p-datepicker-header .p-datepicker-title button:first-child {
    min-width: 115px;
}

.theme-calendar.p-datepicker .p-datepicker-header .p-datepicker-title button:last-child {
    width: 6ch!important;
    font-size: 105%!important;
    font-weight: 400!important;
}

.theme-calendar.p-datepicker .p-datepicker-header .p-datepicker-title button:focus, .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
    box-shadow: none!important;
}

button {
    user-select: none;
}

.p-datatable .p-datatable-loading-overlay {
    background-color: rgb(249 251 252 / 85%)!important;
}

textarea.form-control {
    resize: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media (max-width: 768px) {
    .p-dialog:not(.p-dialog-maximized):not(.bottom-bar) {
        width: calc(100% - 20px)!important;
    }

    .p-dialog .p-dialog-content {
        padding: 1rem 1.225rem 1rem!important;
    }

    .p-dialog.p-confirm-dialog {
        width: 100vw !important;
        height: 100vh !important;
        top: 0px !important;
        left: 0px !important;
        max-height: 100%;
        background-color: #fff;
    }
    .p-dialog.p-confirm-dialog .p-dialog-header {
        border-bottom: 0!important;
    }

    .p-dialog-title {
        display: none;
    }

    .confirm-dialog-content {
        position: relative;
        z-index: 1;
    }

    .p-dialog.p-confirm-dialog .p-dialog-footer {
        display: flex;
        flex-direction: column-reverse;
        margin-top: 2rem;
    }

    .p-dialog.p-confirm-dialog .p-dialog-footer > .btn:not(#back-to-top):not([class*="rounded-"]) {
        border-radius: var(--tb-border-radius-pill)!important;
    }

    .p-dialog.p-confirm-dialog .p-dialog-footer > .p-button+.p-button {
        margin-left: 0;
    }

    .p-dialog.p-confirm-dialog .p-dialog-footer > .p-confirm-dialog-reject {
        margin-top: 0.5rem;
    }

    .p-dialog.p-confirm-dialog .p-dialog-footer > .btn.p-confirm-dialog-accept:not(#back-to-top):not([class*="rounded-"]) {
        font-size: 1rem!important;
    }

    /* Clouds Animation */
    .clouds-container {
        position: absolute;
        width: 100%;
        overflow: hidden;
        left: 0;
        opacity: 0.3;
    }
    
    .cloud {
        width: 200px;
        height: 60px;
        background: #c9dbe9;
        border-radius: 200px;
        -moz-border-radius: 200px;
        -webkit-border-radius: 200px;
        position: relative; 
    }
    
    .cloud:before, .cloud:after {
        content: '';
        position: absolute; 
        background: #c9dbe9;
        width: 100px; height: 80px;
        position: absolute; top: -15px; left: 10px;
        
        border-radius: 100px;
        -moz-border-radius: 100px;
        -webkit-border-radius: 100px;
        
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
        -moz-transform: rotate(30deg);
    }
    
    .cloud:after {
        width: 120px; height: 120px;
        top: -55px; left: auto; right: 15px;
    }
    
    .x1 {
        -webkit-animation: moveclouds 15s linear infinite;
        -moz-animation: moveclouds 15s linear infinite;
        -o-animation: moveclouds 15s linear infinite;
    }
    
    .x2 {
        left: 200px;
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        transform: scale(0.6);
        opacity: 0.6;
        -webkit-animation: moveclouds 25s linear infinite;
        -moz-animation: moveclouds 25s linear infinite;
        -o-animation: moveclouds 25s linear infinite;
    }
    
    .x3 {
        left: -250px; top: -200px;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.8;
        -webkit-animation: moveclouds 20s linear infinite;
        -moz-animation: moveclouds 20s linear infinite;
        -o-animation: moveclouds 20s linear infinite;
    }
    
    .x4 {
        left: 470px; top: -250px;
        -webkit-transform: scale(0.75);
        -moz-transform: scale(0.75);
        transform: scale(0.75);
        opacity: 0.75;
        -webkit-animation: moveclouds 18s linear infinite;
        -moz-animation: moveclouds 18s linear infinite;
        -o-animation: moveclouds 18s linear infinite;
    }
    
    .x5 {
        left: -150px; top: -150px;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.8;
        -webkit-animation: moveclouds 20s linear infinite;
        -moz-animation: moveclouds 20s linear infinite;
        -o-animation: moveclouds 20s linear infinite;
    }
    
    @-webkit-keyframes moveclouds {
        0% {margin-left: 100%;}
        100% {margin-left: -100%;}
    }
    
    @-moz-keyframes moveclouds {
        0% {margin-left: 100%;}
        100% {margin-left: -100%;}
    }
    
    @-o-keyframes moveclouds {
        0% {margin-left: 100%;}
        100% {margin-left: -100%;}
    }

    .is-danger .ldl-ani.comment-box > path {
        fill: #ff8080!important;
    }

    .is-danger .ldl-ani.comment-box-content > path {
        fill: #fff!important;
    }

    .banner-bg {
        background-image: url(../images/bg/login.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: right top;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 0 0 60% 50%;
        width: 180%;
        height: 330px;
    }
}

.text-edited {
    text-decoration: line-through;
}

.loader-absolute {
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 100;
    background-color: rgb(249 251 252 / 85%)!important;
    left:0;
    top:0;
}

.p-toast {
    opacity: 0.9;
}

.p-toast .p-toast-message {
    margin: 0 0 1rem 0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 6px;
}

.p-toast .p-toast-message .p-toast-message-content {
    padding: 1rem;
    border-width: 0 0 0 6px;
}

.p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
    margin: 0 0 0 1rem;
}

.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
    font-size: 2rem;
}

.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
    width: 2rem;
    height: 2rem;
}

.p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
    font-weight: 700;
}

.p-toast .p-toast-message .p-toast-message-content .p-toast-detail {
    margin: 0.5rem 0 0 0;
}

.p-toast .p-toast-message .p-toast-icon-close {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: transparent;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.p-toast .p-toast-message .p-toast-icon-close:hover {
    background: rgba(255, 255, 255, 0.3);
}
  
.p-toast .p-toast-message .p-toast-icon-close:focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 0.2rem #BFDBFE;
}

.p-toast .p-toast-message.p-toast-message-info {
    background: #e9e9ff!important;
    border: solid #696cff!important;
    border-width: 0 0 0 6px!important;
    color: #696cff!important;
}

.p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon,
.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close {
    color: #696cff!important;
}

.p-toast .p-toast-message.p-toast-message-success {
    background: #e4f8f0!important;
    border: solid #1ea97c!important;
    border-width: 0 0 0 6px!important;
    color: #1ea97c!important;
}

.p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon,
.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close {
    color: #1ea97c!important;
}

.p-toast .p-toast-message.p-toast-message-warn {
    background: #fff2e2!important;
    border: solid #cc8925!important;
    border-width: 0 0 0 6px!important;
    color: #cc8925!important;
}

.p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon,
.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close {
    color: #cc8925!important;
}

.p-toast .p-toast-message.p-toast-message-error {
    background: #ffe7e6!important;
    border: solid #ff5757!important;
    border-width: 0 0 0 6px!important;
    color: #ff5757!important;
}

.p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon,
.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
    color: #ff5757!important;
}

.p-password {
    width: 100%;
}

.p-input-icon-left>i, .p-input-icon-left>svg, .p-input-icon-right>i, .p-input-icon-right>svg, .p-float-label label {
    margin-top: 0!important;
    transform: translateY(-50%);
}

.pointer {
    cursor: pointer;
}

.p-component {
    font-family: inherit!important;
    font-size: inherit!important;
    font-weight: inherit!important;
}

.p-link:focus {
    box-shadow: 0;
}

.p-button.p-button-danger.btn-primary:enabled:focus {
    box-shadow: 0 0 0 0.2rem #dae3ff!important;
}

.hide-header .p-dialog-header, .hide-footer .p-dialog-footer {
    display: none;
}

.p-dialog.hide-content .p-dialog-content {
    padding: 0 !important;         /* Remove all padding */
}

.p-dialog.header-b-0 .p-dialog-header {
    border-bottom: 0!important;
}

.field > label {
    margin-bottom: 0.25rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.p-button.p-button-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fc-event{
    cursor: pointer!important;
}

.p-dropdown-items {
    margin: 0;
    padding: 0.5rem 0;
}

.p-invalid > .p-inputtext {
    border-color: #f44336;
}

div:where(.swal2-container) {
    z-index: 1102 !important;
}

small.p-error {
    margin-top: 0.5rem;
}

.table-fixed {
    table-layout: fixed;
}

.border-collapse-separate {
    border-collapse: separate;
}

.fw-500 {
    font-weight: 500;
}

@media (max-width: 991.98px){
    .chat-conversation {
        height: calc(100vh - 333px);
    }

    #layout-wrapper .context-container{
        height:calc(100vh - 375px);
    }
}

.zi-101{
    z-index: 101;
}


.min-w-100 {
    min-width: 100px;
}

.vr-wizard--footer {
    margin-left: -1.2rem;
    margin-right: -1.2rem;
    margin-bottom: -1.2rem;
    padding: 1.2rem 1.2rem;
    /* background: #f5f5f5; */
    display: flex;
    justify-content: flex-end;
}

.vr-wizard--btn {
    --wizard-stepper--btn-bg: #0065DC;
    --wizard-stepper--btn-border-color: #0065DC;
    --wizard-stepper--btn-color: #fff;
    --wizard-stepper--prev-btn-bg: #f5f5f5;
    --wizard-stepper--prev-btn-color: #495057;
    --wizard-stepper--prev-btn-border-color: #e9ecef;
    border-radius: 7px;
    min-width: 100px;
    font-weight: 500!important;
    text-transform: unset!important;
}

.vr-wizard--btn.vr-wizard--close-btn, .vr-wizard--btn.vr-wizard--prev-btn {
    --wizard-stepper--btn-bg: #fff;
    --wizard-stepper--btn-border-color: #e9ecef;
    --wizard-stepper--btn-color: #495057;
}

.bg-default {
    background-color: #f5f5f5;
}

.enroll-page .step-view {
    min-height: calc(100vh - (18.05rem + ((var(--tb-font-base) * 2) * 1.2) + (15px * var(--tb-body-line-height)) + 22px));
    max-height: calc(100vh - (18.05rem + ((var(--tb-font-base) * 2) * 1.2) + (15px * var(--tb-body-line-height)) + 22px));
}

.enroll-page {
    font-size: 15px;
}

.title-w-line, .title-wo-line {
    position: relative;
    color: #9aa7b9;
    font-weight: 500;
}

.title-w-line:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    border-radius: 3px;
    background-color: #9aa7b9;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.title-w-line .title, .title-wo-line .title {
    display: inline-block;
    min-height: calc(0.875em* 1.35);
    background: #fff;
    position: relative;
    z-index: 1;
}

.list-group-item .d-flex.justify-content-between h6.fs-4 {
    line-height: calc(1rem * 1.5);
    min-height: calc(1rem * 1.5);
}

.w-overlay-button {
    position: relative;
}

.lds-ring,
.lds-ring div {
    box-sizing: border-box;
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid currentColor;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: currentColor transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.profile-image {
    object-fit: cover;
}

.p-tabview-nav, .p-tabview .p-tabview-panels {
    padding: 0 !important;
}

.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
    border-color: #3762ea;
    color: #3762ea !important;
}

.p-tabview .p-tabview-nav li .p-tabview-nav-link {
    color: #6c757d !important;
}

.view-panels {
    min-height: calc(90vh - (16.05rem + (0.8125rem * 1.5) + 108px));
    max-height: calc(90vh - (16.05rem + (0.8125rem * 1.5) + 108px));
    overflow-y: auto;
}

.appointment-tab .camera-action-btn {
    position: unset !important;
    transform: unset !important;
}

.book-calendar.p-calendar .p-datepicker {
    border-radius: 1.325rem;
    padding: 0;
    border: 2px solid #f1f0fd;
}

.book-calendar.p-calendar .p-datepicker-header {
    justify-content: flex-start;
    align-items: center;
    padding: 1.225rem 1.725rem;
    border-bottom: 2px solid #f1f0fd;
}

.book-calendar.p-calendar .p-datepicker-header .p-datepicker-title {
    order: 1;
    margin-left: 0;
}

.book-calendar.p-calendar .p-datepicker-header .p-datepicker-title * {
    font-size: 1.525rem;
    font-weight: 500;
    padding: 0;
    color: #01184f;
    user-select: none;
    pointer-events: none;
}

.book-calendar.p-calendar .p-datepicker-header .p-datepicker-title button:hover {
    color: #5786f3;
}

.book-calendar.p-calendar .p-datepicker-header .p-datepicker-title button+button {
    margin-left: 0.75rem;
}

.book-calendar.p-calendar .p-datepicker-header .p-datepicker-prev {
    order: 2;
    margin-right: 0.725rem;
}

.book-calendar.p-calendar .p-datepicker-header .p-datepicker-next {
    order: 3;
}

.book-calendar.p-calendar .p-datepicker-header .p-datepicker-prev, 
.book-calendar.p-calendar .p-datepicker-header .p-datepicker-next {
    border-radius: 1000px;
    border: 1px solid #5786f3;
    color: #5786f3;
    background: #f7fbff;

    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 2.25rem;
    height: 2.25rem;
    /* font-size: 2rem; */
    /* transition: background 0.35s ease-in-out, color 0.35s ease-in-out; */
}

.book-calendar.p-calendar .p-datepicker-header .p-datepicker-prev svg, 
.book-calendar.p-calendar .p-datepicker-header .p-datepicker-next svg {
    width: 1.225rem;
    height: 1.225rem;
}

.book-calendar.p-calendar .p-datepicker-calendar-container th {
    text-align: center;
}

.book-calendar.p-calendar .p-datepicker table th > span:not(.p-disabled) {
    position: relative;
    background-color: #fff;
    font-size: 0;
}

.book-calendar.p-calendar .p-datepicker table th > span:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    color: #01184f;
    font-weight: 500;
}

.book-calendar.p-calendar .p-datepicker table th:first-child > span:after {
    content: "Sunday";
}

.book-calendar.p-calendar .p-datepicker table th:nth-child(2) > span:after {
    content: "Monday";
}

.book-calendar.p-calendar .p-datepicker table th:nth-child(3) > span:after {
    content: "Tuesday";
}

.book-calendar.p-calendar .p-datepicker table th:nth-child(4) > span:after {
    content: "Wednesday";
}

.book-calendar.p-calendar .p-datepicker table th:nth-child(5) > span:after {
    content: "Thursday";
}

.book-calendar.p-calendar .p-datepicker table th:nth-child(6) > span:after {
    content: "Friday";
}

.book-calendar.p-calendar .p-datepicker table th:nth-child(7) > span:after {
    content: "Saturday";
}

.book-calendar.p-calendar .p-datepicker table td > span:not(.p-disabled) {
    color: #01184f;
}

.book-calendar.p-calendar .p-datepicker table td.p-datepicker-today > span {
    border: 2px solid #cce8fb !important;
    background: #f4fafe !important;
}

.book-calendar.p-calendar .p-datepicker table td.available > span {
    background: #e0f7ea !important;
    border-width: 1px !important;
    border-color: #2dcb73 !important;
    color: #2dcb73;
}

.book-calendar.p-calendar .p-datepicker table td.fully-book > span {
    background: #ffe9e9 !important;
    border-width: 1px !important;
    border-color: #ff6c6c !important;
    color: #ff6c6c;
}

.book-calendar.p-calendar .p-datepicker-header .p-datepicker-prev:hover, 
.book-calendar.p-calendar .p-datepicker-header .p-datepicker-next:hover {
    background: linear-gradient(#2261ee, #5786f3);
    color: #fff;
    border-width: 1px !important;
    border-color: #2261ee !important;
}

.book-calendar.p-calendar .p-datepicker table td > span.p-highlight,
.book-calendar.p-calendar .p-datepicker table td.p-datepicker-today > span.p-highlight {
    background: linear-gradient(#2261ee, #5786f3) !important;
    color: #fff;
}

.p-datepicker table td > span {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1000px;
    user-select: none;
}

.p-datepicker .p-yearpicker .p-yearpicker-year,
.p-datepicker .p-monthpicker .p-monthpicker-month {
    border-radius: 15px;
    padding: 0.75rem;
}

.p-datepicker table td > span, 
.p-datepicker .p-yearpicker .p-yearpicker-year,
.p-datepicker .p-monthpicker .p-monthpicker-month {
    font-size: 1.125rem;
}

.available-time > * {
    border: 2px solid #f1f0fd;
    border-radius: 10px;
    min-width: calc((100% / 3) - 0.35rem);
}

.custom-time.available-time > * {
    min-width: calc((100% / 4) - (1.5rem /4));
}

.p-radiobutton .p-radiobutton-box.p-highlight {
    border-color: #5786f3;
    background: #fff;
}

.p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
    width: 10px;
    height: 10px;
}

.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
    background: linear-gradient(#2261ee, #5786f3);
}

.time-item.active {
    border-color: #5786f3;
    background-color: #f4fafe;
}

.form-control.p-invalid {
    border-color: #f44336;
}

.form-step-title > .form-logo {
    max-width: 55px;
}

.p-dialog.bottom-bar .p-dialog-content {
    border-radius: 1rem 1rem 0 0;
}

.min-w-50 {
    min-width: 50px;
}

.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
    border-color: #0065dc;
    background: #0065dc;
}

.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
    box-shadow: none;
}

.appointment-tab video {
    top: -2px;
}

.enroll-page {
    max-width: 850px;
}

.select-none {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.device-ios .hide-ios {
    display: none !important;
}

.p-checkbox.p-checkbox-disabled + label {
    color: #b0b5b9;
}

.mx-w-100x {
    max-width: 100px;
}

.available-time > *.has-error {
    animation: blinkBorderError 1.45s ease-in-out .1s forwards;
}

.highlight-error {
    animation: blinkBorderError 1.45s ease-in-out .1s forwards;
}

.min-w-100px {
    min-width: 100px;
}

@keyframes blinkBorderError {
    0% {
        border-color: #f1f0fd;
    }
    25% {
        border-color: #f44336;
    }
    50% {
        border-color: #f1f0fd;
    }
    75% {
        border-color: #f44336;
    }
    100% {
        border-color: #f1f0fd;
    }
}

@media (min-width: 768px) {
    .enroll-page .upload-wrapper {
        margin: auto
    }
    
    .enroll-page .camera-action-btn {
        position: absolute !important;
        transform: translateX(100%) !important
        
    }

    .available-time > * {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

@media (max-width: 768px) {
    /* .display-5 {
        font-size: calc(var(--tb-font-base) * 4);
    }

    .mt-4 {
        margin-top: 1.25rem !important
    }

    .h2, h2 {
        font-size: calc(var(--tb-font-base)* 1.5);
    } */

    :root {
        --tb-body-font-size: 0.5rem;
        --tb-font-base: 0.7125rem;
    }

    .enroll-page .step-view {
        margin-bottom: 0.35rem!important;
        min-height: calc(100% - (5.45rem + 6.4vw + (15px * var(--tb-body-line-height))))!important;
        max-height: calc(100% - (5.45rem + 6.4vw + (15px * var(--tb-body-line-height))))!important;
    }

    .vr-wizard--footer {
        margin-top: 0;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .enroll-page .step-view::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 5px;
        height: 3px;
    }
      
    .enroll-page .step-view::-webkit-scrollbar-track {
        height: 5px !important;
    }
      
    .enroll-page .step-view::-webkit-scrollbar-thumb {
        border-radius: 4px;
        height: 3px;
        background: #dee2e6;
        box-shadow: unset;
    }

    
    /* Keep the scrollbar always visible */
    .enroll-page .step-view::-webkit-scrollbar-thumb:vertical {
        min-height: 20px;
    }

    .book-calendar.p-calendar .p-datepicker table th:first-child > span:after {
        content: "S";
    }
    
    .book-calendar.p-calendar .p-datepicker table th:nth-child(2) > span:after {
        content: "M";
    }
    
    .book-calendar.p-calendar .p-datepicker table th:nth-child(3) > span:after {
        content: "T";
    }
    
    .book-calendar.p-calendar .p-datepicker table th:nth-child(4) > span:after {
        content: "W";
    }
    
    .book-calendar.p-calendar .p-datepicker table th:nth-child(5) > span:after {
        content: "T";
    }
    
    .book-calendar.p-calendar .p-datepicker table th:nth-child(6) > span:after {
        content: "F";
    }
    
    .book-calendar.p-calendar .p-datepicker table th:nth-child(7) > span:after {
        content: "S";
    }

    /* .enroll-page .h2, .enroll-page h2 {
        font-size: calc(var(--tb-font-base)* 1.525);
    } */

    .book-calendar.p-calendar .p-datepicker-header {
        padding: 0.5rem 1.25rem;
    }

    .book-calendar.p-calendar .p-datepicker-header .p-datepicker-title * {
        font-size: 1rem;
    }

    .enroll-page .step-view {
        padding: 0 !important;
    }

    /* .enroll-page .wrapper, .w-stepper__item:not(.active) {
        display: block !important;
    }

    .enroll-page .w-stepper {
        margin: 0.75rem 0.5rem;
    }

    .enroll-page .w_stepper__title {
        display: none;
    } */

    .enroll-page .p-error:not(.pi):empty {
        display: none;
    }

    .camera-action-btn .btn:not(#back-to-top):not([class*="rounded-"]) {
        display: flex;
        gap: 0.25rem;
        align-items: center;
        justify-content: center;
    }

    .camera-action-btn .p-button .p-button-icon-left {
        font-size: 0.85rem;
    }

    .camera-action-btn .p-button-label {
        line-height: 1;
    }
    
    .book-calendar.p-calendar .p-datepicker-header .p-datepicker-prev, .book-calendar.p-calendar .p-datepicker-header .p-datepicker-next {
        width: 1.75rem;
        height: 1.75rem;
    }

    .book-calendar.p-calendar .p-datepicker-header .p-datepicker-prev svg, .book-calendar.p-calendar .p-datepicker-header .p-datepicker-next svg {
        width: 1rem;
        height: 1rem;
    }

    .p-datepicker table td > span, .p-datepicker .p-yearpicker .p-yearpicker-year, .p-datepicker .p-monthpicker .p-monthpicker-month {
        font-size: 1rem;
    }

    .p-datepicker table td > span {
        width: 2.25rem;
        height: 2.25rem;
    }

    .available-time > * {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        min-width: calc((100% / 2) - 0.25rem);
    }

    .p-radiobutton, .p-radiobutton .p-radiobutton-box {
        width: 15px;
        height: 15px;
    }

    .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
        width: 7px;
        height: 7px;
    }

    .enroll-page .form-label {
        font-size: calc(var(--tb-font-base) * 1.25)!important;
    }

    .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
        font-size: calc(0.7125rem * 1.2);
    }

    .enroll-page .list-group .list-group-item, .enroll-payment-modal .list-group .list-group-item > .d-flex {
        flex-wrap: wrap;
    }

    .enroll-page .list-group .list-group-item p, .enroll-payment-modal .list-group .list-group-item p {
        width: 100% !important;
    }

    .enroll-page .list-group .list-group-item h6, .enroll-payment-modal .list-group .list-group-item h6 {
        padding-left: 0.75rem;
        min-height: 17px;
    }

    .loader-modal h1 {
        font-size: calc(var(--tb-font-base) * 2);
    }

    .form-steps > form {
        height: calc(100% - (1.5rem + 55px + ((var(--tb-font-base) * 1.75) * 1.2) + ((var(--tb-font-base) * 1.5) * 1.2)));
    }

    /* Stepper */
    .wrapper {
        display: block!important;
    }

    .w-stepper__item:not(.active), .w_stepper__item_content::before {
        display: flex!important;
    }

    .w_stepper__item_content > .w_stepper__title {
        display: none;
    }

    .w_stepper__item_content::before {
        justify-content: center;
        align-items: center;
        line-height: 1;
        font-size: 0.9rem;
        font-weight: 600;
        color: #fff;
    }

    .w-stepper__item.completed .w_stepper__item_content::before {
        color: #0065DC;
    }

    .w-stepper {
        margin: 1.5rem 0.5rem 0.5rem !important;
        --circle-size: 6.4vw !important;
    }

    .w-stepper__item:first-child .w_stepper__item_content:before {
        content: "1"
    }

    .w-stepper__item:nth-child(2) .w_stepper__item_content:before {
        content: "2"
    }

    .w-stepper__item:nth-child(3) .w_stepper__item_content:before {
        content: "3"
    }

    .w-stepper__item:nth-child(4) .w_stepper__item_content:before {
        content: "4"
    }

    .w-stepper__item:nth-child(5) .w_stepper__item_content:before {
        content: "5"
    }

    .w-stepper__item:nth-child(6) .w_stepper__item_content:before {
        content: "6"
    }

    .w-stepper__item:nth-child(7) .w_stepper__item_content:before {
        content: "7"
    }

    .w-stepper__item:nth-child(8) .w_stepper__item_content:before {
        content: "8"
    }

    .w-stepper__item:nth-child(9) .w_stepper__item_content:before {
        content: "9"
    }

    .w-stepper__item:nth-child(10) .w_stepper__item_content:before {
        content: "10"
    }

    .p-input-icon-left>i, .p-input-icon-right>i, .p-float-label label {
        font-size: 0.7125rem;
    }

    .p-button-label {
        font-size: 0.7125rem;
    }

    .fs-7 {
        font-size: calc(var(--tb-font-base) * 0.9)!important;
    }

    .custom-time.available-time > * {
        min-width: calc((100% / 3) - (1rem / 3));
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .custom-time.available-time > * span {
        font-size: 0.7125rem;
    }

    .enroll-page .w-stepper {
        margin-bottom: 2rem !important;
    }

    .enroll-page .w_stepper__item_content {
        position: relative;
        flex-direction: column;
    }

    .enroll-page .w_stepper__item_content > .w_stepper__title {
        position: absolute;
        font-size: 0.725rem;
        display: block;
        bottom: 0;
        transform: translateY(100%);
    }
    
    .p-dialog.p-confirm-dialog.app-pages {
        max-width: 100% !important;
        height: auto !important;
    }

    .p-dialog.p-confirm-dialog.app-pages .p-dialog-title {
        display: block;
    }

    .p-dialog.p-confirm-dialog.app-pages .p-dialog-content {
        font-size: 0.85rem;
    }

    .p-dialog.p-confirm-dialog.app-pages .p-dialog-footer {
        margin-top: 0;
        flex-direction: unset;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    .p-dialog.p-confirm-dialog .p-dialog-footer > .p-confirm-dialog-reject {
        margin-top: 0;
    }

    .p-dialog.p-confirm-dialog .p-dialog-footer > .btn:not(#back-to-top):not([class*="rounded-"]) {
        border-radius: var(--tb-btn-border-radius) !important;
    }
}

/* .enroll-page .h2, .enroll-page h2 {
    font-size: calc(var(--tb-font-base)* 1.525);
} */

.picker-calendar.p-calendar .p-datepicker {
    border-radius: 1.325rem;
    padding: 0;
    border: 2px solid #f1f0fd;
}

.picker-calendar.p-calendar .p-datepicker-header {
    justify-content: flex-start;
    align-items: center;
    padding: 1.225rem 1.725rem;
    border-bottom: 2px solid #f1f0fd;
}

.picker-calendar.p-calendar .p-datepicker-header .p-datepicker-title {
    order: 1;
    margin-left: 0;
}

.picker-calendar.p-calendar .p-datepicker-header .p-datepicker-title * {
    font-size: 1.525rem;
    font-weight: 500;
    padding: 0;
    color: #01184f;
}

.picker-calendar.p-calendar .p-datepicker-header .p-datepicker-title button:hover {
    color: #5786f3;
}

.picker-calendar.p-calendar .p-datepicker-header .p-datepicker-title button+button {
    margin-left: 0.75rem;
}

.picker-calendar.p-calendar .p-datepicker-header .p-datepicker-prev {
    order: 2;
    margin-right: 0.725rem;
}

.picker-calendar.p-calendar .p-datepicker-header .p-datepicker-next {
    order: 3;
}

.picker-calendar.p-calendar .p-datepicker-header .p-datepicker-prev, 
.picker-calendar.p-calendar .p-datepicker-header .p-datepicker-next {
    border-radius: 1000px;
    border: 1px solid #5786f3;
    color: #5786f3;
    background: #f7fbff;

    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 2.25rem;
    height: 2.25rem;
    /* font-size: 2rem; */
    /* transition: background 0.35s ease-in-out, color 0.35s ease-in-out; */
}

.picker-calendar.p-calendar .p-datepicker-header .p-datepicker-prev:hover, 
.picker-calendar.p-calendar .p-datepicker-header .p-datepicker-next:hover {
    background: linear-gradient(#2261ee, #5786f3);
    color: #fff;
}

.picker-calendar.p-calendar .p-datepicker-header .p-datepicker-prev svg, 
.picker-calendar.p-calendar .p-datepicker-header .p-datepicker-next svg {
    width: 1.225rem;
    height: 1.225rem;
}

.picker-calendar.p-calendar .p-datepicker-calendar-container th {
    text-align: center;
}

.picker-calendar.p-calendar .p-datepicker table th > span:not(.p-disabled) {
    position: relative;
    background-color: #fff;
    font-size: 0;
}

.picker-calendar.p-calendar .p-datepicker table th > span:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    color: #01184f;
    font-weight: 500;
}

.picker-calendar.p-calendar .p-datepicker table th:first-child > span:after {
    content: "S";
}

.picker-calendar.p-calendar .p-datepicker table th:nth-child(2) > span:after {
    content: "M";
}

.picker-calendar.p-calendar .p-datepicker table th:nth-child(3) > span:after {
    content: "T";
}

.picker-calendar.p-calendar .p-datepicker table th:nth-child(4) > span:after {
    content: "W";
}

.picker-calendar.p-calendar .p-datepicker table th:nth-child(5) > span:after {
    content: "T";
}

.picker-calendar.p-calendar .p-datepicker table th:nth-child(6) > span:after {
    content: "F";
}

.picker-calendar.p-calendar .p-datepicker table th:nth-child(7) > span:after {
    content: "S";
}

.picker-calendar.p-calendar .p-datepicker table td > span:not(.p-disabled) {
    color: #01184f;
}

.picker-calendar.p-calendar .p-datepicker table td.p-datepicker-today > span {
    border: 2px solid #cce8fb !important;
    background: #f4fafe !important;
}

.picker-calendar.p-calendar .p-datepicker table td > span.p-highlight,
.picker-calendar.p-calendar .p-datepicker table td.p-datepicker-today > span.p-highlight {
    background: linear-gradient(#2261ee, #5786f3) !important;
    color: #fff;
}

.picker-calendar.p-calendar .p-datepicker-header {
    padding: 0.75rem 1.25rem;
}

.picker-calendar .p-datepicker table td{
    padding: 0;
}

.picker-calendar.p-calendar .p-datepicker-header .p-datepicker-title * {
    font-size: 1rem;
}


.picker-calendar.p-calendar .p-datepicker-header .p-datepicker-prev, .picker-calendar.p-calendar .p-datepicker-header .p-datepicker-next {
    width: 1.75rem;
    height: 1.75rem;
}

.picker-calendar.p-calendar .p-datepicker-header .p-datepicker-prev svg, .picker-calendar.p-calendar .p-datepicker-header .p-datepicker-next svg {
    width: 1rem;
    height: 1rem;
}

.picker-calendar.p-calendar .p-datepicker table td.p-datepicker-today > span {
    border: 2px solid #cce8fb !important;
    background: #f4fafe !important;
}

.picker-calendar.p-calendar .p-datepicker table td > span.p-highlight,
.picker-calendar.p-calendar .p-datepicker table td.p-datepicker-today > span.p-highlight {
    background: linear-gradient(#2261ee, #5786f3) !important;
    color: #fff;
}

.powered-by-container{
    text-align: center;
    margin-top: 20px;
}

.powered-by-container img{
    max-width: 150px;
}

input::placeholder {
    text-transform: none;
}

.w-lg {
    min-width: 130px;
}

.with-error {
    border: 4px dashed #f44336 !important;
}

.fnt-13 {
    font-size: 13px;
}

.fnt-14 {
    font-size: 14px;
}

.fnt-15 {
    font-size: 15px;
}

.fnt-16 {
    font-size: 16px;
}

.no-border {
    border: none; 
    outline: none;
}

.span-highlight {
    font-weight: 600;
}

.text-gray {
    color: #5e5e60 !important;
}

/* Overwrite Primevue unable to apply class text center to table columns */
.p-column-header-content {
    display: block;
}