/* CANDYCON TOOLKIT */

@import url("ci-pazar-social.min.css");
@import url("ci-pazar.min.css");
@import url("ci-pazar-small.min.css");
@import url("ci-pazar-cars.min.css");
@import url("ci-tools.min.css");

*[class^="ci-"]:first-child ~ * {
 /*  vertical-align: middle;*/ 
}

/* #region ---------------- Stack ------------------- */
.ci-stack {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    font-size: inherit;
    opacity: 1;
    position: relative;
    transition: width 0.3s ease, height 0.3s ease, background-image 0.3s ease;
    -webkit-transition: width 0.3s ease, height 0.3s ease, background-image 0.3s ease;
}

    .ci-stack * {
        position: absolute !important;
        width: 1em;
        height: 1em;
        font-size: inherit;
        display: block !important;
        top: -moz-calc(50% - 0.5em);
        left: -moz-calc(50% - 0.5em);
        top: -webkit-calc(50% - 0.5em);
        left: -webkit-calc(50% - 0.5em);
        top: calc(50% - 0.5em);
        left: calc(50% - 0.5em);
    }
/* #endregion ------------- Stack ------------------- */
/* #region ---------------- Badge ------------------- */
.ci-badge {
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    background-color: #9e9e9e;
    top: auto;
    left: auto;
    bottom: -10%;
    right: -10%;
    border-radius: 50%;
    line-height: 0.5em !important;
}

    .ci-badge:empty {
        display: none;
    }

    .ci-badge > * {
        font-size: 36%;
        letter-spacing: 0px;
        text-align: center;
        color: inherit;
        display: block;
        vertical-align: middle;
        padding: 0px;
        margin: 0px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .ci-badge > *[class^="ci-"] {
            display: block;
            position: absolute;
            left: calc(50% - 0.5em);
            top: calc(50% - 0.5em);
            width: 1em;
            height: 1em;
            font-size: 0.45em;
        }

    /* #region ------- Badge Color -------- */
    /* #region Regular */
    .ci-badge.ci-badge-color-base, .ci-badge.ci-xs-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    .ci-badge.ci-badge-color-alt, .ci-badge.ci-xs-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    .ci-badge.ci-badge-color-primary, .ci-badge.ci-xs-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }


    .ci-badge.ci-badge-color-success, .ci-badge.ci-xs-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    .ci-badge.ci-badge-color-warning, .ci-badge.ci-xs-badge-color-warning {
        background-color: #FFE24B;
        color: #212529;
    }

    .ci-badge.ci-badge-color-danger, .ci-badge.ci-xs-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
/* #endregion Regular */
/* #region Active */
*.active > .ci-badge.ci-a-badge-color-base, .ci-element.active .ci-badge.ci-a-badge-color-base,
*.active > .ci-badge.ci-xs-a-badge-color-base, .ci-element.active .ci-badge.ci-xs-a-badge-color-base {
    background-color: #212529;
    color: #ffffff;
}

*.active > .ci-badge.ci-a-badge-color-alt, .ci-element.active .ci-badge.ci-a-badge-color-alt,
*.active > .ci-badge.ci-xs-a-badge-color-alt, .ci-element.active .ci-badge.ci-xs-a-badge-color-alt {
    background-color: #ffffff;
    color: #212529;
}

*.active > .ci-badge.ci-a-badge-color-primary, .ci-element.active .ci-badge.ci-a-badge-color-primary,
*.active > .ci-badge.ci-xs-a-badge-color-primary, .ci-element.active .ci-badge.ci-xs-a-badge-color-primary {
    background-color: #5DAA80;
    color: #ffffff;
}

*.active > .ci-badge.ci-a-badge-color-success, .ci-element.active .ci-badge.ci-a-badge-color-success,
*.active > .ci-badge.ci-xs-a-badge-color-success, .ci-element.active .ci-badge.ci-xs-a-badge-color-success {
    background-color: #28A745;
    color: #ffffff;
}

*.active > .ci-badge.ci-a-badge-color-warning, .ci-element.active .ci-badge.ci-a-badge-color-warning,
*.active > .ci-badge.ci-xs-a-badge-color-warning, .ci-element.active .ci-badge.ci-xs-a-badge-color-warning {
    background-color: #FFE24B;
    color: #212529;
}

*.active > .ci-badge.ci-a-badge-color-danger, .ci-element.active .ci-badge.ci-a-badge-color-danger,
*.active > .ci-badge.ci-xs-a-badge-color-danger, .ci-element.active .ci-badge.ci-xs-a-badge-color-danger {
    background-color: #D83F3F;
    color: #ffffff;
}
/* #endregion Active */
/* #region Hover */
*:hover > .ci-badge.ci-h-badge-color-base, .ci-element:hover .ci-badge.ci-h-badge-color-base,
*:hover > .ci-badge.ci-xs-h-badge-color-base, .ci-element:hover .ci-badge.ci-xs-h-badge-color-base {
    background-color: #212529;
    color: #ffffff;
}

*:hover > .ci-badge.ci-h-badge-color-alt, .ci-element:hover .ci-badge.ci-h-badge-color-alt,
*:hover > .ci-badge.ci-xs-h-badge-color-alt, .ci-element:hover .ci-badge.ci-xs-h-badge-color-alt {
    background-color: #ffffff;
    color: #212529;
}

*:hover > .ci-badge.ci-h-badge-color-primary, .ci-element:hover .ci-badge.ci-h-badge-color-primary,
*:hover > .ci-badge.ci-xs-h-badge-color-primary, .ci-element:hover .ci-badge.ci-xs-h-badge-color-primary {
    background-color: #5DAA80;
    color: #ffffff;
}

*:hover > .ci-badge.ci-h-badge-color-success, .ci-element:hover .ci-badge.ci-h-badge-color-success,
*:hover > .ci-badge.ci-xs-h-badge-color-success, .ci-element:hover .ci-badge.ci-xs-h-badge-color-success {
    background-color: #28A745;
    color: #ffffff;
}

*:hover > .ci-badge.ci-h-badge-color-warning, .ci-element:hover .ci-badge.ci-h-badge-color-warning,
*:hover > .ci-badge.ci-xs-h-badge-color-warning, .ci-element:hover .ci-badge.ci-xs-h-badge-color-warning {
    background-color: #FFE24B;
    color: #212529;
}

*:hover > .ci-badge.ci-h-badge-color-danger, .ci-element:hover .ci-badge.ci-h-badge-color-danger,
*:hover > .ci-badge.ci-xs-h-badge-color-danger, .ci-element:hover .ci-badge.ci-xs-h-badge-color-danger {
    background-color: #D83F3F;
    color: #ffffff;
}
/* #endregion Hover */
/* #region Press */
*:active > .ci-badge.ci-p-badge-color-base, .ci-element:active .ci-badge.ci-p-badge-color-base,
*:active > .ci-badge.ci-xs-p-badge-color-base, .ci-element:active .ci-badge.ci-xs-p-badge-color-base {
    background-color: #212529;
    color: #ffffff;
}

*:active > .ci-badge.ci-p-badge-color-alt, .ci-element:active .ci-badge.ci-p-badge-color-alt,
*:active > .ci-badge.ci-xs-p-badge-color-alt, .ci-element:active .ci-badge.ci-xs-p-badge-color-alt {
    background-color: #ffffff;
    color: #212529;
}

*:active > .ci-badge.ci-p-badge-color-primary, .ci-element:active .ci-badge.ci-p-badge-color-primary,
*:active > .ci-badge.ci-xs-p-badge-color-primary, .ci-element:active .ci-badge.ci-xs-p-badge-color-primary {
    background-color: #5DAA80;
    color: #ffffff;
}

*:active > .ci-badge.ci-p-badge-color-success, .ci-element:active .ci-badge.ci-p-badge-color-success,
*:active > .ci-badge.ci-xs-p-badge-color-success, .ci-element:active .ci-badge.ci-xs-p-badge-color-success {
    background-color: #28A745;
    color: #ffffff;
}

*:active > .ci-badge.ci-p-badge-color-warning, .ci-element:active .ci-badge.ci-p-badge-color-warning,
*:active > .ci-badge.ci-xs-p-badge-color-warning, .ci-element:active .ci-badge.ci-xs-p-badge-color-warning {
    background-color: #FFE24B;
    color: #212529;
}

*:active > .ci-badge.ci-p-badge-color-danger, .ci-element:active .ci-badge.ci-p-badge-color-danger,
*:active > .ci-badge.ci-xs-p-badge-color-danger, .ci-element:active .ci-badge.ci-xs-p-badge-color-danger {
    background-color: #D83F3F;
    color: #ffffff;
}
/* #endregion Press */
/* #region Disabled */

*.disabled > .ci-badge.ci-d-badge-color-base, *:disabled > .ci-badge.ci-d-badge-color-base,
*[disabled='disabled'] > .ci-badge.ci-d-badge-color-base, .ci-element.disabled .ci-badge.ci-d-badge-color-base,
.ci-element[disabled='disabled'] .ci-badge.ci-d-badge-color-base, .ci-element:disabled .ci-badge.ci-d-badge-color-base,
*.disabled > .ci-badge.ci-xs-d-badge-color-base, *:disabled > .ci-badge.ci-xs-d-badge-color-base,
*[disabled='disabled'] > .ci-badge.ci-xs-d-badge-color-base, .ci-element.disabled .ci-badge.ci-xs-d-badge-color-base,
.ci-element[disabled='disabled'] .ci-badge.ci-xs-d-badge-color-base, .ci-element:disabled .ci-badge.ci-xs-d-badge-color-base {
    background-color: #212529;
    color: #ffffff;
}

*.disabled > .ci-badge.ci-d-badge-color-alt, *:disabled > .ci-badge.ci-d-badge-color-alt,
*[disabled='disabled'] > .ci-badge.ci-d-badge-color-alt, .ci-element.disabled .ci-badge.ci-d-badge-color-alt,
.ci-element[disabled='disabled'] .ci-badge.ci-d-badge-color-alt, .ci-element:disabled .ci-badge.ci-d-badge-color-alt,
*.disabled > .ci-badge.ci-xs-d-badge-color-alt, *:disabled > .ci-badge.ci-xs-d-badge-color-alt,
*[disabled='disabled'] > .ci-badge.ci-xs-d-badge-color-alt, .ci-element.disabled .ci-badge.ci-xs-d-badge-color-alt,
.ci-element[disabled='disabled'] .ci-badge.ci-xs-d-badge-color-alt, .ci-element:disabled .ci-badge.ci-xs-d-badge-color-alt {
    background-color: #ffffff;
    color: #212529;
}

*.disabled > .ci-badge.ci-d-badge-color-primary, *:disabled > .ci-badge.ci-d-badge-color-primary,
*[disabled='disabled'] > .ci-badge.ci-d-badge-color-primary, .ci-element.disabled .ci-badge.ci-d-badge-color-primary,
.ci-element[disabled='disabled'] .ci-badge.ci-d-badge-color-primary, .ci-element:disabled .ci-badge.ci-d-badge-color-primary,
*.disabled > .ci-badge.ci-xs-d-badge-color-primary, *:disabled > .ci-badge.ci-xs-d-badge-color-primary,
*[disabled='disabled'] > .ci-badge.ci-xs-d-badge-color-primary, .ci-element.disabled .ci-badge.ci-xs-d-badge-color-primary,
.ci-element[disabled='disabled'] .ci-badge.ci-xs-d-badge-color-primary, .ci-element:disabled .ci-badge.ci-xs-d-badge-color-primary {
    background-color: #5DAA80;
    color: #ffffff;
}


*.disabled > .ci-badge.ci-d-badge-color-success, *:disabled > .ci-badge.ci-d-badge-color-success,
*[disabled='disabled'] > .ci-badge.ci-d-badge-color-success, .ci-element.disabled .ci-badge.ci-d-badge-color-success,
.ci-element[disabled='disabled'] .ci-badge.ci-d-badge-color-success, .ci-element:disabled .ci-badge.ci-d-badge-color-success,
*.disabled > .ci-badge.ci-xs-d-badge-color-success, *:disabled > .ci-badge.ci-xs-d-badge-color-success,
*[disabled='disabled'] > .ci-badge.ci-xs-d-badge-color-success, .ci-element.disabled .ci-badge.ci-xs-d-badge-color-success,
.ci-element[disabled='disabled'] .ci-badge.ci-xs-d-badge-color-success, .ci-element:disabled .ci-badge.ci-xs-d-badge-color-success {
    background-color: #28A745;
    color: #ffffff;
}

*.disabled > .ci-badge.ci-d-badge-color-warning, *:disabled > .ci-badge.ci-d-badge-color-warning,
*[disabled='disabled'] > .ci-badge.ci-d-badge-color-warning, .ci-element.disabled .ci-badge.ci-d-badge-color-warning,
.ci-element[disabled='disabled'] .ci-badge.ci-d-badge-color-warning, .ci-element:disabled .ci-badge.ci-d-badge-color-warning,
*.disabled > .ci-badge.ci-xs-d-badge-color-warning, *:disabled > .ci-badge.ci-xs-d-badge-color-warning,
*[disabled='disabled'] > .ci-badge.ci-xs-d-badge-color-warning, .ci-element.disabled .ci-badge.ci-xs-d-badge-color-warning,
.ci-element[disabled='disabled'] .ci-badge.ci-xs-d-badge-color-warning, .ci-element:disabled .ci-badge.ci-xs-d-badge-color-warning {
    background-color: #FFE24B;
    color: #212529;
}

*.disabled > .ci-badge.ci-d-badge-color-danger, *:disabled > .ci-badge.ci-d-badge-color-danger,
*[disabled='disabled'] > .ci-badge.ci-d-badge-color-danger, .ci-element.disabled .ci-badge.ci-d-badge-color-danger,
.ci-element[disabled='disabled'] .ci-badge.ci-d-badge-color-danger, .ci-element:disabled .ci-badge.ci-d-badge-color-danger,
*.disabled > .ci-badge.ci-xs-d-badge-color-danger, *:disabled > .ci-badge.ci-xs-d-badge-color-danger,
*[disabled='disabled'] > .ci-badge.ci-xs-d-badge-color-danger, .ci-element.disabled .ci-badge.ci-xs-d-badge-color-danger,
.ci-element[disabled='disabled'] .ci-badge.ci-xs-d-badge-color-danger, .ci-element:disabled .ci-badge.ci-xs-d-badge-color-danger {
    background-color: #D83F3F;
    color: #ffffff;
}
/* #endregion Disabled */
@media (min-width: 576px) {
    /* #region Regular */
    .ci-badge.ci-sm-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    .ci-badge.ci-sm-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    .ci-badge.ci-sm-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }

    .ci-badge.ci-sm-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    .ci-badge.ci-sm-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    .ci-badge.ci-sm-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Regular */
    /* #region Active */
    *.active > .ci-badge.ci-sm-a-badge-color-base, .ci-element.active .ci-badge.ci-sm-a-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    *.active > .ci-badge.ci-sm-a-badge-color-alt, .ci-element.active .ci-badge.ci-sm-a-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    *.active > .ci-badge.ci-sm-a-badge-color-primary, .ci-element.active .ci-badge.ci-sm-a-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }

    *.active > .ci-badge.ci-sm-a-badge-color-success, .ci-element.active .ci-badge.ci-sm-a-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    *.active > .ci-badge.ci-sm-a-badge-color-warning, .ci-element.active .ci-badge.ci-sm-a-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    *.active > .ci-badge.ci-sm-a-badge-color-danger, .ci-element.active .ci-badge.ci-sm-a-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Active */
    /* #region Hover */
    *:hover > .ci-badge.ci-sm-h-badge-color-base, .ci-element:hover .ci-badge.ci-sm-h-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    *:hover > .ci-badge.ci-sm-h-badge-color-alt, .ci-element:hover .ci-badge.ci-sm-h-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    *:hover > .ci-badge.ci-sm-h-badge-color-primary, .ci-element:hover .ci-badge.ci-sm-h-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }

    *:hover > .ci-badge.ci-sm-h-badge-color-success, .ci-element:hover .ci-badge.ci-sm-h-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    *:hover > .ci-badge.ci-sm-h-badge-color-warning, .ci-element:hover .ci-badge.ci-sm-h-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    *:hover > .ci-badge.ci-sm-h-badge-color-danger, .ci-element:hover .ci-badge.ci-sm-h-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Hover */
    /* #region Press */
    *:active > .ci-badge.ci-sm-p-badge-color-base, .ci-element:active .ci-badge.ci-sm-p-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    *:active > .ci-badge.ci-sm-p-badge-color-alt, .ci-element:active .ci-badge.ci-sm-p-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    *:active > .ci-badge.ci-sm-p-badge-color-primary, .ci-element:active .ci-badge.ci-sm-p-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }

    *:active > .ci-badge.ci-sm-p-badge-color-success, .ci-element:active .ci-badge.ci-sm-p-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    *:active > .ci-badge.ci-sm-p-badge-color-warning, .ci-element:active .ci-badge.ci-sm-p-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    *:active > .ci-badge.ci-sm-p-badge-color-danger, .ci-element:active .ci-badge.ci-sm-p-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Press */
    /* #region Disabled */

    *.disabled > .ci-badge.ci-sm-d-badge-color-base, *:disabled > .ci-badge.ci-sm-d-badge-color-base,
    *[disabled='disabled'] > .ci-badge.ci-sm-d-badge-color-base, .ci-element.disabled .ci-badge.ci-sm-d-badge-color-base,
    .ci-element[disabled='disabled'] .ci-badge.ci-sm-d-badge-color-base, .ci-element:disabled .ci-badge.ci-sm-d-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    *.disabled > .ci-badge.ci-sm-d-badge-color-alt, *:disabled > .ci-badge.ci-sm-d-badge-color-alt,
    *[disabled='disabled'] > .ci-badge.ci-sm-d-badge-color-alt, .ci-element.disabled .ci-badge.ci-sm-d-badge-color-alt,
    .ci-element[disabled='disabled'] .ci-badge.ci-sm-d-badge-color-alt, .ci-element:disabled .ci-badge.ci-sm-d-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    *.disabled > .ci-badge.ci-sm-d-badge-color-primary, *:disabled > .ci-badge.ci-sm-d-badge-color-primary,
    *[disabled='disabled'] > .ci-badge.ci-sm-d-badge-color-primary, .ci-element.disabled .ci-badge.ci-sm-d-badge-color-primary,
    .ci-element[disabled='disabled'] .ci-badge.ci-sm-d-badge-color-primary, .ci-element:disabled .ci-badge.ci-sm-d-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }

    *.disabled > .ci-badge.ci-sm-d-badge-color-success, *:disabled > .ci-badge.ci-sm-d-badge-color-success,
    *[disabled='disabled'] > .ci-badge.ci-sm-d-badge-color-success, .ci-element.disabled .ci-badge.ci-sm-d-badge-color-success,
    .ci-element[disabled='disabled'] .ci-badge.ci-sm-d-badge-color-success, .ci-element:disabled .ci-badge.ci-sm-d-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    *.disabled > .ci-badge.ci-sm-d-badge-color-warning, *:disabled > .ci-badge.ci-sm-d-badge-color-warning,
    *[disabled='disabled'] > .ci-badge.ci-sm-d-badge-color-warning, .ci-element.disabled .ci-badge.ci-sm-d-badge-color-warning,
    .ci-element[disabled='disabled'] .ci-badge.ci-sm-d-badge-color-warning, .ci-element:disabled .ci-badge.ci-sm-d-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    *.disabled > .ci-badge.ci-sm-d-badge-color-danger, *:disabled > .ci-badge.ci-sm-d-badge-color-danger,
    *[disabled='disabled'] > .ci-badge.ci-sm-d-badge-color-danger, .ci-element.disabled .ci-badge.ci-sm-d-badge-color-danger,
    .ci-element[disabled='disabled'] .ci-badge.ci-sm-d-badge-color-danger, .ci-element:disabled .ci-badge.ci-sm-d-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Disabled */
}
@media (min-width: 768px) {
    /* #region Regular */
    .ci-badge.ci-md-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    .ci-badge.ci-md-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    .ci-badge.ci-md-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }

    .ci-badge.ci-md-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    .ci-badge.ci-md-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    .ci-badge.ci-md-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Regular */
    /* #region Active */
    *.active > .ci-badge.ci-md-a-badge-color-base, .ci-element.active .ci-badge.ci-md-a-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    *.active > .ci-badge.ci-md-a-badge-color-alt, .ci-element.active .ci-badge.ci-md-a-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    *.active > .ci-badge.ci-md-a-badge-color-primary, .ci-element.active .ci-badge.ci-md-a-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }

    *.active > .ci-badge.ci-md-a-badge-color-success, .ci-element.active .ci-badge.ci-md-a-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    *.active > .ci-badge.ci-md-a-badge-color-warning, .ci-element.active .ci-badge.ci-md-a-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    *.active > .ci-badge.ci-md-a-badge-color-danger, .ci-element.active .ci-badge.ci-md-a-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Active */
    /* #region Hover */
    *:hover > .ci-badge.ci-md-h-badge-color-base, .ci-element:hover .ci-badge.ci-md-h-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    *:hover > .ci-badge.ci-md-h-badge-color-alt, .ci-element:hover .ci-badge.ci-md-h-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    *:hover > .ci-badge.ci-md-h-badge-color-primary, .ci-element:hover .ci-badge.ci-md-h-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }

    *:hover > .ci-badge.ci-md-h-badge-color-success, .ci-element:hover .ci-badge.ci-md-h-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    *:hover > .ci-badge.ci-md-h-badge-color-warning, .ci-element:hover .ci-badge.ci-md-h-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    *:hover > .ci-badge.ci-md-h-badge-color-danger, .ci-element:hover .ci-badge.ci-md-h-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Hover */
    /* #region Press */
    *:active > .ci-badge.ci-md-p-badge-color-base, .ci-element:active .ci-badge.ci-md-p-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    *:active > .ci-badge.ci-md-p-badge-color-alt, .ci-element:active .ci-badge.ci-md-p-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    *:active > .ci-badge.ci-md-p-badge-color-primary, .ci-element:active .ci-badge.ci-md-p-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }

    *:active > .ci-badge.ci-md-p-badge-color-success, .ci-element:active .ci-badge.ci-md-p-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    *:active > .ci-badge.ci-md-p-badge-color-warning, .ci-element:active .ci-badge.ci-md-p-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    *:active > .ci-badge.ci-md-p-badge-color-danger, .ci-element:active .ci-badge.ci-md-p-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Press */
    /* #region Disabled */

    *.disabled > .ci-badge.ci-md-d-badge-color-base, *:disabled > .ci-badge.ci-md-d-badge-color-base,
    *[disabled='disabled'] > .ci-badge.ci-md-d-badge-color-base, .ci-element.disabled .ci-badge.ci-md-d-badge-color-base,
    .ci-element[disabled='disabled'] .ci-badge.ci-md-d-badge-color-base, .ci-element:disabled .ci-badge.ci-md-d-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    *.disabled > .ci-badge.ci-md-d-badge-color-alt, *:disabled > .ci-badge.ci-md-d-badge-color-alt,
    *[disabled='disabled'] > .ci-badge.ci-md-d-badge-color-alt, .ci-element.disabled .ci-badge.ci-md-d-badge-color-alt,
    .ci-element[disabled='disabled'] .ci-badge.ci-md-d-badge-color-alt, .ci-element:disabled .ci-badge.ci-md-d-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    *.disabled > .ci-badge.ci-md-d-badge-color-primary, *:disabled > .ci-badge.ci-md-d-badge-color-primary,
    *[disabled='disabled'] > .ci-badge.ci-md-d-badge-color-primary, .ci-element.disabled .ci-badge.ci-md-d-badge-color-primary,
    .ci-element[disabled='disabled'] .ci-badge.ci-md-d-badge-color-primary, .ci-element:disabled .ci-badge.ci-md-d-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }

    *.disabled > .ci-badge.ci-md-d-badge-color-success, *:disabled > .ci-badge.ci-md-d-badge-color-success,
    *[disabled='disabled'] > .ci-badge.ci-md-d-badge-color-success, .ci-element.disabled .ci-badge.ci-md-d-badge-color-success,
    .ci-element[disabled='disabled'] .ci-badge.ci-md-d-badge-color-success, .ci-element:disabled .ci-badge.ci-md-d-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    *.disabled > .ci-badge.ci-md-d-badge-color-warning, *:disabled > .ci-badge.ci-md-d-badge-color-warning,
    *[disabled='disabled'] > .ci-badge.ci-md-d-badge-color-warning, .ci-element.disabled .ci-badge.ci-md-d-badge-color-warning,
    .ci-element[disabled='disabled'] .ci-badge.ci-md-d-badge-color-warning, .ci-element:disabled .ci-badge.ci-md-d-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    *.disabled > .ci-badge.ci-md-d-badge-color-danger, *:disabled > .ci-badge.ci-md-d-badge-color-danger,
    *[disabled='disabled'] > .ci-badge.ci-md-d-badge-color-danger, .ci-element.disabled .ci-badge.ci-md-d-badge-color-danger,
    .ci-element[disabled='disabled'] .ci-badge.ci-md-d-badge-color-danger, .ci-element:disabled .ci-badge.ci-md-d-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Disabled */
}

@media (min-width: 992px) {
    /* #region Regular */
    .ci-badge.ci-lg-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    .ci-badge.ci-lg-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    .ci-badge.ci-lg-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }


    .ci-badge.ci-lg-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    .ci-badge.ci-lg-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    .ci-badge.ci-lg-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Regular */
    /* #region Active */
    *.active > .ci-badge.ci-lg-a-badge-color-base, .ci-element.active .ci-badge.ci-lg-a-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    *.active > .ci-badge.ci-lg-a-badge-color-alt, .ci-element.active .ci-badge.ci-lg-a-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    *.active > .ci-badge.ci-lg-a-badge-color-primary, .ci-element.active .ci-badge.ci-lg-a-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }


    *.active > .ci-badge.ci-lg-a-badge-color-success, .ci-element.active .ci-badge.ci-lg-a-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    *.active > .ci-badge.ci-lg-a-badge-color-warning, .ci-element.active .ci-badge.ci-lg-a-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    *.active > .ci-badge.ci-lg-a-badge-color-danger, .ci-element.active .ci-badge.ci-lg-a-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Active */
    /* #region Hover */
    *:hover > .ci-badge.ci-lg-h-badge-color-base, .ci-element:hover .ci-badge.ci-lg-h-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    *:hover > .ci-badge.ci-lg-h-badge-color-alt, .ci-element:hover .ci-badge.ci-lg-h-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    *:hover > .ci-badge.ci-lg-h-badge-color-primary, .ci-element:hover .ci-badge.ci-lg-h-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }

    *:hover > .ci-badge.ci-lg-h-badge-color-success, .ci-element:hover .ci-badge.ci-lg-h-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    *:hover > .ci-badge.ci-lg-h-badge-color-warning, .ci-element:hover .ci-badge.ci-lg-h-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    *:hover > .ci-badge.ci-lg-h-badge-color-danger, .ci-element:hover .ci-badge.ci-lg-h-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Hover */
    /* #region Press */
    *:active > .ci-badge.ci-lg-p-badge-color-base, .ci-element:active .ci-badge.ci-lg-p-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    *:active > .ci-badge.ci-lg-p-badge-color-alt, .ci-element:active .ci-badge.ci-lg-p-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    *:active > .ci-badge.ci-lg-p-badge-color-primary, .ci-element:active .ci-badge.ci-lg-p-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }

    *:active > .ci-badge.ci-lg-p-badge-color-success, .ci-element:active .ci-badge.ci-lg-p-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    *:active > .ci-badge.ci-lg-p-badge-color-warning, .ci-element:active .ci-badge.ci-lg-p-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    *:active > .ci-badge.ci-lg-p-badge-color-danger, .ci-element:active .ci-badge.ci-lg-p-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Press */
    /* #region Disabled */

    *.disabled > .ci-badge.ci-lg-d-badge-color-base, *:disabled > .ci-badge.ci-lg-d-badge-color-base,
    *[disabled='disabled'] > .ci-badge.ci-lg-d-badge-color-base, .ci-element.disabled .ci-badge.ci-lg-d-badge-color-base,
    .ci-element[disabled='disabled'] .ci-badge.ci-lg-d-badge-color-base, .ci-element:disabled .ci-badge.ci-lg-d-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    *.disabled > .ci-badge.ci-lg-d-badge-color-alt, *:disabled > .ci-badge.ci-lg-d-badge-color-alt,
    *[disabled='disabled'] > .ci-badge.ci-lg-d-badge-color-alt, .ci-element.disabled .ci-badge.ci-lg-d-badge-color-alt,
    .ci-element[disabled='disabled'] .ci-badge.ci-lg-d-badge-color-alt, .ci-element:disabled .ci-badge.ci-lg-d-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    *.disabled > .ci-badge.ci-lg-d-badge-color-primary, *:disabled > .ci-badge.ci-lg-d-badge-color-primary,
    *[disabled='disabled'] > .ci-badge.ci-lg-d-badge-color-primary, .ci-element.disabled .ci-badge.ci-lg-d-badge-color-primary,
    .ci-element[disabled='disabled'] .ci-badge.ci-lg-d-badge-color-primary, .ci-element:disabled .ci-badge.ci-lg-d-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }

    *.disabled > .ci-badge.ci-lg-d-badge-color-success, *:disabled > .ci-badge.ci-lg-d-badge-color-success,
    *[disabled='disabled'] > .ci-badge.ci-lg-d-badge-color-success, .ci-element.disabled .ci-badge.ci-lg-d-badge-color-success,
    .ci-element[disabled='disabled'] .ci-badge.ci-lg-d-badge-color-success, .ci-element:disabled .ci-badge.ci-lg-d-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    *.disabled > .ci-badge.ci-lg-d-badge-color-warning, *:disabled > .ci-badge.ci-lg-d-badge-color-warning,
    *[disabled='disabled'] > .ci-badge.ci-lg-d-badge-color-warning, .ci-element.disabled .ci-badge.ci-lg-d-badge-color-warning,
    .ci-element[disabled='disabled'] .ci-badge.ci-lg-d-badge-color-warning, .ci-element:disabled .ci-badge.ci-lg-d-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    *.disabled > .ci-badge.ci-lg-d-badge-color-danger, *:disabled > .ci-badge.ci-lg-d-badge-color-danger,
    *[disabled='disabled'] > .ci-badge.ci-lg-d-badge-color-danger, .ci-element.disabled .ci-badge.ci-lg-d-badge-color-danger,
    .ci-element[disabled='disabled'] .ci-badge.ci-lg-d-badge-color-danger, .ci-element:disabled .ci-badge.ci-lg-d-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Disabled */
}

@media (min-width: 1200px) {
    /* #region Regular */
    .ci-badge.ci-xl-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    .ci-badge.ci-xl-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    .ci-badge.ci-xl-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }

    .ci-badge.ci-xl-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    .ci-badge.ci-xl-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    .ci-badge.ci-xl-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Regular */
    /* #region Active */
    *.active > .ci-badge.ci-xl-a-badge-color-base, .ci-element.active .ci-badge.ci-xl-a-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    *.active > .ci-badge.ci-xl-a-badge-color-alt, .ci-element.active .ci-badge.ci-xl-a-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    *.active > .ci-badge.ci-xl-a-badge-color-primary, .ci-element.active .ci-badge.ci-xl-a-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }

    *.active > .ci-badge.ci-xl-a-badge-color-success, .ci-element.active .ci-badge.ci-xl-a-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    *.active > .ci-badge.ci-xl-a-badge-color-warning, .ci-element.active .ci-badge.ci-xl-a-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    *.active > .ci-badge.ci-xl-a-badge-color-danger, .ci-element.active .ci-badge.ci-xl-a-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Active */
    /* #region Hover */
    *:hover > .ci-badge.ci-xl-h-badge-color-base, .ci-element:hover .ci-badge.ci-xl-h-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    *:hover > .ci-badge.ci-xl-h-badge-color-alt, .ci-element:hover .ci-badge.ci-xl-h-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    *:hover > .ci-badge.ci-xl-h-badge-color-primary, .ci-element:hover .ci-badge.ci-xl-h-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }
    *:hover > .ci-badge.ci-xl-h-badge-color-success, .ci-element:hover .ci-badge.ci-xl-h-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    *:hover > .ci-badge.ci-xl-h-badge-color-warning, .ci-element:hover .ci-badge.ci-xl-h-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    *:hover > .ci-badge.ci-xl-h-badge-color-danger, .ci-element:hover .ci-badge.ci-xl-h-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Hover */
    /* #region Press */
    *:active > .ci-badge.ci-xl-p-badge-color-base, .ci-element:active .ci-badge.ci-xl-p-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    *:active > .ci-badge.ci-xl-p-badge-color-alt, .ci-element:active .ci-badge.ci-xl-p-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    *:active > .ci-badge.ci-xl-p-badge-color-primary, .ci-element:active .ci-badge.ci-xl-p-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }

    *:active > .ci-badge.ci-xl-p-badge-color-success, .ci-element:active .ci-badge.ci-xl-p-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    *:active > .ci-badge.ci-xl-p-badge-color-warning, .ci-element:active .ci-badge.ci-xl-p-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    *:active > .ci-badge.ci-xl-p-badge-color-danger, .ci-element:active .ci-badge.ci-xl-p-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Press */
    /* #region Disabled */

    *.disabled > .ci-badge.ci-xl-d-badge-color-base, *:disabled > .ci-badge.ci-xl-d-badge-color-base,
    *[disabled='disabled'] > .ci-badge.ci-xl-d-badge-color-base, .ci-element.disabled .ci-badge.ci-xl-d-badge-color-base,
    .ci-element[disabled='disabled'] .ci-badge.ci-xl-d-badge-color-base, .ci-element:disabled .ci-badge.ci-xl-d-badge-color-base {
        background-color: #212529;
        color: #ffffff;
    }

    *.disabled > .ci-badge.ci-xl-d-badge-color-alt, *:disabled > .ci-badge.ci-xl-d-badge-color-alt,
    *[disabled='disabled'] > .ci-badge.ci-xl-d-badge-color-alt, .ci-element.disabled .ci-badge.ci-xl-d-badge-color-alt,
    .ci-element[disabled='disabled'] .ci-badge.ci-xl-d-badge-color-alt, .ci-element:disabled .ci-badge.ci-xl-d-badge-color-alt {
        background-color: #ffffff;
        color: #212529;
    }

    *.disabled > .ci-badge.ci-xl-d-badge-color-primary, *:disabled > .ci-badge.ci-xl-d-badge-color-primary,
    *[disabled='disabled'] > .ci-badge.ci-xl-d-badge-color-primary, .ci-element.disabled .ci-badge.ci-xl-d-badge-color-primary,
    .ci-element[disabled='disabled'] .ci-badge.ci-xl-d-badge-color-primary, .ci-element:disabled .ci-badge.ci-xl-d-badge-color-primary {
        background-color: #5DAA80;
        color: #ffffff;
    }


    *.disabled > .ci-badge.ci-xl-d-badge-color-success, *:disabled > .ci-badge.ci-xl-d-badge-color-success,
    *[disabled='disabled'] > .ci-badge.ci-xl-d-badge-color-success, .ci-element.disabled .ci-badge.ci-xl-d-badge-color-success,
    .ci-element[disabled='disabled'] .ci-badge.ci-xl-d-badge-color-success, .ci-element:disabled .ci-badge.ci-xl-d-badge-color-success {
        background-color: #28A745;
        color: #ffffff;
    }

    *.disabled > .ci-badge.ci-xl-d-badge-color-warning, *:disabled > .ci-badge.ci-xl-d-badge-color-warning,
    *[disabled='disabled'] > .ci-badge.ci-xl-d-badge-color-warning, .ci-element.disabled .ci-badge.ci-xl-d-badge-color-warning,
    .ci-element[disabled='disabled'] .ci-badge.ci-xl-d-badge-color-warning, .ci-element:disabled .ci-badge.ci-xl-d-badge-color-warning {
        background-color: #ff7043;
        color: #212529;
    }

    *.disabled > .ci-badge.ci-xl-d-badge-color-danger, *:disabled > .ci-badge.ci-xl-d-badge-color-danger,
    *[disabled='disabled'] > .ci-badge.ci-xl-d-badge-color-danger, .ci-element.disabled .ci-badge.ci-xl-d-badge-color-danger,
    .ci-element[disabled='disabled'] .ci-badge.ci-xl-d-badge-color-danger, .ci-element:disabled .ci-badge.ci-xl-d-badge-color-danger {
        background-color: #D83F3F;
        color: #ffffff;
    }
    /* #endregion Disabled */
}
/* #endregion ---- Badge Color -------- */
/* #region  ---- Badge Position ------- */
/* #region Regular */
.ci-badge.ci-badge-position-t, .ci-badge.ci-xs-badge-position-t {
    top: -10%;
    left: calc(50% - 0.25em);
    bottom: auto;
    right: auto;
}

.ci-badge.ci-badge-position-b, .ci-badge.ci-xs-badge-position-b {
    top: auto;
    left: calc(50% - 0.25em);
    bottom: -10%;
    right: auto;
}

.ci-badge.ci-badge-position-l, .ci-badge.ci-xs-badge-position-l {
    top: calc(50% - 0.25em);
    left: -10%;
    bottom: auto;
    right: auto;
}

.ci-badge.ci-badge-position-r, .ci-badge.ci-xs-badge-position-r {
    top: calc(50% - 0.25em);
    left: auto;
    bottom: auto;
    right: -10%;
}

.ci-badge.ci-badge-position-c, .ci-badge.ci-xs-badge-position-c {
    top: calc(50% - 0.25em);
    left: calc(50% - 0.25em);
    bottom: auto;
    right: auto;
}

.ci-badge.ci-badge-position-tl, .ci-badge.ci-xs-badge-position-tl {
    top: -10%;
    left: -10%;
    bottom: auto;
    right: auto;
}

.ci-badge.ci-badge-position-tr, .ci-badge.ci-xs-badge-position-tr {
    top: -10%;
    left: auto;
    bottom: auto;
    right: -10%;
}

.ci-badge.ci-badge-position-bl, .ci-badge.ci-xs-badge-position-bl {
    top: auto;
    left: -10%;
    bottom: -10%;
    right: auto;
}

.ci-badge.ci-badge-position-br, .ci-badge.ci-xs-badge-position-br {
    top: auto;
    left: auto;
    bottom: -10%;
    right: -10%;
}
/* #endregion Regular */
/* #region Active */
*.active > .ci-badge.ci-a-badge-position-t, .ci-element.active .ci-badge.ci-a-badge-position-t,
*.active > .ci-badge.ci-xs-a-badge-position-t, .ci-element.active .ci-badge.ci-xs-a-badge-position-t {
    top: -10%;
    left: calc(50% - 0.25em);
    bottom: auto;
    right: auto;
}

*.active > .ci-badge.ci-a-badge-position-b, .ci-element.active .ci-badge.ci-a-badge-position-b,
*.active > .ci-badge.ci-xs-a-badge-position-b, .ci-element.active .ci-badge.ci-xs-a-badge-position-b {
    top: auto;
    left: calc(50% - 0.25em);
    bottom: -10%;
    right: auto;
}

*.active > .ci-badge.ci-a-badge-position-l, .ci-element.active .ci-badge.ci-a-badge-position-l,
*.active > .ci-badge.ci-xs-a-badge-position-l, .ci-element.active .ci-badge.ci-xs-a-badge-position-l {
    top: calc(50% - 0.25em);
    left: -10%;
    bottom: auto;
    right: auto;
}

*.active > .ci-badge.ci-a-badge-position-r, .ci-element.active .ci-badge.ci-a-badge-position-r,
*.active > .ci-badge.ci-xs-a-badge-position-r, .ci-element.active .ci-badge.ci-xs-a-badge-position-r {
    top: calc(50% - 0.25em);
    left: auto;
    bottom: auto;
    right: -10%;
}

*.active > .ci-badge.ci-a-badge-position-c, .ci-element.active .ci-badge.ci-a-badge-position-c,
*.active > .ci-badge.ci-xs-a-badge-position-c, .ci-element.active .ci-badge.ci-xs-a-badge-position-c {
    top: calc(50% - 0.25em);
    left: calc(50% - 0.25em);
    bottom: auto;
    right: auto;
}

*.active > .ci-badge.ci-a-badge-position-tl, .ci-element.active .ci-badge.ci-a-badge-position-tl,
*.active > .ci-badge.ci-xs-a-badge-position-tl, .ci-element.active .ci-badge.ci-xs-a-badge-position-tl {
    top: -10%;
    left: -10%;
    bottom: auto;
    right: auto;
}

*.active > .ci-badge.ci-a-badge-position-tr, .ci-element.active .ci-badge.ci-a-badge-position-tr,
*.active > .ci-badge.ci-xs-a-badge-position-tr, .ci-element.active .ci-badge.ci-xs-a-badge-position-tr {
    top: -10%;
    left: auto;
    bottom: auto;
    right: -10%;
}

*.active > .ci-badge.ci-a-badge-position-bl, .ci-element.active .ci-badge.ci-a-badge-position-bl,
*.active > .ci-badge.ci-xs-a-badge-position-bl, .ci-element.active .ci-badge.ci-xs-a-badge-position-bl {
    top: auto;
    left: -10%;
    bottom: -10%;
    right: auto;
}

*.active > .ci-badge.ci-a-badge-position-br, .ci-element.active .ci-badge.ci-a-badge-position-br,
*.active > .ci-badge.ci-xs-a-badge-position-br, .ci-element.active .ci-badge.ci-xs-a-badge-position-br {
    top: auto;
    left: auto;
    bottom: -10%;
    right: -10%;
}
/* #endregion Active */
/* #region Hover */
*:hover > .ci-badge.ci-h-badge-position-t, .ci-element:hover .ci-badge.ci-h-badge-position-t,
*:hover > .ci-badge.ci-xs-h-badge-position-t, .ci-element:hover .ci-badge.ci-xs-h-badge-position-t {
    top: -10%;
    left: calc(50% - 0.25em);
    bottom: auto;
    right: auto;
}

*:hover > .ci-badge.ci-h-badge-position-b, .ci-element:hover .ci-badge.ci-h-badge-position-b,
*:hover > .ci-badge.ci-xs-h-badge-position-b, .ci-element:hover .ci-badge.ci-xs-h-badge-position-b {
    top: auto;
    left: calc(50% - 0.25em);
    bottom: -10%;
    right: auto;
}

*:hover > .ci-badge.ci-h-badge-position-l, .ci-element:hover .ci-badge.ci-h-badge-position-l,
*:hover > .ci-badge.ci-xs-h-badge-position-l, .ci-element:hover .ci-badge.ci-xs-h-badge-position-l {
    top: calc(50% - 0.25em);
    left: -10%;
    bottom: auto;
    right: auto;
}

*:hover > .ci-badge.ci-h-badge-position-r, .ci-element:hover .ci-badge.ci-h-badge-position-r,
*:hover > .ci-badge.ci-xs-h-badge-position-r, .ci-element:hover .ci-badge.ci-xs-h-badge-position-r {
    top: calc(50% - 0.25em);
    left: auto;
    bottom: auto;
    right: -10%;
}

*:hover > .ci-badge.ci-h-badge-position-c, .ci-element:hover .ci-badge.ci-h-badge-position-c,
*:hover > .ci-badge.ci-xs-h-badge-position-c, .ci-element:hover .ci-badge.ci-xs-h-badge-position-c {
    top: calc(50% - 0.25em);
    left: calc(50% - 0.25em);
    bottom: auto;
    right: auto;
}

*:hover > .ci-badge.ci-h-badge-position-tl, .ci-element:hover .ci-badge.ci-h-badge-position-tl,
*:hover > .ci-badge.ci-xs-h-badge-position-tl, .ci-element:hover .ci-badge.ci-xs-h-badge-position-tl {
    top: -10%;
    left: -10%;
    bottom: auto;
    right: auto;
}

*:hover > .ci-badge.ci-h-badge-position-tr, .ci-element:hover .ci-badge.ci-h-badge-position-tr,
*:hover > .ci-badge.ci-xs-h-badge-position-tr, .ci-element:hover .ci-badge.ci-xs-h-badge-position-tr {
    top: -10%;
    left: auto;
    bottom: auto;
    right: -10%;
}

*:hover > .ci-badge.ci-h-badge-position-bl, .ci-element:hover .ci-badge.ci-h-badge-position-bl,
*:hover > .ci-badge.ci-xs-h-badge-position-bl, .ci-element:hover .ci-badge.ci-xs-h-badge-position-bl {
    top: auto;
    left: -10%;
    bottom: -10%;
    right: auto;
}

*:hover > .ci-badge.ci-h-badge-position-br, .ci-element:hover .ci-badge.ci-h-badge-position-br,
*:hover > .ci-badge.ci-xs-h-badge-position-br, .ci-element:hover .ci-badge.ci-xs-h-badge-position-br {
    top: auto;
    left: auto;
    bottom: -10%;
    right: -10%;
}
/* #endregion Hover */
/* #region Press */
*:active > .ci-badge.ci-p-badge-position-t, .ci-element:active .ci-badge.ci-p-badge-position-t,
*:active > .ci-badge.ci-xs-p-badge-position-t, .ci-element:active .ci-badge.ci-xs-p-badge-position-t {
    top: -10%;
    left: calc(50% - 0.25em);
    bottom: auto;
    right: auto;
}

*:active > .ci-badge.ci-p-badge-position-b, .ci-element:active .ci-badge.ci-p-badge-position-b,
*:active > .ci-badge.ci-xs-p-badge-position-b, .ci-element:active .ci-badge.ci-xs-p-badge-position-b {
    top: auto;
    left: calc(50% - 0.25em);
    bottom: -10%;
    right: auto;
}

*:active > .ci-badge.ci-p-badge-position-l, .ci-element:active .ci-badge.ci-p-badge-position-l,
*:active > .ci-badge.ci-xs-p-badge-position-l, .ci-element:active .ci-badge.ci-xs-p-badge-position-l {
    top: calc(50% - 0.25em);
    left: -10%;
    bottom: auto;
    right: auto;
}

*:active > .ci-badge.ci-p-badge-position-r, .ci-element:active .ci-badge.ci-p-badge-position-r,
*:active > .ci-badge.ci-xs-p-badge-position-r, .ci-element:active .ci-badge.ci-xs-p-badge-position-r {
    top: calc(50% - 0.25em);
    left: auto;
    bottom: auto;
    right: -10%;
}

*:active > .ci-badge.ci-p-badge-position-c, .ci-element:active .ci-badge.ci-p-badge-position-c,
*:active > .ci-badge.ci-xs-p-badge-position-c, .ci-element:active .ci-badge.ci-xs-p-badge-position-c {
    top: calc(50% - 0.25em);
    left: calc(50% - 0.25em);
    bottom: auto;
    right: auto;
}

*:active > .ci-badge.ci-p-badge-position-tl, .ci-element:active .ci-badge.ci-p-badge-position-tl,
*:active > .ci-badge.ci-xs-p-badge-position-tl, .ci-element:active .ci-badge.ci-xs-p-badge-position-tl {
    top: -10%;
    left: -10%;
    bottom: auto;
    right: auto;
}

*:active > .ci-badge.ci-p-badge-position-tr, .ci-element:active .ci-badge.ci-p-badge-position-tr,
*:active > .ci-badge.ci-xs-p-badge-position-tr, .ci-element:active .ci-badge.ci-xs-p-badge-position-tr {
    top: -10%;
    left: auto;
    bottom: auto;
    right: -10%;
}

*:active > .ci-badge.ci-p-badge-position-bl, .ci-element:active .ci-badge.ci-p-badge-position-bl,
*:active > .ci-badge.ci-xs-p-badge-position-bl, .ci-element:active .ci-badge.ci-xs-p-badge-position-bl {
    top: auto;
    left: -10%;
    bottom: -10%;
    right: auto;
}

*:active > .ci-badge.ci-p-badge-position-br, .ci-element:active .ci-badge.ci-p-badge-position-br,
*:active > .ci-badge.ci-xs-p-badge-position-br, .ci-element:active .ci-badge.ci-xs-p-badge-position-br {
    top: auto;
    left: auto;
    bottom: -10%;
    right: -10%;
}
/* #endregion Press */
/* #region Disabled */
*.disabled > .ci-badge.ci-d-badge-position-t, *:disabled > .ci-badge.ci-d-badge-position-t,
*[disabled='disabled'] > .ci-badge.ci-d-badge-position-t, .ci-element.disabled .ci-badge.ci-d-badge-position-t,
.ci-element[disabled='disabled'] .ci-badge.ci-d-badge-position-t, .ci-element:disabled .ci-badge.ci-d-badge-position-t,
*.disabled > .ci-badge.ci-xs-d-badge-position-t, *:disabled > .ci-badge.ci-xs-d-badge-position-t,
*[disabled='disabled'] > .ci-badge.ci-xs-d-badge-position-t, .ci-element.disabled .ci-badge.ci-xs-d-badge-position-t,
.ci-element[disabled='disabled'] .ci-badge.ci-xs-d-badge-position-t, .ci-element:disabled .ci-badge.ci-xs-d-badge-position-t {
    top: -10%;
    left: calc(50% - 0.25em);
    bottom: auto;
    right: auto;
}

*.disabled > .ci-badge.ci-d-badge-position-b, *:disabled > .ci-badge.ci-d-badge-position-b,
*[disabled='disabled'] > .ci-badge.ci-d-badge-position-b, .ci-element.disabled .ci-badge.ci-d-badge-position-b,
.ci-element[disabled='disabled'] .ci-badge.ci-d-badge-position-b, .ci-element:disabled .ci-badge.ci-d-badge-position-b,
*.disabled > .ci-badge.ci-xs-d-badge-position-b, *:disabled > .ci-badge.ci-xs-d-badge-position-b,
*[disabled='disabled'] > .ci-badge.ci-xs-d-badge-position-b, .ci-element.disabled .ci-badge.ci-xs-d-badge-position-b,
.ci-element[disabled='disabled'] .ci-badge.ci-xs-d-badge-position-b, .ci-element:disabled .ci-badge.ci-xs-d-badge-position-b {
    top: auto;
    left: calc(50% - 0.25em);
    bottom: -10%;
    right: auto;
}

*.disabled > .ci-badge.ci-d-badge-position-l, *:disabled > .ci-badge.ci-d-badge-position-l,
*[disabled='disabled'] > .ci-badge.ci-d-badge-position-l, .ci-element.disabled .ci-badge.ci-d-badge-position-l,
.ci-element[disabled='disabled'] .ci-badge.ci-d-badge-position-l, .ci-element:disabled .ci-badge.ci-d-badge-position-l,
*.disabled > .ci-badge.ci-xs-d-badge-position-l, *:disabled > .ci-badge.ci-xs-d-badge-position-l,
*[disabled='disabled'] > .ci-badge.ci-xs-d-badge-position-l, .ci-element.disabled .ci-badge.ci-xs-d-badge-position-l,
.ci-element[disabled='disabled'] .ci-badge.ci-xs-d-badge-position-l, .ci-element:disabled .ci-badge.ci-xs-d-badge-position-l {
    top: calc(50% - 0.25em);
    left: -10%;
    bottom: auto;
    right: auto;
}

*.disabled > .ci-badge.ci-d-badge-position-r, *:disabled > .ci-badge.ci-d-badge-position-r,
*[disabled='disabled'] > .ci-badge.ci-d-badge-position-r, .ci-element.disabled .ci-badge.ci-d-badge-position-r,
.ci-element[disabled='disabled'] .ci-badge.ci-d-badge-position-r, .ci-element:disabled .ci-badge.ci-d-badge-position-r,
*.disabled > .ci-badge.ci-xs-d-badge-position-r, *:disabled > .ci-badge.ci-xs-d-badge-position-r,
*[disabled='disabled'] > .ci-badge.ci-xs-d-badge-position-r, .ci-element.disabled .ci-badge.ci-xs-d-badge-position-r,
.ci-element[disabled='disabled'] .ci-badge.ci-xs-d-badge-position-r, .ci-element:disabled .ci-badge.ci-xs-d-badge-position-r {
    top: calc(50% - 0.25em);
    left: auto;
    bottom: auto;
    right: -10%;
}

*.disabled > .ci-badge.ci-d-badge-position-c, *:disabled > .ci-badge.ci-d-badge-position-c,
*[disabled='disabled'] > .ci-badge.ci-d-badge-position-c, .ci-element.disabled .ci-badge.ci-d-badge-position-c,
.ci-element[disabled='disabled'] .ci-badge.ci-d-badge-position-c, .ci-element:disabled .ci-badge.ci-d-badge-position-c,
*.disabled > .ci-badge.ci-xs-d-badge-position-c, *:disabled > .ci-badge.ci-xs-d-badge-position-c,
*[disabled='disabled'] > .ci-badge.ci-xs-d-badge-position-c, .ci-element.disabled .ci-badge.ci-xs-d-badge-position-c,
.ci-element[disabled='disabled'] .ci-badge.ci-xs-d-badge-position-c, .ci-element:disabled .ci-badge.ci-xs-d-badge-position-c {
    top: calc(50% - 0.25em);
    left: calc(50% - 0.25em);
    bottom: auto;
    right: auto;
}

*.disabled > .ci-badge.ci-d-badge-position-tl, *:disabled > .ci-badge.ci-d-badge-position-tl,
*[disabled='disabled'] > .ci-badge.ci-d-badge-position-tl, .ci-element.disabled .ci-badge.ci-d-badge-position-tl,
.ci-element[disabled='disabled'] .ci-badge.ci-d-badge-position-tl, .ci-element:disabled .ci-badge.ci-d-badge-position-tl,
*.disabled > .ci-badge.ci-xs-d-badge-position-tl, *:disabled > .ci-badge.ci-xs-d-badge-position-tl,
*[disabled='disabled'] > .ci-badge.ci-xs-d-badge-position-tl, .ci-element.disabled .ci-badge.ci-xs-d-badge-position-tl,
.ci-element[disabled='disabled'] .ci-badge.ci-xs-d-badge-position-tl, .ci-element:disabled .ci-badge.ci-xs-d-badge-position-tl {
    top: -10%;
    left: -10%;
    bottom: auto;
    right: auto;
}

*.disabled > .ci-badge.ci-d-badge-position-tr, *:disabled > .ci-badge.ci-d-badge-position-tr,
*[disabled='disabled'] > .ci-badge.ci-d-badge-position-tr, .ci-element.disabled .ci-badge.ci-d-badge-position-tr,
.ci-element[disabled='disabled'] .ci-badge.ci-d-badge-position-tr, .ci-element:disabled .ci-badge.ci-d-badge-position-tr,
*.disabled > .ci-badge.ci-xs-d-badge-position-tr, *:disabled > .ci-badge.ci-xs-d-badge-position-tr,
*[disabled='disabled'] > .ci-badge.ci-xs-d-badge-position-tr, .ci-element.disabled .ci-badge.ci-xs-d-badge-position-tr,
.ci-element[disabled='disabled'] .ci-badge.ci-xs-d-badge-position-tr, .ci-element:disabled .ci-badge.ci-xs-d-badge-position-tr {
    top: -10%;
    left: auto;
    bottom: auto;
    right: -10%;
}

*.disabled > .ci-badge.ci-d-badge-position-bl, *:disabled > .ci-badge.ci-d-badge-position-bl,
*[disabled='disabled'] > .ci-badge.ci-d-badge-position-bl, .ci-element.disabled .ci-badge.ci-d-badge-position-bl,
.ci-element[disabled='disabled'] .ci-badge.ci-d-badge-position-bl, .ci-element:disabled .ci-badge.ci-d-badge-position-bl,
*.disabled > .ci-badge.ci-xs-d-badge-position-bl, *:disabled > .ci-badge.ci-xs-d-badge-position-bl,
*[disabled='disabled'] > .ci-badge.ci-xs-d-badge-position-bl, .ci-element.disabled .ci-badge.ci-xs-d-badge-position-bl,
.ci-element[disabled='disabled'] .ci-badge.ci-xs-d-badge-position-bl, .ci-element:disabled .ci-badge.ci-xs-d-badge-position-bl {
    top: auto;
    left: -10%;
    bottom: -10%;
    right: auto;
}

*.disabled > .ci-badge.ci-d-badge-position-br, *:disabled > .ci-badge.ci-d-badge-position-br,
*[disabled='disabled'] > .ci-badge.ci-d-badge-position-br, .ci-element.disabled .ci-badge.ci-d-badge-position-br,
.ci-element[disabled='disabled'] .ci-badge.ci-d-badge-position-br, .ci-element:disabled .ci-badge.ci-d-badge-position-br,
*.disabled > .ci-badge.ci-xs-d-badge-position-br, *:disabled > .ci-badge.ci-xs-d-badge-position-br,
*[disabled='disabled'] > .ci-badge.ci-xs-d-badge-position-br, .ci-element.disabled .ci-badge.ci-xs-d-badge-position-br,
.ci-element[disabled='disabled'] .ci-badge.ci-xs-d-badge-position-br, .ci-element:disabled .ci-badge.ci-xs-d-badge-position-br {
    top: auto;
    left: auto;
    bottom: -10%;
    right: -10%;
}
/* #endregion Disabled */
@media (min-width: 576px) {
    /* #region Regular */
    .ci-badge.ci-sm-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    .ci-badge.ci-sm-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    .ci-badge.ci-sm-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    .ci-badge.ci-sm-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    .ci-badge.ci-sm-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    .ci-badge.ci-sm-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    .ci-badge.ci-sm-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    .ci-badge.ci-sm-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    .ci-badge.ci-sm-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Regular */
    /* #region Active */
    *.active > .ci-badge.ci-sm-a-badge-position-t, .ci-element.active .ci-badge.ci-sm-a-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *.active > .ci-badge.ci-sm-a-badge-position-b, .ci-element.active .ci-badge.ci-sm-a-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    *.active > .ci-badge.ci-sm-a-badge-position-l, .ci-element.active .ci-badge.ci-sm-a-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *.active > .ci-badge.ci-sm-a-badge-position-r, .ci-element.active .ci-badge.ci-sm-a-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }


    *.active > .ci-badge.ci-sm-a-badge-position-c, .ci-element.active .ci-badge.ci-sm-a-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *.active > .ci-badge.ci-sm-a-badge-position-tl, .ci-element.active .ci-badge.ci-sm-a-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *.active > .ci-badge.ci-sm-a-badge-position-tr, .ci-element.active .ci-badge.ci-sm-a-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *.active > .ci-badge.ci-sm-a-badge-position-bl, .ci-element.active .ci-badge.ci-sm-a-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    *.active > .ci-badge.ci-sm-a-badge-position-br, .ci-element.active .ci-badge.ci-sm-a-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Active */
    /* #region Hover */
    *:hover > .ci-badge.ci-sm-h-badge-position-t, .ci-element:hover .ci-badge.ci-sm-h-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *:hover > .ci-badge.ci-sm-h-badge-position-b, .ci-element:hover .ci-badge.ci-sm-h-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    *:hover > .ci-badge.ci-sm-h-badge-position-l, .ci-element:hover .ci-badge.ci-sm-h-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *:hover > .ci-badge.ci-sm-h-badge-position-r, .ci-element:hover .ci-badge.ci-sm-h-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *:hover > .ci-badge.ci-sm-h-badge-position-c, .ci-element:hover .ci-badge.ci-sm-h-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *:hover > .ci-badge.ci-sm-h-badge-position-tl, .ci-element:hover .ci-badge.ci-sm-h-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *:hover > .ci-badge.ci-sm-h-badge-position-tr, .ci-element:hover .ci-badge.ci-sm-h-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *:hover > .ci-badge.ci-sm-h-badge-position-bl, .ci-element:hover .ci-badge.ci-sm-h-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    *:hover > .ci-badge.ci-sm-h-badge-position-br, .ci-element:hover .ci-badge.ci-sm-h-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Hover */
    /* #region Press */
    *:active > .ci-badge.ci-sm-p-badge-position-t, .ci-element:active .ci-badge.ci-sm-p-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *:active > .ci-badge.ci-sm-p-badge-position-b, .ci-element:active .ci-badge.ci-sm-p-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    *:active > .ci-badge.ci-sm-p-badge-position-l, .ci-element:active .ci-badge.ci-sm-p-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *:active > .ci-badge.ci-sm-p-badge-position-r, .ci-element:active .ci-badge.ci-sm-p-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *:active > .ci-badge.ci-sm-p-badge-position-c, .ci-element:active .ci-badge.ci-sm-p-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *:active > .ci-badge.ci-sm-p-badge-position-tl, .ci-element:active .ci-badge.ci-sm-p-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *:active > .ci-badge.ci-sm-p-badge-position-tr, .ci-element:active .ci-badge.ci-sm-p-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *:active > .ci-badge.ci-sm-p-badge-position-bl, .ci-element:active .ci-badge.ci-sm-p-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    *:active > .ci-badge.ci-sm-p-badge-position-br, .ci-element:active .ci-badge.ci-sm-p-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Press */
    /* #region Disabled */
    *.disabled > .ci-badge.ci-sm-d-badge-position-t, *:disabled > .ci-badge.ci-sm-d-badge-position-t,
    *[disabled='disabled'] > .ci-badge.ci-sm-d-badge-position-t, .ci-element.disabled .ci-badge.ci-sm-d-badge-position-t,
    .ci-element[disabled='disabled'] .ci-badge.ci-sm-d-badge-position-t, .ci-element:disabled .ci-badge.ci-sm-d-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *.disabled > .ci-badge.ci-sm-d-badge-position-b, *:disabled > .ci-badge.ci-sm-d-badge-position-b,
    *[disabled='disabled'] > .ci-badge.ci-sm-d-badge-position-b, .ci-element.disabled .ci-badge.ci-sm-d-badge-position-b,
    .ci-element[disabled='disabled'] .ci-badge.ci-sm-d-badge-position-b, .ci-element:disabled .ci-badge.ci-sm-d-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    *.disabled > .ci-badge.ci-sm-d-badge-position-l, *:disabled > .ci-badge.ci-sm-d-badge-position-l,
    *[disabled='disabled'] > .ci-badge.ci-sm-d-badge-position-l, .ci-element.disabled .ci-badge.ci-sm-d-badge-position-l,
    .ci-element[disabled='disabled'] .ci-badge.ci-sm-d-badge-position-l, .ci-element:disabled .ci-badge.ci-sm-d-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *.disabled > .ci-badge.ci-sm-d-badge-position-r, *:disabled > .ci-badge.ci-sm-d-badge-position-r,
    *[disabled='disabled'] > .ci-badge.ci-sm-d-badge-position-r, .ci-element.disabled .ci-badge.ci-sm-d-badge-position-r,
    .ci-element[disabled='disabled'] .ci-badge.ci-sm-d-badge-position-r, .ci-element:disabled .ci-badge.ci-sm-d-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *.disabled > .ci-badge.ci-sm-d-badge-position-c, *:disabled > .ci-badge.ci-sm-d-badge-position-c,
    *[disabled='disabled'] > .ci-badge.ci-sm-d-badge-position-c, .ci-element.disabled .ci-badge.ci-sm-d-badge-position-c,
    .ci-element[disabled='disabled'] .ci-badge.ci-sm-d-badge-position-c, .ci-element:disabled .ci-badge.ci-sm-d-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }


    *.disabled > .ci-badge.ci-sm-d-badge-position-tl, *:disabled > .ci-badge.ci-sm-d-badge-position-tl,
    *[disabled='disabled'] > .ci-badge.ci-sm-d-badge-position-tl, .ci-element.disabled .ci-badge.ci-sm-d-badge-position-tl,
    .ci-element[disabled='disabled'] .ci-badge.ci-sm-d-badge-position-tl, .ci-element:disabled .ci-badge.ci-sm-d-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *.disabled > .ci-badge.ci-sm-d-badge-position-tr, *:disabled > .ci-badge.ci-sm-d-badge-position-tr,
    *[disabled='disabled'] > .ci-badge.ci-sm-d-badge-position-tr, .ci-element.disabled .ci-badge.ci-sm-d-badge-position-tr,
    .ci-element[disabled='disabled'] .ci-badge.ci-sm-d-badge-position-tr, .ci-element:disabled .ci-badge.ci-sm-d-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *.disabled > .ci-badge.ci-sm-d-badge-position-bl, *:disabled > .ci-badge.ci-sm-d-badge-position-bl,
    *[disabled='disabled'] > .ci-badge.ci-sm-d-badge-position-bl, .ci-element.disabled .ci-badge.ci-sm-d-badge-position-bl,
    .ci-element[disabled='disabled'] .ci-badge.ci-sm-d-badge-position-bl, .ci-element:disabled .ci-badge.ci-sm-d-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    *.disabled > .ci-badge.ci-sm-d-badge-position-br, *:disabled > .ci-badge.ci-sm-d-badge-position-br,
    *[disabled='disabled'] > .ci-badge.ci-sm-d-badge-position-br, .ci-element.disabled .ci-badge.ci-sm-d-badge-position-br,
    .ci-element[disabled='disabled'] .ci-badge.ci-sm-d-badge-position-br, .ci-element:disabled .ci-badge.ci-sm-d-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Disabled */
}
@media (min-width: 768px) {
    /* #region Regular */
    .ci-badge.ci-md-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    .ci-badge.ci-md-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    .ci-badge.ci-md-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    .ci-badge.ci-md-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    .ci-badge.ci-md-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    .ci-badge.ci-md-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    .ci-badge.ci-md-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    .ci-badge.ci-md-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    .ci-badge.ci-md-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Regular */
    /* #region Active */
    *.active > .ci-badge.ci-md-a-badge-position-t, .ci-element.active .ci-badge.ci-md-a-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *.active > .ci-badge.ci-md-a-badge-position-b, .ci-element.active .ci-badge.ci-md-a-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    *.active > .ci-badge.ci-md-a-badge-position-l, .ci-element.active .ci-badge.ci-md-a-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *.active > .ci-badge.ci-md-a-badge-position-r, .ci-element.active .ci-badge.ci-md-a-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }


    *.active > .ci-badge.ci-md-a-badge-position-c, .ci-element.active .ci-badge.ci-md-a-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *.active > .ci-badge.ci-md-a-badge-position-tl, .ci-element.active .ci-badge.ci-md-a-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *.active > .ci-badge.ci-md-a-badge-position-tr, .ci-element.active .ci-badge.ci-md-a-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *.active > .ci-badge.ci-md-a-badge-position-bl, .ci-element.active .ci-badge.ci-md-a-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    *.active > .ci-badge.ci-md-a-badge-position-br, .ci-element.active .ci-badge.ci-md-a-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Active */
    /* #region Hover */
    *:hover > .ci-badge.ci-md-h-badge-position-t, .ci-element:hover .ci-badge.ci-md-h-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *:hover > .ci-badge.ci-md-h-badge-position-b, .ci-element:hover .ci-badge.ci-md-h-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    *:hover > .ci-badge.ci-md-h-badge-position-l, .ci-element:hover .ci-badge.ci-md-h-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *:hover > .ci-badge.ci-md-h-badge-position-r, .ci-element:hover .ci-badge.ci-md-h-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *:hover > .ci-badge.ci-md-h-badge-position-c, .ci-element:hover .ci-badge.ci-md-h-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *:hover > .ci-badge.ci-md-h-badge-position-tl, .ci-element:hover .ci-badge.ci-md-h-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *:hover > .ci-badge.ci-md-h-badge-position-tr, .ci-element:hover .ci-badge.ci-md-h-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *:hover > .ci-badge.ci-md-h-badge-position-bl, .ci-element:hover .ci-badge.ci-md-h-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    *:hover > .ci-badge.ci-md-h-badge-position-br, .ci-element:hover .ci-badge.ci-md-h-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Hover */
    /* #region Press */
    *:active > .ci-badge.ci-md-p-badge-position-t, .ci-element:active .ci-badge.ci-md-p-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *:active > .ci-badge.ci-md-p-badge-position-b, .ci-element:active .ci-badge.ci-md-p-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    *:active > .ci-badge.ci-md-p-badge-position-l, .ci-element:active .ci-badge.ci-md-p-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *:active > .ci-badge.ci-md-p-badge-position-r, .ci-element:active .ci-badge.ci-md-p-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *:active > .ci-badge.ci-md-p-badge-position-c, .ci-element:active .ci-badge.ci-md-p-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *:active > .ci-badge.ci-md-p-badge-position-tl, .ci-element:active .ci-badge.ci-md-p-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *:active > .ci-badge.ci-md-p-badge-position-tr, .ci-element:active .ci-badge.ci-md-p-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *:active > .ci-badge.ci-md-p-badge-position-bl, .ci-element:active .ci-badge.ci-md-p-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    *:active > .ci-badge.ci-md-p-badge-position-br, .ci-element:active .ci-badge.ci-md-p-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Press */
    /* #region Disabled */
    *.disabled > .ci-badge.ci-md-d-badge-position-t, *:disabled > .ci-badge.ci-md-d-badge-position-t,
    *[disabled='disabled'] > .ci-badge.ci-md-d-badge-position-t, .ci-element.disabled .ci-badge.ci-md-d-badge-position-t,
    .ci-element[disabled='disabled'] .ci-badge.ci-md-d-badge-position-t, .ci-element:disabled .ci-badge.ci-md-d-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *.disabled > .ci-badge.ci-md-d-badge-position-b, *:disabled > .ci-badge.ci-md-d-badge-position-b,
    *[disabled='disabled'] > .ci-badge.ci-md-d-badge-position-b, .ci-element.disabled .ci-badge.ci-md-d-badge-position-b,
    .ci-element[disabled='disabled'] .ci-badge.ci-md-d-badge-position-b, .ci-element:disabled .ci-badge.ci-md-d-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    *.disabled > .ci-badge.ci-md-d-badge-position-l, *:disabled > .ci-badge.ci-md-d-badge-position-l,
    *[disabled='disabled'] > .ci-badge.ci-md-d-badge-position-l, .ci-element.disabled .ci-badge.ci-md-d-badge-position-l,
    .ci-element[disabled='disabled'] .ci-badge.ci-md-d-badge-position-l, .ci-element:disabled .ci-badge.ci-md-d-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *.disabled > .ci-badge.ci-md-d-badge-position-r, *:disabled > .ci-badge.ci-md-d-badge-position-r,
    *[disabled='disabled'] > .ci-badge.ci-md-d-badge-position-r, .ci-element.disabled .ci-badge.ci-md-d-badge-position-r,
    .ci-element[disabled='disabled'] .ci-badge.ci-md-d-badge-position-r, .ci-element:disabled .ci-badge.ci-md-d-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *.disabled > .ci-badge.ci-md-d-badge-position-c, *:disabled > .ci-badge.ci-md-d-badge-position-c,
    *[disabled='disabled'] > .ci-badge.ci-md-d-badge-position-c, .ci-element.disabled .ci-badge.ci-md-d-badge-position-c,
    .ci-element[disabled='disabled'] .ci-badge.ci-md-d-badge-position-c, .ci-element:disabled .ci-badge.ci-md-d-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }


    *.disabled > .ci-badge.ci-md-d-badge-position-tl, *:disabled > .ci-badge.ci-md-d-badge-position-tl,
    *[disabled='disabled'] > .ci-badge.ci-md-d-badge-position-tl, .ci-element.disabled .ci-badge.ci-md-d-badge-position-tl,
    .ci-element[disabled='disabled'] .ci-badge.ci-md-d-badge-position-tl, .ci-element:disabled .ci-badge.ci-md-d-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *.disabled > .ci-badge.ci-md-d-badge-position-tr, *:disabled > .ci-badge.ci-md-d-badge-position-tr,
    *[disabled='disabled'] > .ci-badge.ci-md-d-badge-position-tr, .ci-element.disabled .ci-badge.ci-md-d-badge-position-tr,
    .ci-element[disabled='disabled'] .ci-badge.ci-md-d-badge-position-tr, .ci-element:disabled .ci-badge.ci-md-d-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *.disabled > .ci-badge.ci-md-d-badge-position-bl, *:disabled > .ci-badge.ci-md-d-badge-position-bl,
    *[disabled='disabled'] > .ci-badge.ci-md-d-badge-position-bl, .ci-element.disabled .ci-badge.ci-md-d-badge-position-bl,
    .ci-element[disabled='disabled'] .ci-badge.ci-md-d-badge-position-bl, .ci-element:disabled .ci-badge.ci-md-d-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    *.disabled > .ci-badge.ci-md-d-badge-position-br, *:disabled > .ci-badge.ci-md-d-badge-position-br,
    *[disabled='disabled'] > .ci-badge.ci-md-d-badge-position-br, .ci-element.disabled .ci-badge.ci-md-d-badge-position-br,
    .ci-element[disabled='disabled'] .ci-badge.ci-md-d-badge-position-br, .ci-element:disabled .ci-badge.ci-md-d-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Disabled */
}

@media (min-width: 992px) {
    /* #region Regular */
    .ci-badge.ci-lg-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    .ci-badge.ci-lg-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    .ci-badge.ci-lg-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    .ci-badge.ci-lg-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    .ci-badge.ci-lg-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    .ci-badge.ci-lg-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    .ci-badge.ci-lg-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    .ci-badge.ci-lg-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    .ci-badge.ci-lg-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Regular */
    /* #region Active */
    *.active > .ci-badge.ci-lg-a-badge-position-t, .ci-element.active .ci-badge.ci-lg-a-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *.active > .ci-badge.ci-lg-a-badge-position-b, .ci-element.active .ci-badge.ci-lg-a-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    *.active > .ci-badge.ci-lg-a-badge-position-l, .ci-element.active .ci-badge.ci-lg-a-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *.active > .ci-badge.ci-lg-a-badge-position-r, .ci-element.active .ci-badge.ci-lg-a-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *.active > .ci-badge.ci-lg-a-badge-position-c, .ci-element.active .ci-badge.ci-lg-a-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *.active > .ci-badge.ci-lg-a-badge-position-tl, .ci-element.active .ci-badge.ci-lg-a-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *.active > .ci-badge.ci-lg-a-badge-position-tr, .ci-element.active .ci-badge.ci-lg-a-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *.active > .ci-badge.ci-lg-a-badge-position-bl, .ci-element.active .ci-badge.ci-lg-a-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    *.active > .ci-badge.ci-lg-a-badge-position-br, .ci-element.active .ci-badge.ci-lg-a-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Active */
    /* #region Hover */
    *:hover > .ci-badge.ci-lg-h-badge-position-t, .ci-element:hover .ci-badge.ci-lg-h-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *:hover > .ci-badge.ci-lg-h-badge-position-b, .ci-element:hover .ci-badge.ci-lg-h-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    *:hover > .ci-badge.ci-lg-h-badge-position-l, .ci-element:hover .ci-badge.ci-lg-h-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *:hover > .ci-badge.ci-lg-h-badge-position-r, .ci-element:hover .ci-badge.ci-lg-h-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *:hover > .ci-badge.ci-lg-h-badge-position-c, .ci-element:hover .ci-badge.ci-lg-h-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *:hover > .ci-badge.ci-lg-h-badge-position-tl, .ci-element:hover .ci-badge.ci-lg-h-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *:hover > .ci-badge.ci-lg-h-badge-position-tr, .ci-element:hover .ci-badge.ci-lg-h-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *:hover > .ci-badge.ci-lg-h-badge-position-bl, .ci-element:hover .ci-badge.ci-lg-h-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    *:hover > .ci-badge.ci-lg-h-badge-position-br, .ci-element:hover .ci-badge.ci-lg-h-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Hover */
    /* #region Press */
    *:active > .ci-badge.ci-lg-p-badge-position-t, .ci-element:active .ci-badge.ci-lg-p-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *:active > .ci-badge.ci-lg-p-badge-position-b, .ci-element:active .ci-badge.ci-lg-p-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    *:active > .ci-badge.ci-lg-p-badge-position-l, .ci-element:active .ci-badge.ci-lg-p-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *:active > .ci-badge.ci-lg-p-badge-position-r, .ci-element:active .ci-badge.ci-lg-p-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *:active > .ci-badge.ci-lg-p-badge-position-c, .ci-element:active .ci-badge.ci-lg-p-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *:active > .ci-badge.ci-lg-p-badge-position-tl, .ci-element:active .ci-badge.ci-lg-p-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *:active > .ci-badge.ci-lg-p-badge-position-tr, .ci-element:active .ci-badge.ci-lg-p-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *:active > .ci-badge.ci-lg-p-badge-position-bl, .ci-element:active .ci-badge.ci-lg-p-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    *:active > .ci-badge.ci-lg-p-badge-position-br, .ci-element:active .ci-badge.ci-lg-p-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Press */
    /* #region Disabled */
    *.disabled > .ci-badge.ci-lg-d-badge-position-t, *:disabled > .ci-badge.ci-lg-d-badge-position-t,
    *[disabled='disabled'] > .ci-badge.ci-lg-d-badge-position-t, .ci-element.disabled .ci-badge.ci-lg-d-badge-position-t,
    .ci-element[disabled='disabled'] .ci-badge.ci-lg-d-badge-position-t, .ci-element:disabled .ci-badge.ci-lg-d-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *.disabled > .ci-badge.ci-lg-d-badge-position-b, *:disabled > .ci-badge.ci-lg-d-badge-position-b,
    *[disabled='disabled'] > .ci-badge.ci-lg-d-badge-position-b, .ci-element.disabled .ci-badge.ci-lg-d-badge-position-b,
    .ci-element[disabled='disabled'] .ci-badge.ci-lg-d-badge-position-b, .ci-element:disabled .ci-badge.ci-lg-d-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    *.disabled > .ci-badge.ci-lg-d-badge-position-l, *:disabled > .ci-badge.ci-lg-d-badge-position-l,
    *[disabled='disabled'] > .ci-badge.ci-lg-d-badge-position-l, .ci-element.disabled .ci-badge.ci-lg-d-badge-position-l,
    .ci-element[disabled='disabled'] .ci-badge.ci-lg-d-badge-position-l, .ci-element:disabled .ci-badge.ci-lg-d-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *.disabled > .ci-badge.ci-lg-d-badge-position-r, *:disabled > .ci-badge.ci-lg-d-badge-position-r,
    *[disabled='disabled'] > .ci-badge.ci-lg-d-badge-position-r, .ci-element.disabled .ci-badge.ci-lg-d-badge-position-r,
    .ci-element[disabled='disabled'] .ci-badge.ci-lg-d-badge-position-r, .ci-element:disabled .ci-badge.ci-lg-d-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *.disabled > .ci-badge.ci-lg-d-badge-position-c, *:disabled > .ci-badge.ci-lg-d-badge-position-c,
    *[disabled='disabled'] > .ci-badge.ci-lg-d-badge-position-c, .ci-element.disabled .ci-badge.ci-lg-d-badge-position-c,
    .ci-element[disabled='disabled'] .ci-badge.ci-lg-d-badge-position-c, .ci-element:disabled .ci-badge.ci-lg-d-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }


    *.disabled > .ci-badge.ci-lg-d-badge-position-tl, *:disabled > .ci-badge.ci-lg-d-badge-position-tl,
    *[disabled='disabled'] > .ci-badge.ci-lg-d-badge-position-tl, .ci-element.disabled .ci-badge.ci-lg-d-badge-position-tl,
    .ci-element[disabled='disabled'] .ci-badge.ci-lg-d-badge-position-tl, .ci-element:disabled .ci-badge.ci-lg-d-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *.disabled > .ci-badge.ci-lg-d-badge-position-tr, *:disabled > .ci-badge.ci-lg-d-badge-position-tr,
    *[disabled='disabled'] > .ci-badge.ci-lg-d-badge-position-tr, .ci-element.disabled .ci-badge.ci-lg-d-badge-position-tr,
    .ci-element[disabled='disabled'] .ci-badge.ci-lg-d-badge-position-tr, .ci-element:disabled .ci-badge.ci-lg-d-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *.disabled > .ci-badge.ci-lg-d-badge-position-bl, *:disabled > .ci-badge.ci-lg-d-badge-position-bl,
    *[disabled='disabled'] > .ci-badge.ci-lg-d-badge-position-bl, .ci-element.disabled .ci-badge.ci-lg-d-badge-position-bl,
    .ci-element[disabled='disabled'] .ci-badge.ci-lg-d-badge-position-bl, .ci-element:disabled .ci-badge.ci-lg-d-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    *.disabled > .ci-badge.ci-lg-d-badge-position-br, *:disabled > .ci-badge.ci-lg-d-badge-position-br,
    *[disabled='disabled'] > .ci-badge.ci-lg-d-badge-position-br, .ci-element.disabled .ci-badge.ci-lg-d-badge-position-br,
    .ci-element[disabled='disabled'] .ci-badge.ci-lg-d-badge-position-br, .ci-element:disabled .ci-badge.ci-lg-d-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Disabled */
}

@media (min-width: 1200px) {
    /* #region Regular */
    .ci-badge.ci-xl-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    .ci-badge.ci-xl-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    .ci-badge.ci-xl-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    .ci-badge.ci-xl-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    .ci-badge.ci-xl-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    .ci-badge.ci-xl-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    .ci-badge.ci-xl-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    .ci-badge.ci-xl-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    .ci-badge.ci-xl-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Regular */
    /* #region Active */
    *.active > .ci-badge.ci-xl-a-badge-position-t, .ci-element.active .ci-badge.ci-xl-a-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *.active > .ci-badge.ci-xl-a-badge-position-b, .ci-element.active .ci-badge.ci-xl-a-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    *.active > .ci-badge.ci-xl-a-badge-position-l, .ci-element.active .ci-badge.ci-xl-a-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *.active > .ci-badge.ci-xl-a-badge-position-r, .ci-element.active .ci-badge.ci-xl-a-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *.active > .ci-badge.ci-xl-a-badge-position-c, .ci-element.active .ci-badge.ci-xl-a-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *.active > .ci-badge.ci-xl-a-badge-position-tl, .ci-element.active .ci-badge.ci-xl-a-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *.active > .ci-badge.ci-xl-a-badge-position-tr, .ci-element.active .ci-badge.ci-xl-a-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *.active > .ci-badge.ci-xl-a-badge-position-bl, .ci-element.active .ci-badge.ci-xl-a-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    *.active > .ci-badge.ci-xl-a-badge-position-br, .ci-element.active .ci-badge.ci-xl-a-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Active */
    /* #region Hover */
    *:hover > .ci-badge.ci-xl-h-badge-position-t, .ci-element:hover .ci-badge.ci-xl-h-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *:hover > .ci-badge.ci-xl-h-badge-position-b, .ci-element:hover .ci-badge.ci-xl-h-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    *:hover > .ci-badge.ci-xl-h-badge-position-l, .ci-element:hover .ci-badge.ci-xl-h-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *:hover > .ci-badge.ci-xl-h-badge-position-r, .ci-element:hover .ci-badge.ci-xl-h-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *:hover > .ci-badge.ci-xl-h-badge-position-c, .ci-element:hover .ci-badge.ci-xl-h-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *:hover > .ci-badge.ci-xl-h-badge-position-tl, .ci-element:hover .ci-badge.ci-xl-h-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *:hover > .ci-badge.ci-xl-h-badge-position-tr, .ci-element:hover .ci-badge.ci-xl-h-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *:hover > .ci-badge.ci-xl-h-badge-position-bl, .ci-element:hover .ci-badge.ci-xl-h-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    *:hover > .ci-badge.ci-xl-h-badge-position-br, .ci-element:hover .ci-badge.ci-xl-h-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Hover */
    /* #region Press */
    *:active > .ci-badge.ci-xl-p-badge-position-t, .ci-element:active .ci-badge.ci-xl-p-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *:active > .ci-badge.ci-xl-p-badge-position-b, .ci-element:active .ci-badge.ci-xl-p-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    *:active > .ci-badge.ci-xl-p-badge-position-l, .ci-element:active .ci-badge.ci-xl-p-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *:active > .ci-badge.ci-xl-p-badge-position-r, .ci-element:active .ci-badge.ci-xl-p-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *:active > .ci-badge.ci-xl-p-badge-position-c, .ci-element:active .ci-badge.ci-xl-p-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *:active > .ci-badge.ci-xl-p-badge-position-tl, .ci-element:active .ci-badge.ci-xl-p-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *:active > .ci-badge.ci-xl-p-badge-position-tr, .ci-element:active .ci-badge.ci-xl-p-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *:active > .ci-badge.ci-xl-p-badge-position-bl, .ci-element:active .ci-badge.ci-xl-p-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    *:active > .ci-badge.ci-xl-p-badge-position-br, .ci-element:active .ci-badge.ci-xl-p-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Press */
    /* #region Disabled */
    *.disabled > .ci-badge.ci-xl-d-badge-position-t, *:disabled > .ci-badge.ci-xl-d-badge-position-t,
    *[disabled='disabled'] > .ci-badge.ci-xl-d-badge-position-t, .ci-element.disabled .ci-badge.ci-xl-d-badge-position-t,
    .ci-element[disabled='disabled'] .ci-badge.ci-xl-d-badge-position-t, .ci-element:disabled .ci-badge.ci-xl-d-badge-position-t {
        top: -10%;
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }

    *.disabled > .ci-badge.ci-xl-d-badge-position-b, *:disabled > .ci-badge.ci-xl-d-badge-position-b,
    *[disabled='disabled'] > .ci-badge.ci-xl-d-badge-position-b, .ci-element.disabled .ci-badge.ci-xl-d-badge-position-b,
    .ci-element[disabled='disabled'] .ci-badge.ci-xl-d-badge-position-b, .ci-element:disabled .ci-badge.ci-xl-d-badge-position-b {
        top: auto;
        left: calc(50% - 0.25em);
        bottom: -10%;
        right: auto;
    }

    *.disabled > .ci-badge.ci-xl-d-badge-position-l, *:disabled > .ci-badge.ci-xl-d-badge-position-l,
    *[disabled='disabled'] > .ci-badge.ci-xl-d-badge-position-l, .ci-element.disabled .ci-badge.ci-xl-d-badge-position-l,
    .ci-element[disabled='disabled'] .ci-badge.ci-xl-d-badge-position-l, .ci-element:disabled .ci-badge.ci-xl-d-badge-position-l {
        top: calc(50% - 0.25em);
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *.disabled > .ci-badge.ci-xl-d-badge-position-r, *:disabled > .ci-badge.ci-xl-d-badge-position-r,
    *[disabled='disabled'] > .ci-badge.ci-xl-d-badge-position-r, .ci-element.disabled .ci-badge.ci-xl-d-badge-position-r,
    .ci-element[disabled='disabled'] .ci-badge.ci-xl-d-badge-position-r, .ci-element:disabled .ci-badge.ci-xl-d-badge-position-r {
        top: calc(50% - 0.25em);
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *.disabled > .ci-badge.ci-xl-d-badge-position-c, *:disabled > .ci-badge.ci-xl-d-badge-position-c,
    *[disabled='disabled'] > .ci-badge.ci-xl-d-badge-position-c, .ci-element.disabled .ci-badge.ci-xl-d-badge-position-c,
    .ci-element[disabled='disabled'] .ci-badge.ci-xl-d-badge-position-c, .ci-element:disabled .ci-badge.ci-xl-d-badge-position-c {
        top: calc(50% - 0.25em);
        left: calc(50% - 0.25em);
        bottom: auto;
        right: auto;
    }


    *.disabled > .ci-badge.ci-xl-d-badge-position-tl, *:disabled > .ci-badge.ci-xl-d-badge-position-tl,
    *[disabled='disabled'] > .ci-badge.ci-xl-d-badge-position-tl, .ci-element.disabled .ci-badge.ci-xl-d-badge-position-tl,
    .ci-element[disabled='disabled'] .ci-badge.ci-xl-d-badge-position-tl, .ci-element:disabled .ci-badge.ci-xl-d-badge-position-tl {
        top: -10%;
        left: -10%;
        bottom: auto;
        right: auto;
    }

    *.disabled > .ci-badge.ci-xl-d-badge-position-tr, *:disabled > .ci-badge.ci-xl-d-badge-position-tr,
    *[disabled='disabled'] > .ci-badge.ci-xl-d-badge-position-tr, .ci-element.disabled .ci-badge.ci-xl-d-badge-position-tr,
    .ci-element[disabled='disabled'] .ci-badge.ci-xl-d-badge-position-tr, .ci-element:disabled .ci-badge.ci-xl-d-badge-position-tr {
        top: -10%;
        left: auto;
        bottom: auto;
        right: -10%;
    }

    *.disabled > .ci-badge.ci-xl-d-badge-position-bl, *:disabled > .ci-badge.ci-xl-d-badge-position-bl,
    *[disabled='disabled'] > .ci-badge.ci-xl-d-badge-position-bl, .ci-element.disabled .ci-badge.ci-xl-d-badge-position-bl,
    .ci-element[disabled='disabled'] .ci-badge.ci-xl-d-badge-position-bl, .ci-element:disabled .ci-badge.ci-xl-d-badge-position-bl {
        top: auto;
        left: -10%;
        bottom: -10%;
        right: auto;
    }

    *.disabled > .ci-badge.ci-xl-d-badge-position-br, *:disabled > .ci-badge.ci-xl-d-badge-position-br,
    *[disabled='disabled'] > .ci-badge.ci-xl-d-badge-position-br, .ci-element.disabled .ci-badge.ci-xl-d-badge-position-br,
    .ci-element[disabled='disabled'] .ci-badge.ci-xl-d-badge-position-br, .ci-element:disabled .ci-badge.ci-xl-d-badge-position-br {
        top: auto;
        left: auto;
        bottom: -10%;
        right: -10%;
    }
    /* #endregion Disabled */
}
/* #endregion -- Badge Position ------- */
/* #endregion ------------- Badge ------------------- */
/* #region ----------- Transformations -------------- */

/* #region ------ Flip ------ */

/* #region Regular */
.ci-transform-flip-x, .ci-xs-transform-flip-x {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.ci-transform-flip-y, .ci-xs-transform-flip-y {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
/* #endregion Regular */
/* #region Active */
.ci-a-transform-flip-x.active, .ci-element.active .ci-a-transform-flip-x,
.ci-xs-a-transform-flip-x.active, .ci-element.active .ci-xs-a-transform-flip-x{
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.ci-a-transform-flip-y.active, .ci-element.active .ci-a-transform-flip-y,
.ci-xs-a-transform-flip-y.active, .ci-element.active .ci-xs-a-transform-flip-y {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
/* #endregion Active */
/* #region Hover */
.ci-h-transform-flip-x:hover, .ci-element:hover .ci-h-transform-flip-x,
.ci-xs-h-transform-flip-x:hover, .ci-element:hover .ci-xs-h-transform-flip-x {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.ci-h-transform-flip-y:hover, .ci-element:hover .ci-h-transform-flip-y,
.ci-xs-h-transform-flip-y:hover, .ci-element:hover .ci-xs-h-transform-flip-y{
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
/* #endregion Hover */
/* #region Press */
.ci-p-transform-flip-x:active, .ci-element:active .ci-p-transform-flip-x,
.ci-xs-p-transform-flip-x:active, .ci-element:active .ci-xs-p-transform-flip-x {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.ci-p-transform-flip-y:active, .ci-element:active .ci-p-transform-flip-y,
.ci-xs-p-transform-flip-y:active, .ci-element:active .ci-xs-p-transform-flip-y {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
/* #endregion Press */
/* #region Disabled */
.ci-d-transform-flip-x.disabled, .ci-element.disabled .ci-d-transform-flip-x,
.ci-element[disabled='disabled'] .ci-d-transform-flip-x, .ci-element:disabled .ci-d-transform-flip-x,
.ci-d-transform-flip-x[disabled='disabled'], .ci-d-transform-flip-x:disabled,
.ci-xs-d-transform-flip-x.disabled, .ci-element.disabled .ci-xs-d-transform-flip-x,
.ci-element[disabled='disabled'] .ci-xs-d-transform-flip-x, .ci-element:disabled .ci-xs-d-transform-flip-x,
.ci-xs-d-transform-flip-x[disabled='disabled'], .ci-xs-d-transform-flip-x:disabled {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.ci-d-transform-flip-y.disabled, .ci-element.disabled .ci-d-transform-flip-y,
.ci-element[disabled='disabled'] .ci-d-transform-flip-y, .ci-element:disabled .ci-d-transform-flip-y,
.ci-d-transform-flip-y[disabled='disabled'], .ci-d-transform-flip-y:disabled,
.ci-xs-d-transform-flip-y.disabled, .ci-element.disabled .ci-xs-d-transform-flip-y,
.ci-element[disabled='disabled'] .ci-xs-d-transform-flip-y, .ci-element:disabled .ci-xs-d-transform-flip-y,
.ci-xs-d-transform-flip-y[disabled='disabled'], .ci-xs-d-transform-flip-y:disabled {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
/*#endregion Disabled */
@media (min-width: 576px) {
    /* #region Regular */
    .ci-sm-transform-flip-x {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-sm-transform-flip-y {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Regular */
    /* #region Active */
    .ci-sm-a-transform-flip-x.active, .ci-element.active .ci-sm-a-transform-flip-x {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-sm-a-transform-flip-y.active, .ci-element.active .ci-sm-a-transform-flip-y {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Active */
    /* #region Hover */
    .ci-sm-h-transform-flip-x:hover, .ci-element:hover .ci-sm-h-transform-flip-x {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-sm-h-transform-flip-y:hover, .ci-element:hover .ci-sm-h-transform-flip-y {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Hover */
    /* #region Press */
    .ci-sm-p-transform-flip-x:active, .ci-element:active .ci-sm-p-transform-flip-x {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-sm-p-transform-flip-y:active, .ci-element:active .ci-sm-p-transform-flip-y {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Press */
    /* #region Disabled */
    .ci-sm-d-transform-flip-x.disabled, .ci-element.disabled .ci-sm-d-transform-flip-x,
    .ci-element[disabled='disabled'] .ci-sm-d-transform-flip-x, .ci-element:disabled .ci-sm-d-transform-flip-x,
    .ci-sm-d-transform-flip-x[disabled='disabled'], .ci-sm-d-transform-flip-x:disabled {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-sm-d-transform-flip-y.disabled, .ci-element.disabled .ci-sm-d-transform-flip-y,
    .ci-element[disabled='disabled'] .ci-sm-d-transform-flip-y, .ci-element:disabled .ci-sm-d-transform-flip-y,
    .ci-sm-d-transform-flip-y[disabled='disabled'], .ci-sm-d-transform-flip-y:disabled {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Disabled */
}
@media (min-width: 768px) {
    /* #region Regular */
    .ci-md-transform-flip-x {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-md-transform-flip-y {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Regular */
    /* #region Active */
    .ci-md-a-transform-flip-x.active, .ci-element.active .ci-md-a-transform-flip-x {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-md-a-transform-flip-y.active, .ci-element.active .ci-md-a-transform-flip-y {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Active */
    /* #region Hover */
    .ci-md-h-transform-flip-x:hover, .ci-element:hover .ci-md-h-transform-flip-x {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-md-h-transform-flip-y:hover, .ci-element:hover .ci-md-h-transform-flip-y {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Hover */
    /* #region Press */
    .ci-md-p-transform-flip-x:active, .ci-element:active .ci-md-p-transform-flip-x {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-md-p-transform-flip-y:active, .ci-element:active .ci-md-p-transform-flip-y {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Press */
    /* #region Disabled */
    .ci-md-d-transform-flip-x.disabled, .ci-element.disabled .ci-md-d-transform-flip-x,
    .ci-element[disabled='disabled'] .ci-md-d-transform-flip-x, .ci-element:disabled .ci-md-d-transform-flip-x,
    .ci-md-d-transform-flip-x[disabled='disabled'], .ci-md-d-transform-flip-x:disabled {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-md-d-transform-flip-y.disabled, .ci-element.disabled .ci-md-d-transform-flip-y,
    .ci-element[disabled='disabled'] .ci-md-d-transform-flip-y, .ci-element:disabled .ci-md-d-transform-flip-y,
    .ci-md-d-transform-flip-y[disabled='disabled'], .ci-md-d-transform-flip-y:disabled {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Disabled */
}

@media (min-width: 992px) {
    /* #region Regular */
    .ci-lg-transform-flip-x {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-lg-transform-flip-y {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Regular */
    /* #region Active */
    .ci-lg-a-transform-flip-x.active, .ci-element.active .ci-lg-a-transform-flip-x {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-lg-a-transform-flip-y.active, .ci-element.active .ci-lg-a-transform-flip-y {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Active */
    /* #region Hover */
    .ci-lg-h-transform-flip-x:hover, .ci-element:hover .ci-lg-h-transform-flip-x {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-lg-h-transform-flip-y:hover, .ci-element:hover .ci-lg-h-transform-flip-y {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Hover */
    /* #region Press */
    .ci-lg-p-transform-flip-x:active, .ci-element:active .ci-lg-p-transform-flip-x {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-lg-p-transform-flip-y:active, .ci-element:active .ci-lg-p-transform-flip-y {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Press */
    /* #region Disabled */
    .ci-lg-d-transform-flip-x.disabled, .ci-element.disabled .ci-lg-d-transform-flip-x,
    .ci-element[disabled='disabled'] .ci-lg-d-transform-flip-x, .ci-element:disabled .ci-lg-d-transform-flip-x,
    .ci-lg-d-transform-flip-x[disabled='disabled'], .ci-lg-d-transform-flip-x:disabled {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-lg-d-transform-flip-y.disabled, .ci-element.disabled .ci-lg-d-transform-flip-y,
    .ci-element[disabled='disabled'] .ci-lg-d-transform-flip-y, .ci-element:disabled .ci-lg-d-transform-flip-y,
    .ci-lg-d-transform-flip-y[disabled='disabled'], .ci-lg-d-transform-flip-y:disabled {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Disabled */
}

@media (min-width: 1200px) {
    /* #region Regular */
    .ci-xl-transform-flip-x {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-xl-transform-flip-y {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Regular */
    /* #region Active */
    .ci-xl-a-transform-flip-x.active, .ci-element.active .ci-xl-a-transform-flip-x {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-xl-a-transform-flip-y.active, .ci-element.active .ci-xl-a-transform-flip-y {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Active */
    /* #region Hover */
    .ci-xl-h-transform-flip-x:hover, .ci-element:hover .ci-xl-h-transform-flip-x {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-xl-h-transform-flip-y:hover, .ci-element:hover .ci-xl-h-transform-flip-y {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Hover */
    /* #region Press */
    .ci-xl-p-transform-flip-x:active, .ci-element:active .ci-xl-p-transform-flip-x {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-xl-p-transform-flip-y:active, .ci-element:active .ci-xl-p-transform-flip-y {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Press */
    /* #region Disabled */
    .ci-xl-d-transform-flip-x.disabled, .ci-element.disabled .ci-xl-d-transform-flip-x,
    .ci-element[disabled='disabled'] .ci-xl-d-transform-flip-x, .ci-element:disabled .ci-xl-d-transform-flip-x,
    .ci-xl-d-transform-flip-x[disabled='disabled'], .ci-xl-d-transform-flip-x:disabled {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .ci-xl-d-transform-flip-y.disabled, .ci-element.disabled .ci-xl-d-transform-flip-y,
    .ci-element[disabled='disabled'] .ci-xl-d-transform-flip-y, .ci-element:disabled .ci-xl-d-transform-flip-y,
    .ci-xl-d-transform-flip-y[disabled='disabled'], .ci-xl-d-transform-flip-y:disabled {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
    /* #endregion Disabled */
}

/* #endregion --- Flip ------ */

/* #region  --- Rotation ---- */
/* #region Regular */
.ci-transform-rotate-45, .ci-xs-transform-rotate-45 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ci-transform-rotate-90, .ci-xs-transform-rotate-90 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.ci-transform-rotate-135, .ci-xs-transform-rotate-135 {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.ci-transform-rotate-180, .ci-xs-transform-rotate-180 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ci-transform-rotate-225, .ci-xs-transform-rotate-225 {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}

.ci-transform-rotate-270, .ci-xs-transform-rotate-270 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.ci-transform-rotate-315, .ci-xs-transform-rotate-315 {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}
/* #endregion Regular */
/* #region Active */
.ci-a-transform-rotate-45.active, .ci-element.active .ci-a-transform-rotate-45,
.ci-xs-a-transform-rotate-45.active, .ci-element.active .ci-xs-a-transform-rotate-45 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ci-a-transform-rotate-90.active, .ci-element.active .ci-a-transform-rotate-90,
.ci-xs-a-transform-rotate-90.active, .ci-element.active .ci-xs-a-transform-rotate-90 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.ci-a-transform-rotate-135.active, .ci-element.active .ci-a-transform-rotate-135,
.ci-xs-a-transform-rotate-135.active, .ci-element.active .ci-xs-a-transform-rotate-135 {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.ci-a-transform-rotate-180.active, .ci-element.active .ci-a-transform-rotate-180,
.ci-xs-a-transform-rotate-180.active, .ci-element.active .ci-xs-a-transform-rotate-180 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ci-a-transform-rotate-225.active, .ci-element.active .ci-a-transform-rotate-225,
.ci-xs-a-transform-rotate-225.active, .ci-element.active .ci-xs-a-transform-rotate-225 {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}

.ci-a-transform-rotate-270.active, .ci-element.active .ci-a-transform-rotate-270,
.ci-xs-a-transform-rotate-270.active, .ci-element.active .ci-xs-a-transform-rotate-270 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.ci-a-transform-rotate-315.active, .ci-element.active .ci-a-transform-rotate-315,
.ci-xs-a-transform-rotate-315.active, .ci-element.active .ci-xs-a-transform-rotate-315 {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}
/* #endregion Active */
/* #region Hover */
.ci-h-transform-rotate-45:hover, .ci-element:hover .ci-h-transform-rotate-45,
.ci-xs-h-transform-rotate-45:hover, .ci-element:hover .ci-xs-h-transform-rotate-45 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ci-h-transform-rotate-90:hover, .ci-element:hover .ci-h-transform-rotate-90,
.ci-xs-h-transform-rotate-90:hover, .ci-element:hover .ci-xs-h-transform-rotate-90 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.ci-h-transform-rotate-135:hover, .ci-element:hover .ci-h-transform-rotate-135,
.ci-xs-h-transform-rotate-135:hover, .ci-element:hover .ci-xs-h-transform-rotate-135 {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.ci-h-transform-rotate-180:hover, .ci-element:hover .ci-h-transform-rotate-180,
.ci-xs-h-transform-rotate-180:hover, .ci-element:hover .ci-xs-h-transform-rotate-180 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ci-h-transform-rotate-225:hover, .ci-element:hover .ci-h-transform-rotate-225,
.ci-xs-h-transform-rotate-225:hover, .ci-element:hover .ci-xs-h-transform-rotate-225 {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}

.ci-h-transform-rotate-270:hover, .ci-element:hover .ci-h-transform-rotate-270,
.ci-xs-h-transform-rotate-270:hover, .ci-element:hover .ci-xs-h-transform-rotate-270 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.ci-h-transform-rotate-315:hover, .ci-element:hover .ci-h-transform-rotate-315,
.ci-xs-h-transform-rotate-315:hover, .ci-element:hover .ci-xs-h-transform-rotate-315 {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}
/* #endregion Hover */
/* #region Press */
.ci-p-transform-rotate-45:active, .ci-element:active .ci-p-transform-rotate-45,
.ci-xs-p-transform-rotate-45:active, .ci-element:active .ci-xs-p-transform-rotate-45 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ci-p-transform-rotate-90:active, .ci-element:active .ci-p-transform-rotate-90,
.ci-xs-p-transform-rotate-90:active, .ci-element:active .ci-xs-p-transform-rotate-90 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.ci-p-transform-rotate-135:active, .ci-element:active .ci-p-transform-rotate-135,
.ci-xs-p-transform-rotate-135:active, .ci-element:active .ci-xs-p-transform-rotate-135 {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.ci-p-transform-rotate-180:active, .ci-element:active .ci-p-transform-rotate-180,
.ci-xs-p-transform-rotate-180:active, .ci-element:active .ci-xs-p-transform-rotate-180 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ci-p-transform-rotate-225:active, .ci-element:active .ci-p-transform-rotate-225,
.ci-xs-p-transform-rotate-225:active, .ci-element:active .ci-xs-p-transform-rotate-225 {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}

.ci-p-transform-rotate-270:active, .ci-element:active .ci-p-transform-rotate-270,
.ci-xs-p-transform-rotate-270:active, .ci-element:active .ci-xs-p-transform-rotate-270 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.ci-p-transform-rotate-315:active, .ci-element:active .ci-p-transform-rotate-315,
.ci-xs-p-transform-rotate-315:active, .ci-element:active .ci-xs-p-transform-rotate-315 {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}
/* #endregion Press */
/* #region Disabled */
.ci-d-transform-rotate-45.disabled, .ci-element.disabled .ci-d-transform-rotate-45,
.ci-element[disabled='disabled'] .ci-d-transform-rotate-45, .ci-element:disabled .ci-d-transform-rotate-45,
.ci-d-transform-rotate-45[disabled='disabled'], .ci-d-transform-rotate-45:disabled,
.ci-xs-d-transform-rotate-45.disabled, .ci-element.disabled .ci-xs-d-transform-rotate-45,
.ci-element[disabled='disabled'] .ci-xs-d-transform-rotate-45, .ci-element:disabled .ci-xs-d-transform-rotate-45,
.ci-xs-d-transform-rotate-45[disabled='disabled'], .ci-xs-d-transform-rotate-45:disabled {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ci-d-transform-rotate-90.disabled, .ci-element.disabled .ci-d-transform-rotate-90,
.ci-element[disabled='disabled'] .ci-d-transform-rotate-90, .ci-element:disabled .ci-d-transform-rotate-90,
.ci-d-transform-rotate-90[disabled='disabled'], .ci-d-transform-rotate-90:disabled,
.ci-xs-d-transform-rotate-90.disabled, .ci-element.disabled .ci-xs-d-transform-rotate-90,
.ci-element[disabled='disabled'] .ci-xs-d-transform-rotate-90, .ci-element:disabled .ci-xs-d-transform-rotate-90,
.ci-xs-d-transform-rotate-90[disabled='disabled'], .ci-xs-d-transform-rotate-90:disabled {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.ci-d-transform-rotate-135.disabled, .ci-element.disabled .ci-d-transform-rotate-135,
.ci-element[disabled='disabled'] .ci-d-transform-rotate-135, .ci-element:disabled .ci-d-transform-rotate-135,
.ci-d-transform-rotate-135[disabled='disabled'], .ci-d-transform-rotate-135:disabled,
.ci-xs-d-transform-rotate-135.disabled, .ci-element.disabled .ci-xs-d-transform-rotate-135,
.ci-element[disabled='disabled'] .ci-xs-d-transform-rotate-135, .ci-element:disabled .ci-xs-d-transform-rotate-135,
.ci-xs-d-transform-rotate-135[disabled='disabled'], .ci-xs-d-transform-rotate-135:disabled {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.ci-d-transform-rotate-180.disabled, .ci-element.disabled .ci-d-transform-rotate-180,
.ci-element[disabled='disabled'] .ci-d-transform-rotate-180, .ci-element:disabled .ci-d-transform-rotate-180,
.ci-d-transform-rotate-180[disabled='disabled'], .ci-d-transform-rotate-180:disabled,
.ci-xs-d-transform-rotate-180.disabled, .ci-element.disabled .ci-xs-d-transform-rotate-180,
.ci-element[disabled='disabled'] .ci-xs-d-transform-rotate-180, .ci-element:disabled .ci-xs-d-transform-rotate-180,
.ci-xs-d-transform-rotate-180[disabled='disabled'], .ci-xs-d-transform-rotate-180:disabled {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ci-d-transform-rotate-225.disabled, .ci-element.disabled .ci-d-transform-rotate-225,
.ci-element[disabled='disabled'] .ci-d-transform-rotate-225, .ci-element:disabled .ci-d-transform-rotate-225,
.ci-d-transform-rotate-225[disabled='disabled'], .ci-d-transform-rotate-225:disabled,
.ci-xs-d-transform-rotate-225.disabled, .ci-element.disabled .ci-xs-d-transform-rotate-225,
.ci-element[disabled='disabled'] .ci-xs-d-transform-rotate-225, .ci-element:disabled .ci-xs-d-transform-rotate-225,
.ci-xs-d-transform-rotate-225[disabled='disabled'], .ci-xs-d-transform-rotate-225:disabled {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}

.ci-d-transform-rotate-270.disabled, .ci-element.disabled .ci-d-transform-rotate-270,
.ci-element[disabled='disabled'] .ci-d-transform-rotate-270, .ci-element:disabled .ci-d-transform-rotate-270,
.ci-d-transform-rotate-270[disabled='disabled'], .ci-d-transform-rotate-270:disabled,
.ci-xs-d-transform-rotate-270.disabled, .ci-element.disabled .ci-xs-d-transform-rotate-270,
.ci-element[disabled='disabled'] .ci-xs-d-transform-rotate-270, .ci-element:disabled .ci-xs-d-transform-rotate-270,
.ci-xs-d-transform-rotate-270[disabled='disabled'], .ci-xs-d-transform-rotate-270:disabled {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.ci-d-transform-rotate-315.disabled, .ci-element.disabled .ci-d-transform-rotate-315,
.ci-element[disabled='disabled'] .ci-d-transform-rotate-315, .ci-element:disabled .ci-d-transform-rotate-315,
.ci-d-transform-rotate-315[disabled='disabled'], .ci-d-transform-rotate-315:disabled,
.ci-xs-d-transform-rotate-315.disabled, .ci-element.disabled .ci-xs-d-transform-rotate-315,
.ci-element[disabled='disabled'] .ci-xs-d-transform-rotate-315, .ci-element:disabled .ci-xs-d-transform-rotate-315,
.ci-xs-d-transform-rotate-315[disabled='disabled'], .ci-xs-d-transform-rotate-315:disabled {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}
/* #endregion Disabled */
@media (min-width: 576px) {
    /* #region Regular */
    .ci-sm-transform-rotate-45 {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-sm-transform-rotate-90 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-sm-transform-rotate-135 {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-sm-transform-rotate-180 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-sm-transform-rotate-225 {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-sm-transform-rotate-270 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-sm-transform-rotate-315 {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Regular */
    /* #region Active */
    .ci-sm-a-transform-rotate-45.active, .ci-element.active .ci-sm-a-transform-rotate-45 {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-sm-a-transform-rotate-90.active, .ci-element.active .ci-sm-a-transform-rotate-90 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-sm-a-transform-rotate-135.active, .ci-element.active .ci-sm-a-transform-rotate-135 {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-sm-a-transform-rotate-180.active, .ci-element.active .ci-sm-a-transform-rotate-180 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-sm-a-transform-rotate-225.active, .ci-element.active .ci-sm-a-transform-rotate-225 {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-sm-a-transform-rotate-270.active, .ci-element.active .ci-sm-a-transform-rotate-270 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-sm-a-transform-rotate-315.active, .ci-element.active .ci-sm-a-transform-rotate-315 {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Active */
    /* #region Hover */
    .ci-sm-h-transform-rotate-45:hover, .ci-element:hover .ci-sm-h-transform-rotate-45 {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-sm-h-transform-rotate-90:hover, .ci-element:hover .ci-sm-h-transform-rotate-90 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-sm-h-transform-rotate-135:hover, .ci-element:hover .ci-sm-h-transform-rotate-135 {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-sm-h-transform-rotate-180:hover, .ci-element:hover .ci-sm-h-transform-rotate-180 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-sm-h-transform-rotate-225:hover, .ci-element:hover .ci-sm-h-transform-rotate-225 {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-sm-h-transform-rotate-270:hover, .ci-element:hover .ci-sm-h-transform-rotate-270 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-sm-h-transform-rotate-315:hover, .ci-element:hover .ci-sm-h-transform-rotate-315 {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Hover */
    /* #region Press */
    .ci-sm-p-transform-rotate-45:active, .ci-element:active .ci-sm-p-transform-rotate-45 {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-sm-p-transform-rotate-90:active, .ci-element:active .ci-sm-p-transform-rotate-90 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-sm-p-transform-rotate-135:active, .ci-element:active .ci-sm-p-transform-rotate-135 {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-sm-p-transform-rotate-180:active, .ci-element:active .ci-sm-p-transform-rotate-180 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-sm-p-transform-rotate-225:active, .ci-element:active .ci-sm-p-transform-rotate-225 {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-sm-p-transform-rotate-270:active, .ci-element:active .ci-sm-p-transform-rotate-270 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-sm-p-transform-rotate-315:active, .ci-element:active .ci-sm-p-transform-rotate-315 {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Press */
    /* #region Disabled */
    .ci-sm-d-transform-rotate-45.disabled, .ci-element.disabled .ci-sm-d-transform-rotate-45,
    .ci-element[disabled='disabled'] .ci-sm-d-transform-rotate-45, .ci-element:disabled .ci-sm-d-transform-rotate-45,
    .ci-sm-d-transform-rotate-45[disabled='disabled'], .ci-sm-d-transform-rotate-45:disabled {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-sm-d-transform-rotate-90.disabled, .ci-element.disabled .ci-sm-d-transform-rotate-90,
    .ci-element[disabled='disabled'] .ci-sm-d-transform-rotate-90, .ci-element:disabled .ci-sm-d-transform-rotate-90,
    .ci-sm-d-transform-rotate-90[disabled='disabled'], .ci-sm-d-transform-rotate-90:disabled {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-sm-d-transform-rotate-135.disabled, .ci-element.disabled .ci-sm-d-transform-rotate-135,
    .ci-element[disabled='disabled'] .ci-sm-d-transform-rotate-135, .ci-element:disabled .ci-sm-d-transform-rotate-135,
    .ci-sm-d-transform-rotate-135[disabled='disabled'], .ci-sm-d-transform-rotate-135:disabled {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-sm-d-transform-rotate-180.disabled, .ci-element.disabled .ci-sm-d-transform-rotate-180,
    .ci-element[disabled='disabled'] .ci-sm-d-transform-rotate-180, .ci-element:disabled .ci-sm-d-transform-rotate-180,
    .ci-sm-d-transform-rotate-180[disabled='disabled'], .ci-sm-d-transform-rotate-180:disabled {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-sm-d-transform-rotate-225.disabled, .ci-element.disabled .ci-sm-d-transform-rotate-225,
    .ci-element[disabled='disabled'] .ci-sm-d-transform-rotate-225, .ci-element:disabled .ci-sm-d-transform-rotate-225,
    .ci-sm-d-transform-rotate-225[disabled='disabled'], .ci-sm-d-transform-rotate-225:disabled {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-sm-d-transform-rotate-270.disabled, .ci-element.disabled .ci-sm-d-transform-rotate-270,
    .ci-element[disabled='disabled'] .ci-sm-d-transform-rotate-270, .ci-element:disabled .ci-sm-d-transform-rotate-270,
    .ci-sm-d-transform-rotate-270[disabled='disabled'], .ci-sm-d-transform-rotate-270:disabled {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-sm-d-transform-rotate-315.disabled, .ci-element.disabled .ci-sm-d-transform-rotate-315,
    .ci-element[disabled='disabled'] .ci-sm-d-transform-rotate-315, .ci-element:disabled .ci-sm-d-transform-rotate-315,
    .ci-sm-d-transform-rotate-315[disabled='disabled'], .ci-sm-d-transform-rotate-315:disabled {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Disabled */
}
@media (min-width: 768px) {
    /* #region Regular */
    .ci-md-transform-rotate-45 {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-md-transform-rotate-90 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-md-transform-rotate-135 {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-md-transform-rotate-180 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-md-transform-rotate-225 {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-md-transform-rotate-270 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-md-transform-rotate-315 {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Regular */
    /* #region Active */
    .ci-md-a-transform-rotate-45.active, .ci-element.active .ci-md-a-transform-rotate-45 {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-md-a-transform-rotate-90.active, .ci-element.active .ci-md-a-transform-rotate-90 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-md-a-transform-rotate-135.active, .ci-element.active .ci-md-a-transform-rotate-135 {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-md-a-transform-rotate-180.active, .ci-element.active .ci-md-a-transform-rotate-180 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-md-a-transform-rotate-225.active, .ci-element.active .ci-md-a-transform-rotate-225 {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-md-a-transform-rotate-270.active, .ci-element.active .ci-md-a-transform-rotate-270 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-md-a-transform-rotate-315.active, .ci-element.active .ci-md-a-transform-rotate-315 {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Active */
    /* #region Hover */
    .ci-md-h-transform-rotate-45:hover, .ci-element:hover .ci-md-h-transform-rotate-45 {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-md-h-transform-rotate-90:hover, .ci-element:hover .ci-md-h-transform-rotate-90 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-md-h-transform-rotate-135:hover, .ci-element:hover .ci-md-h-transform-rotate-135 {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-md-h-transform-rotate-180:hover, .ci-element:hover .ci-md-h-transform-rotate-180 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-md-h-transform-rotate-225:hover, .ci-element:hover .ci-md-h-transform-rotate-225 {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-md-h-transform-rotate-270:hover, .ci-element:hover .ci-md-h-transform-rotate-270 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-md-h-transform-rotate-315:hover, .ci-element:hover .ci-md-h-transform-rotate-315 {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Hover */
    /* #region Press */
    .ci-md-p-transform-rotate-45:active, .ci-element:active .ci-md-p-transform-rotate-45 {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-md-p-transform-rotate-90:active, .ci-element:active .ci-md-p-transform-rotate-90 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-md-p-transform-rotate-135:active, .ci-element:active .ci-md-p-transform-rotate-135 {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-md-p-transform-rotate-180:active, .ci-element:active .ci-md-p-transform-rotate-180 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-md-p-transform-rotate-225:active, .ci-element:active .ci-md-p-transform-rotate-225 {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-md-p-transform-rotate-270:active, .ci-element:active .ci-md-p-transform-rotate-270 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-md-p-transform-rotate-315:active, .ci-element:active .ci-md-p-transform-rotate-315 {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Press */
    /* #region Disabled */
    .ci-md-d-transform-rotate-45.disabled, .ci-element.disabled .ci-md-d-transform-rotate-45,
    .ci-element[disabled='disabled'] .ci-md-d-transform-rotate-45, .ci-element:disabled .ci-md-d-transform-rotate-45,
    .ci-md-d-transform-rotate-45[disabled='disabled'], .ci-md-d-transform-rotate-45:disabled {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-md-d-transform-rotate-90.disabled, .ci-element.disabled .ci-md-d-transform-rotate-90,
    .ci-element[disabled='disabled'] .ci-md-d-transform-rotate-90, .ci-element:disabled .ci-md-d-transform-rotate-90,
    .ci-md-d-transform-rotate-90[disabled='disabled'], .ci-md-d-transform-rotate-90:disabled {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-md-d-transform-rotate-135.disabled, .ci-element.disabled .ci-md-d-transform-rotate-135,
    .ci-element[disabled='disabled'] .ci-md-d-transform-rotate-135, .ci-element:disabled .ci-md-d-transform-rotate-135,
    .ci-md-d-transform-rotate-135[disabled='disabled'], .ci-md-d-transform-rotate-135:disabled {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-md-d-transform-rotate-180.disabled, .ci-element.disabled .ci-md-d-transform-rotate-180,
    .ci-element[disabled='disabled'] .ci-md-d-transform-rotate-180, .ci-element:disabled .ci-md-d-transform-rotate-180,
    .ci-md-d-transform-rotate-180[disabled='disabled'], .ci-md-d-transform-rotate-180:disabled {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-md-d-transform-rotate-225.disabled, .ci-element.disabled .ci-md-d-transform-rotate-225,
    .ci-element[disabled='disabled'] .ci-md-d-transform-rotate-225, .ci-element:disabled .ci-md-d-transform-rotate-225,
    .ci-md-d-transform-rotate-225[disabled='disabled'], .ci-md-d-transform-rotate-225:disabled {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-md-d-transform-rotate-270.disabled, .ci-element.disabled .ci-md-d-transform-rotate-270,
    .ci-element[disabled='disabled'] .ci-md-d-transform-rotate-270, .ci-element:disabled .ci-md-d-transform-rotate-270,
    .ci-md-d-transform-rotate-270[disabled='disabled'], .ci-md-d-transform-rotate-270:disabled {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-md-d-transform-rotate-315.disabled, .ci-element.disabled .ci-md-d-transform-rotate-315,
    .ci-element[disabled='disabled'] .ci-md-d-transform-rotate-315, .ci-element:disabled .ci-md-d-transform-rotate-315,
    .ci-md-d-transform-rotate-315[disabled='disabled'], .ci-md-d-transform-rotate-315:disabled {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Disabled */
}

@media (min-width: 992px) {
    /* #region Regular */
    .ci-lg-transform-rotate-45 {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-lg-transform-rotate-90 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-lg-transform-rotate-135 {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-lg-transform-rotate-180 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-lg-transform-rotate-225 {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-lg-transform-rotate-270 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-lg-transform-rotate-315 {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Regular */
    /* #region Active */
    .ci-lg-a-transform-rotate-45.active, .ci-element.active .ci-lg-a-transform-rotate-45 {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-lg-a-transform-rotate-90.active, .ci-element.active .ci-lg-a-transform-rotate-90 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-lg-a-transform-rotate-135.active, .ci-element.active .ci-lg-a-transform-rotate-135 {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-lg-a-transform-rotate-180.active, .ci-element.active .ci-lg-a-transform-rotate-180 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-lg-a-transform-rotate-225.active, .ci-element.active .ci-lg-a-transform-rotate-225 {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-lg-a-transform-rotate-270.active, .ci-element.active .ci-lg-a-transform-rotate-270 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-lg-a-transform-rotate-315.active, .ci-element.active .ci-lg-a-transform-rotate-315 {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Active */
    /* #region Hover */
    .ci-lg-h-transform-rotate-45:hover, .ci-element:hover .ci-lg-h-transform-rotate-45 {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-lg-h-transform-rotate-90:hover, .ci-element:hover .ci-lg-h-transform-rotate-90 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-lg-h-transform-rotate-135:hover, .ci-element:hover .ci-lg-h-transform-rotate-135 {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-lg-h-transform-rotate-180:hover, .ci-element:hover .ci-lg-h-transform-rotate-180 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-lg-h-transform-rotate-225:hover, .ci-element:hover .ci-lg-h-transform-rotate-225 {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-lg-h-transform-rotate-270:hover, .ci-element:hover .ci-lg-h-transform-rotate-270 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-lg-h-transform-rotate-315:hover, .ci-element:hover .ci-lg-h-transform-rotate-315 {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Hover */
    /* #region Press */
    .ci-lg-p-transform-rotate-45:active, .ci-element:active .ci-lg-p-transform-rotate-45 {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-lg-p-transform-rotate-90:active, .ci-element:active .ci-lg-p-transform-rotate-90 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-lg-p-transform-rotate-135:active, .ci-element:active .ci-lg-p-transform-rotate-135 {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-lg-p-transform-rotate-180:active, .ci-element:active .ci-lg-p-transform-rotate-180 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-lg-p-transform-rotate-225:active, .ci-element:active .ci-lg-p-transform-rotate-225 {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-lg-p-transform-rotate-270:active, .ci-element:active .ci-lg-p-transform-rotate-270 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-lg-p-transform-rotate-315:active, .ci-element:active .ci-lg-p-transform-rotate-315 {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Press */
    /* #region Disabled */
    .ci-lg-d-transform-rotate-45.disabled, .ci-element.disabled .ci-lg-d-transform-rotate-45,
    .ci-element[disabled='disabled'] .ci-lg-d-transform-rotate-45, .ci-element:disabled .ci-lg-d-transform-rotate-45,
    .ci-lg-d-transform-rotate-45[disabled='disabled'], .ci-lg-d-transform-rotate-45:disabled {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-lg-d-transform-rotate-90.disabled, .ci-element.disabled .ci-lg-d-transform-rotate-90,
    .ci-element[disabled='disabled'] .ci-lg-d-transform-rotate-90, .ci-element:disabled .ci-lg-d-transform-rotate-90,
    .ci-lg-d-transform-rotate-90[disabled='disabled'], .ci-lg-d-transform-rotate-90:disabled {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-lg-d-transform-rotate-135.disabled, .ci-element.disabled .ci-lg-d-transform-rotate-135,
    .ci-element[disabled='disabled'] .ci-lg-d-transform-rotate-135, .ci-element:disabled .ci-lg-d-transform-rotate-135,
    .ci-lg-d-transform-rotate-135[disabled='disabled'], .ci-lg-d-transform-rotate-135:disabled {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-lg-d-transform-rotate-180.disabled, .ci-element.disabled .ci-lg-d-transform-rotate-180,
    .ci-element[disabled='disabled'] .ci-lg-d-transform-rotate-180, .ci-element:disabled .ci-lg-d-transform-rotate-180,
    .ci-lg-d-transform-rotate-180[disabled='disabled'], .ci-lg-d-transform-rotate-180:disabled {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-lg-d-transform-rotate-225.disabled, .ci-element.disabled .ci-lg-d-transform-rotate-225,
    .ci-element[disabled='disabled'] .ci-lg-d-transform-rotate-225, .ci-element:disabled .ci-lg-d-transform-rotate-225,
    .ci-lg-d-transform-rotate-225[disabled='disabled'], .ci-lg-d-transform-rotate-225:disabled {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-lg-d-transform-rotate-270.disabled, .ci-element.disabled .ci-lg-d-transform-rotate-270,
    .ci-element[disabled='disabled'] .ci-lg-d-transform-rotate-270, .ci-element:disabled .ci-lg-d-transform-rotate-270,
    .ci-lg-d-transform-rotate-270[disabled='disabled'], .ci-lg-d-transform-rotate-270:disabled {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-lg-d-transform-rotate-315.disabled, .ci-element.disabled .ci-lg-d-transform-rotate-315,
    .ci-element[disabled='disabled'] .ci-lg-d-transform-rotate-315, .ci-element:disabled .ci-lg-d-transform-rotate-315,
    .ci-lg-d-transform-rotate-315[disabled='disabled'], .ci-lg-d-transform-rotate-315:disabled {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Disabled */
}

@media (min-width: 1200px) {
    /* #region Regular */
    .ci-xl-transform-rotate-45 {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-xl-transform-rotate-90 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-xl-transform-rotate-135 {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-xl-transform-rotate-180 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-xl-transform-rotate-225 {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-xl-transform-rotate-270 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-xl-transform-rotate-315 {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Regular */
    /* #region Active */
    .ci-xl-a-transform-rotate-45.active, .ci-element.active .ci-xl-a-transform-rotate-45 {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-xl-a-transform-rotate-90.active, .ci-element.active .ci-xl-a-transform-rotate-90 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-xl-a-transform-rotate-135.active, .ci-element.active .ci-xl-a-transform-rotate-135 {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-xl-a-transform-rotate-180.active, .ci-element.active .ci-xl-a-transform-rotate-180 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-xl-a-transform-rotate-225.active, .ci-element.active .ci-xl-a-transform-rotate-225 {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-xl-a-transform-rotate-270.active, .ci-element.active .ci-xl-a-transform-rotate-270 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-xl-a-transform-rotate-315.active, .ci-element.active .ci-xl-a-transform-rotate-315 {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Active */
    /* #region Hover */
    .ci-xl-h-transform-rotate-45:hover, .ci-element:hover .ci-xl-h-transform-rotate-45 {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-xl-h-transform-rotate-90:hover, .ci-element:hover .ci-xl-h-transform-rotate-90 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-xl-h-transform-rotate-135:hover, .ci-element:hover .ci-xl-h-transform-rotate-135 {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-xl-h-transform-rotate-180:hover, .ci-element:hover .ci-xl-h-transform-rotate-180 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-xl-h-transform-rotate-225:hover, .ci-element:hover .ci-xl-h-transform-rotate-225 {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-xl-h-transform-rotate-270:hover, .ci-element:hover .ci-xl-h-transform-rotate-270 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-xl-h-transform-rotate-315:hover, .ci-element:hover .ci-xl-h-transform-rotate-315 {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Hover */
    /* #region Press */
    .ci-xl-p-transform-rotate-45:active, .ci-element:active .ci-xl-p-transform-rotate-45 {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-xl-p-transform-rotate-90:active, .ci-element:active .ci-xl-p-transform-rotate-90 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-xl-p-transform-rotate-135:active, .ci-element:active .ci-xl-p-transform-rotate-135 {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-xl-p-transform-rotate-180:active, .ci-element:active .ci-xl-p-transform-rotate-180 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-xl-p-transform-rotate-225:active, .ci-element:active .ci-xl-p-transform-rotate-225 {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-xl-p-transform-rotate-270:active, .ci-element:active .ci-xl-p-transform-rotate-270 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-xl-p-transform-rotate-315:active, .ci-element:active .ci-xl-p-transform-rotate-315 {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Press */
    /* #region Disabled */
    .ci-xl-d-transform-rotate-45.disabled, .ci-element.disabled .ci-xl-d-transform-rotate-45,
    .ci-element[disabled='disabled'] .ci-xl-d-transform-rotate-45, .ci-element:disabled .ci-xl-d-transform-rotate-45,
    .ci-xl-d-transform-rotate-45[disabled='disabled'], .ci-xl-d-transform-rotate-45:disabled {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ci-xl-d-transform-rotate-90.disabled, .ci-element.disabled .ci-xl-d-transform-rotate-90,
    .ci-element[disabled='disabled'] .ci-xl-d-transform-rotate-90, .ci-element:disabled .ci-xl-d-transform-rotate-90,
    .ci-xl-d-transform-rotate-90[disabled='disabled'], .ci-xl-d-transform-rotate-90:disabled {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .ci-xl-d-transform-rotate-135.disabled, .ci-element.disabled .ci-xl-d-transform-rotate-135,
    .ci-element[disabled='disabled'] .ci-xl-d-transform-rotate-135, .ci-element:disabled .ci-xl-d-transform-rotate-135,
    .ci-xl-d-transform-rotate-135[disabled='disabled'], .ci-xl-d-transform-rotate-135:disabled {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .ci-xl-d-transform-rotate-180.disabled, .ci-element.disabled .ci-xl-d-transform-rotate-180,
    .ci-element[disabled='disabled'] .ci-xl-d-transform-rotate-180, .ci-element:disabled .ci-xl-d-transform-rotate-180,
    .ci-xl-d-transform-rotate-180[disabled='disabled'], .ci-xl-d-transform-rotate-180:disabled {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ci-xl-d-transform-rotate-225.disabled, .ci-element.disabled .ci-xl-d-transform-rotate-225,
    .ci-element[disabled='disabled'] .ci-xl-d-transform-rotate-225, .ci-element:disabled .ci-xl-d-transform-rotate-225,
    .ci-xl-d-transform-rotate-225[disabled='disabled'], .ci-xl-d-transform-rotate-225:disabled {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .ci-xl-d-transform-rotate-270.disabled, .ci-element.disabled .ci-xl-d-transform-rotate-270,
    .ci-element[disabled='disabled'] .ci-xl-d-transform-rotate-270, .ci-element:disabled .ci-xl-d-transform-rotate-270,
    .ci-xl-d-transform-rotate-270[disabled='disabled'], .ci-xl-d-transform-rotate-270:disabled {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .ci-xl-d-transform-rotate-315.disabled, .ci-element.disabled .ci-xl-d-transform-rotate-315,
    .ci-element[disabled='disabled'] .ci-xl-d-transform-rotate-315, .ci-element:disabled .ci-xl-d-transform-rotate-315,
    .ci-xl-d-transform-rotate-315[disabled='disabled'], .ci-xl-d-transform-rotate-315:disabled {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    /* #endregion Disabled */
}
/* #endregion - Rotation ---- */

/* #region ------ None ------ */
/* #region Regular */
.ci-transform-none, .ci-xs-transform-none {
    -webkit-transform: none;
    transform: none;
}

/* #endregion Regular */
/* #region Active */
.ci-a-transform-none.active, .ci-element.active .ci-a-transform-none,
.ci-xs-a-transform-none.active, .ci-element.active .ci-xs-a-transform-none {
    -webkit-transform: none;
    transform: none;
}
/* #endregion Active */
/* #region Hover */
.ci-h-transform-none:hover, .ci-element:hover .ci-h-transform-none,
.ci-xs-h-transform-none:hover, .ci-element:hover .ci-xs-h-transform-none {
    -webkit-transform: none;
    transform: none;
}
/* #endregion Hover */
/* #region Press */
.ci-p-transform-none:active, .ci-element:active .ci-p-transform-none,
.ci-xs-p-transform-none:active, .ci-element:active .ci-xs-p-transform-none {
    -webkit-transform: none;
    transform: none;
}
/* #endregion Press */
/* #region Disabled */
.ci-d-transform-none.disabled, .ci-element.disabled .ci-d-transform-none,
.ci-element[disabled='disabled'] .ci-d-transform-none, .ci-element:disabled .ci-d-transform-none,
.ci-d-transform-none[disabled='disabled'], .ci-d-transform-none:disabled,
.ci-xs-d-transform-none.disabled, .ci-element.disabled .ci-xs-d-transform-none,
.ci-element[disabled='disabled'] .ci-xs-d-transform-none, .ci-element:disabled .ci-xs-d-transform-none,
.ci-xs-d-transform-none[disabled='disabled'], .ci-xs-d-transform-none:disabled {
    -webkit-transform: none;
    transform: none;
}
/*#endregion Disabled */
@media (min-width: 576px) {
    /* #region Regular */
    .ci-sm-transform-none {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Regular */
    /* #region Active */
    .ci-sm-a-transform-none.active, .ci-element.active .ci-sm-a-transform-none {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Active */
    /* #region Hover */
    .ci-sm-h-transform-none:hover, .ci-element:hover .ci-sm-h-transform-none {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Hover */
    /* #region Press */
    .ci-sm-p-transform-none:active, .ci-element:active .ci-sm-p-transform-none {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Press */
    /* #region Disabled */
    .ci-sm-d-transform-none.disabled, .ci-element.disabled .ci-sm-d-transform-none,
    .ci-element[disabled='disabled'] .ci-sm-d-transform-none, .ci-element:disabled .ci-sm-d-transform-none,
    .ci-sm-d-transform-none[disabled='disabled'], .ci-sm-d-transform-none:disabled {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Disabled */
}
@media (min-width: 768px) {
    /* #region Regular */
    .ci-md-transform-none {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Regular */
    /* #region Active */
    .ci-md-a-transform-none.active, .ci-element.active .ci-md-a-transform-none {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Active */
    /* #region Hover */
    .ci-md-h-transform-none:hover, .ci-element:hover .ci-md-h-transform-none {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Hover */
    /* #region Press */
    .ci-md-p-transform-none:active, .ci-element:active .ci-md-p-transform-none {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Press */
    /* #region Disabled */
    .ci-md-d-transform-none.disabled, .ci-element.disabled .ci-md-d-transform-none,
    .ci-element[disabled='disabled'] .ci-md-d-transform-none, .ci-element:disabled .ci-md-d-transform-none,
    .ci-md-d-transform-none[disabled='disabled'], .ci-md-d-transform-none:disabled {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Disabled */
}

@media (min-width: 992px) {
    /* #region Regular */
    .ci-lg-transform-none {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Regular */
    /* #region Active */
    .ci-lg-a-transform-none.active, .ci-element.active .ci-lg-a-transform-none {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Active */
    /* #region Hover */
    .ci-lg-h-transform-none:hover, .ci-element:hover .ci-lg-h-transform-none {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Hover */
    /* #region Press */
    .ci-lg-p-transform-none:active, .ci-element:active .ci-lg-p-transform-none {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Press */
    /* #region Disabled */
    .ci-lg-d-transform-none.disabled, .ci-element.disabled .ci-lg-d-transform-none,
    .ci-element[disabled='disabled'] .ci-lg-d-transform-none, .ci-element:disabled .ci-lg-d-transform-none,
    .ci-lg-d-transform-none[disabled='disabled'], .ci-lg-d-transform-none:disabled {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Disabled */
}

@media (min-width: 1200px) {
    /* #region Regular */
    .ci-xl-transform-none {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Regular */
    /* #region Active */
    .ci-xl-a-transform-none.active, .ci-element.active .ci-xl-a-transform-none {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Active */
    /* #region Hover */
    .ci-xl-h-transform-none:hover, .ci-element:hover .ci-xl-h-transform-none {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Hover */
    /* #region Press */
    .ci-xl-p-transform-none:active, .ci-element:active .ci-xl-p-transform-none {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Press */
    /* #region Disabled */
    .ci-xl-d-transform-none.disabled, .ci-element.disabled .ci-xl-d-transform-none,
    .ci-element[disabled='disabled'] .ci-xl-d-transform-none, .ci-element:disabled .ci-xl-d-transform-none,
    .ci-xl-d-transform-none[disabled='disabled'], .ci-xl-d-transform-none:disabled {
        -webkit-transform: none;
        transform: none;
    }
    /* #endregion Disabled */
}
/* #endregion --- None ------ */

/* #endregion -------- Transformations -------------- */
/* #region -------------- Animations ---------------- */

/* #region Regular */
.ci-animation-rotation-l:before, .ci-xs-animation-rotation-l:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: rotation-l 0.8s linear infinite;
    -webkit-animation: rotation-l 0.8s linear infinite;
}

.ci-animation-rotation-r:before, .ci-xs-animation-rotation-r:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: rotation-r 0.8s linear infinite;
    -webkit-animation: rotation-r 0.8s linear infinite;
}

.ci-animation-vibration:before, .ci-xs-animation-vibration:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: vibration 1s ease infinite;
    -webkit-animation: vibration 1s ease infinite;
}

.ci-animation-pulsing:before, .ci-xs-animation-pulsing:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: pulsing 0.6s ease infinite;
    -webkit-animation: pulsing 0.6s ease infinite;
}

.ci-animation-shaking-x:before, .ci-xs-animation-shaking-x:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: shaking-x 1.2s ease infinite;
    -webkit-animation: shaking-x 1.2s ease infinite;
}

.ci-animation-shaking-y:before, .ci-xs-animation-shaking-y:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: shaking-y 1.2s ease infinite;
    -webkit-animation: shaking-y 1.2s ease infinite;
}

.ci-animation-bangle:before, .ci-xs-animation-bangle:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    animation: bangle 1.6s ease infinite;
    -webkit-animation: bangle 1.6s ease infinite;
}

.ci-animation-swing:before, .ci-xs-animation-swing:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    animation: swing 3s ease infinite;
    -webkit-animation: swing 3s ease infinite;
}

.ci-animation-jumping:before, .ci-xs-animation-jumping:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    animation: jumping 2s ease-in-out infinite;
    -webkit-animation: jumping 2s ease-in-out infinite;
}

.ci-animation-bouncing:before, .ci-xs-animation-bouncing:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    animation: bouncing 0.2s ease infinite alternate;
    -webkit-animation: bouncing 0.2s ease infinite alternate;
}


.ci-animation-stop:before, .ci-xs-animation-stop:before {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

.ci-animation-none:before, .ci-xs-animation-none:before {
    animation: none;
    -webkit-animation: none;
}
/* #endregion Regular */
/* #region Active */
.ci-a-animation-rotation-l.active:before, .ci-element.active .ci-a-animation-rotation-l:before,
.ci-xs-a-animation-rotation-l.active:before, .ci-element.active .ci-xs-a-animation-rotation-l:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: rotation-l 0.8s linear infinite;
    -webkit-animation: rotation-l 0.8s linear infinite;
}

.ci-a-animation-rotation-r.active:before, .ci-element.active .ci-a-animation-rotation-r:before,
.ci-xs-a-animation-rotation-r.active:before, .ci-element.active .ci-xs-a-animation-rotation-r:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: rotation-r 0.8s linear infinite;
    -webkit-animation: rotation-r 0.8s linear infinite;
}

.ci-a-animation-vibration.active:before, .ci-element.active .ci-a-animation-vibration:before,
.ci-xs-a-animation-vibration.active:before, .ci-element.active .ci-xs-a-animation-vibration:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: vibration 1s ease infinite;
    -webkit-animation: vibration 1s ease infinite;
}

.ci-a-animation-pulsing.active:before, .ci-element.active .ci-a-animation-pulsing:before,
.ci-xs-a-animation-pulsing.active:before, .ci-element.active .ci-xs-a-animation-pulsing:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: pulsing 0.6s ease infinite;
    -webkit-animation: pulsing 0.6s ease infinite;
}

.ci-a-animation-shaking-x.active:before, .ci-element.active .ci-a-animation-shaking-x:before,
.ci-xs-a-animation-shaking-x.active:before, .ci-element.active .ci-xs-a-animation-shaking-x:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: shaking-x 1.2s ease infinite;
    -webkit-animation: shaking-x 1.2s ease infinite;
}

.ci-a-animation-shaking-y.active:before, .ci-element.active .ci-a-animation-shaking-y:before,
.ci-xs-a-animation-shaking-y.active:before, .ci-element.active .ci-xs-a-animation-shaking-y:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: shaking-y 1.2s ease infinite;
    -webkit-animation: shaking-y 1.2s ease infinite;
}

.ci-a-animation-bangle.active:before, .ci-element.active .ci-a-animation-bangle:before,
.ci-xs-a-animation-bangle.active:before, .ci-element.active .ci-xs-a-animation-bangle:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    animation: bangle 1.6s ease infinite;
    -webkit-animation: bangle 1.6s ease infinite;
}

.ci-a-animation-swing.active:before, .ci-element.active .ci-a-animation-swing:before,
.ci-xs-a-animation-swing.active:before, .ci-element.active .ci-xs-a-animation-swing:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    animation: swing 3s ease infinite;
    -webkit-animation: swing 3s ease infinite;
}

.ci-a-animation-jumping.active:before, .ci-element.active .ci-a-animation-jumping:before,
.ci-xs-a-animation-jumping.active:before, .ci-element.active .ci-xs-a-animation-jumping:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    animation: jumping 2s ease-in-out infinite;
    -webkit-animation: jumping 2s ease-in-out infinite;
}

.ci-a-animation-bouncing.active:before, .ci-element.active .ci-a-animation-bouncing:before,
.ci-xs-a-animation-bouncing.active:before, .ci-element.active .ci-xs-a-animation-bouncing:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    animation: bouncing 0.2s ease infinite alternate;
    -webkit-animation: bouncing 0.2s ease infinite alternate;
}

.ci-a-animation-stop.active:before, .ci-element.active .ci-a-animation-stop:before,
.ci-xs-a-animation-stop.active:before, .ci-element.active .ci-xs-a-animation-stop:before {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

.ci-a-animation-none.active:before, .ci-element.active .ci-a-animation-none:before,
.ci-xs-a-animation-none.active:before, .ci-element.active .ci-xs-a-animation-none:before {
    animation: none;
    -webkit-animation: none;
}
/* #endregion Active */
/* #region Hover  */
.ci-h-animation-rotation-l:hover:before, .ci-element:hover .ci-h-animation-rotation-l:before,
.ci-xs-h-animation-rotation-l:hover:before, .ci-element:hover .ci-xs-h-animation-rotation-l:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: rotation-l 0.8s linear infinite;
    -webkit-animation: rotation-l 0.8s linear infinite;
}

.ci-h-animation-rotation-r:hover:before, .ci-element:hover .ci-h-animation-rotation-r:before,
.ci-xs-h-animation-rotation-r:hover:before, .ci-element:hover .ci-xs-h-animation-rotation-r:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: rotation-r 0.8s linear infinite;
    -webkit-animation: rotation-r 0.8s linear infinite;
}

.ci-h-animation-vibration:hover:before, .ci-element:hover .ci-h-animation-vibration:before,
.ci-xs-h-animation-vibration:hover:before, .ci-element:hover .ci-xs-h-animation-vibration:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: vibration 1s ease infinite;
    -webkit-animation: vibration 1s ease infinite;
}

.ci-h-animation-pulsing:hover:before, .ci-element:hover .ci-h-animation-pulsing:before,
.ci-xs-h-animation-pulsing:hover:before, .ci-element:hover .ci-xs-h-animation-pulsing:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: pulsing 0.6s ease infinite;
    -webkit-animation: pulsing 0.6s ease infinite;
}

.ci-h-animation-shaking-x:hover:before, .ci-element:hover .ci-h-animation-shaking-x:before,
.ci-xs-h-animation-shaking-x:hover:before, .ci-element:hover .ci-xs-h-animation-shaking-x:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: shaking-x 1.2s ease infinite;
    -webkit-animation: shaking-x 1.2s ease infinite;
}

.ci-h-animation-shaking-y:hover:before, .ci-element:hover .ci-h-animation-shaking-y:before,
.ci-xs-h-animation-shaking-y:hover:before, .ci-element:hover .ci-xs-h-animation-shaking-y:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: shaking-y 1.2s ease infinite;
    -webkit-animation: shaking-y 1.2s ease infinite;
}

.ci-h-animation-bangle:hover:before, .ci-element:hover .ci-h-animation-bangle:before,
.ci-xs-h-animation-bangle:hover:before, .ci-element:hover .ci-xs-h-animation-bangle:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    animation: bangle 1.6s ease infinite;
    -webkit-animation: bangle 1.6s ease infinite;
}

.ci-h-animation-swing:hover:before, .ci-element:hover .ci-h-animation-swing:before,
.ci-xs-h-animation-swing:hover:before, .ci-element:hover .ci-xs-h-animation-swing:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    animation: swing 3s ease infinite;
    -webkit-animation: swing 3s ease infinite;
}

.ci-h-animation-jumping:hover:before, .ci-element:hover .ci-h-animation-jumping:before,
.ci-xs-h-animation-jumping:hover:before, .ci-element:hover .ci-xs-h-animation-jumping:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    animation: jumping 2s ease-in-out infinite;
    -webkit-animation: jumping 2s ease-in-out infinite;
}

.ci-h-animation-bouncing:hover:before, .ci-element:hover .ci-h-animation-bouncing:before,
.ci-xs-h-animation-bouncing:hover:before, .ci-element:hover .ci-xs-h-animation-bouncing:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    animation: bouncing 0.2s ease infinite alternate;
    -webkit-animation: bouncing 0.2s ease infinite alternate;
}

.ci-h-animation-stop:hover:before, .ci-element:hover .ci-h-animation-stop:before,
.ci-xs-h-animation-stop:hover:before, .ci-element:hover .ci-xs-h-animation-stop:before {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

.ci-h-animation-none:hover:before, .ci-element:hover .ci-h-animation-none:before,
.ci-xs-h-animation-none:hover:before, .ci-element:hover .ci-xs-h-animation-none:before {
    animation: none;
    -webkit-animation: none;
}
/* #endregion Hover */
/* #region Press */
.ci-p-animation-rotation-l:active:before, .ci-element:active .ci-p-animation-rotation-l:before,
.ci-xs-p-animation-rotation-l:active:before, .ci-element:active .ci-xs-p-animation-rotation-l:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: rotation-l 0.8s linear infinite;
    -webkit-animation: rotation-l 0.8s linear infinite;
}

.ci-p-animation-rotation-r:active:before, .ci-element:active .ci-p-animation-rotation-r:before,
.ci-xs-p-animation-rotation-r:active:before, .ci-element:active .ci-xs-p-animation-rotation-r:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: rotation-r 0.8s linear infinite;
    -webkit-animation: rotation-r 0.8s linear infinite;
}

.ci-p-animation-vibration:active:before, .ci-element:active .ci-p-animation-vibration:before,
.ci-xs-p-animation-vibration:active:before, .ci-element:active .ci-xs-p-animation-vibration:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: vibration 1s ease infinite;
    -webkit-animation: vibration 1s ease infinite;
}

.ci-p-animation-pulsing:active:before, .ci-element:active .ci-p-animation-pulsing:before,
.ci-xs-p-animation-pulsing:active:before, .ci-element:active .ci-xs-p-animation-pulsing:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: pulsing 0.6s ease infinite;
    -webkit-animation: pulsing 0.6s ease infinite;
}

.ci-p-animation-shaking-x:active:before, .ci-element:active .ci-p-animation-shaking-x:before,
.ci-xs-p-animation-shaking-x:active:before, .ci-element:active .ci-xs-p-animation-shaking-x:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: shaking-x 1.2s ease infinite;
    -webkit-animation: shaking-x 1.2s ease infinite;
}

.ci-p-animation-shaking-y:active:before, .ci-element:active .ci-p-animation-shaking-y:before,
.ci-xs-p-animation-shaking-y:active:before, .ci-element:active .ci-xs-p-animation-shaking-y:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: shaking-y 1.2s ease infinite;
    -webkit-animation: shaking-y 1.2s ease infinite;
}

.ci-p-animation-bangle:active:before, .ci-element:active .ci-p-animation-bangle:before,
.ci-xs-p-animation-bangle:active:before, .ci-element:active .ci-xs-p-animation-bangle:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    animation: bangle 1.6s ease infinite;
    -webkit-animation: bangle 1.6s ease infinite;
}

.ci-p-animation-swing:active:before, .ci-element:active .ci-p-animation-swing:before,
.ci-xs-p-animation-swing:active:before, .ci-element:active .ci-xs-p-animation-swing:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    animation: swing 3s ease infinite;
    -webkit-animation: swing 3s ease infinite;
}

.ci-p-animation-jumping:active:before, .ci-element:active .ci-p-animation-jumping:before,
.ci-xs-p-animation-jumping:active:before, .ci-element:active .ci-xs-p-animation-jumping:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    animation: jumping 2s ease-in-out infinite;
    -webkit-animation: jumping 2s ease-in-out infinite;
}

.ci-p-animation-bouncing:active:before, .ci-element:active .ci-p-animation-bouncing:before,
.ci-xs-p-animation-bouncing:active:before, .ci-element:active .ci-xs-p-animation-bouncing:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    animation: bouncing 0.2s ease infinite alternate;
    -webkit-animation: bouncing 0.2s ease infinite alternate;
}

.ci-p-animation-stop:active:before, .ci-element:active .ci-p-animation-stop:before,
.ci-xs-p-animation-stop:active:before, .ci-element:active .ci-xs-p-animation-stop:before {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

.ci-p-animation-none:active:before, .ci-element:active .ci-p-animation-none:before,
.ci-xs-p-animation-none:active:before, .ci-element:active .ci-xs-p-animation-none:before {
    animation: none;
    -webkit-animation: none;
}
/* #endregion Press */
/* #region Disabled */

.ci-d-animation-rotation-l.disabled:before, .ci-d-animation-rotation-l:disabled:before, .ci-d-animation-rotation-l[disabled='disabled']:before,
.ci-element.disabled .ci-d-animation-rotation-l:before, .ci-element:disabled .ci-d-animation-rotation-l:before, .ci-element[disabled='disabled'] .ci-d-animation-rotation-l:before,
.ci-xs-d-animation-rotation-l.disabled:before, .ci-xs-d-animation-rotation-l:disabled:before, .ci-xs-d-animation-rotation-l[disabled='disabled']:before,
.ci-element.disabled .ci-xs-d-animation-rotation-l:before, .ci-element:disabled .ci-xs-d-animation-rotation-l:before, .ci-element[disabled='disabled'] .ci-xs-d-animation-rotation-l:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: rotation-l 0.8s linear infinite;
    -webkit-animation: rotation-l 0.8s linear infinite;
}


.ci-d-animation-rotation-r.disabled:before, .ci-d-animation-rotation-r:disabled:before, .ci-d-animation-rotation-r[disabled='disabled']:before,
.ci-element.disabled .ci-d-animation-rotation-r:before, .ci-element:disabled .ci-d-animation-rotation-r:before, .ci-element[disabled='disabled'] .ci-d-animation-rotation-r:before,
.ci-xs-d-animation-rotation-r.disabled:before, .ci-xs-d-animation-rotation-r:disabled:before, .ci-xs-d-animation-rotation-r[disabled='disabled']:before,
.ci-element.disabled .ci-xs-d-animation-rotation-r:before, .ci-element:disabled .ci-xs-d-animation-rotation-r:before, .ci-element[disabled='disabled'] .ci-xs-d-animation-rotation-r:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: rotation-r 0.8s linear infinite;
    -webkit-animation: rotation-r 0.8s linear infinite;
}

.ci-d-animation-vibration.disabled:before, .ci-d-animation-vibration:disabled:before, .ci-d-animation-vibration[disabled='disabled']:before,
.ci-element.disabled .ci-d-animation-vibration:before, .ci-element:disabled .ci-d-animation-vibration:before, .ci-element[disabled='disabled'] .ci-d-animation-vibration:before,
.ci-xs-d-animation-vibration.disabled:before, .ci-xs-d-animation-vibration:disabled:before, .ci-xs-d-animation-vibration[disabled='disabled']:before,
.ci-element.disabled .ci-xs-d-animation-vibration:before, .ci-element:disabled .ci-xs-d-animation-vibration:before, .ci-element[disabled='disabled'] .ci-xs-d-animation-vibration:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: vibration 1s ease infinite;
    -webkit-animation: vibration 1s ease infinite;
}

.ci-d-animation-pulsing.disabled:before, .ci-d-animation-pulsing:disabled:before, .ci-d-animation-pulsing[disabled='disabled']:before,
.ci-element.disabled .ci-d-animation-pulsing:before, .ci-element:disabled .ci-d-animation-pulsing:before, .ci-element[disabled='disabled'] .ci-d-animation-pulsing:before,
.ci-xs-d-animation-pulsing.disabled:before, .ci-xs-d-animation-pulsing:disabled:before, .ci-xs-d-animation-pulsing[disabled='disabled']:before,
.ci-element.disabled .ci-xs-d-animation-pulsing:before, .ci-element:disabled .ci-xs-d-animation-pulsing:before, .ci-element[disabled='disabled'] .ci-xs-d-animation-pulsing:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: pulsing 0.6s ease infinite;
    -webkit-animation: pulsing 0.6s ease infinite;
}

.ci-d-animation-shaking-x.disabled:before, .ci-d-animation-shaking-x:disabled:before, .ci-d-animation-shaking-x[disabled='disabled']:before,
.ci-element.disabled .ci-d-animation-shaking-x:before, .ci-element:disabled .ci-d-animation-shaking-x:before, .ci-element[disabled='disabled'] .ci-d-animation-shaking-x:before,
.ci-xs-d-animation-shaking-x.disabled:before, .ci-xs-d-animation-shaking-x:disabled:before, .ci-xs-d-animation-shaking-x[disabled='disabled']:before,
.ci-element.disabled .ci-xs-d-animation-shaking-x:before, .ci-element:disabled .ci-xs-d-animation-shaking-x:before, .ci-element[disabled='disabled'] .ci-xs-d-animation-shaking-x:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: shaking-x 1.2s ease infinite;
    -webkit-animation: shaking-x 1.2s ease infinite;
}

.ci-d-animation-shaking-y.disabled:before, .ci-d-animation-shaking-y:disabled:before, .ci-d-animation-shaking-y[disabled='disabled']:before,
.ci-element.disabled .ci-d-animation-shaking-y:before, .ci-element:disabled .ci-d-animation-shaking-y:before, .ci-element[disabled='disabled'] .ci-d-animation-shaking-y:before,
.ci-xs-d-animation-shaking-y.disabled:before, .ci-xs-d-animation-shaking-y:disabled:before, .ci-xs-d-animation-shaking-y[disabled='disabled']:before,
.ci-element.disabled .ci-xs-d-animation-shaking-y:before, .ci-element:disabled .ci-xs-d-animation-shaking-y:before, .ci-element[disabled='disabled'] .ci-xs-d-animation-shaking-y:before {
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation-play-state: running;
    -webkit-animation-play-state: running;
    animation: shaking-y 1.2s ease infinite;
    -webkit-animation: shaking-y 1.2s ease infinite;
}

.ci-d-animation-bangle.disabled:before, .ci-d-animation-bangle:disabled:before, .ci-d-animation-bangle[disabled='disabled']:before,
.ci-element.disabled .ci-d-animation-bangle:before, .ci-element:disabled .ci-d-animation-bangle:before, .ci-element[disabled='disabled'] .ci-d-animation-bangle:before,
.ci-xs-d-animation-bangle.disabled:before, .ci-xs-d-animation-bangle:disabled:before, .ci-xs-d-animation-bangle[disabled='disabled']:before,
.ci-element.disabled .ci-xs-d-animation-bangle:before, .ci-element:disabled .ci-xs-d-animation-bangle:before, .ci-element[disabled='disabled'] .ci-xs-d-animation-bangle:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    animation: bangle 1.6s ease infinite;
    -webkit-animation: bangle 1.6s ease infinite;
}

.ci-d-animation-swing.disabled:before, .ci-d-animation-swing:disabled:before, .ci-d-animation-swing[disabled='disabled']:before,
.ci-element.disabled .ci-d-animation-swing:before, .ci-element:disabled .ci-d-animation-swing:before, .ci-element[disabled='disabled'] .ci-d-animation-swing:before,
.ci-xs-d-animation-swing.disabled:before, .ci-xs-d-animation-swing:disabled:before, .ci-xs-d-animation-swing[disabled='disabled']:before,
.ci-element.disabled .ci-xs-d-animation-swing:before, .ci-element:disabled .ci-xs-d-animation-swing:before, .ci-element[disabled='disabled'] .ci-xs-d-animation-swing:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    animation: swing 3s ease infinite;
    -webkit-animation: swing 3s ease infinite;
}

.ci-d-animation-jumping.disabled:before, .ci-d-animation-jumping:disabled:before, .ci-d-animation-jumping[disabled='disabled']:before,
.ci-element.disabled .ci-d-animation-jumping:before, .ci-element:disabled .ci-d-animation-jumping:before, .ci-element[disabled='disabled'] .ci-d-animation-jumping:before,
.ci-xs-d-animation-jumping.disabled:before, .ci-xs-d-animation-jumping:disabled:before, .ci-xs-d-animation-jumping[disabled='disabled']:before,
.ci-element.disabled .ci-xs-d-animation-jumping:before, .ci-element:disabled .ci-xs-d-animation-jumping:before, .ci-element[disabled='disabled'] .ci-xs-d-animation-jumping:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    animation: jumping 2s ease-in-out infinite;
    -webkit-animation: jumping 2s ease-in-out infinite;
}

.ci-d-animation-bouncing.disabled:before, .ci-d-animation-bouncing:disabled:before, .ci-d-animation-bouncing[disabled='disabled']:before,
.ci-element.disabled .ci-d-animation-bouncing:before, .ci-element:disabled .ci-d-animation-bouncing:before, .ci-element[disabled='disabled'] .ci-d-animation-bouncing:before,
.ci-xs-d-animation-bouncing.disabled:before, .ci-xs-d-animation-bouncing:disabled:before, .ci-xs-d-animation-bouncing[disabled='disabled']:before,
.ci-element.disabled .ci-xs-d-animation-bouncing:before, .ci-element:disabled .ci-xs-d-animation-bouncing:before, .ci-element[disabled='disabled'] .ci-xs-d-animation-bouncing:before {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    animation: bouncing 0.2s ease infinite alternate;
    -webkit-animation: bouncing 0.2s ease infinite alternate;
}


.ci-d-animation-stop.disabled:before, .ci-d-animation-stop:disabled:before, .ci-d-animation-stop[disabled='disabled']:before,
.ci-element.disabled .ci-d-animation-stop:before, .ci-element:disabled .ci-d-animation-stop:before, .ci-element[disabled='disabled'] .ci-d-animation-stop:before,
.ci-xs-d-animation-stop.disabled:before, .ci-xs-d-animation-stop:disabled:before, .ci-xs-d-animation-stop[disabled='disabled']:before,
.ci-element.disabled .ci-xs-d-animation-stop:before, .ci-element:disabled .ci-xs-d-animation-stop:before, .ci-element[disabled='disabled'] .ci-xs-d-animation-stop:before {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

.ci-d-animation-none.disabled:before, .ci-d-animation-none:disabled:before, .ci-d-animation-none[disabled='disabled']:before,
.ci-element.disabled .ci-d-animation-none:before, .ci-element:disabled .ci-d-animation-none:before, .ci-element[disabled='disabled'] .ci-d-animation-none:before,
.ci-xs-d-animation-none.disabled:before, .ci-xs-d-animation-none:disabled:before, .ci-xs-d-animation-none[disabled='disabled']:before,
.ci-element.disabled .ci-xs-d-animation-none:before, .ci-element:disabled .ci-xs-d-animation-none:before, .ci-element[disabled='disabled'] .ci-xs-d-animation-none:before {
    animation: none;
    -webkit-animation: none;
}
/* #endregion Disabled */
@media (min-width: 576px) {
    /* #region Regular */
    .ci-sm-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }

    .ci-sm-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-sm-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-sm-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-sm-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-sm-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-sm-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-sm-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-sm-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-sm-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }


    .ci-sm-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-sm-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Regular */
    /* #region Active */
    .ci-sm-a-animation-rotation-l.active:before, .ci-element.active .ci-sm-a-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }

    .ci-sm-a-animation-rotation-r.active:before, .ci-element.active .ci-sm-a-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-sm-a-animation-vibration.active:before, .ci-element.active .ci-sm-a-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-sm-a-animation-pulsing.active:before, .ci-element.active .ci-sm-a-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-sm-a-animation-shaking-x.active:before, .ci-element.active .ci-sm-a-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-sm-a-animation-shaking-y.active:before, .ci-element.active .ci-sm-a-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-sm-a-animation-bangle.active:before, .ci-element.active .ci-sm-a-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-sm-a-animation-swing.active:before, .ci-element.active .ci-sm-a-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-sm-a-animation-jumping.active:before, .ci-element.active .ci-sm-a-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-sm-a-animation-bouncing.active:before, .ci-element.active .ci-sm-a-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }


    .ci-sm-a-animation-stop.active:before, .ci-element.active .ci-sm-a-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-sm-a-animation-none.active:before, .ci-element.active .ci-sm-a-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Active */
    /* #region Hover  */

    .ci-sm-h-animation-rotation-l:hover:before, .ci-element:hover .ci-sm-h-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }


    .ci-sm-h-animation-rotation-r:hover:before, .ci-element:hover .ci-sm-h-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-sm-h-animation-vibration:hover:before, .ci-element:hover .ci-sm-h-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-sm-h-animation-pulsing:hover:before, .ci-element:hover .ci-sm-h-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-sm-h-animation-shaking-x:hover:before, .ci-element:hover .ci-sm-h-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-sm-h-animation-shaking-y:hover:before, .ci-element:hover .ci-sm-h-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-sm-h-animation-bangle:hover:before, .ci-element:hover .ci-sm-h-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-sm-h-animation-swing:hover:before, .ci-element:hover .ci-sm-h-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-sm-h-animation-jumping:hover:before, .ci-element:hover .ci-sm-h-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-sm-h-animation-bouncing:hover:before, .ci-element:hover .ci-sm-h-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }


    .ci-sm-h-animation-stop:hover:before, .ci-element:hover .ci-sm-h-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-sm-h-animation-none:hover:before, .ci-element:hover .ci-sm-h-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Hover */
    /* #region Press */

    .ci-sm-p-animation-rotation-l:active:before, .ci-element:active .ci-sm-p-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }


    .ci-sm-p-animation-rotation-r:active:before, .ci-element:active .ci-sm-p-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-sm-p-animation-vibration:active:before, .ci-element:active .ci-sm-p-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-sm-p-animation-pulsing:active:before, .ci-element:active .ci-sm-p-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-sm-p-animation-shaking-x:active:before, .ci-element:active .ci-sm-p-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-sm-p-animation-shaking-y:active:before, .ci-element:active .ci-sm-p-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-sm-p-animation-bangle:active:before, .ci-element:active .ci-sm-p-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-sm-p-animation-swing:active:before, .ci-element:active .ci-sm-p-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-sm-p-animation-jumping:active:before, .ci-element:active .ci-sm-p-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-sm-p-animation-bouncing:active:before, .ci-element:active .ci-sm-p-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }


    .ci-sm-p-animation-stop:active:before, .ci-element:active .ci-sm-p-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-sm-p-animation-none:active:before, .ci-element:active .ci-sm-p-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Press */
    /* #region Disabled */

    .ci-sm-d-animation-rotation-l.disabled:before, .ci-sm-d-animation-rotation-l:disabled:before, .ci-sm-d-animation-rotation-l[disabled='disabled']:before,
    .ci-element.disabled .ci-sm-d-animation-rotation-l:before, .ci-element:disabled .ci-sm-d-animation-rotation-l:before, .ci-element[disabled='disabled'] .ci-sm-d-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }


    .ci-sm-d-animation-rotation-r.disabled:before, .ci-sm-d-animation-rotation-r:disabled:before, .ci-sm-d-animation-rotation-r[disabled='disabled']:before,
    .ci-element.disabled .ci-sm-d-animation-rotation-r:before, .ci-element:disabled .ci-sm-d-animation-rotation-r:before, .ci-element[disabled='disabled'] .ci-sm-d-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-sm-d-animation-vibration.disabled:before, .ci-sm-d-animation-vibration:disabled:before, .ci-sm-d-animation-vibration[disabled='disabled']:before,
    .ci-element.disabled .ci-sm-d-animation-vibration:before, .ci-element:disabled .ci-sm-d-animation-vibration:before, .ci-element[disabled='disabled'] .ci-sm-d-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-sm-d-animation-pulsing.disabled:before, .ci-sm-d-animation-pulsing:disabled:before, .ci-sm-d-animation-pulsing[disabled='disabled']:before,
    .ci-element.disabled .ci-sm-d-animation-pulsing:before, .ci-element:disabled .ci-sm-d-animation-pulsing:before, .ci-element[disabled='disabled'] .ci-sm-d-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-sm-d-animation-shaking-x.disabled:before, .ci-sm-d-animation-shaking-x:disabled:before, .ci-sm-d-animation-shaking-x[disabled='disabled']:before,
    .ci-element.disabled .ci-sm-d-animation-shaking-x:before, .ci-element:disabled .ci-sm-d-animation-shaking-x:before, .ci-element[disabled='disabled'] .ci-sm-d-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-sm-d-animation-shaking-y.disabled:before, .ci-sm-d-animation-shaking-y:disabled:before, .ci-sm-d-animation-shaking-y[disabled='disabled']:before,
    .ci-element.disabled .ci-sm-d-animation-shaking-y:before, .ci-element:disabled .ci-sm-d-animation-shaking-y:before, .ci-element[disabled='disabled'] .ci-sm-d-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-sm-d-animation-bangle.disabled:before, .ci-sm-d-animation-bangle:disabled:before, .ci-sm-d-animation-bangle[disabled='disabled']:before,
    .ci-element.disabled .ci-sm-d-animation-bangle:before, .ci-element:disabled .ci-sm-d-animation-bangle:before, .ci-element[disabled='disabled'] .ci-sm-d-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-sm-d-animation-swing.disabled:before, .ci-sm-d-animation-swing:disabled:before, .ci-sm-d-animation-swing[disabled='disabled']:before,
    .ci-element.disabled .ci-sm-d-animation-swing:before, .ci-element:disabled .ci-sm-d-animation-swing:before, .ci-element[disabled='disabled'] .ci-sm-d-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-sm-d-animation-jumping.disabled:before, .ci-sm-d-animation-jumping:disabled:before, .ci-sm-d-animation-jumping[disabled='disabled']:before,
    .ci-element.disabled .ci-sm-d-animation-jumping:before, .ci-element:disabled .ci-sm-d-animation-jumping:before, .ci-element[disabled='disabled'] .ci-sm-d-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-sm-d-animation-bouncing.disabled:before, .ci-sm-d-animation-bouncing:disabled:before, .ci-sm-d-animation-bouncing[disabled='disabled']:before,
    .ci-element.disabled .ci-sm-d-animation-bouncing:before, .ci-element:disabled .ci-sm-d-animation-bouncing:before, .ci-element[disabled='disabled'] .ci-sm-d-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }

    .ci-sm-d-animation-stop.disabled:before, .ci-sm-d-animation-stop:disabled:before, .ci-sm-d-animation-stop[disabled='disabled']:before,
    .ci-element.disabled .ci-sm-d-animation-stop:before, .ci-element:disabled .ci-sm-d-animation-stop:before, .ci-element[disabled='disabled'] .ci-sm-d-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-sm-d-animation-none.disabled:before, .ci-sm-d-animation-none:disabled:before, .ci-sm-d-animation-none[disabled='disabled']:before,
    .ci-element.disabled .ci-sm-d-animation-none:before, .ci-element:disabled .ci-sm-d-animation-none:before, .ci-element[disabled='disabled'] .ci-sm-d-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Disabled */
}
@media (min-width: 768px) {
    /* #region Regular */
    .ci-md-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }

    .ci-md-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-md-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-md-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-md-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-md-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-md-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-md-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-md-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-md-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }


    .ci-md-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-md-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Regular */
    /* #region Active */
    .ci-md-a-animation-rotation-l.active:before, .ci-element.active .ci-md-a-animation-rotation-l:before{
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }

    .ci-md-a-animation-rotation-r.active:before, .ci-element.active .ci-md-a-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-md-a-animation-vibration.active:before, .ci-element.active .ci-md-a-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-md-a-animation-pulsing.active:before, .ci-element.active .ci-md-a-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-md-a-animation-shaking-x.active:before, .ci-element.active .ci-md-a-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-md-a-animation-shaking-y.active:before, .ci-element.active .ci-md-a-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-md-a-animation-bangle.active:before, .ci-element.active .ci-md-a-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-md-a-animation-swing.active:before, .ci-element.active .ci-md-a-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-md-a-animation-jumping.active:before, .ci-element.active .ci-md-a-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-md-a-animation-bouncing.active:before, .ci-element.active .ci-md-a-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }


    .ci-md-a-animation-stop.active:before, .ci-element.active .ci-md-a-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-md-a-animation-none.active:before, .ci-element.active .ci-md-a-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Active */
    /* #region Hover  */

    .ci-md-h-animation-rotation-l:hover:before, .ci-element:hover .ci-md-h-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }


    .ci-md-h-animation-rotation-r:hover:before, .ci-element:hover .ci-md-h-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-md-h-animation-vibration:hover:before, .ci-element:hover .ci-md-h-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-md-h-animation-pulsing:hover:before, .ci-element:hover .ci-md-h-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-md-h-animation-shaking-x:hover:before, .ci-element:hover .ci-md-h-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-md-h-animation-shaking-y:hover:before, .ci-element:hover .ci-md-h-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-md-h-animation-bangle:hover:before, .ci-element:hover .ci-md-h-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-md-h-animation-swing:hover:before, .ci-element:hover .ci-md-h-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-md-h-animation-jumping:hover:before, .ci-element:hover .ci-md-h-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-md-h-animation-bouncing:hover:before, .ci-element:hover .ci-md-h-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }


    .ci-md-h-animation-stop:hover:before, .ci-element:hover .ci-md-h-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-md-h-animation-none:hover:before, .ci-element:hover .ci-md-h-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Hover */
    /* #region Press */

    .ci-md-p-animation-rotation-l:active:before, .ci-element:active .ci-md-p-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }


    .ci-md-p-animation-rotation-r:active:before, .ci-element:active .ci-md-p-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-md-p-animation-vibration:active:before, .ci-element:active .ci-md-p-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-md-p-animation-pulsing:active:before, .ci-element:active .ci-md-p-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-md-p-animation-shaking-x:active:before, .ci-element:active .ci-md-p-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-md-p-animation-shaking-y:active:before, .ci-element:active .ci-md-p-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-md-p-animation-bangle:active:before, .ci-element:active .ci-md-p-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-md-p-animation-swing:active:before, .ci-element:active .ci-md-p-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-md-p-animation-jumping:active:before, .ci-element:active .ci-md-p-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-md-p-animation-bouncing:active:before, .ci-element:active .ci-md-p-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }


    .ci-md-p-animation-stop:active:before, .ci-element:active .ci-md-p-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-md-p-animation-none:active:before, .ci-element:active .ci-md-p-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Press */
    /* #region Disabled */

    .ci-md-d-animation-rotation-l.disabled:before, .ci-md-d-animation-rotation-l:disabled:before, .ci-md-d-animation-rotation-l[disabled='disabled']:before,
    .ci-element.disabled .ci-md-d-animation-rotation-l:before, .ci-element:disabled .ci-md-d-animation-rotation-l:before, .ci-element[disabled='disabled'] .ci-md-d-animation-rotation-l:before{
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }


    .ci-md-d-animation-rotation-r.disabled:before, .ci-md-d-animation-rotation-r:disabled:before, .ci-md-d-animation-rotation-r[disabled='disabled']:before,
    .ci-element.disabled .ci-md-d-animation-rotation-r:before, .ci-element:disabled .ci-md-d-animation-rotation-r:before, .ci-element[disabled='disabled'] .ci-md-d-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-md-d-animation-vibration.disabled:before, .ci-md-d-animation-vibration:disabled:before, .ci-md-d-animation-vibration[disabled='disabled']:before,
    .ci-element.disabled .ci-md-d-animation-vibration:before, .ci-element:disabled .ci-md-d-animation-vibration:before, .ci-element[disabled='disabled'] .ci-md-d-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-md-d-animation-pulsing.disabled:before, .ci-md-d-animation-pulsing:disabled:before, .ci-md-d-animation-pulsing[disabled='disabled']:before,
    .ci-element.disabled .ci-md-d-animation-pulsing:before, .ci-element:disabled .ci-md-d-animation-pulsing:before, .ci-element[disabled='disabled'] .ci-md-d-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-md-d-animation-shaking-x.disabled:before, .ci-md-d-animation-shaking-x:disabled:before, .ci-md-d-animation-shaking-x[disabled='disabled']:before,
    .ci-element.disabled .ci-md-d-animation-shaking-x:before, .ci-element:disabled .ci-md-d-animation-shaking-x:before, .ci-element[disabled='disabled'] .ci-md-d-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-md-d-animation-shaking-y.disabled:before, .ci-md-d-animation-shaking-y:disabled:before, .ci-md-d-animation-shaking-y[disabled='disabled']:before,
    .ci-element.disabled .ci-md-d-animation-shaking-y:before, .ci-element:disabled .ci-md-d-animation-shaking-y:before, .ci-element[disabled='disabled'] .ci-md-d-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-md-d-animation-bangle.disabled:before, .ci-md-d-animation-bangle:disabled:before, .ci-md-d-animation-bangle[disabled='disabled']:before,
    .ci-element.disabled .ci-md-d-animation-bangle:before, .ci-element:disabled .ci-md-d-animation-bangle:before, .ci-element[disabled='disabled'] .ci-md-d-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-md-d-animation-swing.disabled:before, .ci-md-d-animation-swing:disabled:before, .ci-md-d-animation-swing[disabled='disabled']:before,
    .ci-element.disabled .ci-md-d-animation-swing:before, .ci-element:disabled .ci-md-d-animation-swing:before, .ci-element[disabled='disabled'] .ci-md-d-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-md-d-animation-jumping.disabled:before, .ci-md-d-animation-jumping:disabled:before, .ci-md-d-animation-jumping[disabled='disabled']:before,
    .ci-element.disabled .ci-md-d-animation-jumping:before, .ci-element:disabled .ci-md-d-animation-jumping:before, .ci-element[disabled='disabled'] .ci-md-d-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-md-d-animation-bouncing.disabled:before, .ci-md-d-animation-bouncing:disabled:before, .ci-md-d-animation-bouncing[disabled='disabled']:before,
    .ci-element.disabled .ci-md-d-animation-bouncing:before, .ci-element:disabled .ci-md-d-animation-bouncing:before, .ci-element[disabled='disabled'] .ci-md-d-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }

    .ci-md-d-animation-stop.disabled:before, .ci-md-d-animation-stop:disabled:before, .ci-md-d-animation-stop[disabled='disabled']:before,
    .ci-element.disabled .ci-md-d-animation-stop:before, .ci-element:disabled .ci-md-d-animation-stop:before, .ci-element[disabled='disabled'] .ci-md-d-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-md-d-animation-none.disabled:before, .ci-md-d-animation-none:disabled:before, .ci-md-d-animation-none[disabled='disabled']:before,
    .ci-element.disabled .ci-md-d-animation-none:before, .ci-element:disabled .ci-md-d-animation-none:before, .ci-element[disabled='disabled'] .ci-md-d-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Disabled */
}

@media (min-width: 992px) {

    /* #region Regular */
    .ci-lg-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }

    .ci-lg-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-lg-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-lg-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-lg-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-lg-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-lg-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-lg-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-lg-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-lg-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }


    .ci-lg-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-lg-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Regular */
    /* #region Active */
    .ci-lg-a-animation-rotation-l.active:before, .ci-element.active .ci-lg-a-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }

    .ci-lg-a-animation-rotation-r.active:before, .ci-element.active .ci-lg-a-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-lg-a-animation-vibration.active:before, .ci-element.active .ci-lg-a-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-lg-a-animation-pulsing.active:before, .ci-element.active .ci-lg-a-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-lg-a-animation-shaking-x.active:before, .ci-element.active .ci-lg-a-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-lg-a-animation-shaking-y.active:before, .ci-element.active .ci-lg-a-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-lg-a-animation-bangle.active:before, .ci-element.active .ci-lg-a-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-lg-a-animation-swing.active:before, .ci-element.active .ci-lg-a-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-lg-a-animation-jumping.active:before, .ci-element.active .ci-lg-a-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-lg-a-animation-bouncing.active:before, .ci-element.active .ci-lg-a-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }


    .ci-lg-a-animation-stop.active:before, .ci-element.active .ci-lg-a-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-lg-a-animation-none.active:before, .ci-element.active .ci-lg-a-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Active */
    /* #region Hover  */

    .ci-lg-h-animation-rotation-l:hover:before, .ci-element:hover .ci-lg-h-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }


    .ci-lg-h-animation-rotation-r:hover:before, .ci-element:hover .ci-lg-h-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-lg-h-animation-vibration:hover:before, .ci-element:hover .ci-lg-h-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-lg-h-animation-pulsing:hover:before, .ci-element:hover .ci-lg-h-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-lg-h-animation-shaking-x:hover:before, .ci-element:hover .ci-lg-h-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-lg-h-animation-shaking-y:hover:before, .ci-element:hover .ci-lg-h-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-lg-h-animation-bangle:hover:before, .ci-element:hover .ci-lg-h-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-lg-h-animation-swing:hover:before, .ci-element:hover .ci-lg-h-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-lg-h-animation-jumping:hover:before, .ci-element:hover .ci-lg-h-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-lg-h-animation-bouncing:hover:before, .ci-element:hover .ci-lg-h-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }


    .ci-lg-h-animation-stop:hover:before, .ci-element:hover .ci-lg-h-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-lg-h-animation-none:hover:before, .ci-element:hover .ci-lg-h-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Hover */
    /* #region Press */

    .ci-lg-p-animation-rotation-l:active:before, .ci-element:active .ci-lg-p-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }


    .ci-lg-p-animation-rotation-r:active:before, .ci-element:active .ci-lg-p-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-lg-p-animation-vibration:active:before, .ci-element:active .ci-lg-p-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-lg-p-animation-pulsing:active:before, .ci-element:active .ci-lg-p-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-lg-p-animation-shaking-x:active:before, .ci-element:active .ci-lg-p-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-lg-p-animation-shaking-y:active:before, .ci-element:active .ci-lg-p-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-lg-p-animation-bangle:active:before, .ci-element:active .ci-lg-p-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-lg-p-animation-swing:active:before, .ci-element:active .ci-lg-p-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-lg-p-animation-jumping:active:before, .ci-element:active .ci-lg-p-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-lg-p-animation-bouncing:active:before, .ci-element:active .ci-lg-p-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }


    .ci-lg-p-animation-stop:active:before, .ci-element:active .ci-lg-p-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-lg-p-animation-none:active:before, .ci-element:active .ci-lg-p-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Press */
    /* #region Disabled */

    .ci-lg-d-animation-rotation-l.disabled:before, .ci-lg-d-animation-rotation-l:disabled:before, .ci-lg-d-animation-rotation-l[disabled='disabled']:before,
    .ci-element.disabled .ci-lg-d-animation-rotation-l:before, .ci-element:disabled .ci-lg-d-animation-rotation-l:before, .ci-element[disabled='disabled'] .ci-lg-d-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }


    .ci-lg-d-animation-rotation-r.disabled:before, .ci-lg-d-animation-rotation-r:disabled:before, .ci-lg-d-animation-rotation-r[disabled='disabled']:before,
    .ci-element.disabled .ci-lg-d-animation-rotation-r:before, .ci-element:disabled .ci-lg-d-animation-rotation-r:before, .ci-element[disabled='disabled'] .ci-lg-d-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-lg-d-animation-vibration.disabled:before, .ci-lg-d-animation-vibration:disabled:before, .ci-lg-d-animation-vibration[disabled='disabled']:before,
    .ci-element.disabled .ci-lg-d-animation-vibration:before, .ci-element:disabled .ci-lg-d-animation-vibration:before, .ci-element[disabled='disabled'] .ci-lg-d-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-lg-d-animation-pulsing.disabled:before, .ci-lg-d-animation-pulsing:disabled:before, .ci-lg-d-animation-pulsing[disabled='disabled']:before,
    .ci-element.disabled .ci-lg-d-animation-pulsing:before, .ci-element:disabled .ci-lg-d-animation-pulsing:before, .ci-element[disabled='disabled'] .ci-lg-d-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-lg-d-animation-shaking-x.disabled:before, .ci-lg-d-animation-shaking-x:disabled:before, .ci-lg-d-animation-shaking-x[disabled='disabled']:before,
    .ci-element.disabled .ci-lg-d-animation-shaking-x:before, .ci-element:disabled .ci-lg-d-animation-shaking-x:before, .ci-element[disabled='disabled'] .ci-lg-d-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-lg-d-animation-shaking-y.disabled:before, .ci-lg-d-animation-shaking-y:disabled:before, .ci-lg-d-animation-shaking-y[disabled='disabled']:before,
    .ci-element.disabled .ci-lg-d-animation-shaking-y:before, .ci-element:disabled .ci-lg-d-animation-shaking-y:before, .ci-element[disabled='disabled'] .ci-lg-d-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-lg-d-animation-bangle.disabled:before, .ci-lg-d-animation-bangle:disabled:before, .ci-lg-d-animation-bangle[disabled='disabled']:before,
    .ci-element.disabled .ci-lg-d-animation-bangle:before, .ci-element:disabled .ci-lg-d-animation-bangle:before, .ci-element[disabled='disabled'] .ci-lg-d-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-lg-d-animation-swing.disabled:before, .ci-lg-d-animation-swing:disabled:before, .ci-lg-d-animation-swing[disabled='disabled']:before,
    .ci-element.disabled .ci-lg-d-animation-swing:before, .ci-element:disabled .ci-lg-d-animation-swing:before, .ci-element[disabled='disabled'] .ci-lg-d-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-lg-d-animation-jumping.disabled:before, .ci-lg-d-animation-jumping:disabled:before, .ci-lg-d-animation-jumping[disabled='disabled']:before,
    .ci-element.disabled .ci-lg-d-animation-jumping:before, .ci-element:disabled .ci-lg-d-animation-jumping:before, .ci-element[disabled='disabled'] .ci-lg-d-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-lg-d-animation-bouncing.disabled:before, .ci-lg-d-animation-bouncing:disabled:before, .ci-lg-d-animation-bouncing[disabled='disabled']:before,
    .ci-element.disabled .ci-lg-d-animation-bouncing:before, .ci-element:disabled .ci-lg-d-animation-bouncing:before, .ci-element[disabled='disabled'] .ci-lg-d-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }

    .ci-lg-d-animation-stop.disabled:before, .ci-lg-d-animation-stop:disabled:before, .ci-lg-d-animation-stop[disabled='disabled']:before,
    .ci-element.disabled .ci-lg-d-animation-stop:before, .ci-element:disabled .ci-lg-d-animation-stop:before, .ci-element[disabled='disabled'] .ci-lg-d-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-lg-d-animation-none.disabled:before, .ci-lg-d-animation-none:disabled:before, .ci-lg-d-animation-none[disabled='disabled']:before,
    .ci-element.disabled .ci-lg-d-animation-none:before, .ci-element:disabled .ci-lg-d-animation-none:before, .ci-element[disabled='disabled'] .ci-lg-d-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Disabled */
}

@media (min-width: 1200px) {
    /* #region Regular */
    .ci-xl-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }

    .ci-xl-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-xl-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-xl-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-xl-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-xl-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-xl-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-xl-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-xl-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-xl-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }


    .ci-xl-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-xl-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Regular */
    /* #region Active */
    .ci-xl-a-animation-rotation-l.active:before, .ci-element.active .ci-xl-a-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }

    .ci-xl-a-animation-rotation-r.active:before, .ci-element.active .ci-xl-a-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-xl-a-animation-vibration.active:before, .ci-element.active .ci-xl-a-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-xl-a-animation-pulsing.active:before, .ci-element.active .ci-xl-a-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-xl-a-animation-shaking-x.active:before, .ci-element.active .ci-xl-a-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-xl-a-animation-shaking-y.active:before, .ci-element.active .ci-xl-a-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-xl-a-animation-bangle.active:before, .ci-element.active .ci-xl-a-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-xl-a-animation-swing.active:before, .ci-element.active .ci-xl-a-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-xl-a-animation-jumping.active:before, .ci-element.active .ci-xl-a-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-xl-a-animation-bouncing.active:before, .ci-element.active .ci-xl-a-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }


    .ci-xl-a-animation-stop.active:before, .ci-element.active .ci-xl-a-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-xl-a-animation-none.active:before, .ci-element.active .ci-xl-a-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Active */
    /* #region Hover  */

    .ci-xl-h-animation-rotation-l:hover:before, .ci-element:hover .ci-xl-h-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }


    .ci-xl-h-animation-rotation-r:hover:before, .ci-element:hover .ci-xl-h-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-xl-h-animation-vibration:hover:before, .ci-element:hover .ci-xl-h-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-xl-h-animation-pulsing:hover:before, .ci-element:hover .ci-xl-h-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-xl-h-animation-shaking-x:hover:before, .ci-element:hover .ci-xl-h-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-xl-h-animation-shaking-y:hover:before, .ci-element:hover .ci-xl-h-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-xl-h-animation-bangle:hover:before, .ci-element:hover .ci-xl-h-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-xl-h-animation-swing:hover:before, .ci-element:hover .ci-xl-h-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-xl-h-animation-jumping:hover:before, .ci-element:hover .ci-xl-h-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-xl-h-animation-bouncing:hover:before, .ci-element:hover .ci-xl-h-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }


    .ci-xl-h-animation-stop:hover:before, .ci-element:hover .ci-xl-h-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-xl-h-animation-none:hover:before, .ci-element:hover .ci-xl-h-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Hover */
    /* #region Press */

    .ci-xl-p-animation-rotation-l:active:before, .ci-element:active .ci-xl-p-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }


    .ci-xl-p-animation-rotation-r:active:before, .ci-element:active .ci-xl-p-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-xl-p-animation-vibration:active:before, .ci-element:active .ci-xl-p-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-xl-p-animation-pulsing:active:before, .ci-element:active .ci-xl-p-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-xl-p-animation-shaking-x:active:before, .ci-element:active .ci-xl-p-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-xl-p-animation-shaking-y:active:before, .ci-element:active .ci-xl-p-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-xl-p-animation-bangle:active:before, .ci-element:active .ci-xl-p-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-xl-p-animation-swing:active:before, .ci-element:active .ci-xl-p-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-xl-p-animation-jumping:active:before, .ci-element:active .ci-xl-p-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-xl-p-animation-bouncing:active:before, .ci-element:active .ci-xl-p-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }


    .ci-xl-p-animation-stop:active:before, .ci-element:active .ci-xl-p-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-xl-p-animation-none:active:before, .ci-element:active .ci-xl-p-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Press */
    /* #region Disabled */

    .ci-xl-d-animation-rotation-l.disabled:before, .ci-xl-d-animation-rotation-l:disabled:before, .ci-xl-d-animation-rotation-l[disabled='disabled']:before,
    .ci-element.disabled .ci-xl-d-animation-rotation-l:before, .ci-element:disabled .ci-xl-d-animation-rotation-l:before, .ci-element[disabled='disabled'] .ci-xl-d-animation-rotation-l:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-l 0.8s linear infinite;
        -webkit-animation: rotation-l 0.8s linear infinite;
    }


    .ci-xl-d-animation-rotation-r.disabled:before, .ci-xl-d-animation-rotation-r:disabled:before, .ci-xl-d-animation-rotation-r[disabled='disabled']:before,
    .ci-element.disabled .ci-xl-d-animation-rotation-r:before, .ci-element:disabled .ci-xl-d-animation-rotation-r:before, .ci-element[disabled='disabled'] .ci-xl-d-animation-rotation-r:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: rotation-r 0.8s linear infinite;
        -webkit-animation: rotation-r 0.8s linear infinite;
    }

    .ci-xl-d-animation-vibration.disabled:before, .ci-xl-d-animation-vibration:disabled:before, .ci-xl-d-animation-vibration[disabled='disabled']:before,
    .ci-element.disabled .ci-xl-d-animation-vibration:before, .ci-element:disabled .ci-xl-d-animation-vibration:before, .ci-element[disabled='disabled'] .ci-xl-d-animation-vibration:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: vibration 1s ease infinite;
        -webkit-animation: vibration 1s ease infinite;
    }

    .ci-xl-d-animation-pulsing.disabled:before, .ci-xl-d-animation-pulsing:disabled:before, .ci-xl-d-animation-pulsing[disabled='disabled']:before,
    .ci-element.disabled .ci-xl-d-animation-pulsing:before, .ci-element:disabled .ci-xl-d-animation-pulsing:before, .ci-element[disabled='disabled'] .ci-xl-d-animation-pulsing:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: pulsing 0.6s ease infinite;
        -webkit-animation: pulsing 0.6s ease infinite;
    }

    .ci-xl-d-animation-shaking-x.disabled:before, .ci-xl-d-animation-shaking-x:disabled:before, .ci-xl-d-animation-shaking-x[disabled='disabled']:before,
    .ci-element.disabled .ci-xl-d-animation-shaking-x:before, .ci-element:disabled .ci-xl-d-animation-shaking-x:before, .ci-element[disabled='disabled'] .ci-xl-d-animation-shaking-x:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-x 1.2s ease infinite;
        -webkit-animation: shaking-x 1.2s ease infinite;
    }

    .ci-xl-d-animation-shaking-y.disabled:before, .ci-xl-d-animation-shaking-y:disabled:before, .ci-xl-d-animation-shaking-y[disabled='disabled']:before,
    .ci-element.disabled .ci-xl-d-animation-shaking-y:before, .ci-element:disabled .ci-xl-d-animation-shaking-y:before, .ci-element[disabled='disabled'] .ci-xl-d-animation-shaking-y:before {
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
        animation: shaking-y 1.2s ease infinite;
        -webkit-animation: shaking-y 1.2s ease infinite;
    }

    .ci-xl-d-animation-bangle.disabled:before, .ci-xl-d-animation-bangle:disabled:before, .ci-xl-d-animation-bangle[disabled='disabled']:before,
    .ci-element.disabled .ci-xl-d-animation-bangle:before, .ci-element:disabled .ci-xl-d-animation-bangle:before, .ci-element[disabled='disabled'] .ci-xl-d-animation-bangle:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: bangle 1.6s ease infinite;
        -webkit-animation: bangle 1.6s ease infinite;
    }

    .ci-xl-d-animation-swing.disabled:before, .ci-xl-d-animation-swing:disabled:before, .ci-xl-d-animation-swing[disabled='disabled']:before,
    .ci-element.disabled .ci-xl-d-animation-swing:before, .ci-element:disabled .ci-xl-d-animation-swing:before, .ci-element[disabled='disabled'] .ci-xl-d-animation-swing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        animation: swing 3s ease infinite;
        -webkit-animation: swing 3s ease infinite;
    }

    .ci-xl-d-animation-jumping.disabled:before, .ci-xl-d-animation-jumping:disabled:before, .ci-xl-d-animation-jumping[disabled='disabled']:before,
    .ci-element.disabled .ci-xl-d-animation-jumping:before, .ci-element:disabled .ci-xl-d-animation-jumping:before, .ci-element[disabled='disabled'] .ci-xl-d-animation-jumping:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: jumping 2s ease-in-out infinite;
        -webkit-animation: jumping 2s ease-in-out infinite;
    }

    .ci-xl-d-animation-bouncing.disabled:before, .ci-xl-d-animation-bouncing:disabled:before, .ci-xl-d-animation-bouncing[disabled='disabled']:before,
    .ci-element.disabled .ci-xl-d-animation-bouncing:before, .ci-element:disabled .ci-xl-d-animation-bouncing:before, .ci-element[disabled='disabled'] .ci-xl-d-animation-bouncing:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        animation: bouncing 0.2s ease infinite alternate;
        -webkit-animation: bouncing 0.2s ease infinite alternate;
    }

    .ci-xl-d-animation-stop.disabled:before, .ci-xl-d-animation-stop:disabled:before, .ci-xl-d-animation-stop[disabled='disabled']:before,
    .ci-element.disabled .ci-xl-d-animation-stop:before, .ci-element:disabled .ci-xl-d-animation-stop:before, .ci-element[disabled='disabled'] .ci-xl-d-animation-stop:before {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .ci-xl-d-animation-none.disabled:before, .ci-xl-d-animation-none:disabled:before, .ci-xl-d-animation-none[disabled='disabled']:before,
    .ci-element.disabled .ci-xl-d-animation-none:before, .ci-element:disabled .ci-xl-d-animation-none:before, .ci-element[disabled='disabled'] .ci-xl-d-animation-none:before {
        animation: none;
        -webkit-animation: none;
    }
    /* #endregion Disabled */
}

/* #region ******* Animation Keyframes ******* */
/* #region ------ Rotation Left ------ */
@keyframes rotation-l {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes rotation-l {
    from {
        -webkit-transform: rotate(360deg);
    }

    to {
        -webkit-transform: rotate(0deg);
    }
}
/* #endregion --- Rotation Left ------ */
/* #region ----- Rotation Right ------ */
@keyframes rotation-r {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotation-r {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}
/* #endregion -- Rotation Right ------ */
/* #region ------- Vibration -------- */
@keyframes vibration {
    0% {
        transform: scale(1);
    }

    2% {
        transform: scale(1.1);
    }

    4% {
        transform: scale(1);
    }

    6% {
        transform: scale(1.1);
    }

    8% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.1);
    }

    12% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.1);
    }

    16% {
        transform: scale(1);
    }

    18% {
        transform: scale(1.1);
    }

    20% {
        transform: scale(1);
    }

    22% {
        transform: scale(1.1);
    }

    24% {
        transform: scale(1);
    }

    26% {
        transform: scale(1.1);
    }

    28% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.08);
    }

    32% {
        transform: scale(1);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes vibration {
    0% {
        -webkit-transform: scale(1);
    }

    2% {
        -webkit-transform: scale(1.1);
    }

    4% {
        -webkit-transform: scale(1);
    }

    6% {
        -webkit-transform: scale(1.1);
    }

    8% {
        -webkit-transform: scale(1);
    }

    10% {
        -webkit-transform: scale(1.1);
    }

    12% {
        -webkit-transform: scale(1);
    }

    14% {
        -webkit-transform: scale(1.1);
    }

    16% {
        -webkit-transform: scale(1);
    }

    18% {
        -webkit-transform: scale(1.1);
    }

    20% {
        -webkit-transform: scale(1);
    }

    22% {
        -webkit-transform: scale(1.1);
    }

    24% {
        -webkit-transform: scale(1);
    }

    26% {
        -webkit-transform: scale(1.1);
    }

    28% {
        -webkit-transform: scale(1);
    }

    30% {
        -webkit-transform: scale(1.08);
    }

    32% {
        -webkit-transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

/* #endregion ----- Vibration -------- */
/* #region --------- Pulsing --------- */
@keyframes pulsing {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes pulsing {
    0% {
        -webkit-transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
    }
}
/* #endregion ------ Pulsing --------- */
/* #region -------- Shaking-X -------- */
@keyframes shaking-x {
    0% {
        transform: translateX(0px);
    }

    5% {
        transform: translateX(-0.05em);
    }

    10% {
        transform: translateX(0.05em);
    }

    15% {
        transform: translateX(-0.05em);
    }

    20% {
        transform: translateX(0.05em);
    }

    25% {
        transform: translateX(-0.05em);
    }

    30% {
        transform: translateX(0.05em);
    }

    35% {
        transform: translateX(-0.05em);
    }

    40% {
        transform: translateX(0.05em);
    }

    45% {
        transform: translateX(-0.05em);
    }

    50% {
        transform: translateX(0.05em);
    }

    55% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(0px);
    }
}

@-webkit-keyframes shaking-x {
    0% {
        -webkit-transform: translateX(0px);
    }

    5% {
        -webkit-transform: translateX(-0.05em);
    }

    10% {
        -webkit-transform: translateX(0.05em);
    }

    15% {
        -webkit-transform: translateX(-0.05em);
    }

    20% {
        -webkit-transform: translateX(0.05em);
    }

    25% {
        -webkit-transform: translateX(-0.05em);
    }

    30% {
        -webkit-transform: translateX(0.05em);
    }

    35% {
        -webkit-transform: translateX(-0.05em);
    }

    40% {
        -webkit-transform: translateX(0.05em);
    }

    45% {
        -webkit-transform: translateX(-0.05em);
    }

    50% {
        -webkit-transform: translateX(0.05em);
    }

    55% {
        -webkit-transform: translateX(0px);
    }

    100% {
        -webkit-transform: translateX(0px);
    }
}
/* #endregion ----- Shaking-X -------- */
/* #region -------- Shaking-Y -------- */
@keyframes shaking-y {
    0% {
        transform: translateY(0px);
    }

    5% {
        transform: translateY(-0.05em);
    }

    10% {
        transform: translateY(0.05em);
    }

    15% {
        transform: translateY(-0.05em);
    }

    20% {
        transform: translateY(0.05em);
    }

    25% {
        transform: translateY(-0.05em);
    }

    30% {
        transform: translateY(0.05em);
    }

    35% {
        transform: translateY(-0.05em);
    }

    40% {
        transform: translateY(0.05em);
    }

    45% {
        transform: translateY(-0.05em);
    }

    50% {
        transform: translateY(0.05em);
    }

    55% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(0px);
    }
}

@-webkit-keyframes shaking-y {
    0% {
        -webkit-transform: translateY(0px);
    }

    5% {
        -webkit-transform: translateY(-0.05em);
    }

    10% {
        -webkit-transform: translateY(0.05em);
    }

    15% {
        -webkit-transform: translateY(-0.05em);
    }

    20% {
        -webkit-transform: translateY(0.05em);
    }

    25% {
        -webkit-transform: translateY(-0.05em);
    }

    30% {
        -webkit-transform: translateY(0.05em);
    }

    35% {
        -webkit-transform: translateY(-0.05em);
    }

    40% {
        -webkit-transform: translateY(0.05em);
    }

    45% {
        -webkit-transform: translateY(-0.05em);
    }

    50% {
        -webkit-transform: translateY(0.05em);
    }

    55% {
        -webkit-transform: translateY(0px);
    }

    100% {
        -webkit-transform: translateY(0px);
    }
}
/* #endregion ----- Shaking-Y -------- */
/* #region --------- Bangle ---------- */
@keyframes bangle {
    0% {
        transform: rotate(0deg);
    }

    5% {
        transform: rotate(-30deg);
    }

    10% {
        transform: rotate(30deg);
    }

    15% {
        transform: rotate(-30deg);
    }

    20% {
        transform: rotate(30deg);
    }

    25% {
        transform: rotate(-30deg);
    }

    30% {
        transform: rotate(30deg);
    }

    35% {
        transform: rotate(-30deg);
    }

    40% {
        transform: rotate(30deg);
    }

    45% {
        transform: rotate(-30deg);
    }

    50% {
        transform: rotate(0deg);
    }


    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes bangle {
    0% {
        -webkit-transform: rotate(0deg);
    }

    5% {
        -webkit-transform: rotate(-30deg);
    }

    10% {
        -webkit-transform: rotate(30deg);
    }

    15% {
        -webkit-transform: rotate(-30deg);
    }

    20% {
        -webkit-transform: rotate(30deg);
    }

    25% {
        -webkit-transform: rotate(-30deg);
    }

    30% {
        -webkit-transform: rotate(30deg);
    }

    35% {
        -webkit-transform: rotate(-30deg);
    }

    40% {
        -webkit-transform: rotate(30deg);
    }

    45% {
        -webkit-transform: rotate(-30deg);
    }

    50% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}
/* #endregion ------ Bangle ---------- */
/* #region --------- Swing ----------- */
@keyframes swing {
    0% {
        transform: rotate(0deg);
    }

    5% {
        transform: rotate(-45deg);
    }

    10% {
        transform: rotate(40deg);
    }

    15% {
        transform: rotate(-35deg);
    }

    20% {
        transform: rotate(30deg);
    }

    25% {
        transform: rotate(-25deg);
    }

    30% {
        transform: rotate(20deg);
    }

    35% {
        transform: rotate(-15deg);
    }

    40% {
        transform: rotate(10deg);
    }

    45% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(0deg);
    }


    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(0deg);
    }

    5% {
        -webkit-transform: rotate(-45deg);
    }

    10% {
        -webkit-transform: rotate(40deg);
    }

    15% {
        -webkit-transform: rotate(-35deg);
    }

    20% {
        -webkit-transform: rotate(30deg);
    }

    25% {
        -webkit-transform: rotate(-25deg);
    }

    30% {
        -webkit-transform: rotate(20deg);
    }

    35% {
        -webkit-transform: rotate(-15deg);
    }

    40% {
        -webkit-transform: rotate(10deg);
    }

    45% {
        -webkit-transform: rotate(-5deg);
    }

    50% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}
/* #endregion ------ Swing ----------- */
/* #region -------- Jumping ---------- */
@keyframes jumping {
    0% {
        transform: translateY(0em) scaleY(1);
    }

    10% {
        transform: translateY(0em) scaleY(0.8);
    }

    20% {
        transform: translateY(-0.3em) scaleY(1);
    }

    30% {
        transform: translateY(0em) scaleY(0.8);
    }

    31% {
        transform: translateY(-0.05em) scaleY(1);
    }

    32% {
        transform: translateY(0em) scaleY(0.9);
    }

    34% {
        transform: translateY(-0.01em) scaleY(1);
    }

    38% {
        transform: translateY(0em) scaleY(0.95);
    }

    45% {
        transform: translateY(0em) scaleY(1);
    }

    100% {
        transform: translateY(0em) scaleY(1);
    }
}

@-webkit-keyframes jumping {
    0% {
        -webkit-transform: translateY(0em) scaleY(1);
    }

    10% {
        -webkit-transform: translateY(0em) scaleY(0.8);
    }

    20% {
        -webkit-transform: translateY(-0.3em) scaleY(1);
    }

    30% {
        -webkit-transform: translateY(0em) scaleY(0.8);
    }

    31% {
        -webkit-transform: translateY(-0.05em) scaleY(1);
    }

    32% {
        -webkit-transform: translateY(0em) scaleY(0.9);
    }

    34% {
        -webkit-transform: translateY(-0.01em) scaleY(1);
    }

    38% {
        -webkit-transform: translateY(0em) scaleY(0.95);
    }

    45% {
        -webkit-transform: translateY(0em) scaleY(1);
    }

    100% {
        -webkit-transform: translateY(0em) scaleY(1);
    }
}
/* #endregion ----- Jumping ---------- */
/* #region ------- Bouncing ---------- */
@keyframes bouncing {
    0% {
        transform: translateY(0em) scaleY(1);
    }

    0% {
        transform: translateY(0em) scaleY(1);
    }

    100% {
        transform: translateY(-0.2em) scaleY(1);
    }
}

@-webkit-keyframes bouncing {
    0% {
        -webkit-transform: translateY(0em) scaleY(1);
    }

    0% {
        -webkit-transform: translateY(0em) scaleY(1);
    }

    100% {
        -webkit-transform: translateY(-0.2em) scaleY(1);
    }
}
/* #endregion ---- Bouncing ----------- */
/* #endregion **** Animation Keyframes ******* */
/* #endregion ----------- Animations ---------------- */