*{
    --cws-suite-positive:        #22C55E;
    --cws-suite-positive-hover:  #16A34A;
    --cws-suite-negative:        #EF4444;
    --cws-suite-negative-hover:  #DC2626;
    --cws-suite-neutral:         #64748B;
    --cws-suite-neutral-hover:   #475569;
    --cws-suite-neutral-active:  #2c343f;
}

.cf-7-cws-suite-row {
    position: absolute;
    left: -9999px;
}

.flex {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.flex-column {
    flex-direction: column;
}

.flex-jc-space-between {
    justify-content: space-between;
}

.icon svg {
    height: 100%;
    width: 100%;
}

.grid {
    display: grid;
}

/* core skeleton */
.cws-suite-skeleton {
    position: relative;
    overflow: hidden;
    background: #eee;
    border-radius: 2px;
}

/* shimmer */
.cws-suite-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, #f6f6f6 50%, transparent 100%);
    transform: translateX(-100%);
    animation: cwssuiteshimmer 0.8s ease-in-out infinite;
    background-size: 200% 100%;
}

@keyframes cwssuiteshimmer {
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cws-suite-skeleton::after {
        animation: none;
        display: none;
    }
}

@-webkit-keyframes cwssuiterotate {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes cwssuiterotate {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}