:root {
    /* --land-color: #005b7f; */
    --land-color: rgba(0, 91, 127, 0.29);
    --land-color-full: rgba(0, 91, 127, 1);
    --land-color-light: rgba(0, 91, 127, 0.1);
    /* --kommunen-color: #179c7d; */
    --kommunen-color: rgba(23, 156, 125, 0.29);
    --kommunen-color-full: rgba(23, 156, 125, 1);
    --kommunen-color-light: rgba(23, 156, 125, 0.1);
    /* --datenhaltende-color: #f58220; */
    --datenhaltende-color: rgba(245, 130, 32, 0.29);
    --datenhaltende-color-full: rgba(245, 130, 32, 1);
    --datenhaltende-color-light: rgba(245, 130, 32, 0.1);

    /* Surface */
    --surface: #ffffff;
    --surface-variant: #fdfbff;
    --surface-container: #f7f2ff;

    /* Text */
    --on-surface: #1c1b1f;
    --on-surface-variant: #49454f;
    --on-surface-muted: #79747e;
    --on-surface-disabled: #b4b0bb;

    /* Brand */
    --primary: #6750a4;
    --primary-hover: #5a4490;
    --primary-container: #eaddff;
    --on-primary-container: #21005d;
    --tertiary: #7d5260;

    /* Semantic */
    --danger: #dc2626;
    --danger-strong: #b91c1c;
    --danger-container: #fee2e2;

    /* Lines */
    --outline: #cac4d0;
    --outline-variant: #e7e0ec;

    /* Radius & shadow */
    --radius-card: 16px;
    --radius-sm: 10px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04),
        0 8px 24px rgba(103, 80, 164, 0.10);
    --shadow-btn: 0 2px 6px rgba(103, 80, 164, 0.32);

    /* Motion */
    --ease: cubic-bezier(0.2, 0, 0, 1);
}

body {
    background-repeat: repeat;
    background-image: url(/static/images/dev.svg);
    background-size: 200px 200px;
}

main {
    padding-bottom: 100px;
}

.bg-land {
    background-color: var(--land-color) !important;
}

.bg-kommunen {
    background-color: var(--kommunen-color) !important;
}

.bg-datenhaltende {
    background-color: var(--datenhaltende-color) !important;
}

.bg-land-light {
    background-color: var(--land-color-light) !important;
}

.bg-kommunen-light {
    background-color: var(--kommunen-color-light) !important;
}

.bg-datenhaltende-light {
    background-color: var(--datenhaltende-color-light) !important;
}

}

.bg-datenhaltende {
    background-color: var(--datenhaltende-color) !important;
}


.color-land {
    color: var(--land-color-full) !important;
}

.color-kommunen {
    color: var(--kommunen-color-full) !important;
}

.color-datenhaltende {
    color: var(--datenhaltende-color-full) !important;
}