div{ image-rendering: pixelated; }
#popupOverlay, #onboardingOverlay{
    position: fixed;
    left:0;
    top:0;
    height:100%;
    width:100%;
    backdrop-filter: blur(8px);
    background-color:#212529aa;
    z-index:10;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    transition: 550ms;
    opacity:0;
    display:none;
    box-shadow: 0px 0px 10px #000;
}

#popupOverlayInner, #onboardingInner{
    background-size: cover;
    width:clamp(200px, 94%, 900px);
    height:clamp(200px, 62%, 900px);
    max-height:clamp(200px, 62%, 900px);
    margin-top:-2.5vh;
}

#popupOverlayInnerButtons{
display:flex;
    width: clamp(200px, 94%, 900px);
    position: absolute;
    padding-top: 10px;
    padding-right: 6px;
    flex-direction: row-reverse;
    align-items: flex-end;
    box-sizing: border-box;
}

#popupOverlayInnerTop, #popupOverlayInnerTopInner{
    justify-content: flex-start;
    display: flex;
    flex-direction: row;
}

#popupOverlayInnerTop{
    background-color:#000;
    height:clamp(100px, 12.5vh,150px);
    width:100%;
    border-radius: var(--common-border-radius-sm) var(--common-border-radius-sm) 0 0;
    align-content: flex-end;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    
}
#popupOverlayInnerTopInner{
    align-items: center;
    min-width:42.5%;
    padding: .75em;
    padding-bottom:0;
    margin-left: .5em;
    margin-bottom: -1px;
    border-radius: var(--common-border-radius-l) var(--common-border-radius-l) 0 0;
    border:1px solid var(--color-main);
    border-bottom: 0;
    z-index:1;
}
#popupOverlayInnerTopIcon{
    height:51px;
    width:51px;
    min-height:51px;
    min-width:51px;
    background-size: cover;
    background-color: #0005;
    border-radius: var(--common-border-radius-sm);
    margin-right:1em;
}

#popupOverlayContent{
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-top: 1px solid var(--color-main);
    padding: 1em;
    box-sizing: border-box;
    overflow-y:auto;
}

#popupOverlayContent h4{
    font-size:1.425em;
    margin-bottom:0.8em;
}
.popup-section-description, .popup-section-subheading{ font-size: 0.895em; }
.popup-section-description{
    font-weight: 500;
    font-style: italic;   
    margin: 0;
}

.popup-section-subheading{
    font-weight: 600;
    margin-top: 0.5em;
}

#onboardingInner{
    overflow-y:auto;
    overflow-x:hidden;
}

#onboardingOverlay{
    background-color:var(--color-body-background);
    background-blend-mode: overlay;
    background-image:url('../images/onboarding_bg.png');
    background-size:cover;
    background-position: center;
}

#onboardingInner{
    background-color:var(--color-main);
    background-image:url('../images/background.png');
    background-size:auto;
    color:white!important;
}

#onboardingInnerTop, #onboardingContent{
    display:flex;
    flex-direction: column;
    align-items: center;
}

#onboardingInnerTop{
    padding:6px 3.5vh;
    text-align:center;
    box-sizing: border-box;
    margin-bottom:2vh;
}
#onboardingInnerTitle{
    font-size:2.5em;
    margin:5px;
}
#onboardingInnerTop p{ margin-top:0; }
#onboardingContent{ padding:1em; }
#onboardingFormButtons, #onboardingFormEntry{
    display:flex;
    justify-content: center;
}
#onboardingFormButtons{ margin:1em 0 calc(1em + 1.5vh) 0; }

#onboardingFormEntry{
    flex-direction: row;
    margin:1em 0;
}

#logoOnboard{
    max-width:90%;
    margin-bottom:0.5vh;
    margin-top:2.75vh;
    pointer-events: none;
}