/* allgemein */
.message {
    border: 1px solid silver;
    padding: 2px;
    background-color: #f1f8fd;
}

/* Formular */
fieldset {
    margin: 0px;
    padding: 20px;
}

input,
select,
textarea {
    border: 1px solid silver;
    width: initial;
    height: initial;
    padding: 2px;
    min-height: 30px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
}

input[type="date"],
input[type="time"],
input[type="number"] {
    min-width: 120px;
}

input[type="checkbox"] {
    width: 20px;
}

textarea {
    resize: vertical;
}

input[type="button"] {
    margin-top: 6px;
    cursor: pointer;
}

input[type="button"].left {
    float: left;
}

input[type="button"].right {
    float: right;
}

input:focus,
select:focus,
textarea:focus {
    background-color: #f1f8fd;
}

label {
    width: initial;
    height: initial;
    padding: 2px 2px 2px 0;
    display: inline-block;
}

input:required:invalid,
select:required:invalid,
textarea:required:invalid {
    border: 2px solid rgb(239, 82, 127);
}

input:required:focus:invalid,
select:required:focus:invalid,
textarea:required:focus:invalid {
    border: 2px solid rgb(239, 82, 127);
    background-color: #fee0ea;
}

input:required:valid,
select:required:valid,
textarea:required:valid {
    border: 2px solid rgb(134, 181, 0);
}

input:required:focus:valid,
select:required:focus:valid,
textarea:required:focus:valid {
    border: 2px solid rgb(134, 181, 0);
    background-color: #d5ffb3;
}

.error {
    border: 1px solid rgb(239, 82, 127) d;
    text-align: center;
    padding: 10px 20px;
    font-weight: bold;
    color: rgb(233, 0, 94);
    background-color: #fee0ea;
}

.required {
    margin: 0px 5px;
    color: rgb(217, 18, 100);
}

.reqrowB {
    margin-top: 15px;
}

/* Clear floats after the columns */
.reqrow:after,
.reqrowB:after {
    content: "";
    display: table;
    clear: both;
}

.reqcol-1 {
    float: left;
    width: 35%;
    margin-top: 5px;
}

.reqcol-2 {
    float: left;
    width: 65%;
    margin-top: 5px;
}

.reqcol-1a {
    float: left;
    width: 50%;
    margin-top: 5px;
}

.reqcol-2a {
    float: left;
    width: 50%;
    margin-top: 5px;
}

.reqcol-1b {
    float: left;
    width: 90%;
    margin-top: 5px;
}

.reqcol-2b {
    float: left;
    width: 10%;
    margin-top: 5px;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {

    .reqcol-1,
    .reqcol-2,
    .reqcol-1a,
    .reqcol-2a,
    .reqcol-1b,
    .reqcol-2b {
        width: 100%;
        margin-top: 0;
    }
}

/* Tabellen */
table.show {
    font-size: 1em;
    text-align: left;
    color: rgba(0, 0, 0, 1);
    border: none;
    margin-bottom: 12px;
    background-color: rgba(0, 0, 0, 0.1);
}

table.show_light {
    font-size: 0.9em;
    text-align: left;
    color: rgba(0, 0, 0, 0.5);
    border: none;
    margin-bottom: 12px;
    background-color: rgba(0, 0, 0, 0.05);
}

td.show,
td.show_light {
    border-top: 1px solid silver;
    padding: 2px;
}

th.show,
th.show_light {
    padding: 2px;
}

/* Toggle */
.toggle {
    --width: 80px;
    --height: calc(var(--width) / 3);

    position: relative;
    display: inline-block;
    width: var(--width);
    height: var(--height);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: var(--height);
    cursor: pointer;
}

.toggle input {
    display: none;
}

.toggle .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--height);
    background-color: #ccc;
    transition: all 0.4s ease-in-out;
}

.toggle .slider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--height));
    height: calc(var(--height));
    border-radius: calc(var(--height) / 2);
    background-color: #fff;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease-in-out;
}

.toggle input:checked+.slider {
    background-color: #2196f3;
}

.toggle input:checked+.slider::before {
    transform: translateX(calc(var(--width) - var(--height)));
}

.toggle .labels {
    position: absolute;
    top: 2px;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 1rem;
    font-family: sans-serif;
    transition: all 0.4s ease-in-out;
}

.toggle .labels::after {
    content: attr(data-off);
    position: absolute;
    right: 5px;
    color: #4d4d4d;
    opacity: 1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    transition: all 0.4s ease-in-out;
}

.toggle .labels::before {
    content: attr(data-on);
    position: absolute;
    left: 5px;
    color: #ffffff;
    opacity: 0;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4);
    transition: all 0.4s ease-in-out;
}

.toggle input:checked~.labels::after {
    opacity: 0;
}

.toggle input:checked~.labels::before {
    opacity: 1;
}