body,
div,
p {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
}

body {
    background-color: #030e1c;
}

p {
    color: #ffffff;
}

span {
    color: #ffffff;
}

.login-container {
    width: 400rem;
    margin: 300rem auto 0 auto;
}

.login-container .label {
    color: #ffffff;
    font-size: 36rem;
    text-align: center;
    align-items: center;
}

.login-container .msg {
    color: #d61926;
    font-size: 28rem;
    margin-top: 20rem;
    margin-bottom: 20rem;
    height: 28rem;
}

.login-container input {
    font-size: 28rem;
    margin-top: 10rem;
}

.login-container .button {
    background-color: #1d9ad3;
    color: #ffffff;
    font-size: 36rem;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.header {
    justify-content: center;
    flex-direction: row;
    position: relative;
}

.header h1 {
    color: #ffffff;
    text-align: center;
    font-size: 70rem;
}

.clock {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    right: 38rem;
    top: 20rem;
    height: 76rem;
}

.date {
    font-size: 25rem;
    line-height: 1;
    margin: 0;
}

.time {
    font-size: 32rem;
    font-weight: 500;
    line-height: 1;
    margin: 0;
}

.content {
    width: 100%;
    flex-direction: row;
    flex-grow: 1;
}

.left {
    width: 25.8%;
    height: 100%;
    padding-left: 10rem;
    padding-right: 10rem;
}

.right {
    width: 74.2%;
    height: 100%;
    background-color: #06182b;
    flex-direction: column;
}

.location {
    flex-direction: row;
    align-items: center;
    font-size: 32rem;
    color: #65aedb;
    font-weight: 600;
    margin: 0;
}

.location span {
    font-size: 32rem;
    color: #65aedb;
    font-weight: 600;
}

.school {
    font-size: 32rem;
    color: #65aedb;
    font-weight: 400;
    margin-top: 23rem;
    margin-bottom: 0;
}

.summary {
    flex-direction: row;
    margin-top: 40rem;
    flex-wrap: wrap;
    height: 230rem;
    justify-content: space-between;
}

.summary-item {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100rem;
    width: 210rem;
}

.summary-item-value {
    font-size: 60rem;
    font-weight: 600;
}

.summary-item-value.monitor_count {
    color: #2ea957;
}

.summary-item-value.student_count {
    color: #6e0b19;
}

.summary-item-value.badge_count {
    color: #e68447;
}

.summary-item-value.data_count {
    color: #1d9ad3;
}

.summary-item-value.class_count {
    color: #b07d5e;
}

.summary-item-label {
    font-size: 25rem;
    color: #ffffff;
}

.title {
    height: 64rem;
    font-size: 34rem;
    color: #ffffff;
    font-weight: 500;
    line-height: 64rem;
    padding-left: 22rem;
    border-left: 9rem #50b4f5 solid;
    margin: 0;
    margin-top: 20rem;
}

#class-list {
    margin-top: 20rem;
}

#class-list th {
    height: 44rem;
    font-size: 12rem;
}

#class-list td {
    color: #ffffff;
    text-align: center;
    font-size: 14rem;
    height: 60rem;
    align-items: center;
}

.data-list {
    width: 940rem;
}

.data-list td {
    height: 74rem;
}

.data-list .first {
    display: flex;
    flex-direction: row;
    width: 320rem;
    align-items: center;
}

.data-list .badge {
    display: flex;
    width: 30rem;
    height: 30rem;
    border-radius: 4rem;
    margin-right: 18rem;
}

.data-list .label {
    font-size: 27rem;
    color: #1d9ad3;
}

.data-list .label2 {
    font-size: 27rem;
    text-align: right;
    color: #1d9ad3;
}

.data-list .value {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160rem;
    height: 36rem;
    background-color: #0e2e41;
    color: #ffffff;
    font-size: 19rem;
}

.data-list .rate {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 105rem;
    height: 36rem;
    background-color: #0e2e41;
    color: #ffffff;
    font-size: 19rem;
}

.data-list .reate .up {
    color: #25ae50;
}

.data-list .rate .down {
    color: #d61926;
}

.auto-refresh {
    position: absolute;
    top: 20rem;
    left: 20rem;
    color: #ffffff;
    flex-direction: row;
    align-items: center;
    display: flex;
    font-size: 28rem;
}

.auto-refresh input {
    display: flex;
    margin-right: 5rem;
}

.logout {
    position: absolute;
    top: 20rem;
    left: 220rem;
    color: #ffffff;
    font-size: 28rem;
    cursor: pointer;
}

.table tbody {
    display: block;
    height: 300px;
    overflow-y: scroll;
}
 
.table thead,
.table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}