@font-face {
    font-family : "subway";
    src         : url("https://subway-series.de/assets/font/SubwaySans-Regular-Cy-Gr-Web.woff2");
    font-weight : normal;
    font-style  : normal;
}

@font-face {
    font-family  : "subway";
    src          : url("https://subway-series.de/assets/font/SubwaySansCond-Medium-Web.woff2");
    font-weight  : normal;
    font-stretch : condensed;
}

@font-face {
    font-family  : "subway";
    src          : url("https://subway-series.de/assets/font/SubwaySans-Bold-Cy-Gr-Web.woff2");
    font-weight  : 500 1000;
    font-style   : normal;
    font-stretch : normal;
}

@font-face {
    font-family  : "subway";
    src          : url("https://subway-series.de/assets/font/SubwaySansCond-Bold-Web.woff2");
    font-weight  : 500 1000;
    font-stretch : condensed;
}

:root {
    --primary-color   : #437b3c;
    --secondary-color : #fbbb00;
}

body, input, textarea, button, dialog {
    font-family  : "subway", sans-serif;
    font-stretch : condensed;
    font-variant : tabular-nums;
    line-height  : 1.5;
    color        : white;
}

body {
    background-color : var(--secondary-color);
    height           : 100dvh;
    place-content    : center;
}

a {
    color           : var(--primary-color);
    text-decoration : none;
}

.content {
    max-width : 84%;
    inset     : 18% 8%;
}

form.content {
    inset : 18% 8% 10% 8%;
}

form {
    grid-auto-rows : auto auto auto 1fr;
}

.border-sbwy-secondary {
    --bs-border-color : var(--secondary-color);
}

.text-sbwy-secondary {
    color : var(--secondary-color);
}

.btn {
    --bs-btn-bg : var(--secondary-color);
}

#error__wrapper {
    transition : transform 0.5s ease-in-out;
}

.out-of-sight {
    transform : translateX(200%);
}

.accordion-button:not(.collapsed) {
    color            : var(--bs-dark);
    background-color : var(--secondary-color);
}

.table {
    --bs-table-striped-bg : var(--secondary-color);
}

#logo {
    left    : 0;
    right   : 0;
    bottom  : 10%;
    z-index : 1;
    filter  : drop-shadow(0 0 0.75rem black);
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    color : transparent !important;
}

::-webkit-scrollbar {
    width              : 1rem;
    background-color   : transparent;
    overflow-scrolling : auto;
}

::-webkit-scrollbar-corner {
    background-color : transparent;
}

::-webkit-scrollbar-track {
    background-color : white;
    border-radius    : 1rem;
}

::-webkit-scrollbar-thumb {
    background-color    : var(--primary-color);
    background-image    : url("https://www.mysubwaytoolbox.biz/files/subway/img/app-icons/favicon-32x32.png");
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : center;
    border-radius       : 1rem;
    border              : 1px solid var(--secondary-color);
    outline             : 4px solid var(--secondary-color);
    aspect-ratio        : 1;
    min-height          : 1rem;
}

.custom-popover {
    --bs-popover-max-width      : 200px;
    --bs-popover-border-color   : none;
    --bs-popover-header-bg      : var(--primary-color);
    --bs-popover-header-color   : white;
    --bs-popover-body-padding-x : 1rem;
    --bs-popover-body-padding-y : .5rem;
    --bs-popover-arrow-border   : var(--primary-color);
    --bs-popover-bg             : var(--primary-color);
    box-shadow                  : 0 0 1rem dimgray;
}

.popover-body {
    padding : 0;
}

body > :first-child tbody tr.active {
    outline        : 2px solid white;
    outline-offset : -2px;
}

body:has(.popover) > :first-child tbody tr:not(.active) {
    pointer-events : none;
    filter         : blur(3px);
    opacity        : 0.75;
}

thead tr {
    z-index: 1;
}