@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap') :root --bal-font-family-text: 'Inter', 'Helvetica', sans-serif --bal-font-family-title: 'Inter', 'Helvetica', sans-serif --bal-color-primary-1: #f1dddb --bal-color-primary-2: #d9a09b --bal-color-primary-3: #c0645c --bal-color-primary-4: #a8281c --bal-color-primary-5: #791d14 --bal-color-primary-6: #4a120c --bal-color-primary: var(--bal-color-primary-4) --bal-color-grey-1: #f0f1f2 // --bal-color-grey-2: #d5d8da --bal-color-grey-2: #ecedee --bal-color-grey-3: #bbc0c3 // --bal-color-grey-4: #a0a7ab --bal-color-grey-4: #d9dcdd --bal-color-grey-5: #73787b --bal-color-grey-6: #46494b --bal-color-grey: var(--bal-color-grey-4) --bal-body-color: #000 --bal-color-purple-1: #d6e9eb --bal-color-purple-2: #8fc2c7 --bal-color-purple-3: #479ba4 --bal-color-purple-4: #007480 --bal-color-purple-5: #004d56 --bal-color-purple-6: #002226 --bal-color-purple: var(--bal-color-purple-4) --bal-color-green-1: #d6e9eb --bal-color-green-2: #8fc2c7 --bal-color-green-3: #479ba4 --bal-color-green-4: #007480 --bal-color-green-5: #004d56 --bal-color-green-6: #002226 --bal-color-green: var(--bal-color-green-4) --bal-color-text-primary: var(--bal-color-primary-4) --bal-color-text-primary-hovered: var(--bal-color-primary-5) --bal-color-text-primary-pressed: var(--bal-color-primary-6) --bal-link-color: var(--bal-color-purple-4) --bal-link-color-hover: var(--bal-color-purple-5) --bal-link-color-active: var(--bal-color-purple-6) // // Native Lists --bal-description-list-term-color: var(--bal-color-text-primary) --bal-description-list-detail-color: var(--bal-body-color) // // // // Buttons --bal-button-radius: 2px --bal-button-background: white --bal-button-color: var(--bal-color-purple-4) --bal-button-color-hover: var(--bal-color-purple-5) --bal-button-color-active: var(--bal-color-purple-6) --bal-button-border-color: var(--bal-color-primary) --bal-button-background-hover: var(--bal-color-grey-1) --bal-button-background-active: var(--bal-color-grey-2) --bal-button-border-color-hover: var(--bal-color-primary-4) --bal-button-border-color-active: var(--bal-color-primary-5) // Primary buttons --bal-button-primary-background: var(--bal-color-primary) --bal-button-primary-background-hover: var(--bal-color-primary-5) --bal-button-primary-background-active: var(--bal-color-primary-6) --bal-button-primary-border-color: var(--bal-color-primary) --bal-button-primary-border-color-hover: var(--bal-color-primary-5) --bal-button-primary-border-color-active: var(--bal-color-primary-6) // // text --bal-button-text-border-color-hover: var(--bal-color-purple-1) --bal-button-text-border-color-active: var(--bal-color-purple-1) --bal-button-text-background-hover: var(--bal-color-purple-1) --bal-button-text-background-active: var(--bal-color-purple-1) // Tertiary buttons --bal-button-tertiary-purple-background: var(--bal-color-purple-4) --bal-button-tertiary-purple-background-hover: var(--bal-color-purple-5) --bal-button-tertiary-purple-background-active: var(--bal-color-purple-6) --bal-button-tertiary-purple-border-color: var(--bal-color-purple-4) --bal-button-tertiary-purple-border-color-hover: var(--bal-color-purple-5) --bal-button-tertiary-purple-border-color-active: var(--bal-color-purple-6) --bal-button-tertiary-purple-color: white --bal-button-tertiary-purple-color-hover: white --bal-button-tertiary-purple-color-hover: white --bal-button-tertiary-purple-color-active: white // Light --bal-button-light-color: var(--bal-color-purple-4) --bal-button-light-color-hover: var(--bal-color-purple-5) --bal-button-light-color-active: var(--bal-color-purple-6) --bal-button-light-background-hover: var(--bal-color-purple-1) --bal-button-light-background-active: var(--bal-color-purple-2) --bal-button-light-border-color-hover: var(--bal-color-purple-1) --bal-button-light-border-color-active: var(--bal-color-purple-2) // // disabled --bal-button-disabled-color: var(--bal-color-grey-3) --bal-button-disabled-border-color: var(--bal-color-grey-1) --bal-button-disabled-background: var(--bal-color-grey-1) // // Accordions --bal-list-accordion-head-background-hover: var(--bal-color-purple-5) --bal-list-accordion-head-background-active: var(--bal-color-purple-6) --bal-list-item-background-hover: var(--bal-color-purple-5) --bal-list-item-background-active: var(--bal-color-purple-6) --bal-list-item-subtile-color: var(--bal-color-grey-5) // // Form --bal-form-field-control-color: black --bal-form-field-message-color: var(--bal-color-grey-6) --bal-form-field-control-border-color-active: var(--bal-color-green) --bal-form-field-control-placeholder-color: var(--bal-color-grey-5) // Icon --bal-icon-color-primary: var(--bal-color-green) --bal-icon-color-primary-dark: var(--bal-color-green-5) --bal-hint-icon-color-hover: var(--bal-color-green-5) // // Segment --bal-segment-item-indicator-background: var(--bal-color-green) --bal-segment-item-divider-background: var(--bal-color-grey-3) --bal-segment-item-text-color: var(--bal-color-grey-6) --bal-segment-item-text-color-hovered: black --bal-segment-item-text-color-pressed: black --bal-segment-item-text-color-checked: white --bal-segment-item-text-color-checked-hovered: white --bal-segment-item-text-color-checked-pressed: white // // select --bal-select-control-border-color-focused: var(--bal-color-green) --bal-select-control-border-color-focus-within: var(--bal-color-green) --bal-select-control-input-option-background-selected: var(--bal-color-green-2) --bal-select-control-input-option-background-focused: var(--bal-color-grey-2) --bal-select-control-input-option-background-hover: var(--bal-color-grey-2) --bal-select-control-input-option-background-active: var(--bal-color-grey-3) --bal-option-background-selected: var(--bal-color-green-2) --bal-option-background-hovered: var(--bal-color-grey-2) --bal-option-background-pressed: var(--bal-color-grey-2) --bal-option-background-selected-hovered: var(--bal-color-grey-2) --bal-option-background-selected-pressed: var(--bal-color-grey-2) --bal-option-text-hovered: black --bal-check-border-color: var(--bal-color-green) --bal-check-border-color-hovered: var(--bal-color-green-4) --bal-check-border-color-pressed: var(--bal-color-green-5) --bal-check-background-checked: var(--bal-color-green) --bal-check-background-checked-hovered: var(--bal-color-green-4) --bal-check-background-checked-pressed: var(--bal-color-green-5) --bal-check-border-color-checked: var(--bal-color-green) --bal-check-border-color-checked-hovered: var(--bal-color-green-4) --bal-check-border-color-checked-pressed: var(--bal-color-green-5) --bal-checkbox-switch-label-background-before: var(--bal-color-green-1) --bal-checkbox-switch-label-background-after: var(--bal-color-green) --bal-checkbox-switch-label-background-hover-after: var(--bal-color-green-5) --bal-checkbox-switch-label-background-pressed-after: var(--bal-color-green-6) --bal-checkbox-switch-label-background-checked-before: var(--bal-color-green) --bal-checkbox-switch-label-background-checked-hover-before: var(--bal-color-green) --bal-checkbox-switch-label-background-checked-pressed-before: var(--bal-color-green-6) --bal-radio-icon-background-checked: var(--bal-color-green) --bal-radio-icon-background-checked-hovered: var(--bal-color-green-5) --bal-radio-icon-background-checked-pressed: var(--bal-color-green-6) --bal-radio-icon-border-color: var(--bal-color-green) --bal-radio-icon-border-color-hovered: var(--bal-color-green-5) --bal-radio-icon-border-color-pressed: var(--bal-color-green-6) --bal-radio-icon-border-color-checked: var(--bal-color-green) --bal-radio-icon-border-color-checked-hovered: var(--bal-color-green-5) --bal-radio-icon-border-color-checked-pressed: var(--bal-color-green-6) // // Steps --bal-steps-step-border-color-done: var(--bal-color-primary) --bal-steps-step-border-color-done: var(--bal-color-primary) --bal-steps-step-icon-background-done: var(--bal-color-primary) --bal-steps-step-label-text-color-done: var(--bal-color-grey-6) --bal-steps-step-label-text-color: var(--bal-color-grey-6) --bal-steps-step-label-text-color-active: black --bal-steps-step-icon-text-color: black --bal-steps-step-border-color: var(--bal-color-grey-3) --bal-steps-step-button-progress-line-background: var(--bal-color-grey-3) --bal-steps-step-border-color-active: var(--bal-color-primary) --bal-steps-step-icon-background-active: var(--bal-color-primary) --bal-steps-step-button-passed-background: var(--bal-color-primary) // // Pagination --bal-pagination-small-background: var(--bal-color-grey-3) // // Tabs --bal-tabs-tab-nav-border-background: var(--bal-color-grey-3) --bal-tabs-tab-label-text-color: var(--bal-grey-6) --bal-tabs-tab-label-text-color-active: var(--bal-color-primary) --bal-tabs-tab-button-label-text-color-hover: var(--bal-color-primary-5) --bal-tabs-tab-button-label-text-color-active: var(--bal-color-primary-6) --bal-tabs-tab-label-text-color-disabled: var(--bal-color-grey-5) // // Toast --bal-toast-color: var(--bal-color-grey-6) --bal-toast-color-info: var(--bal-color-grey-6) --bal-toast-color-success: var(--bal-color-grey-6) --bal-toast-color-warning: var(--bal-color-grey-6) --bal-toast-color-danger: var(--bal-color-grey-6) // // Notification --bal-notification-color: var(--bal-color-grey-6) --bal-notification-color-info: var(--bal-color-grey-6) --bal-notification-color-primary: var(--bal-color-purple-5) --bal-notification-color-success: var(--bal-color-grey-6) --bal-notification-color-warning: var(--bal-color-grey-6) --bal-notification-color-danger: var(--bal-color-grey-6) // // Tags --bal-tag-background: var(--bal-color-info-1) --bal-tag-text: var(--bal-color-black) --bal-tag-text-warning: var(--bal-color-black) --bal-tag-text-yellow: var(--bal-color-white) --bal-tag-text-green: var(--bal-color-white) --bal-tag-text-purple-light: var(--bal-color-black) --bal-tag-text-red-light: var(--bal-color-black) --bal-tag-text-green-light: var(--bal-color-black) --bal-tag-text-yellow-light: var(--bal-color-black) --bal-tag-background-disabled: var(--bal-color-grey-2) --bal-tag-border-disabled-color: var(--bal-color-grey-2) --bal-tag-text-disabled: var(--bal-color-grey-5) --bal-tag-background-disabled: var(--bal-color-grey-2) // // Spinner --bal-spinner-circle-background: var(--bal-color-info-1) --bal-spinner-circle-progress: var(--bal-color-green) --bal-spinner-circle-progress-inverted: var(--bal-color-primary) // // Footer --bal-footer-background: var(--bal-color-primary-5) --bal-footer-language-color: var(--bal-color-text-white) --bal-footer-language-color-hover: var(--bal-color-grey-1) --bal-footer-language-color-active: var(--bal-color-grey-1) --bal-footer-language-background: var(--bal-color-text-white) --bal-footer-language-background-hover: var(--bal-color-grey-1) --bal-footer-language-background-active: var(--bal-color-grey-1) --bal-footer-logo-image-max-height: 64px // // Modal --bal-modal-backdrop-background: var(--bal-color-grey-6) --bal-popup-backdrop-background: rgba(70, 73, 75, .8) // // Stage & Nav --bal-nav-link-text-color: var(--bal-color-black) --bal-nav-link-group-background-purple: var(--bal-color-primary-1) --bal-stage-background-purple: var(--bal-color-primary-1) --bal-button-inverted-light-border-color: var(--bal-color-primary-3) --bal-button-inverted-light-border-color-hover: var(--bal-color-white) --bal-button-inverted-light-border-color-active: var(--bal-color-white) --bal-button-inverted-light-background: var(--bal-color-primary-3) --bal-button-inverted-light-background-hover: var(--bal-color-white) --bal-button-inverted-light-background-active: var(--bal-color-white) --bal-tabs-tab-button-label-text-color-inverted-hover: var(--bal-color-primary-1) --bal-tabs-tab-button-label-text-color-inverted-active: var(--bal-color-primary-1) --bal-focus-shadow-start-color: white --bal-focus-shadow-end-color: var(--bal-color-purple-4) --bal-focus-shadow-inset: inset var(--bal-focus-shadow-end-color) 0 0 0 3px, inset var(--bal-focus-shadow-start-color) 0 0 0 5px --bal-focus-shadow-inverted-start-color: white --bal-focus-shadow-inverted-end-color: var(--bal-color-purple-4) --bal-focus-shadow-inverted-inset: inset var(--bal-focus-shadow-inverted-end-color) 0 0 0 3px, inset var(--bal-focus-shadow-inverted-start-color) 0 0 0 5px body -webkit-text-size-adjust: 100% footer .link, footer a.link color: white !important &:hover color: white !important &:active color: white !important .button padding: 6px 30px 7px // min-height: 32px button.is-info, button.is-secondary color: var( --bal-color-primary) &:hover color: var(--bal-color-primary-4) &:active color: var(--bal-color-primary-5) // .bal-segment-item__indicator, // .bal-segment-item button // border-radius: 20px // .bal-segment:not(.bal-segment--vertical) // border-radius: 20px .bal-input-group:not(.bal-input-group--is-disabled):focus-within border-color: var(--bal-color-green) .bal-dropdown__root--theme-purple .bal-dropdown__root__content color: black !important .bal-toast__inner:before, .bal-notification:not(.bal-notification--no-icon):before background-color: var(--bal-color-grey-6) .bal-segment-item__button--checked svg, .bal-segment-item__button--checked path fill: white !important ol.list, ul.list, ol.is-list, ul.is-list &.has-bullet-check li::before, li.has-bullet-check::before background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M13.6371 1.19792C14.0628 1.54974 14.1228 2.18006 13.7709 2.60579L5.7309 12.335C5.54856 12.5575 5.31608 12.7336 5.05661 12.8534C4.79713 12.9731 4.51423 13.0336 4.22848 13.0302H4.22758C3.93715 13.0266 3.65131 12.9573 3.39152 12.8274C3.1326 12.6979 2.90626 12.5117 2.72937 12.2826L0.210694 9.04426C-0.128376 8.60831 -0.049842 7.98003 0.386105 7.64096C0.822053 7.30189 1.45033 7.38043 1.7894 7.81638L4.25297 10.9838L12.2292 1.33176C12.581 0.906035 13.2114 0.846113 13.6371 1.19792Z' fill='%23007480'/%3E%3C/svg%3E") no-repeat left top &.has-bullet-arrow-down li::before, li.has-bullet-arrow-down::before background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.64646 14.8536C7.84172 15.0488 8.1583 15.0488 8.35356 14.8536L11.8536 11.3536C11.9966 11.2106 12.0393 10.9955 11.9619 10.8087C11.8845 10.6218 11.7022 10.5 11.5 10.5H9V2C9 1.4477 8.5523 1 8 1C7.4477 1 7 1.4477 7 2V10.5H4.5C4.29778 10.5 4.11547 10.6218 4.03807 10.8087C3.96067 10.9955 4.00335 11.2106 4.14636 11.3536L7.64646 14.8536Z' fill='%23007480'/%3E%3C/svg%3E") no-repeat left top &.has-bullet-check-circle li::before, li.has-bullet-check-circle::before background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 16C12.4183 16 16 12.4183 16 8C16 3.5817 12.4183 0 8 0C3.5817 0 0 3.5817 0 8C0 12.4183 3.5817 16 8 16ZM6.7617 11.7945C6.9826 11.6965 7.1792 11.5513 7.33773 11.369L12.3731 6.33321C12.4677 6.23396 12.5417 6.11706 12.591 5.98915C12.6403 5.86125 12.6639 5.72489 12.6604 5.58784C12.6569 5.4508 12.6263 5.31655 12.5707 5.19266C12.515 5.06876 12.4355 4.95764 12.3361 4.86409C12.2368 4.77054 12.119 4.69683 11.9909 4.64809C11.8629 4.59935 11.7276 4.57652 11.5926 4.58178C11.4576 4.58704 11.3259 4.6203 11.2068 4.67967C11.0877 4.73903 10.984 4.82323 10.9026 4.9258L6.1506 9.54226C6.10385 9.58838 6.02795 9.58894 5.98455 9.53643L4.90621 8.31175C4.71358 8.11164 4.45955 7.99738 4.19098 7.98614C3.92241 7.9749 3.66241 8.06749 3.45768 8.2449C3.25562 8.42023 3.12982 8.67109 3.10968 8.94086C3.08954 9.21063 3.17682 9.47631 3.33968 9.68257L4.74977 11.2888C4.90307 11.4854 5.09831 11.6322 5.32131 11.7346C5.54796 11.8371 5.79545 11.8936 6.04509 11.897C6.29473 11.9004 6.54228 11.8505 6.7617 11.7945Z' fill='%23007480'/%3E%3C/svg%3E") no-repeat left top &.has-bullet-close li::before, li.has-bullet-close::before background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1.70711 0.29289C1.31658 -0.09763 0.68342 -0.09763 0.29289 0.29289C-0.09763 0.68342 -0.09763 1.31658 0.29289 1.70711L5.58579 7L0.29289 12.2929C-0.09763 12.6834 -0.09763 13.3166 0.29289 13.7071C0.68342 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.68342 13.7071 0.29289C13.3166 -0.09763 12.6834 -0.09763 12.2929 0.29289L7 5.58579L1.70711 0.29289Z' fill='%23007480'/%3E%3C/svg%3E") no-repeat left top &.has-bullet-check.has-bullet-green li::before, li.has-bullet-check.has-bullet-green::before background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M13.6371 1.19792C14.0628 1.54974 14.1228 2.18006 13.7709 2.60579L5.7309 12.335C5.54856 12.5575 5.31608 12.7336 5.05661 12.8534C4.79713 12.9731 4.51423 13.0336 4.22848 13.0302H4.22758C3.93805 13.0266 3.65131 12.9573 3.39152 12.8274C3.1326 12.6979 2.90626 12.5117 2.72937 12.2826L0.210694 9.04426C-0.128376 8.60831 -0.049842 7.98003 0.386105 7.64096C0.822053 7.30189 1.45033 7.38043 1.7894 7.81638L4.25297 10.9838L12.2292 1.33176C12.581 0.906035 13.2114 0.846113 13.6371 1.19792Z' fill='%23007480'/%3E%3C/svg%3E") no-repeat left top .bal-shape fill: var(--bal-color-primary-4) !important .bal-stage-back-link > a.link color: var(--bal-color-primary-4) &:hover color: var(--bal-color-primary-5) &:active color: var(--bal-color-primary-6) svg, path fill: var(--bal-color-primary-4) !important &:hover fill: var(--bal-color-primary-5) !important &:active fill: var(--bal-color-primary-6) !important // button.is-light.inverted // background: var(--bal-color-primary-5) // &:hover // background: var(--bal-color-primary-6) // &:active // background: var(--bal-color-primary-6) bal-nav --bal-tabs-tab-nav-line-background: var(--bal-color-purple-4) --bal-tabs-tab-label-text-color-active: var(--bal-color-purple-4) --bal-tabs-tab-button-label-text-color-hover: var(--bal-color-purple-5) --bal-tabs-tab-button-label-text-color-active: var(--bal-color-purple-6) .bal-nav-link__native color: var(--bal-color-black) &:hover color: var(--bal-color-purple-5) text-decoration: underline &:active color: var(--bal-color-purple-6) text-decoration: underline