html,
body {
    background-color: #F5F5F5;
    height: 100%;
    margin: 0;
}

.main-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
}

.side-menu {
    width: 281px;
    height: 100%;
    background-color: #639368;
}

.side-menu-header {
    display: flex;
    width: 281px;
    align-items: center;
}

.side-menu-header p {
    font-family: 'InterBold';
    font-size: 20px;
    color: white;
    margin-left: 5px;
    text-align: left;
    margin-right: 8px;
}

.side-menu-header img {
    width: 80px;
    height: 79px;
}

.menu-items {
    align-items: center;
    display: block;
    text-align: center;
    justify-content: center;
}

.m-item {
    margin-left: 26px;
    margin-top: 3px;
    padding-left: 15px;
    display: flex;
    align-items: center;
    text-align: left;
    height: 35px;
    width: 230px;
}

.m-item p {
    font-family: 'InterSemiBold';
    font-size: 18px;
    color: white;
    margin-left: 7px;
}

.m-item img {
    width: 25px;
    height: 25px;
}


.active,
.menu-items :hover {
    border-radius: 5px;
    background: #83BE89;
    background-color: #83BE89;
    transform: scale(1.01);
}

.rest-content {
    overflow: hidden;
    width: 100%;
    display: flex;
    gap: 10px;
    flex-direction: column;
    height: 100vh;
    /* full screen height */
}

.rest-content-navbar {
    height: 75px;
    padding-left: 22px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    text-align: left;
}

.rest-content-navbar p {
    width: 328px;
    font-family: 'InterMedium';

    font-size: 32px;

}

.nav-right {
    display: flex;
    margin-right: 39px;
    flex-direction: row-reverse;
    /* <-- puts the first element to the far right */
    justify-content: flex-start;
    /* items pack against the right edge now */
    align-items: center;
    gap: 25px;
    width: 100%;
}

.nav-search {
    width: 347px;
    position: relative;
    color: #8D8D8D;
    background-color: #EFEFEF;
    border: 0.5px solid #A7A7A7;
    ;
    border-radius: 8px;
    padding-left: 10px;
    height: 44px;
}

.nav-search input {
    width: 100%;
    height: 100%;
    font-family: 'InterMedium';
    font-size: 17px;
    outline: none;
    background: none;
    border: none;
    box-shadow: none;

}

.nav-search img {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.search-results-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 0.5px solid #A7A7A7;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    display: none;
    z-index: 10001;
}

.search-results-popup.show {
    display: block;
}

.search-result-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
}

.search-result-item:hover {
    background: #F0F0F0;
}

.search-result-title {
    font-family: 'InterSemiBold';
    font-size: 14px;
    color: #111;
}

.search-result-meta {
    font-family: 'InterMedium';
    font-size: 12px;
    color: #666;
}

.search-result-type {
    font-family: 'InterBold';
    font-size: 11px;
    color: #639368;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-bell {
    width: 30px;
    height: 30px;
}

.nav-admin select {
    padding-right: 15px;
    text-align: center;
    margin-left: 10px;
    align-content: center;
    height: 100%;
    transform: translateY(-50%);
    align-items: center;
    outline: none;
    background: none;
    border: none;
    font-size: 20px;
    color: black;
    font-family: 'InterSemiBold';
}

.nav-admin option {
    font-size: 17px;
}

.nav-admin img {

    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.content-box {
    width: 100%;
    flex: 1;
    overflow: hidden;
    margin-inline: 10px;
    /* left & right margin */
    width: calc(100% - 20px);
    /* 32px = 16 + 16 */
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: white;
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 10px;

}

.sub-menu-bar {
    width: 100%;
    display: flex;
    height: 39px;
    background-color: #EAEAEA;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.bar-item {
    min-width: 60px;
    color: black;
    padding-left: 20px;
    padding-right: 20px;
    height: 39px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-family: 'InterMedium';
    font-size: '18px';
cursor: arrow;
    display: flex;
    justify-content: center;
    /* centers horizontally */
    align-items: center;
    /* centers vertically */
    text-align: center;
}

.bar-item-active {
    min-width: 60px;
    color: black;
    background-color: white;
    padding-left: 20px;
    padding-right: 20px;
    height: 39px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-family: 'InterMedium';
    font-size: '18px';
    display: flex;
    justify-content: center;
    /* centers horizontally */
    align-items: center;
    cursor: pointer;
    /* centers vertically */
    text-align: center;
}


.bar-item :hover {
    min-width: 60px;
    color: black;
    background-color: white;
    padding-left: 20px;
    padding-right: 20px;
    height: 39px;
    cursor: pointer;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-family: 'InterMedium';
    font-size: '18px';
    display: flex;
    justify-content: center;
    /* centers horizontally */
    align-items: center;
    /* centers vertically */
    text-align: center;
}
.bar-item p{
    cursor: pointer;
}

.content {
    width: 100%;
    flex: 1;
    margin-inline: 10px;
    /* left & right margin */
    width: calc(100% - 20px);
    background-color: white;
    display: flex;
    flex-direction: row;
    padding-bottom: 10px;
    height: 100dvh;
    gap: 10px;
}

.content-col {
    width: 100%;
    flex: 1;
    margin-inline: 10px;
    /* left & right margin */
    width: calc(100% - 20px);
    background-color: white;
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
    height: auto;
    gap: 10px;
}

.tab-section { display: none; }
.tab-section.show { display: flex; }

.settings-content-box {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.settings-content-box .sub-menu-bar {
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.settings-content-box .bar-item,
.settings-content-box .bar-item-active {
    flex: 0 0 auto;
}

.settings-content-box .tab-section {
    min-height: 0;
}

.settings-content-box .tab-section.show {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
}

.settings-content-box .content {
    height: auto;
}

#fee-invoice.show {
    overflow: hidden;
}

#fee-invoice .fee-invoice-settings-scroll {
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

.userInfo {
    width: 232px;
}

.student-photo {
    width: 90%;          /* whatever you had */
    height: 225px;
    border-radius: 5%;    /* circle, if you were doing that */
    object-fit: cover;     /* keep aspect ratio, crop nicely */
    /* any shadow / border / etc you had */
}

.aRecord p {
    margin-top: 10px;
    width: 200px;
    font-family: 'InterBold';
    font-size: 17px;
    text-align: left;
    color: black;

}

.atRecord {
    display: flex;
    justify-content: flex-start;
    /* ✅ align to start (left) */
    align-items: flex-start;
    /* ✅ align to top */
    margin-top: -10px;
}

.radial {
    --size: 100px;
    --value: 20;
    --thickness: 10px;
    --track: #000;
    --progress: #5f7f63;
    --r: 45;
    --circ: calc(2 * 3.14159265 * var(--r));

    width: var(--size);
    aspect-ratio: 1;
    position: relative;
    display: inline-block;
    margin: 0;
    align-self: flex-start;
    justify-self: start;

}

/* SVG circular track and progress */
.ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.track,
.progress {
    fill: none;
    stroke-width: var(--thickness);
}

.track {
    stroke: var(--track);
}

.progress {
    stroke: var(--progress);
    stroke-linecap: round;
    stroke-dasharray: var(--circ);
    stroke-dashoffset: calc(var(--circ) * (1 - var(--value) / 100));
    transition: stroke-dashoffset 0.6s ease;
}

/* Inner white circle */
.radial::after {
    content: "";
    position: absolute;
    inset: calc(var(--thickness) + 8px);
    background: #fff;
    border-radius: 50%;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.12),
        inset 0 0 0 2px rgba(0, 0, 0, 0.05);
    z-index: 1;
    /* place below text */
}

/* Centered text (above white circle) */
.center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    /* ensures text is above the white layer */
}

.percent {
    font-family: 'InterSemiBold';
    font-size: 20px;
    color: #000;
    line-height: 1;
}

.label {
    font-family: 'InterSemiBold';
    font-size: 10px;
    letter-spacing: 1px;
    margin-top: 5px;
    color: #000;
}

.atContent {
    margin-top: 10px;
    padding-left: 15px;
    width: 100%;
    flex: 1;
    flex-direction: column;
    display: flex;
    gap: 20px;
}

.content-item {
    margin-top: -10px;
    display: flex;
    align-items: center;
    position: absolute;
}

.content-item p {
    margin-left: 7px;
    font-family: 'InterBold';
    font-size: 11px;
}

.content-item span {
    color: black;
    font-family: 'InterSemiBold';
    font-size: 23px;
}

.btn-full {
    margin-top: 5px;
    display: flex;
    width: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 20px;
    border-radius: 4px;
    border: none;
    height: 40px;
    background-color: #639368;
}

.btn-full p {
    color: white;
    font-family: 'InterBold';
    font-size: 18px;
}

.btn-full img {
    width: 25px;
    height: 25px;
}

.btn-danger-secondary {
    background-color: #7A1F1F !important;
    border: 1px solid #B42318 !important;
}

.btn-danger-secondary p,
.btn-danger-primary p {
    color: #fff !important;
}

.btn-danger-primary {
    background-color: #C50000 !important;
    border: 1px solid #8F1212 !important;
}

.destructive-confirm-title {
    color: #7A1F1F !important;
    font-family: 'InterBold' !important;
    font-size: 20px !important;
    margin-bottom: 10px !important;
}

.destructive-confirm-text {
    color: #313131 !important;
    font-family: 'InterSemiBold' !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    margin-bottom: 14px !important;
}

.destructive-reason-note {
    width: 100%;
    min-height: 86px;
    resize: vertical;
    border: 1px solid #B42318;
    border-radius: 8px;
    padding: 10px;
    font-family: 'InterMedium';
    font-size: 14px;
    color: #313131;
    box-sizing: border-box;
    margin: 8px 0 16px;
}

.destructive-reason-note:focus {
    outline: 2px solid rgba(197, 0, 0, 0.18);
    border-color: #C50000;
}

.twobuttons {
    width: 100%;
    display: flex;
    text-align: center;
    align-content: center;
    justify-content: center;
    flex-direction: row;
    gap: 5px;
}

.content-details {
    width: 100%;
    flex: 1;
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    height: auto;
}

.tworows {
    display: flex;
    flex: 1;
    margin-top: -5px;
    width: 100%;
    gap: 15px;
    text-align: center;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;

}

.images-row {
    display: flex;
    flex: 1;
    width: 100%;
    gap: 90px;
    margin-top: 10px;
    text-align: center;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
}

.identity-item {
    display: flex;
    gap: 1px;
    width: 211px;
    text-align: left;
    align-items: left;
    justify-content: flex-start;
    flex-direction: column;
    text-align: center;
}

.identity-item img {
    width: 211px;
    margin-top: 10px;                           
    height: 126px;
}

.identity-item button {
    margin-top: 6px;
    border-radius: 10px;
    border: 2px solid #0074E3;
    background-color: transparent;
    height: 31px;
    text-align: center;
}

.identity-item p {
    font-size: 15px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-family: 'InterMedium';
    color: #0074E3;
}



.item-left-lable {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: left;
    flex-direction: row;
}

.item-left-lable p {
    font-family: 'InterSemiBold';
    font-size: 16px;
    color: #000;

    width: 140px;
}

.item-left-lable input {
    width: 100%;
    flex: 1;
    background-color: none;
    border: 0.5px solid #555454;
    outline: none;
    border-radius: 4px;
    height: 34px;
    color: #000;
    font-size: 16px;
    font-family: 'InterSemiBold';
    padding-left: 10px;
    padding-right: 10px;
    align-items: center;
    padding-top: 2px;
}

.item-left-lable-text {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: row;
}

.item-left-lable-text p {
    font-family: 'InterSemiBold';
    font-size: 16px;
    color: #000;
    text-align: left;
    margin-top: -2px;
    width: 150px;
}

.item-left-lable-text textarea {
    width: 100%;
    margin-top: 2px;
    flex: 1;
    background-color: none;
    border: 0.5px solid #555454;
    outline: none;
    border-radius: 4px;
    height: 34px;
    color: #000;
    font-size: 16px;
    font-family: 'InterSemiBold';
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    align-items: center;
    padding-top: 2px;
}

.table-page-topbar {
    width: 100%;
    display: flex;
    height: 42px;
    margin: 7px;
}

.table-page-topbar-search {
    border: 0.5px solid #A7A7A7;
    border-radius: 5px;
    height: 42px;
    width: 186px;
    display: flex;
    align-items: center;
    position: relative;
}

.table-page-topbar-search input {
    outline: none;
    width: 100%;
    margin: 2px;
    color: black;
    border: none;
    font-size: 16px;
    font-family: 'InterMedium';
}

.table-page-topbar-search img {
    width: 25px;
    height: 25px;
    padding-left: 9px;
}

.table-page-topbar-right {
    display: flex;
    flex-direction: row-reverse;
    gap: 5px;
    margin-right: 9px;
    padding-right: 9px;
    width: 100%;
    height: 100%;
}

.btn-admission {
    display: flex;
    align-items: center;
    height: 100%;
    background-color: #639368;
    border-radius: 8px;
    border: none;
    outline: none;
    padding-left: 10px;
    padding-right: 10px;

}

.btn-admission p {
    color: white;
    box-shadow: none;
    font-family: 'InterBold';
    font-size: 16px;
    margin-left: 10px;
    align-items: center;
    text-align: center;
}

.btn-admission img {

    width: 25px;
    height: 25px;
}

.table-S-Selector {
    height: 100%;
    border-radius: 5px;
    border: 0.5px solid #A7A7A7;
    outline: none;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 16px;
    font-family: 'InterMedium';

}

.table-bar-selector {
    height: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 0.5px solid #A7A7A7;
    outline: none;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 16px;
    font-family: 'InterMedium';

}

.line {
    margin-inline: 8px;
    /* left & right margin */
    width: calc(100% - 16px);
    height: 1px;
    margin-top: -8px;
    align-content: center;
    align-items: center;
    text-align: center;
    background-color: #2332554f;
}

.table-page-second-bar {

    width: 100%;
    display: flex;
    height: 50px;
}

.left-row {
    padding-left: 8px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;

}

.left-row-item p {
    padding-left: 10px;
    font-size: 16px;
    padding-right: 5px;
    color: black;
    margin-top: 0px;
    font-family: 'InterMedium';
}

.left-row-item span {
    background-color: #E5E5E5;
    font-family: 'InterMedium';
    font-size: 12px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
    align-items: center;
    border-radius: 3px;
    margin-left: 7px;
    color: rgba(35, 50, 85, 0.5);
}


.left-row-item-active p {
    font-size: 16px;
    padding-left: 10px;
    padding-right: 5px;
    font-family: 'InterBold';
    color: #639368;
    margin-top: 0px;

}

.left-row-item-active span {
    background-color: #E5E5E5;
    font-family: 'InterMedium';
    font-size: 12px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
    align-items: center;
    border-radius: 3px;
    margin-left: 7px;
    color: black;
}

.bottom-select {
    height: 3px;
    background-color: white;
    border-radius: 20px;
}

.bottom-select-active {
    height: 3px;
    background-color: #639368;
    border-radius: 20px;
}

.second-top-right {
    display: flex;
    width: 100%;
    height: 100%;
    padding-right: 10px;
    justify-content: right;
    flex-direction: row-reverse;
    align-items: center;
    text-align: center;
}

.second-top-right select {
    font-family: 'InterMedium';
    font-size: 16px;
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    padding-right: 5px;
    color: black;
    outline: none;
    margin-top: -15px;
    border: 0.5px solid black;

}

.text-right-message {
    margin-top: 6.5px;
    font-family: 'InterMedium';
    font-size: 14px;
    color: black;
    align-items: center;
    height: 100%;
    text-align: center;
    margin-right: 10px;
}

.second-top-right p {
    margin-top: -5px;
    font-family: 'InterMedium';
    font-size: 14px;
    color: black;
    margin-right: 15px;
}

.table-box {
    width: 100%;
    margin-top: -5px;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* don't exceed */
    background-color: #727cd6;
    overflow: hidden;
}



.table-content {
    background-color: #F8F8F8;
    width: 100%;
    margin-bottom: 1px;
    overflow-x: hidden;
    overflow-y: auto;
    border-collapse: collapse;
    border-spacing: 0;
    /* ← this adds vertical space (8px) between rows */
}

.table-scroll {
    height: 100%;
    flex: 1;
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
    background: #F8F8F8;
}

.table-content thead th {
    height: 45px;
    /* Apply height directly on th */
    font-size: 17px;
    font-family: 'InterBold';
    position: sticky;
    border-spacing: 0 8px;
    color: #000;
    background-color: #F8F8F8;
    top: 0;
    z-index: 2;
    vertical-align: middle;
}

.table-content th::after {
    content: "";
    position: absolute;
    right: 0;
    /* stick to right edge */
    top: 10px;
    /* leave 5px gap from top */
    bottom: 10px;
    /* leave 5px gap from bottom */
    width: 1px;
    /* thickness of the line */
    background-color: rgba(0, 0, 0, 0.1);
    /* color of the line */
}

.table-content th:last-child::after {
    display: none;
}

.table-content thead th:last-child {
    border-right: none;
}

.table-content tbody {
    /* fill remaining space */
    background-color: white;
}

.table-content td {
    color: black;
    background-color: rgba(99, 147, 104, 0.04);
    font-family: 'InterMedium';
    font-size: 16px;
}

.table-content td img {
    width: 20px;
    height: 20px;
}

.table-row {

    height: 33.5px;
    border-bottom: 1px solid rgba(35, 50, 85, 0.1);
}

.table-row-big {

    height: 75px;
    border-bottom: 1px solid rgba(35, 50, 85, 0.1);
}

.table-row-big-img {
    width: 70px !important;
    height: 70px !important;
}


.table-content tr:hover {

    background-color: #8d8282;
}

.pagination {
    display: flex;
    align-items: center;
    margin-right: 20px;
    gap: 15px;
    flex-direction: row;
    justify-content: flex-end;
}

.roundBox {
    width: 25px;
    display: inline-flex;
    height: 25px;
    text-align: center;
    align-items: center;
    background-color: transparent;
    border-radius: 100%;
}

.roundBox p {
    text-align: center;
    align-items: center;
    flex: 1;
    display: inline-flex;
    justify-content: center;
    color: black;
    font-family: 'InterSemiBold';
    font-size: 16px;

}

.roundBox-active {
    width: 25px;
    display: inline-flex;
    height: 25px;
    text-align: center;
    align-items: center;
    background-color: #5f7f63;
    border-radius: 100%;
}

.roundBox-active p {
    text-align: center;
    align-items: center;
    flex: 1;
    display: inline-flex;
    justify-content: center;
    color: white;
    font-family: 'InterSemiBold';
    font-size: 16px;

}

.table-page-topbar-s {
    width: 100%;
    display: flex;
    height: 32px;
    margin-left: 7px;
    margin-right: 7px;
}

.table-page-topbar-search-s {
    border: 0.5px solid #A7A7A7;
    border-radius: 5px;
    height: 100%;
    width: 186px;
    display: flex;
    align-items: center;
    position: relative;
}

.table-page-topbar-search-s input {
    outline: none;
    width: 100%;
    margin: 2px;
    color: black;
    border: none;
    font-size: 16px;
    font-family: 'InterMedium';
}

.table-page-topbar-search-s img {
    width: 25px;
    height: 25px;
    padding-left: 9px;
}

.table-page-topbar-right-s {
    display: flex;
    flex-direction: row-reverse;
    gap: 5px;
    width: 100%;
    height: 100%;
}

.login-main {
    width: 100%;
    height: 100vh;
    /* 100% of viewport height */
    background-color: #639368;
    /* just for visibility */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.login-content {
    position: absolute;
    top: 15%;
    left: 20%;
    right: 20%;
    bottom: 15%;
    background-color: #9ad3bc;
    /* visible color */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.login-left {
    width: 20%;
    background-color: white;
    display: flex;
    height: 100%;
}

.item-detail {
    width: 100%;
    height: 88px;
    background-color: #D8E8FF;
    border-radius: 10px;
    margin-top: 12px;
    text-align: left;
    display: inline-flex;
    flex-direction: column;
    padding-left: 5px;


}

.item-detail p {
    display: inline-flex;
    color: #343434;
    position: absolute;
    font-size: 20px;
    margin-top: 55px;
    font-family: 'InterMedium';
}

.item-detail-top-row {
    display: inline-flex;
    flex-direction: row;
    width: 100%;
    margin-top: -10px;
    text-align: center;
    align-items: center;
    font-size: 27px;
    font-family: 'InterSemiBold';
    color: #343434;
}

.item-detail-top-row p {
    position: relative;
    font-size: 27px;
    font-family: 'InterSemiBold';
    color: #343434;
    margin-left: 4px;
    margin-top: 25px;
}

.item-detail-top-row img {
    width: 40px;
    height: 40px;
}









.rest-content,
.content-box,
.table-box,
.login-main,
.content-col,
.popup,
.content-details,
.content,
.table-scroll {
    min-height: 0;
}

.menu-anchar {
    border: none;
    outline: none;
    text-decoration: none;
}



@font-face {
    font-family: 'InterSemiBold';
    src: url('assets/fonts/Inter-SemiBold.otf');
}

@font-face {
    font-family: 'InterBold';
    /* You can name it anything */
    src: url('assets/fonts/Inter-Bold.otf') format('truetype');
    font-weight: bold;
    font-style: bold;
}


@font-face {
    font-family: 'InterMedium';
    src: url('assets/fonts/Inter-Medium.otf') format('truetype');
}

/* sign in-page */
.signin-body {
    background-color: #639368;
}

.signin-content {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: row;
    flex: 1;
    align-items: center;
    text-align: center;
}



.side-menu-box {
    width: 517px;
    height: 565px;
    background-color: white;
    border-radius: 5px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 23px;
    margin-bottom: 23px;
    margin-left: 30px;

}

.side-menu-box image {
    margin-left: 24px;
    margin-right: 24px;
    margin-top: 44px;
    width: 469px;
    ;
    height: 274px;
    ;
}

.side-menu-box p {
    color: #080D42;
    font-family: 'InterSemiBold';
    font-weight: 32px;
    margin-right: 12px;
    margin-left: 12px;
    margin-top: 121px;
    margin-bottom: 43px;


}

.signin-container {
    height: 100%;
    align-items: left;
    text-align: left;
    width: 100%;
    margin-left: 20px;

}

.signin-container h6 {
    font-family: 'InterSemiBold';
    font-size: 30px;
    color: #FFFFFF;
}

.signin-container hr {
    color: #FFFFFF;
    width: 546px;
    text-align: left;
    align-items: left;

    margin-top: -55px;

}

.signin-input-field {
    margin-top: 10px;
    border: 1px solid #212764;
    border-radius: 22px;
    height: 65px;
    background-color: white;
    width: 551px;
    display: flex;
    align-items: center;
    position: relative;
}

.signin-input-field input {
    outline: none;
    width: 100%;
    margin: 2px;
    color: black;
    border: none;
    font-size: 16px;
    font-family: 'InterMedium';
}

.signin-input-field img {
    width: 30px;
    height: 30px;
    padding-left: 9px;
}

.signin-container label {
    color: white;
    display: inline-block;
    margin-top: 10px;
    font-family: 'InterBold';
    font-weight: 20px;

}

.checkbox {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 10px;
    text-align: center;

}

.checkbox input {
    margin-top: 40px;
    width: 30px;
    height: 30px;



}

.checkbox label {
    margin-top: 40px;
    align-items: center;
    font-family: 'InterBold';
    font-size: 20px;
    color: #FFFFFF;
    display: inline-flex;
    margin-left: 10px;
}

.login-button {
    width: 351px;
    height: 66px;
    background-color: #000000;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 23px;
    color: white;
    margin-top: 40px;

}

.login-button p {
    font-family: 'InterBold';
    font-size: 25px;


}

.logo-img {
    display: flex;
    margin-top: -30px;
    margin-right: 30px;
    flex: 1;
    justify-content: right;
    flex-direction: row;
    width: 100%;
    margin-right: 50px;
    margin-left: -40px;
}


.table-box-attendance {
    width: 100%;
    margin-top: -5px;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* don't exceed */
    background-color: #727cd6;
    overflow: hidden;
}



.table-content-attendance {
    background-color: #F8F8F8;
    width: 100%;
    margin-bottom: 1px;
    overflow-x: hidden;
    overflow-y: auto;
    border-collapse: separate;
    border-spacing: 0;
    /* ← this adds vertical space (8px) between rows */
}

.table-scroll-attendance {
    height: 100%;
    flex: 1;
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
    background: #F8F8F8;
}

.table-content-attendance thead th {
    height: 40px;
    /* Apply height directly on th */
    font-size: 15px;
    border: 1px solid #9B9B9B;
    font-family: 'InterSemiBold';
    position: sticky;
    color: #000;
    background-color: #F8F8F8;
    top: 0;
    z-index: 2;
    vertical-align: middle;
}




.table-content-attendance tbody {
    /* fill remaining space */
    background-color: white;
}

.table-content-attendance td {
    color: #FF0000;
    border: 1px solid #9B9B9B;
    background-color: rgba(99, 147, 104, 0.04);
    font-family: 'InterSemiBold';
    font-size: 15px;
}



.table-row-attendance {

    height: 34px;
    border-bottom: 1px solid rgba(35, 50, 85, 0.1);
}


.table-content-attendance tr:hover {

    background-color: #8d8282;
}

/* support-page */
.support-page-content-container {

    display: flex;
    flex: 1;
    flex-direction: row;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.ticket-fields {
    display: flex;
    flex: 1;
    margin-right: 15px;
    text-align: left;
    flex-direction: column;
}

.ticket-fields label {
    color: #000;
    font-size: 20px;
    font-family: 'InterSemiBold';
    margin-bottom: 14px;
}

.ticket-fields input {
    outline: none;
    border-radius: 8px;
    border: 0.5px solid #555454;
    height: 57px;
    color: #000;
    font-size: 18px;
    font-family: 'InterSemiBold';
    padding: 10px;
    margin-bottom: 15px;
}

.ticket-fields textarea {
    color: black;
    font-size: 18px;
    font-family: 'InterSemiBold';
    height: 151px;
    border: 0.5px solid #555454;
    border-radius: 8px;
    outline: none;
    padding: 10px;
    margin-bottom: 32px;
}

.ticket-general-info {
    display: flex;
    flex: 0.7;
    text-align: left;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    padding-top: 11px;
    gap: 0px;
    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: 34px;
}

.ticket-general-info label {
    font-family: 'InterMedium';
    font-size: 20px;
    color: #000;
    width: 100%;
    text-align: center;
    display: block;
    margin-top: 10px;
}

.ticket-general-info hr {
    color: #000;
    border: none;
    height: 1px;
    margin-top: 10px;
    background-color: #000;

}

.ticket-general-info p {
    font-size: 14px;
    color: black;
    font-family: 'InterMedium';
}


.general-bottom {
    display: flex;
    flex: 1;
    flex-direction: column-reverse;
}


.setting-card-content {
    background-color: white;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row;

}

.setting-card-view {
    display: flex;
    flex-direction: column;
}

.setting-card-view img {
    width: 350px;
    height: 221px;
    padding-bottom: 11px;
    padding-left: 31px;
}

.setting-box {
    width: 230px;
    height: 230px;
    background-color: rgba(99, 147, 104, 0.2);
    border-radius: 20px;
    margin-top: 10px;



}

.setting-box img {
    height: 73px;
    width: 120px;
    padding-top: 47px;
    padding-bottom: 109px;
    padding-left: 55px;
    padding-right: 55px;
}

.setting-box p {
    margin-top: -80px;
    margin-bottom: 24px;
    color: #000;
    font-family: 'InterSemiBold';
    font-size: 18px;
}

.Record {
    width: 230px;
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 456px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 15px;

}

.Record label {
    font-size: 20px;
    font-family: 'Intermedium';
    align-items: center;
    text-align: center;
    margin-top: 11px;
}

.Record hr {
    width: 211px;
    font-weight: 1px;
    align-items: center;

}

.switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 15px;
}

.switch input {
    opacity: 0;
    /* Hides the default checkbox */
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    border: 1px solid rgba(241, 115, 103, 0.65);
    bottom: 0;
    background-color: #FAFAFA;
    /* Default background color (off state) */
    transition: .4s;
    /* Smooth transition for state changes */
}

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: -1px;
    background-color: #F17367;
    /* Color of the movable thumb */
    transition: .4s;
}

input:checked+.slider {
    background-color: #FAFAFA;
    /* Background color when checked (on state) */
    border: 1px solid #639368;
}

input:checked+.slider:before {
    transform: translateX(18px);
    /* Moves the thumb when checked */
    background-color: #639368;
}

/* Optional: Rounded styles for the slider and thumb */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}


.togal-row-content {
    display: flex;
    flex-direction: row;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    justify-content: space-between;
    align-items: center;
}

.togal-row-content p {
    color: #000;
    font-size: 14px;
    font-family: 'InterMedium';
}




.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    align-items: center;
    left: 0;
    right: 0;
    background: rgba(217, 217, 217, 0.5);
    display: flex;
    /* enable flex */
    justify-content: center;
    /* center horizontally */
    align-items: center;
    transition: opacity 200ms;
    visibility: hidden;
    z-index: 10000;
    opacity: 0;
}

.overlay:target {
    visibility: visible;
    opacity: 1;
}



.popup {
    background: #fff;
    border-radius: 5px;
}

.content-popup {

    width: 100%;
    flex: 1;
    margin-inline: 11px;
    width: calc(100% - 22px);
    background-color: white;
    display: flex;
    flex-direction: row;
    height: auto;
    margin-top: 30px;

}

.class_promotion {
    display: flex;
    flex: 1;
    height: 100%;
    flex-direction: column;
    margin-left: 19px;
    justify-content: space-evenly;
    margin-right: 19px;
}

.class_promotion p {
    font-family: 'intersemibold';
    font-size: 18px;
}

.class_promotion select {
    height: 57px;
    text-align: center;
    border: 0.5px solid black;
    font-family: 'intersemibold';
    font-size: 16px;
    border-radius: 8px;
}

.start_from_bottom {
    display: flex;
    flex: 1;
    height: 100%;
    flex-direction: column-reverse;
    margin-top: 53px;
}

.drop {
    align-items: center;
    flex: 1;
    text-align: center;
    flex-direction: column;
    margin-left: 19px;
    justify-content: space-evenly;
    margin-right: 19px;

}

.drop img {
    width: 60px;
    height: 60px;
}

.drop p {
    font-size: 25px;
    font-family: 'interbold';
    color: #313131;
}

.passout {
    align-items: center;
    flex: 1;
    text-align: center;
    flex-direction: column;
    margin-left: 19px;
    justify-content: space-evenly;
    margin-right: 19px;
}

.passout img {
    width: 60px;
    height: 60px;
}

.passout p {
    font-size: 25px;
    font-family: 'interbold';
    color: #313131;
}

.student-record input {
    height: 57px;
    width: 512px;
    border-radius: 8px;
    border: 0.5px solid#555454;
    color: #C7C7C7;
    padding-left: 10px;

}

.student-record p {
    font-family: 'intersemibold';
    font-size: 20px;

}

.student-record img {
    margin-top: 15px;
    margin-bottom: 15px;
}

.document-upload p {
    font-size: 20px;
    font-family: 'intersemibold';


}

.document-upload input {
    height: 57px;
    width: 512px;
    color: #000000;
}

.document-view {
    display: flex;
    flex: 1;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    background-color: white;
}

.document-view img {
    margin-inline: 14px;
    width: calc(100% - 28px);

    margin-top: 9px;
    margin-bottom: 9px;

}

.fee-invoice {
    display: flex;
    flex-direction: row;
    flex: 2;
    align-items: center;
    justify-content: space-evenly;
    margin-left: 10px;
    margin-bottom: 5px;
    margin-top: 16px;
    padding-right: 10px;

}


.fee-invoice label {
    color: #000000;
    font-family: 'intersemibold';
    font-size: 18px;
    margin-bottom: 10px;

}

.fee-invoice input {
    border-radius: 8px;
    border: 0.5px solid#555454;
    padding-left: 10px;
    height: 57px;
    color: #C7C7C7;
    outline: none;
    font-size: 16px;
    font-family: 'intersamibold';
}

.fee-invoice-content {
    display: flex;
    width: 100%;
    flex: 1;
    flex-direction: column
}

.select-opt {
    height: 57px;
    border-radius: 8px;
    border: 0.5px solid#555454;
    padding-left: 10px;
    height: 57px;
    color: black;
    outline: none;
    padding-right: 10px;
    font-family: 'intersemibold';
    font-size: 16px;
}

.select-opt option {
    color: #000;
}
/* 
.popup-exam-content {

    display: flex;
    flex: 1;
    flex-direction: row;
    gap: 20px;
    margin-left: 13px;
    margin-right: 13px;
    margin-top: 16px;
}

.popup-exam-row {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

.popup-exam-row p{

    margin: 0px;
    color: black;
    font-size: 18px;
    font-family: 'InterSemiBold';


}

.popup-exam-row input{
    color: black;
    outline: none;
    height: 57px;
    border: 0.5px solid #555454;
    border-radius: 8px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
    font-family: 'InterSemiBold';
    margin-top: 14px;
}

.popup-exam-row select{
    color: black;
    outline: none;
    text-align: center;
    height: 57px;
    border: 0.5px solid #555454;
    border-radius: 8px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
    font-family: 'InterSemiBold';
    margin-top: 14px;
}

.tworowsinputer {
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex: 1;
    width: auto;
}

.tworowsinputer input{
    color: black;
    outline: none;
    height: 57px;
    flex: 1;
    border: 0.5px solid #555454;
    border-radius: 8px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
    font-family: 'InterSemiBold';
    margin-top: 14px;

} */

.popup-exam-content{
  display:flex;
  gap:20px;
 margin-left: 13px;
    margin-right: 13px;
    margin-top: 16px;
}

.popup-exam-row{
  display:flex;
  flex-direction:column;
  flex:1;   /* equal columns + allow shrink */
  min-width:0;  /* important to allow shrinking */
  width:100%;
}

/* Labels */
.popup-exam-row p{
  margin:0;
  color:#000;
  font-size:18px;
  font-family:'InterSemiBold';
}

/* Single controls (title/type/class/date) */
.popup-exam-row input,
.popup-exam-row select{
  width:100%;                 /* ensure full column width */
  height:57px;
  margin-top:14px;
  padding:0 10px;
  font-size:16px;
  font-family:'InterSemiBold';
  color:#000;
  outline:none;
  border:0.5px solid #555454;
  border-radius:8px;
  text-align:center;          /* your style */
}

/* Normalize date input width/padding across browsers */
.popup-exam-row input[type="date"]{
  -webkit-appearance:none;
  appearance:none;
  padding-right:12px;         /* space for calendar icon */
}

/* TWO INPUTS SIDE-BY-SIDE (Obtain / Total) */
.tworowsinputer{
  display:flex;
  gap:5px;
  width:100%;
  margin-top:14px;            /* move margin here (not on inner inputs) */
  /* do NOT set flex:1 here; let it size to the column */
}

.tworowsinputer input,
.tworowsinputer select,
.tworowsinputer textarea{
  flex:1 1 0;                 /* equal widths */
  min-width:0;                /* allow shrinking */
  height:57px;
  margin-top:0;               /* already on container */
  padding:0 10px;
  font-size:16px;
  font-family:'InterSemiBold';
  color:#000;
  outline:none;
  border:0.5px solid #555454;
  border-radius:8px;
  text-align:center;
}
.item-left-lable select{ width: 100%;
    flex: 1;
    background-color: none;
    border: 0.5px solid #555454;
    outline: none;
    border-radius: 4px;
    height: 34px;
    color: #000;
    font-size: 16px;
    font-family: 'InterSemiBold';
    padding-left: 10px;
    padding-right: 10px;
    align-items: center;
    padding-top: 2px;
}

.faq_list {
    overflow: auto;
    gap: 10px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.faq_item {
    border: 0.5px solid #555454;
    border-radius: 6px;
}

.faq_title {
    
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    align-items: center;
    display: flex;
    cursor: pointer;
    justify-content: space-between;
    flex-direction: row;
}

.faq_title p{
    color: black;
    font-size: 16px;
    margin-bottom: 19px;
    font-family: 'InterSemiBold';
    text-align: left;
}

.faq_title img{
    margin-top: 16px;
    margin-bottom: 16px;
    width: 24px;
     transition: transform 0.3s ease;
    height: 24px;
}

.faq_answer {
    color: black;
    font-size: 15px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: 'InterMedium';
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 13px;
    display: none;
    text-align: left;
    animation: fadeIn 0.3s ease;
}


.faq_item.faqactive .faq_title img {
    transform: rotate(180deg);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.software-info {
    padding: 10px;
    height: 90px;
    background-color: rgba(217, 217, 217, 0.4);
    align-content: center;
}

.software-info p{

    font-size: 16px;
    font-family: 'InterSemiBold';
    color: #000;
    margin: 0px;
    margin-bottom: 3px;
}

.update-detail {
    display: block;
    margin: 0px;
    text-align: left;
    gap: 0px;
}

.update-detail p{
    color: #000;
    font-size: 18px;
    font-family: 'InterBold';
    margin: 0px;
}

.update-detail li{
    color: #000;
    font-size: 16px;
    font-family: 'InterMedium';
    margin: 0px;
    margin-bottom: 15px;
}

.video_list {
    overflow: hidden;
    overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 items per row */
  gap: 15px; /* space between items */
}

.item_video {
  margin: 0;
}

.thumail {
    width: 226px;
    height: 126px;
}

.play_icon {
    width: 35px;
    height: 35px;
    margin-right: 100px;
    margin-left: 100px;
    margin-top: -100px;
    margin-bottom: 70px;
}

.item_video p{
    color: black;
    font-size: 13px;
    margin-top: -10px;
    font-family: 'InterBold';
}










.table-box {
    position: relative;
}

.table-loading {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.table-loading .spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid #ccc;
    border-top-color: #639368;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.submit-progress {
    margin-top: 8px;
    margin-bottom: 8px;
    text-align: center;
    font-size: 12px;
    color: #555;
}

.submit-progress .progress-bar {
    width: 100%;
    max-width: 300px;
    height: 6px;
    background: #eee;
    border-radius: 4px;
    margin: 0 auto 4px;
    overflow: hidden;
}

.submit-progress .progress-bar-inner {
    height: 100%;
    width: 40%;
    background: #639368;
    border-radius: 4px;
    animation: progressAnim 1s linear infinite;
}

@keyframes progressAnim {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}





.npopup-exam-content{
  display:flex;
  gap:20px;
 margin-left: 13px;
    margin-right: 13px;
    margin-top: 16px;
}

.npopup-exam-row{
  display:flex;
  flex-direction:column;
  flex:1;   /* equal columns + allow shrink */
  min-width:0;  /* important to allow shrinking */
  width:100%;
}

/* Labels */
.npopup-exam-row p{
  margin:0;
  color:#000;
  font-size:16px;
  font-family:'InterSemiBold';
}

/* Single controls (title/type/class/date) */
.npopup-exam-row input,
.npopup-exam-row select{
  width:100%;                 /* ensure full column width */
  height:45px;
  margin-top:10px;
  padding:0 8px;
  font-size:14px;
  font-family:'InterSemiBold';
  color:#000;
  outline:none;
  border:0.5px solid #555454;
  border-radius:8px;
  text-align:center;          /* your style */
}

/* Normalize date input width/padding across browsers */
.npopup-exam-row input[type="date"]{
  -webkit-appearance:none;
  appearance:none;
  padding-right:12px;         /* space for calendar icon */
}


/* Exams Popup INPUTS SIDE-BY-SIDE (Obtain / Total) */
.examrowsinputer{
  display:flex;
  gap:4px;
  width:100%;
  margin-top:10px;            /* move margin here (not on inner inputs) */
  /* do NOT set flex:1 here; let it size to the column */
}

.examrowsinputer input,
.examrowsinputer select,
.examrowsinputer textarea{
  flex:1 1 0;                 /* equal widths */
  min-width:0;                /* allow shrinking */
  height:45px;
  margin-top:0;               /* already on container */
  padding:0 8px;
  font-size:14px;
  font-family:'InterSemiBold';
  color:#000;
  outline:none;
  border:0.5px solid #555454;
  border-radius:8px;
  text-align:center;
}



.nav-bell-unread {
    filter: drop-shadow(0 0 6px rgba(99, 147, 104, 0.6));
}

.notification-dropdown {
    position: absolute;
    top: 92px;
    right: 120px;
    width: 320px;
    background: #fff;
    border: 0.5px solid #A7A7A7;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 10002;
}

.notification-dropdown.show {
    display: flex;
}

.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 0.5px solid #E0E0E0;
}

.notification-header p {
    font-family: 'InterBold';
    font-size: 15px;
    color: #111;
}

.notification-header span {
    background: #639368;
    color: #fff;
    font-family: 'InterBold';
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
}

.notification-list {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
}

.notification-item {
    padding: 8px 10px;
    border-radius: 6px;
    border: 0.5px solid transparent;
    background: #FAFAFA;
    cursor: pointer;
}

.notification-item strong {
    font-family: 'InterSemiBold';
    font-size: 14px;
    color: #111;
}

.notification-item p {
    font-family: 'InterMedium';
    font-size: 12px;
    color: #555;
    margin-top: 4px;
}

.notification-item.notification-unread {
    background: #F1F7F2;
    border-color: #CFE3D1;
}

.notification-meta {
    font-family: 'InterMedium';
    font-size: 11px;
    color: #888;
    margin-top: 6px;
}

.notification-empty {
    font-family: 'InterMedium';
    font-size: 12px;
    color: #666;
    padding: 10px;
    text-align: center;
}