html {
    background: #f4f3f1
}

.content {
    width: calc(100vw - 60px);
    min-height: calc(100vh - 221px);
    background: #fff;
    margin-top: 110px;
    padding: 30px
}

.hidden {
    display: none
}

.staerkebeschreibung.hidden {
    display: block;
    visibility: hidden
}

.only-desktop {
    display: none
}

.only-mobile {
    display: block
}

.outline-0 {
    outline: 0 !important
}

.input-select {
    background: #fff;
    border: 0 solid #000;
    padding: 5px;
    margin-bottom: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px
}

:focus {
    outline: none
}

.form-check-input:focus {
    outline: 2px solid #6e0bcc;
    outline-offset: 2px;
    border-color: inherit;
    box-shadow: inherit;
    color: inherit;
}
.form-range:focus::-moz-range-thumb, .form-range:focus::-webkit-slider-thumb {
    outline: 2px solid #6e0bcc;
    outline-offset: 2px;
    border-color: inherit;
    box-shadow: inherit;
    color: inherit;
}
.input-slider:focus-visible::-moz-range-thumb, .input-slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid #6e0bcc;
    outline-offset: -2px;
}

.tab-buttons {
    width: 100%;
    border-top: 1px solid #e3e3e3;
    padding-top: 10px
}

.tab-buttons > table {
    width: 100%
}

.tab-buttons > table > tbody > tr {
    background-color: transparent !important
}

.tab-button {
    font-weight: 700;
    background: var(--primary-color);
    border: none;
    padding: 4px;
    color: #fff;
    border-radius: 5px
}

.tab-button:disabled {
    background: var(--secondary-color)
}

.input-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 45px;
    padding-top:10px;
    padding-bottom:10px;
    background-clip:content-box !important;
    outline: none;
    background: #ddd;
    background: linear-gradient(90deg, #e8f566ff 0%, #f00f 100%);
    margin-bottom: 10px
}

.input-slider2 {
    -webkit-appearance: none;
    width: 90%;
    height: 25px;
    outline: none;
    background: #ddd;
    background: linear-gradient(90deg, #719d8eff 0%, #284e42ff 100%);
    margin-bottom: 10px
}

.input-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    background: #000;
    border-radius: 100px;
    padding: 4px;
    border: 5px solid #fff;
    cursor: pointer
}

.input-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 100px;
    padding: 4px;
    border: 5px solid #fff;
    cursor: pointer
}

.input-slider2::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: url(arrow.png);
    background: #000;
    border-radius: 100px;
    padding: 4px;
    border: 5px solid #fff;
    cursor: pointer
}

.input-slider2::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: url(arrow.png);
    background: #000;
    border-radius: 100px;
    padding: 4px;
    border: 5px solid #fff;
    cursor: pointer
}

.staerkebeschreibung {
    font-weight: 700;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center
}

.kommentarfeld {
    width: 100%;
    height: 150px;
    resize: none;
    margin-bottom: 10px
}

@media only screen and (min-width: 585px) {
    .content {
        width: calc(100vw - 60px);
        min-height: calc(100vh - 221px);
        background: #fff;
        margin-top: 110px;
        padding: 30px
    }
}

@media only screen and (min-width: 660px) {
    .only-desktop {
        display: block
    }

    .only-mobile {
        display: none
    }
}

@media only screen and (min-width: 800px) {
    .content {
        width: 740px;
        margin-left: calc(50vw - 400px)
    }
}

.meldebox {
    width: 100%;
    transition: height .35s ease;
    position: relative
}

.meldebox.transition {
    overflow: hidden
}

.tab > h2 {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px
}

.ereignis {
    text-align: center;
    background: #f4f3f1;
    width: 90%;
    max-width: 400px;
    padding: 5px;
    float: none;
    margin-bottom: 10px;
    line-height: 2em;
    cursor: pointer
}

.ereignis:hover {
    background: #d6d6d6
}

@media only screen and (min-width: 800px) {
    .meldebox-buttons {
        width: 100%;
        background: #f4f3f1
    }
}

.wizard-nav {
    display: grid;
    grid-template-columns:auto 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: 0;
    padding-top: 1rem;
    border-top: 1px solid #e3e3e3
}

.wizard-nav .step-indicator {
    justify-self: center;
}

@media only screen and (max-width: 500px) {
    .wizard-nav {
        grid-template-columns:auto 0 auto;
    }
    
    .wizard-nav .step-indicator {
        visibility: hidden;
    }
}

.tab {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transform: translateX(0);
    transition: transform .25s ease, opacity .2s
}

.tab.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition: transform .25s ease, opacity .5s
}

.tab.right {
    transform: translateX(100%);
    opacity: 0
}

.tab.left {
    transform: translateX(-100%);
    opacity: 0
}