/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 13.11.2022, 13:46:21
    Author     : andy
*/

* { box-sizing: border-box; }

body {
    font-family: sans-serif;
}

select {
    font-size: smaller;
}

button i {
    font-size: large;
    vertical-align: middle;
}

button span {
    padding: 0 1em;
    height: 2em;
    line-height: 2em;
    vertical-align: middle;
}


.option-not-disabled, .option-not-disabled option {
    background-color: white !important;
    color: blue !important;
}

.team, .team-s, .team-xs {
    text-align: left;
    float: left;
}

#main {
    padding-bottom: 6em;    
}

.table {
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
/*
.table tr {
    border-bottom: 1px solid lightgray;
    border-top: 1px solid lightgray;
}
*/
thead th {
    height: 1em;
    font-size: smaller;
    font-weight: lighter;
}

.thead {
    font-size: smaller;
    font-weight: lighter;
}


.datum {
    font-size: x-small; 
    font-weight: lighter; 
    height: 1em; 
    padding: 1px;
    text-indent: 1em;
    background-image: linear-gradient(to bottom right, whitesmoke, lightsteelblue);
}

.spieltag {
    font-size: small; 
    height: 1.5em; 
    padding: 1px;
    text-indent: 0.5em;
    background-image: linear-gradient(to bottom right, whitesmoke, lightsteelblue);
}

.zeit {
    font-size: x-small; 
    font-weight: lighter; 
    height: 1em; 
    text-indent: 1.5em; 
    padding: 0;
    border-top: 1px solid lightsteelblue !important;
    border-bottom: 2px solid lightsteelblue !important;
    border-left: 2px solid lightsteelblue !important;
}

.liga {
    font-size: small; 
    font-weight: lighter; 
    height: 1.5em; 
    padding: 0;
    border-top: 1px solid lightsteelblue !important;
    border-bottom: 2px solid lightsteelblue !important;
    border-left: 2px solid lightsteelblue !important;
}

.beendet {
    width: 3em;
    height: 2em;
    background-image: url("../images/stempel_beendet.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;

}

.checkbox-lg {
    /* Double-sized Checkboxes */
    -ms-transform: scale(1.3); /* IE */
    -moz-transform: scale(1.3); /* FF */
    -webkit-transform: scale(1.3); /* Safari and Chrome */
    -o-transform: scale(1.3); /* Opera */
}


.bi-check-lg {
    color: #6ea02d;
}

.bi-x-lg {
    color: #cbcbcb;
}

.bi-overlay {
    position: absolute;
    top: -10%;
    right: 20%;
    font-size: xx-large;
    font-weight: bold;
}

.bi-overlay-x {
    color: red;
    font-size: x-large;
}

.platz {
    max-width: 2em;
    text-align: left;
}

.user-pic {
    background-color: white;
}

.user-pic:hover {
    transform: translate(100%,100%);
    transform: scale(5);
}

.diagonal-text {
    position: relative;
    margin-bottom: 20%;
    transform: rotate(-25deg);
    transform-origin: center;
    font-size: smaller;
    text-align: left;

}

/*
CSS für Siegertreppe
*/
.siegertreppe {
    margin: 0 auto;
    width: 400px;
    height: 400px;
    background-image: url("../images/Siegertreppe.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.container-sieger span {
    width: 8em;
}

.sieger-1 {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: goldenrod;
    text-shadow: 10px 11px 12px goldenrod;
    font-size: 2.2vh
}

.sieger-2 {
    position: absolute;
    top: 23%;
    left: 50%;
    margin-left: -8em;
    text-align: left;
    color: slategrey;
    text-shadow: 10px 11px 12px lightslategrey;
    font-size: 2vh;
}

.sieger-3 {
    position: absolute;
    top: 24%;
    left: 50%;
    margin-left: 0.5em;
    text-align: right;
    color: peru;
    text-shadow: 10px 11px 12px rosybrown;
    font-size: 1.9vh;
}

/* 
Farbenklassen bei den Tipppunkten
*/
.punkte_4 {
    color: darkorange;
}

.punkte_3 {
    color: red;
}

.punkte_2 {
    color: green;
}

.punkte_1 {
    color: slateblue;
}

.punkte_0 {
    color: darkgray;
}


/*
Farben für Tabellen und Ranglisten
*/

#Champion {
    background-color: rgba(183, 226, 192, 0.9);
}

#Champion:hover {
    background-color: rgba(183, 226, 192, 0.6);
}

#Champion_BL2 {
    background-color: rgba(183, 226, 192, 0.9);
}

#Champion_BL2:hover {
    background-color: rgba(183, 226, 192, 0.6);
}

#ChampionsLeague {
    background-color: rgba(183, 226, 192, 0.7);
}

#ChampionsLeague:hover {
    background-color: rgba(183, 226, 192, 0.5);
}

#ChampionsLeague_Quali {
    background-color: rgba(183, 226, 192, 0.6);
}

#ChampionsLeague_Quali:hover {
    background-color: rgba(183, 226, 192, 0.5);
}

#Uefa {
    background-color: rgba(183, 226, 192, 0.3);
}

#Uefa:hover {
    background-color: rgba(183, 226, 192, 0.2);
}

#Uefa_Quali {
    background-color: rgba(183, 226, 192, 0.15);
}

#Uefa_Quali:hover {
    background-color: rgba(183, 226, 192, 0.1);
}

#Relegation {
    background-color: rgba(242, 184, 191, 0.3);
}

#Relegation:hover {
    background-color: rgba(242, 184, 191, 0.2);
}

#Abstieg {
    background-color: rgba(242, 184, 191, 0.4);
}

#Abstieg:hover
{
    background-color: rgba(242, 184, 191, 0.2);
}

#Relegation_Auf {
    background-color: rgba(183, 226, 192, 0.6);
}

#Relegation_Auf:hover {
    background-color: rgba(183, 226, 192, 0.4);
}

/*
*/

#pwd-new-feedback {
    width: 60%;
    height: 2em;
    line-height: 2em;
    float: right;
    text-align: right;
    color: #C1C1C1;
    border: 1px solid #C1C1C1;
    border-radius: 5px;
    padding-right: 1em;
    font-size: small;
}

/*
live
*
.live {
    display: flex;
    
    
    vertical-align: bottom;
    justify-content: center;
}
*/
.live, .live-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: red;
    font-weight: normal;
    font-style:  oblique;
    color: red;
    animation: blinker 3s linear infinite;

}

.live {
    font-size: smaller;
}

.live-caption {
    margin-right: 3em;
}

.live:after {
    content: "";
    margin-left: 1em;
}

.live-caption:after {
    content: "live!";
    margin-left: 1em;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/*
Bootstrap - Overwrite
*/

.main {
    margin-top: 4em;
}

.navbar-nav {
    right:0;
}

.navbar-brand {
    font-size: smaller;
}

.nav-link {
    float: right;
    margin-right: 1em; 
}

.dropdown-menu {
    right: 0 !important;
    left: auto !important;
    text-align: right;
}

.carousel-caption, .caption {
    position: static !important;
    margin-top: 1em !important;
    height: 1.5em !important;
    padding-top: 1.25rem;
    padding-bottom: 1.5rem !important;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: lightslategray !important;
    font-weight: normal;
    font-size: medium;
}  

.table td, .table th {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

/*
Carousel
*/

.carousel-control-prev,
.carousel-control-next{
    width: 3rem;
}

.carousel-control-prev {
    left: -3rem;

}

.carousel-control-next {
    right: -3rem;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    position: fixed;
    top: 50%;
    background-size: cover;
}

.carousel-control-prev-icon {
}

.carousel-indicators {
    position: fixed;
    bottom: 3em;
}
/*
.carousel-indicators .active {
    background-color: black;
}

.carousel-indicators li {
    background-color: lightgray;
}

/*
*
*/

.card-body #btn-prev {
    position: relative;
    left: 0;
}

.card-body #btn-next {
    position: relative;
    right: 0;
}

.card-body .arrow {
    font-size: larger;
    cursor: pointer;
}

.card-body .arrow:hover {
}

/*
*
*/

.accordion-header {
font-size: smaller;    
}

.accordion-body {
    font-size: small;
}

.accordion-button {
    padding: 0.5em;
}

/*
*
*/
@media screen and (max-width: 576px) {
    .table, .container, .container-fluid {
        font-size: small;
    }

    .caption, .carousel-caption {
        font-size:  x-small;
        font-weight: bold;
    }

    .container-carousel {
        padding-left: 3em;
        padding-right: 3em
    }
}

@media screen and (min-width: 768px) {
    .live:after {
        content: "live!";
    }
}