.mdl-card--margin-30px {
    margin-top: 30px;
}

.mdl-card--margin-22px {
    margin-top: 22px;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: #ECEFF1;
    color: #37474F;
    font-family: 'Hind', sans-serif;
    font-weight: 300;
    font-size: 16px;
}

h1, h2, h3 {
    font-weight: 200;
}

a {
    color: #bb1107;
}

.trennbalken {
    background: #bb1107;
    color: white;
    width: 100%;
    border-radius: 2px;
    padding: 5px;
    margin-bottom: 10px;
    padding: 10px;
}

/* section.container {
    margin: 0;
    padding: 0;
    align-items: center;
} */

/* ###################################################################################################################
---------------------------------------------------- Startseite -----------------------------------------------------
 ################################################################################################################## */
.start_logo {
    float: left;
    margin-right: 15px;
}

/* ###################################################################################################################
---------------------------------------------------- Profilseite -----------------------------------------------------
 ################################################################################################################## */
/* .steckbrief {
    border: 5px solid;
    padding: 10px;
    margin: 10px;
    // display: inline-block;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 90%;
} */

.levelstatus {
    float: right;
    margin-right: 40px;
    margin-top: 30px;
}

#levelanzeige {
    border: 2px solid;
    border-radius: 5px;
    border-color: #bb1107;
    padding: 5px 0 0 5px;
    margin-bottom: 5px;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.tooltip .tooltiptext {
    top: -5px;
    right: 105%;
} */

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

/* ###################################################################################################################
---------------------------------------------------- Vereinsseite ----------------------------------------------------
 ################################################################################################################## */

.overview_levels {
    width: 800px;
    height: 700px;
    float: left;
    padding: 5px;
    background-color: darkgrey;
    position: absolute;
    left: 10px;
    top: 10px;
}

.overview_club {
    width: 800px;
    height: 700px;
    float: left;
    background-color: darkblue;
    padding: 5px;
    position: relative;
    right: 10px;
    top: 10px;
}

.overview_by_level {
    width: 1500px;
    float: left;
    padding: 5px;
    position: relative;
    left: 10px;
    top: 100px;
}

.piechart_legend {
    position: relative;
    top: 120px;
    left: 500px;
    width: 200px;
    height: 320px;
    background-color: lightgrey;
    border: 2px solid black;
}

#piechart {
    position: relative;
    top: 55px;
    left: 50px;
    width: 250px;
    height: 250px;
    margin-left: 10%;
    margin-bottom: 50%;
}
.piece {
    position: absolute;
    width: 250px;
    height: 250px;
    clip: rect(0px, 250px, 250px, 125px);
    border-radius: 125px;
}
.piece-inner {
    position: absolute;
    width: 250px;
    height: 250px;
    clip: rect(0px, 125px, 250px, 0px);
    border-radius: 125px;
    -webkit-backface-visibility: hidden;
}
/* Spezifische Einstellungen */
#piece1 {
    transform: rotate(0deg);
}
#piece1 > .piece-inner {
    background: grey;
    transform: rotate(47deg);
}
#piece2 {
    transform: rotate(47deg);
}
#piece2 > .piece-inner {
    background: darkorange;
    transform: rotate(90deg);
}
#piece3 {
    transform: rotate(137deg);
}
#piece3 > .piece-inner {
    background: darkblue;
    transform: rotate(101deg);
}
#piece4 {
    transform: rotate(238deg);
}
#piece4 > .piece-inner {
    background: darkgreen;
    transform: rotate(83deg);
}
#piece5 {
    transform: rotate(321deg);
}
#piece5 > .piece-inner {
    background: darkred;
    transform: rotate(32deg);
}
#piece6 {
    transform: rotate(353deg);
}
#piece6 > .piece-inner {
    background: darkgoldenrod;
    transform: rotate(7deg);
}

.demo-charts {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.demo-chart:nth-child(1) {
    color: #ACEC00;
}
.demo-chart:nth-child(2) {
    color: #00BBD6;
}
.demo-chart:nth-child(3) {
    color: #BA65C9;
}
.demo-chart:nth-child(4) {
    color: #EF3C79;
}

.club_table {
    border: 2px solid black;
    background-color: lightgrey;
    color: black;
    margin-left: 10%;
    width: 80%;
    /* position: relative;
    left: 10px;*/
}

#box1
{
    float: left;
    width: 48%; /* optionale Weitenangabe */
    height: 750px;
    background: darkgrey;
}

#box2
{
    /* margin-top: 20px;
    margin-left: 20px; */
    float: right;
    width: 48%; /* optionale Weitenangabe */
    height: 750px;
    background: darkgrey;
    color: black;
}

body, html {
    /*height: 100%;*/
    margin: 0;
    font-family: Arial;
}

/* Style tab links */
.tablink {
    background-color: #bb1107;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 16.666666666666667%;
}

.tablink:hover {
    background-color: lightgrey;
}

/* Style the tab content */
.tabcontent {
    color: white;
    display: none;
    padding: 100px 20px;
}

#anwaerter {background-color: grey;}
#rookies {background-color: darkorange;}
#professionals {background-color: darkblue;}
#experts {background-color: darkgreen;}
#masters {background-color: darkred;}
#legends {background-color: darkgoldenrod;}
/* eigene Karte erstellen! */

#black_card{
    color: black;
}

/* Tabs mit radio-Buttons
.tabbed figure {
    display: block;
    margin-left: 0;
    border-bottom: 1px solid silver;
    clear: both;
}

.tabbed > input,
.tabbed figure > div { display: none; }

.tabbed figure>div {
    padding: 20px;
    width: 100%;
    border: 1px solid silver;
    background: #fff;
    line-height: 1.5em;
    letter-spacing: 0.3px;
    color: #444;
}*/

.mdl-menu__container {
    z-index: -1;
}
.demo-navigation {
    z-index: -2;
}
/* END iOS Safari specific workaround */

.mdl-menu .mdl-menu__item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}


/* ###################################################################################################################
---------------------------------------------------- Modulseite -----------------------------------------------------
 ################################################################################################################## */
.modulboxen {
    display: inline-block;
    margin-bottom: 15px;
    margin-left: 25px;
}

.demo-card-square.mdl-card {
    width: 450px;
    height: 320px;
}

.demo-card-square > .mdl-card__title {
    color: #fff;
    background: #bb1107;
}

.mdl-card__supporting-text {
    font-size: 1.5rem;
}

.leistungs_eingabe {
    display: flex;
    align-items: center;
    position: relative;
}

.leistungs_elemente {
    margin: 10px;
}

/* ###################################################################################################################
---------------------------------------------------- Hilfeseite -----------------------------------------------------
 ################################################################################################################## */

/* ###################################################################################################################
---------------------------------------------------- Footer -----------------------------------------------------
 ################################################################################################################## */
.mdl-mini-footer {
    align-items: center;
    flex-direction: column;
    position:absolute;
    bottom: 0;
    width: 100%;
    height: 2em;
}


/* überschreiben von bootsstrap Styles*/
label {
    font-weight: unset !important;
}


/* Design für allgemeine Komponenten */
.select {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
    width: 100%;
}

.select--width-300 {
    width: 300px;
}

.select select {
    display: inline-block;
    width: 100%;
    cursor: pointer;
    padding: 10px 15px;
    outline: 0;
    border: 0;
    border-radius: 0;
    background: #e6e6e6;
    color: #7b7b7b;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.select select::-ms-expand {
    display: none;
}
.select select:hover,
.select select:focus {
    color: #000;
    background: #ccc;
}
.select select:disabled {
    opacity: 0.5;
    pointer-events: none;
}
.select__arrow {
    position: absolute;
    top: 16px;
    right: 15px;
    width: 0;
    height: 0;
    pointer-events: none;
    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: #7b7b7b transparent transparent transparent;
}
.select select:hover ~ .select__arrow,
.select select:focus ~ .select__arrow {
    border-top-color: #000;
}
.select select:disabled ~ .select__arrow {
    border-top-color: #ccc;
}


.alert-message {
    color: #bb1107;
}