/* ==============================================================================
   USERS APP MOBILE & GLOBAL RESPONSIVE STYLES (1% SIDE MARGIN)
   ============================================================================== */

:root {
    --global-side-margin: 1%;
    --users-side-margin: 1%;
}

/* Ensure all users app templates maintain 1% left & right margin */
.main-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1% !important;
    padding-right: 1% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.profile-container,
.account-container,
.security-container,
.settings-container,
.resume-dashboard-container,
.resume-builder-container,
.modern-newsfeed-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.profile-row,
.newsfeed-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 991px) {
    .main-content {
        padding-left: 1% !important;
        padding-right: 1% !important;
    }
}

@media (max-width: 768px) {
    .main-content {
        padding-left: 1% !important;
        padding-right: 1% !important;
        padding-top: 15px !important;
    }

    .profile-row,
    .newsfeed-row {
        flex-direction: column !important;
    }
}

@media (max-width: 576px) {
    .main-content {
        padding-left: 1% !important;
        padding-right: 1% !important;
        padding-top: 10px !important;
    }
}