@keyframes popup-in {
    0% {
        opacity: 0;
        transform: scale(0.75);
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}@keyframes popup-out {
    0% {
        transform: scale(1);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(0.75);
    }
}

.module.popup {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: var(--cl-black-38);
    display: none;
    z-index: 999997;
    backdrop-filter: blur(8px);
    overflow: hidden;
}
.module.popup .overlay {
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 999998;
    justify-content: center;
    align-items: center;
    padding: var(--gl-site-padding);
}
.module.popup .popup-box {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 999999;
    background-color: var(--cl-white);
    padding: var(--gl-narrower);
    border-radius: var(--br-news);
    box-shadow: var(--sd-strong);
    width: 100%;
    max-height: 100%;
    overflow: auto;
}
.module.popup .popup-box .title {
    color: var(--cl-shady-5);
    font-size: var(--fs-subtitle);
    font-weight: 500;
    text-align: center;
    line-height: 130%;
    letter-spacing: var(--gl-ltrspc-5);
}
.module.popup .popup-box .iconbox {
    color: var(--cl-shady-5);
    font-size: var(--fs-body);
    font-weight: 500;
    text-align: center;
    line-height: 130%;
    letter-spacing: var(--gl-ltrspc-0);
    min-height: 164px;
}
a.iconbox:hover {
    opacity: 0.65;
}
.module.popup .popup-box .iconbox .image {
    color: var(--cl-shady-5);
    font-size: var(--fs-body);
    font-weight: 500;
    text-align: center;
    line-height: 130%;
    letter-spacing: var(--gl-ltrspc-0);
    background-color: transparent;
    /*background-color: var(--cl-bright-1);*/
    height: 100%;
    border-radius: var(--br-accordion);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.module.popup .popup-box .close {
    position: absolute;
    width: 28px;
    height: 28px;
    font-size: var(--fs-midtitle);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -32px;
    margin-right: -28px;
    color: var(--cl-shady-5);
    border-radius: var(--br-subtle);
    font-weight: 200;
    background-color: transparent;
    padding: 2px 4px 4px 4px;
}
.module.popup .popup-box .close:hover {
    color: var(--cl-white);
    background-color: var(--cl-erroneous-4);
}
.module.popup .popup-box .warning {
    width: 100%;
    text-align: center;
    margin-top: var(--gl-micro-2);
    font-size: 80%;
    line-height: 120%;
    text-wrap: balance;
    display: none;
}

#popup-peran .popup-box {
    max-width: 740px;
}
#popup-peran .popup-box [category="dinas"] .image      {   background-color: #FFF2D4;    }
#popup-peran .popup-box [category="pendidik"] .image   {   background-color: #F1EBFF;    }
#popup-peran .popup-box [category="mitra"] .image      {   background-color: #FFE1D0;    }
#popup-peran .popup-box [category="orang-tua"] .image  {   background-color: #DDF3E9;    }

#popup-narasumber .popup-box {
    max-width: 600px;
}
#popup-terima-kasih .popup-box {
    max-width: 600px;
}
#popup-narasumber select {
    padding: 8px 12px;
    border-radius: var(--br-input);
    background: var(--cl-white);
    transition: var(--tr-button);
    box-shadow: var(--sd-input);
    border: 1px solid var(--cl-bright-3);
    font-family: var(--fn-secondary);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 150%;
    outline: 1px solid transparent;
    width: 100%;
}
#popup-preview .popup-box {
    overflow: hidden;
}
#popup-preview #file-preview {
    border-radius: var(--br-accordion);
}