evokit-box/style.css

The content block allows to apply indents, position and more

@custom-media --ek-box-media-small only screen and (min-width: 480px);

@custom-media --ek-box-media-medium only screen and (min-width: 768px);

@custom-media --ek-box-media-large only screen and (min-width: 960px);

@custom-media --ek-box-media-wide only screen and (min-width: 1200px);

@custom-media --ek-box-media-huge only screen and (min-width: 1400px);

:root {
    /* prop 'box-padding', 'box-margin' */
    --ek-box-indent-xxs: 5px;
    --ek-box-indent-xs: 10px;
    --ek-box-indent-s: 15px;
    --ek-box-indent-m: 20px;
    --ek-box-indent-l: 25px;
    --ek-box-indent-xl: 30px;
    --ek-box-indent-xxl: 35px;
    --ek-box-indent-3xl: 40px;
    --ek-box-indent-4xl: 45px;
    --ek-box-indent-5xl: 50px;
    /* prop 'box-round' */
    --ek-box-round-xxs: 2px;
    --ek-box-round-xs: 4px;
    --ek-box-round-s: 6px;
    --ek-box-round-m: 8px;
    --ek-box-round-l: 10px;
    --ek-box-round-xl: 12px;
    --ek-box-round-xxl: 14px;
    --ek-box-round-3xl: 16px;
    --ek-box-round-4xl: 18px;
    --ek-box-round-5xl: 20px;
    /* prop 'box-border-width' */
    --ek-box-border-width-xxs: 1px;
    --ek-box-border-width-xs: 2px;
    --ek-box-border-width-s: 3px;
    --ek-box-border-width-m: 4px;
    --ek-box-border-width-l: 5px;
    --ek-box-border-width-xl: 6px;
    --ek-box-border-width-xxl: 7px;
    --ek-box-border-width-3xl: 8px;
    --ek-box-border-width-4xl: 9px;
    --ek-box-border-width-5xl: 10px;
    /* prop 'box-zindex' */
    --ek-box-zindex-xxs: 5;
    --ek-box-zindex-xs: 10;
    --ek-box-zindex-s: 15;
    --ek-box-zindex-m: 20;
    --ek-box-zindex-l: 25;
    --ek-box-zindex-xl: 30;
    --ek-box-zindex-xxl: 35;
    --ek-box-zindex-3xl: 40;
    --ek-box-zindex-4xl: 45;
    --ek-box-zindex-5xl: 50;
}

.ek-box {
    display: block;
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
}

.ek-box:after {
        clear: both;
}

.ek-box:after, .ek-box:before {
        content: '';
        display: table;
}

/**
 * Align:
 *
 *  - box_align_none
 *  - box_align_left
 *  - box_align_center
 *  - box_align_right
 *
 * */

.ek-box_align_none {
            float: none;
            display: block;
            position: static;
            left: 0;
            transform: translateX(0);
}

.ek-box_align_left {
            float: left;
            display: block;
            position: static;
            left: 0;
            transform: translateX(0);
}

.ek-box_align_center {
            float: none;
            display: inline-block;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
}

.ek-box_align_right {
            float: right;
            display: block;
            position: static;
            left: 0;
            transform: translateX(0);
}

/**
 * Display:
 *
 *  - box_display_none
 *  - box_display_inline
 *  - box_display_inline-block
 *  - box_display_block
 *  - box_display_none:empty
 *
 * */

.ek-box_display_none {
        display: none;
}

.ek-box_display_inline {
        display: inline;
}

.ek-box_display_inline:after, .ek-box_display_inline:before {
                content: none;
}

.ek-box_display_inline-block {
        display: inline-block;
}

.ek-box_display_block {
        display: block;
}

.ek-box_display_none\:empty:empty {
        display: none;
}

/**
 * Position:
 *
 *  - box_position_*
 *
 * */

.ek-box_position_static {
        position: static;
}

.ek-box_position_relative {
        position: relative;
}

.ek-box_position_absolute {
        position: absolute;
}

.ek-box_position_fixed {
        position: fixed;
}

.ek-box_position_sticky {
        position: sticky;
}

/**
 * Place:
 *
 *  - box_place_*
 *
 * */

.ek-box_place_none {
            top: auto;
            right: auto;
            bottom: auto;
            left: auto;
            transform: none;
}

.ek-box_place_top {
            top: 0;
            right: auto;
            bottom: auto;
            left: 50%;
            transform: translateX(-50%);
}

.ek-box_place_top-left {
            top: 0;
            right: auto;
            bottom: auto;
            left: 0;
            transform: none;
}

.ek-box_place_top-right {
            top: 0;
            right: 0;
            bottom: auto;
            left: auto;
            transform: none;
}

.ek-box_place_center {
            top: 50%;
            right: auto;
            bottom: auto;
            left: 50%;
            transform: translate(-50%, -50%);
}

.ek-box_place_center-left {
            top: 50%;
            right: auto;
            bottom: auto;
            left: 0;
            transform: translateY(-50%);
}

.ek-box_place_center-right {
            top: 50%;
            right: 0;
            bottom: auto;
            left: auto;
            transform: translateY(-50%);
}

.ek-box_place_bottom {
            top: auto;
            right: auto;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
}

.ek-box_place_bottom-left {
            top: auto;
            right: auto;
            bottom: 0;
            left: 0;
            transform: none;
}

.ek-box_place_bottom-right {
            top: auto;
            right: 0;
            bottom: 0;
            left: auto;
            transform: none;
}

/**
 * Position index:
 *
 *  - box_zindex_*
 *
 * */

.ek-box_zindex_none {
            z-index: 0;
}

.ek-box_zindex_xxs {
            z-index: var(--ek-box-zindex-xxs);
}

.ek-box_zindex_xs {
            z-index: var(--ek-box-zindex-xs);
}

.ek-box_zindex_s {
            z-index: var(--ek-box-zindex-s);
}

.ek-box_zindex_m {
            z-index: var(--ek-box-zindex-m);
}

.ek-box_zindex_l {
            z-index: var(--ek-box-zindex-l);
}

.ek-box_zindex_xl {
            z-index: var(--ek-box-zindex-xl);
}

.ek-box_zindex_xxl {
            z-index: var(--ek-box-zindex-xxl);
}

.ek-box_zindex_3xl {
            z-index: var(--ek-box-zindex-3xl);
}

.ek-box_zindex_4xl {
            z-index: var(--ek-box-zindex-4xl);
}

.ek-box_zindex_5xl {
            z-index: var(--ek-box-zindex-5xl);
}

.ek-box_zindex_auto {
            z-index: auto;
}

/**
 * Margin:
 *
 *  - box_margin_*
 *
 * */

.ek-box_margin_none {
            margin: 0;
}

.ek-box_margin-left_none {
            margin-left: 0;
}

.ek-box_margin-top_none {
            margin-top: 0;
}

.ek-box_margin-right_none {
            margin-right: 0;
}

.ek-box_margin-bottom_none {
            margin-bottom: 0;
}

.ek-box_margin_xxs {
            margin: var(--ek-box-indent-xxs);
}

.ek-box_margin-left_xxs {
            margin-left: var(--ek-box-indent-xxs);
}

.ek-box_margin-top_xxs {
            margin-top: var(--ek-box-indent-xxs);
}

.ek-box_margin-right_xxs {
            margin-right: var(--ek-box-indent-xxs);
}

.ek-box_margin-bottom_xxs {
            margin-bottom: var(--ek-box-indent-xxs);
}

.ek-box_margin_xs {
            margin: var(--ek-box-indent-xs);
}

.ek-box_margin-left_xs {
            margin-left: var(--ek-box-indent-xs);
}

.ek-box_margin-top_xs {
            margin-top: var(--ek-box-indent-xs);
}

.ek-box_margin-right_xs {
            margin-right: var(--ek-box-indent-xs);
}

.ek-box_margin-bottom_xs {
            margin-bottom: var(--ek-box-indent-xs);
}

.ek-box_margin_s {
            margin: var(--ek-box-indent-s);
}

.ek-box_margin-left_s {
            margin-left: var(--ek-box-indent-s);
}

.ek-box_margin-top_s {
            margin-top: var(--ek-box-indent-s);
}

.ek-box_margin-right_s {
            margin-right: var(--ek-box-indent-s);
}

.ek-box_margin-bottom_s {
            margin-bottom: var(--ek-box-indent-s);
}

.ek-box_margin_m {
            margin: var(--ek-box-indent-m);
}

.ek-box_margin-left_m {
            margin-left: var(--ek-box-indent-m);
}

.ek-box_margin-top_m {
            margin-top: var(--ek-box-indent-m);
}

.ek-box_margin-right_m {
            margin-right: var(--ek-box-indent-m);
}

.ek-box_margin-bottom_m {
            margin-bottom: var(--ek-box-indent-m);
}

.ek-box_margin_l {
            margin: var(--ek-box-indent-l);
}

.ek-box_margin-left_l {
            margin-left: var(--ek-box-indent-l);
}

.ek-box_margin-top_l {
            margin-top: var(--ek-box-indent-l);
}

.ek-box_margin-right_l {
            margin-right: var(--ek-box-indent-l);
}

.ek-box_margin-bottom_l {
            margin-bottom: var(--ek-box-indent-l);
}

.ek-box_margin_xl {
            margin: var(--ek-box-indent-xl);
}

.ek-box_margin-left_xl {
            margin-left: var(--ek-box-indent-xl);
}

.ek-box_margin-top_xl {
            margin-top: var(--ek-box-indent-xl);
}

.ek-box_margin-right_xl {
            margin-right: var(--ek-box-indent-xl);
}

.ek-box_margin-bottom_xl {
            margin-bottom: var(--ek-box-indent-xl);
}

.ek-box_margin_xxl {
            margin: var(--ek-box-indent-xxl);
}

.ek-box_margin-left_xxl {
            margin-left: var(--ek-box-indent-xxl);
}

.ek-box_margin-top_xxl {
            margin-top: var(--ek-box-indent-xxl);
}

.ek-box_margin-right_xxl {
            margin-right: var(--ek-box-indent-xxl);
}

.ek-box_margin-bottom_xxl {
            margin-bottom: var(--ek-box-indent-xxl);
}

.ek-box_margin_3xl {
            margin: var(--ek-box-indent-3xl);
}

.ek-box_margin-left_3xl {
            margin-left: var(--ek-box-indent-3xl);
}

.ek-box_margin-top_3xl {
            margin-top: var(--ek-box-indent-3xl);
}

.ek-box_margin-right_3xl {
            margin-right: var(--ek-box-indent-3xl);
}

.ek-box_margin-bottom_3xl {
            margin-bottom: var(--ek-box-indent-3xl);
}

.ek-box_margin_4xl {
            margin: var(--ek-box-indent-4xl);
}

.ek-box_margin-left_4xl {
            margin-left: var(--ek-box-indent-4xl);
}

.ek-box_margin-top_4xl {
            margin-top: var(--ek-box-indent-4xl);
}

.ek-box_margin-right_4xl {
            margin-right: var(--ek-box-indent-4xl);
}

.ek-box_margin-bottom_4xl {
            margin-bottom: var(--ek-box-indent-4xl);
}

.ek-box_margin_5xl {
            margin: var(--ek-box-indent-5xl);
}

.ek-box_margin-left_5xl {
            margin-left: var(--ek-box-indent-5xl);
}

.ek-box_margin-top_5xl {
            margin-top: var(--ek-box-indent-5xl);
}

.ek-box_margin-right_5xl {
            margin-right: var(--ek-box-indent-5xl);
}

.ek-box_margin-bottom_5xl {
            margin-bottom: var(--ek-box-indent-5xl);
}

.ek-box_margin_auto {
            margin: auto;
}

.ek-box_margin-left_auto {
            margin-left: auto;
}

.ek-box_margin-top_auto {
            margin-top: auto;
}

.ek-box_margin-right_auto {
            margin-right: auto;
}

.ek-box_margin-bottom_auto {
            margin-bottom: auto;
}

/* DEPRECATED */

.ek-box_margin-tb_none {
            margin-top: 0;
            margin-bottom: 0;
}

.ek-box_margin-lr_none {
            margin-left: 0;
            margin-right: 0;
}

.ek-box_margin-tb_xxs {
            margin-top: var(--ek-box-indent-xxs);
            margin-bottom: var(--ek-box-indent-xxs);
}

.ek-box_margin-lr_xxs {
            margin-left: var(--ek-box-indent-xxs);
            margin-right: var(--ek-box-indent-xxs);
}

.ek-box_margin-tb_xs {
            margin-top: var(--ek-box-indent-xs);
            margin-bottom: var(--ek-box-indent-xs);
}

.ek-box_margin-lr_xs {
            margin-left: var(--ek-box-indent-xs);
            margin-right: var(--ek-box-indent-xs);
}

.ek-box_margin-tb_s {
            margin-top: var(--ek-box-indent-s);
            margin-bottom: var(--ek-box-indent-s);
}

.ek-box_margin-lr_s {
            margin-left: var(--ek-box-indent-s);
            margin-right: var(--ek-box-indent-s);
}

.ek-box_margin-tb_m {
            margin-top: var(--ek-box-indent-m);
            margin-bottom: var(--ek-box-indent-m);
}

.ek-box_margin-lr_m {
            margin-left: var(--ek-box-indent-m);
            margin-right: var(--ek-box-indent-m);
}

.ek-box_margin-tb_l {
            margin-top: var(--ek-box-indent-l);
            margin-bottom: var(--ek-box-indent-l);
}

.ek-box_margin-lr_l {
            margin-left: var(--ek-box-indent-l);
            margin-right: var(--ek-box-indent-l);
}

.ek-box_margin-tb_xl {
            margin-top: var(--ek-box-indent-xl);
            margin-bottom: var(--ek-box-indent-xl);
}

.ek-box_margin-lr_xl {
            margin-left: var(--ek-box-indent-xl);
            margin-right: var(--ek-box-indent-xl);
}

.ek-box_margin-tb_xxl {
            margin-top: var(--ek-box-indent-xxl);
            margin-bottom: var(--ek-box-indent-xxl);
}

.ek-box_margin-lr_xxl {
            margin-left: var(--ek-box-indent-xxl);
            margin-right: var(--ek-box-indent-xxl);
}

.ek-box_margin-tb_auto {
            margin-top: auto;
            margin-bottom: auto;
}

.ek-box_margin-lr_auto {
            margin-left: auto;
            margin-right: auto;
}

/**
 * Padding:
 *
 *  - box_padding_*
 *
 * */

.ek-box_padding_none {
            padding: 0;
}

.ek-box_padding-left_none {
            padding-left: 0;
}

.ek-box_padding-top_none {
            padding-top: 0;
}

.ek-box_padding-right_none {
            padding-right: 0;
}

.ek-box_padding-bottom_none {
            padding-bottom: 0;
}

.ek-box_padding_xxs {
            padding: var(--ek-box-indent-xxs);
}

.ek-box_padding-left_xxs {
            padding-left: var(--ek-box-indent-xxs);
}

.ek-box_padding-top_xxs {
            padding-top: var(--ek-box-indent-xxs);
}

.ek-box_padding-right_xxs {
            padding-right: var(--ek-box-indent-xxs);
}

.ek-box_padding-bottom_xxs {
            padding-bottom: var(--ek-box-indent-xxs);
}

.ek-box_padding_xs {
            padding: var(--ek-box-indent-xs);
}

.ek-box_padding-left_xs {
            padding-left: var(--ek-box-indent-xs);
}

.ek-box_padding-top_xs {
            padding-top: var(--ek-box-indent-xs);
}

.ek-box_padding-right_xs {
            padding-right: var(--ek-box-indent-xs);
}

.ek-box_padding-bottom_xs {
            padding-bottom: var(--ek-box-indent-xs);
}

.ek-box_padding_s {
            padding: var(--ek-box-indent-s);
}

.ek-box_padding-left_s {
            padding-left: var(--ek-box-indent-s);
}

.ek-box_padding-top_s {
            padding-top: var(--ek-box-indent-s);
}

.ek-box_padding-right_s {
            padding-right: var(--ek-box-indent-s);
}

.ek-box_padding-bottom_s {
            padding-bottom: var(--ek-box-indent-s);
}

.ek-box_padding_m {
            padding: var(--ek-box-indent-m);
}

.ek-box_padding-left_m {
            padding-left: var(--ek-box-indent-m);
}

.ek-box_padding-top_m {
            padding-top: var(--ek-box-indent-m);
}

.ek-box_padding-right_m {
            padding-right: var(--ek-box-indent-m);
}

.ek-box_padding-bottom_m {
            padding-bottom: var(--ek-box-indent-m);
}

.ek-box_padding_l {
            padding: var(--ek-box-indent-l);
}

.ek-box_padding-left_l {
            padding-left: var(--ek-box-indent-l);
}

.ek-box_padding-top_l {
            padding-top: var(--ek-box-indent-l);
}

.ek-box_padding-right_l {
            padding-right: var(--ek-box-indent-l);
}

.ek-box_padding-bottom_l {
            padding-bottom: var(--ek-box-indent-l);
}

.ek-box_padding_xl {
            padding: var(--ek-box-indent-xl);
}

.ek-box_padding-left_xl {
            padding-left: var(--ek-box-indent-xl);
}

.ek-box_padding-top_xl {
            padding-top: var(--ek-box-indent-xl);
}

.ek-box_padding-right_xl {
            padding-right: var(--ek-box-indent-xl);
}

.ek-box_padding-bottom_xl {
            padding-bottom: var(--ek-box-indent-xl);
}

.ek-box_padding_xxl {
            padding: var(--ek-box-indent-xxl);
}

.ek-box_padding-left_xxl {
            padding-left: var(--ek-box-indent-xxl);
}

.ek-box_padding-top_xxl {
            padding-top: var(--ek-box-indent-xxl);
}

.ek-box_padding-right_xxl {
            padding-right: var(--ek-box-indent-xxl);
}

.ek-box_padding-bottom_xxl {
            padding-bottom: var(--ek-box-indent-xxl);
}

.ek-box_padding_3xl {
            padding: var(--ek-box-indent-3xl);
}

.ek-box_padding-left_3xl {
            padding-left: var(--ek-box-indent-3xl);
}

.ek-box_padding-top_3xl {
            padding-top: var(--ek-box-indent-3xl);
}

.ek-box_padding-right_3xl {
            padding-right: var(--ek-box-indent-3xl);
}

.ek-box_padding-bottom_3xl {
            padding-bottom: var(--ek-box-indent-3xl);
}

.ek-box_padding_4xl {
            padding: var(--ek-box-indent-4xl);
}

.ek-box_padding-left_4xl {
            padding-left: var(--ek-box-indent-4xl);
}

.ek-box_padding-top_4xl {
            padding-top: var(--ek-box-indent-4xl);
}

.ek-box_padding-right_4xl {
            padding-right: var(--ek-box-indent-4xl);
}

.ek-box_padding-bottom_4xl {
            padding-bottom: var(--ek-box-indent-4xl);
}

.ek-box_padding_5xl {
            padding: var(--ek-box-indent-5xl);
}

.ek-box_padding-left_5xl {
            padding-left: var(--ek-box-indent-5xl);
}

.ek-box_padding-top_5xl {
            padding-top: var(--ek-box-indent-5xl);
}

.ek-box_padding-right_5xl {
            padding-right: var(--ek-box-indent-5xl);
}

.ek-box_padding-bottom_5xl {
            padding-bottom: var(--ek-box-indent-5xl);
}

/* DEPRECATED */

.ek-box_padding-tb_none {
            padding-top: 0;
            padding-bottom: 0;
}

.ek-box_padding-lr_none {
            padding-left: 0;
            padding-right: 0;
}

.ek-box_padding-tb_xxs {
            padding-top: var(--ek-box-indent-xxs);
            padding-bottom: var(--ek-box-indent-xxs);
}

.ek-box_padding-lr_xxs {
            padding-left: var(--ek-box-indent-xxs);
            padding-right: var(--ek-box-indent-xxs);
}

.ek-box_padding-tb_xs {
            padding-top: var(--ek-box-indent-xs);
            padding-bottom: var(--ek-box-indent-xs);
}

.ek-box_padding-lr_xs {
            padding-left: var(--ek-box-indent-xs);
            padding-right: var(--ek-box-indent-xs);
}

.ek-box_padding-tb_s {
            padding-top: var(--ek-box-indent-s);
            padding-bottom: var(--ek-box-indent-s);
}

.ek-box_padding-lr_s {
            padding-left: var(--ek-box-indent-s);
            padding-right: var(--ek-box-indent-s);
}

.ek-box_padding-tb_m {
            padding-top: var(--ek-box-indent-m);
            padding-bottom: var(--ek-box-indent-m);
}

.ek-box_padding-lr_m {
            padding-left: var(--ek-box-indent-m);
            padding-right: var(--ek-box-indent-m);
}

.ek-box_padding-tb_l {
            padding-top: var(--ek-box-indent-l);
            padding-bottom: var(--ek-box-indent-l);
}

.ek-box_padding-lr_l {
            padding-left: var(--ek-box-indent-l);
            padding-right: var(--ek-box-indent-l);
}

.ek-box_padding-tb_xl {
            padding-top: var(--ek-box-indent-xl);
            padding-bottom: var(--ek-box-indent-xl);
}

.ek-box_padding-lr_xl {
            padding-left: var(--ek-box-indent-xl);
            padding-right: var(--ek-box-indent-xl);
}

.ek-box_padding-tb_xxl {
            padding-top: var(--ek-box-indent-xxl);
            padding-bottom: var(--ek-box-indent-xxl);
}

.ek-box_padding-lr_xxl {
            padding-left: var(--ek-box-indent-xxl);
            padding-right: var(--ek-box-indent-xxl);
}

/**
 * Round:
 *
 *  - box_round_*
 *
 * */

.ek-box_round_none {
            border-radius: 0;
}

.ek-box_round-top-left_none {
            border-top-left-radius: 0;
}

.ek-box_round-top-right_none {
            border-top-right-radius: 0;
}

.ek-box_round-bottom-right_none {
            border-bottom-right-radius: 0;
}

.ek-box_round-bottom-left_none {
            border-bottom-left-radius: 0;
}

.ek-box_round_xxs {
            border-radius: var(--ek-box-round-xxs);
}

.ek-box_round-top-left_xxs {
            border-top-left-radius: var(--ek-box-round-xxs);
}

.ek-box_round-top-right_xxs {
            border-top-right-radius: var(--ek-box-round-xxs);
}

.ek-box_round-bottom-right_xxs {
            border-bottom-right-radius: var(--ek-box-round-xxs);
}

.ek-box_round-bottom-left_xxs {
            border-bottom-left-radius: var(--ek-box-round-xxs);
}

.ek-box_round_xs {
            border-radius: var(--ek-box-round-xs);
}

.ek-box_round-top-left_xs {
            border-top-left-radius: var(--ek-box-round-xs);
}

.ek-box_round-top-right_xs {
            border-top-right-radius: var(--ek-box-round-xs);
}

.ek-box_round-bottom-right_xs {
            border-bottom-right-radius: var(--ek-box-round-xs);
}

.ek-box_round-bottom-left_xs {
            border-bottom-left-radius: var(--ek-box-round-xs);
}

.ek-box_round_s {
            border-radius: var(--ek-box-round-s);
}

.ek-box_round-top-left_s {
            border-top-left-radius: var(--ek-box-round-s);
}

.ek-box_round-top-right_s {
            border-top-right-radius: var(--ek-box-round-s);
}

.ek-box_round-bottom-right_s {
            border-bottom-right-radius: var(--ek-box-round-s);
}

.ek-box_round-bottom-left_s {
            border-bottom-left-radius: var(--ek-box-round-s);
}

.ek-box_round_m {
            border-radius: var(--ek-box-round-m);
}

.ek-box_round-top-left_m {
            border-top-left-radius: var(--ek-box-round-m);
}

.ek-box_round-top-right_m {
            border-top-right-radius: var(--ek-box-round-m);
}

.ek-box_round-bottom-right_m {
            border-bottom-right-radius: var(--ek-box-round-m);
}

.ek-box_round-bottom-left_m {
            border-bottom-left-radius: var(--ek-box-round-m);
}

.ek-box_round_l {
            border-radius: var(--ek-box-round-l);
}

.ek-box_round-top-left_l {
            border-top-left-radius: var(--ek-box-round-l);
}

.ek-box_round-top-right_l {
            border-top-right-radius: var(--ek-box-round-l);
}

.ek-box_round-bottom-right_l {
            border-bottom-right-radius: var(--ek-box-round-l);
}

.ek-box_round-bottom-left_l {
            border-bottom-left-radius: var(--ek-box-round-l);
}

.ek-box_round_xl {
            border-radius: var(--ek-box-round-xl);
}

.ek-box_round-top-left_xl {
            border-top-left-radius: var(--ek-box-round-xl);
}

.ek-box_round-top-right_xl {
            border-top-right-radius: var(--ek-box-round-xl);
}

.ek-box_round-bottom-right_xl {
            border-bottom-right-radius: var(--ek-box-round-xl);
}

.ek-box_round-bottom-left_xl {
            border-bottom-left-radius: var(--ek-box-round-xl);
}

.ek-box_round_xxl {
            border-radius: var(--ek-box-round-xxl);
}

.ek-box_round-top-left_xxl {
            border-top-left-radius: var(--ek-box-round-xxl);
}

.ek-box_round-top-right_xxl {
            border-top-right-radius: var(--ek-box-round-xxl);
}

.ek-box_round-bottom-right_xxl {
            border-bottom-right-radius: var(--ek-box-round-xxl);
}

.ek-box_round-bottom-left_xxl {
            border-bottom-left-radius: var(--ek-box-round-xxl);
}

.ek-box_round_3xl {
            border-radius: var(--ek-box-round-3xl);
}

.ek-box_round-top-left_3xl {
            border-top-left-radius: var(--ek-box-round-3xl);
}

.ek-box_round-top-right_3xl {
            border-top-right-radius: var(--ek-box-round-3xl);
}

.ek-box_round-bottom-right_3xl {
            border-bottom-right-radius: var(--ek-box-round-3xl);
}

.ek-box_round-bottom-left_3xl {
            border-bottom-left-radius: var(--ek-box-round-3xl);
}

.ek-box_round_4xl {
            border-radius: var(--ek-box-round-4xl);
}

.ek-box_round-top-left_4xl {
            border-top-left-radius: var(--ek-box-round-4xl);
}

.ek-box_round-top-right_4xl {
            border-top-right-radius: var(--ek-box-round-4xl);
}

.ek-box_round-bottom-right_4xl {
            border-bottom-right-radius: var(--ek-box-round-4xl);
}

.ek-box_round-bottom-left_4xl {
            border-bottom-left-radius: var(--ek-box-round-4xl);
}

.ek-box_round_5xl {
            border-radius: var(--ek-box-round-5xl);
}

.ek-box_round-top-left_5xl {
            border-top-left-radius: var(--ek-box-round-5xl);
}

.ek-box_round-top-right_5xl {
            border-top-right-radius: var(--ek-box-round-5xl);
}

.ek-box_round-bottom-right_5xl {
            border-bottom-right-radius: var(--ek-box-round-5xl);
}

.ek-box_round-bottom-left_5xl {
            border-bottom-left-radius: var(--ek-box-round-5xl);
}

.ek-box_round_full {
            border-radius: 50%;
}

.ek-box_round-top-left_full {
            border-top-left-radius: 50%;
}

.ek-box_round-top-right_full {
            border-top-right-radius: 50%;
}

.ek-box_round-bottom-right_full {
            border-bottom-right-radius: 50%;
}

.ek-box_round-bottom-left_full {
            border-bottom-left-radius: 50%;
}

/* DEPRECATED */

.ek-box_round-top_none {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
}

.ek-box_round-right_none {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
}

.ek-box_round-bottom_none {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
}

.ek-box_round-left_none {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
}

.ek-box_round-top_xxs {
            border-top-left-radius: var(--ek-box-round-xxs);
            border-top-right-radius: var(--ek-box-round-xxs);
}

.ek-box_round-right_xxs {
            border-top-right-radius: var(--ek-box-round-xxs);
            border-bottom-right-radius: var(--ek-box-round-xxs);
}

.ek-box_round-bottom_xxs {
            border-bottom-left-radius: var(--ek-box-round-xxs);
            border-bottom-right-radius: var(--ek-box-round-xxs);
}

.ek-box_round-left_xxs {
            border-top-left-radius: var(--ek-box-round-xxs);
            border-bottom-left-radius: var(--ek-box-round-xxs);
}

.ek-box_round-top_xs {
            border-top-left-radius: var(--ek-box-round-xs);
            border-top-right-radius: var(--ek-box-round-xs);
}

.ek-box_round-right_xs {
            border-top-right-radius: var(--ek-box-round-xs);
            border-bottom-right-radius: var(--ek-box-round-xs);
}

.ek-box_round-bottom_xs {
            border-bottom-left-radius: var(--ek-box-round-xs);
            border-bottom-right-radius: var(--ek-box-round-xs);
}

.ek-box_round-left_xs {
            border-top-left-radius: var(--ek-box-round-xs);
            border-bottom-left-radius: var(--ek-box-round-xs);
}

.ek-box_round-top_s {
            border-top-left-radius: var(--ek-box-round-s);
            border-top-right-radius: var(--ek-box-round-s);
}

.ek-box_round-right_s {
            border-top-right-radius: var(--ek-box-round-s);
            border-bottom-right-radius: var(--ek-box-round-s);
}

.ek-box_round-bottom_s {
            border-bottom-left-radius: var(--ek-box-round-s);
            border-bottom-right-radius: var(--ek-box-round-s);
}

.ek-box_round-left_s {
            border-top-left-radius: var(--ek-box-round-s);
            border-bottom-left-radius: var(--ek-box-round-s);
}

.ek-box_round-top_m {
            border-top-left-radius: var(--ek-box-round-m);
            border-top-right-radius: var(--ek-box-round-m);
}

.ek-box_round-right_m {
            border-top-right-radius: var(--ek-box-round-m);
            border-bottom-right-radius: var(--ek-box-round-m);
}

.ek-box_round-bottom_m {
            border-bottom-left-radius: var(--ek-box-round-m);
            border-bottom-right-radius: var(--ek-box-round-m);
}

.ek-box_round-left_m {
            border-top-left-radius: var(--ek-box-round-m);
            border-bottom-left-radius: var(--ek-box-round-m);
}

.ek-box_round-top_l {
            border-top-left-radius: var(--ek-box-round-l);
            border-top-right-radius: var(--ek-box-round-l);
}

.ek-box_round-right_l {
            border-top-right-radius: var(--ek-box-round-l);
            border-bottom-right-radius: var(--ek-box-round-l);
}

.ek-box_round-bottom_l {
            border-bottom-left-radius: var(--ek-box-round-l);
            border-bottom-right-radius: var(--ek-box-round-l);
}

.ek-box_round-left_l {
            border-top-left-radius: var(--ek-box-round-l);
            border-bottom-left-radius: var(--ek-box-round-l);
}

.ek-box_round-top_xl {
            border-top-left-radius: var(--ek-box-round-xl);
            border-top-right-radius: var(--ek-box-round-xl);
}

.ek-box_round-right_xl {
            border-top-right-radius: var(--ek-box-round-xl);
            border-bottom-right-radius: var(--ek-box-round-xl);
}

.ek-box_round-bottom_xl {
            border-bottom-left-radius: var(--ek-box-round-xl);
            border-bottom-right-radius: var(--ek-box-round-xl);
}

.ek-box_round-left_xl {
            border-top-left-radius: var(--ek-box-round-xl);
            border-bottom-left-radius: var(--ek-box-round-xl);
}

.ek-box_round-top_xxl {
            border-top-left-radius: var(--ek-box-round-xxl);
            border-top-right-radius: var(--ek-box-round-xxl);
}

.ek-box_round-right_xxl {
            border-top-right-radius: var(--ek-box-round-xxl);
            border-bottom-right-radius: var(--ek-box-round-xxl);
}

.ek-box_round-bottom_xxl {
            border-bottom-left-radius: var(--ek-box-round-xxl);
            border-bottom-right-radius: var(--ek-box-round-xxl);
}

.ek-box_round-left_xxl {
            border-top-left-radius: var(--ek-box-round-xxl);
            border-bottom-left-radius: var(--ek-box-round-xxl);
}

.ek-box_round-top_full {
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
}

.ek-box_round-right_full {
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
}

.ek-box_round-bottom_full {
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;
}

.ek-box_round-left_full {
            border-top-left-radius: 50%;
            border-bottom-left-radius: 50%;
}

/**
 * Border width:
 *
 *  - box_border-width_none
 *  - box_border-width_*
 *
 * */

.ek-box_border-width_none {
            border-width: 0;
}

.ek-box_border-width-top_none {
            border-top-width: 0;
}

.ek-box_border-width-right_none {
            border-right-width: 0;
}

.ek-box_border-width-bottom_none {
            border-bottom-width: 0;
}

.ek-box_border-width-left_none {
            border-left-width: 0;
}

.ek-box_border-width_xxs {
            border-width: var(--ek-box-border-width-xxs);
}

.ek-box_border-width-top_xxs {
            border-top-width: var(--ek-box-border-width-xxs);
}

.ek-box_border-width-right_xxs {
            border-right-width: var(--ek-box-border-width-xxs);
}

.ek-box_border-width-bottom_xxs {
            border-bottom-width: var(--ek-box-border-width-xxs);
}

.ek-box_border-width-left_xxs {
            border-left-width: var(--ek-box-border-width-xxs);
}

.ek-box_border-width_xs {
            border-width: var(--ek-box-border-width-xs);
}

.ek-box_border-width-top_xs {
            border-top-width: var(--ek-box-border-width-xs);
}

.ek-box_border-width-right_xs {
            border-right-width: var(--ek-box-border-width-xs);
}

.ek-box_border-width-bottom_xs {
            border-bottom-width: var(--ek-box-border-width-xs);
}

.ek-box_border-width-left_xs {
            border-left-width: var(--ek-box-border-width-xs);
}

.ek-box_border-width_s {
            border-width: var(--ek-box-border-width-s);
}

.ek-box_border-width-top_s {
            border-top-width: var(--ek-box-border-width-s);
}

.ek-box_border-width-right_s {
            border-right-width: var(--ek-box-border-width-s);
}

.ek-box_border-width-bottom_s {
            border-bottom-width: var(--ek-box-border-width-s);
}

.ek-box_border-width-left_s {
            border-left-width: var(--ek-box-border-width-s);
}

.ek-box_border-width_m {
            border-width: var(--ek-box-border-width-m);
}

.ek-box_border-width-top_m {
            border-top-width: var(--ek-box-border-width-m);
}

.ek-box_border-width-right_m {
            border-right-width: var(--ek-box-border-width-m);
}

.ek-box_border-width-bottom_m {
            border-bottom-width: var(--ek-box-border-width-m);
}

.ek-box_border-width-left_m {
            border-left-width: var(--ek-box-border-width-m);
}

.ek-box_border-width_l {
            border-width: var(--ek-box-border-width-l);
}

.ek-box_border-width-top_l {
            border-top-width: var(--ek-box-border-width-l);
}

.ek-box_border-width-right_l {
            border-right-width: var(--ek-box-border-width-l);
}

.ek-box_border-width-bottom_l {
            border-bottom-width: var(--ek-box-border-width-l);
}

.ek-box_border-width-left_l {
            border-left-width: var(--ek-box-border-width-l);
}

.ek-box_border-width_xl {
            border-width: var(--ek-box-border-width-xl);
}

.ek-box_border-width-top_xl {
            border-top-width: var(--ek-box-border-width-xl);
}

.ek-box_border-width-right_xl {
            border-right-width: var(--ek-box-border-width-xl);
}

.ek-box_border-width-bottom_xl {
            border-bottom-width: var(--ek-box-border-width-xl);
}

.ek-box_border-width-left_xl {
            border-left-width: var(--ek-box-border-width-xl);
}

.ek-box_border-width_xxl {
            border-width: var(--ek-box-border-width-xxl);
}

.ek-box_border-width-top_xxl {
            border-top-width: var(--ek-box-border-width-xxl);
}

.ek-box_border-width-right_xxl {
            border-right-width: var(--ek-box-border-width-xxl);
}

.ek-box_border-width-bottom_xxl {
            border-bottom-width: var(--ek-box-border-width-xxl);
}

.ek-box_border-width-left_xxl {
            border-left-width: var(--ek-box-border-width-xxl);
}

.ek-box_border-width_3xl {
            border-width: var(--ek-box-border-width-3xl);
}

.ek-box_border-width-top_3xl {
            border-top-width: var(--ek-box-border-width-3xl);
}

.ek-box_border-width-right_3xl {
            border-right-width: var(--ek-box-border-width-3xl);
}

.ek-box_border-width-bottom_3xl {
            border-bottom-width: var(--ek-box-border-width-3xl);
}

.ek-box_border-width-left_3xl {
            border-left-width: var(--ek-box-border-width-3xl);
}

.ek-box_border-width_4xl {
            border-width: var(--ek-box-border-width-4xl);
}

.ek-box_border-width-top_4xl {
            border-top-width: var(--ek-box-border-width-4xl);
}

.ek-box_border-width-right_4xl {
            border-right-width: var(--ek-box-border-width-4xl);
}

.ek-box_border-width-bottom_4xl {
            border-bottom-width: var(--ek-box-border-width-4xl);
}

.ek-box_border-width-left_4xl {
            border-left-width: var(--ek-box-border-width-4xl);
}

.ek-box_border-width_5xl {
            border-width: var(--ek-box-border-width-5xl);
}

.ek-box_border-width-top_5xl {
            border-top-width: var(--ek-box-border-width-5xl);
}

.ek-box_border-width-right_5xl {
            border-right-width: var(--ek-box-border-width-5xl);
}

.ek-box_border-width-bottom_5xl {
            border-bottom-width: var(--ek-box-border-width-5xl);
}

.ek-box_border-width-left_5xl {
            border-left-width: var(--ek-box-border-width-5xl);
}

/**
 * Border style:
 *
 *  - box_border-style_solid
 *  - box_border-style_dotted
 *  - box_border-style_dashed
 *
 * */

.ek-box_border-style_solid {
        border-style: solid;
}

.ek-box_border-style-top_solid {
        border-top-style: solid;
}

.ek-box_border-style-right_solid {
        border-right-style: solid;
}

.ek-box_border-style-bottom_solid {
        border-bottom-style: solid;
}

.ek-box_border-style-left_solid {
        border-left-style: solid;
}

.ek-box_border-style_dotted {
        border-style: dotted;
}

.ek-box_border-style-top_dotted {
        border-top-style: dotted;
}

.ek-box_border-style-right_dotted {
        border-right-style: dotted;
}

.ek-box_border-style-bottom_dotted {
        border-bottom-style: dotted;
}

.ek-box_border-style-left_dotted {
        border-left-style: dotted;
}

.ek-box_border-style_dashed {
        border-style: dashed;
}

.ek-box_border-style-top_dashed {
        border-top-style: dashed;
}

.ek-box_border-style-right_dashed {
        border-right-style: dashed;
}

.ek-box_border-style-bottom_dashed {
        border-bottom-style: dashed;
}

.ek-box_border-style-left_dashed {
        border-left-style: dashed;
}

/**
 * Width:
 *
 *  - box_width_*
 *
 * */

.ek-box_width_1-1 {
                width: calc(1 / 1 * 100%);
}

.ek-box_width_1-2 {
                width: calc(1 / 2 * 100%);
}

.ek-box_width_1-3 {
                width: calc(1 / 3 * 100%);
}

.ek-box_width_2-3 {
                width: calc(2 / 3 * 100%);
}

.ek-box_width_1-4 {
                width: calc(1 / 4 * 100%);
}

.ek-box_width_2-4 {
                width: calc(2 / 4 * 100%);
}

.ek-box_width_3-4 {
                width: calc(3 / 4 * 100%);
}

.ek-box_width_1-5 {
                width: calc(1 / 5 * 100%);
}

.ek-box_width_2-5 {
                width: calc(2 / 5 * 100%);
}

.ek-box_width_3-5 {
                width: calc(3 / 5 * 100%);
}

.ek-box_width_4-5 {
                width: calc(4 / 5 * 100%);
}

.ek-box_width_1-6 {
                width: calc(1 / 6 * 100%);
}

.ek-box_width_2-6 {
                width: calc(2 / 6 * 100%);
}

.ek-box_width_3-6 {
                width: calc(3 / 6 * 100%);
}

.ek-box_width_4-6 {
                width: calc(4 / 6 * 100%);
}

.ek-box_width_5-6 {
                width: calc(5 / 6 * 100%);
}

.ek-box_width_1-7 {
                width: calc(1 / 7 * 100%);
}

.ek-box_width_2-7 {
                width: calc(2 / 7 * 100%);
}

.ek-box_width_3-7 {
                width: calc(3 / 7 * 100%);
}

.ek-box_width_4-7 {
                width: calc(4 / 7 * 100%);
}

.ek-box_width_5-7 {
                width: calc(5 / 7 * 100%);
}

.ek-box_width_6-7 {
                width: calc(6 / 7 * 100%);
}

.ek-box_width_1-8 {
                width: calc(1 / 8 * 100%);
}

.ek-box_width_2-8 {
                width: calc(2 / 8 * 100%);
}

.ek-box_width_3-8 {
                width: calc(3 / 8 * 100%);
}

.ek-box_width_4-8 {
                width: calc(4 / 8 * 100%);
}

.ek-box_width_5-8 {
                width: calc(5 / 8 * 100%);
}

.ek-box_width_6-8 {
                width: calc(6 / 8 * 100%);
}

.ek-box_width_7-8 {
                width: calc(7 / 8 * 100%);
}

.ek-box_width_1-9 {
                width: calc(1 / 9 * 100%);
}

.ek-box_width_2-9 {
                width: calc(2 / 9 * 100%);
}

.ek-box_width_3-9 {
                width: calc(3 / 9 * 100%);
}

.ek-box_width_4-9 {
                width: calc(4 / 9 * 100%);
}

.ek-box_width_5-9 {
                width: calc(5 / 9 * 100%);
}

.ek-box_width_6-9 {
                width: calc(6 / 9 * 100%);
}

.ek-box_width_7-9 {
                width: calc(7 / 9 * 100%);
}

.ek-box_width_8-9 {
                width: calc(8 / 9 * 100%);
}

.ek-box_width_1-10 {
                width: calc(1 / 10 * 100%);
}

.ek-box_width_2-10 {
                width: calc(2 / 10 * 100%);
}

.ek-box_width_3-10 {
                width: calc(3 / 10 * 100%);
}

.ek-box_width_4-10 {
                width: calc(4 / 10 * 100%);
}

.ek-box_width_5-10 {
                width: calc(5 / 10 * 100%);
}

.ek-box_width_6-10 {
                width: calc(6 / 10 * 100%);
}

.ek-box_width_7-10 {
                width: calc(7 / 10 * 100%);
}

.ek-box_width_8-10 {
                width: calc(8 / 10 * 100%);
}

.ek-box_width_9-10 {
                width: calc(9 / 10 * 100%);
}

.ek-box_width_auto {
    width: auto;
}

/**
 * Height:
 *
 *  - box_height_*
 *
 * */

.ek-box_height_1-1 {
    height: 100%;
}

.ek-box_height_auto {
    height: auto;
}

/**
 * Overflow:
 *
 *  - box_overflow_*
 *  - box_overflow-x_*
 *  - box_overflow-y_*
 *
 * */

.ek-box_overflow_auto {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
}

.ek-box_overflow-x_auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
}

.ek-box_overflow-y_auto {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
}

.ek-box_overflow_hidden {
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
}

.ek-box_overflow-x_hidden {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
}

.ek-box_overflow-y_hidden {
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
}

.ek-box_overflow_scroll {
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
}

.ek-box_overflow-x_scroll {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
}

.ek-box_overflow-y_scroll {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
}

.ek-box_overflow_visible {
        overflow: visible;
        -webkit-overflow-scrolling: touch;
}

.ek-box_overflow-x_visible {
        overflow-x: visible;
        -webkit-overflow-scrolling: touch;
}

.ek-box_overflow-y_visible {
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
}

/**
 * Opacity:
 *
 *  - box_opacity_*
 *
 * */

.ek-box_opacity_0 {
        opacity: 0;
}

.ek-box_opacity_10 {
        opacity: 0.1;
}

.ek-box_opacity_20 {
        opacity: 0.2;
}

.ek-box_opacity_30 {
        opacity: 0.3;
}

.ek-box_opacity_40 {
        opacity: 0.4;
}

.ek-box_opacity_50 {
        opacity: 0.5;
}

.ek-box_opacity_60 {
        opacity: 0.6;
}

.ek-box_opacity_70 {
        opacity: 0.7;
}

.ek-box_opacity_80 {
        opacity: 0.8;
}

.ek-box_opacity_90 {
        opacity: 0.9;
}

.ek-box_opacity_100 {
        opacity: 1;
}

/**
 * Empty:
 *
 *  - box_empty_hidden
 *
 * */

/* DEPRECATED */

.ek-box_empty_hidden:empty {
        display: none;
}