/******************* GRUNDGERÜST *******************/

.tab-headline {
    position: relative;
    box-sizing: content-box;
    background: linear-gradient(115deg, #10232D 0%, #172B38 45%, #202744 100%);
    padding: 10px;
    text-align: center;
    font-size: 20px;
    color: #00B847;
    text-transform: lowercase;
    width: 290px;
    border: 1px solid #315669;
}

.tab-headline::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 30px;
    height: 12px;
    border-top: 3px solid #00B847;
    border-left: 3px solid #00B847;
    box-sizing: border-box;
    pointer-events: none;
}

.tab-headline::after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 30px;
    height: 12px;
    border-bottom: 3px solid #00B847;
    border-right: 3px solid #00B847;
    box-sizing: border-box;
    pointer-events: none;
}

.tab-body {
    height: 160px;
    overflow: auto;
    background: linear-gradient(120deg, #10232D 0%, #142635 55%, #202744 100%);
    padding: 15px;
    font-family: verdana;
    font-size: 10px;
    color: #D4E0EA;
    text-align: justify;
}

.tab-body b {
    color: #00B847;
    font-weight: bold;
    text-transform: uppercase;
}

/******************* FAKTEN & DROPDOWN *******************/

.tab-facts {
    min-width: 90px;
    background: linear-gradient(115deg, #00882E, #00B847);
    font-size: 9px;
    color: #F0F7F4;
    text-align: center;
    padding: 4px 8px 3px 8px;
    display: inline-block;
    margin: 5px 5px 0px 5px;
}

.tab-facts-l {
    min-width: 90px;
    background: linear-gradient(115deg, #00882E, #00B847);
    font-size: 9px;
    color: #F0F7F4;
    text-align: center;
    padding: 4px 8px 3px 8px;
    display: inline-block;
    margin: 5px 10px 0px 5px;
    float: left;
}

.tab-facts-r {
    min-width: 90px;
    background: linear-gradient(115deg, #202744, #353567);
    font-family: 'Kite One', sans-serif;
    font-size: 9px;
    color: #D4E0EA;
    text-transform: uppercase;
    text-align: center;
    padding: 4px 8px 3px 8px;
    display: inline-block;
    margin: 5px 5px 0px 10px;
    float: right;
    border-left: 3px solid #7775F2;
}

.tab-links {
    width: 140px;
    background: linear-gradient(115deg, #172B38, #202744);
    font-family: 'Kite One', sans-serif;
    font-size: 9px;
    color: #D4E0EA;
    text-transform: uppercase;
    padding: 2px 8px 1px 8px;
    margin: 5px 5px 0px 5px;
    border-left: 3px solid #7775F2;
    border-radius: 0;
}

/******************* TABS BEI 'INPLAY' *******************/

.tabs input[type=radio] {
    position: absolute;
    display: none;
}

.tabs {
    width: 282px;
    height: 160px;
    float: none;
    list-style: none;
    position: relative;
    padding: 0;
    margin: auto;
}

.tabs li {
    text-align: center;
    display: inline;
}

/* Schrift-Icons für versch. Tabs */

.tabs label {
    display: inline-block;
    color: #7775F2;
    font-size: 35px;
    font-weight: bold;
    border: none;
    border-left: 3px solid #7775F2;
    background: transparent;
    padding: 3px 10px;
    margin: 5px;
    position: relative;
    top: 0;
    cursor: pointer;
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

/* Ausgewählter Tab */

.tabs input[type=radio]:checked ~ label {
    color: #FFFFFF;
    top: 0;
    border-left-color: #7775F2;
}

[type=radio]:checked ~ label ~ .tab-content {
    display: block;
}

/* Tab-Inhalt */

.tab-content {
    width: 290px;
    height: 90px;
    overflow: auto;
    font-size: 10px;
    color: #D4E0EA;
    text-align: justify;
    padding-right: 5px;
    z-index: 2;
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    box-sizing: border-box;
    -webkit-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

/******************* SCROLLBARS *******************/

.tab-scroll::-webkit-scrollbar {
    width: 6px;
}

.tab-scroll::-webkit-scrollbar-track-piece {
    background-color: #10232D;
}

.tab-scroll::-webkit-scrollbar-thumb:vertical {
    height: 10px;
    background: linear-gradient(180deg, #7775F2, #315669);
}