@media (max-width: 768px) {
    .modal-dialog {
        position: fixed;
        width: 100%;
        margin: 0;
        bottom: 0;
        border-radius: 30px 30px 0 0;
        max-height: 80%;
        padding-top: 0 !important;
        /*padding-bottom: env(safe-area-inset-bottom);*/
        background: white !important;
        z-index: 999999999;
        /*overflow-y: scroll !important; */
        
        
        max-width: 100%;
    }

    body[data-theme=dark] .modal-dialog {
        background: #272b34 !important;
    }

    .modal-header {
        position: sticky;
        top: 0;
        /* border-radius:30px 30px 0 0;*/
        z-index: 999;
        background: white !important;
    }

    body[data-theme=dark] .modal-header {
        background: #272b34 !important;
    }

    .modal-header .btn-close {
        margin-top: 10px;
    }

    .modal-title:before {
        content: "━━━";
        font-size: 24px;
        display: flex;
        align-items: center;
        width: 100%;
        margin-top: -20px;
        justify-content: center;
        padding-bottom: 5px;
        cursor: grab;
        padding-left: 30px;
    }

    .modal-title {
        width: 100%;
    }

    .modal-body {
        /*background: #323743 !important;*/
    }

    .modal-body iframe{
        border-radius:20px;
    }

    .modal.fade .modal-dialog {
        transform: translate(0, 200px);
        width: 100%;
    }

    .modal.show .modal-dialog {
        transform: translate(0, 0px);
        width: 100%;
    }

    .modal-lg, .modal-xl {
        max-width: 100%;
    }

    .modal-content {
        border-radius: 30px 30px 0 0;
        /*background: #323743 !important;*/
        overflow-y: scroll !important;
        max-height: 80vh;
        padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
    }

    .modal-footer {
        justify-content: flex-start;
    }

        .modal-footer .btn {
            background: none !important;
            background-color: none !important;
            color: var(--black) !important;
        }

    .row > .modal {
        padding: 0;
        margin: 0;
    }

    .swal2-popup {
        position: fixed;
        bottom: 0;
        border-radius: 30px 30px 0 0;
        padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
        
        width:100%;
    }




    @keyframes swal2-show {
        0% {
            transform: translate(0px, 250px);
            opacity: 0;
        }

        10% {
            transform: translate(0px, 225px);
            opacity: 0.1;
        }

        20% {
            transform: translate(0px, 200px);
            opacity: 0.2;
        }

        30% {
            transform: translate(0px, 175px);
            opacity: 0.3;
        }

        40% {
            transform: translate(0px, 150px);
            opacity: 0.4;
        }

        50% {
            transform: translate(0px, 125px);
            opacity: 0.5;
        }

        60% {
            transform: translate(0px, 100px);
            opacity: 0.6;
        }

        70% {
            transform: translate(0px, 75px);
            opacity: 0.7;
        }

        80% {
            transform: translate(0px, 50px);
            opacity: 0.8;
        }

        90% {
            transform: translate(0px, 25px);
            opacity: 0.9;
        }

        100% {
            transform: translate(0px, 0px);
            opacity: 1;
        }
    }

    @keyframes swal2-hide {
        0% {
            transform: translate(0px, 0px);
            opacity: 1;
        }

        10% {
            transform: translate(0px, 25px);
            opacity: 0.9;
        }

        20% {
            transform: translate(0px, 50px);
            opacity: 0.8;
        }

        30% {
            transform: translate(0px, 75px);
            opacity: 0.7;
        }

        40% {
            transform: translate(0px, 100px);
            opacity: 0.6;
        }

        50% {
            transform: translate(0px, 125px);
            opacity: 0.5;
        }

        60% {
            transform: translate(0px, 150px);
            opacity: 0.4;
        }

        70% {
            transform: translate(0px, 175px);
            opacity: 0.3;
        }

        80% {
            transform: translate(0px, 200px);
            opacity: 0.2;
        }

        90% {
            transform: translate(0px, 225px);
            opacity: 0.1;
        }

        100% {
            transform: translate(0px, 250px);
            opacity: 0;
        }
    }

    





}