.blazored-modal-container {
    z-index: 1020;
    overflow-x: hidden;
    overflow-y: auto;
    top: 0;
}

.blazored-modal-overlay {
    z-index: unset;
    top: 0;
    left: 0;
}

.blazored-modal {
    padding: unset;
    margin: 0 auto; 
}

.blazored-modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.blazored-modal-wrapper {
    z-index: 1050;
    height: 100%;
    width: 100%;
    overflow: hidden auto;
}

.blazored-modal-footer {
    border-top: 1px solid #e5e5e5;
    padding: 20px;
    margin: 0;
}

.blazored-modal {
   width: 980px;
}

.blazored-modal.sm {
    width: 500px;
}

.blazored-modal.md {
    width: 800px
}

.blazored-modal.lg {
    width: 1100px
}

.blazored-modal.xl {
    width: 1400px;
}

.mini-sidebar .blazored-modal .modaltabs {
    overflow: auto;
}

@media (min-width: 1200px) and (max-width: 1450px) {
    .blazored-modal {
        max-width: 980px;
    }
    .blazored-modal.sm {
        max-width: 830px;
    }

    .blazored-modal.md {
        max-width: 920px;
    }

    .blazored-modal.lg {
        max-width: 1010px;
    }

    .blazored-modal.xl {
        max-width: 1100px;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .blazored-modal {
        max-width: 850px;
    }
    .blazored-modal.sm {
        max-width: 730px;
    }
    
    .blazored-modal.md {
        max-width: 800px
    }
    
    .blazored-modal.lg {
        max-width: 870px
    }
    
    .blazored-modal.xl {
        max-width: 940px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) { 
    .blazored-modal {
        max-width: 630px;
    }
    .blazored-modal.sm {
        max-width: 550px;
    }

    .blazored-modal.md {
        max-width: 600px
    }

    .blazored-modal.lg {
        max-width: 650px
    }

    .blazored-modal.xl {
        max-width: 700px;
    }
}

@media (max-width: 767px) {
    .blazored-modal {
        max-width: 280px;
    }
    .blazored-modal.sm {
        max-width: 240px;
    }

    .blazored-modal.md {
        max-width: 270px;
    }

    .blazored-modal.lg {
        max-width: 300px;
    }

    .blazored-modal.xl {
        max-width: 330px;
    }
}

@media (max-width: 350px) {
    .blazored-modal {
        max-width: 225px;
    }
    .blazored-modal.sm {
        max-width: 195px;
    }

    .blazored-modal.md {
        max-width: 215px;
    }

    .blazored-modal.lg {
        max-width: 235px;
    }

    .blazored-modal.xl {
        max-width: 255px;
    }
}