/* -------------------------------------------- MODAL */
.modal {
    width: calc(100vw - 10px); height: 100vh;
    box-sizing: border-box;
    background-color: var(--modal-b);
    display: flex; justify-content: center; align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
.modal-with-nav {
    width: calc(100vw - 10px); height: calc(100vh - 60px);
    box-sizing: border-box;
    background-color: var(--modal-b);
    display: flex; justify-content: center; align-items: center;
    position: fixed;
    z-index: 100;
    margin-top: 60px;
}

.modal-with-side-nav {
    width: calc(100vw - 70px); height: calc(100vh - 60px);
    box-sizing: border-box;
    background-color: var(--modal-b);
    display: flex; justify-content: center; align-items: center;
    position: fixed;
    z-index: 100;
    margin-top: 60px; margin-left: 60px;
}

.modal-box {
    width: 90%; height: 90%;
    border-radius: var(--br-10);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 40px 60px; box-sizing: border-box;
}
.modal-box-flex {
    width: 90%; 
    border-radius: var(--br-10);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 80px 60px; box-sizing: border-box;
}
.modal-box-flex-with-close {
    width: 90%; 
    border-radius: var(--br-10);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 10px 10px 60px 10px; box-sizing: border-box;
}


/* Colors for different boxes */
.modal-color1 {background-color: var(--100);}
.modal-color2 {background-color: var(--100);}


/* ----------------------------------------------------------- @media */
@media only screen and (max-width: 600px) {
    .modal-with-side-nav {
        width: 100vw; height: calc(100vh - 160px);
        box-sizing: border-box;
        background-color: var(--modal-b);
        display: flex; justify-content: center; align-items: center;
        position: fixed;
        z-index: 100;
        margin-top: 80px; margin-bottom: 80px; margin-left: 0px;
    }
    .modal-box {padding: 40px 20px};
}