:root{--color0: rgb(183, 183, 204);
    --color1: rgb(154, 154, 178);
    --color2: rgb(140, 140, 177);
    --color3: rgb(118, 118, 189);
    --color4: rgb(105, 105, 211);
    --color5: rgb(80, 80, 214);
    --solid-border:3px solid rgb(30, 30, 48);
    --dashed-border:2px dashed rgb(10, 10, 23);}

.available-0{background-color: var(--color0);}

.available-1{background-color: var(--color1);}

.available-2{background-color: var(--color2);}

.available-3{background-color: var(--color3);}

.available-4{background-color: var(--color4);}

.available-5{background-color: var(--color5);}

.sharp td{border-bottom: var(--solid-border);}

.half td{border-bottom: var(--dashed-border);}

#legend-gradient{background-image: linear-gradient(90deg, var(--color0) 0% 16%, var(--color1) 16% 33%, var(--color2) 33% 50%, var(--color3) 50% 66%, var(--color4) 66% 83%, var(--color5) 83% 100%);
                height: 40px;
                width: 200px;
                border: var(--solid-border);}

table{text-align:center;
        margin-left:auto;
        margin-right:auto;
        border-collapse: collapse;}

#legend {display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
        }

span{font-weight: bold;
    margin-top: 10px;}

td{padding: 20px 60px 20px 60px;}

body{font-family:Arial, Helvetica, sans-serif;
    text-align:center;}

#legend-scale{display:flex;
                gap:20px;
                margin-top: 10px;}

thead{background-color:rgb(33, 33, 95);
        color: rgb(200, 211, 236);
        height: 45px;}

h1{color:rgb(33, 33, 95);
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;}

.time{padding: 15px; background-color:rgb(33, 33, 95);color: rgb(200, 211, 236);
        border-bottom: var(--solid-border);}

#table-wrapper {border-radius: 20px;
            overflow: hidden;
            display: inline-block;
            margin: auto;
            border: var(--solid-border);}