DIV.center-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

P {
    margin: 0;
}

.dist {
    margin-top: 1em;
    margin-bottom: 1em;
}

.min-w320px {
    width: 100%;
    min-width: 360px;
    margin-right: 10px;
}

.vh90 {
    height: 90vh;
}

.tobottom {
    width: 100%;
    position: absolute;
    bottom: 10px;
    left: 0;
}

.font-bold {
    font-weight: 700;
}

.font-xbold {
    font-weight: 900;
}


.logo-top {
    background-image: url("svg/logo_swoomee_klein1x.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 2.7em;
    width: 100%;
    margin: 5px;
}

.logo-top-left {
    background-image: url("svg/web_header_logo_claim.svg");
    background-repeat: no-repeat;
    background-size: 13em;
    background-position: center;
    height: 4em;
    width: 100%;
    margin: 0px;
    text-align: right;
}

input.center {
    width: 250px;
    margin-left: auto;
    margin-right: auto;
}

.refresh {
    background-image: url("svg/web_header_aktualisieren_ohnetext.svg");
    background-repeat: no-repeat;
    background-size: 2em;
    background-position: center;
    height: 2.2em;
    width: 2.2em;
    margin-top: .9em;
    margin-bottom: 1em;
    text-align: right;
    background-color: transparent;
}


.pressed-yellow:active {
    background-color: #d7ed00;
}


.topmargin10 {
    margin-top: 10px;
}


h1.title {
    background-color: white;
    font-weight: 600;
    font-size: 2em;
    text-align: center;
    width: 100%;
}

.accordion-full {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}


.bg-swoomee-xdark-top-left {
    color: white;
    font-weight: 600;
    background-color: #165d79;
    line-height: 1em;
    padding: 6px;
    padding-left: 10px;
    border-top-left-radius: 6px;
}

.bg-swoomee-xdark-top-right {
    color: white;
    font-weight: 600;
    background-color: #165d79;
    line-height: 1em;
    padding: 6px;
    text-align: right;
    padding-right: 10px;
    border-top-right-radius: 6px;
}


.set-fixed {
    table-layout: fixed;
    width: 100%;
}

.set-num {
    width: 10%;
}

.set-points {
    width: 45%;
}


.content-center {
    align-content: center;
    text-align: center;
}

.col-w20 {
    width:20%;
    margin-left:0;
    margin-right:0;
    float: left;
}

.small-font {
    font-size: 0.6em;
    font-weight: 400;
    line-height: 1em;
}

.lineh1 {
    margin-top: 2px;
    line-height: 1em;
}

.tiny-font {
    font-size: 0.75em;
    font-weight: 500;
    font-family: 'Exo';
    line-height: 1em;
}

.font-bold {
    font-weight: 700;
}

.text-center {
    text-align: center;
}

.place-bottom {
    position: relative;
    top: 2.4em;
}

.place-bottom-2 {
    position: relative;
    top: 0.7em;
}

.place-bottom-1x {
    vertical-align: top;
    position: relative;
    top: .8em;
}

.top1 {
    margin-top: 0px;
}

.btn:focus {
    box-shadow: 0 0 0 0 transparent;
}

.btn:active {
    background-image: inherit;
}


.btn:hover {
    background-image: inherit;
}

.plus-2x, .plus-2x:focus, .plus-2x:hover {
    background-image: url("svg/web_tickerer_pluspunkt_blue.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 3em;
    width: 3em;
    -webkit-appearance: none;
    outline: 0;
}

.minus-2x, .minus-2x:focus, .minus-2x:active, .minus-2x:hover {
    background-image: url("svg/web_tickerer_minuspunkt_blue.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 3em;
    width: 3em;
}

.start-2x, .start-2x:focus, .start-2x:active, .start-2x:hover {
    background-image: url("svg/web_tickerer_spielstart_green.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 2.5em;
    width: 2.5em;
}

.stop-2x, .stop-2x:focus, .stop-2x:active, .stop-2x:hover {
    background-image: url("svg/web_tickerer_spielstop_red.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 2.5em;
    width: 2.5em;
    -webkit-appearance: none;
}

.stop-3x, .stop-3x:focus, .stop-3x:active, .stop-3x:hover {
    background-image: url("svg/web_tickerer_spielstop_red.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 4.5em;
    width: 4.5em;
    -webkit-appearance: none;
}

.next-2x, .next-2x:focus, .next-2x:active, .next-2x:hover {
    background-image: url("svg/web_tickerer_satzvor_blue.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 2.5em;
    width: 2.5em;
    -webkit-appearance: none;
}

.reset-2x, .reset-2x:focus, .reset-2x:hover, .reset-2x:active {
    background-image: url("svg/web_tickerer_zurueck_orange.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 2.5em;
    width: 2.5em;
    -webkit-appearance: none;
}


.prev-2x, .prev-2x:focus, .prev-2x:hover, .prev-2x:active {
    background-image: url("svg/web_tickerer_satzzurueck_blue.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 2.5em;
    width: 2.5em;
    -webkit-appearance: none;
}

.prev-2x, .prev-2x:focus, .prev-2x:hover, .prev-2x:active {
    background-image: url("svg/web_tickerer_satzzurueck_blue.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 2.5em;
    width: 2.5em;
    -webkit-appearance: none;
}


.pause-1x, .pause-1x:focus, .pause-1x:active, .pause-1x:hover {
    background-image: url("svg/web_tickerer_auszeit_blue.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 2.25em;
    width: 2.25em;
}

.change-1x, .change-1x:focus, .change-1x:active, .change-1x:hover {
    background-image: url("svg/web_tickerer_seitenwechsel_blue.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 2.25em;
    width: 2.25em;
}

.expand-always {
    max-height: 52rem !important;
    height: auto !important;
    transition: none !important;
}

div.team-link {
    text-align: left;
    padding: 1em;
    line-height: 2em;
}


@media (min-width: 600px) {
    .expand-gt-sm {
        max-height: 52rem !important;
        height: auto !important;
        transition: none !important;
    }

    .swoomee-accordion {
        border-radius: 6px;
        margin: 3px;
    }
}


#menuToggle {
    display: block;
    position: relative;
    top: 50px;
    left: 50px;

    z-index: 1;

    -webkit-user-select: none;
    user-select: none;
}

#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */

    -webkit-touch-callout: none;
}


/* [MENU] */
#page-nav {
    background: transparent;
}

#page-nav label, #page-nav ul, #page-nav li {
    display: inline-block;
}

#page-nav label, #hamburger {
    display: none;
}

#page-nav label {
    color: #fff;
    background: transparent;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
}

/* [MENU ITEMS] */
#page-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#page-nav ul li {
    padding: 10px;
    box-sizing: border-box;
}

#page-nav ul li a {
    color: #fff;
    text-decoration: none;
}


/* [SHOW HAMBURGER] */
#page-nav label {
    display: block;
    width: 2.5em;
    height: 2.3em;
    background-image: url("svg/web_hamburger_hellblau.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.5em;
}

/* [BREAK DOWN MENU INTO VERTICAL] */
#page-nav ul li {
    display: block;
}

/* [SHOW/HIDE MENU ON CHECKBOX CLICK] */
#page-nav ul {
    display: none;
}

#page-nav input:checked ~ ul {
    display: block;
}

#page-nav input:checked ~ label {
    background-image: url("svg/web_hamburger_x_hellblau.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em;

}

TD.light {
    padding-top: 3px;
    padding-bottom: 3px;
}


.bot-marg {
    margin-bottom: 5px;
}

.no-lr-padding {
    padding-left: 0;
    padding-right: 0;
}

input.game {
    width: 70px;
}

.game-id {
    margin: 0;
    font-size: .75em;
    font-weight: 600;
    text-align: center;
    width: auto;
    float: left;
}

.game-title {
    margin-right: 5px;
    font-size: .75em;
    font-weight: 600;
    text-align: right;
    width: auto;
    float: right;
}

.modal-window {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #F0F0F0;
    opacity: 0.90;
    z-index: 100;
    padding-top: 3em;
}

.modal-window::before {
    filter:blur(10px);
    background: #ffb700;
}

.icon-dot {
    border-radius: 50%;
    height: 1em;
    width: 1em;
}

.bg-red {
    background: red;
}

.bg-green {
    background: lime;
}

.bg-gray {
    background: gray;
}

.container.grid-xxl {
    max-width: 1800px;
}

.prev-2x:disabled {
    background-image: url("svg/web_tickerer_satzzurueck_grey.svg");
    opacity: 1;
}

.next-2x:disabled {
    background-image: url("svg/web_tickerer_satzvor_grey.svg");
    opacity: 1;
}

.stop-2x:disabled {
    background-image: url("svg/web_tickerer_spielstop_grey.svg");
    opacity: 1;
}

.start-2x:disabled {
    background-image: url("svg/web_tickerer_spielstart_grey.svg");
    opacity: 1;
}

.plus-2x:disabled {
    background-image: url("svg/web_tickerer_pluspunkt_grey.svg");
    opacity: 1;
}

.minus-2x:disabled {
    background-image: url("svg/web_tickerer_minuspunkt_grey.svg");
    opacity: 1;
}

.reset-2x:disabled {
    background-image: url("svg/web_tickerer_zurueck_grau.svg");
    opacity: 1;
}