.iconCircle {
    background: #e91e63;
    color: white !important;
    border-radius: 50%;
    padding: 10px;
}
.setting-icons .avatar-xl {
    width: 60px !important;
    height: 60px !important;
}

.setting-icons .sidenav-footer {
    text-align: right;
}

.padd-le-ri {
    padding: 1rem;
}

.min-height-200 {
    min-height: 200px;
}




.triangle::after {
    content: '';
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #333;
    pointer-events: none;
}

h5.curr-card {
    font-weight: normal;
    font-size: 1rem;
}

.Qr-code h3 {
    padding-left: 1rem;
    padding-top: 1rem;
}

.qr-image img {
    max-width: 100%;
    margin-bottom: 1rem;
}

.student-qr-scanner-card .material-icons.text-primary {
    font-size: 2rem;
}

.student-qr-video-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #111827;
    border-radius: 0.75rem;
}

.student-qr-video-wrap video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-qr-guide {
    position: absolute;
    inset: 16%;
    border: 3px solid #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / 28%);
    pointer-events: none;
    transition: border-color 160ms ease-out, transform 160ms ease-out;
}

.student-qr-guide.is-detected {
    border-color: #71dd37;
    transform: scale(0.98);
}

.student-qr-capture {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: #ffffff;
    color: #0f5132;
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0;
    transform: translate(-50%, -0.4rem);
    transition: opacity 160ms ease-out, transform 160ms ease-out;
    pointer-events: none;
}

.student-qr-capture.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.student-qr-capture .material-icons {
    font-size: 1.1rem;
}

.student-qr-session {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    color: #344767;
    font-size: 0.8125rem;
    font-weight: 600;
}

.student-qr-result {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 5.25rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    background: #eef2f7;
    color: #344767;
    line-height: 1.4;
}

.student-qr-result > .material-icons {
    margin-top: 0.05rem;
    font-size: 1.5rem;
}

.student-qr-result-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.15rem;
}

.student-qr-result-copy > strong {
    font-size: 1rem;
}

.student-qr-result-copy > span {
    font-size: 0.875rem;
}

.student-qr-identity {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.65rem;
    margin-top: 0.2rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.student-qr-result.is-recorded {
    background: #d1e7dd;
    color: #0f5132;
}

.student-qr-result.is-already {
    background: #e7f1ff;
    color: #084298;
}

.student-qr-result.is-error {
    background: #f8d7da;
    color: #842029;
}

.student-qr-result.is-existing {
    background: #fff3cd;
    color: #664d03;
}

@media (max-width: 575.98px) {
    .student-qr-scanner-card .card-body {
        padding: 1rem !important;
    }

    .student-qr-video-wrap {
        min-height: 15rem;
    }

    .student-qr-scanner-card .btn {
        min-height: 3rem;
    }

    .student-qr-result {
        min-height: 5.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .student-qr-scanner-card *,
    .student-qr-scanner-card *::before,
    .student-qr-scanner-card *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

h6.present-color {
    color: #EC407A;
    margin-bottom: 0px;
}

.no-present svg {
    width: 50px;
    height: 50px;
    color: #344767;
    margin-right: .8rem;
    background-color: rgb(245, 245, 245);
    border-radius: 50%;
    padding: 10px;
    border: 1px solid #eeeeee;
}

.no-absent svg {
    width: 50px;
    height: 50px;
    color: #344767;
    margin-right: .8rem;
    background-color: rgb(245, 245, 245);
    border-radius: 50%;
    padding: 10px;
    border: 1px solid #eeeeee;
}

.present-header {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green text */
    font-weight: bold;
    text-align: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    border: 1px solid #c3e6cb;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.absent-header {
    background-color: #f8d7da; /* Light red/pink */
    color: #721c24; /* Dark red text */
    font-weight: bold;
    text-align: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    border: 1px solid #f5c6cb;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

table#student-table th.text-xxs {
    font-size: .8rem !important;
}

.stu-id {
    font-size: .85rem !important;
}

.table thead th {
    padding-left: 1rem;
}


.no-days-input.input-group.input-group-outline.is-focused .form-label, .input-group.input-group-outline.is-filled .form-label {
    width: 95%;
}

.course-details .text-xs {
    font-size: .9rem !important;
}

.card-course-details {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.course-details .text-rose {
    font-size: .95rem;
}

/* courses*/
.tabs {
    padding: 1rem;
}
/* Custom animated moving tab for vertical layout */
#v-tabs {
    position: relative;
    padding-left: 0;
}

/* Smooth animated vertical tab indicator */

/* Active tab */
#v-tabs {
    position: relative;
}

    #v-tabs .nav-link {
        transition: background 0.3s ease, color 0.3s ease;
        border-radius: 0.375rem;
    }

        #v-tabs .nav-link:not(.active) {
            background: transparent !important;
            color: #344767 !important;
        }

        #v-tabs .nav-link.active {
            background: transparent !important; /* remove default active BG */
            color: #e91e63 !important;
            font-weight: bold;
        }

.vertical-moving-tab {
    position: absolute;
    left: 0;
    width: 100%;
    border-radius: 0.375rem;
    background: var(--bs-gradient);
    background-image: linear-gradient(195deg, #f5f5f5 0%, #ebebeb 100%);
    z-index: 0;
    transition: top 0.3s ease, height 0.3s ease;
    pointer-events: none;
}

.moving-tab {
    display: none !important;
}

.tab-pane ul li a:hover {
    text-decoration: underline;
}

.subject-details .card .card-header {
    background-color: #f7f7f7;
}

.subject-details .card .card-footer h4 {
    font-size: 1rem;
}

.course-times-tables .card-header h4 {
    color: #ffffff;
    padding: 0rem 1rem;
    margin-bottom: 0;
}

.course-times-tables .card-body p.text-sm {
    line-height: .5;
}

.material-symbols-rounded {
    font-size: 1rem;
}

.month-header {
    background-color: #d4e6ed; /* Light green */
    color: #154d57; /* Dark green text */
    font-weight: bold;
    text-align: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    border: 1px solid #c3d6e6;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.nav-tabs .nav-link {
    color: #6c757d; /* Bootstrap's default gray */
    background-color: #f8f9fa; /* Light background */
    border: 1px solid #dee2e6;
    margin-right: 5px;
}

    /* Active tab styling */
    .nav-tabs .nav-link.active {
        color: white !important;
        background-color: #e91e63 !important;
        border-color: #e91e63 !important;
    }

/* Optional: remove bottom border from the nav tab container */
.nav-tabs {
    border-bottom: none;
}

.min-height-80 {
    min-height: 80px;
}

#editForm .form-control, .form-select {
    border: 1px solid #d2d6da;
    padding: .5rem 1rem;
}

.modal-dialog .modal-title {
    color: #ffffff;
}

#editForm .form-select:focus {
    border-color: #d2d6da;
}

.navbar-vertical .navbar-brand > img, .navbar-vertical .navbar-brand-img {
    max-height: 100%;
    max-width: 70%;
}

.sidenav-header {
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidenav .flex-align {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-group {
    margin-bottom: .7rem;
}

.form-group[class*=has-icon-].has-icon-left .form-control {
    padding-left: 2.5rem;
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #607080;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dce7f1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-group[class*=has-icon-].has-icon-left .form-control-icon {
    left: 0;
}

.form-group[class*=has-icon-] .form-control-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 .6rem;
}

    .form-group[class*=has-icon-] .form-control-icon i, .form-group[class*=has-icon-] .form-control-icon svg {
        width: 1.2rem;
        color: #6c757d;
        font-size: 1.2rem;
    }

.form-control:focus {
    color: #607080;
    background-color: #fff;
    border-color: #e91e63 !important; /* #a1afdf; */
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(233 30 99 / 25%); /* 0 0 0 .25rem rgba(67, 94, 190, .25); */
}

.form-group[class*=has-icon-] .form-control:focus ~ .form-control-icon i, .form-group[class*=has-icon-] .form-control:focus ~ .form-control-icon svg {
    color: #e91e63 !important; /* #5a8dee; */
}
.input-group.input-group-outline .form-control {
    background: white !important;
}
.alert-danger-new{
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}
.alert-success-new {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}
.alert-warning-new {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.conversation-img {
   
    /*object-fit: cover;*/
    transition: transform 0.3s ease; /* smooth zoom */
    cursor: pointer;
}

.conversation-img:hover {
    transform: scale(4); /* zoom to 400% on hover */
    z-index: 10;
    position: absolute;
}

.toast {
    width: 350px;
    max-width: 100%;
    font-size: 0.9375rem;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 0 solid rgba(67, 89, 113, 0.1);
    box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45);
    border-radius: 0.5rem;
}

.bg-success.toast, .bg-success.bs-toast {
    color: #fff;
    background-color: rgba(113, 221, 55, 0.85) !important;
    box-shadow: 0 0.25rem 1rem rgba(113, 221, 55, 0.4);
}

.bg-success.toast .toast-header, .bg-success.bs-toast .toast-header {
    color: #fff;
}

.bg-success.toast .toast-header .btn-close, .bg-success.bs-toast .toast-header .btn-close {
    background-color: #71dd37 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='1' fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    box-shadow: 0 0.1875rem 0.375rem 0 rgba(113, 221, 55, 0.4) !important;
}



.bg-danger.toast, .bg-danger.bs-toast {
    color: #fff;
    background-color: rgba(255, 62, 29, 0.85) !important;
    box-shadow: 0 0.25rem 1rem rgba(255, 62, 29, 0.4);
}

    .bg-danger.toast .toast-header, .bg-danger.bs-toast .toast-header {
        color: #fff;
    }

        .bg-danger.toast .toast-header .btn-close, .bg-danger.bs-toast .toast-header .btn-close {
            background-color: #ff3e1d !important;
            background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='1' fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            box-shadow: 0 0.1875rem 0.375rem 0 rgba(255, 62, 29, 0.4) !important;
        }

.toast-header {
    display: flex;
    align-items: center;
    padding: 1.25rem 1.25rem;
    color: #697a8d;
    background-color: transparent;
    background-clip: padding-box;
    border-bottom: 0 solid transparent;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

/* ELC manual attendance */
.elc-attendance-shell h4 {
    text-wrap: balance;
}

.elc-completion {
    min-width: 10rem;
    padding: 0.75rem 1rem;
    color: #344767;
    background: #fff;
    border: 1px solid #d2d6da;
    border-radius: 0.5rem;
    text-align: center;
}

.elc-completion .progress {
    height: 0.4rem;
    background-color: #eef0f4;
}

.elc-status-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.75rem;
    color: #5f6b7a;
    font-size: 0.7rem;
}

.elc-attendance-table-wrap {
    border: 1px solid #e9ecef;
}

.elc-student-row.elc-row-filtered {
    display: none !important;
}

.elc-attendance-table td {
    min-width: 13rem;
    vertical-align: middle;
}

.elc-attendance-table td:first-child {
    min-width: 17rem;
}

.elc-attendance-table td:nth-child(2) {
    min-width: 22rem;
}

.elc-status-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 100%;
}

.elc-status-option {
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    color: #445065;
    background: #f8f9fa;
    border: 1px solid #d2d6da;
    border-radius: 0.375rem;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.elc-status-option:not(.is-selected):hover:not(:disabled) {
    background: #f0f2f5;
    border-color: #98a1b2;
}

.elc-status-option:focus-visible {
    outline: 3px solid rgb(233 30 99 / 25%);
    outline-offset: 2px;
}

.elc-status-option:disabled {
    cursor: default;
    opacity: 0.72;
}

.elc-status-present.is-selected {
    color: #174d2b;
    background: #dcefe1;
    border-color: #4f9563;
}

.elc-status-half-day.is-selected {
    color: #5f4300;
    background: #ffefbf;
    border-color: #b98a1f;
}

.elc-status-absent.is-selected {
    color: #752525;
    background: #ffe1e1;
    border-color: #c75a5a;
}

.elc-status-neutral.is-selected {
    color: #344767;
    background: #e9ecf2;
    border-color: #7b8495;
}

.elc-mobile-label {
    display: none;
    margin-bottom: 0.5rem;
    color: #5f6b7a;
    font-size: 0.75rem;
    font-weight: 700;
}

.elc-attendance-table .form-select,
.elc-attendance-table .form-control {
    min-height: 2.75rem;
    color: #344767;
    background-color: #fff;
}

.elc-attendance-table .form-select:focus,
.elc-attendance-table .form-control:focus {
    border-color: #e91e63;
    box-shadow: 0 0 0 0.2rem rgb(233 30 99 / 20%);
}

.elc-submit-bar {
    position: sticky;
    bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: #fff;
    border: 1px solid #d2d6da;
    border-radius: 0.5rem;
    z-index: 10;
}

.elc-submit-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 991.98px) {
    .elc-attendance-table-wrap {
        overflow: visible;
        background: transparent !important;
        border: 0;
    }

    .elc-attendance-table,
    .elc-attendance-table tbody {
        display: block;
        width: 100%;
    }

    .elc-attendance-table thead {
        display: none;
    }

    .elc-attendance-table .elc-student-row {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
        background: #fff;
        border: 1px solid #e1e4e9;
        border-radius: 0.5rem;
    }

    .elc-attendance-table td,
    .elc-attendance-table td:first-child,
    .elc-attendance-table td:nth-child(2) {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 0.75rem 1rem;
        white-space: normal;
    }

    .elc-mobile-label {
        display: block;
    }

    .elc-status-options,
    .elc-comment,
    .elc-half-day-time,
    .elc-absent-reason {
        width: 100%;
        max-width: 100%;
    }

    .elc-status-option {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 575.98px) {
    .elc-completion {
        width: 100%;
    }

    .elc-submit-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .elc-submit-bar .btn {
        min-height: 3rem;
    }

    .elc-submit-actions,
    .elc-submit-actions .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .elc-attendance-shell *,
    .elc-attendance-shell *::before,
    .elc-attendance-shell *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* ELC teacher-centric assignments */
.elc-assignment-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .375rem;
    padding: .375rem;
    background: #f8f9fa;
    border: 1px solid #dfe3e8;
    border-radius: .625rem;
}
.elc-assignment-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: .55rem 1rem;
    color: #344767;
    background: #fff;
    border: 1px solid #d2d6da;
    border-radius: .45rem;
    font-weight: 600;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.elc-assignment-tabs .nav-link:hover {
    color: #e91e63;
    background: #fff;
    border-color: #e91e63;
}
.elc-assignment-tabs .nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgb(233 30 99 / 20%);
}
.elc-assignment-tabs .nav-link.active {
    color: #fff;
    background: #e91e63;
    border-color: #e91e63;
}
.elc-assignment-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.elc-assignment-metrics > div { padding: .875rem 1rem; background: #fff; border: 1px solid #e1e4e9; border-radius: .5rem; }
.elc-assignment-metrics strong, .elc-assignment-metrics span { display: block; }
.elc-assignment-metrics strong { color: #344767; font-size: 1.25rem; }
.elc-assignment-metrics span { color: #5f6b7a; font-size: .75rem; }
.elc-section-options { display: flex; flex-wrap: wrap; gap: .75rem; }
.elc-section-choice { display: flex; flex: 1 1 12rem; align-items: center; gap: .75rem; min-height: 3rem; padding: .75rem; border: 1px solid #d2d6da; border-radius: .375rem; cursor: pointer; }
.elc-section-choice:has(input:checked) { border-color: #5e72e4; background: #f0f2ff; }
.elc-section-choice input { width: 1.1rem; height: 1.1rem; }
.elc-section-choice span, .elc-section-choice small { display: block; }
.elc-section-choice small { color: #5f6b7a; }
.elc-assignment-savebar { position: sticky; bottom: .75rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .875rem 1rem; background: #fff; border: 1px solid #d2d6da; border-radius: .5rem; z-index: 10; }
@media (max-width: 767.98px) { .elc-teacher-table td, .elc-teacher-table th { white-space: normal; } .elc-assignment-savebar { align-items: stretch; flex-direction: column; } .elc-assignment-savebar .btn { width: 100%; min-height: 3rem; } }
@media (max-width: 575.98px) { .elc-assignment-tabs { display: flex; width: 100%; } .elc-assignment-tabs .nav-link { flex: 1 1 0; min-width: 8rem; } }