@media(max-width:992px) {
    .wrapper {
        flex-wrap: wrap;
        height: auto;
        display: block;
    }

    .content {
        width: 100%;
    }

    .sidebar {
        width: 100%;
        max-width: 100%;
        padding-bottom: 0;
        overflow: inherit;
        display: block;
        border-radius: 12px 0 0;
        height: auto;
    }

    .sidebar .logo {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        padding: 2vw 2.5vw;
    }

    .mc-btn {
        display: block;
        margin-right: auto;
    }

    .ta {
        border: 1.8px solid var(--color-white);
        width: 35px;
        height: 35px;
        color: var(--color-white);
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .ta i::before {
        content: " ";
        width: 16px;
        height: 16px;
        display: inline-block;
        background-image: url(../images/menu-bars.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }


    .ta.active i:before {
        background-image: url(../images/menu-close.svg);
        background-size: cover;
    }

    .tgl-side-menu-cont {
        position: absolute;
        width: 100%;
        right: -200%;
        left: 0;
        top: auto;
        margin: auto;
        z-index: 99;
        transition: all 0.25s ease-out;
        background-color: var(--color-primary);
    }

    .sidebar .logo img {
        margin-bottom: 0;
        max-height: 6vw;
    }

    .logo h6 {
        margin-bottom: 0;
    }

    .tgl-side-menu-cont.active {
        right: 0;
        border-radius: 0 0 0 12px;
        overflow: hidden;
        height: -webkit-fill-available;
    }

    .navbar {
        --bs-navbar-brand-font-size: inherit;
    }

    .navbar .nav-link img {
        width: 2.2vw;
        height: 2.2vw;
    }

    .db-service-history-sec {
        gap: 18px 2%;
    }

    .db-service-history {
        width: 49%;
        padding: 2vw;
    }

    .db-service-history-info-img {
        width: 4vw;
        height: 4vw;
        padding: 0.8vw;
    }

    .chart-title-sec,
    .chart-area-sec {
        padding: 2vw 3vw;
    }

    .sidebar-nav .nav-link .count {
        width: 2.2vw;
        height: 2.2vw;
    }

    .sidebar-nav .nav-link img {
        width: 2.4vw;
    }

    .sidebar-userinfo img {
        width: 4vw;
        height: 4vw;
    }

    .navbar {
        padding: 1.2vw 0;
    }

    .form-box-info,
    .form-box-btns,
    .shadow-box.pad,
    .sb-title,
    .sb-info {
        padding: 2vw 2.5vw;
    }

    .form-box-btns .btn {
        min-width: 12vw;
    }

    .table th {
        white-space: nowrap;
    }

    .ad-stat {
        white-space: nowrap;
    }

    .table td:has(a) {
        white-space: nowrap;
    }

    .table td a img {
        width: 2.2vw;
    }

    .paging-numbers ul li a {
        width: 3vw;
        height: 3vw;
        padding: 0.3vw;
    }

    .ai-score-badge img {
        width: 2vw;
    }

    .ai-score-label {
        align-items: center;
    }

    .ai-note img {
        width: 2vw;
    }

    .nav-rs {
        gap: 2vw;
    }

    .btn-up img {
        width: 1.8vw;
    }

    .attachments-block p {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .attachments-block p img {
        width: 3.5vw;
    }
}

@media(max-width:480px) {
    .sidebar .logo {
        padding: 3vw 3.5vw;
    }

    .sidebar .logo img {
        max-height: 8vw;
    }

    .mt-4 {
        margin-top: 1rem !important;
    }

    .mb-4 {
        margin-bottom: 1rem !important;
    }

    .nav-rs {
        gap: 3vw;
    }

    .navbar .nav-link img {
        width: 3.5vw;
        height: 3.5vw;
    }

    .db-service-history {
        padding: 3vw;
    }

    .db-service-history-info-img {
        width: 6vw;
        height: 6vw;
        padding: 1vw;
    }

    .chart-title-sec,
    .chart-area-sec {
        padding: 3vw 4vw;
    }

    .ta {
        width: 30px;
        height: 30px;
    }

    .ta.active i::before {
        width: 12px;
        height: 12px;
    }

    .sidebar-nav .nav-link img {
        width: 4vw;
    }

    .sidebar-nav .nav-link .count {
        width: 4.2vw;
        height: 4.2vw;
    }

    .form-title {
        margin-bottom: 1rem;
    }

    .form-box-info,
    .form-box-btns,
    .shadow-box.pad,
    .sb-title,
    .sb-info {
        padding: 3vw 3.5vw;
    }

    .paging-numbers ul li a {
        width: 5vw;
        height: 5vw;
        padding: 0.5vw;
    }

    .paging-numbers ul li a img {
        height: 3vw;
    }

    .ai-score {
        min-width: 40vw;
    }

    .ai-score-badge img {
        width: 4vw;
    }

    .ai-score-badge {
        padding: 0.6vw 1vw;
    }

    .sb-info-details {
        gap: 10px 2%;
    }

    .sb-info-details p {
        width: 32%;
    }

    .attachments-info,
    .attachments-block {
        width: 100%;
    }

    .attachments-info img {
        height: 36px;
    }

    .ai-note img {
        width: 4vw;
    }

    .smd .form-select,
    .smd .form-control {
        min-height: 40px;
    }

    .form-box-btns .btn {
        min-width: 20vw;
    }

    .table td a img {
        width: 4.2vw;
    }

    td a.btn {
        border-radius: 9px;
    }
	
	.attachments-block p img {
        width: 7.5vw;
    }
    
    .btn-up img {
        width: 3.5vw;
    }
}