.modal{
    position: fixed;
    bottom: 0;
    right: 0;
    gap: 20px;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font: var(--f-body-small);
    background-color: rgba(0, 18, 56, 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    z-index: 1000;
    transition: bottom 0.3s ease-in-out;
}
.modal--visible {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 18, 56, 0.56);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding: 10px;
}
.modal--hidden {
    animation: modalVanish 0.3s;
}
.modal__content{
    position: relative;
    margin: auto;
    padding: 32px 24px;
    border-radius: 24px;
    background-color: var(--white);
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    overflow: auto;
}
@media(min-width:650px){
    .modal__content{
        /*width: initial;
        height: initial;*/
    }
}

.modal--visible .modal__content{
    animation: slidingDownIn 0.3s ease-in-out;
}
.modal--hidden .modal__content{
    animation: slidingDownOut 0.4s ease-in-out;
}
.modal__close{
    border:none;
    position: absolute;
    top: 6px;
    left: auto;
    right: 6px;
    background-color: transparent;
    cursor: pointer;
}

@keyframes slidingIn {
    0% {
        right: -100vh;
    }
    70% {
        right: 4px;
    }
    100% {
        right: 0;
    }
}

@keyframes slidingDownIn {
    0% {
        bottom: -100vh;
    }
    70% {
        bottom: 0.5vh;
    }
    100% {
        bottom: 0;
    }
}
@keyframes slidingOut{
    0%{
        right: 0;
    }
    30%{
        right: 4px;
    }
    60%{
        right: -200px;
    }
    100%{
        right: -400px;
    }
}
@keyframes slidingDownOut{
    0%{
        bottom: 0;
    }
    30%{
        bottom: 0.5vh;
    }
    60%{
        bottom: -100vh;
    }
    100%{
        bottom: -200vh;
    }
}


@keyframes modalVanish {
    0% {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 18, 56, 0.56);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        bottom: 0;
    }
    90%{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 18, 56, 0.56);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
    100% {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 18, 56, 0);
        -webkit-backdrop-filter: blur(0);
        backdrop-filter: blur(0);
        bottom:0;
    }
}

@keyframes keepSize{
    0%{
        height: auto;
        width: 100%;
    }
    100%{
        height: auto;
        width: 100%;
    }
}
@keyframes widthGrow{
    0%{
        width: 0px;
    }
    100%{
        width: 100%;
    }
}

@media (max-height:450px) {
    @keyframes slidingIn {
        0% {
            right: -100vw;
        }
        40% {
            right: 4px;
        }
        50% {
            right: 0;
        }
        100% {
            right: 0;
        }
    }
    @keyframes slidingOut{
        0%{
            right: 0;
        }
        10%{
            right: 4px;
        }
        50%{
            right: -60vw;
        }
        100%{
            right: -200vw;
        }
    }    
}