body{
    margin:0;
    padding:0;
}

.cys-container{
    padding: 6em 0;
}

.cys-header .title h2{
    font-size: 46px;
    font-weight: 900;
}
.cys-header .page-name{
    font-size: 30px;
    font-weight: 900;
}
.cys-header .cys-header-title-container {
    padding: 1em 0 2em;
}
@media (max-width: 1024px) {
    .cys-container{
        padding: 1em 15px;
    }
    .cys-header .title h2{
        font-size: 36px !important;
    }
}

.class-list-header{
    margin: 2em 0;
}
.check_msg{
    font-size:13px; color: rgb(255, 0, 0);background-color: rgba(249, 183, 178, .2); border-radius: 10px; padding: 15px;
}
.check_msg.success{
    font-size:13px; color: #155724 !important;background-color: #d4edda !important; border-radius: 10px; padding: 15px;
}


.class-is-sign{
    font-size:13px; font-weight: bold; color: #155724;background-color: #d4edda; border-radius: 5px; padding: 5px 10px;
}
.class-is-sign.leave{
    font-size:13px; font-weight: bold; color: #FF0000 !important;background-color: #FFE0E0 !important; border-radius: 5px; padding: 5px 10px;
}

@media (max-width:1024px) {
    table thead {
        display: none;
    }
    table tr {
        display: flex;
        flex-direction: column;
        border: 3px solid white;
        padding: 1px;
    }
    table td[data-label] {
        display: flex;
    }
    table td[data-label]::before {
        content: attr(data-label);
        font-weight: 900;
        width: 80px;
    }
    table td[data-label]::after {
        margin-left: 10px;
    }
}