/* -------------------------------- FINESTRE MODALI -------------------------------- */

modal_screen,
modal_message_screen,
.ModalScreen
{
    display: inline-block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .25s all ease-in-out;
    background-color: rgba(0,0,0,0.3);
    z-index: 1000;
}

modal_screen>modal_container,
modal_message_screen>modal_message,
.ModalScreen>modal_container
{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: var(--shadow3);
    padding: 1rem;
    border-radius: .25rem;
    background-color: white;
    max-width: calc(100% - 2rem);
    max-height: calc(100% - 2rem);
}

modal_screen>modal_container,
.ModalScreen>modal_container
{
    max-height: calc(100% - 2rem);
    overflow-y: auto;
}

modal_screen:not(*[direction]):not(*[show]) {display: none;}
modal_screen[direction=left]:not(*[show]) {left: -100%;}
modal_screen[direction=right]:not(*[show]) {left: 200%;}
modal_screen[direction=top]:not(*[show]) {top: -100%;}
modal_screen[direction=bottom]:not(*[show]) {top: 200%;}

modal_message_screen:not(*[direction]):not(*[show]) {display: none;}
modal_message_screen[direction=left]:not(*[show]) {left: -100%;}
modal_message_screen[direction=right]:not(*[show]) {left: -100%;}
modal_message_screen[direction=top]:not(*[show]) {left: -100%;}
modal_message_screen[direction=bottom]:not(*[show]) {left: -100%;}

.ModalScreen:not(*[direction]):not(*[show]) {display: none;}
.ModalScreen[direction=left]:not(*[show]) {left: -100%;}
.ModalScreen[direction=right]:not(*[show]) {left: 200%;}
.ModalScreen[direction=top]:not(*[show]) {top: -100%;}
.ModalScreen[direction=bottom]:not(*[show]) {top: 200%;}