/* utilities.css - Small reusable helper classes used across pages. */

.pageContentMaxWidth {
    max-width: calc(var(--width-page-max) - var(--width-left-menu-max)) !important;
}

.contentMaxHeight {
    height: calc(100% - var(--height-top-bar)) !important;
}

.uiMinFormWidth {
    min-width: 640px;
}

.uiButtonsBottom {
    position: absolute;
    bottom: 0;
}

@media (min-width: 641px) {
    .uiMaxFormWidth {
        max-width: 640px !important;
    }
}

@media (min-width: 961px) {
    .uiMaxFormWidth {
        max-width: 960px !important;
    }
}

@media (min-width: 1281px) {
    .uiMaxFormWidth {
        max-width: 1280px !important;
    }
}

.monospace {
    font-variant-numeric: tabular-nums;
}

.smallText {
    font-size: .8rem!important;
}

/* ==========================================================================
   Spacing-skala (4px-steg)
   Appens markup er skrevet mot denne skalaen for mt-3 og oppover, og den
   overstyrer bevisst Bootstrap sine rem-verdier for samme klassenavn
   (Bootstrap: mt-3 = 1rem, mt-5 = 3rem; her: 12px / 20px). Størrelsene
   6/8/10 finnes ikke i Bootstrap og defineres kun her. !important kreves
   for aa vinne over Bootstrap sine !important-utilities.
   ========================================================================== */

.mt-3 { margin-top: var(--space-3) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.ms-3 { margin-left: var(--space-3) !important; }
.me-3 { margin-right: var(--space-3) !important; }
.mx-3 {
    margin-left: var(--space-3) !important;
    margin-right: var(--space-3) !important;
}
.my-3 {
    margin-top: var(--space-3) !important;
    margin-bottom: var(--space-3) !important;
}
.pt-3 { padding-top: var(--space-3) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.ps-3 { padding-left: var(--space-3) !important; }
.pe-3 { padding-right: var(--space-3) !important; }
.px-3 {
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
}
.py-3 {
    padding-top: var(--space-3) !important;
    padding-bottom: var(--space-3) !important;
}

.mt-4 { margin-top: var(--space-4) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.ms-4 { margin-left: var(--space-4) !important; }
.me-4 { margin-right: var(--space-4) !important; }
.mx-4 {
    margin-left: var(--space-4) !important;
    margin-right: var(--space-4) !important;
}
.my-4 {
    margin-top: var(--space-4) !important;
    margin-bottom: var(--space-4) !important;
}
.pt-4 { padding-top: var(--space-4) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.ps-4 { padding-left: var(--space-4) !important; }
.pe-4 { padding-right: var(--space-4) !important; }
.px-4 {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
}
.py-4 {
    padding-top: var(--space-4) !important;
    padding-bottom: var(--space-4) !important;
}

.mt-5 { margin-top: var(--space-5) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.ms-5 { margin-left: var(--space-5) !important; }
.me-5 { margin-right: var(--space-5) !important; }
.mx-5 {
    margin-left: var(--space-5) !important;
    margin-right: var(--space-5) !important;
}
.my-5 {
    margin-top: var(--space-5) !important;
    margin-bottom: var(--space-5) !important;
}
.pt-5 { padding-top: var(--space-5) !important; }
.pb-5 { padding-bottom: var(--space-5) !important; }
.ps-5 { padding-left: var(--space-5) !important; }
.pe-5 { padding-right: var(--space-5) !important; }
.px-5 {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
}
.py-5 {
    padding-top: var(--space-5) !important;
    padding-bottom: var(--space-5) !important;
}

.mt-6 { margin-top: var(--space-6) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.ms-6 { margin-left: var(--space-6) !important; }
.me-6 { margin-right: var(--space-6) !important; }
.mx-6 {
    margin-left: var(--space-6) !important;
    margin-right: var(--space-6) !important;
}
.my-6 {
    margin-top: var(--space-6) !important;
    margin-bottom: var(--space-6) !important;
}
.pt-6 { padding-top: var(--space-6) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }
.ps-6 { padding-left: var(--space-6) !important; }
.pe-6 { padding-right: var(--space-6) !important; }
.px-6 {
    padding-left: var(--space-6) !important;
    padding-right: var(--space-6) !important;
}
.py-6 {
    padding-top: var(--space-6) !important;
    padding-bottom: var(--space-6) !important;
}

.mt-8 { margin-top: var(--space-8) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }
.ms-8 { margin-left: var(--space-8) !important; }
.me-8 { margin-right: var(--space-8) !important; }
.mx-8 {
    margin-left: var(--space-8) !important;
    margin-right: var(--space-8) !important;
}
.my-8 {
    margin-top: var(--space-8) !important;
    margin-bottom: var(--space-8) !important;
}
.pt-8 { padding-top: var(--space-8) !important; }
.pb-8 { padding-bottom: var(--space-8) !important; }
.ps-8 { padding-left: var(--space-8) !important; }
.pe-8 { padding-right: var(--space-8) !important; }
.px-8 {
    padding-left: var(--space-8) !important;
    padding-right: var(--space-8) !important;
}
.py-8 {
    padding-top: var(--space-8) !important;
    padding-bottom: var(--space-8) !important;
}

.mt-10 { margin-top: var(--space-10) !important; }
.mb-10 { margin-bottom: var(--space-10) !important; }
.ms-10 { margin-left: var(--space-10) !important; }
.me-10 { margin-right: var(--space-10) !important; }
.mx-10 {
    margin-left: var(--space-10) !important;
    margin-right: var(--space-10) !important;
}
.my-10 {
    margin-top: var(--space-10) !important;
    margin-bottom: var(--space-10) !important;
}
.pt-10 { padding-top: var(--space-10) !important; }
.pb-10 { padding-bottom: var(--space-10) !important; }
.ps-10 { padding-left: var(--space-10) !important; }
.pe-10 { padding-right: var(--space-10) !important; }
.px-10 {
    padding-left: var(--space-10) !important;
    padding-right: var(--space-10) !important;
}
.py-10 {
    padding-top: var(--space-10) !important;
    padding-bottom: var(--space-10) !important;
}

.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }