:root {
    --c4me-site-logo-one-url: url("/themes/choices4me/Assets/img/4mechoices-logo.svg");
    --c4me-site-logo-two-url: url("/themes/choices4me/Assets/img/BW_Master_Logotype_RGB.svg");
    --c4me-site-background-top-right-url: url("/themes/choices4me/Assets/img/bg-top-right.svg");
    --c4me-site-background-center-left-url: url("/themes/choices4me/Assets/img/bg-center-left.svg");
    --c4me-site-background-bottom-left-url: url("/themes/choices4me/Assets/img/bg-bottom-left.svg");
    --c4me-login-background-top-left-url: url("/themes/choices4me/Assets/img/login-bg-top-left.svg");
    --c4me-login-background-top-right-url: url("/themes/choices4me/Assets/img/login-bg-top-right.svg");
    --c4me-login-background-bottom-left-url: url("/themes/choices4me/Assets/img/login-bg-bottom-left.svg");
    --c4me-homepage-banner-large-image: '/themes/choices4me/Assets/img/hero-banner-1200.jpg';
    --c4me-homepage-banner-medium-image: '/themes/choices4me/Assets/img/hero-banner-480.jpg';
    --c4me-homepage-banner-small-image: '/themes/choices4me/Assets/img/hero-banner-320.jpg';
    --c4me-landing-page-banner-large-image: '/themes/choices4me/Assets/img/landing-page-hero-large.jpg';
    --c4me-landing-page-banner-medium-image: '/themes/choices4me/Assets/img/landing-page-hero-medium.jpg';
    --c4me-landing-page-banner-small-image: '/themes/choices4me/Assets/img/landing-page-hero-small.jpg';
    --c4me-mangrove-image: '/themes/choices4me/Assets/img/sustainable-banner-element-mangrove.jpg';
    --c4me-coral-image: '/themes/choices4me/Assets/img/sustainable-banner-element-coral.jpg';
    --c4me-ocean-image: '/themes/choices4me/Assets/img/sustainable-banner-element-ocean.jpg';
    --c4me-sustainable-icon: '/themes/choices4me/Assets/img/icon-sustainable4me.svg';
    --c4me-sign-out-icon-url: url("/themes/choices4me/Assets/img/config-icons/log-out.svg");
    --c4me-show-icon-url: url("/themes/choices4me/Assets/img/config-icons/eye.svg");
    --c4me-hide-icon-url: url("/themes/choices4me/Assets/img/config-icons/eye-off.svg");
    --c4me-menu-icon-url: url("/themes/choices4me/Assets/img/config-icons/menu.svg");
    --c4me-menu-close-icon-url: url("/themes/choices4me/Assets/img/config-icons/x.svg");
}

@font-face {
    font-family: "Feather-icomoon";
    src: url("/themes/choices4me/Assets/fonts/Feather-icomoon.woff2") format("woff2"), url("/themes/choices4me/Assets/fonts/Feather-icomoon.woff") format("woff"), url("/themes/choices4me/Assets/fonts/Feather-icomoon.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Core-typeface";
    src: url("/themes/choices4me/Assets/fonts/Regular.woff2") format("woff2"), url("/themes/choices4me/Assets/fonts/Regular.woff") format("woff"), url("/themes/choices4me/Assets/fonts/Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Core-typeface";
    src: url("/themes/choices4me/Assets/fonts/Medium.woff2") format("woff2"), url("/themes/choices4me/Assets/fonts/Medium.woff") format("woff"), url("/themes/choices4me/Assets/fonts/Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Core-typeface";
    src: url("/themes/choices4me/Assets/fonts/SemiBold.woff2") format("woff2"), url("/themes/choices4me/Assets/fonts/SemiBold.woff") format("woff"), url("/themes/choices4me/Assets/fonts/SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Core-typeface";
    src: url("/themes/choices4me/Assets/fonts/Bold.woff2") format("woff2"), url("/themes/choices4me/Assets/fonts/Bold.woff") format("woff"), url("/themes/choices4me/Assets/fonts/Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Core-typeface";
    src: url("/themes/choices4me/Assets/fonts/ExtraBold.woff2") format("woff2"), url("/themes/choices4me/Assets/fonts/ExtraBold.woff") format("woff"), url("/themes/choices4me/Assets/fonts/ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

#representing-message {
    background-color: #fff;
}

    #representing-message .alert {
        max-width: 60rem;
        margin: 0 auto;
    }

.pointer {
    cursor: pointer;
}

torus-image.nav-link-icon {
    display: flex;
    align-items: end;
}

.nav-link-icon svg {
    height: 1.125rem;
    aspect-ratio: 1;
}

.navbar-nav .dropdown-arrow {
    display: inline-block;
    content: "";
    margin-inline-start: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235a5983' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%0A%3E%3Cpolyline points='6 9 12 15 18 9' /%3E%3C/svg%3E%0A");
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
}

.navbar-nav .dropdown-toggle[aria-expanded=true] {
    --bs-nav-link-color: var(--core-heading);
}

    .navbar-nav .dropdown-toggle[aria-expanded=true] .dropdown-arrow {
        transform: scale(-1);
    }

/*#region Torus Spinner */

.torus-spinner {
    margin: 50px auto 0;
    width: 70px;
    text-align: center;
}

    .torus-spinner > div {
        width: 18px;
        height: 18px;
        background-color: #333;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
        animation: bouncedelay 1.4s infinite ease-in-out;
        /* Prevent first frame from flickering when animation starts */
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .torus-spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .torus-spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

@-webkit-keyframes bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0.0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes bouncedelay {
    0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }

    40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

/*#endregion Torus Spinner */

.tooltip.in {
    opacity: var(--bs-tooltip-opacity);
    z-index: 1070;
    position: absolute;
}

.tooltip.top {
    padding: 5px 0;
    margin-top: -3px;
}

.tooltip.right {
    padding: 0 5px;
    margin-left: 3px;
}

.tooltip.bottom {
    padding: 5px 0;
    margin-top: 3px;
}

.tooltip.left {
    padding: 0 5px;
    margin-left: -3px;
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000000;
}

.tooltip.top-left .tooltip-arrow {
    right: 5px;
    bottom: 0;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000000;
}

.tooltip.top-right .tooltip-arrow {
    bottom: 0;
    left: 5px;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000000;
}

.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #000000;
}

.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #000000;
}

.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000000;
}

.tooltip.bottom-left .tooltip-arrow {
    top: 0;
    right: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000000;
}

.tooltip.bottom-right .tooltip-arrow {
    top: 0;
    left: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #ffffff;
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

html, body {
    padding-top: 0px;
}

.navbar-brand {
    text-indent: 0 !important;
}

.form-control-static {
    width: 100% !important;
}

#gritter-notice-wrapper {
    top: auto !important;
    bottom: 20px !important;
}

.gritter-item-wrapper {
    margin: 0 !important;
}

#gritter-notice-wrapper > :not(:last-child) {
    margin-bottom: 1.5rem !important;
}

.gritter-title {
    font-size: inherit !important;
    font-weight: inherit !important;
    padding: 0 !important;
    display: inherit !important;
    text-shadow: inherit !important;
}

.toast-body .feather {
    font-family: Feather-icomoon !important;
    font-weight: 400;
    font-style: normal;
}

.toast-body .text-danger.feather:before {
    content: '\e904';
}

.toast-body .text-success.feather:before {
    content: '\e92c';
}

.toast .progress-bar {
    transition: none !important;
}

.list-group-checkable .list-group-item.error {
    --bs-list-group-border-color: var(--core-danger);
    --bs-list-group-bg: rgba(var(--core-danger-rgb), 0.05);
    box-shadow: var(--bs-box-shadow-sm), 0 0 0 1px var(--core-danger);
}

.badge.bg-danger, .badge.bg-warning {
    color: #fff;
}

.greyed-out {
    opacity: 0.55;
}

/*#region codeflask*/
.codeflask {
    background: #fff;
    color: #5c6773;
}

    .codeflask .token.ncalc-region {
        color: #9e9e9e;
    }

    .codeflask .token.punctuation {
        color: #444444;
    }

    .codeflask .token.keyword {
        color: #F29718;
    }

    .codeflask .token.preprocessor {
        color: #6f6f6f;
    }

    .codeflask .token.operator {
        color: #5c6773;
    }

    .codeflask .token.string {
        color: #86B300;
    }

    .codeflask .token.comment {
        color: #ABB0B6;
    }

    .codeflask .token.function-ncalc {
        color: #41a6d9;
    }

    .codeflask .token.function {
        color: #41a6d9;
    }

    .codeflask .token.boolean {
        color: #A37ACC;
    }

    .codeflask .token.number {
        color: #A37ACC;
    }

    .codeflask .token.selector {
        color: #F29718;
    }

    .codeflask .token.property {
        color: #41A6D9;
    }

    .codeflask .token.tag, .codeflask .token.class-name {
        color: #41A6D9;
    }

    .codeflask .token.attr-value {
        color: #A37ACC;
    }

    .codeflask textarea, .codeflask pre {
        line-height: 1.2;
    }

    .codeflask .language-css_with_ncalc .token.expression,
    .codeflask .language-javascript_with_ncalc .token.expression {
        background: rgba(10, 10, 10, 0.03);
    }

/*#endregion*/

/*#region expression editor */

.torus-expressioneditor {
    position: relative;
    min-height: 100px;
    animation-duration: 0.01s;
    animation-name: expressionEditorNodeInserted;
    margin-bottom: 10px;
}

    .torus-expressioneditor textarea,
    .torus-expressioneditor pre,
    .torus-expressioneditor pre > code {
        white-space: pre !important;
        word-break: keep-all !important;
        word-wrap: normal !important;
        color: #5c6066 !important;
    }

    .torus-expressioneditor textarea {
        color: transparent !important;
    }

        .torus-expressioneditor textarea::-moz-selection {
            color: transparent !important;
            background: #3297FD !important;
        }

        .torus-expressioneditor textarea::selection {
            color: transparent !important;
            background: #3297FD !important;
        }

/* Trick used for node insertion events */
@keyframes expressionEditorNodeInserted {
    from {
        outline-color: #fff;
    }

    to {
        outline-color: #000;
    }
}

.torus-expressioneditor pre {
    background: none;
    border: none;
}

.torus-expressioneditor > .codeflask {
    resize: vertical;
    height: 100%;
}

/** Force code flask font to be monospace */
.codeflask__flatten, .codeflask__flatten * {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
    font-size: 15px !important;
}

.torus-expressioneditor.flasked:after {
    content: '';
    background: url(../../images/resize.png) no-repeat;
    background-size: contain;
    width: 8px;
    height: 8px;
    display: block;
    position: absolute;
    right: 2px;
    bottom: 2px;
    cursor: nwse-resize;
    z-index: 2;
    pointer-events: all;
}

/*#endregion*/

/* Torus Confidential / KBS Dimmer Overlay */
.torusDimmerOverlay {
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: 0.5s;
    animation: 0.5s;
    z-index: 999998;
}

/* Torus Dimmer for IE as does not support blur */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .torusDimmerOverlay {
        background: rgba(0, 0, 0, 1) !important;
    }
}

.scroll-left, .scroll-right {
    display: none;
}

/* chartjs custom tooltip*/

.chartjsTooltip {
    --bs-tooltip-font-size: 0.8rem;
    --bs-tooltip-color: var(--core-heading);
    --bs-tooltip-bg: var(--bs-body-bg);
    --bs-tooltip-border-radius: var(--bs-border-radius-sm);
    --bs-tooltip-padding-x: 0.5rem;
    --bs-tooltip-padding-y: 0.5rem;
    background-color: var(--bs-tooltip-bg);
    color: var(--bs-tooltip-color);
    font-size: var(--bs-tooltip-font-size);
    border-radius: 8px;
    box-shadow: var(--bs-box-shadow-sm);
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, 0);
    transition: all .1s ease;
    padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
    border-radius: var(--bs-tooltip-border-radius);
}

    .chartjsTooltip .tooltipLegend {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 50%;
        flex-shrink: 0;
        margin-block-start: 0.25rem;
        display: inline-block;
        margin-right: 4px;
    }

    .chartjsTooltip .tooltipValue {
        font-weight: bold;
        color: var(--bs-tooltip-color);
    }

.custom-tooltip {
    color: var(--bs-tooltip-color);
    background-color: var(--bs-tooltip-bg);
}

.tooltip-inner {
    max-width: inherit !important;
    font-weight: normal;
    text-align: left !important;
}

    .tooltip-inner .package-legend {
        margin-block-start: 0 !important;
    }

.__masked-blur .masked-content,
.__masked-blur .masked-content * {
    filter: blur(5px);
}

/* absolute image references*/
.mask-image-container {
    -webkit-mask-image: url("/themes/choices4me/Assets/img/mask.png");
    mask-image: url("/themes/choices4me/Assets/img/mask.png");
}

@media (min-width: 768px) {
    .people-like-me-nav .nav-pills .nav-link.first-person::after {
        background-image: url("themes/choices4me/Assets/img/support-faqs-images/blob.png");
        background-position: 10% 0;
    }
}

.step-indicator-link.finished .feather.icon-check {
    display: block;
}

.step-indicator-link.finished .step-indicator-num {
    display: none;
}

.step-indicator-link.finished .step-indicator-badge {
    color: var(--bs-body-bg);
    background: var(--core-accent);
}

.step-indicator-link.finished {
    pointer-events: auto;
}

    .step-indicator-link.finished .step-indicator-title {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: calc(-100% - 0.5rem);
    }

.alert-danger {
    --bs-alert-color: var(--core-danger);
    --bs-alert-bg: rgba(var(--core-danger-rgb), 0.01);
    --bs-alert-border-color: var(--core-danger);
    border-style: dashed;
    border-width: 2px;
}

@media (min-width: 992px) {
    .hero-container .hero-banner-landing-page::after {
        background-image: url("/themes/choices4me/Assets/img/wave.svg");
    }
}

.announcement-gritter {
    border-color: rgba(var(--bs-danger-rgb), 1) !important;
}

    .announcement-gritter div.h6 {
        color: rgba(var(--core-heading-rgb), var(--bs-text-opacity, 1)) !important;
        font-weight: var(--core-fw-semibold) !important;
    }

    .announcement-gritter .icon-bell:before {
        font-size: 1.5rem;
    }

.card-benefit:has(.dropdown-menu-end) {
    overflow: inherit;
}

.label-featured {
    margin: 0;
}