/* ============================================================
   OVERALL LAYOUT
   ============================================================ */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.yl-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.yl-body {
    flex: 1;
    overflow: hidden;
    min-height: 0;
    background-color: #f4f6fb;

}

.yl-body .wrapper {
    overflow-y: auto;
    min-height: 100vh;
}

/* ============================================================
   FULL-WIDTH HEADER
   ============================================================ */

.yl-header {
    width: 100%;
    flex-shrink: 0;
    z-index: 100;
    background-color: #ffffff;
}

.yl-header-topbar {
    background-color: #2d4a8a;
    height: 55px;
    width: 100%;
}

.yl-header-main {
    background-color: #ffffff;
    border-bottom: 1px solid #e8ecf1;
    width: 90%;
    height: 77px;
    display: flex;
    align-items: center;
    
    margin: 0 auto;
}

.yl-header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-right: auto;
}

.yl-header-logo img {
    height: 35px;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

#kt_aside_logo img {
    padding: 4px;
    background: transparent;
    border-radius: 5px;
}

.aside.aside-dark .aside-logo,
.aside.aside-dark {
    background-color: #2d4a8a !important;
}

/* Sidebar fills remaining height below header */
#kt_aside.aside {
    /* position: relative !important; */
    top: 130px !important;
    height: fit-content !important;
    min-height: fit-content !important;
    flex-shrink: 0;
    border-radius: 0 16px 16px 0;
    padding-top: 40px !important;
    min-width: 250px !important;
    width: 263px !important;
}

/* Hide section labels (Dashboard, Users, Classrooms…) */
/* .aside-dark .menu .menu-item .menu-content .menu-section { */
    /* display: none !important; */
/* } */
.aside-dark .menu .menu-item .menu-section{
    color: white !important;
}
/* Remove extra top padding from section containers */
.aside-dark .menu .menu-item .menu-content {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.aside-dark .menu .menu-item .menu-link{
    margin: 6px 28px !important;
}
/* Active link – white pill */
.aside-dark .menu .menu-item .menu-link.active {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    margin: 6px 28px !important;

    /* padding-left: 12px !important; */
}

.aside-dark .menu .menu-item .menu-link.active .menu-title {
    color: #2d4a8a !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.aside-dark .menu .menu-item .menu-link.active .menu-icon svg path {
    fill: #2d4a8a !important;
}

/* Hover */
.aside-dark .menu .menu-item .menu-link:hover:not(.disabled):not(.active),
.aside-dark .menu .menu-item.hover > .menu-link:not(.disabled):not(.active) {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    /* padding-left: 12px !important; */
    margin: 6px 28px !important;

}

/* Default link text colour */
.aside-dark .menu .menu-item .menu-link .menu-title {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.aside-dark .menu .menu-item .menu-link .menu-icon svg path {
    fill: rgba(255, 255, 255, 0.75) !important;
}

.aside-dark .menu .menu-item .menu-link .menu-arrow:after {
    border-color: rgba(255,255,255,0.6) !important;
}

/* Sub-menu bullet */
.aside-dark .menu .menu-item .menu-link .menu-bullet .bullet {
    background-color: rgba(255,255,255,0.5) !important;
}

/* ============================================================
   HEADER / TOP BAR  (legacy override kept for safety)
   ============================================================ */

.header {
    background-color: #ffffff !important;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */

.wrapper,
#kt_content,
.content {
    background-color: #f4f6fb !important;
}
.mainTitle{
  
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #2E4984;
    margin-bottom: 40px;
    margin-top: 32px;
}    
/* ============================================================
   CARDS
   ============================================================ */

.card {
    box-shadow: 0 2px 8px rgba(45, 74, 138, 0.08) !important;
    border: 1px solid #e8ecf4 !important;
    border-radius: 12px !important;
}

/* ============================================================
   DASHBOARD – overview stat cards
   ============================================================ */

.yl-stat-card {
    background: #ffffff;
    border-radius: 16px;
    /* border: 1px solid #e0e6f0; */
    padding: 32px 50px;
    display: flex;
    align-items: center;
    gap: 20px;
    
    /* box-shadow: 0 2px 8px rgba(45, 74, 138, 0.07); */
    box-shadow: 0px 2px 2px 0px #00000040;
}

.yl-stat-icon {
    background: #DFE8FF;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.yl-stat-icon svg {
    width: 24px;
    height: 24px;
}

.yl-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #2E4984;
    line-height: 1.2;
}

.yl-stat-label {
    font-size: 1rem;
    color: #666666;
    margin-top: 12px;
    font-weight: 500;
}

.yl-welcome-heading {
    font-size: 2.125rem;
    font-weight: 700;
    color: #2E4984;
    margin-bottom: 66px;
}


.yl-overview-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2E4984;
    margin-bottom: 16px;
    margin-top: 28px;
}

/* ============================================================
   TABLES
   ============================================================ */

table th {
    width: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

table td {
    font-size: 13px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

table img.img-thumbnail {
    width: 40px !important;
    height: 40px !important;
    padding: 0;
    object-fit: cover;
}

table .fa,
table .fas,
table .fa-pen {
    background-color: #f5f8fa;
    font-size: 14px;
    height: 30px;
    width: 30px;
    line-height: 30px;
    border-radius: 3px;
    text-align: center;
    color: #a1a5b7 !important;
    margin-right: -13px;
    cursor: pointer;
}

table thead tr td:first-child,
table tbody tr td:first-child {
    width: 30px;
}

div.dataTables_wrapper div.dataTables_filter { padding: 0; }

#kt_content_container > .card > .card-header {
    padding-bottom: 0;
}

/* ============================================================
   BUTTONS & FORMS
   ============================================================ */

.btn.btn-primary {
    padding: 9px 25px;
    background: #2d4a8a;
    color: #fff !important;
    border-color: #2d4a8a !important;
}
.btn.btn-upload{
    background: #EF3938;
    padding: 9px 25px;
    color: #fff !important;
    border-color: #2d4a8a !important;
}
.btn.btn-primary:hover {
    background: #243d73 !important;
}

.form-control.form-control-solid {
    padding: 11px;
}

.fv-plugins-icon-container.mb-7 {
    margin-bottom: 10px !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination .active .page-link {
    background-color: #2d4a8a;
    border-color: #2d4a8a;
}

.pagination .page-link:hover {
    background-color: #1e3a6e;
    color: #fff;
}

.pagination .page-item {
    text-transform: capitalize;
    margin: 0 9px;
}

/* ============================================================
   MISC
   ============================================================ */

.card-title { margin: 0 !important; }

.badge { padding: 4px 6px; }

.rating-label { margin: 0 !important; }

.rating-label i {
    font-size: 14px !important;
    margin-left: 1px;
}

.rating .rating-label:last-child i {
    font-style: normal;
    margin-left: 4px;
    font-size: 12px !important;
}

table a.border-primary { border: 0 !important; }

table a.border-primary i {
    border: 0 !important;
    background: #2d4a8a;
    border-radius: 3px;
    color: #fff !important;
    padding: 4px;
    width: 130px;
    word-break: unset;
    cursor: pointer;
    font-style: normal;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

table .btn.btn-info,
table a i.btn.btn-info,
table a i.btn.btn-primary {
    padding: 5px 4px !important;
    font-size: 11px;
    font-style: normal;
}

.swal2-container .swal2-html-container {
    margin-right: 0;
    margin-left: 0;
}

#kt_account_profile_details { display: block !important; }

.repeater input.outer {
    float: right;
    margin-top: 10px;
    margin-bottom: 15px;
    background: #2d4a8a;
    border: 0;
    color: #fff;
    padding: 4px 13px;
    border-radius: 5px;
}

input[name="affiliate_student"],
input[name="affiliate_teacher"] {
    border: 1px solid #eee;
    border-radius: 3px;
    outline: none;
    padding: 3px;
    margin: 0 5px;
}

#kt_modal_affiliate_form .card-footer.d-flex.justify-content-end.py-6.px-9 {
    border: none;
}

.bg-body.shadow-sm.card-rounded.mx-9.mb-9.px-6.py-9.position-relative.z-index-1
    .d-flex.align-items-center.mb-6
    .symbol.symbol-45px {
    display: none;
}

.bg-body.shadow-sm.card-rounded.mx-9.mb-9.px-6.py-9.position-relative.z-index-1
    .d-flex.align-items-center.mb-6
    .d-flex {
    display: block !important;
}

.bg-body.shadow-sm.card-rounded.mx-9.mb-9.px-6.py-9.position-relative.z-index-1
    .d-flex.align-items-center.mb-6
    input {
    display: block;
    border: 1px solid #d4d3d3;
    border-radius: 5px;
    padding: 7px;
    width: 100%;
}

.bg-body.shadow-sm.card-rounded.mx-9.mb-9.px-6.py-9.position-relative.z-index-1 {
    padding-bottom: 1px !important;
    border: 1px solid #eee;
}

.px-9.pt-7.card-rounded.h-275px.w-100 .m-0.text-white.fw-bolder.fs-3 {
    font-size: 35px !important;
    text-align: center;
    padding: 0 !important;
    margin-left: 30px !important;
    font-weight: bold !important;
}

.clickable { cursor: pointer; }

.error-message   { color: red;       font-weight: bold; }
.warning-message { color: darkorange; font-weight: bold; }
.success-message { color: green;      font-weight: bold; }

.d-block { display: block; }
.h-47{
    min-height: 47px 
}
.img-pre__container { z-index: 999999 !important; }

.rounded-default{
    border-radius: 20px !important;
}
.h-screen{
    height: 100vh;
}
.log-border{
    border: 2px solid #789ADE !important;

}
.w-90{
    width: 90% !important;
}
.text-black2{
    color:#444B59 !important;
}
.form-log{
    font-size:1.7rem !important;
    padding: 1rem 2rem !important;
}
.currency-btn{
    border: none;
    border-radius: 20px;
    background: #EF3938;
    color: #fff;
    padding: 0 12px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    min-width: 80px;
    position: absolute;
    top: 5px;
    right: 5px;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.w-lg-40{
    width: 40% !important;
}
@media (max-width:720px) {
    .w-lg-40{
        width: 100% !important;
    }
}
.check-toggle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #a8b4d0;
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s;
    position: relative;
}
.check-toggle::after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.2s;
}
.check-checkbox:checked + .check-toggle {
    border-color: #9EB0EA;
}
.check-checkbox:checked + .check-toggle::after {
    background:rgb(41, 70, 175);
}