@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.svg-funnel-js {
    display: inline-block;
    position: relative;
}

.svg-funnel-js svg {
    display: block;
}

.svg-funnel-js .svg-funnel-js__labels {
    position: absolute;
    display: flex;
    width: 200%;
    height: 100%;
    top: 0;
    left: 0;
}

.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__labels {
    flex-direction: column;
}


.svg-funnel-js {
    font-family: "Poppins", sans-serif;
}

.svg-funnel-js .svg-funnel-js__container {
    width: 100%;
    height: 100%;
}

.svg-funnel-js .svg-funnel-js__labels {
    width: 110%;
    box-sizing: border-box;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label {
    flex: 1 1 0;
    position: relative;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__value {
    font-size: 24px;
    color: var(--color-secondary-base);
    line-height: 18px;
    margin-bottom: 6px;
    display: inline-block;
}

/* Override font size when small-font class is added */
.small-font .svg-funnel-js__labels .svg-funnel-js__label .label__value {
    font-size: 18px; /* Set font size to 16px */
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__value2 {
    font-size: 24px;
    color: var(--color-secondary-base);
    line-height: 18px;
    margin-bottom: 6px;
    float: right;
    display: inline-block;
}

/* Override font size when small-font class is added */
.small-font .svg-funnel-js__labels .svg-funnel-js__label .label__value2 {
    font-size: 18px; /* Set font size to 16px */
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__title {
    font-size: 12px;
    font-weight: bold;
    color: var(--color-secondary-40L);
    display: inline-block;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__post-text {
    margin-left: 2px;
    font-weight: bold;
    font-size: 12px;
    color: var(--color-secondary-40L);
    display: inline-block;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__title2 {
    font-size: 12px;
    font-weight: bold;
    color: var(--color-secondary-40L);
    float: right;
    display: inline-block;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__percentage {
    font-size: 16px;
    color: var(--color-secondary-40L);
    display: inline-block;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__percentage2 {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-secondary-20L);
    float: right;
    display: inline-block;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    left: 0;
    padding: 8px 24px;
    box-sizing: border-box;
    background-color: var(--color-secondary-base);
    margin-top: 24px;
    opacity: 0;
    transition: opacity 0.1s ease;
    cursor: default;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages ul li {
    font-size: 13px;
    line-height: 16px;
    color: var(--bs-light);
    margin: 18px 0;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages ul li .percentage__list-label {
    font-weight: bold;
    color: var(--bs-light);
}

.no-banner.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label:hover .label__segment-percentages {
    opacity: 0;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label:hover .label__segment-percentages {
    opacity: 1;
}

.svg-funnel-js:not(.svg-funnel-js--vertical) {
    padding-top: 64px;
    padding-bottom: 16px;
}

.svg-funnel-js:not(.svg-funnel-js--vertical) .svg-funnel-js__label {
    padding-left: 24px;
}

.svg-funnel-js:not(.svg-funnel-js--vertical) .svg-funnel-js__label:not(:first-child) {
    border-left: 1px solid #9896dc;
}

.svg-funnel-js.svg-funnel-js--vertical {
    padding-left: 25%;
    /* padding-right: 16px; */
}

.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__label {
    padding-top: 24px;
}

.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__label:not(:first-child) {
    border-top: 1px solid #dcdcdc;
}

.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__label .label__segment-percentages {
    margin-top: 0;
    margin-left: 106px;
    width: calc(100% - 106px);
}

.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__label .label__segment-percentages .segment-percentage__list {
    display: flex;
    justify-content: space-around;
}

.svg-funnel-js .svg-funnel-js__subLabels {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    position: absolute;
    width: 100%;
    left: 0;
}

.svg-funnel-js__subLabels {
    display: none !important;
  }

.svg-funnel-js .svg-funnel-js__subLabels .svg-funnel-js__subLabel {
    display: flex;
    font-size: 12px;
    color: #fff;
    line-height: 16px;
}

.svg-funnel-js .svg-funnel-js__subLabels .svg-funnel-js__subLabel:not(:first-child) {
    margin-left: 16px;
}

.svg-funnel-js .svg-funnel-js__subLabels .svg-funnel-js__subLabel .svg-funnel-js__subLabel--color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 2px 8px 2px 0;
}