@import "/styles/text-alignment.css";
@import "/styles/table-page.css";

.thead {
    display: table-cell;
    position: relative;
}

td {
    padding-right: 5px;
    padding-left: 5px;
    min-width: 40px;
    position: relative;
}

th {
    padding-right: 0;
    padding-left: 0;
    min-width: 40px;
    position: relative;
}

#dataTable, #theadDiv {
    visibility: hidden;
}

.data-table {
    display: inline-block;
    vertical-align: top;
    min-height: 250px;
    padding: 0;
    background-color: #f8f8f8;
}

button.show {
    padding: 0 2px;
    position: absolute;
    right: 0;
    top: 3px;
    font-size: 14px;
}

.daily-max {
    color: orange;
}

.dekadal-max {
    color: orange;
}

.monthly-max, .seasonal-max {
    color: #ff7700;
}

.allTime-max {
    color: red;
}

.daily-min {
    color: #3c9bff;
}
.dekadal-min {
    color: #1e80ff;
}

.monthly-min, .seasonal-min {
    color: #1953e5;
}

.allTime-min {
    color: blue;
}


button.daily-max {
    background-color: orange;
    font-weight: bold;
    border: none;
    color: white;
}

button.dekadal-max {
    background-color: orange;
    font-weight: bold;
    border: none;
    color: white;
}

button.monthly-max, button.seasonal-max {
    background-color: #ff7700;
    font-weight: bold;
    border: none;
    color: white;
}

button.allTime-max {
    background-color: red;
    font-weight: bold;
    border: none;
    color: white;
}

button.daily-min {
    background-color: #3c9bff;
    font-weight: bold;
    border: none;
    color: white;
}

button.dekadal-min {
    background-color: #1e80ff;
    font-weight: bold;
    border: none;
    color: white;
}

button.monthly-min, button.seasonal-min {
    background-color: #1953e5;
    font-weight: bold;
    border: none;
    color: white;
}

button.allTime-min {
    background-color: blue;
    font-weight: bold;
    border: none;
    color: white;
}

.data-range {
    color: gray;
}

.show {
    display: block;
}

.toggle-button {
    right: 10px;
    bottom: 3px;
    width: 40px;
}

button {
    cursor: pointer;
}

#external-header {
    padding-bottom: 10px;
}

.no-data {
    color: red;
    font-size: 18px;
}