/*datnt87*/
td.exnote-column {
    white-space: pre-wrap; /* Hỗ trợ xuống dòng tự nhiên và giữ nguyên khoảng trắng */
    word-wrap: break-word; /* Đảm bảo từ dài cũng bị ngắt nếu cần */
    max-width: 400px; /* Giới hạn chiều rộng để text xuống dòng */
}

.e360-wayin-seat {
    min-width: 30px;
    background-color: #ccffcc;
}

.e360-fullname {
    font-size: 13px;
}

.e360-room-table {
    margin-top: 28px;
}

.e360-room-table td {
    border: 1px solid black;
    padding: 2px;
    text-align: left;
    height: 40px;
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.e360-student-seat {
    background-image: url("Images/student-seat-1.png");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.e360-no-student-seat {
    background-image: url("Images/no-student-seat.png");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.e360-road {
    background-color: azure;
}

.e360-space {
    background-color: cadetblue;
}

.e360-not-avaiable {
    background-color: lightslategrey;
}

.e360-checkin {
    width: 140px;
    background-color: blue;
}

.e360-not-checkin {
    width: 140px;
    background-color: #ff6a00;
}

.e360-writing-board {
    background-color: coral;
}

.e360-teacher-desk {
    background-color: aquamarine;
}

.e360-doorway {
    background-color: #f2ceef;
}

.e360-extra-seat {
    width: 140px;
    color: red !important;
    font-weight: bold;
}

.e360-room-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.e360-room-table tr:hover {
    background-color: #ddd;
}

.imgAvatar {
    width: 95px;
}
/* AdminLTE CUSTOM STYLE*/
.table-bordered {
    border: 1px solid #c0c0c0 !important;
}

    .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {
        border-bottom-width: 1px !important;
    }

    .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
        border: 1px solid #c0c0c0 !important;
    }

.table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td {
    border-top: 1px solid #c0c0c0 !important;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    /*border-top: 1px solid #c0c0c0 !important;*/
    border: 1px solid #c0c0c0 !important;
}

.table > thead > tr > th {
    border: 1px solid #c0c0c0 !important;
}

.vertical-align {
    vertical-align: middle !important;
}

/* CUSTOM STYLE */
.field-required {
    font-weight: bold;
}

    .field-required:after {
        content: "*";
        font-weight: bold;
        color: red;
    }

.error {
    color: red;
    /*font-weight: bold;*/
}

.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: .25rem !important;
}

.m-2 {
    margin: .5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.mx-0 {
    margin-left: 0 !immortant;
    margin-right: 0 !immortant;
}

.my-0 {
    margin-top: 0 !immortant;
    margin-bottom: 0 !immortant;
}

.mt-1 {
    margin-top: .25rem !important;
}

.mr-1 {
    margin-right: .25rem !important;
}

.mb-1 {
    margin-bottom: .25rem !important;
}

.ml-1 {
    margin-left: .25rem !important;
}

.mx-1 {
    margin-left: .25rem !immortant;
    margin-right: .25rem !immortant;
}

.my-1 {
    margin-top: .25rem !immortant;
    margin-bottom: .25rem !immortant;
}

.mt-2 {
    margin-top: .5rem !important;
}

.mr-2 {
    margin-right: .5rem !important;
}

.mb-2 {
    margin-bottom: .5rem !important;
}

.ml-2 {
    margin-left: .5rem !important;
}

.mx-2 {
    margin-right: .5rem !immortant;
    margin-left: .5rem !immortant;
}

.my-2 {
    margin-top: .5rem !immortant;
    margin-bottom: .5rem !immortant;
}

`

.mt-3 {
    margin-top: 1rem !important;
}

.mr-3 {
    margin-right: 1rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.ml-3 {
    margin-left: 1rem !important;
}

.mx-3 {
    margin-right: 1rem !immortant;
    margin-left: 1rem !immortant;
}

.my-3 {
    margin-bottom: 1rem !immortant;
    margin-top: 1rem !immortant;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mr-4 {
    margin-right: 1.5rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.ml-4 {
    margin-left: 1.5rem !important;
}

.mx-4 {
    margin-right: 1.5rem !immortant;
    margin-left: 1.5rem !immortant;
}

.my-4 {
    margin-top: 1.5rem !immortant;
    margin-bottom: 1.5rem !immortant;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mr-5 {
    margin-right: 3rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.ml-5 {
    margin-left: 3rem !important;
}

.mx-5 {
    margin-right: 3rem !immortant;
    margin-left: 3rem !immortant;
}

.my-5 {
    margin-top: 3rem !immortant;
    margin-bottom: 3rem !immortant;
}

.mt-auto {
    margin-top: auto !important;
}

.mr-auto {
    margin-right: auto !important;
}

.mb-auto {
    margin-bottom: auto !important;
}

.ml-auto {
    margin-left: auto !important;
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.my-auto {
    margin-bottom: auto !important;
    margin-top: auto !important;
}

.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: .25rem !important;
}

.p-2 {
    padding: .5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.pt-1 {
    padding-top: .25rem !important;
}

.pr-1 {
    padding-right: .25rem !important;
}

.pb-1 {
    padding-bottom: .25rem !important;
}

.pl-1 {
    padding-left: .25rem !important;
}

.px-1 {
    padding-left: .25rem !important;
    padding-right: .25rem !important;
}

.py-1 {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}

.pt-2 {
    padding-top: .5rem !important;
}

.pr-2 {
    padding-right: .5rem !important;
}

.pb-2 {
    padding-bottom: .5rem !important;
}

.pl-2 {
    padding-left: .5rem !important;
}

.px-2 {
    padding-right: .5rem !important;
    padding-left: .5rem !important;
}

.py-2 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pr-3 {
    padding-right: 1rem !important;
}

.pb-3 {
    padding-bottom: 1rem !important;
}

.pl-3 {
    padding-left: 1rem !important;
}

.py-3 {
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
}

.px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pr-4 {
    padding-right: 1.5rem !important;
}

.pb-4 {
    padding-bottom: 1.5rem !important;
}

.pl-4 {
    padding-left: 1.5rem !important;
}

.px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}

.pr-5 {
    padding-right: 3rem !important;
}

.pb-5 {
    padding-bottom: 3rem !important;
}

.pl-5 {
    padding-left: 3rem !important;
}

.px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.mob-container {
    color: #fff;
    width: 100%;
    text-align: center;
}