/* Overlay */
#overlay{
position:fixed;
z-index:1000;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
-webkit-backdrop-filter:blur(10px);
display:none;
}

#overlay-wrapper{
width:auto;
}

/* Mobile View */
@media screen and (max-width: 79.5rem){

#overlay-dialog{
position:fixed;
width:90%;
height:90%;
top:5%;
left:5%;
padding:0;
}

#overlay-dialog .btn-wrapper{
position:fixed;
top:5%;
right:5%;
z-index:1003;
}

}

/* Desktop View */
@media screen and (min-width: 79.5rem){

#overlay-dialog{
position:fixed;
width:70%;
height:70%;
top:15%;
left:15%;
padding:0;
}

#overlay-dialog .btn-wrapper{
position:fixed;
top:14%;
right:14.25%;
z-index:1003;
}


}

#overlay-dialog{
position:fixed;
background:var(--base-background-color);
border:1px solid var(--base-border-color);
border-radius:.25rem;
overflow:auto;
z-index:1001;
}

#overlay-dialog article,
#overlay-dialog section,
#overlay-dialog .foreground{
border:0;
border-radius:0;
}

#success-dialog,
#error-dialog{
position:fixed;
width:90%;
height:14em;
margin-top: -7em;
margin-left: -45%;
top:50%;
left:50%;
padding:.5rem;
border:1px solid var(--base-border-color);
background:var(--light-background-color);
border-radius:.25rem;
z-index:1002;
}

#success-dialog article,
#success-dialog section,
#success-dialog .foreground,

#error-dialog article,
#error-dialog section,
#error-dialog .foreground{
border:0;
border-radius:0;
}

#success-dialog .btn-wrapper,
#error-dialog .btn-wrapper{
position:absolute;
top:0;
right:0;
z-index:1003;
}