@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');

/* Messages */
#msg {
    position: absolute;
    top: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.container {
    padding-top: 20px;
}

.top {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#control-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

#login-btn, #logout-btn {
    font-family: 'Roboto Mono', monospace;
    float: right;
}

#button-holder {
    display: flex;
    flex-direction: row;
}

/* Table */
.tbl {
    width: 60%;
    margin: 0 auto;
}

.tbl > tbody {
    display: block;
    height: 200px;
    overflow: scroll;
}

thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}

table > tbody > tr:first-child {
    background: #03c04a20;
}

table > tbody > tr:nth-child(2) {
    background: #c5e90b20
}

/* Modal Body */
.modal-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* Chart */
#chart-part {
    height: 60vh;
}