.modal {
    position: fixed;
    background-color: white;
    border: 3px solid rgb(195 202 193);
    width: 30%;
    border-radius: 35px;
    box-shadow: 8px 10px 10px grey;
    padding: 15px;
    display: flex;
    flex-direction: column;
    height: auto;
    z-index: 1;
    gap: 10px;

    b {
        font-size: large;
    }

    &[draggable="true"] {
        cursor: move;
    }

    &.modal-small {
        box-shadow: none;
        border-width: 2px;
        min-width: 10%;
        user-select: none;
        width: auto;

        b {
            font-size: medium;
        }

        p {
            display: flex;
            flex-direction: column;
        }

        label {
            cursor: pointer;
        }
    }

    &.modal-center {
        top: 50%;
        left: 50%;
        translate: -50% -50%;
    }

    &.modal-centerX {
        left: 50%;
        translate: -50%;
    }

    &.modal-centerY {
        top: 50%;
        translate: 0 -50%;
    }

    &.modal-animate {
        animation: animatezoom 0.6s;
    }

    .modal-close,
    .modal-expand,
    .modal-reduce {
        position: absolute;
        top: 0;
        right: 0;

        &::after {
            position: absolute;
            color: grey;
            font-size: 30px;
            cursor: pointer;
            top: 0;
        }
    }

    .modal-close::after {
        content: 'x';
        right: 20px;
    }

    .title {
        text-align: center;
    }

    .modal-expand::after {
        content: '+';
        right: 40px;
        top: 1px;
    }

    .modal-reduce::after {
        content: '-';
        right: 40px;
    }

    .modal-previous,
    .modal-next {
        position: absolute;
        top: 50%;
        width: 40px;
        height: 40px;
        border-radius: 100px;
        background: #b6b7b2;
        cursor: pointer;

        &:hover {
            background: grey;
        }

        &:after {
            position: absolute;
            color: white;
            font-weight: bold;
            font-size: larger;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .modal-previous {
        left: 25px;

        &:after {
            content: "<";
        }
    }

    .modal-next {
        right: 25px;

        &:after {
            content: ">";
        }
    }
}

#modal-login:not(.modal-open),
#modal-pwd:not(.modal-open),
#modal-signin:not(.modal-open),
#modal-details:not(.modal-open),
#modal-shortcuts:not(.modal-open),
#modal-legend:not(:has(.modal-open)) {
    display: none;
}

#modal-legend {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;

    .modal {
        padding: 40px;
        width: 60%;
        user-select: none;
    }
}

#modal-shortcuts {
    top: 130px;
    right: 0;
}

#modal-login,
#modal-pwd,
#modal-signin {
    background-color: #f0f0f0;
}

#modal-login input[type=text],
#modal-signin input[type=text],
#modal-pwd input[type=text],
input[type=password],
input[type=email] {
    width: 90%;
    padding: 12px 20px;
    margin: auto;
    display: flex;
    border: 1px solid #ababab;
}

#modal-index {
    font-size: 1vw;
    width: 60%;
    gap: 20px;

    >p {
        display: flex;
        flex: 1;
        text-align: justify;

        span {
            padding: 10px;
        }
    }

    .versions {
        align-self: center;
        color: red;
        text-align: center;
    }

}

body:has(.modal-open) #modal-index {
    display: none;
}