/* 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(.public-facing-page .main-content, .registration-page .main-content) {
        width: 100%;
        margin-left: 0;
    }

    header {
        margin-left: 0;
        height: 60px;
    }
}

/* For larger mobile devices and tablets in both portrait and landscape orientation. */
@media screen and (max-width: 768px) {
    .receipt-form .radio-group .radio-item {
        width: 100% !important;
    }
}

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

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

    .public-facing-page .logo {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 1.5rem !important;
    }

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

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

    .dashboard-page .heading-card {
        justify-content: center !important;
        gap: 2rem !important;
    }

    .dashboard-page .heading-card .filter-element {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .profile-page .main-content .content {
        gap: 1rem !important;
    }

    .profile-page .nav-tabs .nav-link {
        padding: .5rem 1rem !important;
    }

    .users-page .users-container-lg {
        display: none;
    }

    .events-page .events-container-lg {
        display: none;
    }

    .receipts-page .receipts-container-lg {
        display: none;
    }

    .donors-page .donors-container-lg {
        display: none;
    }

    .registrations-page .registrations-container-lg {
        display: none;
    }

    .popup-modal#edit-user-modal,
    .popup-modal#edit-receipt-modal,
    .popup-modal#edit-event-modal {
        width: 95% !important;
        max-height: calc(100vh - 100px);
    }

    .popup-modal.popup-confirm-modal,
    .popup-modal.popup-view-modal,
    .popup-modal.popup-confirm-modal#reset-password-modal {
        width: 90% !important;
    }

    .receipt-form .radio-group {
        flex-direction: column !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 larger desktop screens. */
@media screen and (max-width: 1700px) {
	.events-page .event-list {
		flex-direction: column !important;
	}
}

@media screen and (min-width: 1701px) {
	.events-page .event-list {
		flex-direction: row !important;
	}
}

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