@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

body {
    background: #F5F5F5;
    font-size: 1.0em;
}

th, td { padding: 0px; }

.mission_panel {
    font-size: 1.5em
}

.mission_panel:hover {
    color: #F5F5F5;
    background: #050505;
}

.generic-button {
    border: 0.1em solid black;
    color: black;
    background-color:#F1F1F1;
    width: 25em;
    height : 2em;
    font-size: 100%;
}
.generic-button:hover {
    color: white;
    background-color:black;
    font-size: 100%;
}
.generic-button:active {
    color: white;
    background-color:#232323;
}
.generic-button:disabled {
    border: 0.1em solid #A5A5A5;
    color: #A5A5A5;
    background-color:#F1F1F1;
    width: 25em;
    font-size: 100%;
}

.oldschool-button {
    color: white;
    background-color:#434343;
    width: 20em;
    font-size: 100%;
}
.oldschool-button:hover {
    color: black;
    background-color:#A5A5A5;
    font-size: 100%;
}
.pm_button {
    width: 3em;
    height: 2em;
    text-align: center;
    background-color: #F1F1F1;
    border: 0.1em solid black;
    touch-action: manipulation;
}
.pm_button:hover {
    color: red;
    background-color: black;
}

/* @media (pointer: coarse) { */
@media (pointer: coarse) {
    .generic-button {
        width: 25em;
        height: 4em;
        font-size: 150%;
    }
    .generic-button:hover {
        width: 25em;
        height: 4em;
        font-size: 150%;
    }
    .generic-button:disabled {
        border: 0.1em solid #A5A5A5;
        color: #A5A5A5;
        background-color:#F1F1F1;
        width: 25em;
        height: 3em;
        font-size: 150%;
    }
    .solider_select {
        width: 10em;
        height: 4em;
        font-size: 150%;
    }
    .pm_button {
        width: 4em;
        height: 3em;
    }
}

.number_table th {
    text-align: left;
}
.number_table td {
    text-align: right;
}
.number_table .val_entry {
    font-weight: normal;
    padding-left:0.3em;
    padding-right:1em
}

.black_bar {
    width: 0.15em;
    height: 18em;
    background-color: black;
}

.progress_bar {
    display: flex;
    width: 1em;
    height: 10em;
    background-color: red;
}
.progress {
    align-self: flex-end;
    width: 1em;
    height: 1%;
    background-color: green;
}

#achievements {
    opacity : 0.0;
}
.ach {
    margin : 0;
}

.slot_entry {
    opacity : 0.0;
}
.slot_progress_bar {
    display: flex;
    width: 20em;
    height: 0.5em;
    background-color: red;
}
.slot_progress {
    display: flex;
    width: 1%;
    height: 0.5em;
    background-color: blue;
}