@media only screen and (max-width: 1920px) and (min-width: 1445px) {
    .container {
        max-width: 1450px;
    }
}

@media only screen and (max-width: 1600px) {}

@media only screen and (max-width: 1445px) {
    html {
        font-size: 15px;
    }
}

@media only screen and (max-width: 1366px) {
    html {
        font-size: 14px;
    }

    .account-card {
        flex-direction: column;
    }

    .account-card__link {
        width: max-content;
    }
}

@media (max-width: 1199.98px) {
    html {
        font-size: 13px;
    }

    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        z-index: 999;
        pointer-events: none;
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

    .dashboard-sidebar {
        height: 100vh;
        background: var(--white);
        position: fixed;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        will-change: transform;
        z-index: 1000;
        overflow-y: auto;
    }

    .dashboard-sidebar.active {
        transform: translateX(0);
    }

    body.sidebar-open {
        overflow: hidden;
    }

    .dashboard-content {
        width: 100%;
    }

    .header-form {
        display: none;
    }

    .header-links__icon {
        width: 50px;
    }

    .account-card {
        flex-direction: row;
    }

    .account-card__link {
        width: min-content;
    }
}

@media (max-width: 991.98px) {
    html {
        font-size: 12px;
    }
}

@media (max-width: 767.98px) {
    html {
        font-size: 11px;
    }

    .header {
        flex-direction: column;
        gap: 1rem;
    }

    :is(.cashbook-filter, .cashbook-filter__dates, .cashbook-filter .d-flex.gap-2) {
        width: 100%;
        flex-direction: column;
    }

    :is(.cashbook-filter .themeBtn, .cashbook-filter__dates .form-control) {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .dashboard-content__head {
        flex-direction: column;
        gap: 1rem;
    }

    .transaction-type-tabs {
        flex-direction: column;
        gap: 0.75rem;
    }

    .add-product-form__actions {
        flex-direction: column;
    }

    .add-product-form__actions .themeBtn {
        width: 100%;
    }
}

@media (max-width: 320.98px) {}
