/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */

html, body {
    font-family: Arial !important;
}

body {
    padding-bottom: 20px;
}

@font-face {
    font-family: "Roboto-Regular";
    src: url("https://login.fahrstuhl-spielen.de/webfonts/Roboto-Regular.woff2") format('woff2');
}

.mini-logo {
    width: 100%;
    background-image: url(/images/LogoWhite.svg);
    background-size: cover;
    height: 10;
    padding: -100; /* reset */
    padding-bottom: calc(20%);
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

.carousel-indicators [data-bs-target] {
    background-color: #000061;
    opacity: 1;
}

.carousel-indicators .active {
    background-color: #c8ab00;
}

.carousel {
    padding-bottom: 50px;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

.modaldialog {
    display: block;
    background-color: rgba(10,10,10,.8);
    backdrop-filter: blur(8px);
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

/* Slider (Host) */

.sliderArea {
    position: relative;
    margin: auto;
    width: 100%;
    vertical-align: middle;
}

.slider {
    -webkit-appearance: none;
    width: 90%;
    float: right;
    height: 15px;
    border-radius: 5px;
    background-color: #000061;
    outline: none;
}

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 19px;
        height: 25px;
        border-radius: 50%;
        background-image: url('/images/LogoMini.png');
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 19px;
        height: 25px;
        border-radius: 10%;
        background-image: url('/images/LogoMini.png');
        cursor: pointer;
    }

.sliderValue {
    float: left;
    width: 10%;
    color: black;
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: #71B1C7;
    background-color: #71B1C7;
}

.custom-control-label:before:focus {
    box-shadow: 0 0 0 0.2rem rgba(113,177,199, 0.25);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: #000061;
}

.player-action {
    display: inline-flex;
    padding-right: 5px;
    font-family: sans-serif;
}

.player-action-icon {
    padding-right: 5px;
}

.player-circle {
    width: 18pt;
    height: 18pt;
    display: inline-block;
    color: white;
    text-align: center;
    vertical-align: middle;
    padding-top: 2pt;
    font-size: smaller;
    font-weight: normal;
}

.player-profilecolor-dark {
    color: white;
}

.player-profilecolor-light {
    color: black;
}

a {
    color: #c8ab00;
    text-decoration: none;
    background-color: transparent
}

    a:hover {
        color: #c8ab00;
        text-decoration: underline
    }

.extended-background {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.playground-area {
    z-index: 20;
}

.playingcard-area {
    padding: unset;
    margin: unset;
    min-height: 120pt;
}

.playingcard-area-other {
    padding: unset;
    margin: unset;
    min-height: 60pt;
}

.controlarea {
    min-height: 45pt;
}

.rankingcard {
    font-size: 1.5em;
    background-color: white;
}

.playingcard {
    font-size: 5.5em;
    display: normal;
    white-space: nowrap;
    display: inline-block;
    padding-left: .2em;
    padding-right: .2em;
    background-color: white;
}

@media screen and (max-width: 1100px) {
    .playingcard {
        font-size: 5.5em;
        display: normal;
        white-space: nowrap;
        display: inline-block;
        padding-left: unset;
        padding-right: unset;
    }
}

.playingcard-red {
    color: red;
}

    .playingcard-red a {
        color: red;
    }

        .playingcard-red a:hover {
            text-decoration: overline solid;
        }

.playingcard-black {
    color: black;
}

    .playingcard-black a {
        color: black;
    }

        .playingcard-black a:hover {
            text-decoration: overline solid;
        }

.playingcard-orange, .playingcard-red-alternative {
    color: #e25e00;
}

    .playingcard-orange a, .playingcard-red-alternative a {
        color: #e25e00;
    }

        .playingcard-orange a:hover, .playingcard-red-alternative a:hover {
            text-decoration: overline solid;
        }

.playingcard-green, .playingcard-black-alternative {
    color: darkgreen;
}

    .playingcard-green a, .playingcard-black-alternative a {
        color: darkgreen;
    }

        .playingcard-green a:hover, .playingcard-black-alternative a:hover {
            text-decoration: overline solid;
        }

.playingcard-neutral {
    color: #c8ab00;
    font-size: 2.75em;
}

.playingcard-name {
    color: #c8ab00;
    font-size: 0.1em;
}

.playingcard-stack {
    text-decoration: none !important;
    margin-left: unset;
    margin-right: unset;
}

.playingcard-inactive {
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
    pointer-events: none;
}

.playingcard-dropped {
    padding: unset;
}

.playingcard-minus-4 {
    transform: rotate(-40deg);
    position: absolute;
    z-index: -9;
    margin-left: -22.5%;
}

@media screen and (max-width: 1100px) {
    .playingcard-minus-4 {
        transform: rotate(-40deg);
        position: absolute;
        z-index: -9;
        margin-left: -32.5%;
    }
}

.playingcard-minus-3 {
    transform: rotate(-30deg);
    position: absolute;
    z-index: -8;
    margin-left: -17.5%;
}

@media screen and (max-width: 1100px) {
    .playingcard-minus-3 {
        transform: rotate(-30deg);
        position: absolute;
        z-index: -8;
        margin-left: -25.0%;
    }
}

.playingcard-minus-2 {
    transform: rotate(-20deg);
    position: absolute;
    z-index: -7;
    margin-left: -12.5%;
}

@media screen and (max-width: 1100px) {
    .playingcard-minus-2 {
        transform: rotate(-20deg);
        position: absolute;
        z-index: -7;
        margin-left: -17.5%;
    }
}

.playingcard-minus-1 {
    transform: rotate(-10deg);
    position: absolute;
    z-index: -6;
    margin-left: -7.5%;
}

@media screen and (max-width: 1100px) {
    .playingcard-minus-1 {
        transform: rotate(-10deg);
        position: absolute;
        z-index: -6;
        margin-left: -10.0%;
    }
}

.playingcard-0 {
    transform: rotate(0deg);
    position: absolute;
    z-index: -5;
    margin-left: -2.5%;
}

@media screen and (max-width: 1100px) {
    .playingcard-0 {
        transform: rotate(+0deg);
        position: absolute;
        z-index: -5;
        margin-left: -2.5%;
    }
}

.playingcard-plus-1 {
    transform: rotate(+10deg);
    position: absolute;
    z-index: -4;
    margin-left: 2.5%;
}

@media screen and (max-width: 1100px) {
    .playingcard-plus-1 {
        transform: rotate(+10deg);
        position: absolute;
        z-index: -4;
        margin-left: 5.0%;
    }
}

.playingcard-plus-2 {
    transform: rotate(+20deg);
    position: absolute;
    z-index: -3;
    margin-left: 7.5%;
}

@media screen and (max-width: 1100px) {
    .playingcard-plus-2 {
        transform: rotate(+20deg);
        position: absolute;
        z-index: -3;
        margin-left: 12.5%;
    }
}

.playingcard-plus-3 {
    transform: rotate(+30deg);
    position: absolute;
    z-index: -2;
    margin-left: 12.5%;
}

@media screen and (max-width: 1100px) {
    .playingcard-plus-3 {
        transform: rotate(+30deg);
        position: absolute;
        z-index: -2;
        margin-left: 20.0%;
    }
}

.playingcard-plus-4 {
    transform: rotate(+40deg);
    position: absolute;
    z-index: -1;
    margin-left: 17.5%;
}

.playingcard-highest {
    text-decoration: underline overline;
    background-color: #eee;
}

@media screen and (max-width: 1100px) {
    .playingcard-plus-4 {
        transform: rotate(+40deg);
        position: absolute;
        z-index: -1;
        margin-left: 27.5%;
    }
}

.prediction-invisible {
    visibility: hidden;
}

.confirmation-invisible {
    visibility: hidden;
}

.list-inline-item {
    margin-top: -28px;
    margin-bottom: -16px;
}

.navbar-elevator {
    background-color: #000061;
    color: #fff;
}

    .navbar-elevator a {
        color: #fff;
    }

        .navbar-elevator a:hover {
            color: #c8ab00;
        }

/* SECTION PRIMARY*/
.bg-primary {
    background-color: #c8ab00 !important;
}

.border-primary {
    border-color: #c8ab00 !important;
}

.text-primary {
    color: #c8ab00 !important;
}

.btn-primary {
    border-color: #c8ab00 !important;
    background-color: #c8ab00 !important;
}

.badge-primary {
    background-color: #c8ab00 !important;
    border-color: #c8ab00 !important;
}

/* SECTION INFO */

.bg-info {
    background-color: #000061 !important;
}

.border-info {
    border-color: #000061 !important;
}

.text-info {
    color: #000061 !important;
}

.btn-info {
    background-color: #000061 !important;
    border-color: #000061 !important;
}

.badge-info {
    background-color: #000061 !important;
    border-color: #000061 !important;
}

/* SECTION DARK */

.bg-dark {
    background-color: #000 !important;
}

.border-dark {
    border-color: #000 !important;
}

.text-dark {
    color: #000 !important;
}

.btn-dark {
    background-color: #000 !important;
    border-color: #000 !important;
}

.badge-dark {
    background-color: #000 !important;
    border-color: #000 !important;
}

/* ---------------------------------------------- */

.hidden {
    visibility: hidden;
}

.cookie {
    font-size: initial;
}

.footer-version {
    font-size: x-small;
    color: gray;
}

@font-face {
    font-family: "Fahrstuhl";
    src: url("/webfonts/Fahrstuhl.woff2") format('woff2');
}

.fahrstuhl {
    font-family: Fahrstuhl;
}

.chatmessage {
    border: 1px solid #c1c3c4;
    background-color: #f8f9fa;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
}


/* ---------------- Tooltip ---------------- */

.tooltip-wrapper {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    /*cursor: help;*/
}

.wrapperTooltip {
    visibility: hidden;
    position: absolute;
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    background-color: #363636;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 1;
}

.wrapper::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip-wrapper:hover span {
    visibility: visible;
}

.splashscreen-outerbox {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.splashscreen-innerbox {
    display: table-cell;
    vertical-align: middle;
}

.table-horizontalscroll {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch !important;
}

p:empty {
    visibility: hidden;
}