:root {
    --popupBg: transparent;
    --popupBoxLigth: #3f464e;

    --popupMainLightNormal: #fa0;
    --popupMainLightDanger: #d55;
    --popupMainLightInfo: #8c8;
    --popupMainLightBlue: #8ac;
    
    --popupMsgLight: white;
    --popupMsgDark: #eee;
    --popupBtnText: #fff;
    --popupBtnBgNo: #0b0b0b;
    
    --popupSymbolDanger: #fa0;
    --popupSymbolInfo: #fa0;
    --popupSymbolBlue: #8ac;
    
    --popupBtnAlert: #0b0b0b;
}

.dark {
    --bs4t: #3f464e80;
    --bs4: #3f464e;
}
.Popup {
    z-index: 10;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--popupBg);
    display: flex;
    justify-content: center;
    align-items: center;
}
.Popup .box {
    padding: 25px;
    background-color: var(--bs4t);
    backdrop-filter: blur(3px);
    border-radius: 10px;
    border: 3px solid var(--popupMainLightNormal);
    width: calc(90vw - (25px + 3px));
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: popin 0.2s forwards;
}
.dark .Popup .box {
    border: 3px solid var(--popupMainLightNormal);
}
.Popup .box.fade {
    animation: popout 0.3s forwards;
}
.Popup .box .msg {
    color: black;
    margin: 20px 0;
    text-align: center;
}
.dark .Popup .box .msg {
    color: white;
}

.Popup .box .msg img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 0 5px black;
}

.Popup .box .field {
    width: 100%;
    display: flex;
    margin: 0;
}
.Popup .box .field input,
.Popup .box .field textarea {
    width: 100%;
    margin: 10px 5px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    outline: none;
    background-color: var(--bs4);
    box-shadow: inset 0 0 5px black;
    color: black;
}

.dark .Popup .box .field input,
.dark .Popup .box .field textarea {
    background-color: var(--bg1);
    box-shadow: unset;
    color: white;
}

.Popup .box textarea::-webkit-scrollbar {
    width: 7px;
}
.Popup .box textarea::-webkit-scrollbar-track {
    background-color: gray;
}
.Popup .box textarea::-webkit-scrollbar-thumb {
    background-color: var(--popupMainLightBlue);
}
.Popup .box input {
    text-align: center;
}
.Popup .box textarea::placeholder {
    text-align: center;
}
.Popup .box textarea {
    resize: none;
    text-align: justify;
}
.Popup .box .buttons {
    display: flex;
    width: 100%;
    max-width: 300px;
}
.Popup .box .buttons .btn {
    color: var(--popupBtnText);
    padding: 7px 0;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    width: 100%;
    margin: 0 5px;
    cursor: pointer;
}
.Popup .box .buttons .btn:hover {
    opacity: 0.75;
}
.Popup .box .buttons .btn:active {
    transform: scale(0.95);
}
.Popup .box .buttons .btn.no {
    background-color: var(--popupBtnBgNo);
}
.Popup .box .buttons .btn.confirm.yes {
    background-color: var(--popupMainLightNormal);
}
.Popup.danger .box {
    border: 3px solid var(--popupMainLightDanger);
}
.Popup.danger .box .symbol {
    color: var(--popupSymbolDanger);
}
.Popup.danger .box .btn.confirm.yes {
    background-color: var(--popupMainLightDanger);
}
.Popup.info .box {
    border: 3px solid var(--popupMainLightInfo);
}
.Popup.info .box .symbol {
    color: var(--popupSymbolInfo);
}
.Popup.info .box .btn.confirm.yes {
    background-color: var(--popupMainLightInfo);
}
.Popup.blue .box {
    border: 3px solid var(--popupMainLightBlue);
}
.Popup.blue .box .symbol {
    color: var(--popupSymbolBlue);
}
.Popup.blue .box .btn.confirm.yes {
    background-color: var(--popupMainLightBlue);
}
.Popup .box .btn.alert.yes {
    background-color: var(--popupBtnAlert);
}
@keyframes popin {
    0% {
        opacity: 0;
        transform: scale(2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes popout {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}