*, *::before, *::after {
    box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
}
body {
    overflow-x: hidden;
}

.container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
}
.body .table,
.card .table {
    width: 100%;
}
.navbar-right {
    flex-wrap: wrap !important;
    gap: 4px;
    background-color: #2193b0!important;
}
@media (max-width: 576px) {
    .nav-align-top .btn {
        font-size: 0.78rem;
        padding: 0.3rem 0.5rem;
    }
    
    .nav-align-top {
        gap: 4px !important;
        flex-wrap: wrap !important;
    }
    
    .card .header {
        padding: 12px 15px;
    }
    
    .modal-dialog {
        margin: 0.25rem !important;
        max-width: calc(100% - 0.5rem) !important;
    }
    .footer .col-lg-3 {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 768px) {
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .btn-toolbar {
        flex-wrap: wrap;
        gap: 4px;
    }
    .content {
        padding: 0.75rem !important;
    }
    
    .input-group {
        flex-wrap: nowrap;
    }
    
    .row {
        --bs-gutter-x: 0.75rem;
    }
}

@media (max-width: 992px) {
    [class*="col-lg"] {
        margin-bottom: 0.5rem;
    }
}