@font-face {
        font-family: 'promptlight';
        src: url('./Font-Prompt/prompt-light-webfont.woff2') format('woff2'), url('./Font-Prompt/prompt-light-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'promptbold';
        src: url('./Font-Prompt/prompt-bold-webfont.woff2') format('woff2'), url('./Font-Prompt/prompt-bold-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    /* Navbar */
    .form-logo {
        height: 10vh;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .logoschool { 
        max-height: 100%; 
        max-width: 85%; 
    }

    .profile {
        width: 50px;
        height: 50px;
        border: 1px solid #cccccc;
        border-radius: 50%;
        cursor: pointer;
    }

    .form-menu {
        margin-top: 15px;
        padding: 0 20px;
    }

    .fnz-option {
        font-size: 16px;
    }

    .navbar-menu {
        width: 100%;
        font-size: 18px;
        font-weight: bold;
        text-align: left;
        color: #000000;
        padding: 13px 0;
        background: 0 0;
        border: 0;
    }

    .navbar-menu.active {
        color: #000000;
        background-color: rgba(250, 175, 28, 0.1);
    }

    .num-student {
        width: 160px;
        height: 50px;
        color: #ffffff;
        background-color: #e92229;
        border-radius: 5px;
        font-size: 20px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .num-teacher {
        width: 160px;
        height: 50px;
        color: #ffffff;
        background-color: #0f0f42;
        border-radius: 5px;
        font-size: 20px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .color-class {
        width: 80px;
        height: 25px;
        border-radius: 5px;
    }

    .tap-color {
        width: 100px;
        height: 25px;
        border: 0;
        border-radius: 2px;
    }

    #list-student {
        max-height: calc(100vh - 200px);
        overflow-y: auto; 
        padding: 10px;
    }

    #list-student-print {
        max-height: calc(95vh - 200px);
        overflow-y: auto; 
        padding: 10px;
    }

    #list-student-export {
        max-height: calc(95vh - 200px);
        overflow-y: auto; 
        padding: 10px;
    }

    #list-teacher {
        max-height: calc(100vh - 200px);
        overflow-y: auto; 
        padding: 10px;
    }

    .list-card {
        width: 100%;
        height: 80px;
        border-top: 1px solid #ced4da;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .list-card:hover {
        background-color: rgba(15, 15, 66, 0.1);
    }

    .student-img {
        width: 55px;
        height: 55px;
        border-radius: 50%;
        border: 1px solid #dddddd;
        margin-right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .student-full-img {
        width: 200px;
        height: 200px;
        border-radius: 10px;
    }

    .btn-finance {
        width: 30px;
        height: 35px;
    }

    .btn-course {
        width: 30px;
        height: 30px;
    }

    .btn-information {
        width: 30px;
        height: 30px;
    }

    .teacher-icon {
        width: 30px;
        height: 30px;
    }

    .btn-checkin {
        width: 30px;
        height: 30px;
    }

    .attendance-date {
        width: 140px;
        font-family: "promptlight",monospace;
        font-size: 16px;
        border: none;
        outline: none;
        border-radius: 5px;
        margin-left: 10px;
        height: 40px;
    }

    .attendance-month {
        width: 140px;
        font-family: "promptlight",monospace;
        font-size: 16px;
        border: none;
        outline: none;
        border-radius: 5px;
        margin-left: 10px;
        height: 40px;
        cursor: pointer;
    }

    .month-option {
        font-family: "promptlight",monospace;
        font-size: 16px;
        border: none;
    }

    .btn-history {
        padding: 5px 20px;
        font-size: 18px;
        color: #000000;
        border-radius: 10px;
        border: 1px solid #0f0f42;
        text-decoration: none;
    } 

    .btn-history:hover {
        background-color: #3f3f67;
        color: #ffffff;
    }
    
    .btn-studentcard {
        padding: 5px 20px;
        font-size: 18px;
        color: #000000;
        border-radius: 10px;
        border: 1px solid #f9ae1c;
        text-decoration: none;
    } 

    .btn-studentcard:hover {
        background-color: #f9ae1c;
        color: #ffffff;
    }

    .btn-classschedule {
        padding: 5px 20px;
        font-size: 18px;
        color: #000000;
        border-radius: 10px;
        border: 1px solid #ea2429;
        text-decoration: none;
        cursor: pointer;
    } 

    .btn-classschedule:hover {
        background-color: #f7575b;
        color: #ffffff;
    }

    .btn-deletestudent {
        padding: 5px 20px;
        font-size: 18px;
        color: #ffffff;
        border-radius: 10px;
        background-color: #ea2429;
        text-decoration: none;
        cursor: pointer;
    } 

    .btn-deletestudent:hover {
        background-color: #f7575b;
        color: #000000;
    }

    .class-form {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        font-weight: bold;
        padding: 0.5em;
        border: 1px solid #000000;
        border-radius: 50%;
        aspect-ratio: 1 / 1;
        white-space: nowrap; 
    }

    .navbar-information {
        width: 180px;
        font-size: 18px;
        font-weight: bold;
        color: #000000;
        background-color: #fdf6e7;
        border: none;
        border-radius: .25rem;
        padding: .7rem 1rem;
        text-align: center;
    }

    .navbar-information.active {
        background-color: #0196cc;
        color: #ffffff;
    }

    .btn-green {
        color: #000000;
        background-color: #75bf44;
        border: none;
        border-radius: .25rem;
        padding: .5rem 1rem;
        text-align: center;
    }

    .btn-blue {
        color: #ffffff;
        background-color: #0196cc;
        border: none;
        border-radius: .25rem;
        padding: .5rem 1rem;
        text-align: center;
    }

    .btn-dark-grey {
        color: #ffffff;
        background-color: #70767d;
        border: none;
        border-radius: .25rem;
        padding: .5rem 1rem;
        text-align: center;
    }

    .btn-grey {
        color: #000000;
        background-color: #eeeeee;
        border: none;
        border-radius: .25rem;
        padding: .5rem 1rem;
        text-align: center;
    }

    .btn-yellow {
        width: 100px;
        color: #ffffff;
        background-color: #f9ae1c;
        border: none;
        border-radius: .25rem;
        padding: .5rem 0;
        text-align: center;
    }

    .btn-red {
        color: #ffffff;
        background-color: #ea2429;
        border: none;
        border-radius: .25rem;
        padding: .5rem 20px;
        text-align: center;
    }

    .btn-subjectinfo {
        width: 150px;
        color: #ffffff;
        background-color: #0196cc;
        border: none;
        border-radius: .25rem;
        padding: .5rem 1rem;
        text-align: center;
    }

    .btn-subjectplan {
        width: 180px;
        color: #000000;
        background-color: #75bf44;
        border: none;
        border-radius: .25rem;
        padding: .5rem 0;
        text-align: center;
    }

    .parent-form {
        border: 1px dashed #666666;
        border-radius: 20px;
        padding: 1rem;
    }

    .plus-action {
        width: 35px;
        height: 35px;
        font-size: 20px;
        background-color: #fff5cc;
        border: 1px solid #faaf1c;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    
    .checkin-confirm {
        background-image: linear-gradient(to bottom right, #8ed894 9.16%, #83d389 43.89%, #83d38a 64.72%);
        border-radius: 8px;
        border-style: none;
        box-sizing: border-box;
        color: #FFFFFF;
        cursor: pointer;
        flex-shrink: 0;
        font-family: "promptbold","Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
        font-size: 20px;
        font-weight: 500;
        height: 4rem;
        padding: 0 2.1rem;
        text-align: center;
        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
        transition: all .5s;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        display: flex;
        align-items: center;
    }

    .checkin-confirm:hover {
        box-shadow: rgb(153, 235, 160) 0 1px 30px;
        transition-duration: .1s;
    }

    @media (min-width: 768px) {
        .checkin-confirm {
            padding: 0 2.1rem;
        }
    }

    .checkout-confirm {
        background-image: linear-gradient(to bottom right, #ffa1a1 9.16%, #ff9898 43.89%, #FF8383 64.72%);
        border-radius: 8px;
        border-style: none;
        box-sizing: border-box;
        color: #FFFFFF;
        cursor: pointer;
        flex-shrink: 0;
        font-family: "promptbold","Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
        font-size: 20px;
        font-weight: 500;
        height: 4rem;
        padding: 0 1.6rem;
        text-align: center;
        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
        transition: all .5s;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        display: flex;
        align-items: center;
    }

    .checkout-confirm:hover {
        box-shadow: rgb(255, 154, 154) 0 1px 30px;
        transition-duration: .1s;
    }

    @media (min-width: 768px) {
        .checkout-confirm {
            padding: 0 1.6rem;
        }
    }

    .checkin-disabled {
        background-color: #eeeeee;
        border-radius: 8px;
        border-style: none;
        box-sizing: border-box;
        color: #FFFFFF;
        cursor: no-drop;
        flex-shrink: 0;
        font-family: "promptbold","Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
        font-size: 20px;
        font-weight: 500;
        height: 4rem;
        padding: 0 2.1rem;
        text-align: center;
        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
        transition: all .5s;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        display: flex;
        align-items: center;
    }

    .checkout-disabled {
        background-color: #eeeeee;
        border-radius: 8px;
        border-style: none;
        box-sizing: border-box;
        color: #FFFFFF;
        cursor: no-drop;
        flex-shrink: 0;
        font-family: "promptbold","Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
        font-size: 20px;
        font-weight: 500;
        height: 4rem;
        padding: 0 1.6rem;
        text-align: center;
        transition: all .5s;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        display: flex;
        align-items: center;
    }

    .btn-addcolor {
        width: 30px;
        height: 30px;
        background-color: #118B50;
        color: #ffffff;
        border-radius: 50%;
        border: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .custom-select-container {
        position: relative;
        width: 100px;
    }

    .selected {
        width: 100%;
        height: 25px;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer;
    }
     
    /* .options {
        list-style: none;
        padding: 5px;
        margin: 0;
        position: absolute;
        width: 150px;
        border: 1px solid #ccc;
        z-index: 10;
        background-color: #fff;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }
    
    .options li {
        width: 50px;
        height: 25px;
        cursor: pointer;
        opacity: 0.8;
        transition: opacity 0.3s;
        border-radius: 5px;
    } */
     .options {
        list-style: none;
        padding: 5px;
        margin: 0;
        position: absolute;
        width: max-content;
        max-width: 250px;
        border: 1px solid #ccc;
        z-index: 10;
        background-color: #fff;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 8px;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .options li {
        list-style: none;
        padding: 0;
        border-radius: 5px;
        cursor: pointer;
    }

    .option-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        border-radius: 5px;
        background-color: #f9f9f9;
        transition: background-color 0.3s;
    }

    .color-box {
        width: 40px;
        height: 25px;
        border-radius: 4px;
        border: 1px solid #ccc;
        flex-shrink: 0;
    }

    .color-label {
        flex-grow: 1;
        font-size: 16px;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .remove-icon {
        color: #dc3545;
        font-size: 16px;
        cursor: pointer;
    }

    .custom-select-container.open .options {
        display: block;
    }

    .tooltip-inner {
        font-size: 16px; 
        padding: 8px;
        max-width: 200px;
        text-align: center; 
    }

    .text-green {
        color: #75bf44;
    }

    .text-blue {
        color: #0196cc;
    }

    .text-yellow {
        color: #f9ae1c;
    }

    .text-red {
        color: #ea2429;
    }

    .tbodyHeight {
        max-height: clamp(5em, 110vh, 700px);
        margin-top: 10px;
        overflow: auto;
    }

    .summary-row {
        position: sticky;
        bottom: 0;
        background-color: #ffffff;
        z-index: 1; 
        box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
    }

    .student-row {
        display: flex;
        align-items: center;
    }
    
    .teacher-row {
        display: flex;
        align-items: center;
    }

    .addScore, .removeScore, .addScoreEdit, .removeScoreEdit {
        width: 40px;
        height: 100%;
        background-color: #fff5cc;
        border: 1px solid #faaf1c;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .day-condition {
        width: 50px;
        height: 50px;
        font-size: 20px;
        font-weight: bold;
        border: 1px solid #000000;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 8px;
        margin-right: 8px;
        cursor: pointer;
    }

    .day-condition:hover {
        background-color: #FCE9E9;
        border: 1px solid #ea2429;
    }

     .day-condition.selected {
        background-color: #ea2429;
        color: #fff;
        border: 1px solid #ea2429;
    }

    .day-condition.selected:hover {
        background-color: #d81f1f;
        border: 1px solid #d81f1f;
    }

    .pagination {
        position: fixed;  
        bottom: 5%;     
        left: 50%;             
        display: flex;
        justify-content: center;
        z-index: 2;           
    }

    #pagination button {
        border: 1px solid #eeeeee;
        border-radius: 6px;
        width: 40px;
        height: 40px;
        margin: 0 4px;
        font-size: 15px;
        cursor: pointer;
    }

    #pagination button:hover {
        background-color: #fef7e8;
    }

    #pagination button.active {
        background-color: #ffc107;
        color: black;
        font-weight: bold;
    }

    .class-circle {
        width: 50px;        
        height: 50px;
        border: 1px solid #333;   
        border-radius: 50%;      
        display: flex;
        align-items: center;     
        justify-content: center;  
        font-weight: bold;
        background-color: #fff;   
        color: #333;             
        font-size: 16px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
        margin-right: 20px;
    }

    #max i {
        margin-right: -5px;
    }

    #min i {
        margin-right: -5px;
    }

.pointer {
    cursor: pointer;
}