html.stableGutter {
    scrollbar-gutter: stable !important;
}

.widthTransitionEase {
    transition: width 1s ease !important;
}

body {
    background-color: #525252 !important;
}

body:has(.disableBodyScroll) {
    overflow: hidden !important;
}

#main {
    overflow-x: hidden !important;
}

.displayNone {
    display: none !important;
}

.overflowVisible {
    overflow: visible !important;
}

.visibilityHidden {
    visibility: hidden !important;
}


.overflowHidden {
    overflow: hidden !important;
}

.hiddenOffScreen {
    position: absolute !important;
    left: -9999px !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.orderFirst {
    order: -1 !important;
}

.orderLast {
    order: 5000 !important;
}

.objectPositionBottom {
    object-position: bottom !important;
}

.objectPositionBottom img {
    object-position: bottom !important;
}

.objectPositionLeft {
    object-position: left !important;
}

.objectPositionLeft img {
    object-position: left !important;
}

.objectPositionRight {
    object-position: right !important;
}

.objectPositionRight img {
    object-position: right !important;
}

.objectPositionCenterBottom {
    object-position: center bottom !important;
}

.objectPositionCenterBottom img {
    object-position: center bottom !important;
}

.flexNoWrap {
    flex-wrap: nowrap !important;
}

.Text a {
    text-decoration: underline !important;
}

.borderWidthHalf {
    border-width: 0.5px !important;
}

img {
    pointer-events: none;
    /*remove edge image search*/
}

@media (max-width: 1024px) {
    .Popup {
        top: 10px !important;
    }
}

.layoutColumn {
    flex-direction: column !important;
}

.layoutColumn .Text {
    align-self: flex-start !important;
}

.layoutColumn .Link {
    align-self: flex-start !important;
}

.pageHeaderHovered .backgroundImageDefault.topRight {
    opacity: 100 !important;
}

.darkPopupScrollbars {
    /* Firefox */
    scrollbar-color: #FFFFFF4A #12171D !important;
    scrollbar-gutter: stable !important;
}

/* WebKit (Safari, Chrome, Edge) */
.darkPopupScrollbars::-webkit-scrollbar {
    width: 10px;
    /* Adjust as needed */
}

.darkPopupScrollbars::-webkit-scrollbar-track {
    background: #12171D;
    /* Dark background */
}

.darkPopupScrollbars::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.29);
    /* Equivalent to #FFFFFF4A */
    border-radius: 5px;
    /* Optional: Rounds the edges */
}

/* Optional: Hover effect */
.darkPopupScrollbars::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.contentPopup:has(.contentPopupContent[data-scrolled="true"]) .contentPopupTitle {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
}

.popupContent font[size="4"] {
    font-size: 20px !important;
}

.popupContentCard font[size="4"] {
    font-size: 20px !important;
}

.popupContent ul {
    margin: 20px 0 !important;
    list-style-type: disc !important;
    column-count: 1 !important;
}

@media (min-width: 768px) {
    .popupContent ul:has(li:nth-child(5)) {
        column-count: 2 !important;
        /* Two columns on larger screens */
        column-gap: 20px !important;
        /* Adjust gap between columns */
    }
}

.popupContent li {
    font-size: 12px !important;
    line-height: 16px !important;
    list-style-position: outside !important;
    /* Keeps bullet outside text */
    padding-left: 10px !important;
    /* Controls gap between bullet and text */
}

.popupContent ul li::marker {
    font-size: 8px !important;
    /* Makes the bullet smaller */
}

.popupContentStatsCard font[size="1"],
.popupContentColoredStatsCard font[size="1"],
.popupContentGraduatedStatsCard font[size="1"] {
    font-size: 20px !important;
}

.contentPopup blockquote {
    border-left-width: 6px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-left: 20px !important;
}

.contentPopup blockquote img {
    padding-bottom: 16px !important;
}

.contentPopup.productezrax blockquote {
    border-left-color: #8DF7FF !important;
}

.contentPopup.productedge blockquote {
    border-left-color: #FDF361 !important;
}

.contentPopup.productfocus blockquote {
    border-left-color: #EE38A5 !important;
}

.contentPopup.productcai blockquote {
    border-left-color: #61656B !important;
}

.contentPopup blockquote font[size="4"] {
    font-size: 16px !important;
}

.contentPopup blockquote:has(> strong:first-child) {
    padding-top: 16px !important;
}

.group-item.column:has(.colspan3) {
    grid-column: span 3 !important;
}

.RepeatingGroup .column:has(.columnSeparator)::after {
    content: "";
    position: absolute;
    top: 10%;
    bottom: 10%;
    right: -1px;
    width: 1px;
    background-color: white;
}

.RepeatingGroup .column:has(.columnSeparatorVertical)::after {
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 1px;
    background-color: white;
}

.imagePopup {
    inset: unset !important;
    position: fixed !important;
    top: 0px !important;
    bottom: 0px !important;
    left: 0px !important;
    right: 0px !important;
}

.snapScroll {
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.snapScroll>* {
    scroll-snap-align: start !important;
}

.snapScroll::-webkit-scrollbar {
    display: none !important;
}

@media (max-width: 768px) {
    .vwMinus40 {
        max-width: calc(100vw - 40px) !important;
    }
}

.aboutStatTitle font[size="1"] {
    font-size: 16px !important;
}

.aboutStatTitle {
    max-width: 180px !important;
}

.pageFooterBackgroundFullSize {
    background-position: right center !important;
    background-size: auto 100% !important;
}

.pageFooterBackgroundNotFullSize {
    background-position: calc(50% + 100px) !important;
    background-size: auto 100% !important;
}

#loopBackgroundGradient {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    background: radial-gradient(
        ellipse 100% 75% at 8% 81%,
        rgba(255, 255, 255, 0.24) 0%,
        rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(
        ellipse 85% 55% at 74% 49%,
        rgba(253, 243, 97, 0.48) 0%,
        rgba(253, 243, 97, 0) 100%
    ),
    rgb(32, 35, 41) !important;
    z-index: 0 !important;
}

#loopTagline > div,
#loopDemo > div {
    background: none !important;
}

#loopProductCard {
    border-color: #F2F2F0 !important;
}

#loopProductCard .productCardBackground{
    background:
        radial-gradient(
        ellipse 100% 75% at 100% 80%,
        rgba(255, 255, 255, 0.24) 0%,
        rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
        ellipse 85% 55% at 0% 68%,
        rgba(253, 243, 97, 0.28) 0%,
        rgba(253, 243, 97, 0) 100%
        ),
        rgb(32, 35, 41) !important;
}

.loopContentPopup {
    border-top-color: #F2F2F0 !important;
}

#loopFeatures .featureCard .featureCardHover {
    background:
        radial-gradient(
        ellipse 100% 75% at 100% 80%,
        rgba(255, 255, 255, 0.24) 0%,
        rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
        ellipse 85% 55% at 0% 68%,
        rgba(253, 243, 97, 0.28) 0%,
        rgba(253, 243, 97, 0) 100%
        ) !important;
}

#caiBanner .bannerText {
    width: auto !important;
    min-width: auto !important;
}

#loopPageFooter .pageFooterBackgroundFullSize, 
#loopPageFooter .pageFooterBackgroundNotFullSize {
    background-position: initial !important;
}

#loopPageFooter, #loopPageFooter .pageFooterBackgroundNotFullSize {
    background: linear-gradient(90deg, #33373B 0%, rgb(51, 55, 59) 39.8%, #434627 100%) !important;
}

#loopPageFooter .pageFooterBackgroundNotFullSize::before {
    content: "";
    position: absolute;
    top: 0;
    left: 40%;
    width: 75%;
    height: 100%;
    background-image: url('https://deccdce8a36183200bb942dc47b8f75a.cdn.bubble.io/d311/f1790339822718x386569918690373700/Layer%201.png');
    background-repeat: no-repeat;
    background-size: auto 135%;
    background-position: left 0 top 10%;
}

@media (max-width: 768px) {
    #loopPageFooter .pageFooterBackgroundNotFullSize::before {
        top: 20%;
        left: 0;
        background-size: 100%;
        background-position: initial;
        width: 100%;
    }
}


#loopFeatures .featuresShape {
    background: linear-gradient(90deg, #33373B 0%, rgb(51, 55, 59) 39.8%, #434627 100%) !important;
}

@media (max-width: 768px) {
    .pageFooterBackgroundMobile {
        background-position: center center !important;
        background-size: auto 100% !important;
        padding-bottom: 20px !important;
        padding-top: 20px !important;
    }
}

.backgroundBlendDarken {
    background-blend-mode: darken !important;
}

.backgroundLighten35 {
    background-image: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)) !important;
}

.backgroundLighten18 {
    background-image: linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18)) !important;
}

.transformTransition {
    transition: transform 0.35s ease !important;
}

.loadingContainer1 {
    /* width: max-content; doesn't work in Safari */
    margin: 0 auto;
    height: 100%;
}

.loadingContainer1 div {
    height: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    float: left;
    margin: 0 3px;
    background: #12171D;
    transform: scale(0.66);
}

.loadingContainer1 .ball1 {
    z-index: 1;
    animation: grow 3.4s infinite ease-in-out;
}

.loadingContainer1 .ball2 {
    animation: grow 3.4s infinite ease-in-out;
    animation-delay: 0.2s;
}

.loadingContainer1 .ball3 {
    animation: grow 3.4s infinite ease-in-out;
    animation-delay: 0.4s;
}

.loadingContainer1 .ball4 {
    animation: grow 3.4s infinite ease-in-out;
    animation-delay: 0.6s;
}


@keyframes grow {
    0% {
        transform: scale(0.66);
    }

    25% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.66);
    }

    75% {
        transform: scale(1);
        background: #12171D;
    }

    100% {
        transform: scale(0.66);
        background: #12171D;
    }
}

.loadingContainerWhite {
    /* width: max-content; doesn't work in Safari */
    margin: 0 auto;
    height: 100%;
}

.loadingContainerWhite div {
    height: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    float: left;
    margin: 0 3px;
    background: #FFFFFF;
    transform: scale(0.66);
}

.loadingContainerWhite .ball1 {
    z-index: 1;
    animation: growWhite 3.4s infinite ease-in-out;
}

.loadingContainerWhite .ball2 {
    animation: growWhite 3.4s infinite ease-in-out;
    animation-delay: 0.2s;
}

.loadingContainerWhite .ball3 {
    animation: growWhite 3.4s infinite ease-in-out;
    animation-delay: 0.4s;
}

.loadingContainerWhite .ball4 {
    animation: growWhite 3.4s infinite ease-in-out;
    animation-delay: 0.6s;
}


@keyframes growWhite {
    0% {
        transform: scale(0.66);
    }

    25% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.66);
    }

    75% {
        transform: scale(1);
        background: #FFFFFF;
    }

    100% {
        transform: scale(0.66);
        background: #FFFFFF;
    }
}

.noSelect {
    user-select: none;
}


.select2-dropdown {
    background-color: #FFFFFF !important;
}