/* Variables */

:root {
    /* colors */
    --color-bg: #eae0cc;
    --color-dark: #3c493f;
    --color-bright: #a0a083;
    --color-contrast-warm: #ff6201;
    --color-contrast-cold: #1c77c3;
    --color-white: #fff;
    --color-yellow-text: darkred;
    /* icons */
    --main_db_icon: "/static/images/icon_db.png";
}

/* Document */

html {
    font-family: sans-serif;
    background: var(--color-bg);
    padding: 0; }

body {
    max-width: 100vw;
    max-height: 90vh;
    margin: 0 auto;
    background: var(--color-bg);
}

/* DOM Elements */

h1 { font-family: sans-serif; color: var(--color-contrast-warm); margin: 0 0; }
h2 { font-family: sans-serif; font-weight: bold; color: var(--color-contrast-warm); margin: 0 0; }
a { color: var(--color-contrast-cold); }
hr { border: none; border-top: 1px solid lightgray; }
nav { background: var(--color-dark); display: flex; align-items: center; padding: 0 0.5rem; min-height: 2.7rem; }
nav h2 { flex: auto; margin: 0; }
nav h2 a { text-decoration: none; padding: 0.25rem 0.5rem; }
nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; margin-left: 5px;}
input.danger { color: #cc2f2e; }
input[type=number] {-moz-appearance: textfield}
html, body {height: 100%;}

/* Classes */

.content { padding: 0 1rem 1rem;}
.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.flash { margin: 1em 0; padding: 1em; background: var(--color-bright); border: 1px solid var(--color-dark); }
.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
.post > header > div:first-of-type { flex: auto; }
.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
.post .about { color: slategray; font-style: italic; }
.post .body { white-space: pre-line; }
.content:last-child { margin-bottom: 0; }
.content form { margin: 0 0 0 0; display: flex; flex-direction: column; max-width: 20%;}
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content input, .content textarea { margin-bottom: 1em;}
.content textarea { min-height: 12em; resize: vertical; }
.accordion-button {
    font-size: 18pt !important;
    border-radius: 5px !important;
}
.accordion-button:not(.collapsed) {
    color: var(--color-white) !important;
    background-color: var(--color-dark) !important;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='height: 16px; width: 16px;' transform='translate(0, 0) scale(-1, -1) rotate(360, 256, 256) skewX(0) skewY(0)' fill='%23ff6201'%3e%3cpath fill-rule='evenodd' d='M247 65.16L32.34 440.8l61.79-35.7L247 137.6zm18 .38V137l158.3 271.3 62.7 36.1C412.2 318.2 338.6 191.8 265 65.54zM415.4 424.5l-321.3 1.4-62.72 36.2 445.82-1.9z'/%3e%3c/svg%3e") !important;
    transform: rotate(-180deg);
}
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='height: 16px; width: 16px;' transform='translate(0, 0) scale(-1, -1) rotate(360, 256, 256) skewX(0) skewY(0)' fill='%231c77c3'%3e%3cpath fill-rule='evenodd' d='M247 65.16L32.34 440.8l61.79-35.7L247 137.6zm18 .38V137l158.3 271.3 62.7 36.1C412.2 318.2 338.6 191.8 265 65.54zM415.4 424.5l-321.3 1.4-62.72 36.2 445.82-1.9z'/%3e%3c/svg%3e") !important;;
}
.accordion-body {
    display: flex;
}
.tooltip-css {
    font-weight: bold !important;
    font-size: 28px !important;
    --bs-tooltip-white: var(--color-bright) !important;
    --bs-tooltip-bg: var(--color-dark) !important;
}
.strad-logout {background: var(--color-bright); color: var(--color-dark)}
.strad-btn {background: var(--color-contrast-warm); color: var(--color-dark); margin-left: 5px; width: 38px; height: 38px;}
.strad-btn:hover {background: var(--color-contrast-cold); color: var(--color-dark)}
.strad-btn-menu-icon {width: 20px; height: 20px; margin-top: -5px; margin-left: -4px;}
.strad-form-input {max-width: 100% !important;}
.strad-login-header {margin: 0 0 0 40% !important;}
.strad-login-form {margin: 0 0 0 40% !important;}
.btn-check + .strad-radio-element {
    color: var(--color-dark) !important;
    background-color: var(--color-white) !important;
    border-color: var(--color-dark) !important;
    width: 50% !important;
}
.btn-check:hover + .strad-radio-element {
    color: var(--color-white) !important;
    background-color: var(--color-bright) !important;
    border-color: var(--color-dark) !important;
    width: 50% !important;
}
.btn-check:checked + .strad-radio-element {
    color: var(--color-white) !important;
    background-color: var(--color-dark) !important;
    border-color: var(--color-bright) !important;
    width: 50% !important;
}
.player-drag {
    background-color: var(--color-dark);
    margin: 1px;
    color: var(--color-white);
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    line-height: 36px;
    border-radius: 3px 3px 3px 3px;
}
.player-drag:hover:active {
    opacity: 25%;
}
.player-drag-ghost {
    background-color: var(--color-contrast-cold);
}
.drop-target {
    border: 1px solid;
    border-color: var(--color-dark);
    width: 50%;
    padding: 1px;
    min-height: 190px;
    max-height: 190px;
    overflow: auto;
}
.drop-target + .is-invalid {
    border: 3px solid;
    border-color: var(--color-contrast-warm);
}
.selection-label {position: relative; flex: 1 1 auto; width: 50%; text-align: center;}
.strad-btn-submit {
    background-color: var(--color-dark) !important;
    color: var(--color-contrast-warm) !important;
    border-color: var(--color-bright) !important;
    font-weight: bold !important;
}
.strad-btn-cancel {
    background-color: var(--color-bright) !important;
    color: var(--color-white) !important;
    border-color: var(--color-dark) !important;
    font-weight: bold !important;
}
.script {position: fixed; bottom: 0;}
.strad-acc-header {
    font-weight: bold;
    background-color: var(--color-bright);
    border-radius: 5px;
}
.strad-acc-content {
    padding: 5px 5px 5px 5px;
    border-bottom-right-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
}
.strad-acc-content:first-child {
    margin: 0 !important;
}
.strad-acc-content:last-child {
    margin: 0 !important;
}
.strad-existing-game {
    display: flex;
    flex-flow: row nowrap;
    cursor: default;
    background-color: var(--color-bright);
    padding: 5px !important;
    margin: 2px 0 2px 0;
    justify-content: space-between;
    width: 100%;
    border-radius: 5px;
}
.strad-existing-game:hover {
    background-color: var(--color-contrast-cold);
    color: var(--color-white);
}
.strad-btn-detail {
    background: var(--color-contrast-warm);
    color: var(--color-dark);
    margin-left: 5px;
    width: 25px;
    height: 25px;
}
.strad-btn-delete {
    background: var(--color-yellow-text) !important;
}
.strad-btn-delete:hover {
    background: var(--color-contrast-warm) !important;
}
.strad-btn-detail:hover {
    background: var(--color-bright);
    color: var(--color-dark)
}
.strad-btn-detail-img {
    width: 20px;
    height: 20px;
    margin-top: -18px;
    margin-left: -10px;
}
.strad-textfield {padding-bottom: 0 !important;}
.strad-modal-body {padding-top: 0 !important;}
.strad-game-container {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
    background-color: var(--color-bright);
}
.strad-game-details {
    position: absolute;
    align-self: center;
    top: 0;
    height: 30px;
    background: var(--color-bright);
    border-radius: 0 0 5px 5px;
    display: flex;
    padding-left: 2px;
    padding-right: 2px;
    justify-content: space-around;
    width: 70%;
}
.strad-game-details > .strad-key-value-div {
    width: 22% !important;
}
.strad-game-delete {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
}
.strad-game-delete > * {
    width: 100% !important;
}
.strad-game-delete > .strad-key-value-div > .strad-key-div {
    text-align: left !important;
}
.in-game {
    padding: 5px 0 0 0 !important;
}
.strad-key-value-div {
    display: flex;
    width: 16%;
}
.strad-delete-kv-div {
    width: 100% !important;
}
.strad-key-div {
    padding-right: 5px;
    width: 100%;
    text-align: right;
}
.strad-value-div {
    font-weight: bold;
    width: 100%;
    text-align: left;
    padding-right: 5px;
}
.strad-toast-icon {
    width: 20px;
    height: 20px;
}
.strad-game-table {
    display: flex;
    position: relative;
    flex-flow: column nowrap;
    width: 100%;
    max-height: calc(100vh - 108px) !important;
    min-height: 0;
    height: 100%;
    margin-top: 0;
}
.strad-game-table-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-self: flex-end;
    width: 95%;
    max-width: 95%;
}
.strad-game-table-header-overflow {
    margin-right: 17px;
    max-width: calc(95% - 16px);
}
.strad-game-table-cell-area {
    display: flex;
    flex-flow: row nowrap;
    overflow: auto;
}
.strad-round-col {
    display: flex;
    flex-flow: column nowrap;
    width: 5%;
    margin-left: 5px;
    min-width: calc(5% - 5px) !important;
    height: 100%;
}
.strad-round-header {
    display: flex;
    padding: 0 5px 0 5px;
    height: 48px !important;
    margin-bottom: 2px;
}
.strad-round-item {
    display: flex;
    flex-shrink: 2;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 100%;
    min-width: 5% !important;
    margin-bottom: 2px;
    margin-top: 2px;
    font-weight: bold;
    font-size: 30px;
    color: var(--color-dark);
}
.strad-round-item-current {
    color: var(--color-contrast-cold);
    background-color: var(--color-bright);
    border-radius: 5px;
}
.strad-score-col {
    display: flex;
    flex-flow: column nowrap;
    width: 90%;
    height: 100%;
    margin: 0 5px 0 5px;
    border-radius: 5px;
    min-height: 100%;
}
.strad-score-col:focus-within {
    background-color: var(--color-bright);
}
.strad-score-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 30px;
    background-color: var(--color-dark);
    color: var(--color-white);
    padding: 0 5px 3px 5px;
    margin-bottom: 2px;
    margin-right: 5px;
    margin-left: 5px;
    border-radius: 5px;
    width: 100%;
}
.strad-score-header-yellow {
    color: var(--color-yellow-text) !important;
    background-color: var(--color-contrast-warm) !important;
}
.strad-score-header-name {
    width: 33%;
    font-weight: bold;
    font-size: 30px;
    color: var(--color-white);
}
.strad-score-header-name-no-checkin {
    color: var(--color-contrast-warm) !important;
}
.strad-score-header-number {
    text-align: center;
    width: 33%;
    font-weight: bold;
    font-size: 30px;
    color: var(--color-white);
}
.strad-score-header-number-yellow {
    color: var(--color-yellow-text);
}
.strad-score-header-toggle {
    width: 33%;
}
.strad-score-item {
    display: flex;
    flex-shrink: 2;
    width: 100%;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-bottom: 2px;
    margin-top: 2px;
}
.strad-score-item-current {
    background-color: var(--color-bright);
}
.strad-score-item:focus-within {
    background-color: var(--color-dark) !important;
}
.strad-score-input {
    padding: 0 0 0 0 !important;
    width: 65px;
    height: 40px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    border: 3px solid var(--color-bright);
    margin-bottom: 0 !important;
}
.strad-score-input-blue {
    background-color: var(--color-contrast-cold);
    color: var(--color-white);
}
.strad-score-input-red {
    background-color: var(--color-yellow-text);
    color: var(--color-white);
}
.strad-score-input-current {
    border: 3px solid var(--color-dark);
}
.strad-score-input:focus {
    outline: none;
    border: 5px solid var(--color-contrast-warm) !important;
}
.strad-game-table-footer {
    position: absolute;
    bottom: 5px;
    right: 0;
    height: 45px;
    display: flex;
    justify-content: space-around;
    width: 95%;
}
.strad-game-table-footer-overflow {
    margin-right: 17px;
    max-width: calc(95% - 16px);
}
.strad-game-table-footer-item {
    display: flex;
    background-color: var(--color-dark);
    border-radius: 5px;
    text-align: center;
    width: 100%;
    font-weight: bold;
    font-size: 30px;
    margin-right: 5px;
    margin-left: 5px;
    color: var(--color-white);
}
.strad-score-footer-counts {
    display: flex;
    padding-bottom: 5px;
    padding-top: 5px;
    width: 40%;
}
.strad-score-footer-score {
    width: 20%
}
.strad-score-footer-max {
    display: flex;
    justify-content: flex-end;
    width: 40%
}
.strad-stat-max-img {
    width: 35px;
    height: 35px;
    margin-top: -10px;
}
.strad-statistic-flags {
    margin-right: 10px;
}
.strad-score-footer-wins {
    padding-left: 5px;
    padding-right: 5px;
    background-color: var(--color-white);
    line-height: 105%;
    border-radius: 5px;
    margin-left: 10px;
    color: var(--color-contrast-warm);
}
.strad-score-footer-blues {
    padding-left: 5px;
    padding-right: 5px;
    background-color: var(--color-white);
    line-height: 105%;
    border-radius: 5px;
    margin-left: 10px;
    color: var(--color-contrast-cold);
}
.strad-score-footer-reds {
    padding-left: 5px;
    padding-right: 5px;
    background-color: var(--color-white);
    line-height: 105%;
    border-radius: 5px;
    margin-left: 10px;
    color: var(--color-yellow-text);
}
.strad-stat-actor-container {
    display: flex;
    flex-flow: column nowrap;
    min-width: 15%;
    width: 100%;
    height: 70%;
    margin-left: 2px;
    margin-right: 2px;
}
.strad-stat-section {
    display: flex;
    flex-flow: column nowrap;
    background-color: var(--color-bright);
    border-radius: 5px;
    margin-bottom: 5px;
    padding-left: 2px;
    padding-right: 2px;
}
.strad-stat-section-ova {
    background-color: var(--color-dark) !important;
}
.strad-stat-section:last-of-type {
    margin-bottom: 0 !important;
}
.strad-stat-section-ova:last-of-type {
    margin-bottom: 0 !important;
}
.strad-stat-name {
    background-color: var(--color-bright);
    border-radius: 5px;
    font-size: 23px;
    font-weight: bold;
    margin-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}
.strad-stat-name-ova {
    background-color: var(--color-dark);
    color: var(--color-white);
}
.strad-image-value-div {
    display: flex;
    margin-top: 1px;
    margin-bottom: 1px;
    /*border: solid 1px;
    border-radius: 3px;
    border-color: var(--color-white);*/
    padding-right: 2px;
    padding-left: 2px;
}
.strad-stat-value {
    font-size: 25px;
    font-weight: bold;
    text-align: right;
    width: 100%;
}
.strad-stat-value-ova {
    color: var(--color-white);
    font-size: 25px;
    font-weight: bold;
    text-align: right;
    width: 100%;
}
.strad-stat-list-img {
    width: 30px;
    height: 30px;
    margin-top: 3px;
}

/* By ID */

#horizontal {background: var(--color-contrast-cold); min-height: 5px;}
#strad-available {border-radius: 5px 0 0 5px;}
#strad-selected {border-radius: 0 5px 5px 0;}
#strad-canvas {max-height: calc(90vh - 54px) !important;}
#strad-overview {height: 99%;}