:root {
    font-family: Lexend;
    font-size: 14px;
    --bycs-background: #fff;
    --bycs-text-primary-color: #1C1D2F;
    --bg-green-600: #66be8f;
    --bg-green-800: #33a86a;
    --bg-yellow-600: #edd68a;
    --bg-red-600: #ff6666;
    --bg-red-800: #ff3333;
    --bycs-alert-bg-success: var(--bg-green-600);
    --bycs-alert-bg-warning: var(--bg-yellow-600);
    --bycs-alert-bg-danger: var(--bg-red-600);
    --bycs-alert-border-success: var(--bg-green-600);
    --bycs-alert-border-warning: var(--bg-yellow-600);
    --bycs-alert-border-danger: var(--bg-red-600);
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bycs-background);
    color: var(--bycs-text-primary-color);
}

html.dark {
    --bycs-background: #1c1d2f;
    --bycs-text-primary-color: #fff;
}

html.dark a {
    color: white;
}

html .darkhide {
    display: block;
}

html .darkshow {
    display: none;
}

html.dark .darkhide {
    display: none;
}

html.dark .darkshow {
    display: block;
}

html.contrast {
    --bycs-alert-bg-success: var(--bycs-background);
    --bycs-alert-bg-warning: var(--bycs-background);
    --bycs-alert-bg-danger: var(--bycs-background);
}

/* .inner {
    margin: 0 auto;
    max-width: 600px;
    padding: 10px;
} */


/* .status-st-wrapper{
    clear: both;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -150px;
} */

.st-wrapper {
    margin: 0 auto;
    padding: 0 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media only screen and (max-width: 420px) {
    .st-wrapper {
        width: 100%;
    }
}

@media only screen and (min-width: 640px) {
    .st-wrapper {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) {
    .st-wrapper {
        width: 100%;
    }
}

@media only screen and (min-width: 1024px) {
    .st-wrapper {
        width: 100%;
    }

    .ta-flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

@media only screen and (min-width: 1280px) {
    .st-wrapper {
        width: 100%;
    }

    .ta-flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

.margin-col-image {
    margin: 20px auto;
}

.w-label-12 {
    width: 12rem;
}

/*
 ==== Alarmmeldungen
*/
.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 2px solid transparent;
    border-radius: 0.25rem;
}

.alert-success {
    background-color: var(--bycs-alert-bg-success);
    border-color: var(--bycs-alert-border-success);
}

.alert-warning {
    background-color: var(--bycs-alert-bg-warning);
    border-color: var(--bycs-alert-border-warning);
    border: 4px;

}

.alert-danger {
    background-color: var(--bycs-alert-bg-danger);
    border-color: var(--bycs-alert-border-danger);
    border: 4px;
}


h1 {
    font-size: 1.5rem;
    font-weight: 500
}

h2,
h3 {
    font-size: 1.25rem;
    font-weight: 400
}

h4,
h5,
h6 {
    font-size: 1.15rem;
    font-weight: 400
}

.btn {
    height: auto;
    padding: 7px 20px;
    font-size: inherit;
    line-height: inherit;
}

.btn-success {
    color: #fff;
    background-color: var(--bycs-alert-bg-success);
    border-color: var(--bycs-alert-bg-success);
}

.input_username {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000;
}

.thead-bold {
    font-weight: 600;
}

.fs-16 {
    font-sei: 16rm;
}

.fs-18 {
    font-sei: 18rm;
}

.eye-green {
    color: var(--bg-green-800);
}
.eye-red {
    color: var(--bg-red-800);
}

.install-form-control {
    background-color: lightgray !important;
    border: solid darkgray !important;
    margin-bottom: 5px !important;
}