.u-modal {
    z-index: 1040;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /*height: 100%;*/
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    border: none;
    background-color: initial;
    background-color: rgba(0, 0, 0, .5);
}

    .u-modal.show {
        display: flex;
    }

    .u-modal.fadeIn {
        animation: fadeIn .5s;
        -webkit-animation: fadeIn .5s;
        -moz-animation: fadeIn .5s;
    }

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.u-modal > .u-modal-wrapper {
    height: fit-content;
    margin: auto;
}

    .u-modal > .u-modal-wrapper > .u-modal-content {
        display: flex;
        flex-direction: column;
        width: 380px;
        height: fit-content;
        margin: auto;
        border: 1px solid rgba(0, 0, 0, .2);
        border-radius: 0.3rem;
        background-clip: padding-box;
        background-color: #ffffff;
        outline: 0;
        pointer-events: auto;
    }

        .u-modal > .u-modal-wrapper > .u-modal-content.comingIn {
            animation: comingIn .5s ease;
            -webkit-animation: comingIn .5s ease;
            -moz-animation: comingIn .5s ease;
        }

@-webkit-keyframes comingIn {
    0% {
        opacity: 0;
        transform: scale(.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-moz-keyframes comingIn {
    0% {
        opacity: 0;
        transform: scale(.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes comingIn {
    0% {
        opacity: 0;
        transform: scale(.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


.of-hide {
    overflow: hidden;
}

    .of-hide::-webkit-scrollbar {
        display: none;
    }