.ik-line-breaks {
    white-space: pre-wrap;
    word-break: break-word;
}

.ik-space-breaks {
    white-space: normal;
}

.ik-word-break {
    word-break: break-word;
}

.ik-noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
}

.ik-draggable {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;

    cursor: grab;
}

@-webkit-keyframes skeleton-loading {
    to {
        transform: translateX(100%)
    }
}

@keyframes skeleton-loading {
    to {
        transform: translateX(100%)
    }
}

.ik-skeleton-bckg {
    background: var(--skeleton-color-1);
    overflow: hidden;
    position: relative;
    user-select: none;
}

.ik-skeleton-bckg:after {
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), var(--skeleton-color-2), hsla(0, 0%, 100%, 0));
    -webkit-animation: skeleton-loading 1.5s infinite;
    animation: skeleton-loading 1.5s infinite;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(-100%);
    z-index: 1
}

.ik-full-width {
    width: 100%;
}

.ik-full-height {
    height: 100%;
}

.ik-full-min-width {
    min-width: 100%;
}

.ik-full-min-height {
    min-height: 100%;
}

.ik-pointer-events--all {
    pointer-events: all;
}

.ik-pointer-events--none {
    pointer-events: none;
}

.ik-cursor--pointer {
    cursor: pointer;
}

.ik-cursor--grab {
    cursor: grab;
}

.ik-cursor--default {
    cursor: default;
}

.ik-no-underline {
    text-decoration: none !important;
}

.ik-top-radius-1 {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.ik-top-radius-2 {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.ik-top-radius-3 {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.ik-bottom-radius-1 {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.ik-bottom-radius-2 {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.ik-bottom-radius-3 {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.ik-no-bottom-radius {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.ik-text--placeholder {
    color: var(--on-background-color-4) !important;
    font-weight: 600;
}

.ik-border-bottom {
    border-bottom: 1px solid #ccc;
}

.ik-border-dashed {
    border-style: dashed !important;
}

.ik-no-border {
    border: none !important;
}

.ik-no-outline {
    outline: none !important;
}

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

.ik-text--right {
    text-align: right;
}

.ik-text--left {
    text-align: left;
}

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

.ik-text--strike {
    text-decoration: line-through;
}

.ik-text--ellipsis-l2 {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ik-text--ellipsis-l3 {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.ik-text--ellipsis-l4 {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.ik-text--ellipsis-l5 {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.ik-text--wrap {
    white-space: normal !important;
}

.ik-text--bold {
    font-weight: var(--text-bold);
}

.ik-text--semibold {
    font-weight: var(--text-semibold);
}

.ik-text--normal {
    font-weight: var(--text-normal);
}

.ik-text--code {
    font-family: monospace;
}

.ik-text--3xs {
    font-size: var(--text-3xs);
}

.ik-text--2xs {
    font-size: var(--text-2xs);
}

.ik-text--xs {
    font-size: var(--text-xs);
}

.ik-text--sm {
    font-size: var(--text-sm);
}

.ik-text--md {
    font-size: var(--text-md);
}

.ik-text--lg {
    font-size: var(--text-lg);
}

.ik-text--xl {
    font-size: var(--text-xl);
}

.ik-text--display-xs {
    font-size: var(--text-display-xs);
}

.ik-text--display-sm {
    font-size: var(--text-display-sm);
}

.ik-text--display-md {
    font-size: var(--text-display-md);
}

.ik-text--display-lg {
    font-size: var(--text-display-lg);
}

.ik-text--display-xl {
    font-size: var(--text-display-xl);
}

.ik-text--display-2xl {
    font-size: var(--text-display-2xl);
}

.ik-text-line--normal {
    line-height: normal;
}

.ik-hidden {
    display: none;
}

.ik-transition--transform-linear {
    -webkit-transition: -webkit-transform .1s linear;
    transition: -webkit-transform .1s linear;
    /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
    -webkit-transition: transform .1s linear;
    transition: transform .1s linear;
}

span.ik-text--ellipsis {
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
}

.ik-width-1,
.ik-width-2,
.ik-width-3,
.ik-width-4,
.ik-width-5,
.ik-width-6,
.ik-width-7,
.ik-width-8,
.ik-width-9,
.ik-width-10,
.ik-width-11,
.ik-width-12,
.ik-width-13,
.ik-width-14,
.ik-width-15,
.ik-width-16,
.ik-width-17,
.ik-width-18,
.ik-width-19,
.ik-width-20,
.ik-width-21,
.ik-width-22,
.ik-width-23,
.ik-width-24,
.ik-width-25,
.ik-width-26,
.ik-width-27,
.ik-width-28,
.ik-width-29,
.ik-width-30,
.ik-width-31,
.ik-width-32,
.ik-width-33,
.ik-width-34,
.ik-width-35,
.ik-width-36,
.ik-width-37,
.ik-width-38,
.ik-width-39,
.ik-width-40,
.ik-width-41,
.ik-width-42,
.ik-width-43,
.ik-width-44,
.ik-width-45,
.ik-width-46,
.ik-width-47,
.ik-width-48,
.ik-width-49,
.ik-width-50,
.ik-width-51,
.ik-width-52,
.ik-width-53,
.ik-width-54,
.ik-width-55,
.ik-width-56,
.ik-width-57,
.ik-width-58,
.ik-width-59,
.ik-width-60,
.ik-width-61,
.ik-width-62,
.ik-width-63,
.ik-width-64,
.ik-width-65,
.ik-width-66,
.ik-width-67,
.ik-width-68,
.ik-width-69,
.ik-width-70,
.ik-width-71,
.ik-width-72,
.ik-width-73,
.ik-width-74,
.ik-width-75,
.ik-width-76,
.ik-width-77,
.ik-width-78,
.ik-width-79,
.ik-width-80,
.ik-width-81,
.ik-width-82,
.ik-width-83,
.ik-width-84,
.ik-width-85,
.ik-width-86,
.ik-width-87,
.ik-width-88,
.ik-width-89,
.ik-width-90,
.ik-width-91,
.ik-width-92,
.ik-width-93,
.ik-width-94,
.ik-width-95,
.ik-width-96,
.ik-width-97,
.ik-width-98,
.ik-width-99,
.ik-width-100 {
    width: 100%;
}

@media (min-width: 576px) {
    .ik-sm\:text--3xs {
        font-size: var(--text-3xs);
    }

    .ik-sm\:text--2xs {
        font-size: var(--text-2xs);
    }

    .ik-sm\:text--xs {
        font-size: var(--text-xs);
    }

    .ik-sm\:text--sm {
        font-size: var(--text-sm);
    }

    .ik-sm\:text--md {
        font-size: var(--text-md);
    }

    .ik-sm\:text--lg {
        font-size: var(--text-lg);
    }

    .ik-sm\:text--xl {
        font-size: var(--text-xl);
    }

    .ik-sm\:text--display-xs {
        font-size: var(--text-display-xs);
    }

    .ik-sm\:text--display-sm {
        font-size: var(--text-display-sm);
    }

    .ik-sm\:text--display-md {
        font-size: var(--text-display-md);
    }

    .ik-sm\:text--display-lg {
        font-size: var(--text-display-lg);
    }

    .ik-sm\:text--display-xl {
        font-size: var(--text-display-xl);
    }

    .ik-sm\:text--display-2xl {
        font-size: var(--text-display-2xl);
    }
}

@media (min-width: 992px) {
    .ik-md\:text--3xs {
        font-size: var(--text-3xs);
    }

    .ik-md\:text--2xs {
        font-size: var(--text-2xs);
    }

    .ik-md\:text--xs {
        font-size: var(--text-xs);
    }

    .ik-md\:text--sm {
        font-size: var(--text-sm);
    }

    .ik-md\:text--md {
        font-size: var(--text-md);
    }

    .ik-md\:text--lg {
        font-size: var(--text-lg);
    }

    .ik-md\:text--xl {
        font-size: var(--text-xl);
    }

    .ik-md\:text--display-xs {
        font-size: var(--text-display-xs);
    }

    .ik-md\:text--display-sm {
        font-size: var(--text-display-sm);
    }

    .ik-md\:text--display-md {
        font-size: var(--text-display-md);
    }

    .ik-md\:text--display-lg {
        font-size: var(--text-display-lg);
    }

    .ik-md\:text--display-xl {
        font-size: var(--text-display-xl);
    }

    .ik-md\:text--display-2xl {
        font-size: var(--text-display-2xl);
    }
}

@media (min-width: 1200px) {
    .ik-lg\:text--3xs {
        font-size: var(--text-3xs);
    }

    .ik-lg\:text--2xs {
        font-size: var(--text-2xs);
    }

    .ik-lg\:text--xs {
        font-size: var(--text-xs);
    }

    .ik-lg\:text--sm {
        font-size: var(--text-sm);
    }

    .ik-lg\:text--md {
        font-size: var(--text-md);
    }

    .ik-lg\:text--lg {
        font-size: var(--text-lg);
    }

    .ik-lg\:text--xl {
        font-size: var(--text-xl);
    }

    .ik-lg\:text--display-xs {
        font-size: var(--text-display-xs);
    }

    .ik-lg\:text--display-sm {
        font-size: var(--text-display-sm);
    }

    .ik-lg\:text--display-md {
        font-size: var(--text-display-md);
    }

    .ik-lg\:text--display-lg {
        font-size: var(--text-display-lg);
    }

    .ik-lg\:text--display-xl {
        font-size: var(--text-display-xl);
    }

    .ik-lg\:text--display-2xl {
        font-size: var(--text-display-2xl);
    }
}

@media (min-width: 1400px) {
    .ik-xl\:text--3xs {
        font-size: var(--text-3xs);
    }

    .ik-xl\:text--2xs {
        font-size: var(--text-2xs);
    }

    .ik-xl\:text--xs {
        font-size: var(--text-xs);
    }

    .ik-xl\:text--sm {
        font-size: var(--text-sm);
    }

    .ik-xl\:text--md {
        font-size: var(--text-md);
    }

    .ik-xl\:text--lg {
        font-size: var(--text-lg);
    }

    .ik-xl\:text--xl {
        font-size: var(--text-xl);
    }

    .ik-xl\:text--display-xs {
        font-size: var(--text-display-xs);
    }

    .ik-xl\:text--display-sm {
        font-size: var(--text-display-sm);
    }

    .ik-xl\:text--display-md {
        font-size: var(--text-display-md);
    }

    .ik-xl\:text--display-lg {
        font-size: var(--text-display-lg);
    }

    .ik-xl\:text--display-xl {
        font-size: var(--text-display-xl);
    }

    .ik-xl\:text--display-2xl {
        font-size: var(--text-display-2xl);
    }
}

@media (min-width: 768px) {
    .ik-width-1 {
        width: 1%;
    }

    .ik-width-2 {
        width: 2%;
    }

    .ik-width-3 {
        width: 3%;
    }

    .ik-width-4 {
        width: 4%;
    }

    .ik-width-5 {
        width: 5%;
    }

    .ik-width-6 {
        width: 6%;
    }

    .ik-width-7 {
        width: 7%;
    }

    .ik-width-8 {
        width: 8%;
    }

    .ik-width-9 {
        width: 9%;
    }

    .ik-width-10 {
        width: 10%;
    }

    .ik-width-11 {
        width: 11%;
    }

    .ik-width-12 {
        width: 12%;
    }

    .ik-width-13 {
        width: 13%;
    }

    .ik-width-14 {
        width: 14%;
    }

    .ik-width-15 {
        width: 15%;
    }

    .ik-width-16 {
        width: 16%;
    }

    .ik-width-17 {
        width: 17%;
    }

    .ik-width-18 {
        width: 18%;
    }

    .ik-width-19 {
        width: 19%;
    }

    .ik-width-20 {
        width: 20%;
    }

    .ik-width-21 {
        width: 21%;
    }

    .ik-width-22 {
        width: 22%;
    }

    .ik-width-23 {
        width: 23%;
    }

    .ik-width-24 {
        width: 24%;
    }

    .ik-width-25 {
        width: 25%;
    }

    .ik-width-26 {
        width: 26%;
    }

    .ik-width-27 {
        width: 27%;
    }

    .ik-width-28 {
        width: 28%;
    }

    .ik-width-29 {
        width: 29%;
    }

    .ik-width-30 {
        width: 30%;
    }

    .ik-width-31 {
        width: 31%;
    }

    .ik-width-32 {
        width: 32%;
    }

    .ik-width-33 {
        width: 33%;
    }

    .ik-width-34 {
        width: 34%;
    }

    .ik-width-35 {
        width: 35%;
    }

    .ik-width-36 {
        width: 36%;
    }

    .ik-width-37 {
        width: 37%;
    }

    .ik-width-38 {
        width: 38%;
    }

    .ik-width-39 {
        width: 39%;
    }

    .ik-width-40 {
        width: 40%;
    }

    .ik-width-41 {
        width: 41%;
    }

    .ik-width-42 {
        width: 42%;
    }

    .ik-width-43 {
        width: 43%;
    }

    .ik-width-44 {
        width: 44%;
    }

    .ik-width-45 {
        width: 45%;
    }

    .ik-width-46 {
        width: 46%;
    }

    .ik-width-47 {
        width: 47%;
    }

    .ik-width-48 {
        width: 48%;
    }

    .ik-width-49 {
        width: 49%;
    }

    .ik-width-50 {
        width: 50%;
    }

    .ik-width-51 {
        width: 51%;
    }

    .ik-width-52 {
        width: 52%;
    }

    .ik-width-53 {
        width: 53%;
    }

    .ik-width-54 {
        width: 54%;
    }

    .ik-width-55 {
        width: 55%;
    }

    .ik-width-56 {
        width: 56%;
    }

    .ik-width-57 {
        width: 57%;
    }

    .ik-width-58 {
        width: 58%;
    }

    .ik-width-59 {
        width: 59%;
    }

    .ik-width-60 {
        width: 60%;
    }

    .ik-width-61 {
        width: 61%;
    }

    .ik-width-62 {
        width: 62%;
    }

    .ik-width-63 {
        width: 63%;
    }

    .ik-width-64 {
        width: 64%;
    }

    .ik-width-65 {
        width: 65%;
    }

    .ik-width-66 {
        width: 66%;
    }

    .ik-width-67 {
        width: 67%;
    }

    .ik-width-68 {
        width: 68%;
    }

    .ik-width-69 {
        width: 69%;
    }

    .ik-width-70 {
        width: 70%;
    }

    .ik-width-71 {
        width: 71%;
    }

    .ik-width-72 {
        width: 72%;
    }

    .ik-width-73 {
        width: 73%;
    }

    .ik-width-74 {
        width: 74%;
    }

    .ik-width-75 {
        width: 75%;
    }

    .ik-width-76 {
        width: 76%;
    }

    .ik-width-77 {
        width: 77%;
    }

    .ik-width-78 {
        width: 78%;
    }

    .ik-width-79 {
        width: 79%;
    }

    .ik-width-80 {
        width: 80%;
    }

    .ik-width-81 {
        width: 81%;
    }

    .ik-width-82 {
        width: 82%;
    }

    .ik-width-83 {
        width: 83%;
    }

    .ik-width-84 {
        width: 84%;
    }

    .ik-width-85 {
        width: 85%;
    }

    .ik-width-86 {
        width: 86%;
    }

    .ik-width-87 {
        width: 87%;
    }

    .ik-width-88 {
        width: 88%;
    }

    .ik-width-89 {
        width: 89%;
    }

    .ik-width-90 {
        width: 90%;
    }

    .ik-width-91 {
        width: 91%;
    }

    .ik-width-92 {
        width: 92%;
    }

    .ik-width-93 {
        width: 93%;
    }

    .ik-width-94 {
        width: 94%;
    }

    .ik-width-95 {
        width: 95%;
    }

    .ik-width-96 {
        width: 96%;
    }

    .ik-width-97 {
        width: 97%;
    }

    .ik-width-98 {
        width: 98%;
    }

    .ik-width-99 {
        width: 99%;
    }

    .ik-width-100 {
        width: 100%;
    }
}

/* spacing - PADDING */
.ik-pa-0 {
    padding: var(--s-0);
}

.ik-pa-1 {
    padding: var(--s-1);
}

.ik-pa-2 {
    padding: var(--s-2);
}

.ik-pa-3 {
    padding: var(--s-3);
}

.ik-pa-4 {
    padding: var(--s-4);
}

.ik-pa-5 {
    padding: var(--s-5);
}

.ik-pa-6 {
    padding: var(--s-6);
}

.ik-pa-7 {
    padding: var(--s-7);
}

.ik-pa-8 {
    padding: var(--s-8);
}

.ik-pa-9 {
    padding: var(--s-9);
}

.ik-pa-10 {
    padding: var(--s-10);
}

.ik-pa-11 {
    padding: var(--s-11);
}

.ik-pa-12 {
    padding: var(--s-12);
}

.ik-pa-13 {
    padding: var(--s-13);
}

.ik-pa-14 {
    padding: var(--s-14);
}

.ik-pa-15 {
    padding: var(--s-15);
}

.ik-pa-16 {
    padding: var(--s-16);
}

.ik-pb-0 {
    padding-bottom: var(--s-0);
}

.ik-pb-1 {
    padding-bottom: var(--s-1);
}

.ik-pb-2 {
    padding-bottom: var(--s-2);
}

.ik-pb-3 {
    padding-bottom: var(--s-3);
}

.ik-pb-4 {
    padding-bottom: var(--s-4);
}

.ik-pb-5 {
    padding-bottom: var(--s-5);
}

.ik-pb-6 {
    padding-bottom: var(--s-6);
}

.ik-pb-7 {
    padding-bottom: var(--s-7);
}

.ik-pb-8 {
    padding-bottom: var(--s-8);
}

.ik-pb-9 {
    padding-bottom: var(--s-9);
}

.ik-pb-10 {
    padding-bottom: var(--s-10);
}

.ik-pb-11 {
    padding-bottom: var(--s-11);
}

.ik-pb-12 {
    padding-bottom: var(--s-12);
}

.ik-pb-13 {
    padding-bottom: var(--s-13);
}

.ik-pb-14 {
    padding-bottom: var(--s-14);
}

.ik-pb-15 {
    padding-bottom: var(--s-15);
}

.ik-pb-16 {
    padding-bottom: var(--s-16);
}

.ik-pl-0 {
    padding-left: var(--s-0);
}

.ik-pl-1 {
    padding-left: var(--s-1);
}

.ik-pl-2 {
    padding-left: var(--s-2);
}

.ik-pl-3 {
    padding-left: var(--s-3);
}

.ik-pl-4 {
    padding-left: var(--s-4);
}

.ik-pl-5 {
    padding-left: var(--s-5);
}

.ik-pl-6 {
    padding-left: var(--s-6);
}

.ik-pl-7 {
    padding-left: var(--s-7);
}

.ik-pl-8 {
    padding-left: var(--s-8);
}

.ik-pl-9 {
    padding-left: var(--s-9);
}

.ik-pl-10 {
    padding-left: var(--s-10);
}

.ik-pl-11 {
    padding-left: var(--s-11);
}

.ik-pl-12 {
    padding-left: var(--s-12);
}

.ik-pl-13 {
    padding-left: var(--s-13);
}

.ik-pl-14 {
    padding-left: var(--s-14);
}

.ik-pl-15 {
    padding-left: var(--s-15);
}

.ik-pl-16 {
    padding-left: var(--s-16);
}

.ik-pr-0 {
    padding-right: var(--s-0);
}

.ik-pr-1 {
    padding-right: var(--s-1);
}

.ik-pr-2 {
    padding-right: var(--s-2);
}

.ik-pr-3 {
    padding-right: var(--s-3);
}

.ik-pr-4 {
    padding-right: var(--s-4);
}

.ik-pr-5 {
    padding-right: var(--s-5);
}

.ik-pr-6 {
    padding-right: var(--s-6);
}

.ik-pr-7 {
    padding-right: var(--s-7);
}

.ik-pr-8 {
    padding-right: var(--s-8);
}

.ik-pr-9 {
    padding-right: var(--s-9);
}

.ik-pr-10 {
    padding-right: var(--s-10);
}

.ik-pr-11 {
    padding-right: var(--s-11);
}

.ik-pr-12 {
    padding-right: var(--s-12);
}

.ik-pr-13 {
    padding-right: var(--s-13);
}

.ik-pr-14 {
    padding-right: var(--s-14);
}

.ik-pr-15 {
    padding-right: var(--s-15);
}

.ik-pr-16 {
    padding-right: var(--s-16);
}

.ik-pt-0 {
    padding-top: var(--s-0);
}

.ik-pt-1 {
    padding-top: var(--s-1);
}

.ik-pt-2 {
    padding-top: var(--s-2);
}

.ik-pt-3 {
    padding-top: var(--s-3);
}

.ik-pt-4 {
    padding-top: var(--s-4);
}

.ik-pt-5 {
    padding-top: var(--s-5);
}

.ik-pt-6 {
    padding-top: var(--s-6);
}

.ik-pt-7 {
    padding-top: var(--s-7);
}

.ik-pt-8 {
    padding-top: var(--s-8);
}

.ik-pt-9 {
    padding-top: var(--s-9);
}

.ik-pt-10 {
    padding-top: var(--s-10);
}

.ik-pt-11 {
    padding-top: var(--s-11);
}

.ik-pt-12 {
    padding-top: var(--s-12);
}

.ik-pt-13 {
    padding-top: var(--s-13);
}

.ik-pt-14 {
    padding-top: var(--s-14);
}

.ik-pt-15 {
    padding-top: var(--s-15);
}

.ik-pt-16 {
    padding-top: var(--s-16);
}

.ik-px-0 {
    padding-left: var(--s-0);
    padding-right: var(--s-0);
}

.ik-px-1 {
    padding-left: var(--s-1);
    padding-right: var(--s-1);
}

.ik-px-2 {
    padding-left: var(--s-2);
    padding-right: var(--s-2);
}

.ik-px-3 {
    padding-left: var(--s-3);
    padding-right: var(--s-3);
}

.ik-px-4 {
    padding-left: var(--s-4);
    padding-right: var(--s-4);
}

.ik-px-5 {
    padding-left: var(--s-5);
    padding-right: var(--s-5);
}

.ik-px-6 {
    padding-left: var(--s-6);
    padding-right: var(--s-6);
}

.ik-px-7 {
    padding-left: var(--s-7);
    padding-right: var(--s-7);
}

.ik-px-8 {
    padding-left: var(--s-8);
    padding-right: var(--s-8);
}

.ik-px-9 {
    padding-left: var(--s-9);
    padding-right: var(--s-9);
}

.ik-px-10 {
    padding-left: var(--s-10);
    padding-right: var(--s-10);
}

.ik-px-11 {
    padding-left: var(--s-11);
    padding-right: var(--s-11);
}

.ik-px-12 {
    padding-left: var(--s-12);
    padding-right: var(--s-12);
}

.ik-px-13 {
    padding-left: var(--s-13);
    padding-right: var(--s-13);
}

.ik-px-14 {
    padding-left: var(--s-14);
    padding-right: var(--s-14);
}

.ik-px-15 {
    padding-left: var(--s-15);
    padding-right: var(--s-15);
}

.ik-px-16 {
    padding-left: var(--s-16);
    padding-right: var(--s-16);
}

.ik-py-0 {
    padding-top: var(--s-0);
    padding-bottom: var(--s-0);
}

.ik-py-1 {
    padding-top: var(--s-1);
    padding-bottom: var(--s-1);
}

.ik-py-2 {
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
}

.ik-py-3 {
    padding-top: var(--s-3);
    padding-bottom: var(--s-3);
}

.ik-py-4 {
    padding-top: var(--s-4);
    padding-bottom: var(--s-4);
}

.ik-py-5 {
    padding-top: var(--s-5);
    padding-bottom: var(--s-5);
}

.ik-py-6 {
    padding-top: var(--s-6);
    padding-bottom: var(--s-6);
}

.ik-py-7 {
    padding-top: var(--s-7);
    padding-bottom: var(--s-7);
}

.ik-py-8 {
    padding-top: var(--s-8);
    padding-bottom: var(--s-8);
}

.ik-py-9 {
    padding-top: var(--s-9);
    padding-bottom: var(--s-9);
}

.ik-py-10 {
    padding-top: var(--s-10);
    padding-bottom: var(--s-10);
}

.ik-py-11 {
    padding-top: var(--s-11);
    padding-bottom: var(--s-11);
}

.ik-py-12 {
    padding-top: var(--s-12);
    padding-bottom: var(--s-12);
}

.ik-py-13 {
    padding-top: var(--s-13);
    padding-bottom: var(--s-13);
}

.ik-py-14 {
    padding-top: var(--s-14);
    padding-bottom: var(--s-14);
}

.ik-py-15 {
    padding-top: var(--s-15);
    padding-bottom: var(--s-15);
}

.ik-py-16 {
    padding-top: var(--s-16);
    padding-bottom: var(--s-16);
}

/* spacing - MARGINS */
.ik-ma-0 {
    margin: var(--s-0);
}

.ik-ma-1 {
    margin: var(--s-1);
}

.ik-ma-2 {
    margin: var(--s-2);
}

.ik-ma-3 {
    margin: var(--s-3);
}

.ik-ma-4 {
    margin: var(--s-4);
}

.ik-ma-5 {
    margin: var(--s-5);
}

.ik-ma-6 {
    margin: var(--s-6);
}

.ik-ma-7 {
    margin: var(--s-7);
}

.ik-ma-8 {
    margin: var(--s-8);
}

.ik-ma-9 {
    margin: var(--s-9);
}

.ik-ma-10 {
    margin: var(--s-10);
}

.ik-ma-11 {
    margin: var(--s-11);
}

.ik-ma-12 {
    margin: var(--s-12);
}

.ik-ma-13 {
    margin: var(--s-13);
}

.ik-ma-14 {
    margin: var(--s-14);
}

.ik-ma-15 {
    margin: var(--s-15);
}

.ik-ma-16 {
    margin: var(--s-16);
}

.ik-mb-0 {
    margin-bottom: var(--s-0);
}

.ik-mb-1 {
    margin-bottom: var(--s-1);
}

.ik-mb-2 {
    margin-bottom: var(--s-2);
}

.ik-mb-3 {
    margin-bottom: var(--s-3);
}

.ik-mb-4 {
    margin-bottom: var(--s-4);
}

.ik-mb-5 {
    margin-bottom: var(--s-5);
}

.ik-mb-6 {
    margin-bottom: var(--s-6);
}

.ik-mb-7 {
    margin-bottom: var(--s-7);
}

.ik-mb-8 {
    margin-bottom: var(--s-8);
}

.ik-mb-9 {
    margin-bottom: var(--s-9);
}

.ik-mb-10 {
    margin-bottom: var(--s-10);
}

.ik-mb-11 {
    margin-bottom: var(--s-11);
}

.ik-mb-12 {
    margin-bottom: var(--s-12);
}

.ik-mb-13 {
    margin-bottom: var(--s-13);
}

.ik-mb-14 {
    margin-bottom: var(--s-14);
}

.ik-mb-15 {
    margin-bottom: var(--s-15);
}

.ik-mb-16 {
    margin-bottom: var(--s-16);
}

.ik-ml-0 {
    margin-left: var(--s-0);
}

.ik-ml-1 {
    margin-left: var(--s-1);
}

.ik-ml-2 {
    margin-left: var(--s-2);
}

.ik-ml-3 {
    margin-left: var(--s-3);
}

.ik-ml-4 {
    margin-left: var(--s-4);
}

.ik-ml-5 {
    margin-left: var(--s-5);
}

.ik-ml-6 {
    margin-left: var(--s-6);
}

.ik-ml-7 {
    margin-left: var(--s-7);
}

.ik-ml-8 {
    margin-left: var(--s-8);
}

.ik-ml-9 {
    margin-left: var(--s-9);
}

.ik-ml-10 {
    margin-left: var(--s-10);
}

.ik-ml-11 {
    margin-left: var(--s-11);
}

.ik-ml-12 {
    margin-left: var(--s-12);
}

.ik-ml-13 {
    margin-left: var(--s-13);
}

.ik-ml-14 {
    margin-left: var(--s-14);
}

.ik-ml-15 {
    margin-left: var(--s-15);
}

.ik-ml-16 {
    margin-left: var(--s-16);
}

.ik-mr-0 {
    margin-right: var(--s-0);
}

.ik-mr-1 {
    margin-right: var(--s-1);
}

.ik-mr-2 {
    margin-right: var(--s-2);
}

.ik-mr-3 {
    margin-right: var(--s-3);
}

.ik-mr-4 {
    margin-right: var(--s-4);
}

.ik-mr-5 {
    margin-right: var(--s-5);
}

.ik-mr-6 {
    margin-right: var(--s-6);
}

.ik-mr-7 {
    margin-right: var(--s-7);
}

.ik-mr-8 {
    margin-right: var(--s-8);
}

.ik-mr-9 {
    margin-right: var(--s-9);
}

.ik-mr-10 {
    margin-right: var(--s-10);
}

.ik-mr-11 {
    margin-right: var(--s-11);
}

.ik-mr-12 {
    margin-right: var(--s-12);
}

.ik-mr-13 {
    margin-right: var(--s-13);
}

.ik-mr-14 {
    margin-right: var(--s-14);
}

.ik-mr-15 {
    margin-right: var(--s-15);
}

.ik-mr-16 {
    margin-right: var(--s-16);
}

.ik-mt-0 {
    margin-top: var(--s-0);
}

.ik-mt-1 {
    margin-top: var(--s-1);
}

.ik-mt-2 {
    margin-top: var(--s-2);
}

.ik-mt-3 {
    margin-top: var(--s-3);
}

.ik-mt-4 {
    margin-top: var(--s-4);
}

.ik-mt-5 {
    margin-top: var(--s-5);
}

.ik-mt-6 {
    margin-top: var(--s-6);
}

.ik-mt-7 {
    margin-top: var(--s-7);
}

.ik-mt-8 {
    margin-top: var(--s-8);
}

.ik-mt-9 {
    margin-top: var(--s-9);
}

.ik-mt-10 {
    margin-top: var(--s-10);
}

.ik-mt-11 {
    margin-top: var(--s-11);
}

.ik-mt-12 {
    margin-top: var(--s-12);
}

.ik-mt-13 {
    margin-top: var(--s-13);
}

.ik-mt-14 {
    margin-top: var(--s-14);
}

.ik-mt-15 {
    margin-top: var(--s-15);
}

.ik-mt-16 {
    margin-top: var(--s-16);
}

.ik-mx-0 {
    margin-left: var(--s-0);
    margin-right: var(--s-0);
}

.ik-mx-1 {
    margin-left: var(--s-1);
    margin-right: var(--s-1);
}

.ik-mx-2 {
    margin-left: var(--s-2);
    margin-right: var(--s-2);
}

.ik-mx-3 {
    margin-left: var(--s-3);
    margin-right: var(--s-3);
}

.ik-mx-4 {
    margin-left: var(--s-4);
    margin-right: var(--s-4);
}

.ik-mx-5 {
    margin-left: var(--s-5);
    margin-right: var(--s-5);
}

.ik-mx-6 {
    margin-left: var(--s-6);
    margin-right: var(--s-6);
}

.ik-mx-7 {
    margin-left: var(--s-7);
    margin-right: var(--s-7);
}

.ik-mx-8 {
    margin-left: var(--s-8);
    margin-right: var(--s-8);
}

.ik-mx-9 {
    margin-left: var(--s-9);
    margin-right: var(--s-9);
}

.ik-mx-10 {
    margin-left: var(--s-10);
    margin-right: var(--s-10);
}

.ik-mx-11 {
    margin-left: var(--s-11);
    margin-right: var(--s-11);
}

.ik-mx-12 {
    margin-left: var(--s-12);
    margin-right: var(--s-12);
}

.ik-mx-13 {
    margin-left: var(--s-13);
    margin-right: var(--s-13);
}

.ik-mx-14 {
    margin-left: var(--s-14);
    margin-right: var(--s-14);
}

.ik-mx-15 {
    margin-left: var(--s-15);
    margin-right: var(--s-15);
}

.ik-mx-16 {
    margin-left: var(--s-16);
    margin-right: var(--s-16);
}

.ik-my-0 {
    margin-top: var(--s-0);
    margin-bottom: var(--s-0);
}

.ik-my-1 {
    margin-top: var(--s-1);
    margin-bottom: var(--s-1);
}

.ik-my-2 {
    margin-top: var(--s-2);
    margin-bottom: var(--s-2);
}

.ik-my-3 {
    margin-top: var(--s-3);
    margin-bottom: var(--s-3);
}

.ik-my-4 {
    margin-top: var(--s-4);
    margin-bottom: var(--s-4);
}

.ik-my-5 {
    margin-top: var(--s-5);
    margin-bottom: var(--s-5);
}

.ik-my-6 {
    margin-top: var(--s-6);
    margin-bottom: var(--s-6);
}

.ik-my-7 {
    margin-top: var(--s-7);
    margin-bottom: var(--s-7);
}

.ik-my-8 {
    margin-top: var(--s-8);
    margin-bottom: var(--s-8);
}

.ik-my-9 {
    margin-top: var(--s-9);
    margin-bottom: var(--s-9);
}

.ik-my-10 {
    margin-top: var(--s-10);
    margin-bottom: var(--s-10);
}

.ik-my-11 {
    margin-top: var(--s-11);
    margin-bottom: var(--s-11);
}

.ik-my-12 {
    margin-top: var(--s-12);
    margin-bottom: var(--s-12);
}

.ik-my-13 {
    margin-top: var(--s-13);
    margin-bottom: var(--s-13);
}

.ik-my-14 {
    margin-top: var(--s-14);
    margin-bottom: var(--s-14);
}

.ik-my-15 {
    margin-top: var(--s-15);
    margin-bottom: var(--s-15);
}

.ik-my-16 {
    margin-top: var(--s-16);
    margin-bottom: var(--s-16);
}

/* RADIUS */

.ik-radius-0 {
    border-radius: var(--radius-0);
}

.ik-radius-1 {
    border-radius: var(--radius-1);
}

.ik-radius-2 {
    border-radius: var(--radius-2);
}

.ik-radius-3 {
    border-radius: var(--radius-3);
}

.ik-radius-4 {
    border-radius: var(--radius-4);
}

.ik-radius-5 {
    border-radius: var(--radius-5);
}

.ik-radius-6 {
    border-radius: var(--radius-6);
}

.ik-radius-7 {
    border-radius: var(--radius-7);
}

.ik-radius-8 {
    border-radius: var(--radius-8);
}

/* Top radius levels */
.ik-radius-top-0 {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.ik-radius-top-1 {
    border-top-left-radius: var(--radius-1);
    border-top-right-radius: var(--radius-1);
}

.ik-radius-top-2 {
    border-top-left-radius: var(--radius-2);
    border-top-right-radius: var(--radius-2);
}

.ik-radius-top-3 {
    border-top-left-radius: var(--radius-3);
    border-top-right-radius: var(--radius-3);
}

.ik-radius-top-4 {
    border-top-left-radius: var(--radius-4);
    border-top-right-radius: var(--radius-4);
}

.ik-radius-top-5 {
    border-top-left-radius: var(--radius-5);
    border-top-right-radius: var(--radius-5);
}

.ik-radius-top-6 {
    border-top-left-radius: var(--radius-6);
    border-top-right-radius: var(--radius-6);
}

.ik-radius-top-7 {
    border-top-left-radius: var(--radius-7);
    border-top-right-radius: var(--radius-7);
}

.ik-radius-top-8 {
    border-top-left-radius: var(--radius-8);
    border-top-right-radius: var(--radius-8);
}

/* Bottom radius levels */
.ik-radius-bottom-0 {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ik-radius-bottom-1 {
    border-bottom-left-radius: var(--radius-1);
    border-bottom-right-radius: var(--radius-1);
}

.ik-radius-bottom-2 {
    border-bottom-left-radius: var(--radius-2);
    border-bottom-right-radius: var(--radius-2);
}

.ik-radius-bottom-3 {
    border-bottom-left-radius: var(--radius-3);
    border-bottom-right-radius: var(--radius-3);
}

.ik-radius-bottom-4 {
    border-bottom-left-radius: var(--radius-4);
    border-bottom-right-radius: var(--radius-4);
}

.ik-radius-bottom-5 {
    border-bottom-left-radius: var(--radius-5);
    border-bottom-right-radius: var(--radius-5);
}

.ik-radius-bottom-6 {
    border-bottom-left-radius: var(--radius-6);
    border-bottom-right-radius: var(--radius-6);
}

.ik-radius-bottom-7 {
    border-bottom-left-radius: var(--radius-7);
    border-bottom-right-radius: var(--radius-7);
}

.ik-radius-bottom-8 {
    border-bottom-left-radius: var(--radius-8);
    border-bottom-right-radius: var(--radius-8);
}

/* Right radius levels */
.ik-radius-right-0 {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ik-radius-right-1 {
    border-top-right-radius: var(--radius-1);
    border-bottom-right-radius: var(--radius-1);
}

.ik-radius-right-2 {
    border-top-right-radius: var(--radius-2);
    border-bottom-right-radius: var(--radius-2);
}

.ik-radius-right-3 {
    border-top-right-radius: var(--radius-3);
    border-bottom-right-radius: var(--radius-3);
}

.ik-radius-right-4 {
    border-top-right-radius: var(--radius-4);
    border-bottom-right-radius: var(--radius-4);
}

.ik-radius-right-5 {
    border-top-right-radius: var(--radius-5);
    border-bottom-right-radius: var(--radius-5);
}

.ik-radius-right-6 {
    border-top-right-radius: var(--radius-6);
    border-bottom-right-radius: var(--radius-6);
}

.ik-radius-right-7 {
    border-top-right-radius: var(--radius-7);
    border-bottom-right-radius: var(--radius-7);
}

.ik-radius-right-8 {
    border-top-right-radius: var(--radius-8);
    border-bottom-right-radius: var(--radius-8);
}

/* Left radius levels */
.ik-radius-left-0 {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.ik-radius-left-1 {
    border-top-left-radius: var(--radius-1);
    border-bottom-left-radius: var(--radius-1);
}

.ik-radius-left-2 {
    border-top-left-radius: var(--radius-2);
    border-bottom-left-radius: var(--radius-2);
}

.ik-radius-left-3 {
    border-top-left-radius: var(--radius-3);
    border-bottom-left-radius: var(--radius-3);
}

.ik-radius-left-4 {
    border-top-left-radius: var(--radius-4);
    border-bottom-left-radius: var(--radius-4);
}

.ik-radius-left-5 {
    border-top-left-radius: var(--radius-5);
    border-bottom-left-radius: var(--radius-5);
}

.ik-radius-left-6 {
    border-top-left-radius: var(--radius-6);
    border-bottom-left-radius: var(--radius-6);
}

.ik-radius-left-7 {
    border-top-left-radius: var(--radius-7);
    border-bottom-left-radius: var(--radius-7);
}

.ik-radius-left-8 {
    border-top-left-radius: var(--radius-8);
    border-bottom-left-radius: var(--radius-8);
}

/* SHADOW */

.ik-shadow-0 {
    box-shadow: none;
}

.ik-shadow-1 {
    box-shadow: 0 1px 3px 0 var(--shadow-color-1);
}

.ik-shadow-2 {
    box-shadow: 0 2px 5px 0 var(--shadow-color-1);
}

.ik-shadow-3 {
    box-shadow: 0 2px 10px 0 var(--shadow-color-1);
}

.ik-shadow-4 {
    box-shadow: 0 2px 15px 0 var(--shadow-color-1);
}

.ik-shadow-5 {
    box-shadow: 0 2px 20px 0 var(--shadow-color-1);
}

.ik-shadow-6 {
    box-shadow: 0 3px 30px 0 var(--shadow-color-1);
}

.ik-bg-opacity-0 {
    background-color: rgba(0, 0, 0, 0.0);
}

.ik-bg-opacity-20 {
    background-color: rgba(0, 0, 0, 0.2);
}

.ik-bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.5);
}

.ik-bg-opacity-70 {
    background-color: rgba(0, 0, 0, 0.7);
}

.ik-bg-opacity-100 {
    background-color: rgba(0, 0, 0, 1.0);
}

.ik-toggle-section-box {
    background-color: var(--on-background-color-5);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.ik-overflow--auto {
    overflow: auto;
}

.ik-overflow--hidden {
    overflow: hidden;
}

.ik-overflow--clip {
    overflow: clip;
}

.ik-overflow--visible {
    overflow: visible;
}

.ik-overflow--scroll {
    overflow: scroll;
}

.ik-object--contain {
    object-fit: contain;

}

.ik-object--cover {
    object-fit: cover;

}

.ik-object--fill {
    object-fit: fill;

}

.ik-object--none {
    object-fit: none;

}

.ik-object--scale-down {
    object-fit: scale-down;
}