/**************************************************************************************

ADERIAN CSS

Loaded only on frontend if the setting "Use Aderian CSS" is checked.

We set a dark blue background color on the html/body element to get the status bar on
iPad to use the same color. It seems to ignore the styles from the manifest.

The 100dvh min-height is used to avoid getting scroll on iPad, due to the system status
bar taking up space and pushing the content down.

***************************************************************************************/
:root {
    --color-blue: #ffffff44;
    --color-darkblue: #ffffff66;
    --color-hover: #ffffff66;
    --bg-gray: #ffffff33;
    --border-gray: #ffffff44;
}
html, body {
    background-color: var(--aderian-blue);
    min-height: 100dvh;

    background-image: linear-gradient(0deg, var(--aderian-blue) 0%, var(--aderian-blue-bright) 100%);
    background-repeat: repeat-x;
    color: white;
}
body.page-staff-index {
    background-color: white;
}
header {
    height: 130px;
}
.ok-to-save {
    background-color: rgb(206 226 226);
    color: black;
    font-size: 20px;
}
.btn-fullwidth, .btn-lg {
    border-radius: 40px;
    border: 2px solid #FFFFFF66;
}
.form-control:is([disabled], [readonly])[name] {
    opacity: 0.3;
}
#show-all i {
    color: var(--aderian-blue-bright);
}
#custom-inputs {
    margin-left: 0;
    margin-right: 0;
    margin-top: 2em !important;
    background-color: #ffffff20;
    border-radius: 5px;
    padding: 1em 1em;
    border: 1px solid #ffffff40;
}
#custom-inputs .disclosure {
    background-color: #ffffff40;
    border: 1px solid #ffffff60;
}

/* Page targeted styling */

body.page-index :is(.btn-fullwidth, .btn-lg) {
    font-size: min(7vw, 2rem);
    white-space: nowrap;
    padding-top: 6px;
}
body.page-index #qr-code {
    border-radius: 20px;
    height: 220px !important;
    width: 220px !important;
}
body.page-index h1 {
    font-size: min(10vw, 60px);
    margin-bottom: 0;
}
body.page-index h2 {
    margin-bottom: 3rem;
}
body.page-index #scan-result {
    position: fixed;
    height: 150px;
    width: 600px;
    top: 150px;
    left: calc(50% - 300px);
    opacity: 1;
    background: white;
    border-radius: 20px;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 50px #00000080;
}
body.page-index #scan-result.warning {

}