* {
    box-sizing: border-box !important;
}
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');


:root
{
    --text-color: #0A0F1E;
    --primary-color: #00609A;
    --primary-font: "Urbanist", sans-serif  !important; 
}
.loader {
    width: 22px;
    height: 22px;
    border: 2px solid #fff;
    border-top-color: #235f99;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
}
.loading .loader {
    display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
body,
h1,h2,h3,h4,h5,h6,span,p,small

{
   font-family: var(--primary-font) !important
}





.cy-flexrow
{
    display: flex;
    align-items: center;
    justify-content: center;

}

.cy-flex
{
    display: flex  !important;
}
.cy-align-content-center
{
    align-items: center;
}

.cy-mb-3
{
    margin-bottom: 15px;
}
.cy-mt-3
{
    margin-top: 15px;
}
.cy-step-card {
    width: 100%;
    
}
.bg-white
{
    background: #fff !important;
}
.cy-left-box
{
    width: 60%;
    padding: 24px;
}
.p-24
{
    padding: 24px;
}
.cy-right-box
{
    width: calc(100% - 60%);   

}

.cy-col-left
{
    width: 50%;
    /* padding: 24px; */
}

.cy-col-right
{
    width: calc(100% - 50%);   
/* padding: 24px; */
}

.col-bg
{
    background-image: url('form-img.webp');
    background-size: cover;
    background-repeat: no-repeat;
}

.error-label {
    display: none !important;
    color: #ff3b3b;
    font-size: 14px;
    margin-top: 4px;
    display: block;
}
.show-error {
    display: block !important;
}



.assessment-step-container
{
    background: #fff !important;
    box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.10);    
    display: none;
    /* padding: 24px !important; */
}


/* .cy-card
{
    background: #fff !important;
    box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.10);   
    padding: 24px !important; 
} */


.assessment-booking-form label {
     font-family: var(--primary-font) !important;
    display: flex;
    gap:5px;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 8px;
    
}
.assessment-booking-form svg {
   margin-top: -2px;
}

.cy-form-control
{
     font-family: var(--primary-font) !important;
    border-radius: 80px;
    border: 1px solid #CAD5E2;
    background: #F3F3F5;
    width: 100%;
    height: 44px;
    font-size: 16px;
    padding: 0 15px;
}
textarea.cy-form-control {
    height: 100px;
    padding: 15px;
    resize: vertical;
    border-radius: 10px;
    background-color: #fff ;
}


.gap-2
{
    gap: 20px;
}
.cy-btn
{
    font-family: var(--primary-font) !important;
    border-radius: 80px;
    font-size: 16px;
    font-weight: 600;;
    border: 1px solid var(--primary-color);;
    background: var(--primary-color);
    color: #fff;
    width: 100%;
    height: 44px;
    cursor: pointer;
    position: relative;
    padding: 0 20px;
}

.cy-outline-btn
{
    background:  #fff !important;
    border: 1px solid #CAD5E2;
    color: #000;
    font-weight: 600;;
    cursor: pointer;

}


.terms-text
{
    font-size: 14px; 
    color: #62748E;
    text-align: center;
    padding: 0 20px;
}

.divider-line
{
    background-color: #E2E8F0 !important;
    width: 100%;
    height: 1px;
    margin: 24px 0;
}


h5.card-step-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
    margin-bottom: 20px;
}


/* Make the whole flatpickr container full width */
#uap_datepicker {
    width: 100% !important;
}

/* Make the inner calendar also full width */
.flatpickr-calendar.inline {
    width: 100% !important;
    max-width: 100% !important;
     border: 0 !important;
    box-shadow: 0 0 27.828px 0 rgba(0, 0, 0, 0.10);
}


/* Make the days grid full width */
.flatpickr-days {
    width: 100% !important;
}
/* .dayContainer {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 10px !important;
} */
.flatpickr-days .dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 10px !important;
    
}

/* Make each day equal width */
.flatpickr-day {
    width: 14.28% !important; 
    max-width:  14.28%  !important
}
.flatpickr-month, .flatpickr-current-month {
    height: 50px !important;
    line-height: 50px !important;
    padding-top: 0 !important;
}

.flatpickr-month{
    border-bottom: 1px solid #768291  !important
}

.flatpickr-weekdays, .flatpickr-day
{
    height: 50px !important;
}


.flatpickr-day.today
{
    background:#959ea9 !important;
    color: #fff !important;
}
.flatpickr-day.selected
{
background: var(--primary-color) !important;
    color: #fff !important;
}
.flatpickr-day.today,
.flatpickr-day:hover,
.flatpickr-day.selected
{
    border-color: transparent !important;
    /* width: 40px !important; */
    height: 40px !important;
    display: block !important;
    padding: 0 !important;    
    /* max-width: 40px !important; */
    margin: 0 auto !important;
}

.flatpickr-calendar.inline , .flatpickr-day
{
    font-weight: 600 !important;
    font-size: 15px;
}

.flatpickr-calendar.inline
{
    color: #000 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months, .cur-year
{
     font-weight: 700 !important;
    color: #000 !important;
    font-size: 18px;
}


/***/

ul.slot-list-box {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 10px; 
}

.slot-list-box li {
   position: relative;
    
}
.slot-list-box li input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0;
    cursor: pointer ;
}
.slot-card {
    background-color: #C1C2CF;
    padding: 14px 12px;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: normal;
    margin-bottom: 0 !important;
    border: 2px solid #C1C2CF !important;
    cursor: pointer;
}

.slot-list-box li input:checked + label
{
    border-color: #0090BE !important;
    background: var(--primary-color) !important;
    color: #fff !important;
}


.slot-card.booked-slot{
    background-color: #FFA1A1;
     border-color: #FFA1A1 !important;
     cursor:not-allowed;
     pointer-events: none;
    
}

input[type="radio"].booked-slot {
    cursor: not-allowed!important;
}
.disabled-slot {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

.buttons-row
{
    margin-top: 25px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
}

.assessment-alert-box
{
    padding: 24px 40px;
    text-align: center;
    border: 2px solid #B9F8CF;
    background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
}

.assessment-alert-box h2
{
    color:var(--text-color);
    text-align: center;
    font-weight: 600;
    font-size: 48px;
    margin: 0;
    margin-bottom: 20px;
}
.assessment-alert-content {
    padding: 30px;
    text-align: center;
    /* background: linear-gradient(180deg, #0B89AC -118.4%, #ECFEFF 96.87%); */
}

.md-width {
    width: 50%;
    margin: 0 auto;
}

.sm-width {
    width: 25%;
    margin: 0 auto;
}

.assessment-alert-box p, .assessment-step-4 p
{
    color: #45556C !important;
}

.assessment-alert-box p a
{
    color:  var(--primary-color) !important;
}

.box-sha
{
     box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.10);
}

.survey-box
{
    padding: 24px;
}

.survey-box h4{
    font-weight: 500;
    font-size: 18px;
    margin: 0;
    margin-bottom: 20px;
}

.form-check
{
    position: relative;
     display: flex;
     align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}
.form-check label
{
    margin-bottom: 0 !important;
    font-size: 16px;
    color: #314158 !important;
    font-weight: 500 !important;
    padding-left: 35px !important;
}
.form-check input
{
    width: 16px;
    height: 16px;
    margin-top: -2px;
    position: absolute;
    left: 10px;
   
}


.form-check input:checked
{
   accent-color: var(--text-color);
}
.form-check input:checked + label
{
   
    border-radius: 14px;
    border: 2px solid #0B89AC;
    background: rgba(11, 137, 172, 0.05);
}
.survey-question-box
{
    padding: 20px;
    border-radius: 16px;
    border: 2px solid rgba(11, 137, 172, 0.30);
    background: rgba(11, 137, 172, 0.05);
    margin-bottom: 20px;
}
.form-check label
{
    width: 100%;
    padding: 10px;
    border-radius: 14px;
    border: 2px solid #E2E8F0;
    background: #FFF;
}

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

/*** Assessment Confirmation Box***/

.assessment-confirmation-box
{
    text-align: center;
}
.assessment-confirmation-content
{
    text-align: center;
}
.assessment-confirmation-content h4
{
    font-weight: 600;
    font-size: 24px;;
    margin: 0;
}
.assessment-confirmation-content p

{
   color: #45556C;
   font-size: 18px;
}

.assessment-score-box {
    padding: 20px;
    border-radius: 16px;
    border: 2px solid rgba(11, 137, 172, 0.30);
    background: linear-gradient(135deg, rgba(11, 137, 172, 0.10) 0%, rgba(14, 240, 255, 0.10) 100%);
    width: 40%;
    margin: 0 auto;
}

.assessment-score-box P, 
.assessment-score-box h2
{
    margin: 0;
}
.assessment-score-box h2
{
    color:#0B89AC;
    font-size: 20px;
    font-weight: 700;;
}
.assessment-score-box P
{
     color: #62748E !important;
      font-size: 18px;
}
.assessment-score-box span
{
   
    font-weight: 700;;
     color: #45556C
}

.assessment-header-container
{
    padding: 24px;
    width: 100%;
}

.step-counter
{
   border-radius: 33554400px;
    background: rgba(11, 137, 172, 0.10);
    padding: 6px 10px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    color: #0B89AC;
    align-items: center;
    gap: 5px;
    margin: 0 auto;
    width: max-content;
}
.step-counter svg
{
    margin-top: 0px;
}


.assessment-header-container h2{
    color: var#001015;
    text-align: center;
    font-family: "Space Grotesk";
    font-size: 36px;font-weight: 700;
    margin: 10px 0 ;
}

.assessment-header-container p{
    color: #4A5565;
    text-align: center;
    margin: 10px 0 ;
}

.step-progress-bar-box
{
    margin-top: 40px;
}



.step-progress-bar {
    width: 100%;
    height: 10px;
    background: rgba(3, 2, 19, 0.20);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.step-progress-fill {
    height: 100%;
   background: #030213;
    border-radius: 5px;
    transition: width 0.4s ease;
}
.step-progress-data
{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.step-progress-data span:first-child
{
    color: #45556C;
     font-weight: 600;
}

.step-progress-data span:last-child
{
    color: #0B89AC;
    font-weight: 600;
}


 /* .cy-direction
    {
        flex-direction: column;
    } */
.gap-5
{
    gap: 5px;
}

 .assessment-step-4 .buttons-row 
 {
    padding:  24px;
 }
 .pt-0
 {
    padding-top:0 !important
 }
.p-15   
     {
        padding: 15px;
    }   
@media (max-width:991px)
{
      ul.slot-list-box {
        grid-template-columns: repeat(2, 1fr);
    }
    .slot-card {
        padding: 10px;
        font-size: 15px !important;
    }
}

@media (max-width:767px)
{
    .assessment-header-container, 
    .cy-left-box , 
    .cy-right-box,
    .cy-col-left,
    .cy-col-right,
    .survey-box
     {
       padding: 15px;
        width: 100%;
    }
    .assessment-step-2 .cy-col-left,
     .assessment-step-2 .cy-col-right
    {
        padding: 0;
    }
    .assessment-step-1  .cy-right-box
    {
        display: none;
    }
   
    .assessment-header-container h2,
    .assessment-alert-box h2
    {
        font-size: 28px;
    }
    .assessment-header-container p, 
    .step-counter span ,
    .step-progress-data span,
    .cy-btn,
    .cy-form-control,
    .assessment-alert-content p,
    .assessment-alert-box p,.form-check label,
    .assessment-step-4 p,
    .assessment-confirmation-content p,
    .assessment-score-box P
    {
      font-size:14px;
    }
    .step-progress-bar {
        height: 5px;
    }
   .step-progress-bar-box {
        margin-top: 20px;
    }
    .cy-direction
    {
        flex-direction: column;
    }
    .cy-form-control {
        height: 40px;
    }
     .p-24,
     .survey-question-box ,
     .p-15   
     {
        padding: 15px;
    }   
  
    h5.card-step-title {
        font-size: 16px;
    }
   .buttons-row {
        gap: 10px;
    }
    .assessment-alert-box {
        padding: 10px;
    }
    .buttons-row {
        margin-top: 10px;
    }
     .assessment-step-3 .buttons-row ,
     .assessment-step-4 .buttons-row ,
     .assessment-step-5 .buttons-row 
     {
        flex-direction: column;
        width: 100% !important;
    }
     .assessment-step-5 .buttons-row 
     {
        flex-direction: column-reverse;
    }
     .assessment-step-4 .buttons-row 
     {
        padding: 0 15px;
    }
    .survey-box h4 {
        font-weight: 600;
        font-size: 16px;
    }
    .assessment-confirmation-content svg {
        width: 60px;
    }
    .assessment-score-box {
        padding: 15px;
        width: 90%;
    }
    .assessment-score-box h2 {
        font-size:18px;
    }
    .cy-mt-3
    {
        margin-top: 5px;
    }
}


/**Testing css*/


.texting-box {
    background: #ffdede;
    padding: 15px;
    border-radius: 10px;
}


.cyf-row
{
    display: flex;
    gap: 40px;
}

.w-30
{
    width: 40%;
}


button.prompt-btn,
#savePromptBtn
{
    background: #235f99;
    height: 100%;
    border: 0;
    border-radius: 40px;
    color: #fff;
    padding: 0 20px;
}
#savePromptBtn
{
   padding: 10px 20px;
}
.modal { opacity: 0; position: fixed;  left: 0; top: 0; width: 100%; height: 100%; overflow: auto; transition: all .5s ease-in-out; z-index: -1; }
.modal-anim{ opacity: 1 !important; z-index: 1;}

.modal-content
{
    transform:  translateY(-100%);
    transition: all .5s ease-in-out
}
.modal-anim .modal-content { transform:  translateY(100px) !important ;transition: all .5s ease-in-out; }

button.cy-btn.cy-mt-3.thanks-btn {
    width: 300px;
}
.modal-content { background-color: #fefefe; padding: 20px; border-radius: 8px; }

.flex-row
{
    display: flex;
    gap: 20px;
}