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

/* === CONFIG === */
:root {
    --header-color: rgb(41, 41, 71);
    --main-bg-color: #FFF;
    --colorA: rgb(15, 146, 113);
    --colA: 15, 146, 113;
    --colB: 255,140,0;
    --colN: 51, 51, 51;
    --colAfont: 255,255,255;
    --colBfont: 0,0,0;
}
/* === FRAMEWORK === */
body {
    font-family: "Signika", sans-serif;
    margin: 0;
    background: #f7f7f7;
    color: #333;
    font-size: clamp(17px, 1.3vh,30px);
}
main {
    padding: 2rem;
    min-height: calc(100vh - 180px - 180px);
}
header {
    background-color: rgb(var(--colA));
    padding: 2rem;
    color: #FFF;
}
header > div:first-of-type {
    font-size: 60px;
}
header > div:first-of-type > img {
    width: 60px;
    float:left;
    filter: brightness(200%) contrast(100%);
}
footer {
    background-color: black;
    color: #FFF;
    padding: 2rem;
}
/* === BASIC ELEMENTS === */
a {
    color: inherit;
}
img[src="/img/logo/q-white.svg"]{
    padding: 10px;
    filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}
img[src$=".svg"] {
    box-shadow:none !important;
}
img {
    max-width: 100%;
}
.submenu a {
    background-color: rgb(var(--colA));
    color: rgb(var(--colAfont));
    padding: 0.3em 0.5em;
    border-radius: 0.3em;
    white-space: nowrap;
    line-height: 2em;
}
.submenu a.act {
    /* text-decoration: underline; */
    background-color: rgb(var(--colB));
}

/* === CITY SELECT === */
.citysel, .citysel select {
    border-top: #FFFFFF7F 1px solid;
    margin-top: 0.5em;
    font-size: 3vh;
}

/* === DECORATION === */
.gold {
    background: linear-gradient(135deg, rgb(255, 174, 0) 0%, #FA0 25%, #FFF 50%, #FA0 75%, #FA0 100%);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), inset -1px -1px 1px rgba(0, 0, 0, 0.4), inset 1px 1px 1px rgba(255, 255, 255, 0.4);
}

.silver {
    background: linear-gradient(135deg, #AAA 0%, #BBB 30%, #FFF 50%, #BBB 70%, #AAA 100%);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), inset -1px -1px 1px rgba(0, 0, 0, 0.4), inset 1px 1px 1px rgba(255, 255, 255, 0.4);
}

.bronze {
    background: linear-gradient(135deg, #F80 0%, #F80 30%, #FFF 50%, #F80 70%, #F80 100%);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), inset -1px -1px 1px rgba(0, 0, 0, 0.4), inset 1px 1px 1px rgba(255, 255, 255, 0.4);
}

.postit {
    font-family: Arial, System;
    font-size: 11px;
    box-sizing: border-box;
    padding: 2vmin;
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    color: #000;
    background-color: rgba(255,255,0,0.5);
    max-height: 180px;
    overflow-y:scroll;
}
.form_standard  > * {
    width: 100%;
    text-align: left;
    column-count: 2;
}
.form_standard > * > * {
    vertical-align: top;
    padding: 0.5em;
}
.form_standard input:not([type="checkbox"],[type="radio"]) {
    width: 100%;
}
.form_standard textarea {
    min-height: 100px;
    width: 100%;
}
.form_standard  > *.f{
    display: flex;
    flex-direction: row;
    column-span: all;
}
.form_standard select {
    max-width: 100%;
}
/*
.form_standard {
    display: table;
}
.form_standard > * {
    display: table-row;
}
.form_standard > * > * {
    display: table-cell;
    vertical-align: top;
    padding: 0.5em;
}
*/
.filter {
    clear: both;
}
.filter_inner > * {
    float: left;
}
@media (max-width:600px) {
    .filter_inner > * {
        float: none;
    }
}
.citysel {
    position: absolute;
    background-color: rgb(var(--colA));
    font-size: 0.8em;
    box-sizing: border-box;
    padding: 1em;
    margin-top: 2em;
}

.chk_once {
    background-image: url(/img/chk.webp);
    background-size: contain;
    width: 20vmin;
    height: 20vmin;
    position: absolute;
    left: calc(50vw - 10vmin);
    top: calc(50vh - 10vmin);;
    border-radius: 100%;
    z-index: 1000;

    animation: fadeout 0.5s 1;
    animation-fill-mode: forwards;
    animation-delay:1.3s;
}
@keyframes fadeout {
    from {opacity :1;}
    to {opacity :0;}
}
.togglenext {
    display: none;
}
.togglenext + *:not(.togglenext) {
    display: none;
}
.togglenext:checked + * {
    display: inline-block;
}

.idcf > * > :nth-child(1) {width: 57px; text-align: right;}
.idcf > * > :nth-child(2) {width: 60px; text-align: right;}
.idcf > * > :nth-child(3) {width: 50px;}
.idcf > * > :nth-child(4) {width: 35px;}