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

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

.content {
    margin: auto;
    width : 40em;
}

.text-block {
    width : 35em;
    text-align: justify;
}

th, td { padding: 0px; }

.generic-button {
    border: 0.1em solid black;
    color: black;
    background-color:#B5B5B5;
    width: 20em;
    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: #858585;
    background-color:#B5B5B5;
}

.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;
}

.radio-column {
    float: left;
    padding-left: 1em;
    padding-right: 1em;
}
.radio_info_text {
    display:none;
    position:absolute;
    background-color:black;
    color:white;
    width:15em;
}
.radio-title:hover span.radio_info_text {
    display:block;
}

.chinfo {
    font-weight:normal;
    text-align: center;
}

/* @media (pointer: coarse) { */
@media (pointer: coarse) {
    .generic-button {
        width: 25em;
        height: 3em;
        font-size: 125%;
    }
    .generic-button:hover {
        width: 25em;
        height: 3em;
        font-size: 125%;
    }
    .generic-button:disabled {
        border: 0.1em solid #A5A5A5;
        color: #A5A5A5;
        background-color:#F1F1F1;
        width: 25em;
        height: 3em;
        font-size: 125%;
    }
    .radio-column {
        font-size: 150%;
    }
    .player_select {
        width: 8em;
        height: 3em;
        font-size: 125%;
    }
}

.number_table th {
    text-align: left;
}
.number_table td {
    text-align: center;
}
.number_table .val_entry {
    font-weight: normal;
    padding-left:0.3em;
    padding-right:1em;
}
.help_text {
    display:none;
    position:absolute;
    background-color:black;
    color:white;
}
.number_table th:hover span.help_text { display:block; }

.opponent_table th {
    text-align: left;
}
.opponent_table td {
    text-align: left;
}
.match_table th, .match_table td {
    font-weight: bold;
    font-size: 150%;
    text-align: left;
    table-layout: fixed;
    width: 0.8em;
}

.player_select {
    width : 6em;
}

.score_table {
    border : 0.1em solid;
    border-collapse: collapse;
}

.score_table th {
    text-align: center;
}

.stable th {
    text-align: center;
}

.clickable_table th {
    text-align: left;
}
.clickable_table td {
    text-align: center;
}
.clickable_table tr:hover {
    background-color:#A5A5A5;
}
.clickable_table .val_entry {
    font-weight: normal;
    padding-left: 0.3em;
    padding-right: 1em;
}

.skill_test_text {
    display:none;
    position:absolute;
    background-color:black;
    color:white;
}
.score_table_pair {
    border-spacing:0.0em 0.1em;
    border : 0.1em dotted;
}
.score_table_pair th:hover span.skill_test_text { display:block; }

.grid_table {
    font-weight: normal;
    vertical-align: top;
}
.grid_table tr {
    font-weight: normal;
    vertical-align: top;
}

.posession_bar {
    width : 100%;
    height : 0.2em;
}
.posession {
    text-align : left;
    width : 1%;
    height : 0.2em;
}
.game-history p {
    text-align : left;
    margin : 0;
}

.spacer {
    width: 1em;
}
.hspacer {
    height: 0.5em;
}