:root {
    --c1-val: 5, 21, 24;
    --c2-val: 49, 115, 153;
    --c3-val: 239, 193, 51;
    --c4-val: 80, 47, 119;
    --c5-val: 255, 255, 230;
    --error-val: 198, 50, 84;

    --c1: rgb(var(--c1-val));
    --c2: rgb(var(--c2-val));
    --c3: rgb(var(--c3-val));
    --c4: rgb(var(--c4-val));
    --c5: rgb(var(--c5-val));
    /* 
    --c1: #14080E;
    --c2: #49475B;
    --c3: #799496;
    --c4: #ACC196;
    --c5: #E9EB9E; 
    */
    --contrast-light: var(--c5);
    --contrast-dark: var(--c1);
    --c1-contrast: var(--contrast-light);
    --c2-contrast: var(--contrast-light);
    --c3-contrast: var(--contrast-light);
    --c4-contrast: var(--contrast-light);
    --c5-contrast: var(--contrast-dark);

    --font-size: 24px;
    --inp-font-size: calc(var(--font-size) - 2px);
    --inp-padding: 5px;
    --inp-border-width: 1px;
    --font-family: "Verdana", sans-serif;
    --main-border-color: var(--c2);
    --main-text-color: var(--c1);
    --main-border-radius: 7px;
    --background-color: var(--c1-contrast);

    --error-color: rgb(var(--error-val));
    --error-background: rgba(var(--error-val), 0.2);
    --error-contrast: var(--contrast-light);
    --error-font-size: calc(var(--font-size) - 2px);

    --row-gap: 5px;
    --left-column: 8ch;
    --activity-color-e: rgba(var(--c4-val), 0.1);
    --activity-color-p: rgba(var(--c2-val), 0.1);
    --activity-color-r: var(--activity-color-p);
    --activity-color-f: var(--background-color);
    --font-size-activity-left: calc(var(--font-size) * 1.6);
    --activity-pic-mult: 6;
    --grid-min-height: calc(9 * (var(--font-size) + var(--inp-border-width) + var(--inp-padding) + var(--row-gap)))
}

body {
    font-size: var(--font-size);
    font-family: var(--font-family);
    color: var(--main-text-color);
    background-color: var(--background-color);
}

input,
textarea,
select {
    box-sizing: content-box;
    font-size: var(--inp-font-size);
    color: var(--main-text-color);
    background-color: var(--c1-contrast);
    border-radius: var(--main-border-radius);
    border: var(--inp-border-width) solid var(--main-border-color);
    padding: var(--inp-padding);
}

select,
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button {
    border-radius: var(--main-border-radius);
    border: 1px solid var(--main-border-color);
    background-color: var(--c2);
    color: var(--c5);
    padding: var(--inp-padding);
    cursor: pointer;
}

button:hover {
    background-color: var(--c5);
    color: var(--c2);
    padding: var(--inp-padding);
}

button.start {
    font-size: calc(var(--font-size) + 4px);
    padding: 10px;
    width: 10ch;
}

div.buttons {
    /* padding-top: 20px; */
    display: flex;
    justify-content: center;
}

div.center_block {
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
}

div.settings {
    display: grid;
    align-content: start;
    column-gap: 10px;
    row-gap: var(--row-gap);
    align-items: center;
    grid-template-columns: var(--left-column) 1fr;
    position: relative;
    min-height: var(--grid-min-height);
}

div.settings div.banner_loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(var(--c5-val), 0.95);
    /* color: var(--c5-contrast); */
    /* font-size: calc(var(--font-size) * 1.5); */
    /* font-weight: bold; */
    text-align: center;
}

div.settings div.banner_loading span.without_sound {
    color: var(--c2);
    border-bottom: 1x dashed;
    cursor: pointer;
    font-size: smaller;
}

div.settings div.banner_loading span.without_sound:hover {
    border-bottom: none;
}


div.settings input[type='text'],
div.settings input[type='number'] {
    width: 5ch;
    text-align: right;
}

div.status {
    display: grid;
    align-content: start;
    column-gap: 10px;
    row-gap: var(--row-gap);
    align-items: center;
    grid-template-columns: var(--left-column) 1fr;
    position: relative;
    min-height: var(--grid-min-height);
    /** auto 1fr **/
}

div.status div.banner_countdown {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(var(--c5-val), 0.95);
    color: var(--c5-contrast);
    font-size: calc(var(--font-size) * 1.5);
    font-weight: bold;
    text-align: center;
}

div.status div.activity_pic {
    --fsize: calc(var(--font-size) * var(--activity-pic-mult));
    font-size: var(--fsize);
    height: var(--fsize);
    width: var(--fsize);
    /* border: 1px solid black; */
    display: flex;
    justify-content: center;
    align-items: center;
}

div.status div.activity_pic[data-type='e'] {
    background: center / contain no-repeat url("/static/img/hiit/situp.gif");
}

div.status span.time {
    font-family: "Verdana", monospace;
}

div.status div.left_activity {
    position: relative;
    grid-column: 1 / span 2;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

div.status div.left_activity span.aleft {
    font-size: var(--font-size-activity-left);
    font-weight: bold;
    color: var(--c2);
}

div.status div.left_activity span.atotal {
    position: absolute;
    /* right: 0;
    top: calc(-1 / 2 * var(--font-size) - var(--row-gap) - var(--font-size) * var(--activity-pic-mult) / 2); */
    left: calc((var(--left-column) - 5ch) / 2);
    top: calc(1 / 2 * var(--font-size) - var(--row-gap) - var(--font-size) * var(--activity-pic-mult) / 2);
}

div.main_errors {
    --error-padding-x: 10px;
    --error-padding-y: 5px;
    display: flex;
    flex-flow: row wrap;
    position: fixed;
    left: 0;
    width: 100%;
    background-color: var(--error-contrast);
    align-items: flex-end;
    gap: 1px;
}

div.main_errors_top {
    top: 0;
}

div.main_errors_bottom {
    bottom: 0;
}

div.main_errors div.main_error {
    position: relative;
    padding: var(--error-padding-y) var(--error-padding-x);
    font-size: var(--error-font-size);
    flex-basis: 100%;
}

div.main_errors div.error_error {
    background-color: var(--error-color);
    color: var(--error-contrast);
}

div.main_errors div.error_warning {
    background-color: var(--c3);
    color: var(--c3-contrast);
}

div.main_errors div.error_one_string {
    overflow: hidden;
    max-height: var(--error-font-size);
}

div.main_error div.close_error {
    margin: -4px -4px 2px 2px;
    float: right;
    color: var(--error-contrast);
    cursor: pointer;
    font-size: larger;
    transform: scaleX(1.3);
}

div.main_error div.close_error:hover {
    opacity: 0.8;
}

div.main_error span.error_undo {
    cursor: pointer;
    text-decoration: underline;
}

div.main_error span.error_undo:hover {
    text-decoration: none;
}