: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: #F8F8FF;
}

.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: 32px !important;
    border-color: var(--primary-md-purple);
    font-size: 16px;
    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);
}

.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;
}

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

.dropdown-action-button-cancel {
    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;
}

.dropdown-action-button-confirm {
    width: 101px;
    height: 40px;
    background-color: var(--primary-md-purple) !important;
    border: none;
    color: var(--white) !important;
    border-radius: 100px;
    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 .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*/

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

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

.filled-bar {
    width: 10%; /* Left side progress */
    background-color: #5C2BA7;
}

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

.dot {
    width: 5px;
    height: 8px;
    background-color: #5C2BA7;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: -2px;
}

.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 .btn-option {
    border: 1px solid #5E5E5E;
    color: black;
    background-color: transparent;
    border-radius: 44px;
    height: 49px;
    width: 100% !important;
}

.patient-health-page .btn-option.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;
}


/*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;
}


/*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 .checkbox-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

 .tick-problems .checkbox-container .form-check {
    height: 40px;
    background-color: #F9FAFB;
    width: 110px ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    border-radius: 4px ;
    font-size: 16px ;
    position: relative ;
}

.tick-problems .form-check-input {
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    background-color: white !important; /* Default background is white */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 6px !important;
    cursor: pointer !important;
    position: absolute !important;
    left: 45px !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: 25px !important;
    font-weight: bold !important;
    color: Black !important;
}

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

/* 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: 15px;
}

.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: 28px;
    font-weight: 700;
    padding-bottom: 40px;
}

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

.voice-maker{
    background-color: #FFFFFF;
    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);
}

.therapist-card .therapist-profile{
    height: 115px;
    width: 160px;
}

.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;
}


.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 */
.layout-with-sidebar .sidebar {
  height: 100vh;
  background-color: #F5F3FF;
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
}

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

.layout-with-sidebar .topbar {
  background-color: #F9FAFB;
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
}

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

.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 {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    background-color: #F5F3FF;
    z-index: 1050;
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    padding: 1rem;
  }

  .layout-with-sidebar .sidebar.active {
    display: flex !important;
    flex-direction: column;
  }
}





/* 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 .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;
}

.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;
}


.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;
}