body {
    background-color: dimgrey;
    }





.Textbox input[type="text"] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid red;
    border-radius: 4px;
}

.TextboxMobile input[type="text"] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid red;
    border-radius: 4px;
}






/*Radiobox Sprache MOBILE*/
.RadioboxSpracheMobile input[type="radio"] {
    display: none;
}
.RadioboxSpracheMobile label {
    display: block;
    float: left;
    color: #000;
    cursor: pointer;
    white-space: nowrap;
}
.RadioboxSpracheMobile input[type="radio"] + label {
    width: 1.2em;
    height: 1.2em;
    border: 0.1em solid rgb(0,0,0);
    border-radius: 0.25em;
    background: rgb(255,255,255);
    /*vertical-align: middle;*/
    /*line-height: 1em;*/
    text-indent: 40px;
    font-size: 28px;
    margin-right: 140px;
}
.RadioboxSpracheMobile input[type="radio"]:checked + label::before {
    content: "\2718";
    color: #000;
    /*height: 2em;
    line-height: 2em;*/
    /*width: 2em;    */
    /*margin-right: 17px;
    margin-left: -40px;*/
    left: 3px;
    top: 7px;
    position: absolute;   
    transform: translateY(-50%);
}







/*Radiobox*/
/*.Radiobox input[type="radio"] {
    display: none;*/ /* Radio-Button unsichtbar machen */
/*}

.Radiobox label {
    display: inline-block;*/ /* Das Label bleibt inline */
    /*color: #000;
    cursor: pointer;
    white-space: normal;*/ /* Textumbruch zulassen, aber nicht nach jedem Leerzeichen */
    /*vertical-align: middle;*/ /* Vertikale Ausrichtung */
    /*font-size: 14px;*/ /* Schriftgröße auf 14px setzen */
    /*margin-right: 140px;*/ /* Abstand zwischen den Radio-Buttons */
    /*margin-bottom: 60px;
    width: auto;*/ /* Breite automatisch, damit sie sich dem Text anpasst */
/*}

.Radiobox input[type="radio"] + label {
    position: relative;
    width: 18px;*/ /* Breite des Radio-Buttons */
    /*height: 18px;*/ /* Höhe des Radio-Buttons, gleich der Breite für Quadrat */
    /*border: 1px solid #000;*/ /* Rand des Radio-Buttons auf 1px setzen */
    /*border-radius: 10%;*/ /* Border-Radius auf 10% setzen für abgerundete Ecken */
    /*background: white;*/ /* Hintergrund des Radio-Buttons */
    /*vertical-align: middle;*/ /* Vertikale Ausrichtung der Elemente */
/*}

.Radiobox input[type="radio"]:checked + label::before {
    content: "\2718";*/ /* Häkchen-Symbol */
    /*color: #000;
    font-size: 16px;
    position: absolute;
    left: 3px;*/ /* Position des Häkchens im Kästchen */
    /*top: 7px;*/ /* Vertikale Zentrierung des Häkchens */
    /*transform: translateY(-50%);
}

.Radiobox label span {
    display: inline-block;*/ /* Der Text bleibt inline */
    /*margin-left: 25px;*/ /* Abstand, damit der Text nicht direkt an der Box klebt */
    /*line-height: 1.4em;*/ /* Zeilenabstand erhöhen für bessere Lesbarkeit */
    /*white-space: nowrap;*/ /* Verhindert Umbrüche nach jedem Leerzeichen */
/*}

.Radiobox input[type="radio"]:checked + label {
    background-color: #ddd;*/ /* Hintergrundfarbe, wenn der Radio-Button aktiviert ist */
/*}

.Radiobox label br {
    display: block;*/ /* Der Text wird nur bei einem <br> umgebrochen */
    /*margin-top: 5px;*/ /* Abstand zwischen den Zeilen bei Umbruch */
/*}*/



















/*Radiobox MOBILE*/
/*.RadioboxMobile input[type="radio"] {
    display: none;
}
.RadioboxMobile label {
    display: block;
    float: left;
    color: #000;
    cursor: pointer;
    white-space: nowrap;
}
.RadioboxMobile input[type="radio"] + label {
    width: 2em;
    height: 2em;
    border: 0.2em solid rgb(0,0,0);
    border-radius: 0.5em;
    background: rgb(255,255,255);
    vertical-align: middle;
    line-height: 2em;
    text-indent: 100px;
    font-size: 42px;
    margin-right: 280px;
}
.RadioboxMobile input[type="radio"]:checked + label::before {
    content: "\2718";
    color: #000;
    height: 2em;
    line-height: 2em;
    width: 2em;
    font-weight: 100;
    margin-right: 46px;
    margin-left: -80px;
}*/







/*Checkbox*/
/*.Checkbox input[type="checkbox"] {
    display: none;
}
.Checkbox label {
    display: block;
    float: left;
    color: #000;
    cursor: pointer;
    white-space: nowrap;
}
.Checkbox input[type="checkbox"] + label {
    width: 1em;
    height: 1em;
    border: 0.1em solid rgb(0,0,0);
    border-radius: 0.25em;
    background: rgb(255,255,255);
    vertical-align: middle;
    line-height: 1em;
    text-indent: 20px;
    font-size: 14px;
    margin-right: 140px;
}
.Checkbox input[type="checkbox"]:checked + label::before {
    content: "\2714";
    color: #000;
    height: 1em;
    line-height: 1em;
    width: 1em;
    font-weight: 100;
    margin-right: 6px;
    margin-left: -19px;
}*/



/*Checkbox MOBILE*/
/*.CheckboxMobile input[type="checkbox"] {
    display: none;
}
.CheckboxMobile label {
    display: block;
    float: left;
    color: #000;
    cursor: pointer;
    white-space: nowrap;
}
.CheckboxMobile input[type="checkbox"] + label {
    width: 2em;
    height: 2em;
    border: 0.2em solid rgb(0,0,0);
    border-radius: 0.5em;
    background: rgb(255,255,255);
    vertical-align: middle;
    line-height: 2em;
    text-indent: 100px;
    font-size: 42px;
    margin-right: 280px;
}
.CheckboxMobile input[type="checkbox"]:checked + label::before {
    content: "\2714";
    color: #000;
    height: 2em;
    line-height: 2em;
    width: 2em;
    font-weight: 100;
    margin-right: 46px;
    margin-left: -80px;
}*/








.button {
    display: inline-block;
    white-space: nowrap;
    background-color: #ccc;
    background-image: linear-gradient(top, #eee, #ccc);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
    border: 1px solid #777;
    padding: 0 1.5em;
    margin: 0.5em;
    font: bold 1em/2em Arial, Helvetica;
    text-decoration: none;
    color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    border-radius: .2em;
    box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
    }
.button:hover {
    background-color: #ddd;
    background-image: linear-gradient(top, #fafafa, #ddd);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
    }
.button:active {
    box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
    position: relative;
    top: 1px;
    }
.button:focus {
    outline: 0;
    background: #fafafa;
    }
.button:before {
    background: #ccc;
    background: rgba(0,0,0,.1);
    float: left;
    width: 1em;
    text-align: center;
    font-size: 1.5em;
    margin: 0 1em 0 -1em;
    padding: 0 .2em;
    box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
    border-radius: .15em 0 0 .15em;
    pointer-events: none;
    }



.buttonMobile {
    display: inline-block;
    white-space: nowrap;
    background-color: #ccc;
    background-image: linear-gradient(top, #eee, #ccc);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
    border: 1px solid #777;
    padding: 0 1.5em;
    margin: 0.5em;
    font: bold 2em/4em Arial, Helvetica;
    text-decoration: none;
    color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    border-radius: .2em;
    box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
.buttonMobile:hover {
    background-color: #ddd;
    background-image: linear-gradient(top, #fafafa, #ddd);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
}
.buttonMobile:active {
    box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
    position: relative;
    top: 1px;
}
.buttonMobile:focus {
    outline: 0;
    background: #fafafa;
}
.buttonMobile:before {
    background: #ccc;
    background: rgba(0,0,0,.1);
    float: left;
    width: 1em;
    text-align: center;
    font-size: 1.5em;
    margin: 0 1em 0 -1em;
    padding: 0 .2em;
    box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
    border-radius: .15em 0 0 .15em;
    pointer-events: none;
}













/* Hexadecimal entities for the icons */
.add:before {
    content: "\271A";
    }
.edit:before {
    content: "\270E";        
    }
.delete:before {
    content: "\2718";        
    }
.save:before {
    content: "\2714";        
    }
.email:before {
    content: "\2709";        
    }
.like:before {
    content: "\2764";        
    }
.next:before {
    content: "\279C";
    }
.star:before {
    content: "\2605";
    }
.spark:before {
    content: "\2737";
    }
.play:before {
    content: "\25B6";
    }
.HEAVYCHECKMARK:before {
    content: "\2714";
}