p,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #0e0e0e;
}

body {
    background-color: whitesmoke;
}

header {
    position: relative;
}

.admin-container {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 1fr;
    height: 80vh;
}

.admin-container>div {
    margin: 10px;
    background-color: rgb(184, 184, 184);
}

.time-grid {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 2;

    display: grid;
    grid-template-columns: 3rem 1fr 1fr;
}

.time-grid p {
    margin: 0px;
    text-align: right;
    background-color: rgb(207, 207, 207);
}

.time-grid p:nth-child(odd) {
    background-color: rgb(226, 226, 226);
}

.calendar {
    width: 100%;
}

.booking-button {
    margin: 0px 2px;
    border: 1px rgb(170, 170, 170) solid;
}

.booking-button:hover {
    filter: brightness(80%);
}

.booking-button.selected,
.booking-button.selected:hover {
    filter: brightness(70%);
}

.information p {
    margin: 25px;
}

hr {
    background-color: black;
    opacity: 100%;
    margin: 20px;
}

.meter-container {
    position: absolute;
}

#meter {
    background-color: red;
    width: 90%;
    height: 2px;
    grid-column-start: 2;
    grid-row: 1;
    z-index: 0;
    opacity: 50%;
    pointer-events: none;
}

.left-arrow,
.right-arrow {
    mask-image: url("../img/pil.webp");
    mask-position: center;
    mask-size: cover;
    background-color: var(--calendar-text);
    width: 32px;
    height: 32px;
}

.left-arrow {
    mask-image: url("../img/pil2.webp");
}