form{
    width: 100%;
}
.login{
    display: flex;
    padding: 50px 20px 20px 20px;
    max-width: 1000px;
    width: 95%;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 20px;
    margin: auto;
}
.title-box{
    width: 100%;
}
.title{
    font-size: 120%;
    float: left;
    filter: var(--gray-filter);
    padding-left: 50px;
    background: rgba(0, 0, 0, 0) url("/assets/img/settings.svg") no-repeat;
    background-size: 35px;
    background-position: 0 0;
}
.high-contrast .title {
    color: #000 !important;
    background-color: rgba(0, 0, 0, 0)!important;
    filter: var(--high-contrast-filter) !important;

}
.priv-btn{
    font-size: 90%;
    float: right;
    filter: var(--gray-filter);
    padding: 5px 10px 5px 25px;
    background: rgba(0, 0, 0, 0) url("/assets/img/kilp.svg") no-repeat;
    background-size: 20px;
    background-position: 0 2px;
    border: none;
}
.priv-btn:focus{
    border: 1px solid var(--gray0);
}
.high-contrast .priv-btn {
    border: 1px solid #000 !important;
    background-color: rgba(0, 0, 0, 0) !important;
    color: #000 !important;
    filter: var(--high-contrast-filter) !important;
}
.login-box{
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 10px;
    width: 45%;
    max-width: 750px;
    min-width: 300px;
    background-color: var(--welcome-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.25);
}
.login-box input{
    width: 95%;
    margin-left: 5px!important;
}
.login-box span{
    display: block;
    width: 90%;
    padding: 0 0 5px 0;
}
.row{
    padding: 15px 5px 5px 15px;
    width: 95%;

}

.reg-box{
    flex-grow: 1;
    display: grid;
    padding: 0;
    gap: 20px;
    width: 45%;
    max-width: 750px;
}

.reg-box-row{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap:20px;
    padding: 15px 5px 5px 15px;
    background-color: var(--welcome-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.25);
}
.btnbar{
    flex-grow: 1;
    text-align: right;
    padding-right: 10px;
}
.no-fb-google{
    display: flex;
    flex-direction: row;
    gap: 30px;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.no-shrink{
    flex-shrink: 0;
}
@media screen and (max-width: 800px), screen and (max-device-width: 800px),screen and (orientation: portrait) {
    .title{
        font-size: 100%;
        background-size: 25px;
        padding-left: 27px;
        background-position: 0 0;
    }
    .priv-btn{
        font-size: 90%;
        padding: 3px 8px 3px 20px;
        background-size: 15px;
        background-position: 0 2px;
    }
    .reg-box-row{
        flex-wrap: wrap!important;

    }
    .login{
        padding: 20px 10px 10px 10px;
    }
    .login-box{
        min-width: 300px;
    }
}