:root {
    --fires-space-xs: 0.25rem; /*  4px */
    --fires-space-sm: 0.5rem; /*  8px */
    --fires-space-md: 0.75rem; /* 12px */
    --fires-space-lg: 1rem; /* 16px */
    --fires-space-xl: 1.5rem; /* 24px */
    --fires-base-font-size: 85%;

    --fires-cui-banner-height: 1.5rem;
    --fires-appbar-height: 124px;
    --fires-content-offset: 160px;

    --fires-left-panel-offset: calc(var(--fires-content-offset) + 325px);
    --fires-manage-user-panel-offset: calc(var(--fires-content-offset) + 115px);
}

@media (max-width: 1279.98px) {
    :root {
        --fires-appbar-height: 104px;
        --fires-content-offset: 104px;
    }
}

@media (max-width: 576px) {
    :root {
        --fires-space-md: 0.375rem; /*  6px on phones */
        --fires-space-lg: 0.5rem;   /*  8px on phones */
        --fires-space-xl: 0.75rem;  /* 12px on phones */

        --fires-appbar-height: 96px;
        --fires-content-offset: 96px;
    }
}

.fires-p-xs { padding: var(--fires-space-xs) !important; }
.fires-p-sm { padding: var(--fires-space-sm) !important; }
.fires-p-md { padding: var(--fires-space-md) !important; }
.fires-p-lg { padding: var(--fires-space-lg) !important; }
.fires-p-xl { padding: var(--fires-space-xl) !important; }

.fires-px-xs { padding-left: var(--fires-space-xs) !important; padding-right: var(--fires-space-xs) !important; }
.fires-px-sm { padding-left: var(--fires-space-sm) !important; padding-right: var(--fires-space-sm) !important; }
.fires-px-md { padding-left: var(--fires-space-md) !important; padding-right: var(--fires-space-md) !important; }
.fires-px-lg { padding-left: var(--fires-space-lg) !important; padding-right: var(--fires-space-lg) !important; }
.fires-px-xl { padding-left: var(--fires-space-xl) !important; padding-right: var(--fires-space-xl) !important; }

.fires-py-xs { padding-top: var(--fires-space-xs) !important; padding-bottom: var(--fires-space-xs) !important; }
.fires-py-sm { padding-top: var(--fires-space-sm) !important; padding-bottom: var(--fires-space-sm) !important; }
.fires-py-md { padding-top: var(--fires-space-md) !important; padding-bottom: var(--fires-space-md) !important; }
.fires-py-lg { padding-top: var(--fires-space-lg) !important; padding-bottom: var(--fires-space-lg) !important; }
.fires-py-xl { padding-top: var(--fires-space-xl) !important; padding-bottom: var(--fires-space-xl) !important; }

.fires-m-xs { margin: var(--fires-space-xs) !important; }
.fires-m-sm { margin: var(--fires-space-sm) !important; }
.fires-m-md { margin: var(--fires-space-md) !important; }
.fires-m-lg { margin: var(--fires-space-lg) !important; }
.fires-m-xl { margin: var(--fires-space-xl) !important; }

.fires-mx-xs { margin-left: var(--fires-space-xs) !important; margin-right: var(--fires-space-xs) !important; }
.fires-mx-sm { margin-left: var(--fires-space-sm) !important; margin-right: var(--fires-space-sm) !important; }
.fires-mx-md { margin-left: var(--fires-space-md) !important; margin-right: var(--fires-space-md) !important; }
.fires-mx-lg { margin-left: var(--fires-space-lg) !important; margin-right: var(--fires-space-lg) !important; }
.fires-mx-xl { margin-left: var(--fires-space-xl) !important; margin-right: var(--fires-space-xl) !important; }

.fires-my-xs { margin-top: var(--fires-space-xs) !important; margin-bottom: var(--fires-space-xs) !important; }
.fires-my-sm { margin-top: var(--fires-space-sm) !important; margin-bottom: var(--fires-space-sm) !important; }
.fires-my-md { margin-top: var(--fires-space-md) !important; margin-bottom: var(--fires-space-md) !important; }
.fires-my-lg { margin-top: var(--fires-space-lg) !important; margin-bottom: var(--fires-space-lg) !important; }
.fires-my-xl { margin-top: var(--fires-space-xl) !important; margin-bottom: var(--fires-space-xl) !important; }

.fires-mt-md { margin-top: var(--fires-space-md) !important; }
.fires-mt-lg { margin-top: var(--fires-space-lg) !important; }
.fires-mt-xl { margin-top: var(--fires-space-xl) !important; }

.fires-mb-md { margin-bottom: var(--fires-space-md) !important; }
.fires-mb-lg { margin-bottom: var(--fires-space-lg) !important; }
.fires-mb-xl { margin-bottom: var(--fires-space-xl) !important; }