:root {
    --blue: #5E50F9;
    --indigo: #6610f2;
    --purple: #6a008a;
    --pink: #E91E63;
    --red: #f96868;
    --orange: #f2a654;
    --yellow: #f6e84e;
    --green: #46c35f;
    --teal: #58d8a3;
    --cyan: #57c7d4;
    --white: #ffffff;
    --gray: #434a54;
    --gray-light: #aab2bd;
    --gray-lighter: #e8eff4;
    --gray-lightest: #e6e9ed;
    --black: #000000;
    --primary: #4B49AC;
    --secondary: #a3a4a5;
    --success: #57B657;
    --info: #248AFD;
    --warning: #FFC100;
    --danger: #FF4747;
    --light: #f8f9fa;
    --dark: #282f3a;
    --primary-md-purple: #5C2BA7;
    --md-light-purple: #7A47FF;
    --md-light-cyan: #23ADBA;
    --primary-gray: #B8B8B8;
    --md-description-color: #333333;
    --md-sub-description-color: #676767;
    --md-border: #E7D9FF;
    --md-border-gray: #7F7F7F;

    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-family-nunito: 'nunito';
}

.container-fluid{
padding-left:  16px;
padding-right: 16px;
}

@font-face {
    font-family: "nunito";
    src: url("../assets/fonts/Nunito-VariableFont_wght.ttf");
}

html {
    height: 100%
}

body {
    width: 100%;
    font-family: var(--font-family-nunito), sans-serif;
}

body.full-height {
    height: 100%;
}

body.md-default-background {
    background-color: #F5F3FF;
}

.sign-in-img-container {
    height: 100%;
}

.md-btn-primary {
    background-color: var(--primary-md-purple);
    border-radius: 32px !important;
    color: var(--white);
    border: none !important;
    font-size: 18px;
    padding: 10px 10px;
    width: 100%;
}

.md-btn-primary:hover, .md-btn-primary:focus, .md-btn-primary:active, .md-btn-primary:focus-visible {
    color: var(--white);
    background-color: var(--primary-md-purple);
}

.md-btn-primary:disabled {
    background-color: gray;
    border-color: gray;
}


.md-btn-outline-primary {
    background-color: var(--white);
    color: var(--primary-md-purple);
    border-radius: 8px !important;
    border-color: var(--primary-md-purple);
    font-size: 16px;
    height: 52px !important;
    padding: 8px 16px 8px 16px;
    width: 100%;
}

.md-btn {
    background-color: var(--white) !important;
    border-radius: 32px !important;
    color: var(--md-border-gray);
    border: 1px solid var(--md-border-gray) !important;
    font-size: 18px;
}

.md-primary-link {
    text-decoration: none;
    color: var(--md-light-purple) !important;
}

.circle-filled {
    color: var(--primary-md-purple);
    font-size: 12px;
}

.circle-gray-filled {
    color: var(--primary-gray);
    font-size: 12px;
}

.welcome-flower-img {
    position: fixed;
    right: 0;
}

.md-title {
    color: var(--md-description-color) !important;
    font-size: 28px;
}

a.md-link {
    text-decoration: none;
    color: #5C2BA7;
}

.md-description {
    color: var(--md-description-color) !important;
}

.translation-text {
    color: var(--black);
}

.welcome-language-section .language-option {
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 500;
  color: #5B21B6;
}

.welcome-language-section .language-option.selected {
  background-color: #6f42c1; /* Bootstrap purple */
  color: white;
}



.md-sub-description {
    color: var(--md-sub-description-color) !important;
}

.md-btn-secondary {
    background: linear-gradient(to right, var(--primary-md-purple), var(--md-light-cyan)) !important;
    border-radius: 32px !important;
    color: var(--white);
    border: none !important;
    font-size: 18px;
}

.md-btn-non-editable {
    background-color: #B2B2B2 !important;
    border-radius: 32px !important;
    color: var(--white);
    border: none !important;
    font-size: 18px;
}

.card {
    border-radius: 16px;
}

.card-title {
    font-size: 16px;
}

.card-text {
    font-size: 14px;
}

.back-btn-container {
    position: fixed;
    top: 50px;
    left: 10px;
}

.md-input-box {
    padding: 10px;
    border-radius: 4px;
    border: 1.5px solid var(--primary-gray);
    width: 95vw;
}

.toggle-icon {
    margin-left: -30px;
}

.md-secondary-link {
    text-decoration: none;
    color: var(--primary-md-purple) !important;
    font-weight: bold;
}

.logo {
    width: 146px;
    height: 32px;
}

.side-menu {
    width: 20px;
    height: 32px;
}

.header-section {
    position: fixed;
    height: 52px;
    top: 46px;
    left: 16px;
    right: 16px;
    bottom: 10px;
}

.card-text-violet {
    font-size: 14px;
    color: var(--primary-md-purple) !important;
}

.card-dotted-border {
    border: 2px dashed var(--md-border);
    border-radius: 1rem;
}

.card-text-thin {
    font-size: 14px;
    font-weight: 200 !important;
}

.card-text-violet-thin {
    font-size: 14px;
    font-weight: 200 !important;
    color: var(--primary-md-purple) !important;
}

.custom-progress {
    width: 100%;
    height: 5px;
    background-color: var(--md-border);
    border-radius: 5px;
}

.custom-progress-bar {
    height: 100%;
    background-color: var(--primary-md-purple) !important;
    border-radius: 5px;
    transition: width 0.4s ease;
}

.custom-progress-bar-loading {
    height: 100%;
    width: 30%;
    background-color: var(--primary-md-purple) !important;
    border-radius: 5px;
    transition: width 0.4s ease;
}

.profile-selection .card.on-hover-border-primary:hover {
    border: 1px solid var(--primary-md-purple);
    border-radius: 16px;
    cursor: pointer;
}


.profile-selection .card.selected {
    border: 1px solid var(--primary-md-purple);
    border-radius: 16px;
    cursor: pointer;
}

.md-text-input {
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

.md-text-input:focus {
    border-color: var(--primary-md-purple);
    box-shadow: none;
}

.md-select-input-single {
    font-size: 16px;
    padding: 8px 8px 8px 8px;
    margin-right: 5px;
    margin-top: 8px;
    border-radius: 4px;
    border-color: black;
    height: 58px;
}

.md-form-control {
    width: 100%;
    max-height: 56px;
    padding: 8px 8px 8px 8px;
    border-radius: 4px;
    border-color: black;
}

.md-btn-link-bold {
    text-decoration: none;
    color: var(--white);
}

/* Welcome Screen Style */
.welcome-screen-carousel {
    width: 281px;
    margin: 0 auto;
}

.welcome-screen-carousel .carousel-item {
    width: 100%;
    height: 288px;
    overflow: hidden;
    position: relative;
}

.welcome-screen-slide-image-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.welcome-screen-carousel .carousel-indicators .carousel-button {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: #5C2BA7 !important;
    border: none !important;
    margin: 5px !important;
}

.welcome-title {
    font-size: 28px;
}

.welcome-description {
    font-size: 16px;
    color: #595959;
}

.welcome-page-language-section {
    font-size: 16px;
    color: #5C2BA7;
}

.welcome-page-flower {
    position: absolute;
    z-index: 1;
    top: 20%;
    left: 100%;
    transform: translate(-100%, -50%);
    width: 10%;
    height: auto;
}

/* Profile Selection */

/* Profile selection */
.back-to-navigation {
    text-decoration: none;
    font-size: 30px;
}

.profile-section-title {
    font-size: 28px;
    font-weight: 700;
}

.profile-option img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}

.profile-section-heading {
    font-size: 16px;
    font-weight: 700;
}

.profile-section-footNote {
    font-size: 14px;
    font-weight: 400;
}

.profile-option {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(185, 238, 247, 0.4)); /* Increased transparency */
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.4s ease;
    box-shadow: 2px 2px 2px 2px rgba(143, 143, 143, 0.2);
}

.profile-option:hover {
    box-shadow: 6px 8px 8px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

.profile-option.selected {
    border: 1px solid #5C2BA7 !important; /* Ensure a visible border */
}


/* Language Selection Page */
.language-btn {
    font-size: 18px;
    height: 45px;
    width: 80px;
    background-color: var(--gray-lighter) !important;
    padding: 10px 10px 10px 10px;
    border-radius: 4px;
    border: none;
}

.language-btn:hover {
    background-color: #ECE0FF !important;
    color: var(--primary-md-purple) !important;
}
.language-btn.selected {
    background-color: #ECE0FF !important;
    color: var(--primary-md-purple) !important;
}


#regionalLanguageDropdown {
    height: 45px;
    text-align: left;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.dropdown-action-button-cancel {
    width: 108px;
    height: 40px;
    background-color: var(--white);
    border: 1px solid #5B21B6;
    border-color: var(--primary-md-purple) !important;
    border-radius: 8px;
    margin: 5px;
}

.dropdown-action-button-cancel:hover, .dropdown-action-button-cancel:Active, .dropdown-action-button-cancel:focus {
    background-color: #5B21B6;
    color: white;
}

.dropdown-action-button-confirm {
    width: 101px;
    height: 40px;
    background-color: var(--primary-md-purple) !important;
    border: none;
    color: var(--white) !important;
    border-radius: 8px;
    margin: 5px;
}

.language-selection-dropup .dropdown-heading {
    font-weight: bold;
    padding: 10px 10px 10px 10px;
}

.language-selection-dropup .language-option {
    padding: 10px 16px 10px 16px !important;
    color: #21005D !important;
}

.language-selection-dropup .language-option.selected {
    background-color: var(--primary-md-purple) !important;
    color: var(--white) !important;
    border-radius: 4px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    width: 95% !important;
}

.language-selection-dropup .language-option.selected:hover, .language-selection-dropup .language-option.selected:focus, .language-selection-dropup .language-option.selected:active, .language-selection-dropup .language-option.selected:focus-visible {
    color: var(--white);
    background-color: var(--primary-md-purple);
    margin-left: 5px !important;
    margin-right: 5px !important;
    width: 95% !important;
}

.language-selection-dropup .language-option:active {
    background-color: transparent !important;
    color: inherit !important;
}

.language-selection-dropup .dropdown-menu {
    width: 80%;
    border-radius: 8px !important;
    max-height: 400px;
    overflow: scroll;

}

.language-selection-dropup .dropdown-menu.dropdown-menu-center {
    left: 50% !important;
    right: auto !important;
    text-align: left !important;
    transform: translate(-50%, 20%) !important;
    background-color: #FFFFFF !important;
    border-radius: 12px;
    border: none;
}

/* Login Screen */

.login-screen-form-container .login-screen-title {
    size: 28px;
    margin-top: 20px;
    font-weight: bold;
}

.login-screen-form-container .eyeClosed {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
    cursor: pointer;
}

.login-screen-form-container .eyeOpened {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
    cursor: pointer;
    display: none;
}

.md-form-control {
    border:1px solid black;
    padding-right: 3rem !important;
}

.md-form-control:hover {
    border: 1px solid var(--primary-md-purple);
}

.md-form-check-input {
    border: 2px solid #323232;
    border-radius: 0.1em;
}

.md-link-bold {
    text-decoration: none !important;
    color: var(--primary-md-purple);
}

.mt-form-floating input:focus + label {
    color: var(--primary-md-purple) !important;
}

.textbox-single-char {
    border: 1px solid black !important;
    border-radius: 4px !important;
    width: 44px;
}


/*Assessment Page*/

.assessment-page-number {
    height: 25px;
    width: 25px;
}

.assessment-page-phases {
    font-size: 20px;
    font-weight: 700;
}

.assessment-title {
    font-size: 28px;
}


/*smile breath page*/

.smile-breath-page-title {
    font-size: 28px;
    font-weight: 700;
}


.breathe-text {
    text-align: center;
    font-size: 16px;
    margin-bottom: 5px;
    color: #555;
}

.breathe {
    padding-top: 100px;
}

/* Patient Health Questions */

.patient-health-questions-title1 {
    font-size: 14px !important;
    font-weight: 700;
}

/*progress bars*/

.md-progress-container {
    display: flex;
    align-items: center;
    width: 100%;
}

.md-progress-bar {
    height: 4px;
    border-radius: 5px;
    transition: width 0.3s ease-in-out;
}

.md-filled-bar {
    /* Left side progress */
    background-color: #5C2BA7;
    width: 0; /* Start from 0, not 100 */
    transition: width 0.4s ease; /* smooth change */
}

.md-background-bar {
    flex-grow: 1;
    background-color: #CCBDE4;
    margin-left: 5px; /* Small gap */
    position: relative;
}

.md-end-dot {
    width: 6px;
    height: 4px;
    background-color: #5C2BA7;
    border-radius: 50%;
    position: absolute;
    right: 0;
}

.patient-health-page-select-answer {
    font-size: 14px;
    font-weight: 500;
}

.patient-health-page-instruction-icon {
    Height: 19px !important;
    width: 19px !important;
}

.patient-health-page-instruction {
    color: #5E5E5E;
}

.patient-health-questions-title2 {
    font-size: 20px;
    font-weight: 700;
}

.patient-health-page .md-btn-all {
    border: 1px solid #5E5E5E;
    color: black;
    background-color: transparent;
    border-radius: 44px;
    height: 49px;
    width: 100% !important;
}

.patient-health-page .md-btn-all.selected {
    background-color: #5C2BA7 !important;
    color: #ffffff !important;
    border-color: #5C2BA7 !important;
}

.patient-health-page .md-btn-all.selected {
    background-color: #5C2BA7;
    color: #ffffff;
}

.patient-health-page-btn .btn-option-back {
    height: 35px;
    border-radius: 22px;
    border: 1px solid #5C2BA7;
    color: #5C2BA7;
}

.patient-health-page-btn .btn-option.selected {
    background-color: #5C2BA7;
    color: #ffffff;
}


.patient-health-page-btn .btn-option:hover, .btn-option:focus {
    border: 1px solid #5C2BA7;
}

.patient-health-page-btn .btn-option-back:hover, .btn-option-back:focus {
    border: 1px solid #5C2BA7;
    background-color: #5C2BA7;
    color: #ffffff;
}

/* Custom style for the form labels and radio buttons */
.patient-health-page .form-check-label {
    font-size: 14px;
    margin-left: 5px;
    top: -20px !important;
}
.patient-health-page .form-check-input {
    margin-right: 10px;
    display: none;

}

/*.phq-btn-option:hover {*/
/*    background-color: #5B21B6;*/
/*    color: white;*/
/*    cursor: pointer;*/
/*}*/


/*voice-sample-record-page*/
.voice-recording-page-title1 {
    font-size: 14px !important;
    font-weight: 700;
}

.voice-sample-record-page-instruction {
    font-size: 14px;
}

.voice-sample-record-page-heading {
    font-size: 18px;
    font-weight: 400;
}

.voice-sample-container {
    background-color: #FFFFFF;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 22px;
    padding: 24px;
    text-align: center;


}

.voice-recording-page-custom-timer {
    background-color: #EFEAF6;
    border-radius: 24px;
    border: 1px solid #B49DD7;
    position: relative;
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 230px;
    margin: 0 10px;
    /*width: 260px; */
}

.voice-recording-page-button-container {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
}

.voice-recording-page-button-container .speak {
    width: 70px;
    height: 70px;
    cursor: pointer;
}

.voice-recording-page-button-container .play {
    width: 40px;
    height: 40px;
    cursor: pointer;
}


.voice-sample-timer {
    color: #8c6eff;
    font-size: 14px;

}

.voice-re-recording .re-record {
    color: #5C2BA7;
    text-decoration: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.voice-re-recording .re-record img {
    height: 19px;
    width: 19px;
}

.re-record2 {

}

.re-record2 .re-record {
    color: #5C2BA7;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.re-record2 .re-record img {
    height: 13px;
    width: 13px;
}


.recording-icon {
    padding-top: 45px;
    display: none; /* Initially hidden */
}

.modal-content {
    border-radius: 24px;
}

.voice-recording-card {
    background-color: #EFEAF6;
    border-radius: 16px;
}

.voice-recording-page-audio-play img {
    height: 61px;
    width: 59px;
}


/*voice-lab-volunteer*/
.voice-lab-admin-title {
    font-size: 28px;
    margin-top: 8px;
}
.voice-lab-admin-mobile-number{
    width: 100% !important;
}

/*start-assessment-page*/

.start-assessment-page-number {
    width: 32px;
    height: 32px;
}

.start-assessment-title {
    font-size: 28px;
    font-weight: 700;
    width: 100%;
}

.start-assessment-page-phases {
    font-size: 20px;
    font-weight: 700;
    display: block;
    text-align: left;
}

.start-assessment-custom-modal {
    Min-width: 80px;
    Max-width: 340px;
    border-radius: 28px;
    background-color: #F9EFFF;
    margin: auto;
}

.start-assessment-not-now {
    width: 92px;
    height: 40px;
    background-color: var(--white) !important;
    border: 1px solid;
    border-color: var(--primary-md-purple) !important;
    color: var(--primary-md-purple) !important;
    border-radius: 100px;
    margin: 5px;
    font-size: 14px;
}

.start-assessment-give-access {
    width: 126px;
    height: 40px;
    font-size: 14px;
    background-color: var(--primary-md-purple) !important;
    border: none;
    color: var(--white) !important;
    border-radius: 100px;
    margin: 5px;
}

/* login-to-continue */
    .login-to-continue-form-container .eyeClosed{
        position: absolute;
        right:0;
        top: 50%;
        transform: translateY(-50%);
        margin-right:10px;
        cursor: pointer;
    }

    .login-to-continue-form-container .eyeOpened{
        position: absolute;
        right:0;
        top:50%;
        transform: translateY(-50%);
        margin-right:10px;
        cursor: pointer;
        display: none;
    }

.address-form-container .form-select{
        height: 56px;
}

.initial-health-assessment{
    font-size: 20px;
    font-weight: 700;
}

/* allergies */

.md-default-background2{
    background-color: #F5F3FF;
}

.md-btn-questions {
    background-color: var(--white);
    color: black;
    border-radius: 8px;
    border: none !important;
    font-size: 18px;
    padding: 10px 10px;
    width: 100%;
    height: 52px;
}



.md-btn-questions:disabled {
    background-color: gray;
    border-color: gray;
}

 .btn-option-back-next {
    background-color: var(--white);
    height: 40px;
    width: 88px;
    border-radius: 4px;
    border: 1px solid #5C2BA7;
    color: #5C2BA7;

}

 .btn-option-back-next:hover, .btn-option-back-next:focus .btn-option-back-next:active, .btn-option-back-next:focus-visible{
    border: 1px solid #5C2BA7;
    background-color: #5C2BA7;
    color: #ffffff;
}


.md-btn-questions.selected {
    background-color: #5B21B6 !important;
    color: white;
}

.allergy-name .form-floating .form-control{
    background-color: #F5F3FF;
}


/* tick problems page */

.tick-problems .form-check {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    border-radius: 5px
}

.tick-problems .form-check.selected {
    background-color: #542798;
    color: white;
}

.tick-problems .form-check-input {
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    background-color: white !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 10px !important;
    cursor: pointer !important;
    position: relative !important;
    border: 2px solid black !important;
    border-radius: 2px !important;
}


.tick-problems .form-check-input:checked {
    background-color: #5B21B6 !important;
    border: 2px solid white !important;
}

.tick-problems .form-check-input:not(:checked) {
    background-color: white !important;
}

.tick-problems .form-check-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.tick-problems .form-check-input::before {
    font-size: 14px !important;
    color: #6A1B9A !important;
    display: none !important;
    background-color: white !important;
}


.tick-problems .form-check-input:checked::before {
    display: block !important;
}

.tick-problems .form-check-label {
    margin-left: 0 !important;
    font-weight: bold !important;
    color: black !important;
}
.form-check-input:checked{
    background-color: #5B21B6 !important;
    border: 2px solid white !important;
}

.tick-problems .form-check-input:checked + .form-check-label {
    color: white !important;
}

.tick-problems .checkbox-scroll-area {
    max-height: 300px; /* Adjust height as needed */
    overflow-y: auto;
    border: 1px solid #ccc; /* Optional: for visual clarity */
    padding: 10px;
    border-radius: 8px;
    background-color: #F8F8FF;
}


/* login-with-mobile-number*/
.gender-btn{
    font-size: 18px;
    height: 45px;
    width: 80px;
    background-color: #F9FAFB;
    padding: 10px 10px 10px 10px;
    border-radius: 6px;
    border: none;
}

.gender-btn:hover {
    background-color: #ECE0FF !important;
    color: var(--primary-md-purple) !important;
}

.gender-btn.selected {
    background-color: #ECE0FF !important;
    color: var(--primary-md-purple)!important;
    border: 1px solid var(--primary-md-purple)!important;
}

/* date-page */
.date-page-btn{
}

.page-navigation-container  .btn-option-back{
     height:40px;
     width: 88px;
     background-color: var(--white) !important;
     border-radius: 4px;
     border: 1px solid #5C2BA7;
     color: #5C2BA7;
     text-decoration: none;
     text-align: center;
     padding:8px 10px 8px 10px;
}

.page-navigation-container  .btn-option-next{
     height:40px;
     width: 88px;
     background-color: var(--primary-md-purple) !important;
     border-radius: 4px;
     border: 1px solid #5C2BA7;
     color: var(--white) !important;
     text-decoration: none;
     text-align: center;
     padding:8px 10px 8px 10px;
}

.date-page-btn{
   background-color: var(--white) !important;
    border-radius: 8px !important;
    color: var(--black) !important;
    border: none !important;
    font-size: 18px;
    padding: 10px 10px;
}

.medication-btn.selected{
    color: var(--white) !important;
    background-color: var(--primary-md-purple) !important;
}

.language-selection-dropup .language-option.selected {
    background-color: var(--primary-md-purple) !important;
    color: var(--white) !important;
    border-radius: 4px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    width: 95% !important;
}

.date-page-btn.selected {
    color: var(--white) !important;
    background-color: var(--primary-md-purple) !important;
}

.month-scrollspy {
    max-height: 250px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.date-custom-page-btn {
    position: sticky;
    bottom: 0;
    padding: 10px;
}

/* therapist-card */
.btn-therapist{
    background-color:#F9FAFB !important;
    border-radius:8px;
    border: 1px solid gray;
    max-width: 116px;
    max-height: 35px;
    padding: 5px 18px 5px 18px;
 }

.container-search{
  position: relative;
  width: 235px;
}

.search-input {
  max-width: 235px !important;
  height: 56px !important;
  border-radius:8px;
  border:1px solid gray;
  padding-left: 2.5rem;
  }

.search-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: gray;
  pointer-events: none;
}

.btn-filter{
  width:135px;
  height:56px;
  border-radius:8px;
  border:1px solid var(--primary-md-purple);
  color: var(--white) !important;
  background-color: var(--primary-md-purple) !important;
  padding:8px 16px 8px 16px;
}

.card{
    max-width:400px;
    max-height:200px;
}

.specialization{
    color: var(--primary-md-purple) !important;
}

.doctor-profile{
   width:113px;
   height:110px;
   border-radius: 8px;
}

.therapist-btn-container{
    width:100%;
    justify-content:space-between;
}

.btn-view-details{
     max-height:35px;
     max-width: 150px;
     background-color: var(--white) !important;
     border-radius: 8px;
     border: 1px solid #5C2BA7;
     color: var(--primary-md-purple);
     text-decoration: none;
     text-align: center;
     padding:5px 10px 5px 10px;
}

.btn-book{
    height:35px;
    width: 120px;
    background-color: var(--primary-md-purple) !important;
    border-radius: 8px;
    border: 1px solid #5C2BA7;
    color: var(--white) !important;
    text-decoration: none;
    text-align: center;
    padding:5px 10px 5px 10px;
}

.doctor-badge{
    border-radius: 20px;
    border:1px solid #C4B5FD;
    color: #6c757d;
    font-size: 11px;
    text-align:center;
    padding: 2px 14px;
}

/*Booking Session*/

.text-purple{
    color: var(--primary-md-purple) !important;
}

/* Buying Page */
.buying-page .meeting-card{
    height: 191px;
    border-radius: 12px;
}

.buying-page .view-details{
    font-size: 16px;
    font-weight: 700;
    color: #5C2BA7;

}

.buying-page .page-head{
    font-size: 28px;
    font-weight: 700;
}

.md-btn-buying {
     background-color: white;
    border-radius: 32px !important;
    color: #111827; /* dark gray text */
    border: none !important;
    font-size: 16px;
    height: 40px;
    min-width: 140px;
    font-weight: 500;

}
.md-btn-buying:hover, .md-btn-buying:focus, .md-btn-buying:active, .md-btn-buying:focus-visible {
    color: var(--white) !important;
    background-color: #8B5CF6 !important;
}
.md-btn-buying.active-tab {
    background-color: #8B5CF6; /* purple */
    color: white;
}

.service-package-card .card .card-img-top {
    border-radius: 12px 12px 0 0;
}

.service-package-card .card .card-body{
    border-radius: 0 0 12px 12px;
}

.card-description .card-title{
    font-size: 12px;
}

.card-description .card-btn{
    height: 22px;
    width: 78px;
    border-radius: 33px !important;
    background-color: #E6FAE8;
    font-size: 10px;
}

.card-description .card-text{
    font-size: 16px;
    font-weight: 700;
}

.buying-page-package-service .swiper {
  height: auto !important;
}

.buying-page-package-service .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto !important;
}

.package-service-card .service-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    height: 100%;
}

.package-service-card .yoga-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.package-service-card .card-body {
    flex: 1;
    background-color: white;
    position: relative;
    z-index: 1;
    padding: 1rem;
}

.service-card .card-text{
    font-size: 22px;
    font-weight: 700;
    padding-bottom: 10px;
}

.service-card .overall-progress{
     font-size: 14px;
     font-weight: 400;
}

.voice-maker{
    background-color: #FFFFFF;
    max-width: 587px;
    border-radius: 8px;
}

.voice-maker .vm-head{
    font-size: 28px;
    font-weight: 700;
}

.voice-maker .vm-details{
    margin-top: -20px;
}

.voice-maker .vm-image{
    margin-top: 80px;
}

.therapist-card{
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-height: 230px;
}

.therapist-card .therapist-profile {
    height: 100px;
    width: 100px;
    object-fit: cover;
    border-radius: 9%;
}

.therapist-card .psychologist{
    font-size: 12px;
    font-weight: 500;
    color: #6D28D9;
}

.therapist-card .psychologist-name{
    font-size: 18px;
    font-weight: 700;
}

.therapist-card .experience{
    font-size: 12px;
    font-weight: 500;
}

.therapist-card .service-provider-specialities{

}

.therapist-card .service-provider-specialities .badge{
    background-color: #FFF;
    border-radius: 8px;
    color: #374151;
    border: 1px solid #C4B5FD;
}


.book-btn .md-btn-service{
    height: 41px;
    width: 120px;
}

.therapist-view-details .md-btn-service{
    height: 41px;
    width: 132px;
    background-color: white;
    color: #5C2BA7;
    border: 1px solid #5C2BA7;
}

.problem-type .btn{
    border: 1px solid #C4B5FD;
}

.see-all{
    font-size: 18px;
    font-weight: 600;
    color: #5C2BA7;
     text-decoration: none;
}


/* My Appointment page */

.md-btn-service {
    background-color: #5B21B6;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    height: 31px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.md-btn-service:hover, .md-btn-service:focus, .md-btn-service:active, .md-btn-service:focus-visible {
    color: white;
    background-color: #5B21B6;
}

.main-heading{
    font-size: 36px;
}

.appointment-setting{
    font-size: 18px;
    color: #5B21B6;
}

/* Appointment card container */
.appointment-card-container{
    background-color: white;
    border-radius: 16px;
}

.appointment-card-container .filter-by-text{
    font-size: 24px;
}

.appointment-card-container .select-appointment{
    border: 1px solid #6B7280;
    outline: none;
    box-shadow: none;
}

/* Appointment card */
.appointment-card{
    width: 100% !important;
    border-radius: 12px !important;
    background-color: #F9F8FF;
    border: 1px solid #F2F2F2;
}

.appointment-card .profile-image{
    height: 32px;
    width: 32px;
}

.appointment-card .profile-name{
    font-size: 16px;
    font-weight: 500;
}

.appointment-card .profile-text{
    font-size: 12px;
    font-weight: 500;
   /* white-space: nowrap; */
}

.appointment-card .clock-image{
    height: 24px;
    width: 24px;
    margin-bottom: 10px;
}

.appointment-card .time{
    font-size: 12px;
    font-weight: 600;
}

.appointment-card .view-details{
     font-size: 16px;
     font-weight: 700;
     color: #5C2BA7 ;
}

.my-appointment-date{
    height: 63px;
    width: 46px;
    border: 1px solid #A78BFA;
    border-radius: 12px;
    background-color: #EDE9FE;
}

.my-appointment-date .monthText{
    font-size: 10px;
}

.my-appointment-date .day{
    font-size: 24px;
}

.my-appointment-date .middle-line {
    width: 100% !important;
    height: 1px;
    border-top: 1px solid #A78BFA;
}



/* Current Episode */
.package-details-head{
    font-size: 32px;
    font-weight: 700;
}
.current-episode .profile-details .profile-name{
    font-size: 40px;
    font-weight: 400;
}

.current-episode .profile-details .profile-image{
    height: 40px;
    width: 40px;
}

.current-episode .appointment-card .time{
    font-size: 20px;
    font-weight: 600;
}

.current-episode .appointment-card .problems{
    font-size: 20px;
    font-weight: 400;
}

.current-episode .appointment-card .md-btn-service{
    height: 48px;
    width: 219px;
}

.past-episode table tr th {
    background-color: #EAEAEA;
    font-size: 18px;
}

.past-episode thead th:first-child {
  border-top-left-radius: 8px;
}

.past-episode thead th:last-child {
  border-top-right-radius: 8px;
}


.past-episode th, td {
    border: 1px solid transparent;
    font-size: 16px;
}

.past-episode .btn-custom-table {
  border: 1px solid #6D3ABE;
  color: #6D3ABE;
  padding: 2px 10px;
  font-size: 14px;
  height: 30px;
  background-color: white;
  border-radius: 4px;
}

.past-episode .btn-custom-table:hover {
  background-color: #7e22ce;
  color: white;
}

.past-episode .md-btn-service{
    height: 52px;
    width: 219px;
}


/* Appointment Setting */

.duration-details .form-control{
    height: 56px;
}

.session-save .md-btn-service{
    height: 52px;
    width: 233px;
}

.working-hours-form .days{
    font-size: 16px;
}

.working-hours .form-select{
    height: 40px;
    width: 182px;
    outline: none;
    box-shadow: none;
}

#working-hours-form{
    padding-left: 10px;
}

.working-hours .form-check-input{
    height: 18px;
    width: 36px;
}

.working-details{
    font-size: 32px;
    font-weight: 700;
}

.working-hours .delete-btn{
    padding-left: -40px;
}

.timezone .form-select{
    height: 56px;
    outline: none;
    box-shadow: none;
}

.notification-details .notification-head{
    font-size: 20px;
    font-weight: 700;
    color: #5C2BA7;
}

.notification-details .notification-get-notified{
    font-size: 14px;
    font-weight: 400;
    margin-top: -10px;
}

.md-btn-notification{
    color: #5B21B6;
    font-size: 16px;
    font-weight: 400;
    height: 40px;
    width: 204px;
    border-radius: 8px;
    border: 1px solid #5B21B6;
    margin-top: -10px;
}

.md-btn-notification:focus, .md-btn-notification:active, .md-btn-notification:hover, .md-btn-notification:visited {
    color: #5B21B6;
    border: 1px solid #5B21B6;
    background-color: transparent;
}

.working-hours .form-check{
    min-width: 150px;
}


/* Sidebar */
.buying-body {
    overflow-x: hidden;
}

.layout-with-sidebar{
     display: flex;
     height: 100vh;
     width: 100vw;
     overflow-x: hidden;
}

.layout-with-sidebar .sidebar {
  background-color: #F5F3FF;
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
  z-index:999;
  width: 330px;
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  flex-shrink: 0;

}

.layout-with-sidebar > div:last-child {
    flex-grow: 1;
    min-width: 0;
    overflow-x: hidden;
}

.layout-with-sidebar .sidebar .nav-link {
  color: black;
  padding: 12px 20px;
}

.layout-with-sidebar .topbar {
  background-color: #F9FAFB;
  padding: 5px;
  border-bottom: 1px solid #ddd;
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  margin-top: 0 !important;
}

.swiper-container {
    width: 100%;
    overflow: hidden;
}

.layout-with-sidebar .topbar topbar-head{
    font-size: 24px;
    font-weight: 400;
}

.page-contents{
    width:100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
}

.nav-pills .nav-link {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  transition: all 0.3s ease;
}


.nav-pills .nav-link:hover,
.nav-pills .nav-link.active,
.nav-pills .nav-link:focus {
  background-color: #C4B7FF;
  color: #2e2e2e;
}

.sidebar .dropdown-item {
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.sidebar .dropdown-item:hover {
  background-color: #eae4fb;
  color: black;
}

.dropdown-arrow {
  transition: transform 0.3s ease;
}

/* When button is expanded, rotate the arrow */
button[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
}


.layout-with-sidebar .topbar .btn-dropdown{
    background-color:#F6F6F6;
    border-radius: 6px;
    border: 1px solid #E9E9E9;
}

/* Hide sidebar by default on mobile */
@media (max-width: 1024px) {
  .layout-with-sidebar .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    background-color: #F5F3FF;
    z-index: 1050;
    overflow-y: auto;
    padding: 1rem;
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
  }

  .layout-with-sidebar .sidebar.active {
    transform: translateX(0);
  }

    .layout-with-sidebar .sidebar{
        padding: 5px;
    }
}






/* Search therapist */
.search-therapist-btn{
    border: 1px solid #959595;
    border-radius: 8px;
    height: 35px;
    font-size: 14px;
    font-weight: 700;
    padding-inline: 20px;
    background-color: white;
}

.search-therapist-btn:focus,
.search-therapist-btn:active,
.search-therapist-btn:hover,
.search-therapist-btn:visited {
    border: 1px solid #5C2BA7;
    background-color: #EDE9FE;
}

.therapist-search .input-group {
    height: 56px;
}

.therapist-search .input-group .form-control{
    height: 54px;
}

.therapist-search .input-group .text{
    color: black;
}

.therapist-search .book-btn .md-btn-service{
    height: 56px;
}


/* Service List */
.service-list-header .add-new-course .md-btn-service{
    height: 52px;
}

.service-list-search-bar{
    margin-bottom: -20px;
}

.service-list-search-bar .entries{
    font-size: 24px;
    font-weight: 400;
}

.service-list-table .yoga-img{
    height: 43px;
    width:76px;
}

.service-list-table table tr th {
    background-color: #EAEAEA;
    font-size: 18px;
}

.service-list-table thead th:first-child {
  border-top-left-radius: 8px;
}

.service-list-table thead th:last-child {
  border-top-right-radius: 8px;
}

.service-list-table th, td {
    border: 1px solid transparent;
    font-size: 16px;
    font-weight: 600;
}

.service-list-table td .status-badge{
    background-color: #D5FFF5;
    color: #005844;
}

.service-list-table td .status-badge-unpublished{
    background-color: #FEF3C7;
    color: #D97706;
}


/* Import Participants */
.import-participants .download-text{
    color: #4C1D95;
    font-size: 14px;
    font-weight: 400;
}

.import-participants .title{
    font-size: 28px;
    font-weight: 700;
}

.import-participants .ip-dropzone{
      border: 3px dashed #E7D9FF;
      border-radius: 16px;
      background-color: #F9FAFB;
      padding: 2rem;
      text-align: center;
}

.import-participants .ip-dropzone .browse-btn{
    background-color: #5B21B6;
    color: white;
    padding-left: 30px;
    padding-right: 30px;
}

.import-participants .dashboard-btn .md-btn-primary{
    background-color: #F5F3FF;
    color: black;
    border: 1px solid #5B21B6 !important;
}

.import-participants .upload-preview .upload-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.04);
}

.import-participants .upload-preview .upload-text {
  font-size: 0.875rem;
  color: #6b7280;
  display: flex;
  align-items: center;
}

.import-participants #generateBtn:disabled {
    background-color: #A78BFA ;
    border-color: #A78BFA ;
    color: white;
    cursor: not-allowed;
}

.import-participants .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(161, 144, 191, 0.6); /* greyish blur background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.import-participants .modal-box {
    background-color: white;
    padding: 1.5rem;
    border-radius: 1rem;
    width: 90%;
    max-width: 460px;
}

.import-participants .confirmation-head{
    font-size: 20px;
    font-weight: 600;
}

.import-participants .confirmation-head{
    font-size: 16px;
    font-weight: 400;
}

.import-participants .confirm-btn{
    background-color: #F5F3FF;
    color: #5B21B6;
    border: 1px solid #5B21B6;
    padding-left: 30px;
    padding-right: 30px;
}

.import-participants .confirm-btn:hover{
    background-color: #5B21B6;
    color:white;
    border: 1px solid #5B21B6;
}

.import-participants .successful-message{
    font-size: 20px;
    font-weight: 600;
}

.import-participants #successfulContinue {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    pointer-events: none;
}

.import-participants #successfulContinue .modal-box {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    z-index: 10000;
    pointer-events: auto;
    position: relative;
}

.import-participants .action-buttons {
    position: relative;
    z-index: 10001;
    pointer-events: auto;
}

.import-participants .upload-complete-status {
    color: #5B21B6;
}

/* Search for services */
.yoga .search-service-page-head{
    font-size: 20px;
    font-weight: 700;
}

.yoga-card .middle-line {
    width: 100% !important;
    height: 1px;
    border-top: 1px solid #EEEEEE;
}

.yoga .yoga-head{
    font-size: 16px;
    font-weight: 600;
}

.yoga .yoga-text{
    font-size: 16px;
    font-weight: 400;
}

 .yoga-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    height: 100%;
}

.yoga-card .yoga-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yoga-card .card-body {
    flex: 1;
    background-color: white;
    position: relative;
    z-index: 1;
    padding: 1rem;
}

.yoga-card .md-btn-service{
    background-color: white;
    color: #5B21B6;
    border: 1px solid #5B21B6;
}

.yoga-card .md-btn-service:hover, .md-btn-service:focus, .md-btn-service:active, .md-btn-service:focus-visible {
    color: var(--white);
    background-color: #5B21B6;
}


/* Buy service */
.buy-service-page .service-card .card-text{
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 0 !important;
}

.buy-service-page .service-card .session-time{
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 0 !important;
}

.md-btn-all {
    background-color: #5B21B6;
    border-radius: 8px !important;
    Height: 52px;
    color: white;
    border: #5B21B6;
    font-size: 18px;
    padding: 10px 10px;
    width: 100%;
}

.md-btn-all:hover,
.md-btn-all:focus,
.md-btn-all:active,
.md-btn-all:focus-visible {
    background-color: #5B21B6 !important;
    color: white !important;
}

.md-btn-all:disabled,
.md-btn-all.disabled {
    background-color: #A78BFA !important;
    color: white !important;
    opacity: 1 !important;
    cursor: not-allowed;
}


.buy-service-page .phases-container {
    background-color: #EDE9FE;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 16px;
}

.buy-service-page .phases-details-container {
    width: 96%;
    margin: 0 auto;
    border-radius: 12px;
    background-color: #F5F2FF;
    margin-bottom: 0.5rem;
}

.buy-service-page .phases-container .phases-head {
    font-size: 16px;
    font-weight: 700;
    align-self: flex-start;
    text-align: left;
    padding-left: 10px;
}

.buy-service-page .phases-details {
    padding: 0.75rem 1rem;
}

.buy-service-page .card-text {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.buy-service-page .session-time {
    font-size: 13px;
    color: #5f5f5f;
    margin-bottom: 0;
}


/* Thank You  page */
.payment-page .payment-head{
    font-size: 32px;
    font-weight: 700;
}

.payment-page .payment-text{
    font-size: 16px;
    font-weight: 500;
}

.payment-page .payment-successful{
     font-size: 20px;
     font-weight: 700;
     color: #5C2BA7;
 }

.payment-page .payment-chat{
     color: #5C2BA7;
 }

.container-payment{
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Voice Sample Booking */
.voice-sample-booking .vs-head{
    font-size: 24px;
    font-weight: 700;
}

.container-voice-sample-booking{
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.container-voice-sample-booking .special-offer{
    font-size: 20px;
    font-weight: 600;
}

.container-voice-sample-booking .vs-offer-details{
     color: #5C3793;
     position: relative;
     top: 5px;
 }

 .container-voice-sample-booking .vs-offer-cost{
     font-size: 22px;
     font-weight: 700;
     color: #5C2BA7;
  }

  .container-voice-sample-booking .vs-actual-cost{
       font-size: 18px;
       font-weight: 700;
       color: #5C2BA7;
       position: relative;
       top: 20px;
   }

.profession-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* equivalent to Bootstrap's gap-4 */
    width: 359px;
    height: 736px;
    top: 24px;
    left: 16px;
}

.md-table-all table tr th {
    background-color: #EAEAEA !important;
    font-size: 18px !important;
}

.md-table-all thead th:first-child {
  border-top-left-radius: 8px !important;
}

.md-table-all thead th:last-child {
  border-top-right-radius: 8px !important;
}

.md-table-all th, td {
    border: 1px solid transparent;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.login-with-mobile-number .eyeClosed {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
    cursor: pointer;
}

.login-with-mobile-number .eyeOpened {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
    cursor: pointer;
    display: none;
}

/* Initial Assessment */

#form-initial-assessment .assessment-header{
    font-size: 28px;
    font-weight: 700;
}


.voice-recoding-custom-modal {
    Min-width: 80px;
    Max-width: 460px;
    border-radius: 28px;
    background-color: #F9EFFF;
    margin: auto;
}

/* Voice assessment result */

.voice-assessment-result-head{
    font-size: 24px;
    font-weight: 700;
}

.voice-assessment-result-detail{
    font-size: 14px;
    font-weight: 400;
}

.voice-assessment-result-container{
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.voice-assessment-result-container .gradient-bar {
    height: 18px;
    border-radius: 5px;
    background: linear-gradient(to right, #F2FF00, #FFCB00, #FF9900, #FF4501, #B902C1);
}

.voice-assessment-result-container .bar-wrapper {
    background: #eee;
    border-radius: 5px;
    margin-bottom: 20px;
}

.voice-assessment-result-container .label {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 5px;
}

.voice-assessment-result-container .result-head{
    font-size: 18px;
    font-weight: 700;
}

.voice-assessment-result-container .result-head{
    font-size: 16px;
    font-weight: 600;
    color: #4C1D95;
}

.voice-assessment-result .result-download-text{
    color: #5C2BA7;
}

.voiceLab-card {
    border-radius: 55px;
    border: 1px solid #5C2BA7;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    background-color: white;
    min-width: 220px;
}

.voiceLab-card-body {
    padding: 20px;
}

.voiceLab-card-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
}

.voiceLab-card-text {
    font-size: 1.5rem;
    color: #007bff;
}



/* service provider additional profile info*/

.choose-profession-container{
    /*background-color: #F8F8FF;*/
    background-color: white;
    height: 350px;
    overflow-y: auto;
}

.choose-profession-container .md-btn-all {
    background-color: white;
    border-radius: 8px !important;
    Height: 52px;
    color: Black;
    border: 1px solid #5B21B6;
    font-size: 18px;
    padding: 10px 10px;
    width: auto;
}

.md-btn-all:hover,
.md-btn-all:focus,
.md-btn-all:active,
.md-btn-all:focus-visible {
    background-color: #5B21B6 !important;
    color: white !important;
}

.additional-profile-info .ip-dropzone{
    border: 3px dashed #E7D9FF;
    border-radius: 16px;
    background-color: #F9FAFB;
    padding: 2rem;
    text-align: center;
}

.additional-profile-info .ip-dropzone .browse-btn{
    background-color: #5B21B6;
    color: white;
    padding-left: 30px;
    padding-right: 30px;
}



.voice-recording-card {
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}


.weekday-working-hours {
    display: none;
}
.nav-link.active.grey {
    background-color: #dddddd; /* Change to desired grey color */
    color: #555555; /* Change to desired text color */
}

.weekday-working-hours.active {
    display: block;
}

.ui-timepicker-standard {
    z-index: 1050 !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type='number'] {
    -moz-appearance: textfield;
}



/* Fix width & height consistency for Swiper cards */
.package-service-card {
    height: 100%;
    width: 100%;
}

/* Ensure consistent card size */
.service-card {
    height: 100%;
    max-width: 1536px;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    min-height: 360px; /* Set a min height so they align */
}

/* Image stays at top with fixed height */
.service-card .yoga-img {
    max-width: 1536px;
    height: 200px;
    object-fit: cover;
}

/* Card body stretches to fill remaining height */
.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
}

/* Card description should not overflow */
.card-description {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Button alignment fix */
.card-btn {
    white-space: nowrap;
}


.md-btn-buying.active {
    background-color: #007bff;
    color: white;
}

.select2-container--default .select2-selection--single {
  height: 52px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: 1px solid black !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
  width: 30px !important;
}


/* voice-confirmation-page */

.confirmation-for-voice-assessment .mental-health-option {
    background: white;
    border-radius: 10px;
    border: 1px solid black;
    padding: 24px;
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.4s ease;
    box-shadow: 2px 2px 2px 2px rgba(143, 143, 143, 0.2);
}

.confirmation-for-voice-assessment .mental-health-option:hover {
    box-shadow: 6px 8px 8px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

.confirmation-for-voice-assessment .mental-health-option.selected {
    border: 1px solid #5C2BA7 !important; /* Ensure a visible border */
}

.md-btn-price{
    background-color: #5B21B6;
}

.voice-confirmation-page-buttons .proceed-btn{
    background-color: #5B21B6;
}

.voice-confirmation-page-buttons .proceed-btn:hover,
.proceed-btn:focus,
.proceed-btn:active,
.proceed-btn:focus-visible {
    background-color: #5B21B6 !important;
    color: white !important;
}

.voice-confirmation-page-buttons .back-to-my-page-btn{
    border: 1px solid #5B21B6 ;
    color: #5B21B6 !important;
}

.back-to-my-page-btn:hover,
.back-to-my-page-btn:focus,
.back-to-my-page-btn:active,
.back-to-my-page-btn:focus-visible {
    background-color: #5B21B6 !important;
    color: white !important;
}

.voice-confirmation-page-buttons{
    margin-top: -30px;
}

.form-check-vertical {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
}
.form-check-vertical .form-check {
    margin-bottom: 8px;
}


.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #5B21B6 !important;
}

.select2-selection__arrow {
    margin-top: 7px;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    display: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 17px;
    line-height: 30px !important;

}

.select2-container--default .select2-results > .select2-results__options{
    max-height: 300px !important;
}

/*whats app send link button*/
.btn-send-link {
    background-color: #5C2BA7;
    color: #fff;
    border: none;
}

.btn-send-link:hover {
    background-color: #5C2BA7;
    color: #fff;
}
a.no-underline {
    text-decoration: none !important;
}


.search-image {
    width: 74px;        /* circle width */
    height: 74px;       /* circle height */
    object-fit: contain; /* show full image inside circle */
    border: 2px solid #ddd; /* optional border */
    border-radius: 50%; /* ensures it's circular */
    background-color: #fff; /* optional: background if image has transparent edges */
}

.creator-image {
    width: 44px;        /* circle width */
    height: 40px;       /* circle height */
    object-fit: contain; /* show full image inside circle */
    border: 0px solid #ddd; /* optional border */
    border-radius: 50%; /* ensures it's circular */
    background-color: #fff; /* optional: background if image has transparent edges */
}

.select-all{
    height: 52px !important;
    border: 1px solid black !important;
}
.btn-gradient {
    background:#8B5CF6;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-gradient:hover {
    background: #8B5CF6;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.session-item {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.session-item:hover {
    box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
}
.selected-card {
    border: 2px solid #007bff !important;
    background-color: #f0f8ff;
}
 /*Appointment settings css*/
.btn-service {
    background-color: transparent;
    border-radius: 8px;
    border-color: #5C2BA7;
    color: #5C2BA7;
    font-size: 14px;
    height: 31px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-custom-primary {
    background-color: #5C2BA7 !important;
    border-color: #5C2BA7 !important;
    color: #fff !important;
}

.btn-custom-primary:hover {
    background-color: #4a2186 !important; /* optional darker hover */
    border-color: #4a2186 !important;
    color: #fff !important;
}

.btn-custom-outline {
    background-color: transparent !important;
    border: 1px solid #5C2BA7 !important;
    color: #5C2BA7 !important;
}


.screening-phq-card {
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
}

.screening-phq{
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);

}


.content-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 3rem 1rem;
}

.card.md-card {
    border: none;
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.card.md-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.md-card-body {
    padding: 34px;
}

.md-card-title {
    font-weight: 600;
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1.5rem;
    text-align: start;
}

.btn-md-primary {
    background-color: #893EFF;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    padding: 0.75rem;
    transition: all 0.3s;
}

.btn-md-primary:hover {
    background-color: #893EFF;
    transform: scale(1.02);
}

.form-check-input {
    margin-top: 0.3rem;
}

.modal-body ul,
.modal-body ol {
    margin-left: 1.2rem;
}

@media (max-width: 990px) {
    .md-card-body {
        padding: 1.5rem;
    }
    .md-card-title {
        font-size: 1.25rem;
    }
}
.custom-ms {
    margin-left: 63px;
}

/*report*/
.report-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    background: white;
}

.md-report-card {
    border: none;
    background-color: #F8F6FF;
    /*box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);*/
    transition: all 0.3s ease;
}

.level-mild .progress-bar {
    background: linear-gradient(to right, #ffff00, #ffd700);
    border-radius: 5px;
    color: transparent;
    position: relative;
}
.progress.level-moderate .progress-bar {
    background: linear-gradient(to right, #ffae42, #ff8800);
    border-radius: 5px;
    color: transparent;
    position: relative;
}

.progress.level-moderate-severe .progress-bar {
    background: linear-gradient(to right, #ff7043, #ff3300);
    border-radius: 5px;
    color: transparent;
    position: relative;
}
.inline-loader {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:14px;
    color:#333;
}

/* Simple CSS spinner */
.inline-loader .spinner{
    width:40px;
    height:40px;
    border:3px solid rgba(0,0,0,0.15);
    border-top-color: rgba(0,0,0,0.65);
    border-radius:50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.waveform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 40px;
}

.waveform span {
    width: 4px;
    height: 100%;
    background-color: #5C2BA7;
    display: block;
    border-radius: 4px;
    animation: wave 1s infinite ease-in-out;
}

/* Generate delays dynamically using calc */
.waveform span:nth-child(n) {
    --i: 0;
    animation-delay: calc((var(--i) * 0.1s));
}

@keyframes wave {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
}

/*completed*/
.pending-validations {
    background: linear-gradient(135deg, #fff5cc, #ffe699);
    border-radius: 12px;
}

/* Icon box */
.pending-validations .icon-box {
    background: linear-gradient(135deg, #ffc107, #ffb347);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Completed Validation Card */
.completed-validations {
    background: linear-gradient(135deg, #ccffe6, #a6f5c8);
    border-radius: 12px;
}

/* Icon box */
.completed-validations .icon-box {
    background: linear-gradient(135deg, #28a745, #20c997);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.section-title-wrapper{
    margin:15px 0px;
}

.section-title-wrapper .section-title{
    font-size:1.5rem;
}


/* Voice Samples Card */
.voice-samples-card {
    background: linear-gradient(135deg, #f3e8ff, #dbeafe); /* light purple → light blue */
    border-radius: 12px;
}

/* Header row */
.custom-header-row {
    background-color: #f3f4f6 !important;
    font-weight: 600;
    text-align: center;
}

/* Minimal Anxiety (Green) */
.row-minimal {
    background-color: #f0fff4 !important; /* light green */
    color: #006243 !important;
}

/* Mild Anxiety (Light Gray) */
.row-mild {
    background-color: #f8f9fa !important; /* light gray */
    color: #006243 !important;
}

/* Moderate Anxiety (Yellow) */
.row-moderate {
    background-color: #fffbea !important; /* light yellow */
    color: #006243 !important;
}

/* Moderately Severe Anxiety (Orange/Red Tint) */
.row-moderately-severe {
    background-color: #ffecec !important;
    color: #006243 !important;
}

/* Severe Anxiety (Red) */
.row-severe {
    background-color: #ffe5e5 !important;
    color: #006243 !important;
}

.row-minimal td {
    background-color: #f0fff4 !important;
}

.row-mild td {
    background-color: #f8f9fa !important;
}

.row-moderate td {
    background-color: #fffbea !important;
}

.row-moderately-severe td {
    background-color: #ffecec !important;
}

.row-severe td {
    background-color: #ffe5e5 !important;
}

.custom-header-row th{
    background-color: #EAEAEA !important;
    text-align: left;
}

/* Optional: rounded corners */
.custom-header-row th:first-child {
    border-top-left-radius: 8px;
}
.custom-header-row th:last-child {
    border-top-right-radius: 8px;
}

/* Shared card style */
.severity-card {
    border-radius: 15px;
    transition: transform 0.2s ease;
}
.severity-card:hover {
    transform: translateY(-3px);
}

/* Icon box */
.severity-card .icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
/* Level Colors */
.severity-card.level-normal {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
}

.severity-card.level-normal .icon-box {
    background: #86efac;
    color: #065f46;
}

.severity-card .level-title {
    color: #1F2937;
    font-size: 24px;
    font-weight: bold;
}

.severity-card.level-mild {
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
}

.severity-card.level-mild .icon-box {
    background: #e5e7eb;
    color: #374151;
}

.severity-card.level-moderate {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
}
.severity-card.level-moderate .icon-box {
    background: #fdba74;
    color: #9a3412;
}

.severity-card.level-severe {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
}

.severity-card.level-severe .icon-box {
    background: #f87171;
    color: #991b1b;
}

.severity-card .level-stats-wrapper span.stats{
    font-size: 44px;
}

/* Base Badge Style */
.severity-card .trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 50px;   /* pill */
    padding: 0.35rem 0.75rem;
    color: #fff;           /* default white text */
}

/* Trend Up (Green background) */
.severity-card .trend-up {
    background-color: #dc2626; /* red */
}

/* Trend Down (Red background) */
.severity-card .trend-down {
    background-color: #16a34a; /* green */
}


/* Normal */
.badge.level-normal {
    background-color: #d1fae5; /* light green */
    color: #065f46;           /* dark green text */
    font-size: 1rem;
}

/* Mild */
.badge.level-mild {
    background-color: #f3f4f6; /* light gray */
    color: #374151;            /* dark gray text */
    font-size: 1rem;
}

/* Moderate */
.badge.level-moderate {
    background-color: #fff4e6; /* light orange */
    color: #d97706;            /* dark orange text */
    font-size: 1rem;
}

/* Moderately Severe */
.badge.level-moderately-severe {
    background-color: #fde2e2; /* light red/orange */
    color: #b91c1c;            /* darker red */
    font-size: 1rem;
}

/* Severe */
.badge.level-severe {
    background-color: #fecaca; /* stronger red */
    color: #991b1b;
    font-size: 1rem;
}
/* Severe (Red) */
.badge.level-severe .progress-bar {
    background: linear-gradient(to right, #ff4d4d, #cc0000);
    border-radius: 5px;
    color: transparent;
    position: relative;
}
.badge.level-severe .progress-bar::after {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.progress.md-progress{
    background-color: #FFFFFF;
    border-radius: 5px;
}
/* Custom outline button */
.btn-md-outline-primary {
    border: 2px solid #5E2EFF; /* Purple border */
    background-color: transparent;
    color: #5E2EFF;
    font-size: 16px;
    padding: 12px 32px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* Custom outline button */
.btn-md-outline-primary.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: var(--bs-border-radius-sm);
}

/* Hover */
.btn-md-outline-primary:hover {
    background-color: #5E2EFF;
    color: #fff;
}

/* Focus */
.btn-md-outline-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(94, 46, 255, 0.4);
    outline: none;
}

/* Active */
.btn-md-outline-primary:active {
    background-color: #4A22CC;
    border-color: #4A22CC;
    color: #fff;
}

/* Tooltip container */
.tooltip-container {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip-container .tooltip-text {
    visibility: hidden;
    width: 60px; /* Adjust width */
    background-color: #EFEAF6; /* Custom purple background */
    color: #5B21B6;
    text-align: center;
    padding: 5px 8px;
    border-radius: 6px;
    position: absolute;
    bottom: 125%; /* Position above the image */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
    z-index: 10;
    border: 1px solid #B49DD7;
}

/* Tooltip arrow */
.tooltip-container .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%; /* Bottom of tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #B49DD7 transparent transparent transparent;
}

/* Show tooltip on hover */
.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.equal-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

 .gradient-bar {
    height: 18px;
    border-radius: 5px;
    background: linear-gradient(to right, #F2FF00, #FFCB00, #FF9900, #FF4501, #B902C1);
}

 .bar-wrapper {
    background: #eee;
    border-radius: 5px;
    margin-bottom: 20px;
}

.voice-result .label {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 5px;
}

.voice-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

.play-btn {
    background-color: #5B21B6;
    color: white;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 6px;
}

.play-btn:hover,
.play-btn:focus,
.play-btn:active,
.play-btn:focus-visible {
    background-color: #5B21B6 !important;
    color: white !important;
}

.form-section .audio-player {
    width: 100% !important;
    height: 34px;
}

.form-section .text-center,
.form-section div {
    width: 100% !important;
}