/* helper classes */

.text-primary {
    color: var(--color-text-primary) !important;
}

.text-secondary {
    color: var(--color-text-secondary) !important;
}

.text-tertiary {
    color: var(--color-text-tertiary) !important;
}

.bg-surface-primary {
    background: var(--color-surface-primary, #FFFFFF) !important;
}

.bg-surface-accent {
    background: var(--color-surface-accent-accent-1, #EFEBE5) !important;
}
.bg-surface-accent2 {
    background: var(--color-surface-accent-accent-2, #E1F9F2) !important;
}
.bg-surface-accent3 {
    background: var(--color-surface-accent-accent-3, #EFFFC8) !important;
}
.bg-surface-accent4 {
    background: var(--color-surface-accent-accent-4, #E7F3FF) !important;
}
.bg-surface-accent5 {
    background: var(--color-surface-accent-accent-5, #F1EFFD) !important;
}
.bg-surface-accent6 {
    background: var(--color-surface-accent-accent-6, #FFEDE1) !important;
}
.bg-surface-error {
    background: var(--color-surface-feedback-error, #FFE9E9) !important;
}
.bg-surface-neutral {
    background: #F8F6F4 !important;
}

.bg-surface-tertiary {
    background: var(--color-surface-tertiary, #F5F6F6) !important;
}

.no-scroll {
    overflow: hidden;
}

.no-wrap {
    white-space: nowrap;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.bullet-list {
    padding-inline-start: var(--spacing-20);
}


.headline-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.headline-box {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}

.headline-box .page-title{
    margin-bottom: var(--spacing-0);
}

.page-title-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: var(--spacing-32);
    padding-top: var(--spacing-32);
}

.page-title-container .page-title {
    margin-bottom: var(--spacing-0);
}

.page-title-container--with-content {
    gap: var(--spacing-12);
}

.checkbox-grid {
    display: flex;
    gap: var(--spacing-32);
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}

.d-flex{
    display: flex;
}

.d-grid {
    display: grid;
}

.flex-center {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
}
.flex-grid-container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    container-type: size;
}

.text-center {
    text-align: center;
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.align-right {
    text-align: right;
    min-width: 30px;
}

.align-center {
    text-align: center;
    min-width: 30px;
}

.max-width-200 {
    max-width: 200px;
}

.max-width-500 {
    max-width: 500px;
}

.max-width-750 {
    max-width: 750px;
}

.max-width-800 {
    max-width: 800px;
}

.max-width-1000 {
    max-width: 1000px;
}

.max-width-1500 {
    max-width: 1500px;
}

.max-width-1800 {
    max-width: 1800px;
}

.w-25  { width: 25% !important; }
.w-33  { width: 33.333% !important; }
.w-50  { width: 50% !important; }
.w-66  { width: 66.667% !important; }
.w-75  { width: 75% !important; }
.w-100 { width: 100% !important; }

[class*="w-"] .table-layout,
td.col-1 .table-layout { width: 100%; }

/* All sides */
.p-0 { padding: var(--spacing-0) !important; }
.p-2 { padding: var(--spacing-2) !important; }
.p-4 { padding: var(--spacing-4) !important; }
.p-6 { padding: var(--spacing-6) !important; }
.p-8 { padding: var(--spacing-8) !important; }
.p-12 { padding: var(--spacing-12) !important; }
.p-16 { padding: var(--spacing-16) !important; }
.p-20 { padding: var(--spacing-20) !important; }
.p-24 { padding: var(--spacing-24) !important; }
.p-32 { padding: var(--spacing-32) !important; }
.p-40 { padding: var(--spacing-40) !important; }

/* Top */
.pt-0 { padding-top: var(--spacing-0) !important; }
.pt-2 { padding-top: var(--spacing-2) !important; }
.pt-4 { padding-top: var(--spacing-4) !important; }
.pt-6 { padding-top: var(--spacing-6) !important; }
.pt-8 { padding-top: var(--spacing-8) !important; }
.pt-12 { padding-top: var(--spacing-12) !important; }
.pt-16 { padding-top: var(--spacing-16) !important; }
.pt-20 { padding-top: var(--spacing-20) !important; }
.pt-24 { padding-top: var(--spacing-24) !important; }
.pt-32 { padding-top: var(--spacing-32) !important; }
.pt-40 { padding-top: var(--spacing-40) !important; }

/* Bottom */
.pb-0 { padding-bottom: var(--spacing-0) !important; }
.pb-2 { padding-bottom: var(--spacing-2) !important; }
.pb-4 { padding-bottom: var(--spacing-4) !important; }
.pb-6 { padding-bottom: var(--spacing-6) !important; }
.pb-8 { padding-bottom: var(--spacing-8) !important; }
.pb-12 { padding-bottom: var(--spacing-12) !important; }
.pb-16 { padding-bottom: var(--spacing-16) !important; }
.pb-20 { padding-bottom: var(--spacing-20) !important; }
.pb-24 { padding-bottom: var(--spacing-24) !important; }
.pb-32 { padding-bottom: var(--spacing-32) !important; }
.pb-40 { padding-bottom: var(--spacing-40) !important; }

/* Left */
.pl-0 { padding-left: var(--spacing-0) !important; }
.pl-2 { padding-left: var(--spacing-2) !important; }
.pl-4 { padding-left: var(--spacing-4) !important; }
.pl-6 { padding-left: var(--spacing-6) !important; }
.pl-8 { padding-left: var(--spacing-8) !important; }
.pl-12 { padding-left: var(--spacing-12) !important; }
.pl-16 { padding-left: var(--spacing-16) !important; }
.pl-20 { padding-left: var(--spacing-20) !important; }
.pl-24 { padding-left: var(--spacing-24) !important; }
.pl-32 { padding-left: var(--spacing-32) !important; }
.pl-40 { padding-left: var(--spacing-40) !important; }

/* Right */
.pr-0 { padding-right: var(--spacing-0) !important; }
.pr-2 { padding-right: var(--spacing-2) !important; }
.pr-4 { padding-right: var(--spacing-4) !important; }
.pr-6 { padding-right: var(--spacing-6) !important; }
.pr-8 { padding-right: var(--spacing-8) !important; }
.pr-12 { padding-right: var(--spacing-12) !important; }
.pr-16 { padding-right: var(--spacing-16) !important; }
.pr-20 { padding-right: var(--spacing-20) !important; }
.pr-24 { padding-right: var(--spacing-24) !important; }
.pr-32 { padding-right: var(--spacing-32) !important; }
.pr-40 { padding-right: var(--spacing-40) !important; }

/* Horizontal */
.px-0 { padding-left: var(--spacing-0) !important; padding-right: var(--spacing-0) !important; }
.px-2 { padding-left: var(--spacing-2) !important; padding-right: var(--spacing-2) !important; }
.px-4 { padding-left: var(--spacing-4) !important; padding-right: var(--spacing-4) !important; }
.px-6 { padding-left: var(--spacing-6) !important; padding-right: var(--spacing-6) !important; }
.px-8 { padding-left: var(--spacing-8) !important; padding-right: var(--spacing-8) !important; }
.px-12 { padding-left: var(--spacing-12) !important; padding-right: var(--spacing-12) !important; }
.px-16 { padding-left: var(--spacing-16) !important; padding-right: var(--spacing-16) !important; }
.px-20 { padding-left: var(--spacing-20) !important; padding-right: var(--spacing-20) !important; }
.px-24 { padding-left: var(--spacing-24) !important; padding-right: var(--spacing-24) !important; }
.px-32 { padding-left: var(--spacing-32) !important; padding-right: var(--spacing-32) !important; }
.px-40 { padding-left: var(--spacing-40) !important; padding-right: var(--spacing-40) !important; }

/* Vertical */
.py-0 { padding-top: var(--spacing-0) !important; padding-bottom: var(--spacing-0) !important; }
.py-2 { padding-top: var(--spacing-2) !important; padding-bottom: var(--spacing-2) !important; }
.py-4 { padding-top: var(--spacing-4) !important; padding-bottom: var(--spacing-4) !important; }
.py-6 { padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important; }
.py-8 { padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important; }
.py-12 { padding-top: var(--spacing-12) !important; padding-bottom: var(--spacing-12) !important; }
.py-16 { padding-top: var(--spacing-16) !important; padding-bottom: var(--spacing-16) !important; }
.py-20 { padding-top: var(--spacing-20) !important; padding-bottom: var(--spacing-20) !important; }
.py-24 { padding-top: var(--spacing-24) !important; padding-bottom: var(--spacing-24) !important; }
.py-32 { padding-top: var(--spacing-32) !important; padding-bottom: var(--spacing-32) !important; }
.py-40 { padding-top: var(--spacing-40) !important; padding-bottom: var(--spacing-40) !important; }

/* Margin utilities */
/* All sides */
.m-0 { margin: var(--spacing-0) !important; }
.m-2 { margin: var(--spacing-2) !important; }
.m-4 { margin: var(--spacing-4) !important; }
.m-6 { margin: var(--spacing-6) !important; }
.m-8 { margin: var(--spacing-8) !important; }
.m-12 { margin: var(--spacing-12) !important; }
.m-16 { margin: var(--spacing-16) !important; }
.m-20 { margin: var(--spacing-20) !important; }
.m-24 { margin: var(--spacing-24) !important; }
.m-32 { margin: var(--spacing-32) !important; }
.m-40 { margin: var(--spacing-40) !important; }

/* Top */
.mt-0 { margin-top: var(--spacing-0) !important; }
.mt-2 { margin-top: var(--spacing-2) !important; }
.mt-4 { margin-top: var(--spacing-4) !important; }
.mt-6 { margin-top: var(--spacing-6) !important; }
.mt-8 { margin-top: var(--spacing-8) !important; }
.mt-12 { margin-top: var(--spacing-12) !important; }
.mt-16 { margin-top: var(--spacing-16) !important; }
.mt-20 { margin-top: var(--spacing-20) !important; }
.mt-24 { margin-top: var(--spacing-24) !important; }
.mt-32 { margin-top: var(--spacing-32) !important; }
.mt-40 { margin-top: var(--spacing-40) !important; }

/* Bottom */
.mb-0 { margin-bottom: var(--spacing-0) !important; }
.mb-2 { margin-bottom: var(--spacing-2) !important; }
.mb-4 { margin-bottom: var(--spacing-4) !important; }
.mb-6 { margin-bottom: var(--spacing-6) !important; }
.mb-8 { margin-bottom: var(--spacing-8) !important; }
.mb-12 { margin-bottom: var(--spacing-12) !important; }
.mb-16 { margin-bottom: var(--spacing-16) !important; }
.mb-20 { margin-bottom: var(--spacing-20) !important; }
.mb-24 { margin-bottom: var(--spacing-24) !important; }
.mb-32 { margin-bottom: var(--spacing-32) !important; }
.mb-40 { margin-bottom: var(--spacing-40) !important; }

/* Left */
.ml-0 { margin-left: var(--spacing-0) !important; }
.ml-2 { margin-left: var(--spacing-2) !important; }
.ml-4 { margin-left: var(--spacing-4) !important; }
.ml-6 { margin-left: var(--spacing-6) !important; }
.ml-8 { margin-left: var(--spacing-8) !important; }
.ml-12 { margin-left: var(--spacing-12) !important; }
.ml-16 { margin-left: var(--spacing-16) !important; }
.ml-20 { margin-left: var(--spacing-20) !important; }
.ml-24 { margin-left: var(--spacing-24) !important; }
.ml-32 { margin-left: var(--spacing-32) !important; }
.ml-40 { margin-left: var(--spacing-40) !important; }

/* Right */
.mr-0 { margin-right: var(--spacing-0) !important; }
.mr-2 { margin-right: var(--spacing-2) !important; }
.mr-4 { margin-right: var(--spacing-4) !important; }
.mr-6 { margin-right: var(--spacing-6) !important; }
.mr-8 { margin-right: var(--spacing-8) !important; }
.mr-12 { margin-right: var(--spacing-12) !important; }
.mr-16 { margin-right: var(--spacing-16) !important; }
.mr-20 { margin-right: var(--spacing-20) !important; }
.mr-24 { margin-right: var(--spacing-24) !important; }
.mr-32 { margin-right: var(--spacing-32) !important; }
.mr-40 { margin-right: var(--spacing-40) !important; }

/* Horizontal */
.mx-0 { margin-left: var(--spacing-0) !important; margin-right: var(--spacing-0) !important; }
.mx-2 { margin-left: var(--spacing-2) !important; margin-right: var(--spacing-2) !important; }
.mx-4 { margin-left: var(--spacing-4) !important; margin-right: var(--spacing-4) !important; }
.mx-6 { margin-left: var(--spacing-6) !important; margin-right: var(--spacing-6) !important; }
.mx-8 { margin-left: var(--spacing-8) !important; margin-right: var(--spacing-8) !important; }
.mx-12 { margin-left: var(--spacing-12) !important; margin-right: var(--spacing-12) !important; }
.mx-16 { margin-left: var(--spacing-16) !important; margin-right: var(--spacing-16) !important; }
.mx-20 { margin-left: var(--spacing-20) !important; margin-right: var(--spacing-20) !important; }
.mx-24 { margin-left: var(--spacing-24) !important; margin-right: var(--spacing-24) !important; }
.mx-32 { margin-left: var(--spacing-32) !important; margin-right: var(--spacing-32) !important; }
.mx-40 { margin-left: var(--spacing-40) !important; margin-right: var(--spacing-40) !important; }

/* Vertical */
.my-0 { margin-top: var(--spacing-0) !important; margin-bottom: var(--spacing-0) !important; }
.my-2 { margin-top: var(--spacing-2) !important; margin-bottom: var(--spacing-2) !important; }
.my-4 { margin-top: var(--spacing-4) !important; margin-bottom: var(--spacing-4) !important; }
.my-6 { margin-top: var(--spacing-6) !important; margin-bottom: var(--spacing-6) !important; }
.my-8 { margin-top: var(--spacing-8) !important; margin-bottom: var(--spacing-8) !important; }
.my-12 { margin-top: var(--spacing-12) !important; margin-bottom: var(--spacing-12) !important; }
.my-16 { margin-top: var(--spacing-16) !important; margin-bottom: var(--spacing-16) !important; }
.my-20 { margin-top: var(--spacing-20) !important; margin-bottom: var(--spacing-20) !important; }
.my-24 { margin-top: var(--spacing-24) !important; margin-bottom: var(--spacing-24) !important; }
.my-32 { margin-top: var(--spacing-32) !important; margin-bottom: var(--spacing-32) !important; }
.my-40 { margin-top: var(--spacing-40) !important; margin-bottom: var(--spacing-40) !important; }