@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


:root {
    --border-btn: hsl(215, 94%, 59%);
    --body-bg: #F6F7F9;
    --dark-black: #000;
    --white: #fff;
    --cloud-gray: #E5E7EB;
    --brown: #281D1B;
    --dark-slate: #181D27;
    --box-shadow: 0px 10px 15px -3px #F3F4F6, 0px 4px 6px -4px #F3F4F6;
    --offcanvas-border: #E9EAEB;
    --charcoal-gray: #414651;
    --charcoal: #181D27;
    --light-gray: #D5D7DA;
    --gray-slate: #717680;
    --gray-tb: #969696;
    --red: #FF4242;
    --alpha-black: rgba(0, 0, 0, 0.50);
    --darkish-gray: #F8F8F8;
    --grey: #F5F5F5;
    --lightest-grey: #9CA3AF;
    --navy-blue: #11193A;
    --ice-grey: #666;
    --pale-yellow: #FFFAEB;
    --orange: #B54708;
    --yellow: #F79009;
    --bronze: #2563EB;
    --silver: #ea337f;
    --gold: #FDCD56;
    --platinum: #16A34A;
    --maroon: #A8093D;
    --darkish-red: #F04438;
}





/* Width Classes for Progress Bars */
.w-20 {
    width: 20% !important;
}

.w-35 {
    width: 35% !important;
}

.w-40 {
    width: 40% !important;
}

.w-65 {
    width: 65% !important;
}
.w-68 {
    width: 68% !important;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.white-bg,
#kt_datatable_zero_configuration_wrapper {
    background-color: var(--white);
}

/*Heading Font Sizes */
h1 {
    font-size: 34px;
    font-family: "Inter", sans-serif;
}

h2 {
    font-size: 24px;
    font-family: "Inter", sans-serif;
}

h3,
.fs-22 {
    font-size: 22px;
    font-family: "Inter", sans-serif;
}

h4,
.fs-17 {
    font-size: 17px;
    font-family: "Inter", sans-serif;
}

h5,
.fs-14 {
    font-size: 14px;
    font-family: "Inter", sans-serif;
}

h6,
.fs-13 {
    font-size: 13px;
    font-family: "Inter", sans-serif;
}

p,
.fs-12 {
    font-size: 12px;
    font-family: "Inter", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    word-break: break-word;
    margin: 0px;
}

p,
a,
span {
    line-height: 1.6;
    word-break: break-word;
    text-decoration: none;
}

ul,
ol {
    margin: 0px;
    padding: 0px;
}

p {
    margin: 0px;
}

/* Custom-Font-size */

.fs-20 {
    font-size: 20px;
    font-family: "Inter", sans-serif;
}

.fs-28 {
    font-size: 28px;

    font-family: "Inter", sans-serif;
}

.fs-11 {
    font-size: 11px;
}


.fs-18 {
    font-size: 18px;
    font-family: "Inter", sans-serif;
}
.notification-main i{font-size: 18px;}

.fs-16,
li {
    font-size: 16px;
    font-family: "Inter", sans-serif;
}

.fs-15 {
    font-size: 15px;
    font-family: "Inter", sans-serif;
}

.fs-10,
.upcoming-date span {
    font-size: 10px;
    font-family: "Inter", sans-serif;
}


/* custom-color-classes */
.alpha-black {
    color: var(--alpha-black);
}

.brown {
    color: var(--brown);
}

.red,
.dropdown-li.block-li i {
    color: var(--red);
}

.gray-tb {
    color: var(--gray-tb);
}

.gray-slate {
    color: var(--gray-slate);
}

.charcoal {
    color: var(--charcoal);
}

.light-white {
    color: var(--white);
    opacity: 0.4;
}
.bronze{color: var(--bronze);}
.charcoal-gray {
    color: var(--charcoal-gray);
}

.bg_white {
    background: var(--white);
}

.darkish-red {
    color: var(--darkish-red);
}

.inter {
    font-family: "Inter", sans-serif;
}

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

/* Progress Bar Styles for Reports */
.progress-custom {
    height: 8px;
}

.progress-bronze {
    background-color: var(--bronze);
}

.progress-silver {
    background-color: var(--silver);
}

.progress-gold {
    background-color: var(--gold);
}

.progress-platinum {
    background-color: var(--platinum);
}

.light-black {
    color: var(--dark-black);
    opacity: 0.5;
}

.text-white {
    color: var(--white);
}

.text-dark-slate {
    color: var(--dark-slate);
}

.darkish-red,.repeater-remove-btn i {
    color: var(--darkish-red);
}

.bg-dark-slate {
    background-color: var(--dark-slate);
}

.light-white {
    color: var(--white);
    opacity: 0.6;
}

.border-btn,
.participant-tabs .nav-link.active h5,
.upload-placeholder i,
.create-btn i {
    color: var(--border-btn);
}

.border-right {
    border-right: 1px solid var(--cloud-gray);
}

.table_opacity {
    opacity: 0.6;
}

.box-shadow {
    box-shadow: 0px 10px 15px -3px #F3F4F6, 0px 4px 6px -4px #F3F4F6;
}

.border-radius {
    border-radius: 100px;
}

body {
    background-color: var(--body-bg) !important;
}

.red-btn {
    border-radius: 14px;
    background: var(--maroon);
    border: 1px solid var(--maroon);
       padding: 11px 47px;
    font-family: Inter;
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
}
.red-btn:hover {
    background: var(--white);
    color: var(--maroon);
    transition: 0.2s ease-in;
}




/* font-weight  */
.fw-700 {
    font-weight: 700;
}

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

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

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

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

.border_btn {
    border: 1px solid var(cloud-gray);
}


/* -----sidebar---- */
.app-sidebar .menu-item .menu-link.padding-left {
    padding: 10px 8px;
}

/* Sidebar Toggle Button Positioning */
/* #kt_app_sidebar_toggle {
    margin-left: 40px;

} */

/* Sidebar Color Override */
body .app-sidebar {
    background-color: var(--midnight-navy) !important;
}

/* Admin Sidebar Styling */
body .app-sidebar,
.blue-bg {
    background-color: var(--navy-blue) !important;
}

body [data-kt-app-layout="dark-sidebar"] .app-sidebar {
    background-color: var(--navy-blue);
}

.menu-item .menu-content a.active {
    opacity: 1;
}

/* Active menu item styling */
body .app-sidebar .menu-item .menu-link.active {
    color: #ffffff;
    opacity: 1;
}

body .app-sidebar .menu-item .menu-link.active .menu-title {
    color: #ffffff;
    opacity: 1;
}

/* Additional active styling for better specificity */
body .app-sidebar .menu-link.light-white.active {
    color: #ffffff;
    opacity: 1;
}

body .app-sidebar .menu-link.light-white.active .menu-title {
    color: #ffffff;
    opacity: 1;
}

/* Admin Menu Items Styling */
.app-sidebar .menu-item {
    margin-bottom: 8px;
}

body .app-sidebar .menu-item .menu-link {
    padding: 12px 20px;
    border-radius: 8px;
    color: #8B92B5;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

body .app-sidebar .menu-item .menu-link.active {
    background-color: transparent !important;
    color: #ffffff;
}

/* --date--picker */
/* .flatpickr-input[readonly] {
    background: none;
    border: 1px solid #ddd;
    border-radius: 9999px;
    padding: 8px 30px;
    font-family: sans-serif;
    font-size: 14px;
    cursor: pointer;
    width: auto;
} */
.flatpickr-input[readonly] {
    outline: none;
    /* background: none; */
    border: 1px solid #ddd;
    border-radius: 9999px;
    padding: 9px 25px 9px 20px;
    font-family: sans-serif;
    font-size: 14px;
    cursor: pointer;
    width: auto;
}

.date-range-wrapper {
    position: relative;
    width: max-content;
    margin-left: auto;
}

.date-range-wrapper .calendar-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #555;
    pointer-events: none;
}


/* ----admin--dashboard--- */
.dashboard_card {
    border-radius: 6px;
    border: 1px solid var(--cloud-gray);
    background: var(--white);
    padding: 20px;
}

/* .email-field .form-control{
    padding: 10px 10px 10px 15px;
} */
/* .password-field  .form-control{
    padding: 10px 10px 10px 15px;
} */
/* ---chart--js */
.revenue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.revenue-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.revenue-filter {
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background-color: white;
    font-weight: 500;
    font-size: 14px;
    outline: none;
}

/* select#revenueFilter {
    padding: 5px;
    border-radius: 100px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    outline: none;
} */

.revenue-main {
    border-radius: 6px;
    border: 1px solid var(--cloud-gray);
    background: var(--white);
    padding: 20px;
}

/* Removed inline CSS from the Blade view */
.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}


.user_btn {
    display: flex;
    align-items: center;
    gap: 2px;
}

.table-main .user_table .dropdown-menu {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: none;
    padding: 8px 0;
    min-width: 180px;
}

.user-data .dropdown-menu .dropdown-item {
    padding: 10px 16px;
    border-radius: 0;
    transition: background-color 0.2s;
}

.user-data .dropdown-menu .dropdown-item:hover {
    background-color: #f0f0f0;
}

/* Table Font Styles */

.table tr {
    font-family: 'Inter', sans-serif;
    background-color: var(--darkish-gray);
    border-block: 1px solid var(--cloud-gray);
}

.table td {
    font-family: 'Inter', sans-serif;
    font-weight: 500 !important;
    font-size: 13px !important;
    color: var(--charcoal-gray) !important;

}

.table th {
    font-family: 'Inter', sans-serif;
    font-weight: 500 !important;
    font-size: 12px !important;
    color: var(--charcoal-gray) !important;
    opacity: 0.6;
    background-color: var(--table-bg);
}

.table tbody tr {
    background-color: var(--white);
}



.form-control {
    /* border-radius: 25px; */
    opacity: 0.7;
    padding: 7px 14px 7px 7px;
}

.filter_btn {
    padding: 7px 15px 7px 12px;
    border-radius: 100px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: none;
}

.user_btn {
    padding: 7px 15px 7px 12px;
    border-radius: 100px;
    background: var(--border-btn);
    color: var(--white);
    border: none;
}

.inactive-badge {
    background-color: #FEF3F2;
    color: #B42318;
    padding: 5px;
    border-radius: 6px;
}

.dot-inactive {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #F04438;
    border-radius: 6px;
    border-radius: 50%;
    margin-right: 5px;
}

.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    /* background-color: #12B76A; */
    background-color: #12B76A;
    border-radius: 50%;
    margin-right: 5px;
}

.badge {
    background-color: #ECFDF3;
    color: #027A48;
    /* color: var(--dark-black); */
    /* padding: 5px; */
}

.table-main {
    border-radius: 6px;
    border: 1px solid var(--cloud-gray);
    background: var(--white);
}
/* Keep all tables stable even with very long words/content */
.table-main .table {
    /* table-layout: fixed; */
    width: 100%;
}
.table-main .table th,
.table-main .table td,
table.dataTable th,
table.dataTable td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.user_table {
    padding: 10px 10px;
}

/* Tab Styles */

.user-tab {
    background: #FFF;
}

.user-tab.active-tab.bg-tab {
    background-color: #3384F9;
    color: white;
    border: 1px solid #3384F9;
}

.user-tab.inactive-tab {
    background-color: #FFF;
    color: var(--ice-grey);
    border: 1px solid var(--cloud-gray);
}

.subscription_btn,.subscription_btn:hover  {
    padding: 8px 16px;
    border: 1px solid var(--cloud-gray);
    border-radius: 100px;
    background: var(--white);
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;

}

/* Off-canvas modal width and height */
.custom-offcanvas {
    width: 400px;
    height: 95%;
    overflow-y: auto;
    margin: auto;
    margin-inline: 30px;
}

/* Off-canvas body padding */
.custom-offcanvas-body {
    padding: 24px;
}

.offcanvas-footer {
    border-top: 1px solid var(--offcanvas-border);
    background: #F9F9F9;
}

.subscription_card {
    border-radius: 6px;
    border: 2px solid rgba(0, 0, 0, 0.00);
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%), rgba(0, 0, 0, 0.09);
    padding: 24px;
    height: 100%;
}

/* --offcanvas--csss */
.offcanvas {
    border-radius: 8px;
    border: 1px solid var(--offcanvas-border);
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
}

.offcanvas-header {
    border-bottom: 1px solid var(--offcanvas-border);
}

.canva_text {
    color: var(--charcoal-gray);
}

.canva_place {
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid var(--light-gray);
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    width: 100%;
    outline: 0;
}

i.fas.fa-check {
    border-radius: 6px 0px 0px 6px;
    border: 1px solid var(--light-gray);
    background: #F9F9F9;
    padding: 12px 21px;
    color: var(--brown);
    font-size: 10px;
}

.feature-input {
    border-radius: 6px;
    border: 1px solid var(--light-gray);
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
}

button#addMoreFeature {
    border-radius: 100px;
    border: 1px solid #F0F0F0;
    padding: 5px 10px;
    background: none;
    color: var(--border-btn);
}

/* User Modal Styles */
.user_input_field {
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid var(--light-gray);
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    width: 100%;
    outline: 0;
    background: var(--white);
}

.user_input_field:focus {
    border-color: var(--border-btn);
    box-shadow: 0 0 0 2px rgba(51, 132, 249, 0.1);
}

.user_cancel_btn {
    padding: 8px 16px;
    border: 1px solid var(--light-gray);
    background: var(--white);
    color: var(--charcoal-gray);
    border-radius: 100px;

    cursor: pointer;
    transition: all 0.2s ease;
}

.user_cancel_btn:hover {
    background: #F3F4F6;
    border-color: var(--charcoal-gray);
}

.user_save_btn {
    padding: 8px 16px;
    border: 1px solid var(--border-btn);
    background: var(--border-btn);
    color: var(--white);
    border-radius: 100px;

    cursor: pointer;
    transition: all 0.2s ease;
}

.user_save_btn:hover {
    background: #2563EB;
    border-color: #2563EB;
}

.user-offcanvas-footer {
    border-top: 1px solid var(--offcanvas-border);
    background: #F9F9F9;
}

#profileForm .form-control,
#passwordForm .form-control,.curve-feilds .form-control {
    padding: 14px 32px 14px 14px;
    border: 1px solid #F0F0F0;
    border-radius: 8px;
    color: var(--dark-black);
}

.progress {
    border-radius: 32px;
    background: #ECEFF2;
    backdrop-filter: blur(22px);
}

.business-table thead {
    border-radius: 0 10px 0 0;
    border-bottom: 1px solid var(--cloud-gray);
    background: #F8F8F8;
    opacity: 0.5;
    color: var(--dark-black);
}

.business-table tbody tr {
    border-bottom: 1px solid #F9F9F9;
    background: var(--white);

}

.business-table tbody tr td {
    padding: 10px;
}

.campaign-card .medium_text {
    font-size: 10px !important;
    line-height: 1.2;
    font-family: "Inter", sans-serif;
    color: var(--dark-black);
    opacity: 0.5;
}

.total-Subscribers img {
    /* height: 100px; */
    width: 23px;
}

.border-bottom {
    border-bottom: 1px solid var(--cloud-gray);
}

.chart-menu i {
    color: var(--dark-black);
    font-size: 19px;
}

.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--border-btn);
    color: var(--white);
}

.fc-today-button .fc-button .fc-button-primary:active {
    background-color: var(--border-btn);
    color: var(--dark-black);
    opacity: 1;
}

button.fc-today-button.fc-button.fc-button-primary {
    background: var(--border-btn);
    opacity: 1;
    color: var(--white);
}

.inner_section_calendar {
    border: 1px solid rgba(0, 0, 0, 0.00);
}

.fc-button-group {
    gap: 10px;
}

.fc-daygrid-day-top .fc-daygrid-day-number {
    color: var(--dark-black);
    font-weight: var(--fw-500);
    font-size: var(--fs-14);
    font-family: 'Inter', sans-serif;
}

.fc .fc-col-header-cell {
    padding: 0px;
}

.fc-scrollgrid-sync-inner {
    text-align: start;
}

.fc-col-header-cell-cushion {
    color: var(--gray-tb);
    font-weight: var(--fw-500);
    font-size: var(--fs-12);
    font-family: 'Inter', sans-serif;
}

/* Schedule Campaign Modal Styles */
.calendar-day-header {
    width: 14.28%;
    padding: 8px 4px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 400;
}

.calendar-day:hover {
    background-color: #f0f0f0;
}

.calendar-day.selected {
    background-color: var(--border-btn);
    border-radius: 30px;
    color: var(--white);
}

.calendar-day.other-month {
    color: var(--lightest-grey);
}

.time-input-group {
    min-width: 60px;
}

.time-display {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}





.image-input .image-input-wrapper.image-uploader {
    border-radius: 88px;
}


.image-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: sans-serif;
}

.image-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #f2f2f2;
    background-image: url('../media/avatars/blank.png');
    /* Default avatar */
    background-size: cover;
    background-position: center;
    position: relative;
}

.image-circle input[type="file"],
.image-uploader-edit input[type="file"] {
    position: absolute;
    width: 50%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.remove-btn {
    position: absolute;
    top: -2px;
    right: -7px;
    /* background: #ff4d4d; */
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    display: none;
}

#kt_datatable_zero_configuration_wrapper ul.pagination li {
    border-radius: 6px;
    border: 1px solid #F0F0F0;
    background: #FFF;
}

.menu-btn i {
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.08);
    font-size: 14px;
    color: black;
    padding: 7px 12px;
    border: 1px solid transparent;
}

.card {
    border-radius: 6px;
    border: 1px solid var(--cloud-gray);
    background: #FFF;
    box-shadow: 0 10px 15px -3px #F3F4F6, 0 4px 6px -4px #F3F4F6;
    padding: 18px;
}

.user-img-parent {
    height: 200px;
    width: 144px;
}

.user-img-parent img,
.folder-img-parent img {
    border-radius: 10px;
}

.user-detail-text i {
    color: var(--border-btn);
    font-size: 15px;
}

.user-account-detail .user-name {
    border: 1px solid #F0F0F0;
    padding: 29px 18px;
    width: 100%;
}

.white-badge {
    background-color: var(--white);
    border-radius: 64px;
    border: 1px solid transparent;

    padding: 10px 20px;
}

.white-badge:hover {
    /* border-radius: 64px; */
    border: 1px solid #F0F0F0;
    background: #F8F8F8;
    transition: 0.2s ease-in-out;
    /* padding: 10px 20px; */
}

.white-badge:hover i {
    color: var(--dark-black);
    transition: 0.2s ease-in-out;
}





/* ---staff---- */
.classes-img {
    height: 50px;
    width: 50px;
}


.details_btn {
    border-radius: 6px;
    border: 1px solid var(--cloud-gray);
    background: var(--white);
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 8px 16px;
    align-items: center;
}


.divider {
    border-top: 1px solid var(--cloud-gray);
}

.terminated-badge .dot {
    background: #717680;
}

.terminated-badge {
    border-radius: 6px;
    background: var(--grey);
    padding: 5px;
}

.profile-detail-password i {
    color: black;
    opacity: 0.3;
    font-size: 13px;
}

button.btn.eye-btn.position-absolute {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--lightest-grey);
}

#profileForm .image-circle {
    width: 100px;
    height: 100px;
}

.breadcrumb a {
    color: var(--dark-black);
}

.white-btn {
    border-radius: 100px;
    border: 1px solid #E5E7EB;
    width: fit-content;
    padding: 9px 23px;
}

/* .card .card-header.folder-img-parent {

    width: 542px;
} */

/* .participant-managment-table .user-img {
    height: 38px;
    width: 38px;
} */

.search-bar-parent i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 13px;
}

.dropdown-li i {
    color: var(--ice-grey);
    font-size: 14px;
}

table#kt_datatable_zero_configuration thead tr,
.border-block {
    border-block: 1px solid var(--cloud-gray);
}

table#kt_datatable_zero_configuration tbody tr {
    border-bottom: 1px solid var(--cloud-gray);
}

.back_btn {
    background: var(--darkish-red);
    padding: 10px 20px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    color: var(--white);

}

.graduate-content {
    padding: 40px;
    background: var(--darkish-gray);
    border: 1px solid #F0F0F0;
}

.room-detail-parent {
    height: 80%;
    width: 100%;
}

.border-card {
    border: 1px solid var(--cloud-gray);
    border-radius: 0px 4px 0px 4px;
}

/* .upload-placeholder i {
    color: var(--border-btn);
    font-size: 20px;
} */
.upload-placeholder i {
    font-size: 20px;
}

.new-participant-sec .upload-placeholder {
    width: 120px;
    height: 120px;
    position: relative;
    text-align: center;
    background-color: var(--white);
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
    border-radius: 8px;
    border: 1px dashed var(--Gray-300, #D5D7DA);
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

.detail-form-parent .form-control,.forgot-password .form-control {
    border-radius: 6px;
    padding: 10px;
}

/* .create-btn i {
    color: red;
    font-size: 13px;
} */
.create-btn i {
    font-size: 13px;
}

.text-wrap-limit {
    max-width: 240px;
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 21px;
}

.time-check-parent {
    border-radius: 6px;
    padding: 14px 16px;
    border: 1px solid var(--cloud-gray);
    /* background: linear-gradient(0deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.97) 100%), url(../media/images/purple-gradiant2.png) lightgray 50% / cover no-repeat, rgba(0, 0, 0, 0.09); */
    box-shadow: 0 10px 15px -3px #F3F4F6, 0 4px 6px -4px #F3F4F6;
    background-image: url(../media/images/purple-gradiant2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.class-time-img img {
    width: 50px;
    border-radius: 51px;
}

.participant-tabs-parent {
    width: 297px;
}

.border-after::before {
    content: "";
    position: absolute;
    background: var(--cloud-gray);
    height: 40px;
    width: 1px;
    right: calc(21% - 100%);
    /* right: -8%; */
    transform: translateX(-34%);
    /* left: 126px; */
}

.inactive-badge.yellow-badge {
    background-color: var(--pale-yellow);
    color: var(--orange);
}

.inactive-badge.yellow-badge .dot-inactive {
    background: var(--yellow);
}

.user-calender img {
    width: 20px;
}

.user-calender .dropdown { display: inline-block; position: absolute; top: 8px; left: 61px; }

.full-calender-main .fc .fc-daygrid-day.fc-day-today {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.90) 100%), #3384F9;
}


.full-calender-main .fc-today-button.fc-button.fc-button-primary,
.class-detail-parent .white-btn {
    border-radius: 6px;
}

#full-calender-parent #kt_docs_fullcalendar_basic .fc-button-group:last-child {
    border-radius: 0 6px 6px 0;
    border: 1px solid #F0F0F0;
    background: #FFF;
    gap: 0;
    background-color: white;
}

#full-calender-parent .fc-button.fc-button-primary.fc-button-active {
    background: #3384F9;
    color: white;
    border-radius: 0px;
}

#full-calender-parent .fc-button.fc-button-primary {
    background: var(--white);
    color: var(--dark-black);
    border-inline: 1px solid var(--cloud-gray);

}

.edit-btn img {
    width: 17px;
}



.scroll-box {
    max-height: 688px;
    overflow-y: auto;
    padding-right: 10px;
}

/* For Chrome, Edge, Safari */
.scroll-box::-webkit-scrollbar {
    width: 8px;
}

.scroll-box::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.scroll-box::-webkit-scrollbar-thumb {
    background-color: var(--border-btn);
    /* ✅ Green scroll thumb */
    border-radius: 10px;
}

/* For Firefox */
.scroll-box {
    scrollbar-width: thin;
    scrollbar-color: var(--border-btn) #f1f1f1;
}

.scroll-parent .scroll-box {
    max-height: 376px;
    overflow-y: auto;
    padding-right: 10px;
}

.user-detail.class-detail p {
    max-width: 804px;
}

.image-uploader-edit-parent .user-img-parent {
    height: 111px;
    width: 115px;
}
.staff-schedule .scroll-box {
    max-height: 743px;
}
.dropdown-toggle::after{display:none;}
.attendance-form-select {
    background-color: var(--border-btn);
    font-size: var(--fs-13);
    color: var(--white);
    font-family: 'Inter', sans-serif;
    padding: 5px 15px;
    border: 0;
    outline: 0;
    border-radius: 50px;
}
/* Attendance Offcanvas Styles */
/* .attendance-offcanvas {
    width: 400px;
    height: 95%;
    overflow-y: auto;
    margin: auto;
    margin-inline: 30px;
}

.attendance-choice {

    border: 1px solid var(--light-gray);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--white);
}

.attendance-choice:hover {
    background-color: #f8f9fa;
}

.attendance-choice.attendance-selected {
    border-color: var(--platinum);
    background-color: #f0f9f0;
}

.attendance-check-box {
    width: 20px;
    height: 20px;
    border: 2px solid var(--light-gray);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    transition: all 0.2s ease;
}

.attendance-choice.attendance-selected .attendance-check-box {
    border-color: var(--platinum);
    background-color: var(--platinum);
}

.attendance-check-mark {
    color: var(--white);
    font-size: 12px;
} */

.notepad-form-control {
    border-radius: 6px;
    border: 1px solid var(--light-gray);
    background: var(--White, #FFF);
    width: 100%;
    outline: 0;
    padding: 5px;
}
span.select2-span {
    color: var(--dark-black);
    font-family: Inter;
    font-size: 13px;
    font-weight: 400;
}
.business-profile .tab-content {
    min-height: 727px;
}
.globe-input-icon i {
    top: 42px;
    left: 7px;
    color: var(--dark-black);
    font-size: 14px;
}
.repeater-start-btn #add-website-btn i {
    color: var(--border-btn);
    font-size: 16px;
}
.red-label
{padding:3px;border-radius: 4px 0 0 4px;background: var(--red);
}
.subscription_btn:hover {
    background: var(--border-btn);
    color: var(--white);
    transition: 0.2s ease-in;
}
.password-toggle.eye-toggle i {
    right: 11px;
    bottom: 15px;
}
.confirm-password.password-toggle.eye-toggle i {
    bottom: 50px;
}
.signup-img-uploader
.edit-link i {
    color: var(--white);
    background: var(--border-btn);
    border-radius: 17px;
    width: 16px;
    height: 16px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signup-img-uploader .edit-link{
    position: absolute;
    right: 0px;
    bottom: 4px;
}
.signup-img-uploader .image-circle,.cms-parent .image-circle {

    background-image: url(../media/images/logo-blank.svg);

}
button.blue-btn {
    background: var(--border-btn);
    color: var(--white);
    border: 1px solid var(--border-btn);
    border-radius: 22px;
    min-width: 113px;
    padding: 10px 10px;
}
table.dataTable {
    height: 244px;
}
 table.dataTable  ul.dropdown-menu {
    min-width: 168px;
}
 .day-row label {
            width: 100px;
        }
.keen-calendar table th,
.keen-calendar table td {
  width: 38px;      /* cell width kam */
  height: 38px;     /* cell height kam */
}



.card.keen-calendar {
  transform: scale(0.5);       /* 80% chhota */
  transform-origin: top left;  /* kis point se shrink ho */
}
.card.keen-calendar,.card.keen-calendar .fc .fc-col-header-cell .fc-col-header-cell-cushion {
  font-size: 25px;  /* overall text chhota */
}

.subscription_card .card-body h6 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
input.participant_checkbox {
    width: 50px;
    height: 18px;
}
.single-.image-input ,.image-input .image-input-wrapper.image-uploader { border-radius: 88px; }
.image-upload-wrapper,.single-image-upload-wrapper { display: flex; align-items: center; gap: 15px; font-family: sans-serif; }
/* .image-circle {width: 80px;height: 80px;border-radius: 50%;background-color: #f2f2f2;background-image: url('../media/images/logo-blank.svg');background-size: cover;background-position: center;position: relative;} */
.image-circle input[type="file"], .image-uploader-edit input[type="file"] { position: absolute; width: 50%; height: 100%; opacity: 0; cursor: pointer; }
.remove-btn,.single-remove-btn { position: absolute; top: -2px; right: -7px; /* background: #ff4d4d; */ color: white; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 14px; line-height: 20px; text-align: center; cursor: pointer; display: none; }

/* Default: text + icon hide kar do */
.single-add-image .add-img-text,
.single-add-image i.add-img-icon { display: none;}

/* Agar background image nahi hai → tab show karo */
.single-add-image.no-image .add-img-text,
.single-add-image.no-image i.add-img-icon {display: block;}
/* cms */
.cms-parent .form-label {font-size: 16px;font-weight: 500;color: var(--black);}
.cms-parent   .image-upload-wrapper {display: flex;gap: 15px;flex-wrap: wrap;}
.cms-parent  .image-circle {width: 125px;height: 124px;position: relative;border-radius: 4px;background: var(--white);box-shadow: 0px 2px 25px 0px rgba(0, 0, 0, 0.05);padding: 10px 20px;color: #4A4A4A;font-family: 'ARIAL';font-size: 14px;font-weight: 400;border: 2px dashed #ccc;background-position: center;background-repeat: no-repeat;background-size: cover;}
.cms-parent  .remove-btn,.cms-section .edit-btn {position: absolute;top: -5px;right: -5px;color: white;border: none;border-radius: 50%;width: 23px;height: 23px;font-size: 12px;line-height: 20px;text-align: center;cursor: pointer;}
.cms-repeator.remove-btn {display: block;}
.cms-parent  .remove-btn,.single-remove-btn { background: #ff4d4d;}
.cms-parent  .edit-btn {background: #ff6600;top: auto; bottom: -5px;right: -5px;}
.cms-parent  .remove-btn i, .edit-btn i,.single-remove-btn i {color: var(--white);font-size: 11px;}
.cms-parent  #myTabContent{background: transparent;}
.blue-btn i {color: white;}
.cms-card{ border-radius: 10px;border: 1px solid #DBDBDB;padding: 20px;background: var(--white);}
.phone-item .iti.iti--allow-dropdown {width: 100%;}

.phone-item .iti__country-list {width: 350px;}
.user-img {width: 50px;height: 50px;}
.user-img img{border-radius: 50px;}
.group-sec.card {min-height: 100px;}
.create-card-parent .create-card i {color: var(--bronze);font-size: 29px;}
.edit-card-parent .edit-card i{ color: #ffc700;font-size: 29px;}
.view-card-parent .view-card i{ color: #50cd89;font-size: 29px;}
.sidebar-parent.app-sidebar .menu .menu-item .menu-link .menu-icon i {color: #dbdfe9;font-size: 16px;}
.dropdown-menu.show{width: max-content;}

/* ---notification-page--- */
 .notification-row {transition: .3s;border-radius: 8px;margin-bottom: 5px;position: relative; }
 .notification-row:hover {background: #f8f9fa;transform: translateY(-1px);box-shadow: 0 2px 8px rgba(0, 0, 0, .08);}
.notification-row.unread {background: rgba(17, 25, 58, 0.1);;border-left: 4px solid var(--navy-blue);}

.noti-image-parent {    width: 50px;    height: 50px;    display: flex;    align-items: center;    justify-content: center;    background: #f5f5f5;    border-radius: 50%;    margin-right: 15px}
.notification-row:hover .noti-image-parent {    background: #e3f2fd}

.badge.bg-info {    background: #17a2b8 ;    font-size: 10px;    padding: 2px 6px}
.error {color: red;padding-top: 10px;}
.user_input_field.error,
input.error,
textarea.error,
select.error {
    /* Keep text color normal when jQuery Validation adds .error to inputs */
    color: var(--dark-black);
}
.phone-item .iti { width: 100%; }
#profileForm .phone-item .iti--allow-dropdown input, .iti--allow-dropdown input[type=tel]{padding-left: 50px;}
#profileForm .iti__selected-flag{padding-top: 25px; height: 0;}
#passwordForm .form-control{padding-right: 60px;}
textarea.form-control {border-radius: 6px;}
.dataTables_info{margin-left: 15px;}

input.form-control, input.form-control:focus { color: var(--dark-black); }
.table-main input.form-control { padding: 7px 14px 7px 28px; }
.form-label.required::after { content: " *"; color: var(--red); }
.table-main div.dataTables_wrapper div.dataTables_filter { padding: 1rem 1rem; }
#phoneRepeater .iti__selected-flag { height: unset !important; padding: 16px 6px 0 8px !important; }
.dataTables_wrapper .row > div[class^="col-"]:first-child { display: flex; align-items: center; }
.table .dropdown ul.subscriber.dropdown-menu { z-index: 99; }
.staff-phone .iti {width: 100%;}
.staff-phone .iti__selected-flag { height: unset !important; padding: 16px 6px 0 8px !important; }
.feature-item .form-check.form-switch { padding-left: 3rem; }
.fa-ellipsis-v:before, .fa-ellipsis-vertical:before { display: flex; justify-content: center; }
.revenue-main canvas#smsChart { box-shadow: none; }
textarea.form-control, select#planInterval { color:var(--dark-black); }
#sessions_datatable .descCls { display: flex; align-items: center; justify-content: flex-start; }
.app-navbar a.notification-main, .app-navbar a.fw-semibold { text-decoration: none; }
.app-navbar .notification-main p { margin-bottom: 0; }
#changePasswordForm .eye-toggle i.fas.position-absolute { top: 44px;  right: 44px; }

/* admin -> Free Trial Settings  */
    .freeTrial .badge { padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-weight: 500; font-size: 0.75rem; }
    .freeTrial .bg-success { background-color: #28a745 !important; color: white; }
    .freeTrial .bg-warning { background-color: #ffc107 !important; color: #212529; }
    .freeTrial .bg-danger { background-color: #dc3545 !important; color: white; }
    .freeTrial .bg-info { background-color: #17a2b8 !important; color: white; }
    .freeTrial .bg-secondary { background-color: #6c757d !important; color: white; }
    .freeTrial .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
    .freeTrial .bg-success .dot { background-color: #fff; }
    .freeTrial .bg-warning .dot { background-color: #212529; }
    .freeTrial .bg-danger .dot { background-color: #fff; }
    .freeTrial .bg-info .dot { background-color: #fff; }
    .freeTrial .bg-secondary .dot { background-color: #fff; }
    .freeTrial .symbol { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .freeTrial .symbol-label { display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; background-color: #f8f9fa; border-radius: 0.475rem; width: 100%; height: 100%; }
    .freeTrial .bg-light-primary { background-color: #f1f3ff !important; }
    .freeTrial .text-primary { color: #009ef7 !important; }
    .freeTrial .progress { height: 6px; background-color: #f1f3ff; border-radius: 3px; }
    .freeTrial .progress-bar { border-radius: 3px; }
/* End Free Trial Settings */

/* admin -> Subscription */
    .subsCrip .badge { padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-weight: 500; font-size: 0.75rem; }
    .subsCrip .bg-success { background-color:#ECFDF3 !important; color: #12B76A; }
    .subsCrip .bg-warning { background-color:#fff8e7  !important; color: #f79009;}
    .subsCrip .bg-danger { background-color:#fff5f8 !important; color: #f1416c; }
    .subsCrip .bg-info { background-color: #17a2b8 !important; color: blue; }
    .subsCrip .bg-secondary { background-color: #6c757d !important; color: gray; }
    .subsCrip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
    .subsCrip .bg-success .dot { background-color: #fff; }
    .subsCrip .bg-warning .dot { background-color: #fff; }
    .subsCrip .bg-danger .dot { background-color: #fff; }
    .subsCrip .bg-info .dot { background-color: #fff; }
    .subsCrip .bg-warning .dot-inactive { background-color: #f79009; }
    .subsCrip .bg-danger .dot-inactive { background-color: #f1416c; }
    .subsCrip .bg-success .dot-inactive { background-color: #12B76A; }
    .subsCrip .bg-secondary .dot { background-color: #fff; }
    .subsCrip .symbol { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .subsCrip .symbol-label { display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; background-color: #f8f9fa; border-radius: 0.475rem; width: 100%; height: 100%; }
    .subsCrip .bg-light-primary { background-color: #f1f3ff !important; }
    .subsCrip .text-primary { color: #009ef7 !important; }
    .subsCrip .progress { height: 6px; background-color: #f1f3ff; border-radius: 3px; }
    .subsCrip .progress-bar { border-radius: 3px; }
    .subsCrip .search-bar-parent .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9aa0a6; pointer-events: none; font-size: 0.875rem; }
    .subsCrip .search-bar-parent .form-control { padding-left: 2rem; }
/* End Subscription */

/* BusinessAdmin -> profile  */
    /* jQuery Validation Error Styling */
    .business-profile .error { color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; display: block; }
    .business-profile .form-control.is-invalid { border-color: #dc3545; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }
    .business-profile .form-control.is-valid { border-color: #28a745; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); }

    /* Image upload validation styling */
    .business-profile .image-upload-wrapper .error { margin-top: 0.5rem; }
    .business-profile .green-label { background-color: #28a745; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; }
/* End BusinessAdmin -> profile   */

/* BusinessAdmin -> Subscription Change Confirmation */
.billing-preview { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 1.5rem; }
.plan-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2rem 0; }
.plan-card { border: 1px solid #dee2e6; border-radius: 0.5rem; padding: 1.5rem; background: white; }
.current-plan { border-color: #dc3545; background-color: #fff5f5; }
.new-plan { border-color: #28a745; background-color: #f8fff8; }
.billing-line { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #eee; }
.billing-line.total { font-weight: bold; border-top: 2px solid #333; margin-top: 1rem; padding-top: 1rem; }
.proration-note { background-color: #e3f2fd; border: 1px solid #2196f3; border-radius: 0.375rem; padding: 1rem; margin: 1rem 0; }
/* End BusinessAdmin -> Subscription Change Confirmation */

/* BusinessAdmin -> Subscription Change Confirmation */
    .success-container { text-align: center; padding: 3rem 0; }
    .success-container .success-icon { font-size: 4rem; color: #28a745; margin-bottom: 1rem; }
    .success-container .plan-details { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.5rem; padding: 2rem; margin: 2rem 0; }
    .success-container .next-billing { background-color: #e3f2fd; border: 1px solid #2196f3; border-radius: 0.375rem; padding: 1rem; margin: 1rem 0; }

/* End BusinessAdmin -> Subscription Change Confirmation */

/* Business Dashboard -> Subscription Plan Card */
.subscription-plan-card { background: var(--white); border-radius: 12px; box-shadow: var(--box-shadow); padding: 24px; border: 1px solid var(--cloud-gray); transition: all 0.3s ease; }
.subscription-plan-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.subscription-plan-card .plan-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--cloud-gray); }
.subscription-plan-card .plan-title { font-size: 24px; font-weight: 600; color: var(--brown); margin: 0 0 8px 0; font-family: 'Inter', sans-serif; }
.subscription-plan-card .plan-description { font-size: 14px; color: var(--gray-slate); line-height: 1.6; margin: 0; font-family: 'Inter', sans-serif; }
.subscription-plan-card .plan-status { text-align: right; }
.subscription-plan-card .plan-status .status-badge { display: inline-block; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; margin-bottom: 8px; }
.subscription-plan-card .plan-status .status-badge.success { background: var(--border-btn); color: var(--white); }
.subscription-plan-card .plan-status .status-badge.warning { background: var(--bronze); color: var(--white); }
.subscription-plan-card .plan-status .status-badge.danger { background: var(--navy-blue); color: var(--white); }
.subscription-plan-card .plan-status .status-badge.required { background: rgba(17, 25, 58, 0.1); color: var(--navy-blue); padding: 8px 16px; border: 1px solid var(--navy-blue); }
.subscription-plan-card .plan-status .billing-date { font-size: 12px; color: var(--lightest-grey); margin-top: 4px; }
.subscription-plan-card .plan-metrics { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.subscription-plan-card .metric-item { background: var(--darkish-gray); border-radius: 8px; padding: 16px; border: 1px solid var(--cloud-gray); transition: all 0.2s ease; }
.subscription-plan-card .metric-item:hover { background: var(--grey); border-color: var(--light-gray); }
.subscription-plan-card .metric-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.subscription-plan-card .metric-label span:first-child { font-size: 14px; font-weight: 600; color: var(--charcoal-gray); }
.subscription-plan-card .metric-label span:last-child { font-size: 15px; font-weight: 700; color: var(--dark-black); background: var(--white); padding: 4px 10px; border-radius: 6px; }
.subscription-plan-card .metric-progress { height: 12px; background: var(--cloud-gray); border-radius: 6px; overflow: hidden; position: relative; }
.subscription-plan-card .metric-progress-bar { height: 100%; border-radius: 6px; transition: width 0.4s ease; position: relative; }
.subscription-plan-card .metric-progress-bar.success { background: var(--border-btn); }
.subscription-plan-card .metric-progress-bar.warning { background: var(--bronze); }
.subscription-plan-card .metric-progress-bar.danger { background: var(--navy-blue); }
.subscription-plan-card .plan-action { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--cloud-gray); }
.subscription-plan-card .plan-action .manage-btn { display: inline-block; padding: 10px 20px; background: var(--brown); color: var(--white); border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; font-family: 'Inter', sans-serif; transition: all 0.3s ease; }
.subscription-plan-card .plan-action .manage-btn:hover { background: var(--charcoal); transform: translateY(-1px); }
@media (max-width: 768px) { .subscription-plan-card .plan-header { flex-direction: column; gap: 16px; } .subscription-plan-card .plan-status { text-align: left; } .subscription-plan-card .plan-metrics { gap: 12px; } .subscription-plan-card .metric-item { padding: 14px; } }
/* End Business Dashboard -> Subscription Plan Card */

.business-type-list {border: 1px solid var(--cloud-gray);border-radius: 6px;max-height: 430px;overflow: hidden;overflow-y: scroll;}