@charset "UTF-8";

/*!
 * ikol animation system based on animate.css - https://animate.style/
 * ussage example 
 * <div id="parent" class="ik-animate--enable">
 *     <div id="notAnimatedChild" class="ik-animate--disable">
 *         <div class="ik-animate ik-animate__pulse ik-animate__infinite">This will not animate</div>
 *     </div>
 *     <div id="animatedChild">
 *         <div class="ik-animate ik-animate__pulse ik-animate__infinite">this will animate</div>
 *     </div>
 * </div> 
 */
:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
}

.ik-animate--enable .ik-animate,
.ik-animate--enable.ik-animate {
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.ik-animate--disable .ik-animate {
    animation: none !important;
    -webkit-animation: none !important;
}

/* animation modifiers */
.ik-animate.ik-animate__infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.ik-animate.ik-animate__repeat-1 {
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.ik-animate.ik-animate__repeat-2 {
    -webkit-animation-iteration-count: calc(1 * 2);
    animation-iteration-count: calc(1 * 2);
}

.ik-animate.ik-animate__repeat-3 {
    -webkit-animation-iteration-count: calc(1 * 3);
    animation-iteration-count: calc(1 * 3);
}

.ik-animate.ik-animate__delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.ik-animate.ik-animate__delay-2s {
    -webkit-animation-delay: calc(1s * 2);
    animation-delay: calc(1s * 2);
}

.ik-animate.ik-animate__delay-3s {
    -webkit-animation-delay: calc(1s * 3);
    animation-delay: calc(1s * 3);
}

.ik-animate.ik-animate__delay-4s {
    -webkit-animation-delay: calc(1s * 4);
    animation-delay: calc(1s * 4);
}

.ik-animate.ik-animate__delay-5s {
    -webkit-animation-delay: calc(1s * 5);
    animation-delay: calc(1s * 5);
}

.ik-animate.ik-animate__faster {
    -webkit-animation-duration: calc(1s / 2);
    animation-duration: calc(1s / 2);
}

.ik-animate.ik-animate__fast {
    -webkit-animation-duration: calc(1s * 0.8);
    animation-duration: calc(1s * 0.8);
}

.ik-animate.ik-animate__slow {
    -webkit-animation-duration: calc(var(--animate-duration) * 2);
    animation-duration: calc(var(--animate-duration) * 2);
}

.ik-animate.ik-animate__slower {
    -webkit-animation-duration: calc(var(--animate-duration) * 3);
    animation-duration: calc(var(--animate-duration) * 3);
}

@media print,
(prefers-reduced-motion: reduce) {
    .ik-animate {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
    }

    .ik-animate[class*='Out'] {
        opacity: 0;
    }
}

/* Attention seekers  */
.ik-animate__bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

.ik-animate__pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.ik-animate__pulse:hover {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.ik-animate__head-shake {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: head-shake;
    animation-name: head-shake;
}

.ik-animate__bell-ring {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: bell-ring;
    animation-name: bell-ring;
}

/* Bouncing exits  */
.ik-animate__bounce-out {
    -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
    animation-duration: calc(var(--animate-duration) * 0.75);
    -webkit-animation-name: bounce-out;
    animation-name: bounce-out;
}

/* Bouncing entrances */
.ik-animate__bounce-in-right {
    -webkit-animation-name: bounce-in-right;
    animation-name: bounce-in-right;
}

.ik-animate__bounce-in-up {
    -webkit-animation-name: bounce-in-up;
    animation-name: bounce-in-up;
}

/* Fading entrances  */
.ik-animate__fade-in {
    -webkit-animation-name: fade-in;
    animation-name: fade-in;
}

.ik-animate__fade-in-down {
    -webkit-animation-name: fade-in-down;
    animation-name: fade-in-down;
}

/* Fading exits */
.ik-animate__fade-out {
    -webkit-animation-name: fade-out;
    animation-name: fade-out;
}

.ik-animate__fade-out-down {
    -webkit-animation-name: fade-out-down;
    animation-name: fade-out-down;
}

/* Flippers */
.ik-animate__flip-in-x {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flip-in-x;
    animation-name: flip-in-x;
}

/* zoom-ing entrances */
.ik-animate__zoom-in {
    -webkit-animation-name: zoom-in;
    animation-name: zoom-in;
}

.ik-animate__expand-height {
    -webkit-animation-name: expand-height;
    animation-name: expand-height;
}


/* keyframes */
@-webkit-keyframes bounce {

    from,
    20%,
    53%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
        transform: translate3d(0, -30px, 0) scaleY(1.1);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
        transform: translate3d(0, -15px, 0) scaleY(1.05);
    }

    80% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
        transform: translate3d(0, 0, 0) scaleY(0.95);
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
        transform: translate3d(0, -4px, 0) scaleY(1.02);
    }
}

@keyframes bounce {

    from,
    20%,
    53%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
        transform: translate3d(0, -30px, 0) scaleY(1.1);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
        transform: translate3d(0, -15px, 0) scaleY(1.05);
    }

    80% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
        transform: translate3d(0, 0, 0) scaleY(0.95);
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
        transform: translate3d(0, -4px, 0) scaleY(1.02);
    }
}


@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes head-shake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes bounce-out {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

@keyframes bounce-out {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

@keyframes bounce-in-right {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }

    60% {
        opacity: 1;
        transform: translateX(0);
    }

    80% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes bounce-in-up {
    0% {
        opacity: 0;
        transform: translateY(-2000px);
    }

    60% {
        opacity: 1;
        transform: translateY(0);
    }

    80% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

@-webkit-keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fade-in-down {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fade-in-down {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes fade-out-down {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes fade-out-down {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@-webkit-keyframes flip-in-x {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flip-in-x {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@-webkit-keyframes zoom-in {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes zoom-in {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes expand-height {
    0% {
        max-height: 0;
        opacity: 0;
    }

    100% {
        max-height: 100%;
        opacity: 1;
    }
}

@keyframes bell-ring {
    0% {
        transform: rotate(0);
    }

    10% {
        transform: rotate(30deg);
    }

    20% {
        transform: rotate(-28deg);
    }

    30% {
        transform: rotate(34deg);
    }

    40% {
        transform: rotate(-32deg);
    }

    50% {
        transform: rotate(30deg);
    }

    60% {
        transform: rotate(-28deg);
    }

    70% {
        transform: rotate(26deg);
    }

    80% {
        transform: rotate(-24deg);
    }

    90% {
        transform: rotate(22deg);
    }

    100% {
        transform: rotate(0);
    }
}
/* light mode */
:root,
.ik-theme--light,
.ik-theme--light .ik-theme--static {
    --background-color: #fff;
    --on-background-color-1: #1f2c38;
    --on-background-color-2: #222B45;
    --on-background-color-3: #8294a2;
    --on-background-color-4: #BBC7D0;
    --on-background-color-5: #E7F2F9;

    --surface-color: #fff;
    --on-surface-color-1: #1f2c38;
    --on-surface-color-2: #222B45;
    --on-surface-color-3: #8294A2;
    --on-surface-color-4: #BBC7D0;

    --surface-lighten-color: #f4f9fb;
    --on-surface-lighten-color-1: #1f2c38;
    --on-surface-lighten-color-2: #222B45;
    --on-surface-lighten-color-3: #8294A2;
    --on-surface-lighten-color-4: #acbbc7;

    --surface-darken-color: #EBF1F6;
    --on-surface-darken-color-1: #1f2c38;
    --on-surface-darken-color-2: #222B45;
    --on-surface-darken-color-3: #8294A2;
    --on-surface-darken-color-4: #acbbc7;

    --border-color-1: #DDE3E7;
    --border-color-2: #EBF1F6;
    --marker-color-1: #1b2c39;
    --skeleton-color-1: #EBF1F6;
    --skeleton-color-2: hsla(0, 0%, 100%, .35);

    --primary-color: #6488F8;
    --primary-color-o1: rgba(100, 136, 248, 0.1);
    --on-primary-color: #fff;

    --secondary-color: #1b2c39;
    --secondary-color-alt-1: #0D3034;
    --on-secondary-color: #fff;
    --on-secondary-color-alt-1: #fff;

    --accent-color: #F3B563;
    --accent-color-o1: rgba(243, 181, 99, 0.1);
    --on-accent-color: #1f2c38;

    --error-color: #ff304c;
    --error-color-o1: rgba(255, 48, 76, 0.1);
    --on-error-color: #fff;

    --success-color: #40BE7A;
    --success-color-o1: rgba(64, 190, 122, 0.1);
    --on-success-color: #fff;

    --shadow-color-1: rgba(70, 90, 106, 0.15);
    --shadow-color-2: rgba(70, 90, 106, 0.2);
    --shadow-color-3: rgba(70, 90, 106, 0.5);

    --scrollbar-color: #536d83;
    --scrollbar-track-color: rgba(0, 0, 0, 0.1);

    --tooltip-color: #333;
    --on-tooltip-color: #fff;

    --theme-1-color: #6488F8;
    --theme-1-color-o1: rgba(100, 136, 248, 0.1);
    --theme-2-color: #1FB665;
    --theme-2-color-o1: rgba(31, 182, 101, 0.1);
    --theme-3-color: #F4C23B;
    --theme-3-color-o1: rgba(244, 194, 59, 0.1);
    --theme-4-color: #FF855D;
    --theme-4-color-o1: rgba(255, 133, 93, 0.1);
    --theme-5-color: #FF304C;
    --theme-5-color-o1: rgba(255, 48, 76, 0.1);
    --theme-6-color: #FF179E;
    --theme-6-color-o1: rgba(255, 23, 158, 0.1);
    --theme-7-color: #A036CC;
    --theme-7-color-o1: rgba(160, 54, 204, 0.1);
    --theme-8-color: #212121;
    --theme-8-color-o1: rgba(33, 33, 33, 0.1);
    --theme-9-color: #3AAADC;
    --theme-9-color-o1: rgba(58, 170, 220, 0.1);

    --on-theme-color: #fff;
}

/* dark mode */
.ik-theme--dark:root,
.ik-theme--dark,
.ik-theme--dark .ik-theme--static {
    --background-color: #121212;
    --on-background-color-1: #cdc3ba;
    --on-background-color-2: #b6aea4;
    --on-background-color-3: #787878;
    --on-background-color-4: #4b4b4b;
    --on-background-color-5: #2c2c2c;

    --surface-color: #191919;
    --on-surface-color-1: #cdc3ba;
    --on-surface-color-2: #b6aea4;
    --on-surface-color-3: #787878;
    --on-surface-color-4: #4b4b4b;

    --surface-darken-color: #222222;
    --on-surface-darken-color-1: #e0d3c7;
    --on-surface-darken-color-2: #93908b;
    --on-surface-darken-color-3: #7a736e;
    --on-surface-darken-color-4: #696969;

    --surface-lighten-color: #191919;
    --on-surface-lighten-color-1: #e0d3c7;
    --on-surface-lighten-color-2: #93908b;
    --on-surface-lighten-color-3: #7a736e;
    --on-surface-lighten-color-4: #696969;

    --border-color-1: #474747;
    --border-color-2: #363636;
    --marker-color-1: #737373;
    --skeleton-color-1: #333333;
    --skeleton-color-2: hsla(0, 0%, 100%, .03);

    --primary-color: #5989ff;
    --primary-color-o1: rgba(100, 136, 248, 0.1);
    --on-primary-color: #fff;

    --secondary-color: #1b2c39;
    --secondary-color-alt-1: #0D3034;
    --on-secondary-color: #fff;
    --on-secondary-color-alt-1: #fff;

    --accent-color: #F3B563;
    --accent-color-o1: rgba(243, 181, 99, 0.1);
    --on-accent-color: #1f2c38;

    --error-color: #FF304C;
    --error-color-o1: rgba(255, 48, 76, 0.1);
    --on-error-color: #fff;

    --success-color: #40BE7A;
    --success-color-o1: rgba(64, 190, 122, 0.1);
    --on-success-color: #fff;

    --shadow-color-1: rgba(0, 0, 0, 0.5);
    --shadow-color-2: rgba(0, 0, 0, 1);
    --shadow-color-3: rgba(0, 0, 0, 1);

    --scrollbar-color: #fff;
    --scrollbar-track-color: rgba(255, 255, 255, 0.1);

    --tooltip-color: #444;
    --on-tooltip-color: #e0d3c7;

    --theme-1-color: #6488F8;
    --theme-1-color-o1: rgba(100, 136, 248, 0.1);
    --theme-2-color: #1FB665;
    --theme-2-color-o1: rgba(31, 182, 101, 0.1);
    --theme-3-color: #F4C23B;
    --theme-3-color-o1: rgba(244, 194, 59, 0.1);
    --theme-4-color: #FF855D;
    --theme-4-color-o1: rgba(255, 133, 93, 0.1);
    --theme-5-color: #FF304C;
    --theme-5-color-o1: rgba(255, 48, 76, 0.1);
    --theme-6-color: #FF179E;
    --theme-6-color-o1: rgba(255, 23, 158, 0.1);
    --theme-7-color: #A036CC;
    --theme-7-color-o1: rgba(160, 54, 204, 0.1);
    --theme-8-color: #212121;
    --theme-8-color-o1: rgba(33, 33, 33, 0.1);
    --theme-9-color: #3AAADC;
    --theme-9-color-o1: rgba(58, 170, 220, 0.1);

    --on-theme-color: #fff;
}

/* custom themes colors override */
.ik-theme--1:root,
.ik-theme--1 {
    --primary-color: var(--theme-1-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-1-color-o1);
}

.ik-theme--2:root,
.ik-theme--2 {
    --primary-color: var(--theme-2-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-2-color-o1);
}

.ik-theme--3:root,
.ik-theme--3 {
    --primary-color: var(--theme-3-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-3-color-o1);
}

.ik-theme--4:root,
.ik-theme--4 {
    --primary-color: var(--theme-4-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-4-color-o1);
}

.ik-theme--5:root,
.ik-theme--5 {
    --primary-color: var(--theme-5-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-5-color-o1);
}

.ik-theme--6:root,
.ik-theme--6 {
    --primary-color: var(--theme-6-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-6-color-o1);
}

.ik-theme--7:root,
.ik-theme--7 {
    --primary-color: var(--theme-7-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-7-color-o1);
}

.ik-theme--8:root,
.ik-theme--8 {
    --primary-color: var(--theme-8-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-8-color-o1);
}

.ik-theme--9:root,
.ik-theme--9 {
    --primary-color: var(--theme-9-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-9-color-o1);
}

/* util classes */
.ik-background-color {
    background-color: var(--background-color);
}

.ik-on-background-color-1 {
    color: var(--on-background-color-1);
}

.ik-on-background-color-2 {
    color: var(--on-background-color-2);
}

.ik-on-background-color-3 {
    color: var(--on-background-color-3);
}

.ik-on-background-color-4 {
    color: var(--on-background-color-4);
}

.ik-on-background-color-5 {
    color: var(--on-background-color-5);
}

.ik-surface-color {
    background-color: var(--surface-color);
}

.ik-on-surface-color-1 {
    color: var(--on-surface-color-1);
}

.ik-on-surface-color-2 {
    color: var(--on-surface-color-2);
}

.ik-on-surface-color-3 {
    color: var(--on-surface-color-3);
}

.ik-on-surface-color-4 {
    color: var(--on-surface-color-4);
}

.ik-color--primary {
    color: var(--primary-color);
}

.ik-color--secondary {
    color: var(--secondary-color);
}

.ik-color--success {
    color: var(--success-color);
}

.ik-color--error {
    color: var(--error-color);
}

.ik-color--accent {
    color: var(--accent-color);
}

/* z-index definitions should be sorted by value and defined for both mobile and desktop devices
/* desktop z-index */
:root,
.ik-screen--desktop:root {
    --z-index-toast: 1149;
    --z-index-modal: 1049;
    --z-index-maximized-md-editor: 1025;
    --z-index-chat-window: 1000;
    --z-index-portal-access-app: 951;
    --z-index-portal-claim-app-topbar: 950;
    --z-index-portal-claim-app-sidebar: 949;
    --z-index-app-nav: 901;
    --z-index-app-bar: 900;
    --z-index-webpage-nav: 900;
    --z-index-webpage-bottom-menu: 900;
    --z-index-chat-trigger: 850;
    /* popover minimum z-index is 800 - but it is calculated dynamically based on activator element z-index value*/
    --z-index-portal-cookies-app: 500;
    --z-index-app-restricted-backdrop: 9;
}

/* mobile z-index */
.ik-screen--mobile:root {
    --z-index-toast: 1149;
    --z-index-modal: 1049;
    --z-index-maximized-md-editor: 1025;
    --z-index-chat-window: 1000;
    --z-index-portal-access-app: 951;
    --z-index-portal-claim-app-topbar: 950;
    --z-index-portal-claim-app-sidebar: 949;
    --z-index-app-nav: 901;
    --z-index-app-bar: 900;
    --z-index-webpage-nav: 900;
    --z-index-webpage-bottom-menu: 900;
    --z-index-chat-trigger: 850;
    /* popover minimum z-index is 800 - but it is calculated dynamically based on activator element z-index value*/
    --z-index-portal-cookies-app: 500;
    --z-index-app-restricted-backdrop: 9;
}

/* font weights */
:root {
    --text-normal: 400;
    --text-semibold: 600;
    --text-bold: 700;

    --text-3xs: 9px;
    --text-2xs: 11px;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 21px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 36px;
    --text-5xl: 48px;
    --text-6xl: 60px;
    --text-7xl: 72px;

    /* Padding */
    --pa-0: 0px;
    --pa-1: 3px;
    --pa-2: 5px;
    --pa-3: 10px;
    --pa-4: 15px;
    --pa-5: 25px;
    --pa-6: 50px;

    --px-0: 0px;
    --px-1: 3px;
    --px-2: 5px;
    --px-3: 10px;
    --px-4: 15px;
    --px-5: 25px;
    --px-6: 50px;

    --py-0: 0px;
    --py-1: 3px;
    --py-2: 5px;
    --py-3: 10px;
    --py-4: 15px;
    --py-5: 25px;
    --py-6: 50px;

    --pt-0: 0px;
    --pt-1: 3px;
    --pt-2: 5px;
    --pt-3: 10px;
    --pt-4: 15px;
    --pt-5: 25px;
    --pt-6: 50px;

    --pb-0: 0px;
    --pb-1: 3px;
    --pb-2: 5px;
    --pb-3: 10px;
    --pb-4: 15px;
    --pb-5: 25px;
    --pb-6: 50px;

    --pl-0: 0px;
    --pl-1: 3px;
    --pl-2: 5px;
    --pl-3: 10px;
    --pl-4: 15px;
    --pl-5: 25px;
    --pl-6: 50px;

    --pr-0: 0px;
    --pr-1: 3px;
    --pr-2: 5px;
    --pr-3: 10px;
    --pr-4: 15px;
    --pr-5: 25px;
    --pr-6: 50px;

    /* Margin */
    --ma-0: 0px;
    --ma-1: 3px;
    --ma-2: 5px;
    --ma-3: 10px;
    --ma-4: 15px;
    --ma-5: 25px;
    --ma-6: 50px;

    --mt-0: 0px;
    --mt-1: 3px;
    --mt-2: 5px;
    --mt-3: 10px;
    --mt-4: 15px;
    --mt-5: 25px;
    --mt-6: 50px;

    --mb-0: 0px;
    --mb-1: 3px;
    --mb-2: 5px;
    --mb-3: 10px;
    --mb-4: 15px;
    --mb-5: 25px;
    --mb-6: 50px;

    --ml-0: 0px;
    --ml-1: 3px;
    --ml-2: 5px;
    --ml-3: 10px;
    --ml-4: 15px;
    --ml-5: 25px;
    --ml-6: 50px;

    --mr-0: 0px;
    --mr-1: 3px;
    --mr-2: 5px;
    --mr-3: 10px;
    --mr-4: 15px;
    --mr-5: 25px;
    --mr-6: 50px;

    --mx-0: 0px;
    --mx-1: 3px;
    --mx-2: 5px;
    --mx-3: 10px;
    --mx-4: 15px;
    --mx-5: 25px;
    --mx-6: 50px;

    --my-0: 0px;
    --my-1: 3px;
    --my-2: 5px;
    --my-3: 10px;
    --my-4: 15px;
    --my-5: 25px;
    --my-6: 50px;

    /* radius */
    --radius-0: 0px;
    --radius-1: 4px;
    --radius-2: 8px;
    --radius-3: 16px;
}
.ik-bg--blue, .ik-bg--blue-hovered {
    background-color: #2f9cd0;
}

.ik-bg--blue-hovered:hover {
    background-color: #2D94D2;
}

.ik-text--blue-hovered:hover {
    color: #2D94D2;
}

.ik-bg--hover-blue:hover {
    background-color: #2f9cd0;
    color: #fff;
}

.ik-border--blue {
    border: 1px solid #2f9cd0;
}

.ik-text--blue {
    color: #2D94D2;
}

.ik-text--red {
    color: #F16364;
}

.ik-text--green {
    color: #5cb85c;
}

.ik-text--white {
    color: #FFFFFF;
}

.ik-text--disabled {
    color: #aaa;
}

.ik-theme .ik-text--disabled {
    color: var(--on-background-color-3);
}

.ik-link--white,
.ik-link--white:link,
.ik-link--white:visited,
.ik-link--white:hover,
.ik-link--white:active {
    color: #FFFFFF;
}

.ik-bg--primary {
    background-color: #337ab7;
}

.ik-bg--info {
    background-color: #5bc0de;
}

.ik-bg--success {
    background-color: #5cb85c;
}

.ik-bg--warning {
    background-color: #f0ad4e;
}

.ik-bg--danger {
    background-color: #d9534f;
}

.ik-border--primary {
    border-color: #82a2b7;
}

.ik-border--info {
    border-color: #bce8f1;
}

.ik-border--success {
    border-color: #d6e9c6;
}

.ik-border--warning {
    border-color: #faebcc;
}

.ik-border--danger {
    border-color: #ebccd1;
}

.ik-blink-bcg {
    transition: background-color 0.6s ease-in-out;
}

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

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

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

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

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

    cursor: grab;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ik-hidden {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* spacing - PADDING */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* spacing - MARGINS */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* RADIUS */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* SHADOW */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

}

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

}

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

}

.ik-object--scale-down {
    object-fit: scale-down;
}
.grecaptcha-badge {
    visibility: hidden;
}

/* layout */
.row--spacing-0 {
    margin-left: 0;
    margin-right: 0;
}

.row--spacing-0 > .ik-col {
    padding-left: 0;
    padding-right: 0;
}

.row--spacing-1 {
    margin-left: -3px;
    margin-right: -3px;
}

.row--spacing-1 > .ik-col {
    padding-left: 3px;
    padding-right: 3px;
}

.row--spacing-2 {
    margin-left: -5px;
    margin-right: -5px;
}

.row--spacing-2 > .ik-col {
    padding-left: 5px;
    padding-right: 5px;
}

.row--spacing-3 {
    margin-left: -10px;
    margin-right: -10px;
}

.row--spacing-3 > .ik-col {
    padding-left: 10px;
    padding-right: 10px;
}

.row--spacing-4 {
    margin-left: -15px;
    margin-right: -15px;
}

.row--spacing-4 > .ik-col {
    padding-left: 15px;
    padding-right: 15px;
}

.row--spacing-5 {
    margin-left: -25px;
    margin-right: -25px;
}

.row--spacing-5 > .ik-col {
    padding-left: 25px;
    padding-right: 25px;
}

/* form */
.ik-flat-form-control,
.ik-flat-form-control:focus {
    border: none !important;
    box-shadow: none;
    padding: 7px 13px 7px 0;
    height: auto;
}

.form-control {
    font-weight: var(--text-semibold);
}

@media (max-width: 769px) {
    .ik-input-group-responsive-sm .ik-col:not(:first-child) .form-control {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
    }

    .ik-input-group-responsive-sm .ik-col:not(:last-child) .form-control {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
}

@media (min-width: 768px) {
    .ik-input-group-responsive-sm .ik-col:not(:first-child) {
        padding-left: 0;
    }

    .ik-input-group-responsive-sm .ik-col:not(:first-child) .form-control {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .ik-input-group-responsive-sm .ik-col:not(:last-child) {
        padding-right: 0;
    }

    .ik-input-group-responsive-sm .ik-col:not(:last-child) .form-control {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}

/* additional panel styles */
.panel-info-light {
    border-color: #b8dced;
}

.panel-info-light > .panel-heading {
    background-color: #d9edf7;
    color: #555;
}

/* fix black chrome outline */
.btn,
.btn:focus,
.btn:hover,
.btn:active {
    outline: none !important;
}

/* modern button styles */
.btn.btn-flat,
.btn.btn-filled,
.btn.btn-outline {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    padding: 4px 16px;
    min-height: 32px;
}

.btn.btn-flat,
.btn.btn-filled,
.btn.btn-outline,
.btn.btn-flat > i,
.btn.btn-filled > i,
.btn.btn-outline > i {
    line-height: 23px;
}

.ik-theme .ik-button .ik-loader-circle {
    margin-bottom: 2px;
}

.btn-flat.btn-xs,
.btn-filled.btn-xs,
.btn-outline.btn-xs {
    height: 24px;
    padding: 2px 12px;
}

.btn-flat.btn-sm,
.btn-filled.btn-sm,
.btn-outline.btn-sm {
    height: 32px;
    padding: 4px 16px;
}

.btn-flat.btn-md,
.btn-filled.btn-md,
.btn-outline.btn-md {
    height: 38px;
    padding: 4px 20px;
}

.btn-flat.btn-lg,
.btn-filled.btn-lg,
.btn-outline.btn-lg {
    height: 48px;
    padding: 12px 24px;
}

.btn.btn-fab {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 56px;
    height: 56px;
    padding: 16px;
    border-radius: 28px;
}

.btn-fab.btn-filled.btn-default {
    box-shadow: 0 5px 15px 0 var(--surface-darken-color);
}

.btn-fab.btn-filled.btn-primary {
    box-shadow: 0 5px 15px 0 var(--primary-color-o1);
}

.btn-fab.btn-filled.btn-success {
    box-shadow: 0 5px 15px 0 var(--success-color-o1);
}

.btn-fab.btn-filled.btn-danger {
    box-shadow: 0 5px 15px 0 var(--error-color-o1);
}

/* default buttons */
.btn-filled.btn-default,
.btn-filled.btn-default.active,
.btn-filled.btn-default:focus,
.btn-filled.btn-default:hover,
.btn-filled.btn-default:active {
    background-color: var(--surface-darken-color);
    color: var(--on-surface-darken-color-3);
}

.btn-flat.btn-default,
.btn-outline.btn-default {
    color: var(--on-surface-darken-color-3);
}

.btn-flat.btn-default:hover,
.btn-flat.btn-default:focus,
.btn-flat.btn-default.active,
.btn-flat.btn-default:active,
.btn-outline.btn-default:hover,
.btn-outline.btn-default:focus,
.btn-outline.btn-default.active,
.btn-outline.btn-default:active {
    background-color: var(--surface-darken-color);
    color: var(--on-surface-darken-color-3);
}

.btn-outline.btn-default,
.btn-outline.btn-default:hover,
.btn-outline.btn-default:active,
.btn-outline.btn-default:focus {
    border: 1px solid var(--border-color-1);
}

/* primary buttons */
.btn-filled.btn-primary,
.btn-filled.btn-primary.active,
.btn-filled.btn-primary:focus,
.btn-filled.btn-primary:hover,
.btn-filled.btn-primary:active {
    background-color: var(--primary-color);
    color: var(--on-primary-color);
}

.btn-outline.btn-primary,
.btn-flat.btn-primary {
    color: var(--primary-color);
}

.btn-outline.btn-primary:hover,
.btn-outline.btn-primary:focus,
.btn-outline.btn-primary.active,
.btn-outline.btn-primary:active,
.btn-flat.btn-primary:hover,
.btn-flat.btn-primary:focus,
.btn-flat.btn-primary.active,
.btn-flat.btn-primary:active {
    background-color: var(--primary-color-o1);
    color: var(--primary-color);
}

.btn-outline.btn-primary,
.btn-outline.btn-primary:hover,
.btn-outline.btn-primary:active,
.btn-outline.btn-primary:focus {
    border: 1px solid var(--primary-color) !important;
}

/* success buttons */
.btn-filled.btn-success,
.btn-filled.btn-success.active,
.btn-filled.btn-success:focus,
.btn-filled.btn-success:hover,
.btn-filled.btn-success:active {
    background-color: var(--success-color);
    color: var(--on-success-color);
}

.btn-outline.btn-success,
.btn-flat.btn-success {
    color: var(--success-color);
}

.btn-outline.btn-success:hover,
.btn-outline.btn-success:focus,
.btn-outline.btn-success.active,
.btn-outline.btn-success:active,
.btn-flat.btn-success:hover,
.btn-flat.btn-success:focus,
.btn-flat.btn-success.active,
.btn-flat.btn-success:active {
    background-color: var(--success-color-o1);
    color: var(--success-color);
}

.btn-success.btn-outline,
.btn-success.btn-outline:hover,
.btn-success.btn-outline:active,
.btn-success.btn-outline:focus {
    border: 1px solid var(--success-color) !important;
}

/* error buttons */
.btn-filled.btn-danger,
.btn-filled.btn-danger.active,
.btn-filled.btn-danger:focus,
.btn-filled.btn-danger:hover,
.btn-filled.btn-danger:active {
    background-color: var(--error-color);
    color: var(--on-error-color);
}

.btn-outline.btn-danger,
.btn-flat.btn-danger {
    color: var(--error-color);
}

.btn-outline.btn-danger:hover,
.btn-outline.btn-danger:focus,
.btn-outline.btn-danger.active,
.btn-outline.btn-danger:active,
.btn-flat.btn-danger:hover,
.btn-flat.btn-danger:focus,
.btn-flat.btn-danger.active,
.btn-flat.btn-danger:active {
    background-color: var(--error-color-o1);
    color: var(--error-color);
}

.btn-outline.btn-danger,
.btn-outline.btn-danger:hover,
.btn-outline.btn-danger:active,
.btn-outline.btn-danger:focus {
    border: 1px solid var(--error-color) !important;
}

/* accent buttons */
.btn-filled.btn-accent,
.btn-filled.btn-accent.active,
.btn-filled.btn-accent:focus,
.btn-filled.btn-accent:hover,
.btn-filled.btn-accent:active {
    background-color: var(--accent-color-o1);
    color: var(--accent-color);
}

.btn-outline.btn-accent,
.btn-flat.btn-accent {
    color: var(--accent-color);
}

.btn-outline.btn-accent:hover,
.btn-outline.btn-accent:focus,
.btn-outline.btn-accent.active,
.btn-outline.btn-accent:active,
.btn-flat.btn-accent:hover,
.btn-flat.btn-accent:focus,
.btn-flat.btn-accent.active,
.btn-flat.btn-accent:active {
    background-color: var(--accent-color-o1);
    color: var(--accent-color);
}

.btn-outline.btn-accent,
.btn-outline.btn-accent:hover,
.btn-outline.btn-accent:active,
.btn-outline.btn-accent:focus {
    border: 1px solid var(--accent-color) !important;
}

/* common button states */
.btn-filled:active,
.btn-flat:active,
.btn-outline:active {
    transform: scale(0.97, 0.97);
}

.btn-filled:hover:not([disabled]),
.btn-flat:hover:not([disabled]),
.btn-outline:hover:not([disabled]) {
    opacity: 0.85;
}

.btn-filled[disabled],
.btn-flat[disabled],
.btn-outline[disabled] {
    pointer-events: none;
    user-select: none;
}

.btn.btn-round {
    border-radius: 48px;
}

.btn.btn-circle {
    height: 32px;
    width: 32px;
    padding: 4px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.btn.btn-circle.btn-xs {
    width: 24px;
    height: 24px;
    padding: 2px;
}

.btn.btn-circle.btn-sm {
    width: 32px;
    height: 32px;
    padding: 4px;
}

.btn.btn-circle.btn-md {
    width: 38px;
    height: 38px;
    padding: 8px;
}

.btn.btn-circle.btn-lg {
    width: 48px;
    height: 48px;
    padding: 12px;
}

.btn.btn-skeleton,
.btn.btn-skeleton:active,
.btn.btn-skeleton:focus {
    pointer-events: none;
    background: var(--skeleton-color-1) !important;
    border-color: var(--skeleton-color-1) !important;
    color: transparent !important;
}

.btn.btn-skeleton > *,
.btn.btn-skeleton:focus > *,
.btn.btn-skeleton:active > * {
    visibility: hidden;
}


/* modern form control styles */
.form-control.form-control-flat,
.form-control.form-control-filled,
.form-control.form-control-pill,
.form-control.form-control-outline {
    background: none;
    border: none;
    outline: none;
    transition: none;
    -webkit-transition: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    border-color: var(--on-background-color-4);
    color: var(--on-background-color-1);
    padding: 4px 8px;
    font-size: 13px;
    line-height: 24px;
}

.form-control.form-control-flat.input-lg,
.form-control.form-control-filled.input-lg,
.form-control.form-control-pill.input-lg,
.form-control.form-control-outline.input-lg {
    height: 42px;
    font-size: 16px;
}

.form-control.form-control-flat.input-lg {
    padding: 9px 12px 8px 0;
}

.form-control.form-control-filled.input-lg,
.form-control.form-control-pill.input-lg,
.form-control.form-control-outline.input-lg {
    padding: 9px 12px;
}

/* flat form control */
.form-control.form-control-flat {
    padding: 4px 8px 3px 0;
    border-radius: 0;
    border-bottom: 1px solid var(--on-background-color-4);
}

.form-control.form-control-flat:focus,
.form-control.form-control-flat:focus-within {
    border-color: var(--primary-color);
}

/* filled form control */
.form-control.form-control-filled {
    border-radius: 8px;
    background-color: var(--surface-darken-color);
    color: var(--on-surface-darken-color-1);
}

/* outline form control styles */
.form-control.form-control-outline {
    border: 1px solid var(--border-color-1);
    border-radius: 8px;
}

.form-control.form-control-outline:focus,
.form-control.form-control-outline:focus-within {
    color: var(--on-background-color-1);
    border-color: var(--primary-color);
    background-color: var(--primary-color-o1);
}

/* pill form control */
.form-control.form-control-pill {
    border-radius: 17px;
    background-color: var(--surface-color);
    box-shadow: 0 5px 10px 0 rgba(31, 44, 56, 0.15);
    padding: 5px 10px;
}

.form-control.form-control-pill.input-lg {
    border-radius: 21px;
}

/* textarea sizes */
.ik-textarea.form-control.input-xs,
.ik-textarea.form-control.input-sm,
.ik-textarea.form-control.input-md,
.ik-textarea.form-control.input-lg {
    height: auto;
}

/* state input styles */
.form-control.form-control-flat[disabled],
.form-control.form-control-filled[disabled],
.form-control.form-control-outline[disabled] {
    opacity: 0.65;
    pointer-events: none;
    user-select: none;
}


/* tooltip */

.ik-theme .tooltip {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.ik-theme .tooltip-inner {
    overflow-wrap: break-word;
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: 0 5px 20px 0 var(--shadow-color-1);
    background-color: var(--tooltip-color);
    color: var(--on-tooltip-color);
}

.ik-theme .tooltip.top .tooltip-arrow,
.ik-theme .tooltip.top-left .tooltip-arrow,
.ik-theme .tooltip.top-right .tooltip-arrow {
    border-top-color: var(--tooltip-color);
}

.ik-theme .tooltip.right .tooltip-arrow {
    border-right-color: var(--tooltip-color);
}

.ik-theme .tooltip.left .tooltip-arrow {
    border-left-color: var(--tooltip-color);
}

.ik-theme .tooltip.bottom .tooltip-arrow,
.ik-theme .tooltip.bottom-left .tooltip-arrow,
.ik-theme .tooltip.bottom-right .tooltip-arrow {
    border-bottom-color: var(--tooltip-color);
}

.ik-theme .tooltip.in {
    opacity: 1;
}

.ik-theme .popover {
    background-color: var(--tooltip-color);
    color: var(--on-tooltip-color);
}

.ik-theme .popover.top .arrow:after {
    border-top-color: var(--tooltip-color);
}

.ik-theme .popover.right .arrow:after {
    border-right-color: var(--tooltip-color);
}

.ik-theme .popover.bottom .arrow:after {
    border-bottom-color: var(--tooltip-color);
}

.ik-theme .popover.left .arrow:after {
    border-left-color: var(--tooltip-color);
}
