#custom-popup
{
display: none;
position: fixed;
top: 50%;
left: 50%;
max-width: 500px;
width: calc(100% - 40px);
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity .5s;
z-index: 100001;
}
#custom-popup .popup-wrapper
{
width: 100%;
height: 100%;
background-color: white;
-webkit-box-shadow: 8px 8px 24px 0px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 8px 8px 24px 0px rgba(0, 0, 0, 0.6);
box-shadow: 8px 8px 24px 0px rgba(0, 0, 0, 0.6);
padding: 20px;
}
#custom-popup .popup-wrapper .popup-header
{
display: flex;
}
#custom-popup .popup-wrapper .popup-header button
{
width: 24px;
height: 24px;
background: none;
color: black;
font-size: 20px;
line-height: 20px;
padding: 2px;
}
#custom-popup.startShow
{
display: block !important;
}
#custom-popup.show
{
display: block !important;
opacity: 1;
}
#custom-popup.show::after
{
display: block;
content: '';
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
top: 50%;
left: 50%;
z-index: -1;
transform: translate(-50%, -50%);
}