@font-face {
    font-family: 'Rubik';
    font-style: normal;
    src: url('/assets/fonts/Rubik-VariableFont_wght.ttf') format('truetype-variations');
}

/** {
    margin: 0!important;
    padding: 0!important;
    box-sizing: border-box;
}*/

:root {
    --webfl-primary: #2d2c38;
    --webfl-secondary: #27262e;
    --webfl: #54bcd4;
    --darkblue: #050a18;
    --webfl-gold: #ffc107;
    --red: #f16b6b;
    --darkred: #d64040;
    --light: #e7e7e7;
    --grey: #6b6b6b;
    --light-grey: #a3a3a3;
    --trans: all 300ms ease-in-out;
    --mkt: #d010a1;
    --bsa: #0ec577;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--webfl-secondary);
    font-family: 'Rubik', Arial, sans-serif;
}

.table-dark {
    --bs-table-color: #fff;
    --bs-table-bg: var(--webfl-primary)!important;
    --bs-table-border-color: #373b3e;
    --bs-table-striped-bg: var(--webfl-secondary) !important;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: var(--webfl) !important;
    --bs-table-hover-color: var(--webfl-secondary) !important;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
    border-radius: 10px;
}

.text-dark-blue{color: var(--darkblue);}
.text-cyan{color: var(--webfl);}
.text-light{color: var(--light);}
.text-grey{color: var(--grey);}
.text-light-grey {color: var(--light-grey);}
.text-gold{color: var(--webfl-gold);}
.text-light-dark{color: var(--webfl-secondary);}
.text-silber{ color: var(--light-grey);}

.bg-webfl-ld{background: var(--webfl-primary);}
.bg-webfl-d{background: var(--webfl-secondary);}
.bg-mkt{background:  var(--mkt);}
.bg-bsa{background: var(--bsa);}

.fs-8{font-size: 8px;}
.fs-12{font-size: 12px;}
.fs-13{font-size: 13px;}
.fs-14{font-size: 14px;}
.fs-15{font-size: 15px;}
.fs-18{font-size: 18px;}
.fs-20{font-size: 20px;}
.fs-2r{font-size: 2rem;}
.fs-1r{font-size: 1rem;}

.fw-2{font-weight: 200;}
.fw-3{font-weight: 300;}
.fw-4{font-weight: 400;}
.fw-5{font-weight: 500;}
.fw-6{font-weight: 600;}
.fw-7{font-weight: 700;}

.kasten {
    position: relative !important;
    width: 100% !important;
}

.ergebnisse-tabs {
    /* background: var(--webfl-secondary);
    padding: 20px; */
    border-radius: 15px;
}

.btn:disabled, .btn.disabled, fieldset:disabled .btn {
    visibility: hidden;
    text-decoration: line-through !important;
    color: var(--darkblue) !important;
}

.btn:disabled, .btn.disabled::after, fieldset:disabled .btn {
    visibility: visible;
    content: "deaktiviert";
    position: relative;
    text-transform: capitalize;
    background: var(--darkred);
    border-radius: 10px;
    padding: 10px;
    display: inline-block;
    width: 100%;
}

.card-first-place {
    background-color: #665b1b !important;
    padding-bottom: 10px !important;
}

.card-second-place {
    background-color: #575757 !important;
}

.card-third-place {
    background-color: #5e3c2e !important;
}

.btn-outline-sm {
    font-family: inherit;
    background: transparent;
    border: 2px solid var(--webfl-gold);
    border-radius: 10px;
    padding: 4px;
    font-weight: 500;
    transition: var(--trans);
}

.btn-outline-sm:hover {
    background: var(--webfl-primary) !important;
    color: var(--webfl) !important;
}

.schatten-rund {
    box-shadow: 0px 3px 7px 0px rgba(1,1,1,0.5);
    border-radius: 10px;
}

.schatten {
    box-shadow: -2px 2px 7px 0px rgba(1,1,1,0.5);
}

.blurred-bg {
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    background-color: rgba(45,44,56,0.6) !important;
}

/* Tabelle */

.bdr {
    overflow: hidden!important;
}

.navi {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /*min-height: 100vh;*/
    min-width: auto;
    background: rgba(26, 29, 32, 0.5);
    font-family: 'Rubik', Arial, sans-serif;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.navigation {
    position: relative;
    width: 350px; /* 70px x5 = 350 */
    height: 70px;
}
.navigation ul {
    display: flex;
    padding-left: 0;
}
.navigation ul li {
    position: relative;
    list-style: none;
    width: 70px !important;
    height: 70px !important;
    z-index: 1;
}

.navigation ul li a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    text-align: center;
    width: inherit;
    height: inherit;
}

.navigation ul li a .bi {
    position: relative;
    line-height: 75px;
    transition: 0.5s;
    font-size: 30px;
}

.navigation ul li.active a .bi {
    font-size: 20px;
    transform: translateY(-15px);
    text-shadow: 0 0 5px black;
}

.navigation ul li a .text {
    position: absolute;
    font-size: 15px;
    color: white;
    bottom: 10px;
    font-weight: 300;
    transition: 0.5s;
    text-transform: uppercase;
    transform: scale(0);
    text-shadow:  0 0 5px black;
}

.navigation ul li.active a .text {
    transform: scale(1);
    font-size: 15px;
    font-weight: 600;
}

.indicator {
    position: absolute;
    left: 0;
    width: 70px;
    height: 70px;
    background: red;
    border-radius: 10px;
    transition: 0.5s;
}

.navigation ul li:nth-child(1).active ~ .indicator {
    background: #d010a1;
    box-shadow: 0 10px 25px #d010a1;
    transform: translateX(calc(70px * 0));
}
.navigation ul li:nth-child(2).active ~ .indicator {
    background: #0ec577;
    box-shadow: 0 10px 25px #0ec577;
    transform: translateX(calc(70px * 1));
}
.navigation ul li:nth-child(3).active ~ .indicator {
    background: #087990;
    box-shadow: 0 10px 25px #087990;
    transform: translateX(calc(70px * 2));
}
.navigation ul li:nth-child(4).active ~ .indicator {
    background: #0082c2;
    box-shadow: 0 10px 25px #0082c2;
    transform: translateX(calc(70px * 3));
}
.navigation ul li:nth-child(5).active ~ .indicator {
    background: #900841;
    box-shadow: 0 10px 25px #900841;
    transform: translateX(calc(70px * 4));
}

.event-nav {
    transition: 0.5s;
    transform: scale(0.8);
}
.event-nav:hover {
    transform: scale(1);
    transform: translateY(-30px);
}
.event-nav a img{
    transition: 0.5s;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}
.event-nav:hover a img {
    border-bottom: 5px solid #f1f1f1;
    box-shadow: 0 10px 25px #171717;
}

/* Mobile Screen Adjustments */

@media only screen and (max-width: 768px) {
    .nav {
        position: sticky!important;
        bottom: 0!important;
    }
}

@media (max-width: 800px) {
    #banner {
        height: 200px;
        max-height: 200px;
    }
}

@media (min-width: 800px) {
    #banner {
        height: 500px;
    }
}

#reg_btn:disabled {
    background-color: red !important;
    opacity:0.5 !important;
}

.spotBtn {
    margin-left: 12.8px;
    color: var(--bs-btn-color);
}

.spotBtn:hover {
    color: rgba(30,215,96,1) !important;
    border-radius: 100px;
}

/*ul.timeline-3 {
    list-style-type: none;
    position: relative;
}
ul.timeline-3:before {
    content: " ";
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    top: 40px;
    left: 29px;
    width: 2px;
    height: auto;
    z-index: 400;
}
ul.timeline-3 > li {
    margin: 20px 0;
    padding-left: 20px;
}
ul.timeline-3 > li:before {
    content: " ";
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid var(--webfl-gold);
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
} */

.masked-overflow {
    /* scroll bar width, for use in mask calculations */
    --scrollbar-width: 8px;

    /* mask fade distance, for use in mask calculations */
    --mask-height: 32px;

    /* If content exceeds height of container, overflow! */
    overflow-y: auto;

    /* Our height limit */
    height: 300px;

    /* Need to make sure container has bottom space,
  otherwise content at the bottom is always faded out */
    padding-bottom: var(--mask-height);

    /* Keep some space between content and scrollbar */
    padding-right: 20px;

    /* The CSS mask */

    /* The content mask is a linear gradient from top to bottom */
    --mask-image-content: linear-gradient(
            to bottom,
            transparent,
            black var(--mask-height),
            black calc(100% - var(--mask-height)),
            transparent
    );

    /* Here we scale the content gradient to the width of the container
  minus the scrollbar width. The height is the full container height */
    --mask-size-content: calc(100% - var(--scrollbar-width)) 100%;

    /* The scrollbar mask is a black pixel */
    --mask-image-scrollbar: linear-gradient(black, black);

    /* The width of our black pixel is the width of the scrollbar.
  The height is the full container height */
    --mask-size-scrollbar: var(--scrollbar-width) 100%;

    /* Apply the mask image and mask size variables */
    mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
    mask-size: var(--mask-size-content), var(--mask-size-scrollbar);

    /* Position the content gradient in the top left, and the
  scroll gradient in the top right */
    mask-position: 0 0, 100% 0;

    /* We don't repeat our mask images */
    mask-repeat: no-repeat, no-repeat;
}

.nowrap {
    white-space: nowrap !important;
}

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}