/* 
 * Specific styling for the login screen
 */
:root{
    --oanl-color-login-bg: white;
    --oanl-color-content-bg: white;
    --oanl-box-padding: 1rem;
}
html {
    height: 100%;
}
body {
    background-color: var(--oanl-color-login-bg);
    box-sizing: border-box;
    min-height: 100svh;
    padding-bottom: 5rem;
}

#container{
    width: 37em;
    margin: 0 auto;
    padding-top: 0.1px;
    --oanl-form-indent: 12.5em;
}

.login-header{
    padding-inline: var(--oanl-box-padding, 1em);
    display: flex;
    gap:1rem;
    justify-content:space-between;
    align-items:center;
}
.login-menu .btn{
    display: block;
}
.login-menu .btn-light:not(:hover){
    background-color: var(--oanl-color-content-bg);
}

.content-container {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: 3px 3px 10px -1px #ccc;
    padding: var(--oanl-box-padding, 1em);
}
#container>.logo-container {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 2em auto;
}
#logo{
    margin: 0 auto;
    max-width: 20em;
}
#logo img{
    max-width: 20em;
}

#container>div {
    padding-block: var(--oanl-box-padding, 1em);
}
.button-row{
    margin: 1em  0;
}

#container .form-input-container {
    --oanl-form-indent: 12em;
}
#container .form-label {
    width: calc(var(--oanl-form-indent) - 1em);
}

body.login-nologo{
    height: 100%;
}
.login-nologo #container{
    display: flex;
    height :100%;
    box-sizing: border-box;
    padding: 1em 0;
    
}

.login-nologo #container .content-container{
    flex-grow: 1;
    margin: auto;
    min-height: 30em;
}

#login-footer{
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    min-height: 3rem;
    box-sizing: border-box;
    background-color: white;
    border-top: 1px solid #ddd;
    box-shadow: 3px 3px 10px 1px #ccc;
    padding-block: 0.5rem;
    text-align: end;
}

#login-footer nav{
    padding-inline: var(--oanl-box-padding,1rem);
    display: inline-flex;
    gap: 1rem;
}

@supports(field-sizing:content) {
    input[type=email]{
        max-width: 22em;
    }
}

@media all and (max-width: 575.99px) {
    :root{
        --oanl-input-padding: 0.5rem;
        --oanl-box-padding: 0.5rem;
    }
    body {
        background-color: var(--oanl-color-content-bg, white);
    }
    .login-header{
        background-color: var(--oanl-color-login-bg);
    }

    #container {
        width : 100%;
    }
    .login-nologo #container{
        padding:0;

    }
    
    .content-container{
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    #logo{
        display: block;
        margin: 0 auto;
        max-height: 130px;
    }
    input[type=text], input[type=submit], input[type=password], input[type=email], select, button{
        width : 100% !important;
        max-width : 100% !important;
        box-sizing: border-box;
    }
    .form-row{
        margin: 1em  0;
    }
    .button-row{
        margin: 2em 0;
    }
    .form-label{
        margin : 0.2em 0;
        width: 100% !important;
    }
    .form-input-container{
        margin: 0 !important;
    }
    .ui-tabs{
        padding: 0 !important;
    }
    .ui-tabs .ui-tabs-panel{
        padding-inline: 0 !important;
    }
    .ui-tabs .ui-tabs-nav{
        display: flex;
        flex-wrap: wrap;
        padding-inline: 0 !important;
    }
    .ui-tabs .ui-tabs-nav li{
        flex-grow: 1;
        text-align: center;
        padding-block: 0.1em !important;
    }
    .ui-tabs .ui-tabs-nav .ui-tabs-anchor{
        padding-inline: 0.5em !important;
        display: inline-block;
        float:none !important;
    }
}