*{margin:0;padding:0;box-sizing: border-box;}
    html,body{font-family: "Roboto", sans-serif}


input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px transparent inset; -webkit-text-fill-color: #4C4C4C; background-color: transparent; transition: background-color 5000s ease-in-out 0s; }


.container_apollo { max-width: 1920px; margin: 0px auto; padding: 0px 60px; } 
.onboarding-header { background:linear-gradient(234.52deg, #D5F2FA 8.61%, #CDE5F6 34.62%, #E3EAFF 90.4%); padding-top: 23px; min-height: 90vh; padding-bottom: 60px; } 
.form-layout-wrapper{ position: relative; } 
.onbaording-header-wrapper { display: flex; position: relative; z-index: 11; align-items: center; justify-content: space-between; margin-bottom: 30px; }

/* ── Logo ── */
.onboarding-icon{ width: 74px; } 
.onboarding-icon img { width: 100%; display: block; }

/* ── Language Selector ── */
.onboarding-selector { display: flex; align-items: center; } 
.lang-select-wrapper { display: inline-flex; align-items: center; gap: 6px; border-radius: 25px; background: #F4F4F4; position: relative; cursor: pointer; }

/* remove default select styles */
.lang-select { padding: 12px 40px; border: none; background: transparent; font-size: 14px; font-weight: 500; color: #4C4C4C; appearance: none; -webkit-appearance: none; -moz-appearance: none; outline: none; cursor: pointer; } 
.globe-icon-box{ width: 20px; position: absolute; left: 10px; display: block; } 
.onboarding-down-arrow{ width: 12px; display: block; position: absolute; right: 14px; } 
.down-arrow-onboard{ width: 12px; display: block; }

/* chatgpt code  */
.onbaording-form-outer-wrapper{ padding:20px; border-radius:30px; background:#FFFFFF; box-shadow: 0px 4px 60px 0px #00000014; } 
.onboarding-form-wrapper-grid{display: flex; }
.onboarding-form-left{height: auto; overflow: hidden; border-radius: 16px; width: 55%;}
.onboarding-form-left img{height: 100%; object-fit: cover; object-position: top; width: 100%; display: block;}
.onboarding-form{width: 100%;}

/* form area */
.onboarding-form-right{ padding: 0px 60px; width: 45%; display: flex; align-items: center; justify-content: center; flex-direction: column;} 
.onboarding-form-title{ font-weight: 400; text-align: center; font-size: 32px; line-height: 1.3; text-transform: capitalize; color: #4C4C4C; margin-bottom: 110px; }

/* fieldset */
.form-step{ display: flex; flex-direction: column; gap: 30px; padding-bottom: 30px; } 
.form-fieldset{ position: relative; border: 1px solid #D9D9D9; border-radius: 8px; } 
.form-fieldset label{ position: absolute; bottom: 38px; left: 12px; background: #fff; font-weight: 500; font-size: 14px; text-transform: capitalize; color: #4C4C4C; padding: 0 8px; }

/* inputs */

.form-fieldset input{ width:100%; border:none; outline:none; padding-left: 10px; color: #9D9C9C; background:transparent; font-size:12px; font-weight: 300; padding: 16px 20px; } 
.form-fieldset input::placeholder{ width:100%; font-size:12px; background:transparent; color: #9D9C9C; font-weight: 300; } 
.form-fieldset select{ border: none; color:#9D9C9C ; font-size:12px; outline: none; font-weight: 300; padding: 16px 20px; }

/* mobile field */

.mobile-input-wrapper{ display:flex; align-items:center; gap:10px; } 
.country-flag{ width: 20px; display: block; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} 
.country-code{ font-size:14px; } 
.mobile-input-wrapper{ padding: 0 20px; } 
.mobile-country-select{position: relative;}
.mobile-input-wrapper .mobile-number-input{padding-left: 10px; padding-right: 10px;}
.form-fieldset select.country-select{min-width: 50px; padding-left: 0 !important; padding-right: 0 !important;}
.mobile-country-select .country-arrow{position: absolute; top: 55%; right: 4px; transform: translateY(-50%);}

.generate-otp{ border:none; background:none; font-weight: 400; font-size: 12px; color: #047C9E; display: block; min-width: max-content; cursor:pointer; } 
.country-select{ border:none; margin: 0; padding: 0; background:transparent; appearance:none; outline:none; cursor:pointer; width:auto; flex:0 0 auto; } 
.country-arrow{ width: 12px; height: auto;} 
.country-code{ border-right:2px solid #636266; padding-right:10px; font-weight: 400; font-size: 12px; color: #636266; } 
.mobile-number-input{ width: 100%; border:none; outline:none; }

/* submit button */

.onboarding-common-btn{ border:none; border-radius:30px; padding: 17px 80px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; background:#047C9E; color: #FFFFFF; font-size:16px; font-weight: 500; text-transform: capitalize; cursor:pointer; } 
.onboarding-submit-btn{ width: 100%; } 
.onboarding-common-btn img{ width: 8px; display: block; } 
.onboarding-full-form{ padding: 40px 60px; }


/* tabs css */


.onboarding-step-tabs{ display:flex; scrollbar-width: none; overflow-x: auto; gap:100px; margin-bottom: 35px; border-bottom: 1px solid #D7D7D7; } 
.step-tab{ font-size:14px; color:#747474; pointer-events: none; padding-bottom:20px; min-width: max-content; position:relative; } 
.step-tab.active{ color:#047C9E; } 
.step-tab.active::after{ content:""; position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:#047C9E; } 
.personal-details-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: 30px; margin-top:20px; } 
.date-input-wrapper{ position:relative; display:flex; align-items:center; } 
.custom-date-input::-webkit-calendar-picker-indicator{ opacity:0; position:absolute; right:0; width:100%; height:100%; cursor:pointer; } 
.custom-calendar-icon{ position:absolute; right:16px; width: 12px; display: block; pointer-events:none; } 
.select-wrapper{ position:relative; display:flex; align-items:center; }

/* remove default arrow */

.custom-select{ width:100%; border:none; outline:none; appearance:none; -webkit-appearance:none; -moz-appearance:none; background:transparent; cursor:pointer; padding-right:25px; }

/* custom arrow */

.select-arrow{ position:absolute; right:16px; width:12px; pointer-events:none; } 
.onboarding-next-btn{ margin-top: 30px; } 

.onboarding-full-form{
    display: block;
}
.onboarding-full-form.active{ display:block; } 
.step-tab.completed{ color:#047C9E; }


/*  5th form changed css */

.file-upload-wrapper{ display:flex; align-items:center; justify-content:space-between; position:relative; padding: 16px 20px; } 
.file-upload-wrapper input{ position:absolute; inset:0; opacity:0; cursor:pointer; } 
.upload-placeholder{ color:#999; font-size:13px; } 
.document-format-note{ margin-top:15px; font-size:14px; font-weight: 400; font-style: italic; color:#5F5F5F; } 
.declaration-section{ margin-top:30px ; display:flex; flex-direction:column; gap:10px; } 
.checkbox-wrapper{ display:flex; gap:8px; font-size:14px; color:#5F5F5F; cursor: pointer; font-weight: 400; } 
.document-action-buttons{ display:flex; gap:20px; margin-top:20px; } 
.onboarding-outline-btn , .onboarding-application-btn{ padding: 17px 25px; } 
.onboarding-outline-btn{ color: #047C9E; border: 1px solid #047C9E; background-color: #FFFFFF; } 
.onboarding-outline-btn svg path{ stroke: #047C9E; }


/* check box custom */


/* hide default checkbox */

.checkbox-wrapper input{
position:absolute;
opacity:0;
width:1px;
height:1px;
margin:-1px;
padding:0;
border:0;
overflow:hidden;
clip:rect(0 0 0 0);
clip-path: inset(50%);
white-space:nowrap;
}

/* custom checkbox */

.custom-checkbox{ max-width:16px; min-width: 16px; height:16px; display: block; border:1px solid #cfcfcf; border-radius:3px; position:relative; }

/* checked state */

.checkbox-wrapper input:checked + .custom-checkbox{ background:#0c7b8f; border-color:#0c7b8f; } 

/* checkmark */ 
.checkbox-wrapper input:checked + .custom-checkbox::after{ content:""; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid white; border-width:0 2px 2px 0; transform:rotate(45deg); }


/* pop-up-css */

.onboarding-success-popup{ position:fixed; inset:0; z-index: 5; padding: 0 60px; background:linear-gradient(234.52deg, #D5F2FA 8.61%, #CDE5F6 34.62%, #E3EAFF 90.4%); display:flex; align-items:center; justify-content:center; opacity:0; visibility: hidden; transition:.3s ease; } 
.onboarding-success-popup.active{ opacity:1; visibility:visible; } 
.success-popup-box{ background:#FFFFFF; border-radius:30px; display: flex; flex-direction: column; align-items: center; padding:60px; max-width:556px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,0.08); } 
.success-popup-image{ width: 76px; } 
.success-popup-image img{ display: block; width: 100%; } 
.success-icon{ margin-bottom:33px; } 
.success-title{ font-size:32px; font-weight: 400; margin-bottom:10px; color: #4C4C4C; } 
.success-text{ font-size:16px; color:#4C4C4C; font-weight: 400; line-height: 1.3; } 


 .onboarding-form-title{ margin-bottom: 40px; }

/* responsive */
@media (max-width:1350px) {

    .onboarding-form-title { font-size: 28px; }
    
}

@media screen and (max-width:1199px) {

    .onboarding-form-left{width: 50%;}
    .onboarding-form-right{padding: 0 40px; width: 50%;}
    .onboarding-form-title{margin-bottom: 30px;}
}
 
@media (max-width:1024px){

    .container_apollo { padding: 0px 30px; } 
    .onboarding-step-tabs{ gap: 40px; } 
    .onboarding-success-popup{ padding: 0 30px; } 
    .personal-details-grid{ grid-template-columns: repeat(2, 1fr); } 
    .onboarding-form-right{ padding: 0 30px; } 
    .onboarding-header .mobile-input-wrapper{ gap: 4px; }

}

@media screen and (max-width:991px) {

    .onboarding-form-right{padding: 0 20px;}

}
@media (max-width:767px){

    .onboarding-form-wrapper-grid{flex-direction: column; gap: 30px;}
    .onboarding-form-left{width: 100%;}
    .onboarding-form-right{width: 100%; padding: 0;}
    .onboarding-header .generate-otp{ min-width: min-content; white-space: nowrap;} 
    .container_apollo { padding: 0px 15px; } 
    .onboarding-step-tabs{ gap: 20px; } 
    .onboarding-success-popup{ padding: 0 15px; } 
    .onboarding-full-form{ padding: 20px 15px; } 
    .personal-details-grid{ grid-template-columns:  1fr; }
    .mobile-input-wrapper{padding-right: 10px;}
    .country-code{padding-right: 5px;}
    .mobile-input-wrapper .mobile-number-input{padding-left: 5px; padding-right: 5px;}
    .form-fieldset label{left: 7px; padding: 0 4px; }


}


/*   after two pages css */
.dashboard{ background: linear-gradient(234.52deg, #D5F2FA 8.61%, #CDE5F6 34.62%, #E3EAFF 90.4%); } 
.dashboard-header{ display:flex; align-items:center; justify-content:space-between; padding: 16px 0; border-bottom: 0.75px solid #047c9e30; } 
.header-left{ display:flex; align-items:center; gap:20px; } 
.logo{ height:45px; }


/* NAV */

.header-nav{ display:flex; gap:16px; } 
.nav-btn{ display:flex; align-items:center; gap:8px; font-size: 14px; font-weight: 400; padding:8px 24px; border-radius:15px; border: 1px solid #047d9e38; cursor:pointer; color: #4C4C4C; } 
.nav-btn svg path{ stroke: #4C4C4C; } 
.nav-btn.active{ background:#047C9E; border: -px; box-shadow: 0px 3px 60px 0px #0000001F; color:#FFFFFF; } 
.nav-btn.active svg path{ stroke: #FFFFFF; }

/* PROFILE */

.header-right{ display:flex; align-items:center; gap:15px; justify-content: end; } 
.profile-box{ display:flex; align-items:center; gap:12px; position: relative; cursor: pointer; }
.profile-box.active .profile-arrow{ transform:rotate(180deg); } 
.profile-dropdown{ position:absolute; top:calc(100% + 10px); right:0; background:#FFFFFF; list-style:none; min-width:140px; opacity:0; visibility:hidden; }

.profile-box.active .profile-dropdown{ opacity:1; visibility:visible; }
.profile-dropdown li a{ display:block; padding:10px 16px; font-size:14px; color:#4C4C4C; font-weight: 400; text-decoration:none; }
.profile-dropdown li a:hover{ background:#f4f6f8; }
.profile-avatar{ width:37px; height:37px; border-radius:50%; background:#047C9E; color:#FFFFFF; display:flex; font-size: 14px; align-items:center; justify-content:center; font-weight:600; } 
.profile-info{ display:flex; flex-direction:column; } 
.profile-name{ font-size:14px; font-weight:600; } 
.profile-code{ font-size:10px; color:#4C4C4C; font-weight: 400; } 
.profile-code span{ font-weight: 500; } 
.profile-arrow{ width: 10px; height: 5px; }

/* STATS */

.stats-section{ padding:16px 0; } 
.stats-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; } 
.stats-card{ display:flex; align-items:center; gap:18px; background:#047C9E1A; box-shadow: 0px 4px 80px 0px #E8E8EF; padding:20px; border-radius:18px; } 
.stats-icon{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#FFFFFF66; } 
.stats-icon img{ display: block; width: 18px; } 
.stats-info{ display:flex; flex-direction:column; } 
.stats-title{ font-size:14px; font-weight: 500; padding-bottom: 6px; color:#4C4C4C; } 
.stats-value{ font-size:20px; font-weight:600; color:#047C9E; }

/* TABLE */

.leads-section{ padding:16px 0 } 
.section-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; } 
.section-header h3{ font-size:18px; font-weight: 600; color: #4C4C4C; } 
.view-all{ font-size:12px; color:#047C9E; font-weight: 500; display:flex; align-items:center; gap:6px; text-decoration:none; } 
.table-wrapper { background: #FFFFFF; border-radius: 18px; overflow: auto; padding: 0 30px; } 
.leads-table { width: 100%; border-collapse: collapse; font-size: 14px; } 
.leads-table th { text-align: left; padding: 14px; font-size: 12px; color: #4C4C4C99; font-weight: 600; white-space: nowrap;} 
.leads-table td { padding: 14px; border-bottom: 1px solid #f0f0f0; } 
.leads-header{ display:flex; justify-content:space-between; align-items:center; padding: 16px 0; } 
.leads-header .page-title{ font-size: 18px; color: #4C4C4C; font-weight: 600; } 
.leads-actions{ display:flex; gap:12px; align-items:center; } 
.search-box{ position:relative; } 
.search-box input{ padding:12px 18px; padding-right: 40px; border-radius:18px; background-color: transparent; width:280px; outline:none; font-size:12px; font-weight: 500; border: 0.75px solid #047c9e5e; } 
.leads-actions{ display:flex; align-items:center; gap:14px; }

/* SEARCH */

.search-box{ position:relative; }
.search-box img{ position:absolute; right:15px; top:50%; transform:translateY(-50%); width:15px; cursor: pointer; }

/* FILTER BUTTON */

.filter-btn{ display:flex; align-items:center; gap:18px; padding:12px; background-color: transparent; color: #4C4C4CCC; border-radius:18px; border: 0.75px solid #047c9e5e; cursor:pointer; font-weight: 500; font-size:12px; }

/* NEW BUTTON */

.new-btn{ background:#047C9E; display: inline-flex; gap: 8px; align-items: center; color:#FFFFFF; box-shadow: 0px 3px 60px 0px #0000001F; border:none; padding:12px 18px; border-radius:22px; font-size:14px; font-weight: 600; cursor:pointer; } 
.new-btn img{ width: 12px; display: block; } 
.add-patient-modal{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all 0.3s ease; z-index:4; } 
.add-patient-modal.active{ opacity:1; visibility:visible; } 
.add-patient-container{ background-color: #FFFFFF; padding: 34px 46px; border-radius: 16px; max-height: 80%; overflow: auto; } 
.modal-title{ font-size: 32px; margin-bottom: 19px; font-weight: 400; color: #4C4C4C; } 
.full-width-field{ grid-column: 1 / -1; } 
.full-width-field textarea{ width:100%; height:110px; resize:none; border: none; font-family: "Roboto", sans-serif; padding:14px 16px; color: #4C4C4C; border-radius:8px; font-size:14px; font-weight: 400; outline:none; } 
.onboarding-patient-btn{ margin-top: 30px; } 
.dashboard-outer-wrapper{ display:none; } 
.dashboard-outer-wrapper.active{ display:block; }


.step-form{
display:none;
}

.step-form.active{
display:block;
}

.onboarding-form-title{
display:none;
}

.onboarding-form-title.active{
display:block;
}
.onbaording-form-main-title{
    display: block;
}
/* ///////////////// */


/* DASHBOARD TOOLBAR */

.dashboard-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:20px;
}

.dashboard-title{
font-size:18px;
font-weight:600;
color:#4C4C4C;
}

.dashboard-toolbar-actions{
display:flex;
align-items:center;
gap:12px;
}


/* DOWNLOAD BUTTON */

.download-btn{
width:37px;
height:37px;
border-radius:50%;
border: 0.75px solid #047d9e41;
background-color: transparent;
display:flex;

align-items:center;
justify-content:center;
cursor:pointer;
}

.download-btn img{
width:12px;
display: block;
}


/* DATE RANGE */

.date-range-box{
display:flex;
align-items:center;
gap:20px;
padding:12px 16px;
border: 0.75px solid #047d9e41;
border-radius:18px;
}

.date-text{
font-size:14px;
color:#4C4C4CCC;
font-weight:400;
}

.date-text span{
font-weight:500;
color: #4C4C4C;
}

.date-range-box img{
width:18px;
cursor: pointer;
display:block;
}

/* TABLE ACTION LINKS */

.action-cell{
white-space:nowrap;
}

.accept{
color:#047C9E;
cursor:pointer;
font-weight:500;
}

.reject{
color:#E53935;
cursor:pointer;
font-weight:500;
}

.dashboard-search-box{
position:relative;
width: 320px;
}

.dashboard-search-input{
width:100%;
padding:12px 40px 12px 16px;
border-radius:25px;
border:1px solid #047d9e3a;
font-size:12px;
background-color: transparent;
outline:none;
color:#4C4C4C;
}

.dashboard-search-input::placeholder{
color:#4C4C4C;
}

.dashboard-search-icon{
position:absolute;
right:14px;
top:50%;
transform:translateY(-50%);
width:16px;
cursor: pointer;
}


.ips-table td { white-space: nowrap;} 


.toggle-eye{
width:14px;
cursor:pointer;
opacity:1;
}
.hidden-cell.active .hidden-value{
    opacity: 0;
    visibility: hidden;
}
.hidden-cell.active .toggle-eye{
    opacity: 0.4;
}

.toggle-eye:hover{
opacity:1;
}
@media(max-width:1200px){

    .stats-grid{ grid-template-columns:repeat(3,1fr); }
    .table-wrapper{padding: 0 10px;}

    .dashboard-search-box{
        width: auto;
    }

}


@media(max-width:768px){

    .stats-grid{ grid-template-columns:repeat(2,1fr); } 
    .search-box input{ width: auto; padding-right: 40px; } 
    .onboarding-form-title{ font-size: 22px; } 
    .dashboard-header{ flex-wrap: wrap; gap: 20px;} 
    .header-nav{ order: 3; width: 100%;} 
    .document-action-buttons{ flex-direction: column; } 
    .onboarding-common-btn{ font-size: 14px; } 
    .modal-title{ font-size: 24px; } 
    .leads-header{ flex-direction: column; align-items: start; gap: 20px; }
    .leads-actions{flex-wrap: wrap;}
    .add-patient-container{padding: 20px;}
    .dashboard-search-wrapper{
        order: 3;
        margin-top: 20px;
        width: 100%;
    }
    .dashboard-toolbar{
        flex-direction: column;
        gap: 20px;
    align-items: start;
    }
    .dashboard-search-box{
        width: 100%;
    }
    

}

@media(max-width:480px){

    .stats-grid{ grid-template-columns:1fr; }
    .onboarding-form-title{font-size: 20px; margin-bottom: 30px;}
    .dashboard-header{gap: 10px;}
    .header-nav{margin-top: 10px;}

}