@charset "utf-8";
:root {
	--modalBgColor: #000;
    --modalBorderColor: #888;
    --modalFontColor: #fff;
    --modalFontSize: 1em;
    --modalTitleSize: 1.5em;
    --modalSuccessBackground: #040;
    --modalSuccessFontColor: #0a0;
    --modalErrorBackground: #200;
    --modalErrorFontColor: #c00;
    --modalButtonColor: #004;
    --modalButtonColorActive: #444;
    --modalButtonColorDelete: #c00;
    --modalButtonColorClose: #222;
    --modalButtonFontColor: #fff;
    --modalButtonFontSize: 1.5em;
}

.modal {
    position: fixed; z-index: 3; display: grid; grid-template-rows: 40px 1fr 40px; top: 50%; gap: 5px; left: 50%; transform: translate(-50%, 50%);
    width: 800px; height: 80vh; background-color: var(--modalBgColor); border: var(--modalBorderColor) 1px solid; border-radius: 10px; overflow: hidden;
    opacity: 0; transition: opacity 0.5s, transform 0.5s;
}
.modal.bottom {
    transform: translate(-50%, 50%);
}
.modal.top {
    transform: translate(-50%, -100%);
}
.modal.left {
    transform: translate(-100%, -50%);
}
.modal.right {
    transform: translate(50%, -50%);
}
.modal.center {
    transform: translate(-50%, -50%);
}
.modal.active {
    transform: translate(-50%, -50%); opacity: 1;
}
.modal.small {
    width: 600px; height: 40vh;
}
.modal.popup {
    width: 600px; height: 140px; text-align: center;
}
.modal.popup > .content {
    display: flex; justify-content: center; align-items: center;
}
.modal.success {
    background-color: var(--modalSuccessBackground); color: var(--modalSuccessFontColor);
}
.modal.error {
    background-color: var(--modalErrorBackground); color: var(--modalErrorFontColor)
}
.modal.success > .content, .modal.error > .content {
    font-size: 1.5em; line-height: 1.5em;
}
.modal.full {
    width: 100%; height: 100%; border: none; border-radius: 0;
}
.modal > .head {
    display: grid; grid-template-columns: 1fr 5fr 1fr; gap: 10px; padding: 10px 10px 5px 10px; color: var(--modalFontColor);
}
.modal > .head > .left {
    text-align: left; font-size: var(--modalTitleSize); line-height: 1.5em;
}
.modal > .head > .title {
    font-size: var(--modalTitleSize); text-align: center; line-height: 1.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal > .head > .right {
    text-align: right; font-size: var(--modalTitleSize); line-height: 1.5em;
}
.modal > .head > .left img, .modal > .head > .right img {
    cursor: pointer;
}
.modal > .content {
    overflow: auto;
}
.modal > .buttons .main {
    background-color: var(--modalButtonColor);
}
.modal > .buttons .main:hover {
    background-color: var(--modalButtonColorActive);
}
.modal > .buttons .delete {
    background-color: var(--modalButtonColorDelete);
}
.modal > .buttons .close {
    background-color: var(--modalButtonColorClose);
}
.modal > .buttons > div {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 2px; height: 100%;
}
.modal > .buttons > div input {
    height: 100%; background-color: var(--modalButtonColor); color: var(--modalButtonFontColor); font-size: var(--modalButtonFontSize);
    transition: background-color 0.5s;
}
.modal > .buttons > div input:hover {
    background-color: var(--modalButtonColorActive);
}

@media only screen and (max-width: 820px) {
    .modal, .modal.small, .modal.full {
        width: 100%; height: 100%; border: none; border-radius: 0;
    }
}