/* For very small mobile devices like smartphones in portrait orientation */
@media screen and (max-width: 320px) { }

/* For small mobile devices like smartphones in landscape orientation or small tablets. */
@media screen and (max-width: 480px) {
    .sidebar.collapsed+.main-content:not(.login-page .main-content) {
        width: 100%;
        margin-left: 0;
    }

    header {
        margin-left: 0;
        height: 80px;
        z-index: 15;
    }

    header .heading .suffix {
        display: none;
    }

    header .header-employee .header-employee-name,
    header .header-right .notifications-header,
    header .header-right .settings-header,
    .weekly-attendance-statistics,
    .main-attendance-logs {
        display: none;
    }

    .main-profile .card-body .biographical-details {
        flex-direction: column !important;
    }

    .official-details-profile {
        height: auto !important;
    }

    .accordion-button .accordion-button-content {
        flex-direction: column !important;
        gap: .5rem !important;
    }
}

/* For larger mobile devices and tablets in both portrait and landscape orientation. */
@media screen and (max-width: 768px) {}

/* For larger mobile devices and tablets in both portrait and landscape orientation. */
@media screen and (min-width: 767px) {
    header.header-wide {
        margin-left: 70px;
    }

    .accordion-button .accordion-button-content {
        flex-direction: row !important;
        gap: 1rem !important;
    }
}

/* For tablets and smaller laptops. */
@media screen and (max-width: 1023px) {
    .login-page .main-content {
        display: flex !important;
        flex-direction: column !important;
    }

    .login-page .left-section {
        display: none !important;
    }

    .login-page .right-section .login-form {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* For larger laptops and some desktop screens. */
@media screen and (max-width: 1200px) { }

/* For larger desktop screens. */
@media screen and (max-width: 1440px) { }

/* For large desktop screens and some high-resolution displays. */
@media screen and (max-width: 1920px) { }