dialog.quickview[open]{
animation: dialog_show 500ms ease-out;
}

dialog.quickview.dialog_hide{
animation: dialog_hide 250ms ease-in;
}


dialog::backdrop{
background:hsla(0, 0%, 90%,.75);
-webkit-backdrop-filter:blur(5px);
backdrop-filter:blur(5px);
}

@keyframes dialog_show{

from{
transform: translateY(-110%);
}

to{
transform: translateY(0%);
}

}

@keyframes dialog_hide{

to{
transform: translateY(-110%);
}

}



.overlay{
position:fixed;
display:block;
width:100%;
height:100%;
inset:0;
z-index:11000;
background:hsla(0, 0%, 90%,.75);
-webkit-backdrop-filter:blur(5px);
backdrop-filter:blur(5px);
}

.overlay dialog.message{
position:absolute;
top:48%;
left:50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}

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

.overlay dialog.message{
position:absolute;
top:8%;
left:50%;
transform: translate(-50%,0%);
-ms-transform: translate(-50%,0%);
}

}


.overlay dialog.message{
width:42rem;
height:auto;
border:none !important;
padding:.5rem;
max-width:95vw;
min-height:14rem;
max-height:90%;
border-radius:.25rem;
background:var(--bgr-gray-200);
box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.overlay dialog.message{
margin:0;
padding:1rem;
}

.overlay dialog.message .close{
float:left;
width:100%;
margin:0;
padding:0;
height:2rem;
text-align:center;

& .btn_close{
margin:0;
padding:0;
}
}

.overlay dialog.message .header{
float:left;
width:100%;
margin:0 0 .25rem 0;
padding:0;
}

.overlay dialog.message .header h2{
float:left;
width:100%;
margin:0;
padding:0;
font-family:var(--secondary-font-family);
color:var(--clr-primary-400);
font-size:var(--fs-p);
text-align:left;
}

.overlay dialog.message .main{
float:left;
width:100%;
margin:0;
padding:0;

& p{
font-size:var(--fs-p);
}

}


.overlay dialog.message .main .image{
float:left;
width:40%;
margin:0 .5rem 0 0;
}

.overlay dialog.message .main .content{
float:left;
width:100%;
max-height:50vh;
overflow:auto;
scrollbar-width:thin;
}


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

.overlay dialog.message .main .image{
float:left;
width:100%;
}

.overlay dialog.message .main .image img{
display:block;
width:60%;
margin:auto;
}

.overlay dialog.message .main .content{
float:left;
width:100%;
max-height:50vh;
overflow:auto;
scrollbar-width:thin;
}

}

.overlay dialog.message .main ul{
float:left;
width:100%;
margin:0;
padding:.15rem .15rem 0 .15rem;
}

.overlay dialog.message .main ul li{
float:left;
width:100%;
margin:0;
padding:0 0 .15rem 0;
}

.overlay dialog.message .main li .label{
float:left;
width:auto;
margin:0;
padding:0;
font-size:var(--fs-s);
}

.overlay dialog.message .main li .value{
float:right;
width:auto;
margin:0;
padding:0;
font-size:var(--fs-s);
}

.overlay dialog.message table{
float:left;
width:auto;
margin:.5rem 0;
padding:0;
}

.overlay dialog.message .footer{
float:left;
width:100%;
margin:0;
padding:0;

& button{
float:left;
width:100%;
min-height:2rem;
font-weight:bold;
cursor:pointer;
text-align:center;
font-size:var(--fs-p);
border:var(--form-input-brd-primary-300) 1px solid;
background:var(--bgr-accent-400);
color:var(--clr-primary-300);
border-radius:.25rem;

&:hover{
border:var(--form-input-brd-primary-300) 1px solid;
background:var(--bgr-accent-400);
color:var(--clr-primary-400);
}

}

}



dialog.response{
margin:auto;
width:auto;
height:auto;
border:none !important;
padding:.5rem;
max-width:15rem;
min-height:13rem;
max-height:15rem;
border-radius:.25rem;
background:var(--bgr-gray-100);
}

dialog.response .header{
float:left;
display:flex;
justify-content:center;
align-items:center;
padding:0 .25rem;
width:100%;
background:var(--bgr-gray-100);
}

dialog.response .main{
float:left;
margin:0;
padding:0 .25rem;
width:100%;
height:auto;
background:var(--bgr-gray-100);
text-align:center;

& .content{
float:left;
width:100%;

& h2{
font-size:var(--fs-m);
float:left;
width:100%;
margin:0;
padding:0;
}

& p{
font-size:var(--fs-p);
float:left;
width:100%;
margin:0;
padding:0;
}

}

}