/* --- FORM --- */
.normal-form {
    width: 100%;
    max-width: 392px;
}

input[type=text], input[type=password], input[type=number], input[type=email] {
    height: 48px;
    display: block;
    width: 100%;
    padding: 16px 16px;
    border: 1px solid #D7D7D7;
    background-color: #FFFFFF !important;
}

    input[type=text]:focus, input[type=password]:focus, input[type=number]:focus {
        border: 2px solid #363636;
        outline: none; /*have this?*/
    }

    input[type=text].input-validation-error,
    input[type=password].input-validation-error,
    input[type=number].input-validation-error {
        border-width: 1px 1px 1px 5px;
        border-color: #FF7369;
    }

.white-text-input-normal-set-width {
    display: block;
    width: 100%;
    max-width: 392px;
    padding: 0.375rem 0.75rem;
    border: none;
}

.button-base {
    position: relative;
    border-radius: 0px;
    border: 0px;
    height: 48px;
    min-width: 160px;
    line-height: 48px; /*unly used for cetner align text vertical. not height of actual text line*/
    text-align: left;
    padding-left: 16px;
    font-weight: bold;
    text-decoration: none;
    outline-style: hidden; /*TODO: keep?*/
}

    .button-base:disabled {
        background-color: #C5E1AC !important;
        /*color: #ababab; kristina prefers this, but #36363680 looks better*/
        color: #36363680 !important;
    }

    .button-base:hover {
        text-decoration: none;
    }

    .button-base:focus:active {
        border: 2px solid #FFFFFF80;
        outline-style: hidden; /*TODO: keep?*/
    }

    .button-base > span {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }

.requirements-not-fulfilled-button {
    background-color: #C5E1AC !important;
    /*color: #ababab; kristina prefers this, but #36363680 looks better*/
    color: #36363680 !important;
}

    .requirements-not-fulfilled-button:hover {
        background-color: #8CC35A;
    }

.button-color-1 {
    background-color: #8CC35A;
}

    .button-color-1:hover {
        background-color: #7EAF51
    }

.button-color-2 {
    background-color: #C3C3C3;
}

    .button-color-2:hover {
        background-color: #AFAFAF;
    }

.button-color-superuser {
    background-color: #FFBE50;
}

    .button-color-superuser:hover {
        background-color: #E5AB48;
    }

.button-gap-to-the-right {
    margin-right: 2px;
}

/* --- ONLY VISIBLE FOR SUPERUSERS --- */
.superuser-section-on-pw-view {
    padding-top: 6rem;
}

.a-light-and-underline {
    font-family: 'via-light', 'sans-serif';
    text-decoration: underline;
}   

.compact-ul-with-links > li {
    margin-bottom: 2px;
}

.compact-section > p {
    margin-bottom: 0.75rem;
}