html,
body {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    margin: 0;
    background-color: #FFFFFF;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.header {
    padding-top: 7em;
    height: 11em;
}
.logo {
    background-image: Url("../img/logo_mail_full.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 10em;
    width: 20em;
}
.container {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: stretch;
    width: 20em;
    height: 9em;
    padding: 1em;
}
.container .error {
    position: absolute;
    top: 6em;
    left: 0;
    width: 100%;
    height: 0.2em;
    padding: 0;
    margin: 0;
    margin-bottom: -1em;
    text-align: center;
    color: #ff8888;
}
.container input {
    padding: 0.5em;
    background: #FFFFFF;
    border: none;
    color: #222222;
    font-size: larger;
    border-left: solid 1px #CED4DB;
}
.container input:active,
.container input:focus {
    color: #222222 !important;
    border-color: #37beff;
    box-shadow: 0 0 3px 0 #37beff;
}
.container input::placeholder {
    color: #82a4a8;
    opacity: 1;
}
.container input:focus::placeholder {
    color: #222222;
    opacity: 0.4;
}

.container .input-group {
    position: relative;
    border: solid 1px #CED4DB;
    border-radius: 0.3em;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}
.container .input-addon {
    width: 3em;
    height: 100%;
    text-align: center;
    background-color: #F0F3F4;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    color: #2B363B;
    align-items: center;
}
.container button {
    cursor: pointer;
    background: #37beff;
    padding: 0.5em;
    font-size: larger;
    border-radius: 0.3em;
    border: solid 1px #37beff;
    color: #ffffff;
    text-transform: uppercase;
}
.container button:hover {
    background: #1eb6ff;
    padding: 0.5em;
    font-size: larger;
    border-radius: 0.3em;
    border: solid 1px #1eb6ff;
}
@media (prefers-color-scheme: dark) { 
    html,body{
        background-color: #20292d;
    }
    .container .error {
        color: #ff8888;
    }
    .container input {
        background: #20292d;
        color: #eeeeee;
        border-left: solid 1px #7a949c;
    }
    .container input:active,
    .container input:focus {
        color: #e2e7e9 !important;
        border-color: #37beff;
        box-shadow: 0 0 3px 0 #37beff;
    }
    .container input::placeholder {
        color: #82a4a8;
        opacity: 1;
    }
    .container input:focus::placeholder {
        color: #222222;
        opacity: 0.4;
    }
    
    .container .input-group {
        border: solid 1px #7a949c;
    }
    .container .input-addon {
        background-color: #35444a;
        color: #c4d2d4;
    }
    .container button {
        background: #03619f;
        border: solid 1px #03619f;
        color: #ffffff;
    }
    .container button:hover {
        background: #007bb7;
        border: solid 1px #007bb7;
    }
    

}