@import 'https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap';

body {
    font-family: Cairo, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: 'slnt' 0;


    &.size-l [class*=" c-"],
    &.size-l [class^="c-"],
    &.size-x [class*=" c-"],
    &.size-x [class^="c-"] {
        margin-left: 1.25rem;
        margin-right: unset;
    }

    &.size-m [class*=" c-"],
    &.size-m [class^="c-"] {
        margin-left: calc(var(--vw, 1vw) * 1.6);
        margin-right: unset;
    }

    &.size-s [class*=" c-"],
    &.size-s [class^="c-"] {
        margin-left: calc(var(--vw, 1vw) * 4);
        margin-right: unset;
    }

    .c-6-set-x:nth-of-type(2n),
    .c-6-set-l:nth-of-type(2n),
    .c-6-set-m:nth-of-type(2n),
    .c-6-set-s:nth-of-type(2n),
    .c-6-set:nth-of-type(2n) {
        margin-left: 0;
    }

    .size-x .c-6-set-x:nth-of-type(2n),
    .size-l .c-6-set-l:nth-of-type(2n),
    .size-x .c-6-set:nth-of-type(2n),
    .size-l .c-6-set:nth-of-type(2n) {
        margin-right: 1.25rem;
    }

    .size-m .c-6-set-m:nth-of-type(2n),
    .size-m .c-6-set:nth-of-type(2n) {
        margin-right: calc(var(--vw, 1vw) * 1.6);
    }

    .size-s .c-6-set-s:nth-of-type(2n),
    .size-s .c-6-set:nth-of-type(2n) {
        margin-right: calc(var(--vw, 1vw) * 4);
    }

    .c-4-set-x:nth-of-type(3n),
    .c-4-set-l:nth-of-type(3n),
    .c-4-set-m:nth-of-type(3n),
    .c-4-set-s:nth-of-type(3n),
    .c-4-set:nth-of-type(3n) {
        margin-left: 0;
    }

    .size-x .c-4-set-x:nth-of-type(3n),
    .size-l .c-4-set-l:nth-of-type(3n),
    .size-x .c-4-set:nth-of-type(3n),
    .size-l .c-4-set:nth-of-type(3n) {
        margin-right: 1.25rem;
    }

    .size-m .c-4-set-m:nth-of-type(3n),
    .size-m .c-4-set:nth-of-type(3n) {
        margin-right: calc(var(--vw, 1vw) * 1.6);
    }

    .size-s .c-4-set-s:nth-of-type(3n),
    .size-s .c-4-set:nth-of-type(3n) {
        margin-right: calc(var(--vw, 1vw) * 4);
    }

    .grid>[class*=" c-"],
    .grid>[class^="c-"],
    [class*=" grid"]>[class*=" c-"],
    [class*=" grid"]>[class^="c-"],
    [class^="grid"]>[class*=" c-"],
    [class^="grid"]>[class^="c-"] {
        margin-left: 0;
    }

    .checkbox,
    .radio {
        padding-right: 1.75em;
        padding-left: 0;

        .icon-checkbox,
        .icon-checkbox-checked,
        .icon-radio-unchecked,
        .icon-radio-checked {
            left: auto;
            right: 0;
        }

        .c-body {
            padding-left: unset;
            padding-right: 0.5em;
        }
    }

    /* force ltr for telephone number */
    [dir="ltr"],
    .ltr {
        direction: ltr !important;
        text-align: right !important;
    }

    .tabby-dialog-close {
        right: auto !important;
        left: 16px !important;
    }
}