@charset "UTF-8"; @font-face { font-family: "Booton"; font-style: normal; font-weight: 100; font-display: swap; src: url("../font/Booton-Thin.woff2") format("woff2"), url("../font/Booton-Thin.woff") format("woff"); } @font-face { font-family: "Booton"; font-style: normal; font-weight: 200; font-display: swap; src: url("../font/Booton-Extralight.woff2") format("woff2"), url("../font/Booton-Extralight.woff") format("woff"); } @font-face { font-family: "Booton"; font-style: normal; font-weight: 300; font-display: swap; src: url("../font/Booton-Light.woff2") format("woff2"), url("../font/Booton-Light.woff") format("woff"); } @font-face { font-family: "Booton"; font-style: normal; font-weight: 400; font-display: swap; src: url("../font/Booton-Regular.woff2") format("woff2"), url("../font/Booton-Regular.woff") format("woff"); } @font-face { font-family: "Booton"; font-style: normal; font-weight: 500; font-display: swap; src: url("../font/Booton-Medium.woff2") format("woff2"), url("../font/Booton-Medium.woff") format("woff"); } @font-face { font-family: "Booton"; font-style: normal; font-weight: 600; font-display: swap; src: url("../font/Booton-Semibold.woff2") format("woff2"), url("../font/Booton-Semibold.woff") format("woff"); } @font-face { font-family: "Booton"; font-style: normal; font-weight: 700; font-display: swap; src: url("../font/Booton-Bold.woff2") format("woff2"), url("../font/Booton-Bold.woff") format("woff"); } @font-face { font-family: "Booton"; font-style: normal; font-weight: 800; font-display: swap; src: url("../font/Booton-Heavy.woff2") format("woff2"), url("../font/Booton-Heavy.woff") format("woff"); } @font-face { font-family: "Tobias"; font-style: normal; font-weight: 100; font-display: swap; src: url("../font/Tobias-Thin.woff2") format("woff2"), url("../font/Tobias-Thin.woff") format("woff"); } @font-face { font-family: "Tobias"; font-style: normal; font-weight: 200; font-display: swap; src: url("../font/Tobias-Light.woff2") format("woff2"), url("../font/Tobias-Light.woff") format("woff"); } @font-face { font-family: "Tobias"; font-style: normal; font-weight: 300; font-display: swap; src: url("../font/Tobias-Light.woff2") format("woff2"), url("../font/Tobias-Light.woff") format("woff"); } @font-face { font-family: "Tobias"; font-style: normal; font-weight: 400; font-display: swap; src: url("../font/Tobias-Regular.woff2") format("woff2"), url("../font/Tobias-Regular.woff") format("woff"); } @font-face { font-family: "Tobias"; font-style: normal; font-weight: 500; font-display: swap; src: url("../font/Tobias-Medium.woff2") format("woff2"), url("../font/Tobias-Medium.woff") format("woff"); } @font-face { font-family: "Tobias"; font-style: normal; font-weight: 600; font-display: swap; src: url("../font/Tobias-SemiBold.woff2") format("woff2"), url("../font/Tobias-SemiBold.woff") format("woff"); } @font-face { font-family: "Tobias"; font-style: normal; font-weight: 700; font-display: swap; src: url("../font/Tobias-Bold.woff2") format("woff2"), url("../font/Tobias-Bold.woff") format("woff"); } @font-face { font-family: "Tobias"; font-style: normal; font-weight: 800; font-display: swap; src: url("../font/Tobias-Heavy.woff2") format("woff2"), url("../font/Tobias-Heavy.woff") format("woff"); } :root, [data-bs-theme=light] { --bs-blue: #0A4DC0; --bs-indigo: #6610f2; --bs-purple: #7649E3; --bs-pink: #DC466F; --bs-red: #A22514; --bs-orange: #FF6719; --bs-yellow: #D4C02D; --bs-green: #078139; --bs-teal: #20c997; --bs-cyan: #0dcaf0; --bs-black: #141414; --bs-white: #FFFFFF; --bs-gray: #454549; --bs-gray-dark: #232325; --bs-gray-100: #F0F3F7; --bs-gray-200: #E6EAF0; --bs-gray-300: #CAD4DF; --bs-gray-400: #8A919A; --bs-gray-500: #72777E; --bs-gray-600: #454549; --bs-gray-700: #343437; --bs-gray-800: #232325; --bs-gray-900: #111112; --bs-primary: #7649E3; --bs-secondary: #E6EAF0; --bs-success: #078139; --bs-info: #0A4DC0; --bs-warning: #D4C02D; --bs-danger: #DC466F; --bs-light: #FFFFFF; --bs-dark: #111112; --bs-primary-rgb: 118, 73, 227; --bs-secondary-rgb: 230, 234, 240; --bs-success-rgb: 7, 129, 57; --bs-info-rgb: 10, 77, 192; --bs-warning-rgb: 212, 192, 45; --bs-danger-rgb: 220, 70, 111; --bs-light-rgb: 255, 255, 255; --bs-dark-rgb: 17, 17, 18; --bs-primary-text-emphasis: rgb(47.2, 29.2, 90.8); --bs-secondary-text-emphasis: rgb(92, 93.6, 96); --bs-success-text-emphasis: rgb(2.8, 51.6, 22.8); --bs-info-text-emphasis: rgb(4, 30.8, 76.8); --bs-warning-text-emphasis: rgb(84.8, 76.8, 18); --bs-danger-text-emphasis: rgb(88, 28, 44.4); --bs-light-text-emphasis: #343437; --bs-dark-text-emphasis: #343437; --bs-primary-bg-subtle: rgb(227.6, 218.6, 249.4); --bs-secondary-bg-subtle: rgb(250, 250.8, 252); --bs-success-bg-subtle: rgb(205.4, 229.8, 215.4); --bs-info-bg-subtle: rgb(206, 219.4, 242.4); --bs-warning-bg-subtle: rgb(246.4, 242.4, 213); --bs-danger-bg-subtle: rgb(248, 218, 226.2); --bs-light-bg-subtle: rgb(247.5, 249, 251); --bs-dark-bg-subtle: #8A919A; --bs-primary-border-subtle: rgb(200.2, 182.2, 243.8); --bs-secondary-border-subtle: rgb(245, 246.6, 249); --bs-success-border-subtle: rgb(155.8, 204.6, 175.8); --bs-info-border-subtle: rgb(157, 183.8, 229.8); --bs-warning-border-subtle: rgb(237.8, 229.8, 171); --bs-danger-border-subtle: rgb(241, 181, 197.4); --bs-light-border-subtle: #E6EAF0; --bs-dark-border-subtle: #72777E; --bs-white-rgb: 255, 255, 255; --bs-black-rgb: 20, 20, 20; --bs-font-sans-serif: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --bs-font-monospace: "Tobias", "Noto Serif", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #E6EAF0; --bs-body-color-rgb: 230, 234, 240; --bs-body-bg: #111112; --bs-body-bg-rgb: 17, 17, 18; --bs-emphasis-color: #141414; --bs-emphasis-color-rgb: 20, 20, 20; --bs-secondary-color: rgba(230, 234, 240, 0.75); --bs-secondary-color-rgb: 230, 234, 240; --bs-secondary-bg: #E6EAF0; --bs-secondary-bg-rgb: 230, 234, 240; --bs-tertiary-color: rgba(230, 234, 240, 0.5); --bs-tertiary-color-rgb: 230, 234, 240; --bs-tertiary-bg: #F0F3F7; --bs-tertiary-bg-rgb: 240, 243, 247; --bs-heading-color: #FFFFFF; --bs-link-color: #FFFFFF; --bs-link-color-rgb: 255, 255, 255; --bs-link-decoration: none; --bs-link-hover-color: #7649E3; --bs-link-hover-color-rgb: 118, 73, 227; --bs-link-hover-decoration: underline; --bs-code-color: #E6EAF0; --bs-highlight-color: #E6EAF0; --bs-highlight-bg: #F3F1EB; --bs-border-width: 1px; --bs-border-style: solid; --bs-border-color: #CAD4DF; --bs-border-color-translucent: rgba(20, 20, 20, 0.175); --bs-border-radius: 4px; --bs-border-radius-sm: 4px; --bs-border-radius-lg: 8px; --bs-border-radius-xl: 1rem; --bs-border-radius-xxl: 2rem; --bs-border-radius-2xl: var(--bs-border-radius-xxl); --bs-border-radius-pill: 50rem; --bs-box-shadow: 0 0.5rem 1rem rgba(20, 20, 20, 0.15); --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(20, 20, 20, 0.075); --bs-box-shadow-lg: 0 1rem 3rem rgba(20, 20, 20, 0.175); --bs-box-shadow-inset: inset 0 1px 2px rgba(20, 20, 20, 0.075); --bs-focus-ring-width: 0.25rem; --bs-focus-ring-opacity: 0.25; --bs-focus-ring-color: rgba(118, 73, 227, 0.25); --bs-form-valid-color: #078139; --bs-form-valid-border-color: #078139; --bs-form-invalid-color: #DC466F; --bs-form-invalid-border-color: #DC466F; } [data-bs-theme=dark] { color-scheme: dark; --bs-body-color: #CAD4DF; --bs-body-color-rgb: 202, 212, 223; --bs-body-bg: #111112; --bs-body-bg-rgb: 17, 17, 18; --bs-emphasis-color: #FFFFFF; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color: rgba(202, 212, 223, 0.75); --bs-secondary-color-rgb: 202, 212, 223; --bs-secondary-bg: #232325; --bs-secondary-bg-rgb: 35, 35, 37; --bs-tertiary-color: rgba(202, 212, 223, 0.5); --bs-tertiary-color-rgb: 202, 212, 223; --bs-tertiary-bg: rgb(26, 26, 27.5); --bs-tertiary-bg-rgb: 26, 26, 28; --bs-primary-text-emphasis: rgb(172.8, 145.8, 238.2); --bs-secondary-text-emphasis: rgb(240, 242.4, 246); --bs-success-text-emphasis: rgb(106.2, 179.4, 136.2); --bs-info-text-emphasis: rgb(108, 148.2, 217.2); --bs-warning-text-emphasis: rgb(229.2, 217.2, 129); --bs-danger-text-emphasis: rgb(234, 144, 168.6); --bs-light-text-emphasis: #F0F3F7; --bs-dark-text-emphasis: #CAD4DF; --bs-primary-bg-subtle: rgb(23.6, 14.6, 45.4); --bs-secondary-bg-subtle: rgb(46, 46.8, 48); --bs-success-bg-subtle: rgb(1.4, 25.8, 11.4); --bs-info-bg-subtle: rgb(2, 15.4, 38.4); --bs-warning-bg-subtle: rgb(42.4, 38.4, 9); --bs-danger-bg-subtle: rgb(44, 14, 22.2); --bs-light-bg-subtle: #232325; --bs-dark-bg-subtle: rgb(27.5, 27.5, 28.5); --bs-primary-border-subtle: rgb(70.8, 43.8, 136.2); --bs-secondary-border-subtle: rgb(138, 140.4, 144); --bs-success-border-subtle: rgb(4.2, 77.4, 34.2); --bs-info-border-subtle: rgb(6, 46.2, 115.2); --bs-warning-border-subtle: rgb(127.2, 115.2, 27); --bs-danger-border-subtle: rgb(132, 42, 66.6); --bs-light-border-subtle: #343437; --bs-dark-border-subtle: #232325; --bs-heading-color: inherit; --bs-link-color: rgb(172.8, 145.8, 238.2); --bs-link-hover-color: rgb(172.8, 145.8, 238.2); --bs-link-color-rgb: 173, 146, 238; --bs-link-hover-color-rgb: 173, 146, 238; --bs-code-color: rgb(240, 242.4, 246); --bs-highlight-color: #CAD4DF; --bs-highlight-bg: rgb(84.8, 76.8, 18); --bs-border-color: #343437; --bs-border-color-translucent: rgba(255, 255, 255, 0.15); --bs-form-valid-color: #21E46B; --bs-form-valid-border-color: #21E46B; --bs-form-invalid-color: #F0643A; --bs-form-invalid-border-color: #F0643A; } *, *::before, *::after { box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } body { margin: 0; font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size); font-weight: var(--bs-body-font-weight); line-height: var(--bs-body-line-height); color: var(--bs-body-color); text-align: var(--bs-body-text-align); background-color: var(--bs-body-bg); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(20, 20, 20, 0); } hr { margin: 0.5rem 0; color: inherit; border: 0; border-top: var(--bs-border-width) solid; opacity: 0.25; } h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { margin-top: 0; margin-bottom: 0.25rem; font-weight: 500; line-height: 1.2; color: var(--bs-heading-color); } h1, .h1 { font-size: calc(1.375rem + 1.5vw); } @media (min-width: 1200px) { h1, .h1 { font-size: 2.5rem; } } h2, .h2 { font-size: calc(1.325rem + 0.9vw); } @media (min-width: 1200px) { h2, .h2 { font-size: 2rem; } } h3, .h3 { font-size: calc(1.3rem + 0.6vw); } @media (min-width: 1200px) { h3, .h3 { font-size: 1.75rem; } } h4, .h4 { font-size: calc(1.275rem + 0.3vw); } @media (min-width: 1200px) { h4, .h4 { font-size: 1.5rem; } } h5, .h5 { font-size: 1.25rem; } h6, .h6 { font-size: 1rem; } p { margin-top: 0; margin-bottom: 1rem; } abbr[title] { text-decoration: underline dotted; cursor: help; text-decoration-skip-ink: none; } address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } ol, ul { padding-left: 2rem; } ol, ul, dl { margin-top: 0; margin-bottom: 1rem; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: 700; } dd { margin-bottom: 0.5rem; margin-left: 0; } blockquote { margin: 0 0 1rem; } b, strong { font-weight: bolder; } small, .small { font-size: 0.875em; } mark, .mark { padding: 0.1875em; color: var(--bs-highlight-color); background-color: var(--bs-highlight-bg); } sub, sup { position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } a { color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); text-decoration: none; } a:hover { --bs-link-color-rgb: var(--bs-link-hover-color-rgb); text-decoration: underline; } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } pre, code, kbd, samp { font-family: var(--bs-font-monospace); font-size: 1em; } pre { display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; font-size: 0.875em; } pre code { font-size: inherit; color: inherit; word-break: normal; } code { font-size: 0.875em; color: var(--bs-code-color); word-wrap: break-word; } a > code { color: inherit; } kbd { padding: 0.1875rem 0.375rem; font-size: 0.875em; color: var(--bs-body-bg); background-color: var(--bs-body-color); border-radius: 4px; } kbd kbd { padding: 0; font-size: 1em; } figure { margin: 0 0 1rem; } img, svg { vertical-align: middle; } table { caption-side: bottom; border-collapse: collapse; } caption { padding-top: 0.5rem; padding-bottom: 0.5rem; color: var(--bs-secondary-color); text-align: left; } th { text-align: inherit; text-align: -webkit-match-parent; } thead, tbody, tfoot, tr, td, th { border-color: inherit; border-style: solid; border-width: 0; } label { display: inline-block; } button { border-radius: 0; } button:focus:not(:focus-visible) { outline: 0; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button, select { text-transform: none; } [role=button] { cursor: pointer; } select { word-wrap: normal; } select:disabled { opacity: 1; } [list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator { display: none !important; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) { cursor: pointer; } ::-moz-focus-inner { padding: 0; border-style: none; } textarea { resize: vertical; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { float: left; width: 100%; padding: 0; margin-bottom: 0.5rem; line-height: inherit; font-size: calc(1.275rem + 0.3vw); } @media (min-width: 1200px) { legend { font-size: 1.5rem; } } legend + * { clear: left; } ::-webkit-datetime-edit-fields-wrapper, ::-webkit-datetime-edit-text, ::-webkit-datetime-edit-minute, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-year-field { padding: 0; } ::-webkit-inner-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-cancel-button { cursor: pointer; filter: grayscale(1); } /* rtl:raw: [type="tel"], [type="url"], [type="email"], [type="number"] { direction: ltr; } */ ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-color-swatch-wrapper { padding: 0; } ::file-selector-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } iframe { border: 0; } summary { display: list-item; cursor: pointer; } progress { vertical-align: baseline; } [hidden] { display: none !important; } .lead { font-size: 1.25rem; font-weight: 300; } .display-1 { font-weight: 300; line-height: 1.2; font-size: calc(1.625rem + 4.5vw); } @media (min-width: 1200px) { .display-1 { font-size: 5rem; } } .display-2 { font-weight: 300; line-height: 1.2; font-size: calc(1.575rem + 3.9vw); } @media (min-width: 1200px) { .display-2 { font-size: 4.5rem; } } .display-3 { font-weight: 300; line-height: 1.2; font-size: calc(1.525rem + 3.3vw); } @media (min-width: 1200px) { .display-3 { font-size: 4rem; } } .display-4 { font-weight: 300; line-height: 1.2; font-size: calc(1.475rem + 2.7vw); } @media (min-width: 1200px) { .display-4 { font-size: 3.5rem; } } .display-5 { font-weight: 300; line-height: 1.2; font-size: calc(1.425rem + 2.1vw); } @media (min-width: 1200px) { .display-5 { font-size: 3rem; } } .display-6 { font-weight: 300; line-height: 1.2; font-size: calc(1.375rem + 1.5vw); } @media (min-width: 1200px) { .display-6 { font-size: 2.5rem; } } .list-unstyled { padding-left: 0; list-style: none; } .list-inline { padding-left: 0; list-style: none; } .list-inline-item { display: inline-block; } .list-inline-item:not(:last-child) { margin-right: 0.5rem; } .initialism { font-size: 0.875em; text-transform: uppercase; } .blockquote { margin-bottom: 0.5rem; font-size: 1.25rem; } .blockquote > :last-child { margin-bottom: 0; } .blockquote-footer { margin-top: -0.5rem; margin-bottom: 0.5rem; font-size: 0.875em; color: #454549; } .blockquote-footer::before { content: "— "; } .img-fluid { max-width: 100%; height: auto; } .img-thumbnail { padding: 0.25rem; background-color: var(--bs-body-bg); border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); box-shadow: var(--bs-box-shadow-sm); max-width: 100%; height: auto; } .figure { display: inline-block; } .figure-img { margin-bottom: 0.25rem; line-height: 1; } .figure-caption { font-size: 0.875em; color: var(--bs-secondary-color); } .container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container-sm, .container { max-width: 540px; } } @media (min-width: 576px) { .container-md, .container-sm, .container { max-width: 720px; } } @media (min-width: 992px) { .container-lg, .container-md, .container-sm, .container { max-width: 960px; } } @media (min-width: 1280px) { .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; } } @media (min-width: 1512px) { .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1320px; } } :root { --bs-breakpoint-xs: 0; --bs-breakpoint-sm: 576px; --bs-breakpoint-md: 576px; --bs-breakpoint-lg: 992px; --bs-breakpoint-xl: 1280px; --bs-breakpoint-xxl: 1512px; } .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--bs-gutter-y)); margin-right: calc(-0.5 * var(--bs-gutter-x)); margin-left: calc(-0.5 * var(--bs-gutter-x)); } .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); } .col { flex: 1 0 0; } .row-cols-auto > * { flex: 0 0 auto; width: auto; } .row-cols-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-auto { flex: 0 0 auto; width: auto; } .col-1 { flex: 0 0 auto; width: 8.33333333%; } .col-2 { flex: 0 0 auto; width: 16.66666667%; } .col-3 { flex: 0 0 auto; width: 25%; } .col-4 { flex: 0 0 auto; width: 33.33333333%; } .col-5 { flex: 0 0 auto; width: 41.66666667%; } .col-6 { flex: 0 0 auto; width: 50%; } .col-7 { flex: 0 0 auto; width: 58.33333333%; } .col-8 { flex: 0 0 auto; width: 66.66666667%; } .col-9 { flex: 0 0 auto; width: 75%; } .col-10 { flex: 0 0 auto; width: 83.33333333%; } .col-11 { flex: 0 0 auto; width: 91.66666667%; } .col-12 { flex: 0 0 auto; width: 100%; } .offset-1 { margin-left: 8.33333333%; } .offset-2 { margin-left: 16.66666667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.33333333%; } .offset-5 { margin-left: 41.66666667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.33333333%; } .offset-8 { margin-left: 66.66666667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.33333333%; } .offset-11 { margin-left: 91.66666667%; } .g-0, .gx-0 { --bs-gutter-x: 0; } .g-0, .gy-0 { --bs-gutter-y: 0; } .g-1, .gx-1 { --bs-gutter-x: 0.125rem; } .g-1, .gy-1 { --bs-gutter-y: 0.125rem; } .g-2, .gx-2 { --bs-gutter-x: 0.25rem; } .g-2, .gy-2 { --bs-gutter-y: 0.25rem; } .g-3, .gx-3 { --bs-gutter-x: 0.5rem; } .g-3, .gy-3 { --bs-gutter-y: 0.5rem; } .g-4, .gx-4 { --bs-gutter-x: 0.75rem; } .g-4, .gy-4 { --bs-gutter-y: 0.75rem; } .g-5, .gx-5 { --bs-gutter-x: 1.5rem; } .g-5, .gy-5 { --bs-gutter-y: 1.5rem; } @media (min-width: 576px) { .col-sm { flex: 1 0 0; } .row-cols-sm-auto > * { flex: 0 0 auto; width: auto; } .row-cols-sm-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-sm-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-sm-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-sm-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-sm-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-sm-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-sm-auto { flex: 0 0 auto; width: auto; } .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; } .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; } .col-sm-3 { flex: 0 0 auto; width: 25%; } .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; } .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; } .col-sm-6 { flex: 0 0 auto; width: 50%; } .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; } .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; } .col-sm-9 { flex: 0 0 auto; width: 75%; } .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; } .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; } .col-sm-12 { flex: 0 0 auto; width: 100%; } .offset-sm-0 { margin-left: 0; } .offset-sm-1 { margin-left: 8.33333333%; } .offset-sm-2 { margin-left: 16.66666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.33333333%; } .offset-sm-5 { margin-left: 41.66666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.33333333%; } .offset-sm-8 { margin-left: 66.66666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.33333333%; } .offset-sm-11 { margin-left: 91.66666667%; } .g-sm-0, .gx-sm-0 { --bs-gutter-x: 0; } .g-sm-0, .gy-sm-0 { --bs-gutter-y: 0; } .g-sm-1, .gx-sm-1 { --bs-gutter-x: 0.125rem; } .g-sm-1, .gy-sm-1 { --bs-gutter-y: 0.125rem; } .g-sm-2, .gx-sm-2 { --bs-gutter-x: 0.25rem; } .g-sm-2, .gy-sm-2 { --bs-gutter-y: 0.25rem; } .g-sm-3, .gx-sm-3 { --bs-gutter-x: 0.5rem; } .g-sm-3, .gy-sm-3 { --bs-gutter-y: 0.5rem; } .g-sm-4, .gx-sm-4 { --bs-gutter-x: 0.75rem; } .g-sm-4, .gy-sm-4 { --bs-gutter-y: 0.75rem; } .g-sm-5, .gx-sm-5 { --bs-gutter-x: 1.5rem; } .g-sm-5, .gy-sm-5 { --bs-gutter-y: 1.5rem; } } @media (min-width: 576px) { .col-md { flex: 1 0 0; } .row-cols-md-auto > * { flex: 0 0 auto; width: auto; } .row-cols-md-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-md-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-md-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-md-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-md-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-md-auto { flex: 0 0 auto; width: auto; } .col-md-1 { flex: 0 0 auto; width: 8.33333333%; } .col-md-2 { flex: 0 0 auto; width: 16.66666667%; } .col-md-3 { flex: 0 0 auto; width: 25%; } .col-md-4 { flex: 0 0 auto; width: 33.33333333%; } .col-md-5 { flex: 0 0 auto; width: 41.66666667%; } .col-md-6 { flex: 0 0 auto; width: 50%; } .col-md-7 { flex: 0 0 auto; width: 58.33333333%; } .col-md-8 { flex: 0 0 auto; width: 66.66666667%; } .col-md-9 { flex: 0 0 auto; width: 75%; } .col-md-10 { flex: 0 0 auto; width: 83.33333333%; } .col-md-11 { flex: 0 0 auto; width: 91.66666667%; } .col-md-12 { flex: 0 0 auto; width: 100%; } .offset-md-0 { margin-left: 0; } .offset-md-1 { margin-left: 8.33333333%; } .offset-md-2 { margin-left: 16.66666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.33333333%; } .offset-md-5 { margin-left: 41.66666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.33333333%; } .offset-md-8 { margin-left: 66.66666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.33333333%; } .offset-md-11 { margin-left: 91.66666667%; } .g-md-0, .gx-md-0 { --bs-gutter-x: 0; } .g-md-0, .gy-md-0 { --bs-gutter-y: 0; } .g-md-1, .gx-md-1 { --bs-gutter-x: 0.125rem; } .g-md-1, .gy-md-1 { --bs-gutter-y: 0.125rem; } .g-md-2, .gx-md-2 { --bs-gutter-x: 0.25rem; } .g-md-2, .gy-md-2 { --bs-gutter-y: 0.25rem; } .g-md-3, .gx-md-3 { --bs-gutter-x: 0.5rem; } .g-md-3, .gy-md-3 { --bs-gutter-y: 0.5rem; } .g-md-4, .gx-md-4 { --bs-gutter-x: 0.75rem; } .g-md-4, .gy-md-4 { --bs-gutter-y: 0.75rem; } .g-md-5, .gx-md-5 { --bs-gutter-x: 1.5rem; } .g-md-5, .gy-md-5 { --bs-gutter-y: 1.5rem; } } @media (min-width: 992px) { .col-lg { flex: 1 0 0; } .row-cols-lg-auto > * { flex: 0 0 auto; width: auto; } .row-cols-lg-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-lg-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-lg-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-lg-auto { flex: 0 0 auto; width: auto; } .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; } .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; } .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; } .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; } .col-lg-6 { flex: 0 0 auto; width: 50%; } .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; } .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; } .col-lg-9 { flex: 0 0 auto; width: 75%; } .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; } .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; } .col-lg-12 { flex: 0 0 auto; width: 100%; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.33333333%; } .offset-lg-2 { margin-left: 16.66666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.33333333%; } .offset-lg-5 { margin-left: 41.66666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.33333333%; } .offset-lg-8 { margin-left: 66.66666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.33333333%; } .offset-lg-11 { margin-left: 91.66666667%; } .g-lg-0, .gx-lg-0 { --bs-gutter-x: 0; } .g-lg-0, .gy-lg-0 { --bs-gutter-y: 0; } .g-lg-1, .gx-lg-1 { --bs-gutter-x: 0.125rem; } .g-lg-1, .gy-lg-1 { --bs-gutter-y: 0.125rem; } .g-lg-2, .gx-lg-2 { --bs-gutter-x: 0.25rem; } .g-lg-2, .gy-lg-2 { --bs-gutter-y: 0.25rem; } .g-lg-3, .gx-lg-3 { --bs-gutter-x: 0.5rem; } .g-lg-3, .gy-lg-3 { --bs-gutter-y: 0.5rem; } .g-lg-4, .gx-lg-4 { --bs-gutter-x: 0.75rem; } .g-lg-4, .gy-lg-4 { --bs-gutter-y: 0.75rem; } .g-lg-5, .gx-lg-5 { --bs-gutter-x: 1.5rem; } .g-lg-5, .gy-lg-5 { --bs-gutter-y: 1.5rem; } } @media (min-width: 1280px) { .col-xl { flex: 1 0 0; } .row-cols-xl-auto > * { flex: 0 0 auto; width: auto; } .row-cols-xl-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-xl-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-xl-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-xl-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-xl-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-xl-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-xl-auto { flex: 0 0 auto; width: auto; } .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; } .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; } .col-xl-3 { flex: 0 0 auto; width: 25%; } .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; } .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; } .col-xl-6 { flex: 0 0 auto; width: 50%; } .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; } .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xl-9 { flex: 0 0 auto; width: 75%; } .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xl-12 { flex: 0 0 auto; width: 100%; } .offset-xl-0 { margin-left: 0; } .offset-xl-1 { margin-left: 8.33333333%; } .offset-xl-2 { margin-left: 16.66666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.33333333%; } .offset-xl-5 { margin-left: 41.66666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.33333333%; } .offset-xl-8 { margin-left: 66.66666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.33333333%; } .offset-xl-11 { margin-left: 91.66666667%; } .g-xl-0, .gx-xl-0 { --bs-gutter-x: 0; } .g-xl-0, .gy-xl-0 { --bs-gutter-y: 0; } .g-xl-1, .gx-xl-1 { --bs-gutter-x: 0.125rem; } .g-xl-1, .gy-xl-1 { --bs-gutter-y: 0.125rem; } .g-xl-2, .gx-xl-2 { --bs-gutter-x: 0.25rem; } .g-xl-2, .gy-xl-2 { --bs-gutter-y: 0.25rem; } .g-xl-3, .gx-xl-3 { --bs-gutter-x: 0.5rem; } .g-xl-3, .gy-xl-3 { --bs-gutter-y: 0.5rem; } .g-xl-4, .gx-xl-4 { --bs-gutter-x: 0.75rem; } .g-xl-4, .gy-xl-4 { --bs-gutter-y: 0.75rem; } .g-xl-5, .gx-xl-5 { --bs-gutter-x: 1.5rem; } .g-xl-5, .gy-xl-5 { --bs-gutter-y: 1.5rem; } } @media (min-width: 1512px) { .col-xxl { flex: 1 0 0; } .row-cols-xxl-auto > * { flex: 0 0 auto; width: auto; } .row-cols-xxl-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-xxl-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-xxl-3 > * { flex: 0 0 auto; width: 33.33333333%; } .row-cols-xxl-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-xxl-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-xxl-6 > * { flex: 0 0 auto; width: 16.66666667%; } .col-xxl-auto { flex: 0 0 auto; width: auto; } .col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; } .col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; } .col-xxl-3 { flex: 0 0 auto; width: 25%; } .col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; } .col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; } .col-xxl-6 { flex: 0 0 auto; width: 50%; } .col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; } .col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xxl-9 { flex: 0 0 auto; width: 75%; } .col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xxl-12 { flex: 0 0 auto; width: 100%; } .offset-xxl-0 { margin-left: 0; } .offset-xxl-1 { margin-left: 8.33333333%; } .offset-xxl-2 { margin-left: 16.66666667%; } .offset-xxl-3 { margin-left: 25%; } .offset-xxl-4 { margin-left: 33.33333333%; } .offset-xxl-5 { margin-left: 41.66666667%; } .offset-xxl-6 { margin-left: 50%; } .offset-xxl-7 { margin-left: 58.33333333%; } .offset-xxl-8 { margin-left: 66.66666667%; } .offset-xxl-9 { margin-left: 75%; } .offset-xxl-10 { margin-left: 83.33333333%; } .offset-xxl-11 { margin-left: 91.66666667%; } .g-xxl-0, .gx-xxl-0 { --bs-gutter-x: 0; } .g-xxl-0, .gy-xxl-0 { --bs-gutter-y: 0; } .g-xxl-1, .gx-xxl-1 { --bs-gutter-x: 0.125rem; } .g-xxl-1, .gy-xxl-1 { --bs-gutter-y: 0.125rem; } .g-xxl-2, .gx-xxl-2 { --bs-gutter-x: 0.25rem; } .g-xxl-2, .gy-xxl-2 { --bs-gutter-y: 0.25rem; } .g-xxl-3, .gx-xxl-3 { --bs-gutter-x: 0.5rem; } .g-xxl-3, .gy-xxl-3 { --bs-gutter-y: 0.5rem; } .g-xxl-4, .gx-xxl-4 { --bs-gutter-x: 0.75rem; } .g-xxl-4, .gy-xxl-4 { --bs-gutter-y: 0.75rem; } .g-xxl-5, .gx-xxl-5 { --bs-gutter-x: 1.5rem; } .g-xxl-5, .gy-xxl-5 { --bs-gutter-y: 1.5rem; } } .table { --bs-table-color-type: initial; --bs-table-bg-type: initial; --bs-table-color-state: initial; --bs-table-bg-state: initial; --bs-table-color: var(--bs-emphasis-color); --bs-table-bg: var(--bs-body-bg); --bs-table-border-color: var(--bs-border-color); --bs-table-accent-bg: transparent; --bs-table-striped-color: var(--bs-emphasis-color); --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05); --bs-table-active-color: var(--bs-emphasis-color); --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1); --bs-table-hover-color: var(--bs-emphasis-color); --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075); width: 100%; margin-bottom: 0.5rem; vertical-align: top; border-color: var(--bs-table-border-color); } .table > :not(caption) > * > * { padding: 0.5rem 0.5rem; color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color))); background-color: var(--bs-table-bg); border-bottom-width: var(--bs-border-width); box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); } .table > tbody { vertical-align: inherit; } .table > thead { vertical-align: bottom; } .table-group-divider { border-top: calc(var(--bs-border-width) * 2) solid currentcolor; } .caption-top { caption-side: top; } .table-sm > :not(caption) > * > * { padding: 0.25rem 0.25rem; } .table-bordered > :not(caption) > * { border-width: var(--bs-border-width) 0; } .table-bordered > :not(caption) > * > * { border-width: 0 var(--bs-border-width); } .table-borderless > :not(caption) > * > * { border-bottom-width: 0; } .table-borderless > :not(:first-child) { border-top-width: 0; } .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-color-type: var(--bs-table-striped-color); --bs-table-bg-type: var(--bs-table-striped-bg); } .table-striped-columns > :not(caption) > tr > :nth-child(even) { --bs-table-color-type: var(--bs-table-striped-color); --bs-table-bg-type: var(--bs-table-striped-bg); } .table-active { --bs-table-color-state: var(--bs-table-active-color); --bs-table-bg-state: var(--bs-table-active-bg); } .table-hover > tbody > tr:hover > * { --bs-table-color-state: var(--bs-table-hover-color); --bs-table-bg-state: var(--bs-table-hover-bg); } .table-primary { --bs-table-color: #141414; --bs-table-bg: rgb(227.6, 218.6, 249.4); --bs-table-border-color: rgb(186.08, 178.88, 203.52); --bs-table-striped-bg: rgb(217.22, 208.67, 237.93); --bs-table-striped-color: #141414; --bs-table-active-bg: rgb(206.84, 198.74, 226.46); --bs-table-active-color: #141414; --bs-table-hover-bg: rgb(212.03, 203.705, 232.195); --bs-table-hover-color: #141414; color: var(--bs-table-color); border-color: var(--bs-table-border-color); } .table-secondary { --bs-table-color: #141414; --bs-table-bg: rgb(250, 250.8, 252); --bs-table-border-color: rgb(204, 204.64, 205.6); --bs-table-striped-bg: rgb(238.5, 239.26, 240.4); --bs-table-striped-color: #141414; --bs-table-active-bg: rgb(227, 227.72, 228.8); --bs-table-active-color: #141414; --bs-table-hover-bg: rgb(232.75, 233.49, 234.6); --bs-table-hover-color: #141414; color: var(--bs-table-color); border-color: var(--bs-table-border-color); } .table-success { --bs-table-color: #141414; --bs-table-bg: rgb(205.4, 229.8, 215.4); --bs-table-border-color: rgb(168.32, 187.84, 176.32); --bs-table-striped-bg: rgb(196.13, 219.31, 205.63); --bs-table-striped-color: #141414; --bs-table-active-bg: rgb(186.86, 208.82, 195.86); --bs-table-active-color: #141414; --bs-table-hover-bg: rgb(191.495, 214.065, 200.745); --bs-table-hover-color: #141414; color: var(--bs-table-color); border-color: var(--bs-table-border-color); } .table-info { --bs-table-color: #141414; --bs-table-bg: rgb(206, 219.4, 242.4); --bs-table-border-color: rgb(168.8, 179.52, 197.92); --bs-table-striped-bg: rgb(196.7, 209.43, 231.28); --bs-table-striped-color: #141414; --bs-table-active-bg: rgb(187.4, 199.46, 220.16); --bs-table-active-color: #141414; --bs-table-hover-bg: rgb(192.05, 204.445, 225.72); --bs-table-hover-color: #141414; color: var(--bs-table-color); border-color: var(--bs-table-border-color); } .table-warning { --bs-table-color: #141414; --bs-table-bg: rgb(246.4, 242.4, 213); --bs-table-border-color: rgb(201.12, 197.92, 174.4); --bs-table-striped-bg: rgb(235.08, 231.28, 203.35); --bs-table-striped-color: #141414; --bs-table-active-bg: rgb(223.76, 220.16, 193.7); --bs-table-active-color: #141414; --bs-table-hover-bg: rgb(229.42, 225.72, 198.525); --bs-table-hover-color: #141414; color: var(--bs-table-color); border-color: var(--bs-table-border-color); } .table-danger { --bs-table-color: #141414; --bs-table-bg: rgb(248, 218, 226.2); --bs-table-border-color: rgb(202.4, 178.4, 184.96); --bs-table-striped-bg: rgb(236.6, 208.1, 215.89); --bs-table-striped-color: #141414; --bs-table-active-bg: rgb(225.2, 198.2, 205.58); --bs-table-active-color: #141414; --bs-table-hover-bg: rgb(230.9, 203.15, 210.735); --bs-table-hover-color: #141414; color: var(--bs-table-color); border-color: var(--bs-table-border-color); } .table-light { --bs-table-color: #141414; --bs-table-bg: #FFFFFF; --bs-table-border-color: #d0d0d0; --bs-table-striped-bg: rgb(243.25, 243.25, 243.25); --bs-table-striped-color: #141414; --bs-table-active-bg: rgb(231.5, 231.5, 231.5); --bs-table-active-color: #141414; --bs-table-hover-bg: rgb(237.375, 237.375, 237.375); --bs-table-hover-color: #141414; color: var(--bs-table-color); border-color: var(--bs-table-border-color); } .table-dark { --bs-table-color: #FFFFFF; --bs-table-bg: #111112; --bs-table-border-color: rgb(64.6, 64.6, 65.4); --bs-table-striped-bg: rgb(28.9, 28.9, 29.85); --bs-table-striped-color: #FFFFFF; --bs-table-active-bg: rgb(40.8, 40.8, 41.7); --bs-table-active-color: #FFFFFF; --bs-table-hover-bg: rgb(34.85, 34.85, 35.775); --bs-table-hover-color: #FFFFFF; color: var(--bs-table-color); border-color: var(--bs-table-border-color); } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 575.98px) { .table-responsive-sm { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 575.98px) { .table-responsive-md { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 991.98px) { .table-responsive-lg { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 1279.98px) { .table-responsive-xl { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 1511.98px) { .table-responsive-xxl { overflow-x: auto; -webkit-overflow-scrolling: touch; } } .form-label { margin-bottom: 0.5rem; } .col-form-label { padding-top: calc(1rem + var(--bs-border-width)); padding-bottom: calc(1rem + var(--bs-border-width)); margin-bottom: 0; font-size: inherit; line-height: 1.25; } .col-form-label-lg { padding-top: calc(0.5rem + var(--bs-border-width)); padding-bottom: calc(0.5rem + var(--bs-border-width)); font-size: 1.25rem; } .col-form-label-sm { padding-top: calc(0.25rem + var(--bs-border-width)); padding-bottom: calc(0.25rem + var(--bs-border-width)); font-size: 0.875rem; } .form-text { margin-top: 0.25rem; font-size: 0.875em; color: var(--bs-secondary-color); } .form-control { display: block; width: 100%; padding: 1rem 1.5rem; font-size: 1rem; font-weight: 400; line-height: 1.25; color: #FFFFFF; appearance: none; background-color: #232325; background-clip: padding-box; border: var(--bs-border-width) solid transparent; border-radius: var(--bs-border-radius); box-shadow: none; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-control { transition: none; } } .form-control[type=file] { overflow: hidden; } .form-control[type=file]:not(:disabled):not([readonly]) { cursor: pointer; } .form-control:focus { color: #FFFFFF; background-color: #232325; border-color: rgb(186.5, 164, 241); outline: 0; box-shadow: none; } .form-control::-webkit-date-and-time-value { min-width: 85px; height: 1.25em; margin: 0; } .form-control::-webkit-datetime-edit { display: block; padding: 0; } .form-control::placeholder { color: #8A919A; opacity: 1; } .form-control:disabled { background-color: #454549; opacity: 1; } .form-control::file-selector-button { padding: 1rem 1.5rem; margin: -1rem -1.5rem; margin-inline-end: 1.5rem; color: #FFFFFF; background-color: var(--bs-tertiary-bg); pointer-events: none; border-color: inherit; border-style: solid; border-width: 0; border-inline-end-width: var(--bs-border-width); border-radius: 0; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-control::file-selector-button { transition: none; } } .form-control:hover:not(:disabled):not([readonly])::file-selector-button { background-color: var(--bs-secondary-bg); } .form-control-plaintext { display: block; width: 100%; padding: 1rem 0; margin-bottom: 0; line-height: 1.25; color: var(--bs-body-color); background-color: transparent; border: solid transparent; border-width: var(--bs-border-width) 0; } .form-control-plaintext:focus { outline: 0; } .form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { padding-right: 0; padding-left: 0; } .form-control-sm { min-height: calc(1.25em + 0.5rem + calc(var(--bs-border-width) * 2)); padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } .form-control-sm::file-selector-button { padding: 0.25rem 0.5rem; margin: -0.25rem -0.5rem; margin-inline-end: 0.5rem; } .form-control-lg { min-height: calc(1.25em + 1rem + calc(var(--bs-border-width) * 2)); padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } .form-control-lg::file-selector-button { padding: 0.5rem 1rem; margin: -0.5rem -1rem; margin-inline-end: 1rem; } textarea.form-control { min-height: calc(1.25em + 2rem + calc(var(--bs-border-width) * 2)); } textarea.form-control-sm { min-height: calc(1.25em + 0.5rem + calc(var(--bs-border-width) * 2)); } textarea.form-control-lg { min-height: calc(1.25em + 1rem + calc(var(--bs-border-width) * 2)); } .form-control-color { width: 3rem; height: calc(1.25em + 2rem + calc(var(--bs-border-width) * 2)); padding: 1rem; } .form-control-color:not(:disabled):not([readonly]) { cursor: pointer; } .form-control-color::-moz-color-swatch { border: 0 !important; border-radius: var(--bs-border-radius); } .form-control-color::-webkit-color-swatch { border: 0 !important; border-radius: var(--bs-border-radius); } .form-control-color.form-control-sm { height: calc(1.25em + 0.5rem + calc(var(--bs-border-width) * 2)); } .form-control-color.form-control-lg { height: calc(1.25em + 1rem + calc(var(--bs-border-width) * 2)); } .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23232325' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); display: block; width: 100%; padding: 1rem 4.5rem 1rem 1.5rem; font-size: 1rem; font-weight: 400; line-height: 1.25; color: #FFFFFF; appearance: none; background-color: #232325; background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none); background-repeat: no-repeat; background-position: right 1.5rem center; background-size: 16px 12px; border: var(--bs-border-width) solid transparent; border-radius: var(--bs-border-radius); box-shadow: var(--bs-box-shadow-inset); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-select { transition: none; } } .form-select:focus { border-color: rgb(186.5, 164, 241); outline: 0; box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(118, 73, 227, 0.25); } .form-select[multiple], .form-select[size]:not([size="1"]) { padding-right: 1.5rem; background-image: none; } .form-select:disabled { background-color: #454549; } .form-select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #FFFFFF; } .form-select-sm { padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } .form-select-lg { padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } [data-bs-theme=dark] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23CAD4DF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .form-check { display: block; min-height: 1.5rem; padding-left: 1.5em; margin-bottom: 0.125rem; } .form-check .form-check-input { float: left; margin-left: -1.5em; } .form-check-reverse { padding-right: 1.5em; padding-left: 0; text-align: right; } .form-check-reverse .form-check-input { float: right; margin-right: -1.5em; margin-left: 0; } .form-check-input { --bs-form-check-bg: #232325; flex-shrink: 0; width: 1em; height: 1em; margin-top: 0.25em; vertical-align: top; appearance: none; background-color: var(--bs-form-check-bg); background-image: var(--bs-form-check-bg-image); background-repeat: no-repeat; background-position: center; background-size: contain; border: var(--bs-border-width) solid var(--bs-border-color); print-color-adjust: exact; } .form-check-input[type=checkbox] { border-radius: 0.25em; } .form-check-input[type=radio] { border-radius: 50%; } .form-check-input:active { filter: brightness(90%); } .form-check-input:focus { border-color: rgb(186.5, 164, 241); outline: 0; box-shadow: 0 0 0 0.25rem rgba(118, 73, 227, 0.25); } .form-check-input:checked { background-color: #7649E3; border-color: #7649E3; } .form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } .form-check-input:checked[type=radio] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FFFFFF'/%3e%3c/svg%3e"); } .form-check-input[type=checkbox]:indeterminate { background-color: #7649E3; border-color: #7649E3; --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); } .form-check-input:disabled { pointer-events: none; filter: none; opacity: 0.5; } .form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label { cursor: default; opacity: 0.5; } .form-switch { padding-left: 2.5em; } .form-switch .form-check-input { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%2820, 20, 20, 0.25%29'/%3e%3c/svg%3e"); width: 2em; margin-left: -2.5em; background-image: var(--bs-form-switch-bg); background-position: left center; border-radius: 2em; transition: background-position 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-switch .form-check-input { transition: none; } } .form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28186.5, 164, 241%29'/%3e%3c/svg%3e"); } .form-switch .form-check-input:checked { background-position: right center; --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e"); } .form-switch.form-check-reverse { padding-right: 2.5em; padding-left: 0; } .form-switch.form-check-reverse .form-check-input { margin-right: -2.5em; margin-left: 0; } .form-check-inline { display: inline-block; margin-right: 1rem; } .btn-check { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } .btn-check[disabled] + .btn, .btn-check:disabled + .btn { pointer-events: none; filter: none; opacity: 0.65; } [data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e"); } .form-range { width: 100%; height: 1.5rem; padding: 0; appearance: none; background-color: transparent; } .form-range:focus { outline: 0; } .form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #111112, 0 0 0 0.25rem rgba(118, 73, 227, 0.25); } .form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #111112, 0 0 0 0.25rem rgba(118, 73, 227, 0.25); } .form-range::-moz-focus-outer { border: 0; } .form-range::-webkit-slider-thumb { width: 1rem; height: 1rem; margin-top: -0.25rem; appearance: none; background-color: #7649E3; border: 0; border-radius: 1rem; box-shadow: 0 0.1rem 0.25rem rgba(20, 20, 20, 0.1); transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-range::-webkit-slider-thumb { transition: none; } } .form-range::-webkit-slider-thumb:active { background-color: rgb(213.9, 200.4, 246.6); } .form-range::-webkit-slider-runnable-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: var(--bs-secondary-bg); border-color: transparent; border-radius: 1rem; box-shadow: var(--bs-box-shadow-inset); } .form-range::-moz-range-thumb { width: 1rem; height: 1rem; appearance: none; background-color: #7649E3; border: 0; border-radius: 1rem; box-shadow: 0 0.1rem 0.25rem rgba(20, 20, 20, 0.1); transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-range::-moz-range-thumb { transition: none; } } .form-range::-moz-range-thumb:active { background-color: rgb(213.9, 200.4, 246.6); } .form-range::-moz-range-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: var(--bs-secondary-bg); border-color: transparent; border-radius: 1rem; box-shadow: var(--bs-box-shadow-inset); } .form-range:disabled { pointer-events: none; } .form-range:disabled::-webkit-slider-thumb { background-color: var(--bs-secondary-color); } .form-range:disabled::-moz-range-thumb { background-color: var(--bs-secondary-color); } .form-floating { position: relative; } .form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select { height: calc(3.5rem + calc(var(--bs-border-width) * 2)); min-height: calc(3.5rem + calc(var(--bs-border-width) * 2)); line-height: 1.25; } .form-floating > label { position: absolute; top: 0; left: 0; z-index: 2; max-width: 100%; height: 100%; padding: 1rem 1.5rem; overflow: hidden; color: rgba(var(--bs-body-color-rgb), 0.65); text-align: start; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; border: var(--bs-border-width) solid transparent; transform-origin: 0 0; transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-floating > label { transition: none; } } .form-floating > .form-control, .form-floating > .form-control-plaintext { padding: 1rem 1.5rem; } .form-floating > .form-control::placeholder, .form-floating > .form-control-plaintext::placeholder { color: transparent; } .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown), .form-floating > .form-control-plaintext:focus, .form-floating > .form-control-plaintext:not(:placeholder-shown) { padding-top: 1.625rem; padding-bottom: 0.625rem; } .form-floating > .form-control:-webkit-autofill, .form-floating > .form-control-plaintext:-webkit-autofill { padding-top: 1.625rem; padding-bottom: 0.625rem; } .form-floating > .form-select { padding-top: 1.625rem; padding-bottom: 0.625rem; padding-left: 1.5rem; } .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label { transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); } .form-floating > .form-control:-webkit-autofill ~ label { transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); } .form-floating > textarea:focus ~ label::after, .form-floating > textarea:not(:placeholder-shown) ~ label::after { position: absolute; inset: 1rem 0.75rem; z-index: -1; height: 1.5em; content: ""; background-color: #232325; border-radius: var(--bs-border-radius); } .form-floating > textarea:disabled ~ label::after { background-color: #454549; } .form-floating > .form-control-plaintext ~ label { border-width: var(--bs-border-width) 0; } .form-floating > :disabled ~ label, .form-floating > .form-control:disabled ~ label { color: #454549; } .input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; } .input-group > .form-control, .input-group > .form-select, .input-group > .form-floating { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; } .input-group > .form-control:focus, .input-group > .form-select:focus, .input-group > .form-floating:focus-within { z-index: 5; } .input-group .btn { position: relative; z-index: 2; } .input-group .btn:focus { z-index: 5; } .input-group-text { display: flex; align-items: center; padding: 1rem 1.5rem; font-size: 1rem; font-weight: 400; line-height: 1.25; color: #FFFFFF; text-align: center; white-space: nowrap; background-color: #454549; border: var(--bs-border-width) solid transparent; border-radius: var(--bs-border-radius); } .input-group-lg > .form-control, .input-group-lg > .form-select, .input-group-lg > .input-group-text, .input-group-lg > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text, .input-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } .input-group-lg > .form-select, .input-group-sm > .form-select { padding-right: 6rem; } .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), .input-group.has-validation > .dropdown-toggle:nth-last-child(n+4), .input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control, .input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: calc(-1 * var(--bs-border-width)); border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .form-floating:not(:first-child) > .form-control, .input-group > .form-floating:not(:first-child) > .form-select { border-top-left-radius: 0; border-bottom-left-radius: 0; } .valid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 0.875em; color: var(--bs-form-valid-color); } .valid-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; padding: 0.125rem 0.25rem; margin-top: 0.1rem; font-size: 0.875rem; color: #fff; background-color: var(--bs-success); border-radius: var(--bs-border-radius); } .was-validated :valid ~ .valid-feedback, .was-validated :valid ~ .valid-tooltip, .is-valid ~ .valid-feedback, .is-valid ~ .valid-tooltip { display: block; } .was-validated .form-control:valid, .form-control.is-valid { border-color: var(--bs-form-valid-border-color); padding-right: calc(1.25em + 2rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23078139' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.3125em + 0.5rem) center; background-size: calc(0.625em + 1rem) calc(0.625em + 1rem); } .was-validated .form-control:valid:focus, .form-control.is-valid:focus { border-color: var(--bs-form-valid-border-color); box-shadow: none; } .was-validated textarea.form-control:valid, textarea.form-control.is-valid { padding-right: calc(1.25em + 2rem); background-position: top calc(0.3125em + 0.5rem) right calc(0.3125em + 0.5rem); } .was-validated .form-select:valid, .form-select.is-valid { border-color: var(--bs-form-valid-border-color); } .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] { --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23078139' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e"); padding-right: 8.25rem; background-position: right 1.5rem center, center right 4.5rem; background-size: 16px 12px, calc(0.625em + 1rem) calc(0.625em + 1rem); } .was-validated .form-select:valid:focus, .form-select.is-valid:focus { border-color: var(--bs-form-valid-border-color); box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25); } .was-validated .form-control-color:valid, .form-control-color.is-valid { width: calc(3rem + calc(1.25em + 2rem)); } .was-validated .form-check-input:valid, .form-check-input.is-valid { border-color: var(--bs-form-valid-border-color); } .was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked { background-color: var(--bs-form-valid-color); } .was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus { box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25); } .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { color: var(--bs-form-valid-color); } .form-check-inline .form-check-input ~ .valid-feedback { margin-left: 0.5em; } .was-validated .input-group > .form-control:not(:focus):valid, .input-group > .form-control:not(:focus).is-valid, .was-validated .input-group > .form-select:not(:focus):valid, .input-group > .form-select:not(:focus).is-valid, .was-validated .input-group > .form-floating:not(:focus-within):valid, .input-group > .form-floating:not(:focus-within).is-valid { z-index: 3; } .invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 0.875em; color: var(--bs-form-invalid-color); } .invalid-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; padding: 0.125rem 0.25rem; margin-top: 0.1rem; font-size: 0.875rem; color: #fff; background-color: var(--bs-danger); border-radius: var(--bs-border-radius); } .was-validated :invalid ~ .invalid-feedback, .was-validated :invalid ~ .invalid-tooltip, .is-invalid ~ .invalid-feedback, .is-invalid ~ .invalid-tooltip { display: block; } .was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--bs-form-invalid-border-color); padding-right: calc(1.25em + 2rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23DC466F'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23DC466F' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.3125em + 0.5rem) center; background-size: calc(0.625em + 1rem) calc(0.625em + 1rem); } .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { border-color: var(--bs-form-invalid-border-color); box-shadow: none; } .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { padding-right: calc(1.25em + 2rem); background-position: top calc(0.3125em + 0.5rem) right calc(0.3125em + 0.5rem); } .was-validated .form-select:invalid, .form-select.is-invalid { border-color: var(--bs-form-invalid-border-color); } .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] { --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23DC466F'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23DC466F' stroke='none'/%3e%3c/svg%3e"); padding-right: 8.25rem; background-position: right 1.5rem center, center right 4.5rem; background-size: 16px 12px, calc(0.625em + 1rem) calc(0.625em + 1rem); } .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus { border-color: var(--bs-form-invalid-border-color); box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25); } .was-validated .form-control-color:invalid, .form-control-color.is-invalid { width: calc(3rem + calc(1.25em + 2rem)); } .was-validated .form-check-input:invalid, .form-check-input.is-invalid { border-color: var(--bs-form-invalid-border-color); } .was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked { background-color: var(--bs-form-invalid-color); } .was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus { box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25); } .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { color: var(--bs-form-invalid-color); } .form-check-inline .form-check-input ~ .invalid-feedback { margin-left: 0.5em; } .was-validated .input-group > .form-control:not(:focus):invalid, .input-group > .form-control:not(:focus).is-invalid, .was-validated .input-group > .form-select:not(:focus):invalid, .input-group > .form-select:not(:focus).is-invalid, .was-validated .input-group > .form-floating:not(:focus-within):invalid, .input-group > .form-floating:not(:focus-within).is-invalid { z-index: 4; } .btn { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: 1rem; --bs-btn-font-family: ; --bs-btn-font-size: 0.875rem; --bs-btn-font-weight: 400; --bs-btn-line-height: 1.25; --bs-btn-color: var(--bs-body-color); --bs-btn-bg: transparent; --bs-btn-border-width: var(--bs-border-width); --bs-btn-border-color: transparent; --bs-btn-border-radius: var(--bs-border-radius); --bs-btn-hover-border-color: transparent; --bs-btn-box-shadow: none; --bs-btn-disabled-opacity: 0.65; --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5); display: inline-block; padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x); font-family: var(--bs-btn-font-family); font-size: var(--bs-btn-font-size); font-weight: var(--bs-btn-font-weight); line-height: var(--bs-btn-line-height); color: var(--bs-btn-color); text-align: center; vertical-align: middle; cursor: pointer; user-select: none; border: var(--bs-btn-border-width) solid var(--bs-btn-border-color); border-radius: var(--bs-btn-border-radius); background-color: var(--bs-btn-bg); box-shadow: var(--bs-btn-box-shadow); transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } .btn:hover { color: var(--bs-btn-hover-color); text-decoration: none; background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); } .btn-check + .btn:hover { color: var(--bs-btn-color); background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); } .btn:focus-visible { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); outline: 0; box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow); } .btn-check:focus-visible + .btn { border-color: var(--bs-btn-hover-border-color); outline: 0; box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow); } .btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show { color: var(--bs-btn-active-color); background-color: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color); box-shadow: var(--bs-btn-active-shadow); } .btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible { box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow); } .btn-check:checked:focus-visible + .btn { box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow); } .btn:disabled, .btn.disabled, fieldset:disabled .btn { color: var(--bs-btn-disabled-color); pointer-events: none; background-color: var(--bs-btn-disabled-bg); border-color: var(--bs-btn-disabled-border-color); opacity: var(--bs-btn-disabled-opacity); box-shadow: none; } .btn-primary { --bs-btn-color: #FFFFFF; --bs-btn-bg: #7649E3; --bs-btn-border-color: #7649E3; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: rgb(100.3, 62.05, 192.95); --bs-btn-hover-border-color: rgb(94.4, 58.4, 181.6); --bs-btn-focus-shadow-rgb: 139, 100, 231; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: rgb(94.4, 58.4, 181.6); --bs-btn-active-border-color: rgb(88.5, 54.75, 170.25); --bs-btn-active-shadow: none; --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: #7649E3; --bs-btn-disabled-border-color: #7649E3; } .btn-secondary { --bs-btn-color: #141414; --bs-btn-bg: #E6EAF0; --bs-btn-border-color: #E6EAF0; --bs-btn-hover-color: #141414; --bs-btn-hover-bg: rgb(233.75, 237.15, 242.25); --bs-btn-hover-border-color: rgb(232.5, 236.1, 241.5); --bs-btn-focus-shadow-rgb: 199, 202, 207; --bs-btn-active-color: #141414; --bs-btn-active-bg: rgb(235, 238.2, 243); --bs-btn-active-border-color: rgb(232.5, 236.1, 241.5); --bs-btn-active-shadow: none; --bs-btn-disabled-color: #141414; --bs-btn-disabled-bg: #E6EAF0; --bs-btn-disabled-border-color: #E6EAF0; } .btn-success { --bs-btn-color: #FFFFFF; --bs-btn-bg: #078139; --bs-btn-border-color: #078139; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: rgb(5.95, 109.65, 48.45); --bs-btn-hover-border-color: rgb(5.6, 103.2, 45.6); --bs-btn-focus-shadow-rgb: 44, 148, 87; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: rgb(5.6, 103.2, 45.6); --bs-btn-active-border-color: rgb(5.25, 96.75, 42.75); --bs-btn-active-shadow: none; --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: #078139; --bs-btn-disabled-border-color: #078139; } .btn-info { --bs-btn-color: #FFFFFF; --bs-btn-bg: #0A4DC0; --bs-btn-border-color: #0A4DC0; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: rgb(8.5, 65.45, 163.2); --bs-btn-hover-border-color: rgb(8, 61.6, 153.6); --bs-btn-focus-shadow-rgb: 47, 104, 201; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: rgb(8, 61.6, 153.6); --bs-btn-active-border-color: rgb(7.5, 57.75, 144); --bs-btn-active-shadow: none; --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: #0A4DC0; --bs-btn-disabled-border-color: #0A4DC0; } .btn-warning { --bs-btn-color: #141414; --bs-btn-bg: #D4C02D; --bs-btn-border-color: #D4C02D; --bs-btn-hover-color: #141414; --bs-btn-hover-bg: rgb(218.45, 201.45, 76.5); --bs-btn-hover-border-color: rgb(216.3, 198.3, 66); --bs-btn-focus-shadow-rgb: 183, 166, 41; --bs-btn-active-color: #141414; --bs-btn-active-bg: rgb(220.6, 204.6, 87); --bs-btn-active-border-color: rgb(216.3, 198.3, 66); --bs-btn-active-shadow: none; --bs-btn-disabled-color: #141414; --bs-btn-disabled-bg: #D4C02D; --bs-btn-disabled-border-color: #D4C02D; } .btn-danger { --bs-btn-color: #141414; --bs-btn-bg: #DC466F; --bs-btn-border-color: #DC466F; --bs-btn-hover-color: #141414; --bs-btn-hover-bg: rgb(225.25, 97.75, 132.6); --bs-btn-hover-border-color: rgb(223.5, 88.5, 125.4); --bs-btn-focus-shadow-rgb: 190, 63, 97; --bs-btn-active-color: #141414; --bs-btn-active-bg: rgb(227, 107, 139.8); --bs-btn-active-border-color: rgb(223.5, 88.5, 125.4); --bs-btn-active-shadow: none; --bs-btn-disabled-color: #141414; --bs-btn-disabled-bg: #DC466F; --bs-btn-disabled-border-color: #DC466F; } .btn-light { --bs-btn-color: #141414; --bs-btn-bg: #FFFFFF; --bs-btn-border-color: #FFFFFF; --bs-btn-hover-color: #141414; --bs-btn-hover-bg: rgb(216.75, 216.75, 216.75); --bs-btn-hover-border-color: #cccccc; --bs-btn-focus-shadow-rgb: 220, 220, 220; --bs-btn-active-color: #141414; --bs-btn-active-bg: #cccccc; --bs-btn-active-border-color: rgb(191.25, 191.25, 191.25); --bs-btn-active-shadow: none; --bs-btn-disabled-color: #141414; --bs-btn-disabled-bg: #FFFFFF; --bs-btn-disabled-border-color: #FFFFFF; } .btn-dark { --bs-btn-color: #FFFFFF; --bs-btn-bg: #111112; --bs-btn-border-color: #111112; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: rgb(52.7, 52.7, 53.55); --bs-btn-hover-border-color: rgb(40.8, 40.8, 41.7); --bs-btn-focus-shadow-rgb: 53, 53, 54; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: rgb(64.6, 64.6, 65.4); --bs-btn-active-border-color: rgb(40.8, 40.8, 41.7); --bs-btn-active-shadow: none; --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: #111112; --bs-btn-disabled-border-color: #111112; } .btn-outline-primary { --bs-btn-color: #7649E3; --bs-btn-border-color: #7649E3; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #7649E3; --bs-btn-hover-border-color: #7649E3; --bs-btn-focus-shadow-rgb: 118, 73, 227; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #7649E3; --bs-btn-active-border-color: #7649E3; --bs-btn-active-shadow: none; --bs-btn-disabled-color: #7649E3; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #7649E3; --bs-gradient: none; } .btn-outline-secondary { --bs-btn-color: #E6EAF0; --bs-btn-border-color: #E6EAF0; --bs-btn-hover-color: #141414; --bs-btn-hover-bg: #E6EAF0; --bs-btn-hover-border-color: #E6EAF0; --bs-btn-focus-shadow-rgb: 230, 234, 240; --bs-btn-active-color: #141414; --bs-btn-active-bg: #E6EAF0; --bs-btn-active-border-color: #E6EAF0; --bs-btn-active-shadow: none; --bs-btn-disabled-color: #E6EAF0; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #E6EAF0; --bs-gradient: none; } .btn-outline-success { --bs-btn-color: #078139; --bs-btn-border-color: #078139; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #078139; --bs-btn-hover-border-color: #078139; --bs-btn-focus-shadow-rgb: 7, 129, 57; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #078139; --bs-btn-active-border-color: #078139; --bs-btn-active-shadow: none; --bs-btn-disabled-color: #078139; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #078139; --bs-gradient: none; } .btn-outline-info { --bs-btn-color: #0A4DC0; --bs-btn-border-color: #0A4DC0; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #0A4DC0; --bs-btn-hover-border-color: #0A4DC0; --bs-btn-focus-shadow-rgb: 10, 77, 192; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #0A4DC0; --bs-btn-active-border-color: #0A4DC0; --bs-btn-active-shadow: none; --bs-btn-disabled-color: #0A4DC0; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #0A4DC0; --bs-gradient: none; } .btn-outline-warning { --bs-btn-color: #D4C02D; --bs-btn-border-color: #D4C02D; --bs-btn-hover-color: #141414; --bs-btn-hover-bg: #D4C02D; --bs-btn-hover-border-color: #D4C02D; --bs-btn-focus-shadow-rgb: 212, 192, 45; --bs-btn-active-color: #141414; --bs-btn-active-bg: #D4C02D; --bs-btn-active-border-color: #D4C02D; --bs-btn-active-shadow: none; --bs-btn-disabled-color: #D4C02D; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #D4C02D; --bs-gradient: none; } .btn-outline-danger { --bs-btn-color: #DC466F; --bs-btn-border-color: #DC466F; --bs-btn-hover-color: #141414; --bs-btn-hover-bg: #DC466F; --bs-btn-hover-border-color: #DC466F; --bs-btn-focus-shadow-rgb: 220, 70, 111; --bs-btn-active-color: #141414; --bs-btn-active-bg: #DC466F; --bs-btn-active-border-color: #DC466F; --bs-btn-active-shadow: none; --bs-btn-disabled-color: #DC466F; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #DC466F; --bs-gradient: none; } .btn-outline-light { --bs-btn-color: #FFFFFF; --bs-btn-border-color: #FFFFFF; --bs-btn-hover-color: #141414; --bs-btn-hover-bg: #FFFFFF; --bs-btn-hover-border-color: #FFFFFF; --bs-btn-focus-shadow-rgb: 255, 255, 255; --bs-btn-active-color: #141414; --bs-btn-active-bg: #FFFFFF; --bs-btn-active-border-color: #FFFFFF; --bs-btn-active-shadow: none; --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #FFFFFF; --bs-gradient: none; } .btn-outline-dark { --bs-btn-color: #111112; --bs-btn-border-color: #111112; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #111112; --bs-btn-hover-border-color: #111112; --bs-btn-focus-shadow-rgb: 17, 17, 18; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #111112; --bs-btn-active-border-color: #111112; --bs-btn-active-shadow: none; --bs-btn-disabled-color: #111112; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #111112; --bs-gradient: none; } .btn-link { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-link-color); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--bs-link-hover-color); --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--bs-link-hover-color); --bs-btn-active-border-color: transparent; --bs-btn-disabled-color: #454549; --bs-btn-disabled-border-color: transparent; --bs-btn-box-shadow: 0 0 0 #000; --bs-btn-focus-shadow-rgb: 220, 220, 220; text-decoration: none; } .btn-link:hover, .btn-link:focus-visible { text-decoration: underline; } .btn-link:focus-visible { color: var(--bs-btn-color); } .btn-link:hover { color: var(--bs-btn-hover-color); } .btn-lg { --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 1.25rem; --bs-btn-border-radius: var(--bs-border-radius-lg); } .btn-sm { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.5rem; --bs-btn-font-size: 0.875rem; --bs-btn-border-radius: var(--bs-border-radius-sm); } .dropup, .dropend, .dropdown, .dropstart, .dropup-center, .dropdown-center { position: relative; } .dropdown-toggle { white-space: nowrap; } .dropdown-toggle::after { display: inline-block; margin-left: 0.34em; vertical-align: 0.34em; content: ""; border-top: 0.4em solid; border-right: 0.4em solid transparent; border-bottom: 0; border-left: 0.4em solid transparent; } .dropdown-toggle:empty::after { margin-left: 0; } .dropdown-menu { --bs-dropdown-zindex: 1000; --bs-dropdown-min-width: 10rem; --bs-dropdown-padding-x: 0; --bs-dropdown-padding-y: 0.5rem; --bs-dropdown-spacer: 0.125rem; --bs-dropdown-font-size: 1rem; --bs-dropdown-color: #E6EAF0; --bs-dropdown-bg: #111112; --bs-dropdown-border-color: #111112; --bs-dropdown-border-radius: var(--bs-border-radius); --bs-dropdown-border-width: 1px; --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - 1px); --bs-dropdown-divider-bg: #141414; --bs-dropdown-divider-margin-y: 0.25rem; --bs-dropdown-box-shadow: 0px 5px 40px #141414; --bs-dropdown-link-color: #FFFFFF; --bs-dropdown-link-hover-color: #7649E3; --bs-dropdown-link-hover-bg: #111112; --bs-dropdown-link-active-color: #FFFFFF; --bs-dropdown-link-active-bg: transparent; --bs-dropdown-link-disabled-color: var(--bs-tertiary-color); --bs-dropdown-item-padding-x: 0.5rem; --bs-dropdown-item-padding-y: 0.125rem; --bs-dropdown-header-color: #454549; --bs-dropdown-header-padding-x: 0.5rem; --bs-dropdown-header-padding-y: 0.5rem; position: absolute; z-index: var(--bs-dropdown-zindex); display: none; min-width: var(--bs-dropdown-min-width); padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x); margin: 0; font-size: var(--bs-dropdown-font-size); color: var(--bs-dropdown-color); text-align: left; list-style: none; background-color: var(--bs-dropdown-bg); background-clip: padding-box; border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color); border-radius: var(--bs-dropdown-border-radius); box-shadow: var(--bs-dropdown-box-shadow); } .dropdown-menu[data-bs-popper] { top: 100%; left: 0; margin-top: var(--bs-dropdown-spacer); } .dropdown-menu-start { --bs-position: start; } .dropdown-menu-start[data-bs-popper] { right: auto; left: 0; } .dropdown-menu-end { --bs-position: end; } .dropdown-menu-end[data-bs-popper] { right: 0; left: auto; } @media (min-width: 576px) { .dropdown-menu-sm-start { --bs-position: start; } .dropdown-menu-sm-start[data-bs-popper] { right: auto; left: 0; } .dropdown-menu-sm-end { --bs-position: end; } .dropdown-menu-sm-end[data-bs-popper] { right: 0; left: auto; } } @media (min-width: 576px) { .dropdown-menu-md-start { --bs-position: start; } .dropdown-menu-md-start[data-bs-popper] { right: auto; left: 0; } .dropdown-menu-md-end { --bs-position: end; } .dropdown-menu-md-end[data-bs-popper] { right: 0; left: auto; } } @media (min-width: 992px) { .dropdown-menu-lg-start { --bs-position: start; } .dropdown-menu-lg-start[data-bs-popper] { right: auto; left: 0; } .dropdown-menu-lg-end { --bs-position: end; } .dropdown-menu-lg-end[data-bs-popper] { right: 0; left: auto; } } @media (min-width: 1280px) { .dropdown-menu-xl-start { --bs-position: start; } .dropdown-menu-xl-start[data-bs-popper] { right: auto; left: 0; } .dropdown-menu-xl-end { --bs-position: end; } .dropdown-menu-xl-end[data-bs-popper] { right: 0; left: auto; } } @media (min-width: 1512px) { .dropdown-menu-xxl-start { --bs-position: start; } .dropdown-menu-xxl-start[data-bs-popper] { right: auto; left: 0; } .dropdown-menu-xxl-end { --bs-position: end; } .dropdown-menu-xxl-end[data-bs-popper] { right: 0; left: auto; } } .dropup .dropdown-menu[data-bs-popper] { top: auto; bottom: 100%; margin-top: 0; margin-bottom: var(--bs-dropdown-spacer); } .dropup .dropdown-toggle::after { display: inline-block; margin-left: 0.34em; vertical-align: 0.34em; content: ""; border-top: 0; border-right: 0.4em solid transparent; border-bottom: 0.4em solid; border-left: 0.4em solid transparent; } .dropup .dropdown-toggle:empty::after { margin-left: 0; } .dropend .dropdown-menu[data-bs-popper] { top: 0; right: auto; left: 100%; margin-top: 0; margin-left: var(--bs-dropdown-spacer); } .dropend .dropdown-toggle::after { display: inline-block; margin-left: 0.34em; vertical-align: 0.34em; content: ""; border-top: 0.4em solid transparent; border-right: 0; border-bottom: 0.4em solid transparent; border-left: 0.4em solid; } .dropend .dropdown-toggle:empty::after { margin-left: 0; } .dropend .dropdown-toggle::after { vertical-align: 0; } .dropstart .dropdown-menu[data-bs-popper] { top: 0; right: 100%; left: auto; margin-top: 0; margin-right: var(--bs-dropdown-spacer); } .dropstart .dropdown-toggle::after { display: inline-block; margin-left: 0.34em; vertical-align: 0.34em; content: ""; } .dropstart .dropdown-toggle::after { display: none; } .dropstart .dropdown-toggle::before { display: inline-block; margin-right: 0.34em; vertical-align: 0.34em; content: ""; border-top: 0.4em solid transparent; border-right: 0.4em solid; border-bottom: 0.4em solid transparent; } .dropstart .dropdown-toggle:empty::after { margin-left: 0; } .dropstart .dropdown-toggle::before { vertical-align: 0; } .dropdown-divider { height: 0; margin: var(--bs-dropdown-divider-margin-y) 0; overflow: hidden; border-top: 1px solid var(--bs-dropdown-divider-bg); opacity: 1; } .dropdown-item { display: block; width: 100%; padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x); clear: both; font-weight: 400; color: var(--bs-dropdown-link-color); text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; border-radius: var(--bs-dropdown-item-border-radius, 0); } .dropdown-item:hover, .dropdown-item:focus { color: var(--bs-dropdown-link-hover-color); text-decoration: none; background-color: var(--bs-dropdown-link-hover-bg); } .dropdown-item.active, .dropdown-item:active { color: var(--bs-dropdown-link-active-color); text-decoration: none; background-color: var(--bs-dropdown-link-active-bg); } .dropdown-item.disabled, .dropdown-item:disabled { color: var(--bs-dropdown-link-disabled-color); pointer-events: none; background-color: transparent; } .dropdown-menu.show { display: block; } .dropdown-header { display: block; padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x); margin-bottom: 0; font-size: 0.875rem; color: var(--bs-dropdown-header-color); white-space: nowrap; } .dropdown-item-text { display: block; padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x); color: var(--bs-dropdown-link-color); } .dropdown-menu-dark { --bs-dropdown-color: #CAD4DF; --bs-dropdown-bg: #232325; --bs-dropdown-border-color: #111112; --bs-dropdown-box-shadow: ; --bs-dropdown-link-color: #CAD4DF; --bs-dropdown-link-hover-color: #FFFFFF; --bs-dropdown-divider-bg: #141414; --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15); --bs-dropdown-link-active-color: #FFFFFF; --bs-dropdown-link-active-bg: transparent; --bs-dropdown-link-disabled-color: #72777E; --bs-dropdown-header-color: #72777E; } .nav { --bs-nav-link-padding-x: 2rem; --bs-nav-link-padding-y: 1rem; --bs-nav-link-font-weight: ; --bs-nav-link-color: var(--bs-link-color); --bs-nav-link-hover-color: var(--bs-link-hover-color); --bs-nav-link-disabled-color: var(--bs-secondary-color); display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } .nav-link { display: block; padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x); font-size: var(--bs-nav-link-font-size); font-weight: var(--bs-nav-link-font-weight); color: var(--bs-nav-link-color); background: none; border: 0; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .nav-link { transition: none; } } .nav-link:hover, .nav-link:focus { color: var(--bs-nav-link-hover-color); text-decoration: none; } .nav-link:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem rgba(118, 73, 227, 0.25); } .nav-link.disabled, .nav-link:disabled { color: var(--bs-nav-link-disabled-color); pointer-events: none; cursor: default; } .nav-tabs { --bs-nav-tabs-border-width: var(--bs-border-width); --bs-nav-tabs-border-color: var(--bs-border-color); --bs-nav-tabs-border-radius: var(--bs-border-radius); --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color); --bs-nav-tabs-link-active-color: var(--bs-emphasis-color); --bs-nav-tabs-link-active-bg: var(--bs-body-bg); --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg); border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color); } .nav-tabs .nav-link { margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width)); border: var(--bs-nav-tabs-border-width) solid transparent; border-top-left-radius: var(--bs-nav-tabs-border-radius); border-top-right-radius: var(--bs-nav-tabs-border-radius); } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { isolation: isolate; border-color: var(--bs-nav-tabs-link-hover-border-color); } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--bs-nav-tabs-link-active-color); background-color: var(--bs-nav-tabs-link-active-bg); border-color: var(--bs-nav-tabs-link-active-border-color); } .nav-tabs .dropdown-menu { margin-top: calc(-1 * var(--bs-nav-tabs-border-width)); border-top-left-radius: 0; border-top-right-radius: 0; } .nav-pills { --bs-nav-pills-border-radius: var(--bs-border-radius); --bs-nav-pills-link-active-color: #FFFFFF; --bs-nav-pills-link-active-bg: #7649E3; } .nav-pills .nav-link { border-radius: var(--bs-nav-pills-border-radius); } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: var(--bs-nav-pills-link-active-color); background-color: var(--bs-nav-pills-link-active-bg); } .nav-underline { --bs-nav-underline-gap: 1rem; --bs-nav-underline-border-width: 0.125rem; --bs-nav-underline-link-active-color: var(--bs-emphasis-color); gap: var(--bs-nav-underline-gap); } .nav-underline .nav-link { padding-right: 0; padding-left: 0; border-bottom: var(--bs-nav-underline-border-width) solid transparent; } .nav-underline .nav-link:hover, .nav-underline .nav-link:focus { border-bottom-color: currentcolor; } .nav-underline .nav-link.active, .nav-underline .show > .nav-link { font-weight: 700; color: var(--bs-nav-underline-link-active-color); border-bottom-color: currentcolor; } .nav-fill > .nav-link, .nav-fill .nav-item { flex: 1 1 auto; text-align: center; } .nav-justified > .nav-link, .nav-justified .nav-item { flex-grow: 1; flex-basis: 0; text-align: center; } .nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link { width: 100%; } .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; } .navbar { --bs-navbar-padding-x: 0; --bs-navbar-padding-y: 0; --bs-navbar-color: #454549; --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8); --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3); --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1); --bs-navbar-brand-padding-y: 1.25rem; --bs-navbar-brand-margin-end: 1rem; --bs-navbar-brand-font-size: 1.25rem; --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1); --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1); --bs-navbar-nav-link-padding-x: 2rem; --bs-navbar-toggler-padding-y: 0.25rem; --bs-navbar-toggler-padding-x: 0.75rem; --bs-navbar-toggler-font-size: 1.25rem; --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28230, 234, 240, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15); --bs-navbar-toggler-border-radius: var(--bs-border-radius); --bs-navbar-toggler-focus-width: 0.25rem; --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x); } .navbar > .container, .navbar > .container-fluid, .navbar > .container-sm, .navbar > .container-md, .navbar > .container-lg, .navbar > .container-xl, .navbar > .container-xxl { display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between; } .navbar-brand { padding-top: var(--bs-navbar-brand-padding-y); padding-bottom: var(--bs-navbar-brand-padding-y); margin-right: var(--bs-navbar-brand-margin-end); font-size: var(--bs-navbar-brand-font-size); color: var(--bs-navbar-brand-color); white-space: nowrap; } .navbar-brand:hover, .navbar-brand:focus { color: var(--bs-navbar-brand-hover-color); text-decoration: none; } .navbar-nav { --bs-nav-link-padding-x: 0; --bs-nav-link-padding-y: 1rem; --bs-nav-link-font-weight: ; --bs-nav-link-color: var(--bs-navbar-color); --bs-nav-link-hover-color: var(--bs-navbar-hover-color); --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color); display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; } .navbar-nav .nav-link.active, .navbar-nav .nav-link.show { color: var(--bs-navbar-active-color); } .navbar-nav .dropdown-menu { position: static; } .navbar-text { padding-top: 1rem; padding-bottom: 1rem; color: var(--bs-navbar-color); } .navbar-text a, .navbar-text a:hover, .navbar-text a:focus { color: var(--bs-navbar-active-color); } .navbar-collapse { flex-grow: 1; flex-basis: 100%; align-items: center; } .navbar-toggler { padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x); font-size: var(--bs-navbar-toggler-font-size); line-height: 1; color: var(--bs-navbar-color); background-color: transparent; border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color); border-radius: var(--bs-navbar-toggler-border-radius); transition: var(--bs-navbar-toggler-transition); } @media (prefers-reduced-motion: reduce) { .navbar-toggler { transition: none; } } .navbar-toggler:hover { text-decoration: none; } .navbar-toggler:focus { text-decoration: none; outline: 0; box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width); } .navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; background-image: var(--bs-navbar-toggler-icon-bg); background-repeat: no-repeat; background-position: center; background-size: 100%; } .navbar-nav-scroll { max-height: var(--bs-scroll-height, 75vh); overflow-y: auto; } @media (min-width: 576px) { .navbar-expand-sm { flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand-sm .navbar-nav { flex-direction: row; } .navbar-expand-sm .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand-sm .navbar-nav .nav-link { padding-right: var(--bs-navbar-nav-link-padding-x); padding-left: var(--bs-navbar-nav-link-padding-x); } .navbar-expand-sm .navbar-nav-scroll { overflow: visible; } .navbar-expand-sm .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-sm .navbar-toggler { display: none; } .navbar-expand-sm .offcanvas { position: static; z-index: auto; flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: transparent !important; border: 0 !important; transform: none !important; box-shadow: none; transition: none; } .navbar-expand-sm .offcanvas .offcanvas-header { display: none; } .navbar-expand-sm .offcanvas .offcanvas-body { display: flex; flex-grow: 0; padding: 0; overflow-y: visible; } } @media (min-width: 576px) { .navbar-expand-md { flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand-md .navbar-nav { flex-direction: row; } .navbar-expand-md .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand-md .navbar-nav .nav-link { padding-right: var(--bs-navbar-nav-link-padding-x); padding-left: var(--bs-navbar-nav-link-padding-x); } .navbar-expand-md .navbar-nav-scroll { overflow: visible; } .navbar-expand-md .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-md .navbar-toggler { display: none; } .navbar-expand-md .offcanvas { position: static; z-index: auto; flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: transparent !important; border: 0 !important; transform: none !important; box-shadow: none; transition: none; } .navbar-expand-md .offcanvas .offcanvas-header { display: none; } .navbar-expand-md .offcanvas .offcanvas-body { display: flex; flex-grow: 0; padding: 0; overflow-y: visible; } } @media (min-width: 992px) { .navbar-expand-lg { flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand-lg .navbar-nav { flex-direction: row; } .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand-lg .navbar-nav .nav-link { padding-right: var(--bs-navbar-nav-link-padding-x); padding-left: var(--bs-navbar-nav-link-padding-x); } .navbar-expand-lg .navbar-nav-scroll { overflow: visible; } .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-lg .navbar-toggler { display: none; } .navbar-expand-lg .offcanvas { position: static; z-index: auto; flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: transparent !important; border: 0 !important; transform: none !important; box-shadow: none; transition: none; } .navbar-expand-lg .offcanvas .offcanvas-header { display: none; } .navbar-expand-lg .offcanvas .offcanvas-body { display: flex; flex-grow: 0; padding: 0; overflow-y: visible; } } @media (min-width: 1280px) { .navbar-expand-xl { flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand-xl .navbar-nav { flex-direction: row; } .navbar-expand-xl .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand-xl .navbar-nav .nav-link { padding-right: var(--bs-navbar-nav-link-padding-x); padding-left: var(--bs-navbar-nav-link-padding-x); } .navbar-expand-xl .navbar-nav-scroll { overflow: visible; } .navbar-expand-xl .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-xl .navbar-toggler { display: none; } .navbar-expand-xl .offcanvas { position: static; z-index: auto; flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: transparent !important; border: 0 !important; transform: none !important; box-shadow: none; transition: none; } .navbar-expand-xl .offcanvas .offcanvas-header { display: none; } .navbar-expand-xl .offcanvas .offcanvas-body { display: flex; flex-grow: 0; padding: 0; overflow-y: visible; } } @media (min-width: 1512px) { .navbar-expand-xxl { flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand-xxl .navbar-nav { flex-direction: row; } .navbar-expand-xxl .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand-xxl .navbar-nav .nav-link { padding-right: var(--bs-navbar-nav-link-padding-x); padding-left: var(--bs-navbar-nav-link-padding-x); } .navbar-expand-xxl .navbar-nav-scroll { overflow: visible; } .navbar-expand-xxl .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-xxl .navbar-toggler { display: none; } .navbar-expand-xxl .offcanvas { position: static; z-index: auto; flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: transparent !important; border: 0 !important; transform: none !important; box-shadow: none; transition: none; } .navbar-expand-xxl .offcanvas .offcanvas-header { display: none; } .navbar-expand-xxl .offcanvas .offcanvas-body { display: flex; flex-grow: 0; padding: 0; overflow-y: visible; } } .navbar-expand { flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand .navbar-nav { flex-direction: row; } .navbar-expand .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand .navbar-nav .nav-link { padding-right: var(--bs-navbar-nav-link-padding-x); padding-left: var(--bs-navbar-nav-link-padding-x); } .navbar-expand .navbar-nav-scroll { overflow: visible; } .navbar-expand .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand .navbar-toggler { display: none; } .navbar-expand .offcanvas { position: static; z-index: auto; flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: transparent !important; border: 0 !important; transform: none !important; box-shadow: none; transition: none; } .navbar-expand .offcanvas .offcanvas-header { display: none; } .navbar-expand .offcanvas .offcanvas-body { display: flex; flex-grow: 0; padding: 0; overflow-y: visible; } .navbar-dark, .navbar[data-bs-theme=dark] { --bs-navbar-color: #FFFFFF; --bs-navbar-hover-color: #7649E3; --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25); --bs-navbar-active-color: #FFFFFF; --bs-navbar-brand-color: #FFFFFF; --bs-navbar-brand-hover-color: #FFFFFF; --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1); --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFFFFF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } [data-bs-theme=dark] .navbar-toggler-icon { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFFFFF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .card { --bs-card-spacer-y: 2rem; --bs-card-spacer-x: 2rem; --bs-card-title-spacer-y: 0.25rem; --bs-card-title-color: ; --bs-card-subtitle-color: ; --bs-card-border-width: var(--bs-border-width); --bs-card-border-color: var(--bs-border-color-translucent); --bs-card-border-radius: 8px; --bs-card-box-shadow: ; --bs-card-inner-border-radius: calc(8px - (var(--bs-border-width))); --bs-card-cap-padding-y: 2rem; --bs-card-cap-padding-x: 2rem; --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03); --bs-card-cap-color: ; --bs-card-height: ; --bs-card-color: ; --bs-card-bg: #232325; --bs-card-img-overlay-padding: 0.5rem; --bs-card-group-margin: 0.75rem; position: relative; display: flex; flex-direction: column; min-width: 0; height: var(--bs-card-height); color: var(--bs-body-color); word-wrap: break-word; background-color: var(--bs-card-bg); background-clip: border-box; border: var(--bs-card-border-width) solid var(--bs-card-border-color); border-radius: var(--bs-card-border-radius); box-shadow: var(--bs-card-box-shadow); } .card > hr { margin-right: 0; margin-left: 0; } .card > .list-group { border-top: inherit; border-bottom: inherit; } .card > .list-group:first-child { border-top-width: 0; border-top-left-radius: var(--bs-card-inner-border-radius); border-top-right-radius: var(--bs-card-inner-border-radius); } .card > .list-group:last-child { border-bottom-width: 0; border-bottom-right-radius: var(--bs-card-inner-border-radius); border-bottom-left-radius: var(--bs-card-inner-border-radius); } .card > .card-header + .list-group, .card > .list-group + .card-footer { border-top: 0; } .card-body { flex: 1 1 auto; padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); color: var(--bs-card-color); } .card-title { margin-bottom: var(--bs-card-title-spacer-y); color: var(--bs-card-title-color); } .card-subtitle { margin-top: calc(-0.5 * var(--bs-card-title-spacer-y)); margin-bottom: 0; color: var(--bs-card-subtitle-color); } .card-text:last-child { margin-bottom: 0; } .card-link:hover { text-decoration: none; } .card-link + .card-link { margin-left: var(--bs-card-spacer-x); } .card-header { padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x); margin-bottom: 0; color: var(--bs-card-cap-color); background-color: var(--bs-card-cap-bg); border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color); } .card-header:first-child { border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0; } .card-footer { padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x); color: var(--bs-card-cap-color); background-color: var(--bs-card-cap-bg); border-top: var(--bs-card-border-width) solid var(--bs-card-border-color); } .card-footer:last-child { border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius); } .card-header-tabs { margin-right: calc(-0.5 * var(--bs-card-cap-padding-x)); margin-bottom: calc(-1 * var(--bs-card-cap-padding-y)); margin-left: calc(-0.5 * var(--bs-card-cap-padding-x)); border-bottom: 0; } .card-header-tabs .nav-link.active { background-color: var(--bs-card-bg); border-bottom-color: var(--bs-card-bg); } .card-header-pills { margin-right: calc(-0.5 * var(--bs-card-cap-padding-x)); margin-left: calc(-0.5 * var(--bs-card-cap-padding-x)); } .card-img-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: var(--bs-card-img-overlay-padding); border-radius: var(--bs-card-inner-border-radius); } .card-img, .card-img-top, .card-img-bottom { width: 100%; } .card-img, .card-img-top { border-top-left-radius: var(--bs-card-inner-border-radius); border-top-right-radius: var(--bs-card-inner-border-radius); } .card-img, .card-img-bottom { border-bottom-right-radius: var(--bs-card-inner-border-radius); border-bottom-left-radius: var(--bs-card-inner-border-radius); } .card-group > .card { margin-bottom: var(--bs-card-group-margin); } @media (min-width: 576px) { .card-group { display: flex; flex-flow: row wrap; } .card-group > .card { flex: 1 0 0; margin-bottom: 0; } .card-group > .card + .card { margin-left: 0; border-left: 0; } .card-group > .card:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .card-group > .card:not(:last-child) > .card-img-top, .card-group > .card:not(:last-child) > .card-header { border-top-right-radius: 0; } .card-group > .card:not(:last-child) > .card-img-bottom, .card-group > .card:not(:last-child) > .card-footer { border-bottom-right-radius: 0; } .card-group > .card:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .card-group > .card:not(:first-child) > .card-img-top, .card-group > .card:not(:first-child) > .card-header { border-top-left-radius: 0; } .card-group > .card:not(:first-child) > .card-img-bottom, .card-group > .card:not(:first-child) > .card-footer { border-bottom-left-radius: 0; } } .breadcrumb { --bs-breadcrumb-padding-x: 0; --bs-breadcrumb-padding-y: 0; --bs-breadcrumb-margin-bottom: 1rem; --bs-breadcrumb-bg: #111112; --bs-breadcrumb-border-radius: ; --bs-breadcrumb-divider-color: var(--bs-secondary-color); --bs-breadcrumb-item-padding-x: 0.5rem; --bs-breadcrumb-item-active-color: #8A919A; display: flex; flex-wrap: wrap; padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x); margin-bottom: var(--bs-breadcrumb-margin-bottom); font-size: var(--bs-breadcrumb-font-size); list-style: none; background-color: var(--bs-breadcrumb-bg); border-radius: var(--bs-breadcrumb-border-radius); } .breadcrumb-item + .breadcrumb-item { padding-left: var(--bs-breadcrumb-item-padding-x); } .breadcrumb-item + .breadcrumb-item::before { float: left; padding-right: var(--bs-breadcrumb-item-padding-x); color: var(--bs-breadcrumb-divider-color); content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */; } .breadcrumb-item.active { color: var(--bs-breadcrumb-item-active-color); } .modal { --bs-modal-zindex: 1055; --bs-modal-width: 500px; --bs-modal-padding: 0.5rem; --bs-modal-margin: 0.5rem; --bs-modal-color: var(--bs-body-color); --bs-modal-bg: #141414; --bs-modal-border-color: #E6EAF0; --bs-modal-border-width: var(--bs-border-width); --bs-modal-border-radius: var(--bs-border-radius-lg); --bs-modal-box-shadow: var(--bs-box-shadow-sm); --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width))); --bs-modal-header-padding-x: 0.5rem; --bs-modal-header-padding-y: 0.5rem; --bs-modal-header-padding: 0.5rem 0.5rem; --bs-modal-header-border-color: var(--bs-border-color); --bs-modal-header-border-width: var(--bs-border-width); --bs-modal-title-line-height: 1.5; --bs-modal-footer-gap: 0.5rem; --bs-modal-footer-bg: ; --bs-modal-footer-border-color: var(--bs-border-color); --bs-modal-footer-border-width: var(--bs-border-width); position: fixed; top: 0; left: 0; z-index: var(--bs-modal-zindex); display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; } .modal-dialog { position: relative; width: auto; margin: var(--bs-modal-margin); pointer-events: none; } .modal.fade .modal-dialog { transform: translate(0, -50px); transition: transform 0.3s ease-out; } @media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } } .modal.show .modal-dialog { transform: none; } .modal.modal-static .modal-dialog { transform: scale(1.02); } .modal-dialog-scrollable { height: calc(100% - var(--bs-modal-margin) * 2); } .modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; } .modal-dialog-scrollable .modal-body { overflow-y: auto; } .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - var(--bs-modal-margin) * 2); } .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; color: var(--bs-modal-color); pointer-events: auto; background-color: var(--bs-modal-bg); background-clip: padding-box; border: var(--bs-modal-border-width) solid var(--bs-modal-border-color); border-radius: var(--bs-modal-border-radius); box-shadow: var(--bs-modal-box-shadow); outline: 0; } .modal-backdrop { --bs-backdrop-zindex: 1050; --bs-backdrop-bg: #141414; --bs-backdrop-opacity: 0.5; position: fixed; top: 0; left: 0; z-index: var(--bs-backdrop-zindex); width: 100vw; height: 100vh; background-color: var(--bs-backdrop-bg); } .modal-backdrop.fade { opacity: 0; } .modal-backdrop.show { opacity: var(--bs-backdrop-opacity); } .modal-header { display: flex; flex-shrink: 0; align-items: center; padding: var(--bs-modal-header-padding); border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color); border-top-left-radius: var(--bs-modal-inner-border-radius); border-top-right-radius: var(--bs-modal-inner-border-radius); } .modal-header .btn-close { padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5); margin-top: calc(-0.5 * var(--bs-modal-header-padding-y)); margin-right: calc(-0.5 * var(--bs-modal-header-padding-x)); margin-bottom: calc(-0.5 * var(--bs-modal-header-padding-y)); margin-left: auto; } .modal-title { margin-bottom: 0; line-height: var(--bs-modal-title-line-height); } .modal-body { position: relative; flex: 1 1 auto; padding: var(--bs-modal-padding); } .modal-footer { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5); background-color: var(--bs-modal-footer-bg); border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color); border-bottom-right-radius: var(--bs-modal-inner-border-radius); border-bottom-left-radius: var(--bs-modal-inner-border-radius); } .modal-footer > * { margin: calc(var(--bs-modal-footer-gap) * 0.5); } @media (min-width: 576px) { .modal { --bs-modal-margin: 1.75rem; --bs-modal-box-shadow: var(--bs-box-shadow); } .modal-dialog { max-width: var(--bs-modal-width); margin-right: auto; margin-left: auto; } .modal-sm { --bs-modal-width: 300px; } } @media (min-width: 992px) { .modal-lg, .modal-xl { --bs-modal-width: 800px; } } @media (min-width: 1280px) { .modal-xl { --bs-modal-width: 1140px; } } .modal-fullscreen { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen .modal-header, .modal-fullscreen .modal-footer { border-radius: 0; } .modal-fullscreen .modal-body { overflow-y: auto; } @media (max-width: 575.98px) { .modal-fullscreen-sm-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-sm-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-sm-down .modal-header, .modal-fullscreen-sm-down .modal-footer { border-radius: 0; } .modal-fullscreen-sm-down .modal-body { overflow-y: auto; } } @media (max-width: 575.98px) { .modal-fullscreen-md-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-md-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-md-down .modal-header, .modal-fullscreen-md-down .modal-footer { border-radius: 0; } .modal-fullscreen-md-down .modal-body { overflow-y: auto; } } @media (max-width: 991.98px) { .modal-fullscreen-lg-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-lg-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-lg-down .modal-header, .modal-fullscreen-lg-down .modal-footer { border-radius: 0; } .modal-fullscreen-lg-down .modal-body { overflow-y: auto; } } @media (max-width: 1279.98px) { .modal-fullscreen-xl-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-xl-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-xl-down .modal-header, .modal-fullscreen-xl-down .modal-footer { border-radius: 0; } .modal-fullscreen-xl-down .modal-body { overflow-y: auto; } } @media (max-width: 1511.98px) { .modal-fullscreen-xxl-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-xxl-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-xxl-down .modal-header, .modal-fullscreen-xxl-down .modal-footer { border-radius: 0; } .modal-fullscreen-xxl-down .modal-body { overflow-y: auto; } } .fade { transition: opacity 0.15s linear; } @media (prefers-reduced-motion: reduce) { .fade { transition: none; } } .fade:not(.show) { opacity: 0; } .collapse:not(.show) { display: none; } .collapsing { height: 0; overflow: hidden; transition: height 0.35s ease; } @media (prefers-reduced-motion: reduce) { .collapsing { transition: none; } } .collapsing.collapse-horizontal { width: 0; height: auto; transition: width 0.35s ease; } @media (prefers-reduced-motion: reduce) { .collapsing.collapse-horizontal { transition: none; } } .clearfix::after { display: block; clear: both; content: ""; } .text-bg-primary { color: #FFFFFF !important; background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-secondary { color: #141414 !important; background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-success { color: #FFFFFF !important; background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-info { color: #FFFFFF !important; background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-warning { color: #141414 !important; background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-danger { color: #141414 !important; background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-light { color: #141414 !important; background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-dark { color: #FFFFFF !important; background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; } .link-primary { color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-primary:hover, .link-primary:focus { color: RGBA(118, 73, 227, var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(118, 73, 227, var(--bs-link-underline-opacity, 1)) !important; } .link-secondary { color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-secondary:hover, .link-secondary:focus { color: RGBA(230, 234, 240, var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(230, 234, 240, var(--bs-link-underline-opacity, 1)) !important; } .link-success { color: RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-success:hover, .link-success:focus { color: RGBA(7, 129, 57, var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(7, 129, 57, var(--bs-link-underline-opacity, 1)) !important; } .link-info { color: RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-info:hover, .link-info:focus { color: RGBA(10, 77, 192, var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(10, 77, 192, var(--bs-link-underline-opacity, 1)) !important; } .link-warning { color: RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-warning:hover, .link-warning:focus { color: RGBA(212, 192, 45, var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(212, 192, 45, var(--bs-link-underline-opacity, 1)) !important; } .link-danger { color: RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-danger:hover, .link-danger:focus { color: RGBA(220, 70, 111, var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(220, 70, 111, var(--bs-link-underline-opacity, 1)) !important; } .link-light { color: RGBA(var(--bs-light-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-light:hover, .link-light:focus { color: RGBA(255, 255, 255, var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(255, 255, 255, var(--bs-link-underline-opacity, 1)) !important; } .link-dark { color: RGBA(var(--bs-dark-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-dark:hover, .link-dark:focus { color: RGBA(17, 17, 18, var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(17, 17, 18, var(--bs-link-underline-opacity, 1)) !important; } .link-body-emphasis { color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-body-emphasis:hover, .link-body-emphasis:focus { color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 0.75)) !important; text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important; } .focus-ring:focus { outline: 0; box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color); } .icon-link { display: inline-flex; gap: 0.375rem; align-items: center; text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5)); text-underline-offset: 0.25em; backface-visibility: hidden; } .icon-link > .bi { flex-shrink: 0; width: 1em; height: 1em; fill: currentcolor; transition: 0.2s ease-in-out transform; } @media (prefers-reduced-motion: reduce) { .icon-link > .bi { transition: none; } } .icon-link-hover:hover > .bi, .icon-link-hover:focus-visible > .bi { transform: var(--bs-icon-link-transform, translate3d(0.25em, 0, 0)); } .ratio { position: relative; width: 100%; } .ratio::before { display: block; padding-top: var(--bs-aspect-ratio); content: ""; } .ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ratio-1x1 { --bs-aspect-ratio: 100%; } .ratio-4x3 { --bs-aspect-ratio: 75%; } .ratio-16x9 { --bs-aspect-ratio: 56.25%; } .ratio-21x9 { --bs-aspect-ratio: 42.8571428571%; } .fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } .fixed-bottom { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1030; } .sticky-top { position: sticky; top: 0; z-index: 1020; } .sticky-bottom { position: sticky; bottom: 0; z-index: 1020; } @media (min-width: 576px) { .sticky-sm-top { position: sticky; top: 0; z-index: 1020; } .sticky-sm-bottom { position: sticky; bottom: 0; z-index: 1020; } } @media (min-width: 576px) { .sticky-md-top { position: sticky; top: 0; z-index: 1020; } .sticky-md-bottom { position: sticky; bottom: 0; z-index: 1020; } } @media (min-width: 992px) { .sticky-lg-top { position: sticky; top: 0; z-index: 1020; } .sticky-lg-bottom { position: sticky; bottom: 0; z-index: 1020; } } @media (min-width: 1280px) { .sticky-xl-top { position: sticky; top: 0; z-index: 1020; } .sticky-xl-bottom { position: sticky; bottom: 0; z-index: 1020; } } @media (min-width: 1512px) { .sticky-xxl-top { position: sticky; top: 0; z-index: 1020; } .sticky-xxl-bottom { position: sticky; bottom: 0; z-index: 1020; } } .hstack { display: flex; flex-direction: row; align-items: center; align-self: stretch; } .vstack { display: flex; flex: 1 1 auto; flex-direction: column; align-self: stretch; } .visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) { width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .visually-hidden:not(caption), .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) { position: absolute !important; } .visually-hidden *, .visually-hidden-focusable:not(:focus):not(:focus-within) * { overflow: hidden !important; } .stretched-link::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vr { display: inline-block; align-self: stretch; width: var(--bs-border-width); min-height: 1em; background-color: currentcolor; opacity: 0.25; } .align-baseline { vertical-align: baseline !important; } .align-top { vertical-align: top !important; } .align-middle { vertical-align: middle !important; } .align-bottom { vertical-align: bottom !important; } .align-text-bottom { vertical-align: text-bottom !important; } .align-text-top { vertical-align: text-top !important; } .float-start { float: left !important; } .float-end { float: right !important; } .float-none { float: none !important; } .object-fit-contain { object-fit: contain !important; } .object-fit-cover { object-fit: cover !important; } .object-fit-fill { object-fit: fill !important; } .object-fit-scale { object-fit: scale-down !important; } .object-fit-none { object-fit: none !important; } .opacity-0 { opacity: 0 !important; } .opacity-25 { opacity: 0.25 !important; } .opacity-50 { opacity: 0.5 !important; } .opacity-75 { opacity: 0.75 !important; } .opacity-100 { opacity: 1 !important; } .overflow-auto { overflow: auto !important; } .overflow-hidden { overflow: hidden !important; } .overflow-visible { overflow: visible !important; } .overflow-scroll { overflow: scroll !important; } .overflow-x-auto { overflow-x: auto !important; } .overflow-x-hidden { overflow-x: hidden !important; } .overflow-x-visible { overflow-x: visible !important; } .overflow-x-scroll { overflow-x: scroll !important; } .overflow-y-auto { overflow-y: auto !important; } .overflow-y-hidden { overflow-y: hidden !important; } .overflow-y-visible { overflow-y: visible !important; } .overflow-y-scroll { overflow-y: scroll !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-block { display: block !important; } .d-grid { display: grid !important; } .d-inline-grid { display: inline-grid !important; } .d-table { display: table !important; } .d-table-row { display: table-row !important; } .d-table-cell { display: table-cell !important; } .d-flex, .bds-logo-square-grid__text, .bds-logo-square-grid__header, .bds-logo-square-grid, .bds-callout-media-banner__text, .bds-callout-media-banner__content, .bds-callout-media-banner > [class*=bds-grid__col], .bds-callout-media-banner, .bds-button-group { display: flex !important; } .d-inline-flex { display: inline-flex !important; } .d-none { display: none !important; } .shadow { box-shadow: var(--bs-box-shadow) !important; } .shadow-sm { box-shadow: var(--bs-box-shadow-sm) !important; } .shadow-lg { box-shadow: var(--bs-box-shadow-lg) !important; } .shadow-none { box-shadow: none !important; } .focus-ring-primary { --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity)); } .focus-ring-secondary { --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity)); } .focus-ring-success { --bs-focus-ring-color: rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity)); } .focus-ring-info { --bs-focus-ring-color: rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity)); } .focus-ring-warning { --bs-focus-ring-color: rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity)); } .focus-ring-danger { --bs-focus-ring-color: rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity)); } .focus-ring-light { --bs-focus-ring-color: rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity)); } .focus-ring-dark { --bs-focus-ring-color: rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity)); } .position-static { position: static !important; } .position-relative, .bds-callout-media-banner__content, .bds-callout-media-banner { position: relative !important; } .position-absolute, .bds-callout-media-banner--image::before { position: absolute !important; } .position-fixed { position: fixed !important; } .position-sticky { position: sticky !important; } .top-0 { top: 0 !important; } .top-50 { top: 50% !important; } .top-100 { top: 100% !important; } .bottom-0 { bottom: 0 !important; } .bottom-50 { bottom: 50% !important; } .bottom-100 { bottom: 100% !important; } .start-0 { left: 0 !important; } .start-50 { left: 50% !important; } .start-100 { left: 100% !important; } .end-0 { right: 0 !important; } .end-50 { right: 50% !important; } .end-100 { right: 100% !important; } .translate-middle { transform: translate(-50%, -50%) !important; } .translate-middle-x { transform: translateX(-50%) !important; } .translate-middle-y { transform: translateY(-50%) !important; } .border { border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-0 { border: 0 !important; } .border-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-top-0 { border-top: 0 !important; } .border-end { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-end-0 { border-right: 0 !important; } .border-bottom { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-bottom-0 { border-bottom: 0 !important; } .border-start { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-start-0 { border-left: 0 !important; } .border-primary { --bs-border-opacity: 1; border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important; } .border-secondary { --bs-border-opacity: 1; border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important; } .border-success { --bs-border-opacity: 1; border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important; } .border-info { --bs-border-opacity: 1; border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important; } .border-warning { --bs-border-opacity: 1; border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important; } .border-danger { --bs-border-opacity: 1; border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important; } .border-light { --bs-border-opacity: 1; border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important; } .border-dark { --bs-border-opacity: 1; border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important; } .border-black { --bs-border-opacity: 1; border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important; } .border-white { --bs-border-opacity: 1; border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important; } .border-primary-subtle { border-color: var(--bs-primary-border-subtle) !important; } .border-secondary-subtle { border-color: var(--bs-secondary-border-subtle) !important; } .border-success-subtle { border-color: var(--bs-success-border-subtle) !important; } .border-info-subtle { border-color: var(--bs-info-border-subtle) !important; } .border-warning-subtle { border-color: var(--bs-warning-border-subtle) !important; } .border-danger-subtle { border-color: var(--bs-danger-border-subtle) !important; } .border-light-subtle { border-color: var(--bs-light-border-subtle) !important; } .border-dark-subtle { border-color: var(--bs-dark-border-subtle) !important; } .border-1 { border-width: 1px !important; } .border-2 { border-width: 2px !important; } .border-3 { border-width: 3px !important; } .border-4 { border-width: 4px !important; } .border-5 { border-width: 5px !important; } .border-opacity-10 { --bs-border-opacity: 0.1; } .border-opacity-25 { --bs-border-opacity: 0.25; } .border-opacity-50 { --bs-border-opacity: 0.5; } .border-opacity-75 { --bs-border-opacity: 0.75; } .border-opacity-100 { --bs-border-opacity: 1; } .w-25 { width: 25% !important; } .w-50 { width: 50% !important; } .w-75 { width: 75% !important; } .w-100, .bds-logo-square-grid, .bds-callout-media-banner__content, .bds-callout-media-banner { width: 100% !important; } .w-auto { width: auto !important; } .mw-100 { max-width: 100% !important; } .vw-100 { width: 100vw !important; } .min-vw-100 { min-width: 100vw !important; } .h-25 { height: 25% !important; } .h-50 { height: 50% !important; } .h-75 { height: 75% !important; } .h-100, .bds-callout-media-banner__content { height: 100% !important; } .h-auto { height: auto !important; } .mh-100 { max-height: 100% !important; } .vh-100 { height: 100vh !important; } .min-vh-100 { min-height: 100vh !important; } .flex-fill { flex: 1 1 auto !important; } .flex-row, .bds-callout-media-banner { flex-direction: row !important; } .flex-column, .bds-logo-square-grid__text, .bds-logo-square-grid__header, .bds-logo-square-grid, .bds-callout-media-banner__text, .bds-callout-media-banner__content, .bds-callout-media-banner > [class*=bds-grid__col], .bds-button-group { flex-direction: column !important; } .flex-row-reverse { flex-direction: row-reverse !important; } .flex-column-reverse { flex-direction: column-reverse !important; } .flex-grow-0 { flex-grow: 0 !important; } .flex-grow-1 { flex-grow: 1 !important; } .flex-shrink-0 { flex-shrink: 0 !important; } .flex-shrink-1 { flex-shrink: 1 !important; } .flex-wrap, .bds-button-group { flex-wrap: wrap !important; } .flex-nowrap { flex-wrap: nowrap !important; } .flex-wrap-reverse { flex-wrap: wrap-reverse !important; } .justify-content-start { justify-content: flex-start !important; } .justify-content-end { justify-content: flex-end !important; } .justify-content-center { justify-content: center !important; } .justify-content-between, .bds-callout-media-banner__content { justify-content: space-between !important; } .justify-content-around { justify-content: space-around !important; } .justify-content-evenly { justify-content: space-evenly !important; } .align-items-start, .bds-button-group { align-items: flex-start !important; } .align-items-end { align-items: flex-end !important; } .align-items-center { align-items: center !important; } .align-items-baseline { align-items: baseline !important; } .align-items-stretch, .bds-callout-media-banner { align-items: stretch !important; } .align-content-start { align-content: flex-start !important; } .align-content-end { align-content: flex-end !important; } .align-content-center { align-content: center !important; } .align-content-between { align-content: space-between !important; } .align-content-around { align-content: space-around !important; } .align-content-stretch { align-content: stretch !important; } .align-self-auto { align-self: auto !important; } .align-self-start { align-self: flex-start !important; } .align-self-end { align-self: flex-end !important; } .align-self-center { align-self: center !important; } .align-self-baseline { align-self: baseline !important; } .align-self-stretch { align-self: stretch !important; } .order-first { order: -1 !important; } .order-0 { order: 0 !important; } .order-1 { order: 1 !important; } .order-2 { order: 2 !important; } .order-3 { order: 3 !important; } .order-4 { order: 4 !important; } .order-5 { order: 5 !important; } .order-last { order: 6 !important; } .m-0 { margin: 0 !important; } .m-1 { margin: 0.125rem !important; } .m-2 { margin: 0.25rem !important; } .m-3 { margin: 0.5rem !important; } .m-4 { margin: 0.75rem !important; } .m-5 { margin: 1.5rem !important; } .m-auto { margin: auto !important; } .mx-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-1 { margin-right: 0.125rem !important; margin-left: 0.125rem !important; } .mx-2 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-3 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-4 { margin-right: 0.75rem !important; margin-left: 0.75rem !important; } .mx-5 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-auto { margin-right: auto !important; margin-left: auto !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-1 { margin-top: 0.125rem !important; margin-bottom: 0.125rem !important; } .my-2 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-3 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-4 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; } .my-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 0.125rem !important; } .mt-2 { margin-top: 0.25rem !important; } .mt-3 { margin-top: 0.5rem !important; } .mt-4 { margin-top: 0.75rem !important; } .mt-5 { margin-top: 1.5rem !important; } .mt-auto { margin-top: auto !important; } .me-0 { margin-right: 0 !important; } .me-1 { margin-right: 0.125rem !important; } .me-2 { margin-right: 0.25rem !important; } .me-3 { margin-right: 0.5rem !important; } .me-4 { margin-right: 0.75rem !important; } .me-5 { margin-right: 1.5rem !important; } .me-auto { margin-right: auto !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 0.125rem !important; } .mb-2 { margin-bottom: 0.25rem !important; } .mb-3 { margin-bottom: 0.5rem !important; } .mb-4 { margin-bottom: 0.75rem !important; } .mb-5 { margin-bottom: 1.5rem !important; } .mb-auto { margin-bottom: auto !important; } .ms-0 { margin-left: 0 !important; } .ms-1 { margin-left: 0.125rem !important; } .ms-2 { margin-left: 0.25rem !important; } .ms-3 { margin-left: 0.5rem !important; } .ms-4 { margin-left: 0.75rem !important; } .ms-5 { margin-left: 1.5rem !important; } .ms-auto { margin-left: auto !important; } .p-0 { padding: 0 !important; } .p-1 { padding: 0.125rem !important; } .p-2 { padding: 0.25rem !important; } .p-3 { padding: 0.5rem !important; } .p-4 { padding: 0.75rem !important; } .p-5 { padding: 1.5rem !important; } .px-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-1 { padding-right: 0.125rem !important; padding-left: 0.125rem !important; } .px-2 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-3 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-4 { padding-right: 0.75rem !important; padding-left: 0.75rem !important; } .px-5 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-1 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; } .py-2 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: 0.125rem !important; } .pt-2 { padding-top: 0.25rem !important; } .pt-3 { padding-top: 0.5rem !important; } .pt-4 { padding-top: 0.75rem !important; } .pt-5 { padding-top: 1.5rem !important; } .pe-0 { padding-right: 0 !important; } .pe-1 { padding-right: 0.125rem !important; } .pe-2 { padding-right: 0.25rem !important; } .pe-3 { padding-right: 0.5rem !important; } .pe-4 { padding-right: 0.75rem !important; } .pe-5 { padding-right: 1.5rem !important; } .pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: 0.125rem !important; } .pb-2 { padding-bottom: 0.25rem !important; } .pb-3 { padding-bottom: 0.5rem !important; } .pb-4 { padding-bottom: 0.75rem !important; } .pb-5 { padding-bottom: 1.5rem !important; } .ps-0 { padding-left: 0 !important; } .ps-1 { padding-left: 0.125rem !important; } .ps-2 { padding-left: 0.25rem !important; } .ps-3 { padding-left: 0.5rem !important; } .ps-4 { padding-left: 0.75rem !important; } .ps-5 { padding-left: 1.5rem !important; } .gap-0 { gap: 0 !important; } .gap-1 { gap: 0.125rem !important; } .gap-2 { gap: 0.25rem !important; } .gap-3 { gap: 0.5rem !important; } .gap-4 { gap: 0.75rem !important; } .gap-5 { gap: 1.5rem !important; } .row-gap-0 { row-gap: 0 !important; } .row-gap-1 { row-gap: 0.125rem !important; } .row-gap-2 { row-gap: 0.25rem !important; } .row-gap-3 { row-gap: 0.5rem !important; } .row-gap-4 { row-gap: 0.75rem !important; } .row-gap-5 { row-gap: 1.5rem !important; } .column-gap-0 { column-gap: 0 !important; } .column-gap-1 { column-gap: 0.125rem !important; } .column-gap-2 { column-gap: 0.25rem !important; } .column-gap-3 { column-gap: 0.5rem !important; } .column-gap-4 { column-gap: 0.75rem !important; } .column-gap-5 { column-gap: 1.5rem !important; } .font-monospace { font-family: var(--bs-font-monospace) !important; } .fs-1 { font-size: calc(1.375rem + 1.5vw) !important; } .fs-2 { font-size: calc(1.325rem + 0.9vw) !important; } .fs-3 { font-size: calc(1.3rem + 0.6vw) !important; } .fs-4 { font-size: calc(1.275rem + 0.3vw) !important; } .fs-5 { font-size: 1.25rem !important; } .fs-6 { font-size: 1rem !important; } .fst-italic { font-style: italic !important; } .fst-normal { font-style: normal !important; } .fw-lighter { font-weight: lighter !important; } .fw-light { font-weight: 300 !important; } .fw-normal { font-weight: 400 !important; } .fw-medium { font-weight: 500 !important; } .fw-semibold { font-weight: 600 !important; } .fw-bold { font-weight: 700 !important; } .fw-bolder { font-weight: bolder !important; } .lh-1 { line-height: 1 !important; } .lh-sm { line-height: 1.25 !important; } .lh-base { line-height: 1.5 !important; } .lh-lg { line-height: 2 !important; } .text-start { text-align: left !important; } .text-end { text-align: right !important; } .text-center { text-align: center !important; } .text-decoration-none { text-decoration: none !important; } .text-decoration-underline { text-decoration: underline !important; } .text-decoration-line-through { text-decoration: line-through !important; } .text-lowercase { text-transform: lowercase !important; } .text-uppercase { text-transform: uppercase !important; } .text-capitalize { text-transform: capitalize !important; } .text-wrap { white-space: normal !important; } .text-nowrap { white-space: nowrap !important; } /* rtl:begin:remove */ .text-break { word-wrap: break-word !important; word-break: break-word !important; } /* rtl:end:remove */ .text-primary { --bs-text-opacity: 1; color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important; } .text-secondary { --bs-text-opacity: 1; color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important; } .text-success { --bs-text-opacity: 1; color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important; } .text-info { --bs-text-opacity: 1; color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important; } .text-warning { --bs-text-opacity: 1; color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important; } .text-danger { --bs-text-opacity: 1; color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important; } .text-light { --bs-text-opacity: 1; color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important; } .text-dark { --bs-text-opacity: 1; color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important; } .text-black { --bs-text-opacity: 1; color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important; } .text-white { --bs-text-opacity: 1; color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important; } .text-body { --bs-text-opacity: 1; color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important; } .text-muted { --bs-text-opacity: 1; color: var(--bs-secondary-color) !important; } .text-black-50 { --bs-text-opacity: 1; color: rgba(20, 20, 20, 0.5) !important; } .text-white-50 { --bs-text-opacity: 1; color: rgba(255, 255, 255, 0.5) !important; } .text-body-secondary { --bs-text-opacity: 1; color: var(--bs-secondary-color) !important; } .text-body-tertiary { --bs-text-opacity: 1; color: var(--bs-tertiary-color) !important; } .text-body-emphasis { --bs-text-opacity: 1; color: var(--bs-emphasis-color) !important; } .text-reset { --bs-text-opacity: 1; color: inherit !important; } .text-opacity-25 { --bs-text-opacity: 0.25; } .text-opacity-50 { --bs-text-opacity: 0.5; } .text-opacity-75 { --bs-text-opacity: 0.75; } .text-opacity-100 { --bs-text-opacity: 1; } .text-primary-emphasis { color: var(--bs-primary-text-emphasis) !important; } .text-secondary-emphasis { color: var(--bs-secondary-text-emphasis) !important; } .text-success-emphasis { color: var(--bs-success-text-emphasis) !important; } .text-info-emphasis { color: var(--bs-info-text-emphasis) !important; } .text-warning-emphasis { color: var(--bs-warning-text-emphasis) !important; } .text-danger-emphasis { color: var(--bs-danger-text-emphasis) !important; } .text-light-emphasis { color: var(--bs-light-text-emphasis) !important; } .text-dark-emphasis { color: var(--bs-dark-text-emphasis) !important; } .link-opacity-10 { --bs-link-opacity: 0.1; } .link-opacity-10-hover:hover { --bs-link-opacity: 0.1; } .link-opacity-25 { --bs-link-opacity: 0.25; } .link-opacity-25-hover:hover { --bs-link-opacity: 0.25; } .link-opacity-50 { --bs-link-opacity: 0.5; } .link-opacity-50-hover:hover { --bs-link-opacity: 0.5; } .link-opacity-75 { --bs-link-opacity: 0.75; } .link-opacity-75-hover:hover { --bs-link-opacity: 0.75; } .link-opacity-100 { --bs-link-opacity: 1; } .link-opacity-100-hover:hover { --bs-link-opacity: 1; } .link-offset-1 { text-underline-offset: 0.125em !important; } .link-offset-1-hover:hover { text-underline-offset: 0.125em !important; } .link-offset-2 { text-underline-offset: 0.25em !important; } .link-offset-2-hover:hover { text-underline-offset: 0.25em !important; } .link-offset-3 { text-underline-offset: 0.375em !important; } .link-offset-3-hover:hover { text-underline-offset: 0.375em !important; } .link-underline-primary { --bs-link-underline-opacity: 1; text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important; } .link-underline-secondary { --bs-link-underline-opacity: 1; text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important; } .link-underline-success { --bs-link-underline-opacity: 1; text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important; } .link-underline-info { --bs-link-underline-opacity: 1; text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important; } .link-underline-warning { --bs-link-underline-opacity: 1; text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important; } .link-underline-danger { --bs-link-underline-opacity: 1; text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important; } .link-underline-light { --bs-link-underline-opacity: 1; text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important; } .link-underline-dark { --bs-link-underline-opacity: 1; text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important; } .link-underline { --bs-link-underline-opacity: 1; text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-underline-opacity-0 { --bs-link-underline-opacity: 0; } .link-underline-opacity-0-hover:hover { --bs-link-underline-opacity: 0; } .link-underline-opacity-10 { --bs-link-underline-opacity: 0.1; } .link-underline-opacity-10-hover:hover { --bs-link-underline-opacity: 0.1; } .link-underline-opacity-25 { --bs-link-underline-opacity: 0.25; } .link-underline-opacity-25-hover:hover { --bs-link-underline-opacity: 0.25; } .link-underline-opacity-50 { --bs-link-underline-opacity: 0.5; } .link-underline-opacity-50-hover:hover { --bs-link-underline-opacity: 0.5; } .link-underline-opacity-75 { --bs-link-underline-opacity: 0.75; } .link-underline-opacity-75-hover:hover { --bs-link-underline-opacity: 0.75; } .link-underline-opacity-100 { --bs-link-underline-opacity: 1; } .link-underline-opacity-100-hover:hover { --bs-link-underline-opacity: 1; } .bg-primary { --bs-bg-opacity: 1; background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important; } .bg-secondary { --bs-bg-opacity: 1; background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important; } .bg-success { --bs-bg-opacity: 1; background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important; } .bg-info { --bs-bg-opacity: 1; background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important; } .bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; } .bg-danger { --bs-bg-opacity: 1; background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important; } .bg-light { --bs-bg-opacity: 1; background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important; } .bg-dark { --bs-bg-opacity: 1; background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important; } .bg-black { --bs-bg-opacity: 1; background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important; } .bg-white { --bs-bg-opacity: 1; background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important; } .bg-body { --bs-bg-opacity: 1; background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important; } .bg-transparent { --bs-bg-opacity: 1; background-color: transparent !important; } .bg-body-secondary { --bs-bg-opacity: 1; background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important; } .bg-body-tertiary { --bs-bg-opacity: 1; background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important; } .bg-opacity-10 { --bs-bg-opacity: 0.1; } .bg-opacity-25 { --bs-bg-opacity: 0.25; } .bg-opacity-50 { --bs-bg-opacity: 0.5; } .bg-opacity-75 { --bs-bg-opacity: 0.75; } .bg-opacity-100 { --bs-bg-opacity: 1; } .bg-primary-subtle { background-color: var(--bs-primary-bg-subtle) !important; } .bg-secondary-subtle { background-color: var(--bs-secondary-bg-subtle) !important; } .bg-success-subtle { background-color: var(--bs-success-bg-subtle) !important; } .bg-info-subtle { background-color: var(--bs-info-bg-subtle) !important; } .bg-warning-subtle { background-color: var(--bs-warning-bg-subtle) !important; } .bg-danger-subtle { background-color: var(--bs-danger-bg-subtle) !important; } .bg-light-subtle { background-color: var(--bs-light-bg-subtle) !important; } .bg-dark-subtle { background-color: var(--bs-dark-bg-subtle) !important; } .bg-gradient { background-image: var(--bs-gradient) !important; } .user-select-all { user-select: all !important; } .user-select-auto { user-select: auto !important; } .user-select-none { user-select: none !important; } .pe-none { pointer-events: none !important; } .pe-auto { pointer-events: auto !important; } .rounded { border-radius: var(--bs-border-radius) !important; } .rounded-0 { border-radius: 0 !important; } .rounded-1 { border-radius: var(--bs-border-radius-sm) !important; } .rounded-2 { border-radius: var(--bs-border-radius) !important; } .rounded-3 { border-radius: var(--bs-border-radius-lg) !important; } .rounded-4 { border-radius: var(--bs-border-radius-xl) !important; } .rounded-5 { border-radius: var(--bs-border-radius-xxl) !important; } .rounded-circle { border-radius: 50% !important; } .rounded-pill { border-radius: var(--bs-border-radius-pill) !important; } .rounded-top { border-top-left-radius: var(--bs-border-radius) !important; border-top-right-radius: var(--bs-border-radius) !important; } .rounded-top-0 { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .rounded-top-1 { border-top-left-radius: var(--bs-border-radius-sm) !important; border-top-right-radius: var(--bs-border-radius-sm) !important; } .rounded-top-2 { border-top-left-radius: var(--bs-border-radius) !important; border-top-right-radius: var(--bs-border-radius) !important; } .rounded-top-3 { border-top-left-radius: var(--bs-border-radius-lg) !important; border-top-right-radius: var(--bs-border-radius-lg) !important; } .rounded-top-4 { border-top-left-radius: var(--bs-border-radius-xl) !important; border-top-right-radius: var(--bs-border-radius-xl) !important; } .rounded-top-5 { border-top-left-radius: var(--bs-border-radius-xxl) !important; border-top-right-radius: var(--bs-border-radius-xxl) !important; } .rounded-top-circle { border-top-left-radius: 50% !important; border-top-right-radius: 50% !important; } .rounded-top-pill { border-top-left-radius: var(--bs-border-radius-pill) !important; border-top-right-radius: var(--bs-border-radius-pill) !important; } .rounded-end { border-top-right-radius: var(--bs-border-radius) !important; border-bottom-right-radius: var(--bs-border-radius) !important; } .rounded-end-0 { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .rounded-end-1 { border-top-right-radius: var(--bs-border-radius-sm) !important; border-bottom-right-radius: var(--bs-border-radius-sm) !important; } .rounded-end-2 { border-top-right-radius: var(--bs-border-radius) !important; border-bottom-right-radius: var(--bs-border-radius) !important; } .rounded-end-3 { border-top-right-radius: var(--bs-border-radius-lg) !important; border-bottom-right-radius: var(--bs-border-radius-lg) !important; } .rounded-end-4 { border-top-right-radius: var(--bs-border-radius-xl) !important; border-bottom-right-radius: var(--bs-border-radius-xl) !important; } .rounded-end-5 { border-top-right-radius: var(--bs-border-radius-xxl) !important; border-bottom-right-radius: var(--bs-border-radius-xxl) !important; } .rounded-end-circle { border-top-right-radius: 50% !important; border-bottom-right-radius: 50% !important; } .rounded-end-pill { border-top-right-radius: var(--bs-border-radius-pill) !important; border-bottom-right-radius: var(--bs-border-radius-pill) !important; } .rounded-bottom { border-bottom-right-radius: var(--bs-border-radius) !important; border-bottom-left-radius: var(--bs-border-radius) !important; } .rounded-bottom-0 { border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; } .rounded-bottom-1 { border-bottom-right-radius: var(--bs-border-radius-sm) !important; border-bottom-left-radius: var(--bs-border-radius-sm) !important; } .rounded-bottom-2 { border-bottom-right-radius: var(--bs-border-radius) !important; border-bottom-left-radius: var(--bs-border-radius) !important; } .rounded-bottom-3 { border-bottom-right-radius: var(--bs-border-radius-lg) !important; border-bottom-left-radius: var(--bs-border-radius-lg) !important; } .rounded-bottom-4 { border-bottom-right-radius: var(--bs-border-radius-xl) !important; border-bottom-left-radius: var(--bs-border-radius-xl) !important; } .rounded-bottom-5 { border-bottom-right-radius: var(--bs-border-radius-xxl) !important; border-bottom-left-radius: var(--bs-border-radius-xxl) !important; } .rounded-bottom-circle { border-bottom-right-radius: 50% !important; border-bottom-left-radius: 50% !important; } .rounded-bottom-pill { border-bottom-right-radius: var(--bs-border-radius-pill) !important; border-bottom-left-radius: var(--bs-border-radius-pill) !important; } .rounded-start { border-bottom-left-radius: var(--bs-border-radius) !important; border-top-left-radius: var(--bs-border-radius) !important; } .rounded-start-0 { border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; } .rounded-start-1 { border-bottom-left-radius: var(--bs-border-radius-sm) !important; border-top-left-radius: var(--bs-border-radius-sm) !important; } .rounded-start-2 { border-bottom-left-radius: var(--bs-border-radius) !important; border-top-left-radius: var(--bs-border-radius) !important; } .rounded-start-3 { border-bottom-left-radius: var(--bs-border-radius-lg) !important; border-top-left-radius: var(--bs-border-radius-lg) !important; } .rounded-start-4 { border-bottom-left-radius: var(--bs-border-radius-xl) !important; border-top-left-radius: var(--bs-border-radius-xl) !important; } .rounded-start-5 { border-bottom-left-radius: var(--bs-border-radius-xxl) !important; border-top-left-radius: var(--bs-border-radius-xxl) !important; } .rounded-start-circle { border-bottom-left-radius: 50% !important; border-top-left-radius: 50% !important; } .rounded-start-pill { border-bottom-left-radius: var(--bs-border-radius-pill) !important; border-top-left-radius: var(--bs-border-radius-pill) !important; } .visible { visibility: visible !important; } .invisible { visibility: hidden !important; } .z-n1 { z-index: -1 !important; } .z-0 { z-index: 0 !important; } .z-1 { z-index: 1 !important; } .z-2 { z-index: 2 !important; } .z-3 { z-index: 3 !important; } @media (min-width: 576px) { .float-sm-start { float: left !important; } .float-sm-end { float: right !important; } .float-sm-none { float: none !important; } .object-fit-sm-contain { object-fit: contain !important; } .object-fit-sm-cover { object-fit: cover !important; } .object-fit-sm-fill { object-fit: fill !important; } .object-fit-sm-scale { object-fit: scale-down !important; } .object-fit-sm-none { object-fit: none !important; } .d-sm-inline { display: inline !important; } .d-sm-inline-block { display: inline-block !important; } .d-sm-block { display: block !important; } .d-sm-grid { display: grid !important; } .d-sm-inline-grid { display: inline-grid !important; } .d-sm-table { display: table !important; } .d-sm-table-row { display: table-row !important; } .d-sm-table-cell { display: table-cell !important; } .d-sm-flex { display: flex !important; } .d-sm-inline-flex { display: inline-flex !important; } .d-sm-none { display: none !important; } .flex-sm-fill { flex: 1 1 auto !important; } .flex-sm-row { flex-direction: row !important; } .flex-sm-column { flex-direction: column !important; } .flex-sm-row-reverse { flex-direction: row-reverse !important; } .flex-sm-column-reverse { flex-direction: column-reverse !important; } .flex-sm-grow-0 { flex-grow: 0 !important; } .flex-sm-grow-1 { flex-grow: 1 !important; } .flex-sm-shrink-0 { flex-shrink: 0 !important; } .flex-sm-shrink-1 { flex-shrink: 1 !important; } .flex-sm-wrap { flex-wrap: wrap !important; } .flex-sm-nowrap { flex-wrap: nowrap !important; } .flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; } .justify-content-sm-start { justify-content: flex-start !important; } .justify-content-sm-end { justify-content: flex-end !important; } .justify-content-sm-center { justify-content: center !important; } .justify-content-sm-between { justify-content: space-between !important; } .justify-content-sm-around { justify-content: space-around !important; } .justify-content-sm-evenly { justify-content: space-evenly !important; } .align-items-sm-start { align-items: flex-start !important; } .align-items-sm-end { align-items: flex-end !important; } .align-items-sm-center { align-items: center !important; } .align-items-sm-baseline { align-items: baseline !important; } .align-items-sm-stretch { align-items: stretch !important; } .align-content-sm-start { align-content: flex-start !important; } .align-content-sm-end { align-content: flex-end !important; } .align-content-sm-center { align-content: center !important; } .align-content-sm-between { align-content: space-between !important; } .align-content-sm-around { align-content: space-around !important; } .align-content-sm-stretch { align-content: stretch !important; } .align-self-sm-auto { align-self: auto !important; } .align-self-sm-start { align-self: flex-start !important; } .align-self-sm-end { align-self: flex-end !important; } .align-self-sm-center { align-self: center !important; } .align-self-sm-baseline { align-self: baseline !important; } .align-self-sm-stretch { align-self: stretch !important; } .order-sm-first { order: -1 !important; } .order-sm-0 { order: 0 !important; } .order-sm-1 { order: 1 !important; } .order-sm-2 { order: 2 !important; } .order-sm-3 { order: 3 !important; } .order-sm-4 { order: 4 !important; } .order-sm-5 { order: 5 !important; } .order-sm-last { order: 6 !important; } .m-sm-0 { margin: 0 !important; } .m-sm-1 { margin: 0.125rem !important; } .m-sm-2 { margin: 0.25rem !important; } .m-sm-3 { margin: 0.5rem !important; } .m-sm-4 { margin: 0.75rem !important; } .m-sm-5 { margin: 1.5rem !important; } .m-sm-auto { margin: auto !important; } .mx-sm-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-sm-1 { margin-right: 0.125rem !important; margin-left: 0.125rem !important; } .mx-sm-2 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-sm-3 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-sm-4 { margin-right: 0.75rem !important; margin-left: 0.75rem !important; } .mx-sm-5 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-sm-auto { margin-right: auto !important; margin-left: auto !important; } .my-sm-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-sm-1 { margin-top: 0.125rem !important; margin-bottom: 0.125rem !important; } .my-sm-2 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-sm-3 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-sm-4 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; } .my-sm-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-sm-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-sm-0 { margin-top: 0 !important; } .mt-sm-1 { margin-top: 0.125rem !important; } .mt-sm-2 { margin-top: 0.25rem !important; } .mt-sm-3 { margin-top: 0.5rem !important; } .mt-sm-4 { margin-top: 0.75rem !important; } .mt-sm-5 { margin-top: 1.5rem !important; } .mt-sm-auto { margin-top: auto !important; } .me-sm-0 { margin-right: 0 !important; } .me-sm-1 { margin-right: 0.125rem !important; } .me-sm-2 { margin-right: 0.25rem !important; } .me-sm-3 { margin-right: 0.5rem !important; } .me-sm-4 { margin-right: 0.75rem !important; } .me-sm-5 { margin-right: 1.5rem !important; } .me-sm-auto { margin-right: auto !important; } .mb-sm-0 { margin-bottom: 0 !important; } .mb-sm-1 { margin-bottom: 0.125rem !important; } .mb-sm-2 { margin-bottom: 0.25rem !important; } .mb-sm-3 { margin-bottom: 0.5rem !important; } .mb-sm-4 { margin-bottom: 0.75rem !important; } .mb-sm-5 { margin-bottom: 1.5rem !important; } .mb-sm-auto { margin-bottom: auto !important; } .ms-sm-0 { margin-left: 0 !important; } .ms-sm-1 { margin-left: 0.125rem !important; } .ms-sm-2 { margin-left: 0.25rem !important; } .ms-sm-3 { margin-left: 0.5rem !important; } .ms-sm-4 { margin-left: 0.75rem !important; } .ms-sm-5 { margin-left: 1.5rem !important; } .ms-sm-auto { margin-left: auto !important; } .p-sm-0 { padding: 0 !important; } .p-sm-1 { padding: 0.125rem !important; } .p-sm-2 { padding: 0.25rem !important; } .p-sm-3 { padding: 0.5rem !important; } .p-sm-4 { padding: 0.75rem !important; } .p-sm-5 { padding: 1.5rem !important; } .px-sm-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-sm-1 { padding-right: 0.125rem !important; padding-left: 0.125rem !important; } .px-sm-2 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-sm-3 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-sm-4 { padding-right: 0.75rem !important; padding-left: 0.75rem !important; } .px-sm-5 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .py-sm-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-sm-1 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; } .py-sm-2 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-sm-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-sm-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .py-sm-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .pt-sm-0 { padding-top: 0 !important; } .pt-sm-1 { padding-top: 0.125rem !important; } .pt-sm-2 { padding-top: 0.25rem !important; } .pt-sm-3 { padding-top: 0.5rem !important; } .pt-sm-4 { padding-top: 0.75rem !important; } .pt-sm-5 { padding-top: 1.5rem !important; } .pe-sm-0 { padding-right: 0 !important; } .pe-sm-1 { padding-right: 0.125rem !important; } .pe-sm-2 { padding-right: 0.25rem !important; } .pe-sm-3 { padding-right: 0.5rem !important; } .pe-sm-4 { padding-right: 0.75rem !important; } .pe-sm-5 { padding-right: 1.5rem !important; } .pb-sm-0 { padding-bottom: 0 !important; } .pb-sm-1 { padding-bottom: 0.125rem !important; } .pb-sm-2 { padding-bottom: 0.25rem !important; } .pb-sm-3 { padding-bottom: 0.5rem !important; } .pb-sm-4 { padding-bottom: 0.75rem !important; } .pb-sm-5 { padding-bottom: 1.5rem !important; } .ps-sm-0 { padding-left: 0 !important; } .ps-sm-1 { padding-left: 0.125rem !important; } .ps-sm-2 { padding-left: 0.25rem !important; } .ps-sm-3 { padding-left: 0.5rem !important; } .ps-sm-4 { padding-left: 0.75rem !important; } .ps-sm-5 { padding-left: 1.5rem !important; } .gap-sm-0 { gap: 0 !important; } .gap-sm-1 { gap: 0.125rem !important; } .gap-sm-2 { gap: 0.25rem !important; } .gap-sm-3 { gap: 0.5rem !important; } .gap-sm-4 { gap: 0.75rem !important; } .gap-sm-5 { gap: 1.5rem !important; } .row-gap-sm-0 { row-gap: 0 !important; } .row-gap-sm-1 { row-gap: 0.125rem !important; } .row-gap-sm-2 { row-gap: 0.25rem !important; } .row-gap-sm-3 { row-gap: 0.5rem !important; } .row-gap-sm-4 { row-gap: 0.75rem !important; } .row-gap-sm-5 { row-gap: 1.5rem !important; } .column-gap-sm-0 { column-gap: 0 !important; } .column-gap-sm-1 { column-gap: 0.125rem !important; } .column-gap-sm-2 { column-gap: 0.25rem !important; } .column-gap-sm-3 { column-gap: 0.5rem !important; } .column-gap-sm-4 { column-gap: 0.75rem !important; } .column-gap-sm-5 { column-gap: 1.5rem !important; } .text-sm-start { text-align: left !important; } .text-sm-end { text-align: right !important; } .text-sm-center { text-align: center !important; } } @media (min-width: 576px) { .float-md-start { float: left !important; } .float-md-end { float: right !important; } .float-md-none { float: none !important; } .object-fit-md-contain { object-fit: contain !important; } .object-fit-md-cover { object-fit: cover !important; } .object-fit-md-fill { object-fit: fill !important; } .object-fit-md-scale { object-fit: scale-down !important; } .object-fit-md-none { object-fit: none !important; } .d-md-inline { display: inline !important; } .d-md-inline-block { display: inline-block !important; } .d-md-block { display: block !important; } .d-md-grid { display: grid !important; } .d-md-inline-grid { display: inline-grid !important; } .d-md-table { display: table !important; } .d-md-table-row { display: table-row !important; } .d-md-table-cell { display: table-cell !important; } .d-md-flex { display: flex !important; } .d-md-inline-flex { display: inline-flex !important; } .d-md-none { display: none !important; } .flex-md-fill { flex: 1 1 auto !important; } .flex-md-row { flex-direction: row !important; } .flex-md-column { flex-direction: column !important; } .flex-md-row-reverse { flex-direction: row-reverse !important; } .flex-md-column-reverse { flex-direction: column-reverse !important; } .flex-md-grow-0 { flex-grow: 0 !important; } .flex-md-grow-1 { flex-grow: 1 !important; } .flex-md-shrink-0 { flex-shrink: 0 !important; } .flex-md-shrink-1 { flex-shrink: 1 !important; } .flex-md-wrap { flex-wrap: wrap !important; } .flex-md-nowrap { flex-wrap: nowrap !important; } .flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; } .justify-content-md-start { justify-content: flex-start !important; } .justify-content-md-end { justify-content: flex-end !important; } .justify-content-md-center { justify-content: center !important; } .justify-content-md-between { justify-content: space-between !important; } .justify-content-md-around { justify-content: space-around !important; } .justify-content-md-evenly { justify-content: space-evenly !important; } .align-items-md-start { align-items: flex-start !important; } .align-items-md-end { align-items: flex-end !important; } .align-items-md-center { align-items: center !important; } .align-items-md-baseline { align-items: baseline !important; } .align-items-md-stretch { align-items: stretch !important; } .align-content-md-start { align-content: flex-start !important; } .align-content-md-end { align-content: flex-end !important; } .align-content-md-center { align-content: center !important; } .align-content-md-between { align-content: space-between !important; } .align-content-md-around { align-content: space-around !important; } .align-content-md-stretch { align-content: stretch !important; } .align-self-md-auto { align-self: auto !important; } .align-self-md-start { align-self: flex-start !important; } .align-self-md-end { align-self: flex-end !important; } .align-self-md-center { align-self: center !important; } .align-self-md-baseline { align-self: baseline !important; } .align-self-md-stretch { align-self: stretch !important; } .order-md-first { order: -1 !important; } .order-md-0 { order: 0 !important; } .order-md-1 { order: 1 !important; } .order-md-2 { order: 2 !important; } .order-md-3 { order: 3 !important; } .order-md-4 { order: 4 !important; } .order-md-5 { order: 5 !important; } .order-md-last { order: 6 !important; } .m-md-0 { margin: 0 !important; } .m-md-1 { margin: 0.125rem !important; } .m-md-2 { margin: 0.25rem !important; } .m-md-3 { margin: 0.5rem !important; } .m-md-4 { margin: 0.75rem !important; } .m-md-5 { margin: 1.5rem !important; } .m-md-auto { margin: auto !important; } .mx-md-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-md-1 { margin-right: 0.125rem !important; margin-left: 0.125rem !important; } .mx-md-2 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-md-3 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-md-4 { margin-right: 0.75rem !important; margin-left: 0.75rem !important; } .mx-md-5 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-md-auto { margin-right: auto !important; margin-left: auto !important; } .my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-md-1 { margin-top: 0.125rem !important; margin-bottom: 0.125rem !important; } .my-md-2 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-md-3 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-md-4 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; } .my-md-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-md-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-md-0 { margin-top: 0 !important; } .mt-md-1 { margin-top: 0.125rem !important; } .mt-md-2 { margin-top: 0.25rem !important; } .mt-md-3 { margin-top: 0.5rem !important; } .mt-md-4 { margin-top: 0.75rem !important; } .mt-md-5 { margin-top: 1.5rem !important; } .mt-md-auto { margin-top: auto !important; } .me-md-0 { margin-right: 0 !important; } .me-md-1 { margin-right: 0.125rem !important; } .me-md-2 { margin-right: 0.25rem !important; } .me-md-3 { margin-right: 0.5rem !important; } .me-md-4 { margin-right: 0.75rem !important; } .me-md-5 { margin-right: 1.5rem !important; } .me-md-auto { margin-right: auto !important; } .mb-md-0 { margin-bottom: 0 !important; } .mb-md-1 { margin-bottom: 0.125rem !important; } .mb-md-2 { margin-bottom: 0.25rem !important; } .mb-md-3 { margin-bottom: 0.5rem !important; } .mb-md-4 { margin-bottom: 0.75rem !important; } .mb-md-5 { margin-bottom: 1.5rem !important; } .mb-md-auto { margin-bottom: auto !important; } .ms-md-0 { margin-left: 0 !important; } .ms-md-1 { margin-left: 0.125rem !important; } .ms-md-2 { margin-left: 0.25rem !important; } .ms-md-3 { margin-left: 0.5rem !important; } .ms-md-4 { margin-left: 0.75rem !important; } .ms-md-5 { margin-left: 1.5rem !important; } .ms-md-auto { margin-left: auto !important; } .p-md-0 { padding: 0 !important; } .p-md-1 { padding: 0.125rem !important; } .p-md-2 { padding: 0.25rem !important; } .p-md-3 { padding: 0.5rem !important; } .p-md-4 { padding: 0.75rem !important; } .p-md-5 { padding: 1.5rem !important; } .px-md-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-md-1 { padding-right: 0.125rem !important; padding-left: 0.125rem !important; } .px-md-2 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-md-3 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-md-4 { padding-right: 0.75rem !important; padding-left: 0.75rem !important; } .px-md-5 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-md-1 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; } .py-md-2 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-md-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-md-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .py-md-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .pt-md-0 { padding-top: 0 !important; } .pt-md-1 { padding-top: 0.125rem !important; } .pt-md-2 { padding-top: 0.25rem !important; } .pt-md-3 { padding-top: 0.5rem !important; } .pt-md-4 { padding-top: 0.75rem !important; } .pt-md-5 { padding-top: 1.5rem !important; } .pe-md-0 { padding-right: 0 !important; } .pe-md-1 { padding-right: 0.125rem !important; } .pe-md-2 { padding-right: 0.25rem !important; } .pe-md-3 { padding-right: 0.5rem !important; } .pe-md-4 { padding-right: 0.75rem !important; } .pe-md-5 { padding-right: 1.5rem !important; } .pb-md-0 { padding-bottom: 0 !important; } .pb-md-1 { padding-bottom: 0.125rem !important; } .pb-md-2 { padding-bottom: 0.25rem !important; } .pb-md-3 { padding-bottom: 0.5rem !important; } .pb-md-4 { padding-bottom: 0.75rem !important; } .pb-md-5 { padding-bottom: 1.5rem !important; } .ps-md-0 { padding-left: 0 !important; } .ps-md-1 { padding-left: 0.125rem !important; } .ps-md-2 { padding-left: 0.25rem !important; } .ps-md-3 { padding-left: 0.5rem !important; } .ps-md-4 { padding-left: 0.75rem !important; } .ps-md-5 { padding-left: 1.5rem !important; } .gap-md-0 { gap: 0 !important; } .gap-md-1 { gap: 0.125rem !important; } .gap-md-2 { gap: 0.25rem !important; } .gap-md-3 { gap: 0.5rem !important; } .gap-md-4 { gap: 0.75rem !important; } .gap-md-5 { gap: 1.5rem !important; } .row-gap-md-0 { row-gap: 0 !important; } .row-gap-md-1 { row-gap: 0.125rem !important; } .row-gap-md-2 { row-gap: 0.25rem !important; } .row-gap-md-3 { row-gap: 0.5rem !important; } .row-gap-md-4 { row-gap: 0.75rem !important; } .row-gap-md-5 { row-gap: 1.5rem !important; } .column-gap-md-0 { column-gap: 0 !important; } .column-gap-md-1 { column-gap: 0.125rem !important; } .column-gap-md-2 { column-gap: 0.25rem !important; } .column-gap-md-3 { column-gap: 0.5rem !important; } .column-gap-md-4 { column-gap: 0.75rem !important; } .column-gap-md-5 { column-gap: 1.5rem !important; } .text-md-start { text-align: left !important; } .text-md-end { text-align: right !important; } .text-md-center { text-align: center !important; } } @media (min-width: 992px) { .float-lg-start { float: left !important; } .float-lg-end { float: right !important; } .float-lg-none { float: none !important; } .object-fit-lg-contain { object-fit: contain !important; } .object-fit-lg-cover { object-fit: cover !important; } .object-fit-lg-fill { object-fit: fill !important; } .object-fit-lg-scale { object-fit: scale-down !important; } .object-fit-lg-none { object-fit: none !important; } .d-lg-inline { display: inline !important; } .d-lg-inline-block { display: inline-block !important; } .d-lg-block { display: block !important; } .d-lg-grid { display: grid !important; } .d-lg-inline-grid { display: inline-grid !important; } .d-lg-table { display: table !important; } .d-lg-table-row { display: table-row !important; } .d-lg-table-cell { display: table-cell !important; } .d-lg-flex { display: flex !important; } .d-lg-inline-flex { display: inline-flex !important; } .d-lg-none { display: none !important; } .flex-lg-fill { flex: 1 1 auto !important; } .flex-lg-row { flex-direction: row !important; } .flex-lg-column { flex-direction: column !important; } .flex-lg-row-reverse { flex-direction: row-reverse !important; } .flex-lg-column-reverse { flex-direction: column-reverse !important; } .flex-lg-grow-0 { flex-grow: 0 !important; } .flex-lg-grow-1 { flex-grow: 1 !important; } .flex-lg-shrink-0 { flex-shrink: 0 !important; } .flex-lg-shrink-1 { flex-shrink: 1 !important; } .flex-lg-wrap { flex-wrap: wrap !important; } .flex-lg-nowrap { flex-wrap: nowrap !important; } .flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; } .justify-content-lg-start { justify-content: flex-start !important; } .justify-content-lg-end { justify-content: flex-end !important; } .justify-content-lg-center { justify-content: center !important; } .justify-content-lg-between { justify-content: space-between !important; } .justify-content-lg-around { justify-content: space-around !important; } .justify-content-lg-evenly { justify-content: space-evenly !important; } .align-items-lg-start { align-items: flex-start !important; } .align-items-lg-end { align-items: flex-end !important; } .align-items-lg-center { align-items: center !important; } .align-items-lg-baseline { align-items: baseline !important; } .align-items-lg-stretch { align-items: stretch !important; } .align-content-lg-start { align-content: flex-start !important; } .align-content-lg-end { align-content: flex-end !important; } .align-content-lg-center { align-content: center !important; } .align-content-lg-between { align-content: space-between !important; } .align-content-lg-around { align-content: space-around !important; } .align-content-lg-stretch { align-content: stretch !important; } .align-self-lg-auto { align-self: auto !important; } .align-self-lg-start { align-self: flex-start !important; } .align-self-lg-end { align-self: flex-end !important; } .align-self-lg-center { align-self: center !important; } .align-self-lg-baseline { align-self: baseline !important; } .align-self-lg-stretch { align-self: stretch !important; } .order-lg-first { order: -1 !important; } .order-lg-0 { order: 0 !important; } .order-lg-1 { order: 1 !important; } .order-lg-2 { order: 2 !important; } .order-lg-3 { order: 3 !important; } .order-lg-4 { order: 4 !important; } .order-lg-5 { order: 5 !important; } .order-lg-last { order: 6 !important; } .m-lg-0 { margin: 0 !important; } .m-lg-1 { margin: 0.125rem !important; } .m-lg-2 { margin: 0.25rem !important; } .m-lg-3 { margin: 0.5rem !important; } .m-lg-4 { margin: 0.75rem !important; } .m-lg-5 { margin: 1.5rem !important; } .m-lg-auto { margin: auto !important; } .mx-lg-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-lg-1 { margin-right: 0.125rem !important; margin-left: 0.125rem !important; } .mx-lg-2 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-lg-3 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-lg-4 { margin-right: 0.75rem !important; margin-left: 0.75rem !important; } .mx-lg-5 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-lg-auto { margin-right: auto !important; margin-left: auto !important; } .my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-lg-1 { margin-top: 0.125rem !important; margin-bottom: 0.125rem !important; } .my-lg-2 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-lg-3 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-lg-4 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; } .my-lg-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-lg-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-lg-0 { margin-top: 0 !important; } .mt-lg-1 { margin-top: 0.125rem !important; } .mt-lg-2 { margin-top: 0.25rem !important; } .mt-lg-3 { margin-top: 0.5rem !important; } .mt-lg-4 { margin-top: 0.75rem !important; } .mt-lg-5 { margin-top: 1.5rem !important; } .mt-lg-auto { margin-top: auto !important; } .me-lg-0 { margin-right: 0 !important; } .me-lg-1 { margin-right: 0.125rem !important; } .me-lg-2 { margin-right: 0.25rem !important; } .me-lg-3 { margin-right: 0.5rem !important; } .me-lg-4 { margin-right: 0.75rem !important; } .me-lg-5 { margin-right: 1.5rem !important; } .me-lg-auto { margin-right: auto !important; } .mb-lg-0 { margin-bottom: 0 !important; } .mb-lg-1 { margin-bottom: 0.125rem !important; } .mb-lg-2 { margin-bottom: 0.25rem !important; } .mb-lg-3 { margin-bottom: 0.5rem !important; } .mb-lg-4 { margin-bottom: 0.75rem !important; } .mb-lg-5 { margin-bottom: 1.5rem !important; } .mb-lg-auto { margin-bottom: auto !important; } .ms-lg-0 { margin-left: 0 !important; } .ms-lg-1 { margin-left: 0.125rem !important; } .ms-lg-2 { margin-left: 0.25rem !important; } .ms-lg-3 { margin-left: 0.5rem !important; } .ms-lg-4 { margin-left: 0.75rem !important; } .ms-lg-5 { margin-left: 1.5rem !important; } .ms-lg-auto { margin-left: auto !important; } .p-lg-0 { padding: 0 !important; } .p-lg-1 { padding: 0.125rem !important; } .p-lg-2 { padding: 0.25rem !important; } .p-lg-3 { padding: 0.5rem !important; } .p-lg-4 { padding: 0.75rem !important; } .p-lg-5 { padding: 1.5rem !important; } .px-lg-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-lg-1 { padding-right: 0.125rem !important; padding-left: 0.125rem !important; } .px-lg-2 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-lg-3 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-lg-4 { padding-right: 0.75rem !important; padding-left: 0.75rem !important; } .px-lg-5 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-lg-1 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; } .py-lg-2 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-lg-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-lg-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .py-lg-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .pt-lg-0 { padding-top: 0 !important; } .pt-lg-1 { padding-top: 0.125rem !important; } .pt-lg-2 { padding-top: 0.25rem !important; } .pt-lg-3 { padding-top: 0.5rem !important; } .pt-lg-4 { padding-top: 0.75rem !important; } .pt-lg-5 { padding-top: 1.5rem !important; } .pe-lg-0 { padding-right: 0 !important; } .pe-lg-1 { padding-right: 0.125rem !important; } .pe-lg-2 { padding-right: 0.25rem !important; } .pe-lg-3 { padding-right: 0.5rem !important; } .pe-lg-4 { padding-right: 0.75rem !important; } .pe-lg-5 { padding-right: 1.5rem !important; } .pb-lg-0 { padding-bottom: 0 !important; } .pb-lg-1 { padding-bottom: 0.125rem !important; } .pb-lg-2 { padding-bottom: 0.25rem !important; } .pb-lg-3 { padding-bottom: 0.5rem !important; } .pb-lg-4 { padding-bottom: 0.75rem !important; } .pb-lg-5 { padding-bottom: 1.5rem !important; } .ps-lg-0 { padding-left: 0 !important; } .ps-lg-1 { padding-left: 0.125rem !important; } .ps-lg-2 { padding-left: 0.25rem !important; } .ps-lg-3 { padding-left: 0.5rem !important; } .ps-lg-4 { padding-left: 0.75rem !important; } .ps-lg-5 { padding-left: 1.5rem !important; } .gap-lg-0 { gap: 0 !important; } .gap-lg-1 { gap: 0.125rem !important; } .gap-lg-2 { gap: 0.25rem !important; } .gap-lg-3 { gap: 0.5rem !important; } .gap-lg-4 { gap: 0.75rem !important; } .gap-lg-5 { gap: 1.5rem !important; } .row-gap-lg-0 { row-gap: 0 !important; } .row-gap-lg-1 { row-gap: 0.125rem !important; } .row-gap-lg-2 { row-gap: 0.25rem !important; } .row-gap-lg-3 { row-gap: 0.5rem !important; } .row-gap-lg-4 { row-gap: 0.75rem !important; } .row-gap-lg-5 { row-gap: 1.5rem !important; } .column-gap-lg-0 { column-gap: 0 !important; } .column-gap-lg-1 { column-gap: 0.125rem !important; } .column-gap-lg-2 { column-gap: 0.25rem !important; } .column-gap-lg-3 { column-gap: 0.5rem !important; } .column-gap-lg-4 { column-gap: 0.75rem !important; } .column-gap-lg-5 { column-gap: 1.5rem !important; } .text-lg-start { text-align: left !important; } .text-lg-end { text-align: right !important; } .text-lg-center { text-align: center !important; } } @media (min-width: 1280px) { .float-xl-start { float: left !important; } .float-xl-end { float: right !important; } .float-xl-none { float: none !important; } .object-fit-xl-contain { object-fit: contain !important; } .object-fit-xl-cover { object-fit: cover !important; } .object-fit-xl-fill { object-fit: fill !important; } .object-fit-xl-scale { object-fit: scale-down !important; } .object-fit-xl-none { object-fit: none !important; } .d-xl-inline { display: inline !important; } .d-xl-inline-block { display: inline-block !important; } .d-xl-block { display: block !important; } .d-xl-grid { display: grid !important; } .d-xl-inline-grid { display: inline-grid !important; } .d-xl-table { display: table !important; } .d-xl-table-row { display: table-row !important; } .d-xl-table-cell { display: table-cell !important; } .d-xl-flex { display: flex !important; } .d-xl-inline-flex { display: inline-flex !important; } .d-xl-none { display: none !important; } .flex-xl-fill { flex: 1 1 auto !important; } .flex-xl-row { flex-direction: row !important; } .flex-xl-column { flex-direction: column !important; } .flex-xl-row-reverse { flex-direction: row-reverse !important; } .flex-xl-column-reverse { flex-direction: column-reverse !important; } .flex-xl-grow-0 { flex-grow: 0 !important; } .flex-xl-grow-1 { flex-grow: 1 !important; } .flex-xl-shrink-0 { flex-shrink: 0 !important; } .flex-xl-shrink-1 { flex-shrink: 1 !important; } .flex-xl-wrap { flex-wrap: wrap !important; } .flex-xl-nowrap { flex-wrap: nowrap !important; } .flex-xl-wrap-reverse { flex-wrap: wrap-reverse !important; } .justify-content-xl-start { justify-content: flex-start !important; } .justify-content-xl-end { justify-content: flex-end !important; } .justify-content-xl-center { justify-content: center !important; } .justify-content-xl-between { justify-content: space-between !important; } .justify-content-xl-around { justify-content: space-around !important; } .justify-content-xl-evenly { justify-content: space-evenly !important; } .align-items-xl-start { align-items: flex-start !important; } .align-items-xl-end { align-items: flex-end !important; } .align-items-xl-center { align-items: center !important; } .align-items-xl-baseline { align-items: baseline !important; } .align-items-xl-stretch { align-items: stretch !important; } .align-content-xl-start { align-content: flex-start !important; } .align-content-xl-end { align-content: flex-end !important; } .align-content-xl-center { align-content: center !important; } .align-content-xl-between { align-content: space-between !important; } .align-content-xl-around { align-content: space-around !important; } .align-content-xl-stretch { align-content: stretch !important; } .align-self-xl-auto { align-self: auto !important; } .align-self-xl-start { align-self: flex-start !important; } .align-self-xl-end { align-self: flex-end !important; } .align-self-xl-center { align-self: center !important; } .align-self-xl-baseline { align-self: baseline !important; } .align-self-xl-stretch { align-self: stretch !important; } .order-xl-first { order: -1 !important; } .order-xl-0 { order: 0 !important; } .order-xl-1 { order: 1 !important; } .order-xl-2 { order: 2 !important; } .order-xl-3 { order: 3 !important; } .order-xl-4 { order: 4 !important; } .order-xl-5 { order: 5 !important; } .order-xl-last { order: 6 !important; } .m-xl-0 { margin: 0 !important; } .m-xl-1 { margin: 0.125rem !important; } .m-xl-2 { margin: 0.25rem !important; } .m-xl-3 { margin: 0.5rem !important; } .m-xl-4 { margin: 0.75rem !important; } .m-xl-5 { margin: 1.5rem !important; } .m-xl-auto { margin: auto !important; } .mx-xl-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-xl-1 { margin-right: 0.125rem !important; margin-left: 0.125rem !important; } .mx-xl-2 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-xl-3 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-xl-4 { margin-right: 0.75rem !important; margin-left: 0.75rem !important; } .mx-xl-5 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-xl-auto { margin-right: auto !important; margin-left: auto !important; } .my-xl-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-xl-1 { margin-top: 0.125rem !important; margin-bottom: 0.125rem !important; } .my-xl-2 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-xl-3 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-xl-4 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; } .my-xl-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-xl-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-xl-0 { margin-top: 0 !important; } .mt-xl-1 { margin-top: 0.125rem !important; } .mt-xl-2 { margin-top: 0.25rem !important; } .mt-xl-3 { margin-top: 0.5rem !important; } .mt-xl-4 { margin-top: 0.75rem !important; } .mt-xl-5 { margin-top: 1.5rem !important; } .mt-xl-auto { margin-top: auto !important; } .me-xl-0 { margin-right: 0 !important; } .me-xl-1 { margin-right: 0.125rem !important; } .me-xl-2 { margin-right: 0.25rem !important; } .me-xl-3 { margin-right: 0.5rem !important; } .me-xl-4 { margin-right: 0.75rem !important; } .me-xl-5 { margin-right: 1.5rem !important; } .me-xl-auto { margin-right: auto !important; } .mb-xl-0 { margin-bottom: 0 !important; } .mb-xl-1 { margin-bottom: 0.125rem !important; } .mb-xl-2 { margin-bottom: 0.25rem !important; } .mb-xl-3 { margin-bottom: 0.5rem !important; } .mb-xl-4 { margin-bottom: 0.75rem !important; } .mb-xl-5 { margin-bottom: 1.5rem !important; } .mb-xl-auto { margin-bottom: auto !important; } .ms-xl-0 { margin-left: 0 !important; } .ms-xl-1 { margin-left: 0.125rem !important; } .ms-xl-2 { margin-left: 0.25rem !important; } .ms-xl-3 { margin-left: 0.5rem !important; } .ms-xl-4 { margin-left: 0.75rem !important; } .ms-xl-5 { margin-left: 1.5rem !important; } .ms-xl-auto { margin-left: auto !important; } .p-xl-0 { padding: 0 !important; } .p-xl-1 { padding: 0.125rem !important; } .p-xl-2 { padding: 0.25rem !important; } .p-xl-3 { padding: 0.5rem !important; } .p-xl-4 { padding: 0.75rem !important; } .p-xl-5 { padding: 1.5rem !important; } .px-xl-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-xl-1 { padding-right: 0.125rem !important; padding-left: 0.125rem !important; } .px-xl-2 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-xl-3 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-xl-4 { padding-right: 0.75rem !important; padding-left: 0.75rem !important; } .px-xl-5 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .py-xl-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-xl-1 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; } .py-xl-2 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-xl-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-xl-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .py-xl-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .pt-xl-0 { padding-top: 0 !important; } .pt-xl-1 { padding-top: 0.125rem !important; } .pt-xl-2 { padding-top: 0.25rem !important; } .pt-xl-3 { padding-top: 0.5rem !important; } .pt-xl-4 { padding-top: 0.75rem !important; } .pt-xl-5 { padding-top: 1.5rem !important; } .pe-xl-0 { padding-right: 0 !important; } .pe-xl-1 { padding-right: 0.125rem !important; } .pe-xl-2 { padding-right: 0.25rem !important; } .pe-xl-3 { padding-right: 0.5rem !important; } .pe-xl-4 { padding-right: 0.75rem !important; } .pe-xl-5 { padding-right: 1.5rem !important; } .pb-xl-0 { padding-bottom: 0 !important; } .pb-xl-1 { padding-bottom: 0.125rem !important; } .pb-xl-2 { padding-bottom: 0.25rem !important; } .pb-xl-3 { padding-bottom: 0.5rem !important; } .pb-xl-4 { padding-bottom: 0.75rem !important; } .pb-xl-5 { padding-bottom: 1.5rem !important; } .ps-xl-0 { padding-left: 0 !important; } .ps-xl-1 { padding-left: 0.125rem !important; } .ps-xl-2 { padding-left: 0.25rem !important; } .ps-xl-3 { padding-left: 0.5rem !important; } .ps-xl-4 { padding-left: 0.75rem !important; } .ps-xl-5 { padding-left: 1.5rem !important; } .gap-xl-0 { gap: 0 !important; } .gap-xl-1 { gap: 0.125rem !important; } .gap-xl-2 { gap: 0.25rem !important; } .gap-xl-3 { gap: 0.5rem !important; } .gap-xl-4 { gap: 0.75rem !important; } .gap-xl-5 { gap: 1.5rem !important; } .row-gap-xl-0 { row-gap: 0 !important; } .row-gap-xl-1 { row-gap: 0.125rem !important; } .row-gap-xl-2 { row-gap: 0.25rem !important; } .row-gap-xl-3 { row-gap: 0.5rem !important; } .row-gap-xl-4 { row-gap: 0.75rem !important; } .row-gap-xl-5 { row-gap: 1.5rem !important; } .column-gap-xl-0 { column-gap: 0 !important; } .column-gap-xl-1 { column-gap: 0.125rem !important; } .column-gap-xl-2 { column-gap: 0.25rem !important; } .column-gap-xl-3 { column-gap: 0.5rem !important; } .column-gap-xl-4 { column-gap: 0.75rem !important; } .column-gap-xl-5 { column-gap: 1.5rem !important; } .text-xl-start { text-align: left !important; } .text-xl-end { text-align: right !important; } .text-xl-center { text-align: center !important; } } @media (min-width: 1512px) { .float-xxl-start { float: left !important; } .float-xxl-end { float: right !important; } .float-xxl-none { float: none !important; } .object-fit-xxl-contain { object-fit: contain !important; } .object-fit-xxl-cover { object-fit: cover !important; } .object-fit-xxl-fill { object-fit: fill !important; } .object-fit-xxl-scale { object-fit: scale-down !important; } .object-fit-xxl-none { object-fit: none !important; } .d-xxl-inline { display: inline !important; } .d-xxl-inline-block { display: inline-block !important; } .d-xxl-block { display: block !important; } .d-xxl-grid { display: grid !important; } .d-xxl-inline-grid { display: inline-grid !important; } .d-xxl-table { display: table !important; } .d-xxl-table-row { display: table-row !important; } .d-xxl-table-cell { display: table-cell !important; } .d-xxl-flex { display: flex !important; } .d-xxl-inline-flex { display: inline-flex !important; } .d-xxl-none { display: none !important; } .flex-xxl-fill { flex: 1 1 auto !important; } .flex-xxl-row { flex-direction: row !important; } .flex-xxl-column { flex-direction: column !important; } .flex-xxl-row-reverse { flex-direction: row-reverse !important; } .flex-xxl-column-reverse { flex-direction: column-reverse !important; } .flex-xxl-grow-0 { flex-grow: 0 !important; } .flex-xxl-grow-1 { flex-grow: 1 !important; } .flex-xxl-shrink-0 { flex-shrink: 0 !important; } .flex-xxl-shrink-1 { flex-shrink: 1 !important; } .flex-xxl-wrap { flex-wrap: wrap !important; } .flex-xxl-nowrap { flex-wrap: nowrap !important; } .flex-xxl-wrap-reverse { flex-wrap: wrap-reverse !important; } .justify-content-xxl-start { justify-content: flex-start !important; } .justify-content-xxl-end { justify-content: flex-end !important; } .justify-content-xxl-center { justify-content: center !important; } .justify-content-xxl-between { justify-content: space-between !important; } .justify-content-xxl-around { justify-content: space-around !important; } .justify-content-xxl-evenly { justify-content: space-evenly !important; } .align-items-xxl-start { align-items: flex-start !important; } .align-items-xxl-end { align-items: flex-end !important; } .align-items-xxl-center { align-items: center !important; } .align-items-xxl-baseline { align-items: baseline !important; } .align-items-xxl-stretch { align-items: stretch !important; } .align-content-xxl-start { align-content: flex-start !important; } .align-content-xxl-end { align-content: flex-end !important; } .align-content-xxl-center { align-content: center !important; } .align-content-xxl-between { align-content: space-between !important; } .align-content-xxl-around { align-content: space-around !important; } .align-content-xxl-stretch { align-content: stretch !important; } .align-self-xxl-auto { align-self: auto !important; } .align-self-xxl-start { align-self: flex-start !important; } .align-self-xxl-end { align-self: flex-end !important; } .align-self-xxl-center { align-self: center !important; } .align-self-xxl-baseline { align-self: baseline !important; } .align-self-xxl-stretch { align-self: stretch !important; } .order-xxl-first { order: -1 !important; } .order-xxl-0 { order: 0 !important; } .order-xxl-1 { order: 1 !important; } .order-xxl-2 { order: 2 !important; } .order-xxl-3 { order: 3 !important; } .order-xxl-4 { order: 4 !important; } .order-xxl-5 { order: 5 !important; } .order-xxl-last { order: 6 !important; } .m-xxl-0 { margin: 0 !important; } .m-xxl-1 { margin: 0.125rem !important; } .m-xxl-2 { margin: 0.25rem !important; } .m-xxl-3 { margin: 0.5rem !important; } .m-xxl-4 { margin: 0.75rem !important; } .m-xxl-5 { margin: 1.5rem !important; } .m-xxl-auto { margin: auto !important; } .mx-xxl-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-xxl-1 { margin-right: 0.125rem !important; margin-left: 0.125rem !important; } .mx-xxl-2 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-xxl-3 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-xxl-4 { margin-right: 0.75rem !important; margin-left: 0.75rem !important; } .mx-xxl-5 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-xxl-auto { margin-right: auto !important; margin-left: auto !important; } .my-xxl-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-xxl-1 { margin-top: 0.125rem !important; margin-bottom: 0.125rem !important; } .my-xxl-2 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-xxl-3 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-xxl-4 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; } .my-xxl-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-xxl-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-xxl-0 { margin-top: 0 !important; } .mt-xxl-1 { margin-top: 0.125rem !important; } .mt-xxl-2 { margin-top: 0.25rem !important; } .mt-xxl-3 { margin-top: 0.5rem !important; } .mt-xxl-4 { margin-top: 0.75rem !important; } .mt-xxl-5 { margin-top: 1.5rem !important; } .mt-xxl-auto { margin-top: auto !important; } .me-xxl-0 { margin-right: 0 !important; } .me-xxl-1 { margin-right: 0.125rem !important; } .me-xxl-2 { margin-right: 0.25rem !important; } .me-xxl-3 { margin-right: 0.5rem !important; } .me-xxl-4 { margin-right: 0.75rem !important; } .me-xxl-5 { margin-right: 1.5rem !important; } .me-xxl-auto { margin-right: auto !important; } .mb-xxl-0 { margin-bottom: 0 !important; } .mb-xxl-1 { margin-bottom: 0.125rem !important; } .mb-xxl-2 { margin-bottom: 0.25rem !important; } .mb-xxl-3 { margin-bottom: 0.5rem !important; } .mb-xxl-4 { margin-bottom: 0.75rem !important; } .mb-xxl-5 { margin-bottom: 1.5rem !important; } .mb-xxl-auto { margin-bottom: auto !important; } .ms-xxl-0 { margin-left: 0 !important; } .ms-xxl-1 { margin-left: 0.125rem !important; } .ms-xxl-2 { margin-left: 0.25rem !important; } .ms-xxl-3 { margin-left: 0.5rem !important; } .ms-xxl-4 { margin-left: 0.75rem !important; } .ms-xxl-5 { margin-left: 1.5rem !important; } .ms-xxl-auto { margin-left: auto !important; } .p-xxl-0 { padding: 0 !important; } .p-xxl-1 { padding: 0.125rem !important; } .p-xxl-2 { padding: 0.25rem !important; } .p-xxl-3 { padding: 0.5rem !important; } .p-xxl-4 { padding: 0.75rem !important; } .p-xxl-5 { padding: 1.5rem !important; } .px-xxl-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-xxl-1 { padding-right: 0.125rem !important; padding-left: 0.125rem !important; } .px-xxl-2 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-xxl-3 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-xxl-4 { padding-right: 0.75rem !important; padding-left: 0.75rem !important; } .px-xxl-5 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .py-xxl-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-xxl-1 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; } .py-xxl-2 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-xxl-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-xxl-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .py-xxl-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .pt-xxl-0 { padding-top: 0 !important; } .pt-xxl-1 { padding-top: 0.125rem !important; } .pt-xxl-2 { padding-top: 0.25rem !important; } .pt-xxl-3 { padding-top: 0.5rem !important; } .pt-xxl-4 { padding-top: 0.75rem !important; } .pt-xxl-5 { padding-top: 1.5rem !important; } .pe-xxl-0 { padding-right: 0 !important; } .pe-xxl-1 { padding-right: 0.125rem !important; } .pe-xxl-2 { padding-right: 0.25rem !important; } .pe-xxl-3 { padding-right: 0.5rem !important; } .pe-xxl-4 { padding-right: 0.75rem !important; } .pe-xxl-5 { padding-right: 1.5rem !important; } .pb-xxl-0 { padding-bottom: 0 !important; } .pb-xxl-1 { padding-bottom: 0.125rem !important; } .pb-xxl-2 { padding-bottom: 0.25rem !important; } .pb-xxl-3 { padding-bottom: 0.5rem !important; } .pb-xxl-4 { padding-bottom: 0.75rem !important; } .pb-xxl-5 { padding-bottom: 1.5rem !important; } .ps-xxl-0 { padding-left: 0 !important; } .ps-xxl-1 { padding-left: 0.125rem !important; } .ps-xxl-2 { padding-left: 0.25rem !important; } .ps-xxl-3 { padding-left: 0.5rem !important; } .ps-xxl-4 { padding-left: 0.75rem !important; } .ps-xxl-5 { padding-left: 1.5rem !important; } .gap-xxl-0 { gap: 0 !important; } .gap-xxl-1 { gap: 0.125rem !important; } .gap-xxl-2 { gap: 0.25rem !important; } .gap-xxl-3 { gap: 0.5rem !important; } .gap-xxl-4 { gap: 0.75rem !important; } .gap-xxl-5 { gap: 1.5rem !important; } .row-gap-xxl-0 { row-gap: 0 !important; } .row-gap-xxl-1 { row-gap: 0.125rem !important; } .row-gap-xxl-2 { row-gap: 0.25rem !important; } .row-gap-xxl-3 { row-gap: 0.5rem !important; } .row-gap-xxl-4 { row-gap: 0.75rem !important; } .row-gap-xxl-5 { row-gap: 1.5rem !important; } .column-gap-xxl-0 { column-gap: 0 !important; } .column-gap-xxl-1 { column-gap: 0.125rem !important; } .column-gap-xxl-2 { column-gap: 0.25rem !important; } .column-gap-xxl-3 { column-gap: 0.5rem !important; } .column-gap-xxl-4 { column-gap: 0.75rem !important; } .column-gap-xxl-5 { column-gap: 1.5rem !important; } .text-xxl-start { text-align: left !important; } .text-xxl-end { text-align: right !important; } .text-xxl-center { text-align: center !important; } } @media (min-width: 1200px) { .fs-1 { font-size: 2.5rem !important; } .fs-2 { font-size: 2rem !important; } .fs-3 { font-size: 1.75rem !important; } .fs-4 { font-size: 1.5rem !important; } } @media print { .d-print-inline { display: inline !important; } .d-print-inline-block { display: inline-block !important; } .d-print-block { display: block !important; } .d-print-grid { display: grid !important; } .d-print-inline-grid { display: inline-grid !important; } .d-print-table { display: table !important; } .d-print-table-row { display: table-row !important; } .d-print-table-cell { display: table-cell !important; } .d-print-flex { display: flex !important; } .d-print-inline-flex { display: inline-flex !important; } .d-print-none { display: none !important; } } body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } pre, code { /* Disable ligatures on code-font, so, for example, a, aside .active > a:hover { color: #7649E3; font-weight: 700; } aside a.active-parent, aside .active-parent > a { font-weight: 700; } .page-toc .level-1 a, .command-list .separator { font-weight: 700; color: #FFFFFF; } /* Left navigation -----------------------------------------------------------*/ .nav-toggler { position: absolute; } .nav-toggler::after { display: inline-block; margin-left: 0.34em; vertical-align: 0.34em; content: ""; border-top: 0.4em solid; border-right: 0.4em solid transparent; border-bottom: 0; border-left: 0.4em solid transparent; } .nav-toggler:empty::after { margin-left: 0; } .nav-toggler { width: 1.75em; height: 1.75em; line-height: 0; display: grid; justify-content: center; align-content: center; } .nav-toggler::after { transition-duration: 0.3s; } .nav-toggler.collapsed::after { transform: rotate(-90deg); } .dactyl-tree-nav nav { margin-left: 1rem; padding-left: 0; border-left: 1px solid #FFFFFF; } .dactyl-tree-nav nav .nav-link:hover, .dactyl-tree-nav nav .nav-link:active { border-left: 1px solid #7649E3; margin-left: -1px; } .dactyl-tree-nav nav .active > .nav-link { border-left: 2px solid #7649E3; margin-left: -1px; padding-left: calc(1rem - 1px); } .dactyl-tree-nav .nav-item { position: relative; } .dactyl-tree-nav .nav-item .nav-link { padding: 0.25rem 1rem; font-size: 0.9rem; } .dactyl-tree-nav .nav-item.nav-parent { padding-top: 0; } .dactyl-tree-nav .nav-item.nav-parent .nav-link { padding-left: 0; padding-top: 0; font-size: 1.125rem; line-height: initial; } .dactyl-tree-nav .nav-item .nav-toggler + .nav-link { padding-left: 2rem; } .dactyl-tree-nav > .nav-item { padding: 0.5rem 0; font-size: 1.125rem; } .dactyl-tree-nav > .nav-item > .nav-link { font-weight: bold; } .dactyl-tree-nav .collapsing.nav { flex-wrap: unset; } /* Right navigation --------------------------------------------------------- */ .toc-header { font-weight: bold; font-size: 14px; padding: 1rem 0; } .toc-header h4, .toc-header .h4 { line-height: 20px; font-size: 1.2em; padding: 0; margin: 0; } #page-toc-wrapper .card-body { list-style-type: none; } .page-toc, .command-list { padding-left: 0; border-left: 1px solid #FFFFFF; } .page-toc li, .command-list li { list-style-type: none; padding: 0; } .page-toc li.separator, .command-list li.separator { padding: 0.25rem 1rem; } .page-toc li a, .command-list li a { display: block; margin-top: 5px; padding: 0.25rem 1rem; font-size: 0.9rem; } .page-toc li a:hover, .page-toc li a .active, .command-list li a:hover, .command-list li a .active { text-decoration: none; border-left: 1px solid #7649E3; margin-left: -1px; } .page-toc li.active a, .page-toc li.active a:hover, .command-list li.active a, .command-list li.active a:hover { border-left: 2px solid #7649E3; padding-left: calc(1rem - 1px); margin-left: -1px; } .page-toc .level-3, .command-list .level-3 { margin-left: 16px; border-left: 1px solid #FFFFFF; margin-bottom: 0; padding-bottom: 5px; } .page-toc .level-3 a, .command-list .level-3 a { margin-top: 0; padding-bottom: 5px; } .page-toc.no-sideline, .command-list.no-sideline { border-left: 0; } .page-toc.no-sideline a:hover, .page-toc.no-sideline a.active, .command-list.no-sideline a:hover, .command-list.no-sideline a.active { border-left: 0; margin-left: 0; } .command-list li a { margin-top: 0; } /** * Theme mode mixin * * Applies styles conditionally based on the theme mode (light or dark). * SCSS doesn't support type constraints in parameter declarations, so we use * runtime validation with @if/@error to ensure only valid values are accepted. * * @param {string} $mode - Theme mode: "dark" or "light" (default: "dark") * @throws Error if $mode is not "dark" or "light" * * @example * @include theme-mode(light) { * background-color: white; * } */ /* HEIGHT AND WIDTH HELPERS */ .h32 { height: 32px; } .w32 { width: 32px; } .h36 { height: 36px; } .w36 { width: 36px; } .h40 { height: 40px; } .w40 { width: 40px; } .w44 { width: 44px; } .w48 { width: 48px; } .w-100, .bds-logo-square-grid, .bds-callout-media-banner__content, .bds-callout-media-banner { width: 100%; } .min-vh100 { min-height: 100vh; } .vw100 { width: 100vw; min-width: 100%; } /* SPACING HELPERS */ /* To create new margin classes, multiply by 4px then divide by 16 */ /* Exceptions with 1 - 5 since those are stock with Bootstrap */ @media (max-width: 575.98px) { .mb-3-sm-i { margin-bottom: 1rem !important; } } .ml-5 { margin-left: 1.25rem; } @media (min-width: 576px) { .ml-5-until-md { margin-left: 1.25rem; } } .mr-5 { margin-right: 1.25rem; } @media (min-width: 576px) { .mr-5-until-md { margin-right: 1.25rem; } } .mb-6 { margin-bottom: 1.5rem; } @media (max-width: 575.98px) { .mb-6-sm { margin-bottom: 1.5rem; } } .mt-6 { margin-top: 1.5rem; } @media (min-width: 576px) { .mt-6-until-sm { margin-top: 1.5rem !important; } } .mb-8 { margin-bottom: 2rem; } @media (max-width: 575.98px) { .mb-8-sm { margin-bottom: 2rem; } } .mt-8 { margin-top: 2rem; } @media (min-width: 576px) { .mt-8-until-sm { margin-top: 2rem !important; } } .mt-9 { margin-top: 2.25rem; } .mb-9 { margin-bottom: 2.25rem; } .mt-10 { margin-top: 2.5rem; } @media (max-width: 575.98px) { .mt-10-sm { margin-top: 2.5rem; } } .mb-10 { margin-bottom: 2.5rem; } @media (min-width: 576px) { .mb-10-until-sm { margin-bottom: 2.5rem; } } @media (max-width: 575.98px) { .mb-10-sm { margin-bottom: 2.5rem; } } .ml-10 { margin-left: 2.5rem; } .mr-10 { margin-right: 2.5rem; } .my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem; } .mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; } @media (min-width: 576px) { .mx-10-until-sm { margin-left: 2.5rem; margin-right: 2.5rem; } } @media (min-width: 576px) { .mx-10-until-md { margin-left: 2.5rem; margin-right: 2.5rem; } } @media (max-width: 575.98px) { .mx-10-sm { margin-left: 2.5rem; margin-right: 2.5rem; } } .mt-1 { margin-top: 1rem; } .mt-12 { margin-top: 3rem; } .mb-12 { margin-bottom: 3rem; } .my-12 { margin-top: 3rem; margin-bottom: 3rem; } .mt-13 { margin-top: 3.25rem; } .mb-13 { margin-bottom: 3.25rem; } .mt-14 { margin-top: 3.5rem; } .mt-16 { margin-top: 4rem; } @media (max-width: 575.98px) { .mt-16-sm { margin-top: 4rem; } } .mb-16 { margin-bottom: 4rem; } @media (max-width: 575.98px) { .mb-16-sm { margin-bottom: 4rem; } } .mb-18 { margin-bottom: 4.5rem; } .mt-20 { margin-top: 5rem; } @media (max-width: 575.98px) { .mt-20-sm { margin-top: 5rem; } } @media (min-width: 576px) { .mt-20-until-sm { margin-top: 5rem; } } .mb-20 { margin-bottom: 5rem; } @media (max-width: 575.98px) { .mb-20-sm { margin-bottom: 5rem; } } @media (min-width: 576px) { .mb-20-until-sm { margin-bottom: 5rem; } } .my-20 { margin-top: 5rem; margin-bottom: 5rem; } .my-26 { margin-top: 6.5rem; margin-bottom: 6.5rem; } .mb-30 { margin-bottom: 7.5rem; } .mt-30 { margin-top: 7.5rem; } @media (min-width: 576px) { .mt-30-until-sm { margin-top: 7.5rem; } } .mt-40 { margin-top: 10rem; } @media (min-width: 576px) { .mt-40-until-sm { margin-top: 10rem; } } .mb-40 { margin-bottom: 10rem; } @media (min-width: 576px) { .mb-40-until-sm { margin-bottom: 10rem; } } .mb-49 { margin-bottom: 12.25rem; } .mb-50 { margin-bottom: 12.5rem; } @media (min-width: 576px) { .mb-50-until-sm { margin-bottom: 12.5rem; } } @media (max-width: 575.98px) { .pl-0-sm { padding-left: 0 !important; } } @media (max-width: 575.98px) { .pr-0-sm { padding-right: 0 !important; } } @media (max-width: 575.98px) { .pt-3-sm { padding-top: 1rem !important; } } .p-6 { padding: 1.5rem; } @media (max-width: 575.98px) { .p-6-sm { padding: 1.5rem; } } .p-8 { padding: 2rem; } @media (max-width: 575.98px) { .p-8-sm { padding: 2rem; } } .p-10 { padding: 2.5rem; } @media (min-width: 576px) { .p-10-until-sm { padding: 2.5rem; } } .py-20 { padding-bottom: 5rem; padding-top: 5rem; } .px-20 { padding-left: 5rem; padding-right: 5rem; } .pt-20 { padding-top: 5rem; } .pb-20 { padding-bottom: 5rem; } .py-26 { padding-top: 6.5rem; padding-bottom: 6.5rem; } @media (max-width: 575.98px) { .py-26 { padding-top: 2.5rem; padding-bottom: 2.5rem; } } .pt-26 { padding-top: 2.5rem; } @media (min-width: 576px) { .pt-26-until-sm { padding-top: 6.5rem; } } .pb-26 { padding-bottom: 6.5rem; } @media (min-width: 576px) { .pb-26-until-sm { padding-bottom: 6.5rem; } } .pt-30 { padding-top: 7.5rem; } .pb-30 { padding-bottom: 7.5rem; } .pt-40 { padding-top: 10rem; } @media (min-width: 576px) { .pt-40-until-sm { padding-top: 10rem; } } .pb-40 { padding-bottom: 10rem; } .pb-50 { padding-bottom: 12.5rem; } .pt-50 { padding-top: 12.5rem; } .py-50 { padding-bottom: 12.5rem; padding-top: 12.5rem; } @media (min-width: 576px) { .py-50-until-sm { padding-bottom: 12.5rem; padding-top: 12.5rem; } } .floating-nav { top: 6rem; } .last-section { margin-bottom: 100px; } .bottom-0 { bottom: 0; } .justify-center { justify-content: center; } @media (max-width: 575.98px) { .justify-center-sm { justify-content: center; } } .overflow-xs { overflow: scroll; } .overflow-x-xs { overflow-x: scroll; overflow-y: hidden; } @media (min-width: 576px) { .position-sm-absolute { position: absolute; } } /* TEXT HELPERS */ .va-middle { vertical-align: middle; } .ls-none { list-style: none; } .no-wrap { white-space: nowrap; } .align-items-stretch, .bds-callout-media-banner { align-items: stretch; } .underline { text-decoration: underline; } /* DISPLAY HELPERS */ .d-none-xs { display: none; } @media (max-width: 575.98px) { .d-none-sm { display: none; } } @media (min-width: 992px) { .d-none-lg { display: none; } } .d-block { display: block; } /* COLOR ELEMENTS */ .border-green { border: 1px solid #7649E3; } .border-none { border: none !important; } .grey-400 { color: #8A919A; } .grey-500 { color: #72777E; } .grey-700 { color: #343437; } .white { color: #FFFFFF; } .stat-highlight { color: #0DAA3E; } /* ETC */ .br-8 { border-radius: 8px; } @media (max-width: 575.98px) { br.until-sm { content: ""; } } .z-index-1, .bds-callout-media-banner__content { z-index: 1; } .bb-gray { border-bottom: 1px solid #454549; } @keyframes arrowDance { 0% { padding-left: 7px; } 50% { padding-left: 14px; } 100% { padding-left: 7px; } } @keyframes arrowDance2 { 0% { right: 0; } 50% { right: 7px; } 100% { right: 0; } } @keyframes arrowDanceDiag { 0% { right: 7px; margin-top: 0; } 50% { right: 0; margin-top: -7px; } 100% { right: 7px; margin-top: 0; } } .btn, article a.button, article .btn { font-weight: bold; cursor: pointer; text-decoration: none; transition: 0.2s; padding: 0.5rem 1rem; line-height: 16px; } article a.button { padding: 0.5rem 1rem; margin: 0 0.5rem; display: inline-block; } .btn.disabled, button.disabled, .btn[disabled=disabled], button[disabled=disabled] { cursor: not-allowed; } .btn-primary code, .btn-secondary code { color: inherit; } .btn-primary { background: #5429A1; font-weight: bold; color: #FFFFFF; border: none; border-color: transparent; } .btn-primary:hover { background: #C0A7FF; } .btn-primary.disabled, .btn-primary[disabled=disabled] { background: #7649E3; } .btn-primary.disabled:hover, .btn-primary[disabled=disabled]:hover { background: #7649E3; } @media (max-width: 575.98px) { .btn-arrow { display: block; width: 100%; } } .btn-arrow::after { display: inline-block; content: url(../img/icons/arrow-right.svg); position: relative; top: 1px; vertical-align: middle; padding-left: 8px; -webkit-transition: transform 0.3s ease-out; -moz-transition: transform 0.3s ease-out; -ms-transition: transform 0.3s ease-out; -o-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; } .btn-arrow:hover { background: #C0A7FF !important; border: none; } .btn-arrow:hover::after { -webkit-transform: translateX(4px); -moz-transform: translateX(4px); -ms-transform: translateX(4px); -o-transform: translateX(4px); transform: translateX(4px); } .btn-arrow-out::after { background-position: left 0px bottom 0px; content: " "; background-image: url(../img/icons/arrow-up-right-white.svg); background-repeat: no-repeat; display: inline-block; padding: 4px 8px 4px 12px; transition: background-position 0.3s ease-in-out; margin-left: 4px; } .btn-arrow-out:hover::after { background-position: left 4px bottom 4px; } @media (max-width: 767.98px) { .btn-arrow-out { display: block; width: 100%; } } /* (Jump to) "Top" button */ .jump-to-top { display: none; position: fixed; bottom: 36px; right: 36px; font-weight: 700; z-index: 1000; } .jump-to-top::after { display: none; } .accordian-row { background: #232325; border-radius: 5px; padding: 32px; } .accordian-row h3 a, .accordian-row .h3 a { position: relative; padding-right: 2rem; } .accordian-row h3 a:hover, .accordian-row .h3 a:hover { color: #FFFFFF; } .accordian-row .chevron { position: absolute; top: 0; right: 0; } html.light a.bds-btn.bds-btn { text-decoration: none; } html.light a.bds-btn.bds-btn:hover, html.light a.bds-btn.bds-btn:focus, html.light a.bds-btn.bds-btn:focus-visible, html.light a.bds-btn.bds-btn:active, html.light a.bds-btn.bds-btn:visited { text-decoration: none; } html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--green { color: #141414; background-color: #21E46B; } html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--green:hover, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--green:focus, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--green:focus-visible, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--green:active, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--green:visited { color: #141414; background-color: #21E46B; } html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black { color: #FFFFFF; background-color: #141414; } html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black .bds-btn__icon, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black .bds-btn__icon-line, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black .bds-btn__icon-chevron { color: #FFFFFF; stroke: #FFFFFF; } html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:hover, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:focus, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:focus-visible, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:active, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:visited { color: #FFFFFF; background-color: #141414; } html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:hover .bds-btn__icon, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:hover .bds-btn__icon-line, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:hover .bds-btn__icon-chevron, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:focus .bds-btn__icon, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:focus .bds-btn__icon-line, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:focus .bds-btn__icon-chevron, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:focus-visible .bds-btn__icon, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:focus-visible .bds-btn__icon-line, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:focus-visible .bds-btn__icon-chevron, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:active .bds-btn__icon, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:active .bds-btn__icon-line, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:active .bds-btn__icon-chevron, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:visited .bds-btn__icon, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:visited .bds-btn__icon-line, html.light a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:visited .bds-btn__icon-chevron { color: #FFFFFF; stroke: #FFFFFF; } html.light a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--green { color: #0DAA3E; background-color: transparent; } html.light a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--green:hover, html.light a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--green:focus, html.light a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--green:focus-visible { color: #078139; background-color: #EAFCF1; } html.light a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--green:active, html.light a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--green:visited { color: #0DAA3E; background-color: transparent; } html.light a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--black { color: #141414; background-color: transparent; } html.light a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--black:hover, html.light a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--black:focus, html.light a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--black:focus-visible { color: #141414; background-color: rgba(20, 20, 20, 0.15); } html.light a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--black:active, html.light a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--black:visited { color: #141414; background-color: transparent; } html.light a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--green { color: #0DAA3E; background-color: transparent; } html.light a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--green:hover, html.light a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--green:focus, html.light a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--green:focus-visible { color: #078139; } html.light a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--green:active, html.light a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--green:visited { color: #0DAA3E; background-color: transparent; } html.light a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--black { color: #141414; background-color: transparent; } html.light a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--black:hover, html.light a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--black:focus, html.light a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--black:focus-visible, html.light a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--black:active, html.light a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--black:visited { color: #141414; background-color: transparent; } html.dark a.bds-btn.bds-btn { text-decoration: none; } html.dark a.bds-btn.bds-btn:hover, html.dark a.bds-btn.bds-btn:focus, html.dark a.bds-btn.bds-btn:focus-visible, html.dark a.bds-btn.bds-btn:active, html.dark a.bds-btn.bds-btn:visited { text-decoration: none; } html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--green { color: #141414; background-color: #21E46B; } html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--green:hover, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--green:focus, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--green:focus-visible, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--green:active, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--green:visited { color: #141414; background-color: #21E46B; } html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black { color: #141414; background-color: #21E46B; } html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black .bds-btn__icon, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black .bds-btn__icon-line, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black .bds-btn__icon-chevron { color: #141414; stroke: #141414; } html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:hover, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:focus, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:focus-visible, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:active, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:visited { color: #141414; background-color: #21E46B; } html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:hover .bds-btn__icon, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:hover .bds-btn__icon-line, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:hover .bds-btn__icon-chevron, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:focus .bds-btn__icon, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:focus .bds-btn__icon-line, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:focus .bds-btn__icon-chevron, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:focus-visible .bds-btn__icon, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:focus-visible .bds-btn__icon-line, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:focus-visible .bds-btn__icon-chevron, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:active .bds-btn__icon, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:active .bds-btn__icon-line, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:active .bds-btn__icon-chevron, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:visited .bds-btn__icon, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:visited .bds-btn__icon-line, html.dark a.bds-btn.bds-btn.bds-btn--primary.bds-btn--black:visited .bds-btn__icon-chevron { color: #141414; stroke: #141414; } html.dark a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--green { color: #21E46B; border-color: #21E46B; background-color: transparent; } html.dark a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--green:hover, html.dark a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--green:focus, html.dark a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--green:focus-visible { color: #70EE97; border-color: #70EE97; background-color: #078139; } html.dark a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--green:active, html.dark a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--green:visited { color: #21E46B; border-color: #21E46B; background-color: transparent; } html.dark a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--black { color: #21E46B; border-color: #21E46B; background-color: transparent; } html.dark a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--black:hover, html.dark a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--black:focus, html.dark a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--black:focus-visible { color: #70EE97; border-color: #70EE97; background-color: #078139; } html.dark a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--black:active, html.dark a.bds-btn.bds-btn.bds-btn--secondary.bds-btn--black:visited { color: #21E46B; border-color: #21E46B; background-color: transparent; } html.dark a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--green { color: #21E46B; background-color: transparent; } html.dark a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--green:hover, html.dark a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--green:focus, html.dark a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--green:focus-visible { color: #70EE97; } html.dark a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--green:active, html.dark a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--green:visited { color: #21E46B; background-color: transparent; } html.dark a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--black { color: #21E46B; background-color: transparent; } html.dark a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--black:hover, html.dark a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--black:focus, html.dark a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--black:focus-visible { color: #70EE97; } html.dark a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--black:active, html.dark a.bds-btn.bds-btn.bds-btn--tertiary.bds-btn--black:visited { color: #21E46B; background-color: transparent; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black { color: #141414; background-color: #21E46B; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black::before { background-color: #70EE97; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black .bds-btn__icon-chevron { color: #141414; stroke: #141414; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black:hover:not(:disabled):not(.bds-btn--disabled) { color: #141414; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { color: #141414; stroke: #141414; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black:focus-visible:not(:disabled):not(.bds-btn--disabled) { color: #141414; outline: 2px solid #FFFFFF; outline-offset: 2px; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { color: #141414; stroke: #141414; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black:active:not(:disabled):not(.bds-btn--disabled) { color: #141414; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { color: #141414; stroke: #141414; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black:disabled, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--disabled { color: #72777E; background-color: #CAD4DF; cursor: not-allowed; pointer-events: none; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black:disabled::before, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--disabled::before { display: none; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black { color: #21E46B; border-color: #21E46B; background-color: transparent; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black::before { background-color: #078139; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black .bds-btn__icon-chevron { color: #21E46B; stroke: #21E46B; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:hover:not(:disabled):not(.bds-btn--disabled) { color: #70EE97; border-color: #70EE97; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { color: #70EE97; stroke: #70EE97; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:focus-visible:not(:disabled):not(.bds-btn--disabled) { color: #70EE97; border-color: #70EE97; outline: 2px solid #FFFFFF; outline-offset: 2px; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { color: #70EE97; stroke: #70EE97; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:active:not(:disabled):not(.bds-btn--disabled) { color: #21E46B; border-color: #21E46B; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { color: #21E46B; stroke: #21E46B; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:disabled, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--disabled { color: #8A919A; border-color: #8A919A; background-color: transparent; cursor: not-allowed; pointer-events: none; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:disabled .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:disabled .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:disabled .bds-btn__icon-chevron, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--disabled .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--disabled .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--disabled .bds-btn__icon-chevron { color: #8A919A; stroke: #8A919A; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black:disabled::before, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--disabled::before { display: none; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black { color: #21E46B; background-color: transparent; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black .bds-btn__icon-chevron { color: #21E46B; stroke: #21E46B; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:hover:not(:disabled):not(.bds-btn--disabled) { color: #70EE97; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { color: #70EE97; stroke: #70EE97; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:focus-visible:not(:disabled):not(.bds-btn--disabled) { color: #70EE97; outline: 2px solid #FFFFFF; outline-offset: 2px; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { color: #70EE97; stroke: #70EE97; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:active:not(:disabled):not(.bds-btn--disabled) { color: #21E46B; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { color: #21E46B; stroke: #21E46B; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:disabled, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--disabled { color: #8A919A; background-color: transparent; cursor: not-allowed; pointer-events: none; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:disabled .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:disabled .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:disabled .bds-btn__icon-chevron, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--disabled .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--disabled .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--disabled .bds-btn__icon-chevron { color: #8A919A; stroke: #8A919A; } .bds-btn { display: inline-flex; align-items: center; justify-content: center; max-height: 40px; font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; font-size: 14px; line-height: 20.1px; letter-spacing: 0px; margin-bottom: 16px; } @media (min-width: 576px) { .bds-btn { font-size: 14px; line-height: 20.1px; letter-spacing: 0px; margin-bottom: 16px; } } @media (min-width: 992px) { .bds-btn { font-size: 16px; line-height: 23.2px; letter-spacing: 0px; margin-bottom: 16px; } } .bds-btn { white-space: nowrap; margin-bottom: 0; border: none; border-radius: 100px; cursor: pointer; position: relative; overflow: hidden; z-index: 1; transition: color 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), border-color 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), padding 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), gap 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-btn::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; transform: scaleY(0); transform-origin: bottom center; transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-btn:hover:not(:disabled):not(.bds-btn--disabled)::before, .bds-btn:focus-visible:not(:disabled):not(.bds-btn--disabled)::before { transform: scaleY(1); } .bds-btn:active:not(:disabled):not(.bds-btn--disabled)::before { transform: scaleY(0); } .bds-btn__label { flex-shrink: 0; position: relative; z-index: 1; } .bds-btn__icon { width: 15px; height: 14px; flex-shrink: 0; transition: opacity 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); color: currentColor; overflow: visible; position: relative; z-index: 1; } .bds-btn__icon-line { transform-box: fill-box; transform-origin: right center; transform: scaleX(1); transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-btn__icon-chevron { transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-btn:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, .bds-btn:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line { transform: scaleX(0); } .bds-btn--primary { color: #141414; background-color: #21E46B; } .bds-btn--primary::before { background-color: #70EE97; } .bds-btn--primary { padding: 8px 19px 8px 20px; gap: 16px; } .bds-btn--primary.bds-btn--no-icon { padding: 8px 20px; } .bds-btn--primary:hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { padding: 8px 13px 8px 20px; gap: 22px; } .bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { outline: 2px solid #141414; outline-offset: 2px; padding: 8px 13px 8px 20px; gap: 22px; } .bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { outline: 2px solid #141414; outline-offset: 2px; padding: 8px 20px; } .bds-btn--primary:active:not(:disabled):not(.bds-btn--disabled) { padding: 8px 19px 8px 20px; gap: 16px; } .bds-btn--primary:disabled, .bds-btn--primary.bds-btn--disabled { color: #72777E; background-color: #E6EAF0; cursor: not-allowed; pointer-events: none; } .bds-btn--primary:disabled::before, .bds-btn--primary.bds-btn--disabled::before { display: none; } @media (max-width: 1279.98px) { .bds-btn--primary { padding: 8px 15px 8px 16px; gap: 16px; } .bds-btn--primary.bds-btn--no-icon { padding: 8px 16px; } .bds-btn--primary:hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { padding: 8px 10px 8px 16px; gap: 21px; } .bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { outline: 2px solid #141414; outline-offset: 2px; padding: 8px 10px 8px 16px; gap: 21px; } .bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { outline: 2px solid #141414; outline-offset: 2px; padding: 8px 16px; } .bds-btn--primary:active:not(:disabled):not(.bds-btn--disabled) { padding: 8px 15px 8px 16px; gap: 16px; } } .bds-btn--secondary { color: #0DAA3E; background-color: transparent; border: 2px solid #0DAA3E; } .bds-btn--secondary::before { background-color: #EAFCF1; } .bds-btn--secondary { padding: 6px 17px 6px 18px; gap: 16px; } .bds-btn--secondary.bds-btn--no-icon { padding: 6px 18px; } .bds-btn--secondary:hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { color: #078139; border-color: #078139; padding: 6px 11px 6px 18px; gap: 22px; } .bds-btn--secondary:hover:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { color: #078139; border-color: #078139; } .bds-btn--secondary:focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { color: #078139; border: none; outline: 2px solid #141414; outline-offset: 2px; padding: 6px 13px 6px 20px; gap: 22px; } .bds-btn--secondary:focus-visible:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { color: #078139; border: none; outline: 2px solid #141414; outline-offset: 2px; padding: 6px 20px; } .bds-btn--secondary:active:not(:disabled):not(.bds-btn--disabled) { color: #0DAA3E; border-color: #0DAA3E; padding: 6px 17px 6px 18px; gap: 16px; } .bds-btn--secondary:disabled, .bds-btn--secondary.bds-btn--disabled { color: #8A919A; background-color: transparent; border-color: #8A919A; cursor: not-allowed; pointer-events: none; } .bds-btn--secondary:disabled::before, .bds-btn--secondary.bds-btn--disabled::before { display: none; } @media (max-width: 1279.98px) { .bds-btn--secondary { padding: 6px 13px 6px 14px; gap: 16px; } .bds-btn--secondary.bds-btn--no-icon { padding: 6px 14px; } .bds-btn--secondary:hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { padding: 6px 8px 6px 14px; gap: 21px; } .bds-btn--secondary:focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { border: none; outline: 2px solid #141414; outline-offset: 2px; padding: 6px 10px 6px 16px; gap: 21px; } .bds-btn--secondary:focus-visible:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { border: none; outline: 2px solid #141414; outline-offset: 2px; padding: 6px 16px; } .bds-btn--secondary:active:not(:disabled):not(.bds-btn--disabled) { padding: 6px 13px 6px 14px; gap: 16px; } } .bds-btn--black.bds-btn--primary { color: #FFFFFF; background-color: #141414; } .bds-btn--black.bds-btn--primary::before { background-color: rgba(20, 20, 20, 0.8); } .bds-btn--black.bds-btn--primary:hover:not(:disabled):not(.bds-btn--disabled) { color: #FFFFFF; } .bds-btn--black.bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled) { color: #FFFFFF; outline: 2px solid #141414; outline-offset: 2px; } .bds-btn--black.bds-btn--primary:active:not(:disabled):not(.bds-btn--disabled) { color: #FFFFFF; } .bds-btn--black.bds-btn--primary:disabled, .bds-btn--black.bds-btn--primary.bds-btn--disabled { color: #72777E; background-color: #E6EAF0; } .bds-btn--black.bds-btn--secondary { color: #141414; border-color: #141414; } .bds-btn--black.bds-btn--secondary::before { background-color: rgba(20, 20, 20, 0.15); } .bds-btn--black.bds-btn--secondary:hover:not(:disabled):not(.bds-btn--disabled) { color: #141414; border-color: #141414; } .bds-btn--black.bds-btn--secondary:focus-visible:not(:disabled):not(.bds-btn--disabled) { color: #141414; border: none; outline: 2px solid #141414; outline-offset: 2px; } .bds-btn--black.bds-btn--secondary:active:not(:disabled):not(.bds-btn--disabled) { color: #141414; border-color: #141414; } .bds-btn--black.bds-btn--secondary:disabled, .bds-btn--black.bds-btn--secondary.bds-btn--disabled { color: #72777E; border-color: #8A919A; } .bds-btn--black.bds-btn--tertiary { color: #141414; } .bds-btn--black.bds-btn--tertiary:hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { color: #141414 !important; text-decoration: underline; padding: 8px 14px 8px 20px; gap: 22px; } .bds-btn--black.bds-btn--tertiary:hover:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { color: #141414 !important; text-decoration: underline; } .bds-btn--black.bds-btn--tertiary:focus-visible:not(:disabled):not(.bds-btn--disabled) { color: #141414 !important; text-decoration: underline; border-radius: 0; outline: 2px solid #141414; outline-offset: -2px; } .bds-btn--black.bds-btn--tertiary:active:not(:disabled):not(.bds-btn--disabled) { color: #141414 !important; text-decoration: underline; } .bds-btn--black.bds-btn--tertiary:disabled, .bds-btn--black.bds-btn--tertiary.bds-btn--disabled { color: #72777E; } @media (max-width: 1279.98px) { .bds-btn--black.bds-btn--tertiary:hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { color: #141414 !important; padding: 8px 11px 8px 16px; gap: 21px; } } .bds-btn--force-color.bds-btn--black.bds-btn--primary { color: #FFFFFF !important; background-color: #141414 !important; } .bds-btn--force-color.bds-btn--black.bds-btn--primary::before { background-color: rgba(20, 20, 20, 0.8) !important; } .bds-btn--force-color.bds-btn--black.bds-btn--primary .bds-btn__icon, .bds-btn--force-color.bds-btn--black.bds-btn--primary .bds-btn__icon-line, .bds-btn--force-color.bds-btn--black.bds-btn--primary .bds-btn__icon-chevron { color: #FFFFFF !important; stroke: #FFFFFF !important; } .bds-btn--force-color.bds-btn--black.bds-btn--primary:hover:not(:disabled):not(.bds-btn--disabled), .bds-btn--force-color.bds-btn--black.bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled), .bds-btn--force-color.bds-btn--black.bds-btn--primary:active:not(:disabled):not(.bds-btn--disabled) { color: #FFFFFF !important; } .bds-btn--force-color.bds-btn--black.bds-btn--primary:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, .bds-btn--force-color.bds-btn--black.bds-btn--primary:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, .bds-btn--force-color.bds-btn--black.bds-btn--primary:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron, .bds-btn--force-color.bds-btn--black.bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, .bds-btn--force-color.bds-btn--black.bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, .bds-btn--force-color.bds-btn--black.bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron, .bds-btn--force-color.bds-btn--black.bds-btn--primary:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, .bds-btn--force-color.bds-btn--black.bds-btn--primary:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, .bds-btn--force-color.bds-btn--black.bds-btn--primary:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { color: #FFFFFF !important; stroke: #FFFFFF !important; } .bds-btn--force-color.bds-btn--black.bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled) { outline-color: #141414 !important; } .bds-btn--force-color.bds-btn--black.bds-btn--secondary { color: #141414 !important; border-color: #141414 !important; } .bds-btn--force-color.bds-btn--black.bds-btn--secondary::before { background-color: rgba(20, 20, 20, 0.15) !important; } .bds-btn--force-color.bds-btn--black.bds-btn--secondary .bds-btn__icon, .bds-btn--force-color.bds-btn--black.bds-btn--secondary .bds-btn__icon-line, .bds-btn--force-color.bds-btn--black.bds-btn--secondary .bds-btn__icon-chevron { color: #141414 !important; stroke: #141414 !important; } .bds-btn--force-color.bds-btn--black.bds-btn--secondary:hover:not(:disabled):not(.bds-btn--disabled), .bds-btn--force-color.bds-btn--black.bds-btn--secondary:focus-visible:not(:disabled):not(.bds-btn--disabled), .bds-btn--force-color.bds-btn--black.bds-btn--secondary:active:not(:disabled):not(.bds-btn--disabled) { color: #141414 !important; border-color: #141414 !important; } .bds-btn--force-color.bds-btn--black.bds-btn--secondary:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, .bds-btn--force-color.bds-btn--black.bds-btn--secondary:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, .bds-btn--force-color.bds-btn--black.bds-btn--secondary:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron, .bds-btn--force-color.bds-btn--black.bds-btn--secondary:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, .bds-btn--force-color.bds-btn--black.bds-btn--secondary:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, .bds-btn--force-color.bds-btn--black.bds-btn--secondary:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron, .bds-btn--force-color.bds-btn--black.bds-btn--secondary:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, .bds-btn--force-color.bds-btn--black.bds-btn--secondary:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, .bds-btn--force-color.bds-btn--black.bds-btn--secondary:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { color: #141414 !important; stroke: #141414 !important; } .bds-btn--force-color.bds-btn--black.bds-btn--secondary:focus-visible:not(:disabled):not(.bds-btn--disabled) { outline-color: #141414 !important; } .bds-btn--force-color.bds-btn--black.bds-btn--tertiary { color: #141414 !important; } .bds-btn--force-color.bds-btn--black.bds-btn--tertiary .bds-btn__icon, .bds-btn--force-color.bds-btn--black.bds-btn--tertiary .bds-btn__icon-line, .bds-btn--force-color.bds-btn--black.bds-btn--tertiary .bds-btn__icon-chevron { color: #141414 !important; stroke: #141414 !important; } .bds-btn--force-color.bds-btn--black.bds-btn--tertiary:hover:not(:disabled):not(.bds-btn--disabled), .bds-btn--force-color.bds-btn--black.bds-btn--tertiary:focus-visible:not(:disabled):not(.bds-btn--disabled), .bds-btn--force-color.bds-btn--black.bds-btn--tertiary:active:not(:disabled):not(.bds-btn--disabled) { color: #141414 !important; } .bds-btn--force-color.bds-btn--black.bds-btn--tertiary:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, .bds-btn--force-color.bds-btn--black.bds-btn--tertiary:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, .bds-btn--force-color.bds-btn--black.bds-btn--tertiary:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron, .bds-btn--force-color.bds-btn--black.bds-btn--tertiary:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, .bds-btn--force-color.bds-btn--black.bds-btn--tertiary:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, .bds-btn--force-color.bds-btn--black.bds-btn--tertiary:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron, .bds-btn--force-color.bds-btn--black.bds-btn--tertiary:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, .bds-btn--force-color.bds-btn--black.bds-btn--tertiary:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, .bds-btn--force-color.bds-btn--black.bds-btn--tertiary:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { color: #141414 !important; stroke: #141414 !important; } .bds-btn--force-color.bds-btn--black.bds-btn--tertiary:focus-visible:not(:disabled):not(.bds-btn--disabled) { outline-color: #141414 !important; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color { color: #FFFFFF !important; background-color: #141414 !important; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color::before { background-color: rgba(20, 20, 20, 0.8) !important; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color .bds-btn__icon-chevron { color: #FFFFFF !important; stroke: #FFFFFF !important; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color:hover:not(:disabled):not(.bds-btn--disabled), html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color:focus-visible:not(:disabled):not(.bds-btn--disabled), html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color:active:not(:disabled):not(.bds-btn--disabled) { color: #FFFFFF !important; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { color: #FFFFFF !important; stroke: #FFFFFF !important; } html.dark .bds-btn.bds-btn.bds-btn--primary.bds-btn--primary.bds-btn--black.bds-btn--force-color:focus-visible:not(:disabled):not(.bds-btn--disabled) { outline-color: #FFFFFF !important; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color { color: #141414 !important; border-color: #141414 !important; background-color: transparent !important; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color::before { background-color: rgba(20, 20, 20, 0.15) !important; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color .bds-btn__icon-chevron { color: #141414 !important; stroke: #141414 !important; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color:hover:not(:disabled):not(.bds-btn--disabled), html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color:focus-visible:not(:disabled):not(.bds-btn--disabled), html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color:active:not(:disabled):not(.bds-btn--disabled) { color: #141414 !important; border-color: #141414 !important; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { color: #141414 !important; stroke: #141414 !important; } html.dark .bds-btn.bds-btn.bds-btn--secondary.bds-btn--secondary.bds-btn--black.bds-btn--force-color:focus-visible:not(:disabled):not(.bds-btn--disabled) { outline-color: #FFFFFF !important; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color { color: #141414 !important; background-color: transparent !important; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color .bds-btn__icon-chevron { color: #141414 !important; stroke: #141414 !important; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color:hover:not(:disabled):not(.bds-btn--disabled), html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color:focus-visible:not(:disabled):not(.bds-btn--disabled), html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color:active:not(:disabled):not(.bds-btn--disabled) { color: #141414 !important; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { color: #141414 !important; stroke: #141414 !important; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--force-color:focus-visible:not(:disabled):not(.bds-btn--disabled) { outline-color: #FFFFFF !important; } html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black { color: #FFFFFF !important; background-color: #141414 !important; } html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black .bds-btn__icon-chevron { color: #FFFFFF !important; stroke: #FFFFFF !important; } html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:hover, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:focus, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:focus-visible, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:active, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:visited { color: #FFFFFF !important; background-color: #141414 !important; } html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:hover .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:hover .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:hover .bds-btn__icon-chevron, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:focus .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:focus .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:focus .bds-btn__icon-chevron, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:focus-visible .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:focus-visible .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:focus-visible .bds-btn__icon-chevron, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:active .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:active .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:active .bds-btn__icon-chevron, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:visited .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:visited .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--primary.bds-btn--black:visited .bds-btn__icon-chevron { color: #FFFFFF !important; stroke: #FFFFFF !important; } html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black { color: #141414 !important; border-color: #141414 !important; background-color: transparent !important; } html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black .bds-btn__icon-chevron { color: #141414 !important; stroke: #141414 !important; } html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:hover, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:focus, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:focus-visible, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:active, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:visited { color: #141414 !important; border-color: #141414 !important; } html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:hover .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:hover .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:hover .bds-btn__icon-chevron, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:focus .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:focus .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:focus .bds-btn__icon-chevron, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:focus-visible .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:focus-visible .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:focus-visible .bds-btn__icon-chevron, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:active .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:active .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:active .bds-btn__icon-chevron, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:visited .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:visited .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--secondary.bds-btn--black:visited .bds-btn__icon-chevron { color: #141414 !important; stroke: #141414 !important; } html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black { color: #141414 !important; background-color: transparent !important; } html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black .bds-btn__icon-chevron { color: #141414 !important; stroke: #141414 !important; } html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:hover, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:focus, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:focus-visible, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:active, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:visited { color: #141414 !important; } html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:hover .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:hover .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:hover .bds-btn__icon-chevron, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:focus .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:focus .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:focus .bds-btn__icon-chevron, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:focus-visible .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:focus-visible .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:focus-visible .bds-btn__icon-chevron, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:active .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:active .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:active .bds-btn__icon-chevron, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:visited .bds-btn__icon, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:visited .bds-btn__icon-line, html.dark a.bds-btn.bds-btn--force-color.bds-btn--tertiary.bds-btn--black:visited .bds-btn__icon-chevron { color: #141414 !important; stroke: #141414 !important; } .bds-btn--tertiary { color: #0DAA3E; background-color: transparent; border: none; text-decoration: none; font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; font-size: 16px; line-height: 23.2px; letter-spacing: 0px; margin-bottom: 16px; } @media (min-width: 576px) { .bds-btn--tertiary { font-size: 16px; line-height: 23.2px; letter-spacing: 0px; margin-bottom: 16px; } } @media (min-width: 992px) { .bds-btn--tertiary { font-size: 18px; line-height: 26.1px; letter-spacing: -0.5px; margin-bottom: 16px; } } .bds-btn--tertiary { margin-bottom: 0; padding: 8px 20px; gap: 16px; } .bds-btn--tertiary.bds-btn--no-icon { padding: 8px 20px; } .bds-btn--tertiary::before { display: none; } .bds-btn--tertiary:hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { color: #078139; text-decoration: underline; padding: 8px 14px 8px 20px; gap: 22px; } .bds-btn--tertiary:hover:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { color: #078139; text-decoration: underline; } .bds-btn--tertiary:focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { color: #078139; text-decoration: underline; border-radius: 0; outline: 2px solid #141414; outline-offset: -2px; padding: 5px 2px 2px; gap: 22px; } .bds-btn--tertiary:focus-visible:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { color: #078139; text-decoration: underline; border-radius: 0; outline: 2px solid #141414; outline-offset: -2px; padding: 5px 2px 2px; } .bds-btn--tertiary:active:not(:disabled):not(.bds-btn--disabled) { color: #0DAA3E; text-decoration: underline; padding: 8px 20px; gap: 16px; } .bds-btn--tertiary:disabled, .bds-btn--tertiary.bds-btn--disabled { color: #8A919A; background-color: transparent; text-decoration: none; cursor: not-allowed; pointer-events: none; } .bds-btn--tertiary:disabled::before, .bds-btn--tertiary.bds-btn--disabled::before { display: none; } @media (max-width: 1279.98px) { .bds-btn--tertiary { padding: 8px 16px; gap: 16px; } .bds-btn--tertiary.bds-btn--no-icon { padding: 8px 16px; } .bds-btn--tertiary:hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { padding: 8px 11px 8px 16px; gap: 21px; } .bds-btn--tertiary:focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { color: #078139; text-decoration: underline; border-radius: 0; outline: 2px solid #141414; outline-offset: -2px; padding: 5px 2px 2px; gap: 21px; } .bds-btn--tertiary:focus-visible:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { color: #078139; text-decoration: underline; border-radius: 0; outline: 2px solid #141414; outline-offset: -2px; padding: 5px 2px 2px; } .bds-btn--tertiary:active:not(:disabled):not(.bds-btn--disabled) { padding: 8px 16px; gap: 16px; } } html.dark a.bds-btn.bds-btn--secondary.bds-btn--green { color: #21E46B; } html.dark a.bds-btn.bds-btn--secondary.bds-btn--green:hover, html.dark a.bds-btn.bds-btn--secondary.bds-btn--green:focus { color: #70EE97; } html.dark a.bds-btn.bds-btn--secondary.bds-btn--green:active, html.dark a.bds-btn.bds-btn--secondary.bds-btn--green:visited { color: #21E46B; } html.dark a.bds-btn.bds-btn--tertiary.bds-btn--green { color: #21E46B; } html.dark a.bds-btn.bds-btn--tertiary.bds-btn--green:hover, html.dark a.bds-btn.bds-btn--tertiary.bds-btn--green:focus { color: #70EE97; } html.dark a.bds-btn.bds-btn--tertiary.bds-btn--green:active, html.dark a.bds-btn.bds-btn--tertiary.bds-btn--green:visited { color: #21E46B; } html.dark .bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { outline: 2px solid #FFFFFF; outline-offset: 2px; padding: 8px 13px 8px 20px; gap: 22px; } html.dark .bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { outline: 2px solid #FFFFFF; outline-offset: 2px; padding: 8px 20px; } html.dark .bds-btn--primary:disabled, html.dark .bds-btn--primary.bds-btn--disabled { color: #72777E; background-color: #CAD4DF; cursor: not-allowed; pointer-events: none; } html.dark .bds-btn--primary:disabled::before, html.dark .bds-btn--primary.bds-btn--disabled::before { display: none; } @media (max-width: 1279.98px) { html.dark .bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { outline: 2px solid #FFFFFF; outline-offset: 2px; padding: 8px 10px 8px 16px; gap: 21px; } html.dark .bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { outline: 2px solid #FFFFFF; outline-offset: 2px; padding: 8px 16px; } } html.dark .bds-btn--secondary:not(.bds-btn--black) { color: #21E46B; border-color: #21E46B; } html.dark .bds-btn--secondary:not(.bds-btn--black)::before { background-color: #078139; } html.dark .bds-btn--secondary:not(.bds-btn--black):hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { color: #70EE97; border-color: #70EE97; padding: 6px 11px 6px 18px; gap: 22px; } html.dark .bds-btn--secondary:not(.bds-btn--black):hover:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { color: #70EE97; border-color: #70EE97; } html.dark .bds-btn--secondary:not(.bds-btn--black):focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { color: #70EE97; border: none; outline: 2px solid #FFFFFF; outline-offset: 2px; padding: 6px 13px 6px 20px; gap: 22px; } html.dark .bds-btn--secondary:not(.bds-btn--black):focus-visible:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { color: #70EE97; border: none; outline: 2px solid #FFFFFF; outline-offset: 2px; padding: 6px 20px; } html.dark .bds-btn--secondary:not(.bds-btn--black):active:not(:disabled):not(.bds-btn--disabled) { color: #21E46B; border-color: #21E46B; padding: 6px 17px 6px 18px; gap: 16px; } html.dark .bds-btn--secondary:not(.bds-btn--black):disabled, html.dark .bds-btn--secondary:not(.bds-btn--black).bds-btn--disabled { color: #8A919A; background-color: transparent; border-color: #8A919A; cursor: not-allowed; pointer-events: none; } html.dark .bds-btn--secondary:not(.bds-btn--black):disabled::before, html.dark .bds-btn--secondary:not(.bds-btn--black).bds-btn--disabled::before { display: none; } @media (max-width: 1279.98px) { html.dark .bds-btn--secondary:not(.bds-btn--black):hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { color: #70EE97; border-color: #70EE97; padding: 6px 8px 6px 14px; gap: 21px; } html.dark .bds-btn--secondary:not(.bds-btn--black):focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { color: #70EE97; border: none; outline: 2px solid #FFFFFF; outline-offset: 2px; padding: 6px 10px 6px 16px; gap: 21px; } html.dark .bds-btn--secondary:not(.bds-btn--black):focus-visible:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { color: #70EE97; border: none; outline: 2px solid #FFFFFF; outline-offset: 2px; padding: 6px 16px; } html.dark .bds-btn--secondary:not(.bds-btn--black):active:not(:disabled):not(.bds-btn--disabled) { color: #21E46B; border-color: #21E46B; padding: 6px 13px 6px 14px; gap: 16px; } } html.dark .bds-btn--tertiary:not(.bds-btn--black) { color: #21E46B; } html.dark .bds-btn--tertiary:not(.bds-btn--black):hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { color: #70EE97; text-decoration: underline; padding: 8px 14px 8px 20px; gap: 22px; } html.dark .bds-btn--tertiary:not(.bds-btn--black):hover:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { color: #70EE97; text-decoration: underline; } html.dark .bds-btn--tertiary:not(.bds-btn--black):focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { color: #70EE97; text-decoration: underline; border-radius: 0; outline: 2px solid #FFFFFF; outline-offset: -2px; padding: 5px 2px 2px; gap: 22px; } html.dark .bds-btn--tertiary:not(.bds-btn--black):focus-visible:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { color: #70EE97; text-decoration: underline; border-radius: 0; outline: 2px solid #FFFFFF; outline-offset: -2px; padding: 5px 2px 2px; } html.dark .bds-btn--tertiary:not(.bds-btn--black):active:not(:disabled):not(.bds-btn--disabled) { color: #21E46B; text-decoration: underline; padding: 8px 20px; gap: 16px; } html.dark .bds-btn--tertiary:not(.bds-btn--black):disabled, html.dark .bds-btn--tertiary:not(.bds-btn--black).bds-btn--disabled { color: #8A919A; background-color: transparent; text-decoration: none; cursor: not-allowed; pointer-events: none; } @media (max-width: 1279.98px) { html.dark .bds-btn--tertiary:not(.bds-btn--black):hover:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { color: #70EE97; text-decoration: underline; padding: 8px 11px 8px 16px; gap: 21px; } html.dark .bds-btn--tertiary:not(.bds-btn--black):focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) { color: #70EE97; text-decoration: underline; border-radius: 0; outline: 2px solid #FFFFFF; outline-offset: -2px; padding: 5px 2px 2px; gap: 21px; } html.dark .bds-btn--tertiary:not(.bds-btn--black):focus-visible:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon { color: #70EE97; text-decoration: underline; border-radius: 0; outline: 2px solid #FFFFFF; outline-offset: -2px; padding: 5px 2px 2px; } html.dark .bds-btn--tertiary:not(.bds-btn--black):active:not(:disabled):not(.bds-btn--disabled) { color: #21E46B; text-decoration: underline; padding: 8px 16px; gap: 16px; } } .bds-card-stat { display: flex; flex-direction: column; width: 100%; min-height: 200px; background-color: #C0A7FF; color: #141414; transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-card-stat__content { display: flex; flex-direction: column; justify-content: space-between; flex: 1; padding: 8px; gap: 4px; } @media (min-width: 576px) { .bds-card-stat__content { padding: 12px; } } @media (min-width: 992px) { .bds-card-stat__content { padding: 16px; } } .bds-card-stat__text { display: flex; flex-direction: column; gap: 8px; } .bds-card-stat__statistic { font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 300; font-size: 64px; line-height: 71px; letter-spacing: -4.5px; margin-bottom: 32px; } @media (min-width: 576px) { .bds-card-stat__statistic { font-size: 72px; line-height: 79px; letter-spacing: -5px; margin-bottom: 32px; } } @media (min-width: 992px) { .bds-card-stat__statistic { font-size: 92px; line-height: 112px; letter-spacing: -6px; margin-bottom: 32px; } } @media (min-width: 1280px) { .bds-card-stat__statistic { font-size: 112px; line-height: 112px; letter-spacing: -7px; margin-bottom: 32px; } } .bds-card-stat__statistic { margin-bottom: 0; } .bds-card-stat__statistic sup { top: -0.4em; font-size: 0.7em; } .bds-card-stat__buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; } .bds-card-stat--lilac { background-color: #C0A7FF; } .bds-card-stat--green { background-color: #21E46B; } .bds-card-stat--light-gray { background-color: #E6EAF0; } .bds-card-stat--dark-gray { background-color: #CAD4DF; } html.dark .bds-card-stat--light-gray { background-color: #CAD4DF; } html.dark .bds-card-stat--dark-gray { background-color: #8A919A; } .bds-card-stat { min-height: 200px; } @media (min-width: 576px) { .bds-card-stat { min-height: 208px; } } @media (min-width: 992px) { .bds-card-stat { min-height: 298px; } } @media (min-width: 992px) { .bds-grid__col-lg-3 .bds-card-stat { aspect-ratio: 1/1; min-height: unset; height: auto; } } /* TABLE STYLING */ article table { clear: right; margin-bottom: 48px; } article table code { word-break: normal; white-space: nowrap; overflow-wrap: normal; } article table th { border-bottom: 2px solid #E6EAF0; } article table tr { border-bottom: 1px solid #E6EAF0; } article table th, article table td { padding: 0.2em; vertical-align: text-top; } article table td:nth-child(1) { font-weight: bold; } .landing-table th, .landing-table tr { border-bottom: 2px solid #454549; } .landing-table td { width: 33.33%; padding: 16px 40px 16px 0; } .landing-table td:nth-child(1) { font-weight: normal; } @media (max-width: 575.98px) { .landing-table td { font-size: 0.875rem; } } .landing-table tr:last-child { border-bottom: none; } .landing-table tbody td { color: #E6EAF0; } .dblue { color: #454549; } #overview-table td:nth-child(1) { width: 40%; } #overview-table td:nth-child(2) { width: 30%; } #overview-table tbody td { padding: 2rem 0.75rem; } @media (max-width: 575.98px) { #overview-table { font-size: 0.875rem; } #overview-table thead .h4 { font-size: 1.125rem; } } /* Use Cases ---------------------------------------------------------------- */ .modal-uses.exchanges .logo-item { max-height: 58px; margin: 5px; width: 145px; height: 28px; max-width: none; } .modal-content-uses .carbonland-trust { max-width: 218px; } .modal-content-uses .first-ledger-bot { min-height: 100px !important; position: relative; bottom: 20px; content: url("../img/uses/first-ledger-bot.svg"); } .modal-content-uses .orchestra-finance { min-height: 56px !important; content: url("../img/uses/orchestra-finance.svg"); } .modal-content-uses .moai-finance { min-height: 100px !important; position: relative; bottom: 20px; content: url("../img/uses/moai-finance.svg"); } .modal-content-uses .ledger-city { margin: 0px !important; position: relative; bottom: 4px; left: 6px; max-height: 47px !important; } .modal-content-uses .zerpmon { margin: 0px; min-width: 80px; min-height: 84px; position: relative; bottom: 13px; content: url("../img/uses/zerpmon.png") !important; } #use_case_companies_list #threezy .biz-logo { max-height: 40px; content: url("../img/uses/modallogos/threezy.png"); } html.light .cryptum { content: url(../img/uses/lightmode/cryptum.jpg) !important; height: 58px; max-width: max-content; width: 184px; max-height: none; margin: 0px; padding-bottom: 10px; } .xrp-ledger { content: url(../img/uses/modallogos/xrp-ledger.png); } html.light .xrp-ledger { content: url(../img/uses/lightmode/xrp-ledger.png); } .gatehub { content: url(../img/uses/modallogos/gatehub.png); } html.light .gatehub { content: url(../img/uses/lightmode/gatehub.png); } .towolabs { content: url(../img/uses/modallogos/towolabs.png); } html.light .towolabs { content: url(../img/uses/lightmode/towolabs.png); } .xrpscan { content: url(../img/uses/modallogos/xrpscan.png); } html.light .xrpscan { content: url(../img/uses/lightmode/xrpscan.png); } .xrp-toolkit { content: url(../img/uses/modallogos/xrp-toolkit.png); } html.light .xrp-toolkit { content: url(../img/uses/lightmode/xrp-toolkit.png); } .bithomp { content: url(../img/uses/modallogos/bithomp.png); } html.light .bithomp { content: url(../img/uses/lightmode/bithomp.png); } .onthedex { content: url(../img/uses/modallogos/onthedex.png); } html.light .onthedex { content: url(../img/uses/lightmode/onthedex.png); } .cryptum { content: url(../img/uses/modallogos/cryptum.png); } html.light .cryptum { content: url(../img/uses/lightmode/cryptum.png); } .evernode { content: url(../img/uses/modallogos/evernode.png); } html.light .evernode { content: url(../img/uses/lightmode/evernode.png); } .threezy { content: url(../img/uses/modallogos/threezy.png); } html.light .threezy { content: url(../img/uses/lightmode/threezy.png); } .tokenize { content: url(../img/uses/modallogos/tokenize.png); } html.light .tokenize { content: url(../img/uses/lightmode/tokenize.png); } .multichain { content: url(../img/uses/modallogos/multichain.png); } html.light .multichain { content: url(../img/uses/lightmode/multichain.png); } .crossmark { content: url(../img/uses/modallogos/crossmark.png); } html.light .crossmark { content: url(../img/uses/lightmode/crossmark.png); } .edge { content: url(../img/uses/modallogos/edge.png); } html.light .edge { content: url(../img/uses/lightmode/edge.png); } .gem-wallet { content: url(../img/uses/modallogos/gem-wallet.png); } html.light .gem-wallet { content: url(../img/uses/lightmode/gem-wallet.png); } .xumm { content: url(../img/uses/modallogos/xumm.png); } html.light .xumm { content: url(../img/uses/lightmode/xumm.png); } .joey-wallet { content: url(../img/uses/modallogos/joey-wallet.png); } html.light .joey-wallet { content: url(../img/uses/lightmode/joey-wallet.png); } .aesthetes { content: url(../img/uses/modallogos/aesthetes.png); } html.light .aesthetes { content: url(../img/uses/lightmode/aesthetes.png); } .audiotarky { content: url(../img/uses/modallogos/audiotarky.png); } html.light .audiotarky { content: url(../img/uses/lightmode/audiotarky.png); } .nftmaster { content: url(../img/uses/modallogos/nftmaster.png); } html.light .nftmaster { content: url(../img/uses/lightmode/nftmaster.png); } .peerkat { content: url(../img/uses/modallogos/peerkat.png); } html.light .peerkat { content: url(../img/uses/lightmode/peerkat.png); } .sologenic_dex { content: url(../img/uses/modallogos/sologenic_dex.png); } html.light .sologenic_dex { content: url(../img/uses/lightmode/sologenic_dex.png); } .xrp-cafe { content: url(../img/uses/modallogos/xrp-cafe.png); } html.light .xrp-cafe { content: url(../img/uses/lightmode/xrp-cafe.png); } .xrp-oval { content: url(../img/uses/modallogos/xrp-oval.png); } html.light .xrp-oval { content: url(../img/uses/lightmode/xrp-oval.png); } .sologenic_dex { content: url(../img/uses/modallogos/sologenic_dex.png); } html.light .sologenic_dex { content: url(../img/uses/lightmode/sologenic_dex.png); } .xpmarket { content: url(../img/uses/modallogos/xpmarket.png); } html.light .xpmarket { content: url(../img/uses/lightmode/xpmarket.png); } .orchestra-finance { content: url(../img/uses/modallogos/orchestra-finance.png); } html.light .orchestra-finance { content: url(../img/uses/lightmode/orchestra-finance.png); } .moai-finance { content: url(../img/uses/modallogos/moai-finance.png); } html.light .moai-finance { content: url(../img/uses/lightmode/moai-finance.png); } .first-ledger-bot { content: url(../img/uses/modallogos/first-ledger-bot.png); } html.light .first-ledger-bot { content: url(../img/uses/lightmode/first-ledger-bot.png); } .forte { content: url(../img/uses/modallogos/forte.png); } html.light .forte { content: url(../img/uses/lightmode/forte.png); } .ledger-city { content: url(../img/uses/modallogos/ledger-city.png); } html.light .ledger-city { content: url(../img/uses/lightmode/ledger-city.png); } .futureverse { content: url(../img/uses/modallogos/futureverse.png); } html.light .futureverse { content: url(../img/uses/lightmode/futureverse.png); } .zerpmon { content: url(../img/uses/modallogos/zerpmon.png); } html.light .zerpmon { content: url(../img/uses/lightmode/zerpmon.png); } .anchain { content: url(../img/uses/modallogos/anchain.png); } html.light .anchain { content: url(../img/uses/lightmode/anchain.png); } .ripple { content: url(../img/uses/modallogos/ripple.png); } html.light .ripple { content: url(../img/uses/lightmode/ripple.png); } .supermojo { content: url(../img/uses/modallogos/supermojo.png); } html.light .supermojo { content: url(../img/uses/lightmode/supermojo.png); } .ripple { content: url(../img/uses/modallogos/ripple.png); } html.light .ripple { content: url(../img/uses/lightmode/ripple.png); } .carbonland-trust { content: url(../img/uses/modallogos/carbonland-trust.png); } html.light .carbonland-trust { content: url(../img/uses/lightmode/carbonland-trust.png); } .gatehub { content: url(../img/uses/modallogos/gatehub.png); } html.light .gatehub { content: url(../img/uses/lightmode/gatehub.png); } .bitgo { content: url(../img/uses/modallogos/bitgo.png); } html.light .bitgo { content: url(../img/uses/lightmode/bitgo.png); } .arrow-button.left-arrow img { content: url(../img/uses/left-arrow.svg); } .arrow-button.right-arrow img { content: url(../img/uses/right-arrow.svg); } .right-arrow-button.right-arrow img { background-color: transparent; border: none; cursor: pointer; } .html.light .arrow-button.left-arrow img { content: url(../img/uses/left-arrow-light.svg); } .html.light .arrow-button.right-arrow img { content: url(../img/uses/right-arrow-light.svg); } .related-tasks-links a { color: #454549; text-decoration: none; } .related-tasks-links a:hover { color: #141414; } .arrows-container { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; z-index: 10; } @media only screen and (max-width: 768px) { .arrows-container { top: 30px; } } .arrow-button { background-color: transparent; border: none; cursor: pointer; } .arrow-button img { width: 40px; height: 40px; } .left-arrow { margin-left: 40px; } @media only screen and (max-width: 768px) { .left-arrow { margin-left: 0px; } } .right-arrow { margin-right: 40px; } @media only screen and (max-width: 768px) { .right-arrow { margin-right: 0px; } } .modal-uses { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); } .modal-content-uses { padding-top: 40px; position: relative; background-color: #232325; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 40px 20px 20px 20px; width: 60% !important; height: 520px; display: flex; flex-direction: column; align-items: center; overflow-y: hidden; } @media only screen and (max-width: 1024px) { .modal-content-uses { overflow-y: auto; } } .modal-content-uses::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, #b480ff -0.32%, #5f00e6 32.7%, #1aa4ff 61.53%, #19ff83 100.32%, #19ff83 100.32%); } .content-section { width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; } .section-image { display: block; } .section-text-title { font-style: normal; font-weight: 500; font-size: 24px; line-height: 32px; text-align: center; color: #ffffff; } .section-text-description { max-width: 320px; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; color: #c1c1c2; } .apps-built { position: relative; top: 17px; left: 50px; font-style: normal; font-weight: 600; font-size: 12px; line-height: 16px; color: #e0e0e1; } .numbers-animation { width: 218px; height: 96px; } .arrow-animation { position: relative; right: 23px; top: -11px; width: 60px !important; } .explore-projects { font-style: normal; font-weight: 600; font-size: 12px; line-height: 16px; color: #7919ff; position: relative; top: -9px; right: 27px; } .section-separator { width: 50%; border: 0; border-top: 1px solid #ccc; } .logo-item.anchain { height: 34px !important; max-width: 146px !important; } .threezy-logo { margin: 4px; max-height: 55px !important; } .blockforce-logo { margin: 0px !important; max-height: 45px !important; } .Evernode-logo { margin-right: 39px; } .logo-grid { display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(4, 1fr); grid-gap: 8px; justify-items: center; } .flex-center { display: flex; justify-content: center; } .top-row, .bottom-row { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; } @media only screen and (max-width: 768px) { .top-row, .bottom-row { justify-content: space-around; gap: 10px; margin-bottom: 0; } } .top-row { margin-bottom: 10px; } .bottom-row { margin-top: 10px; } .logo-item { max-height: 45px; max-width: 108px; margin: 5px; } .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } #use-case-card-grid { grid-template-columns: repeat(2, 1fr); } @media (min-width: 576px) { #use-case-card-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 992px) { #use-case-card-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1220px) and (min-width: 1024px) { #use-case-card-grid { grid-template-columns: repeat(3, 1fr); } } .use-case-circle { display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; border: 1px solid #343437; border-radius: 50%; margin-bottom: 30px; cursor: pointer; } @media (min-width: 576px) { .use-case-circle { aspect-ratio: 1/1; min-width: 200px !important; min-height: 200px !important; } } @media (min-width: 992px) { .use-case-circle { aspect-ratio: 1/1; min-width: 250px !important; min-height: 250px !important; } } .use-case-circle:hover { border-color: #838386; } .circle-content { display: flex; flex-direction: column; align-items: center; gap: 13px; /* Adjust the space between the elements */ } .circle-img { width: 40px; height: 40px; } .circle-text { font-style: normal; font-weight: 700; white-space: nowrap; font-size: 16px; margin-bottom: 0px; } .join-xrpl-section { display: flex; flex-direction: column; align-items: center; } .colorful-join-text-wrapper { display: flex; justify-content: center; flex-direction: column; padding: 0 5%; /* Percentage-based padding to make it responsive */ box-sizing: border-box; } @media (min-width: 992px) { .colorful-join-text-wrapper { padding: 0 4%; /* Percentage-based padding to make it responsive */ } } .colorful-join-text { display: block; width: 100%; text-align: left; font-style: normal; font-weight: 400; font-size: 32px; line-height: 38px; background: linear-gradient(90deg, #feff01 0%, #ff2d9a 30.82%, #e24cff 64.01%, #9a52ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } #numbersAnimation { display: block; } #numbersAnimationLight { display: none; } html.light .section-separator { background: #c1c1c2; } html.light .section-text-description { color: #343437; } html.light .modal-content-uses { background: #ffffff; } html.light #numbersAnimation { display: none; } html.light #numbersAnimationLight { display: block; } html.light .apps-built { position: relative; top: 17px; left: 50px; font-style: normal; font-weight: 600; font-size: 12px; line-height: 16px; color: #232325; } html.light .colorful-join-text { display: block; width: 100%; text-align: left; font-style: normal; font-weight: 400; font-size: 32px; line-height: 38px; background: linear-gradient(90deg, #b480ff -0.32%, #5f00e6 32.7%, #1aa4ff 61.53%, #19ff83 100.32%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @media (min-width: 992px) { html.light .colorful-join-text { width: 750px; } } @media (min-width: 992px) { .colorful-join-text { width: 750px; } } .pill-box { display: inline-flex; align-items: center; justify-content: center; padding: 3.69087px 29.527px; width: 73.05px; height: 37.38px; /* Blue-Purple/Blue-Purple 50 */ background: #7919ff; /* Blue-Purple/Blue-Purple 60 */ border: 3.69087px solid #5f00e5; border-radius: 184.543px; } .pill-number { font-style: normal; font-weight: 600; font-size: 22.1452px; color: #f0e5ff; } .use-case-steps h2, .use-case-steps .h2 { margin-top: 10px; margin-bottom: 10px; font-size: 1.728em; line-height: 32px; font-weight: 700; } .use-case-steps h2 a, .use-case-steps .h2 a { text-decoration: none; } .use-case-steps h2:first-of-type:before, .use-case-steps .h2:first-of-type:before { display: none; } .use-case h1, .use-case .h1 { font-size: 2.4em; padding-bottom: 10px; } .use-case-steps h2:before, .use-case-steps .h2:before { margin-top: -30px; height: 0; } .use-case-steps h2:first-of-type, .use-case-steps .h2:first-of-type { margin-top: -30px; } .related-tasks-links ul { list-style-type: none; padding-left: 0; } .related-tasks-links ul li { margin: 0px; padding-top: 2px; } .related-tasks-links a:hover::after { padding-left: 0.5em; } .related-tasks-links a::after { content: " ➝"; padding-left: 0; transition: all 0.2s ease-in-out; } .page-tokenization .tokenization-graphic { content: url("../img/backgrounds/tokenization-illustration.svg"); width: 100%; height: 100%; } .page-tokenization .show-md { display: none; } @media (max-width: 575.98px) { .page-tokenization .show-md { display: block; } } .page-tokenization .hide-md { display: block; } @media (max-width: 575.98px) { .page-tokenization .hide-md { display: none; } } .page-tokenization .tokenization-use-case { font-size: 12px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #454549; } .page-tokenization .tokenization-use-case .arrow-button img { width: 15px; height: 15px; } .page-tokenization .tokenization-stats { width: 100%; height: 250px; border-radius: 8px; background: linear-gradient(88deg, #9A52FF -14.32%, #32E685 45.35%, #19A3FF 100.76%); padding: 4rem 2rem; display: grid; grid-template-columns: repeat(4, 1fr); } @media (max-width: 575.98px) { .page-tokenization .tokenization-stats { display: block; height: 100%; width: 100%; padding: 0 25%; } } .page-tokenization .stat-container { color: #141414; text-align: center; border-right: 2px solid black; } @media (max-width: 575.98px) { .page-tokenization .stat-container { border-right: none; padding-bottom: 3rem; padding-top: 2rem; border-bottom: 2px solid black; } } .page-tokenization .stat-container:last-child { border: none; } .page-tokenization .stat-container .stat { font-size: 3rem; font-weight: 300; } .page-tokenization .stat-container p { font-weight: 400; } .page-tokenization .video-external-link .link-text { margin-left: 0.25rem; } .page-tokenization .video-external-link { margin-bottom: 9px; } .page-tokenization .tokenization-color-bar { align-self: stretch; height: 0.25rem; border-radius: 2rem; background: var(--Gradient-3, linear-gradient(90deg, #FEFF01 0%, #FF2D9A 30.82%, #E24CFF 64.01%, #9A52FF 100%)); } .page-tokenization .project-cards-container { gap: 3rem; } .page-tokenization .project-cards { width: 100%; } .page-tokenization .project-cards .project-name { word-break: break-word; } .page-tokenization .project-cards .card { min-height: 240px; } .page-tokenization .project-cards .col::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 0.25rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .page-tokenization .project-cards .col.odd::before { background: linear-gradient(90deg, #D91AFF 26.41%, #1AA4FF 100.32%); } .page-tokenization .project-cards .col.even::before { background: linear-gradient(90deg, #4BB7FF -0.32%, #32E685 30.61%); } .page-tokenization .project-cards .project-logo { width: 100%; height: 50px; vertical-align: center; padding: 0 0.5rem; } .page-tokenization .project-cards img { max-width: 100%; height: auto; display: block; box-sizing: border-box; } .page-tokenization .amy { content: url("../img/logos/amy.svg"); } .page-tokenization .carbonland { content: url("../img/logos/carbonland.svg"); } .page-tokenization .evernode { content: url("../img/logos/evernode.svg"); } .page-tokenization .nautilus { content: url("../img/logos/nautilus.svg"); } .page-tokenization .onXRP { content: url("../img/logos/onXRP.svg"); } .page-tokenization .raised-in-space { content: url("../img/logos/raised-in-space.svg"); } .page-tokenization .sologenic { content: url("../img/logos/sologenic.svg"); } .page-tokenization .xaman { content: url("../img/logos/xaman-labs.svg"); } .page-tokenization .xrpcafe { content: url("../img/logos/xrpcafe.svg"); } .page-tokenization .prev img { content: url("../img/icons/prev.svg"); } .page-tokenization .next img { content: url("../img/icons/prev.svg"); transform: scaleX(-1); } .page-tokenization .arrow-wrapper { gap: 1rem; } .page-tokenization .arrow-button { background-color: #232325; border-radius: 0.25rem; align-items: center; justify-content: center; } .page-tokenization .next.hover-color:hover img { content: url("../img/icons/next-purple.svg"); transform: scaleX(1); } .page-tokenization .prev.hover-color:hover img { content: url("../img/icons/next-purple.svg"); transform: scaleX(-1); } .page-tokenization .related-articles { gap: 2.5rem; } .page-tokenization .related-articles .col { background-color: #141414; padding: 2rem !important; border-radius: 0.5rem; } .page-tokenization .related-articles .time { position: relative; padding-top: 0.5rem; } .page-tokenization .related-articles .time::before { content: ""; position: absolute; top: 0; left: 0; width: 50px; height: 4px; background-color: #32E685; } .page-tokenization .project-cards a, .page-tokenization .related-articles a { text-decoration: none; } .page-tokenization .project-cards a:hover .project-name { color: #7649E3; } .page-tokenization .related-articles a:hover .h5 { color: #7649E3; } .page-tokenization .article-card-container { position: relative; width: 100%; } .page-tokenization .article-card-container:nth-child(1) .article-card-background { background-image: linear-gradient(86deg, #B20058 -21.16%, #E24CFF 31.78%, #9A52FF 101.64%); } .page-tokenization .article-card-container:nth-child(2) .article-card-background { background-image: linear-gradient(22deg, #B480FF -6.54%, #5F00E5 50.87%, #1AA4FF 114.16%); } .page-tokenization .article-card-container:nth-child(3) .article-card-background { background-image: linear-gradient(162deg, #B480FF -11.11%, #1AA4FF 56.26%, #2DCF78 112.84%); } .page-tokenization .article-card-background { height: calc(100% + 1.5rem); width: 100%; z-index: 1; background-size: cover; position: absolute; top: -0.75rem; border-radius: 0.5rem; } .page-tokenization .article-card { width: 100%; height: 100%; position: relative; top: 0; left: 0.75rem; z-index: 2; display: block; } body, .landing.page-uses { overflow-x: hidden; } .use-case-payments { padding: 0px 120px; } @media (max-width: 991.98px) { .use-case-payments { padding: 0px 16px; } } .use-case-payments__hero { display: flex; flex-direction: row; justify-content: center; gap: 80px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 80px 0px; } @media (max-width: 991.98px) { .use-case-payments__hero { gap: 60px; max-width: 942px; padding: 80px 0px; } } @media (max-width: 575.98px) { .use-case-payments__hero { flex-direction: column; gap: 32px; max-width: 608px; padding: 60px 0px; } } @media (max-width: 575.98px) { .use-case-payments__hero { padding: 40px 0px; } } .use-case-payments .video-content { width: 50%; display: flex; align-items: stretch; } .use-case-payments .video-content iframe { width: 100%; height: 100%; min-height: 380px; max-height: 560px; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } @media (max-width: 991.98px) { .use-case-payments .video-content iframe { min-height: 350px; max-height: 450px; } } @media (max-width: 575.98px) { .use-case-payments .video-content iframe { min-height: 300px; max-height: 400px; } } @media (max-width: 575.98px) { .use-case-payments .video-content iframe { min-height: 250px; max-height: 350px; } } @media (max-width: 575.98px) { .use-case-payments .video-content { width: 100%; } } .use-case-payments .text-content { width: 50%; display: flex; flex-direction: column; justify-content: center; } .use-case-payments .text-content .eyebrow { font-size: 18px; font-style: normal; font-weight: 700; } @media (max-width: 575.98px) { .use-case-payments .text-content .eyebrow { font-size: 16px; } } .use-case-payments .text-content .eyebrow h2, .use-case-payments .text-content .eyebrow .h2 { font-size: 42px; font-style: normal; font-weight: 700; } @media (max-width: 575.98px) { .use-case-payments .text-content .eyebrow h2, .use-case-payments .text-content .eyebrow .h2 { font-size: 32px; } } .use-case-payments .text-content .eyebrow p { font-size: 24px; font-style: normal; font-weight: 400; } @media (max-width: 575.98px) { .use-case-payments .text-content .eyebrow p { font-size: 18px; } } @media (max-width: 575.98px) { .use-case-payments .text-content { width: 100%; } } /* Shared styles for AdvantagesSection component - used across multiple pages */ .advantages-section { /* Work-around for border gradient and radius */ } .advantages-section .security-card { position: relative; border-radius: 0.5rem; background-color: transparent; white-space: normal; box-sizing: border-box; } .advantages-section .security-card .card-title { margin-bottom: 16px; } .advantages-section .security-card::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; padding: 1px; background: linear-gradient(90deg, #d91aff 26.41%, #1aa4ff 100.32%); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor; z-index: -1; } .advantages-section .security-card p { margin-bottom: 0 !important; } @media (max-width: 575.98px) { .advantages-section .security-card .h6 { font-size: 1.25rem; } } .advantages-section .security-card-grid, .advantages-section .security-card-grid-3, .advantages-section .security-card-grid-4 { gap: 1rem; grid-template-columns: repeat(2, 1fr); } @media (max-width: 768px) { .advantages-section .security-card-grid, .advantages-section .security-card-grid-3, .advantages-section .security-card-grid-4 { grid-template-columns: repeat(1, 1fr); } } @media (min-width: 1200px) { .advantages-section .security-card-grid { grid-template-columns: repeat(4, 1fr); } } .advantages-section .security-card-grid-3 { gap: 2.5rem; /* 40px gap for 3-column layout */ } @media (min-width: 1200px) { .advantages-section .security-card-grid-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .advantages-section .security-card-grid-4 { grid-template-columns: repeat(4, 1fr); } } .advantages-section { /* Bullet point styles for payments page */ } .advantages-section .advantages-list { list-style: none; padding: 0; margin: 0; } .advantages-section .advantage-item { position: relative; padding-left: 20px; margin-bottom: 16px; } .advantages-section .advantage-item::before { content: "•"; position: absolute; left: 0; top: 0; font-weight: bold; font-size: 16px; } .advantages-section .advantage-item strong { display: block; margin-bottom: 4px; color: #E0E0E1; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; /* 150% */ } .advantages-section .advantage-item .advantage-description { display: block; color: #E0E0E1; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; /* 150% */ } .advantages-section { /* Card title typography for bullet version */ } .advantages-section .security-card .card-title { color: var(--Black-Black-0, #FFF); font-size: 18px; font-style: normal; font-weight: 700; line-height: 125%; /* 22.5px */ } /* Specific spacing for payments page between hero and advantages sections */ .use-case-payments .payments-advantages-spacing { padding-top: 80px; /* Reduced since hero now has proper py-20 spacing */ padding-bottom: 20px; /* Keep standard bottom padding */ padding-right: 0px; padding-left: 0px; } /* Project cards styles for payments page */ .use-case-payments .payments-projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 40px; /* 40px horizontal, 48px vertical */ row-gap: 48px; } @media (min-width: 1200px) { .use-case-payments .payments-projects-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .use-case-payments .payments-projects-grid { grid-template-columns: repeat(1, 1fr); gap: 40px; } } .use-case-payments .payments-project-card { min-height: 260px; position: relative; padding: 32px; } .use-case-payments .payments-project-card .project-description { text-align: left; /* Changed from center to left */ } .use-case-payments .payments-project-card .project-description .first-word { color: #FFF; font-size: 16px; font-style: normal; font-weight: 700; line-height: 24px; /* 150% */ } .use-case-payments .payments-project-card .project-description .rest-text { color: var(--XRPL-Primary-White, #FFF); font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .use-case-payments .payments-project-card { /* Add the top border gradient for payments page */ } .use-case-payments .payments-project-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 0.25rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .use-case-payments .payments-project-card { /* Stablecoin images */ } .use-case-payments .payments-project-card .project-logo { margin-Bottom: 32px; } .use-case-payments .payments-project-card .project-logo img.ripple-usd { content: url("../img/uses/payments/rlusd.png"); width: 180px; height: 50px; } .use-case-payments .payments-project-card .project-logo img.usdc { content: url("../img/uses/payments/usdc.png"); width: 50px; height: 50px; } .use-case-payments .payments-project-card .project-logo img.usdb { content: url("../img/uses/payments/usdb.png"); width: 126px; height: 50px; } .use-case-payments .payments-project-card .project-logo img.europ { content: url("../img/uses/payments/eroup.png"); width: 147px; height: 50px; } .use-case-payments .payments-project-card .project-logo img.xsgd { content: url("../img/uses/payments/XSGD.png"); width: 50px; height: 50px; } .use-case-payments .payments-project-card .project-logo img.audd { content: url("../img/uses/payments/AUDD.png"); width: 50px; height: 50px; } .use-case-payments .payments-project-card { /* Alternating gradients for payments page */ } .use-case-payments .payments-project-card.odd::before { background: linear-gradient(90deg, #D91AFF 26.41%, #1AA4FF 100.32%); } .use-case-payments .payments-project-card.even::before { background: linear-gradient(90deg, #4BB7FF -0.32%, #32E685 30.61%); } /* Battle-tested section styles */ .use-case-payments .battle-tested-section h4.eyebrow, .use-case-payments .battle-tested-section .eyebrow.h4 { font-size: 28px !important; } .use-case-payments .battle-tested-section .payments-project-card { /* Override styles for battle-tested cards */ min-height: 384px; display: flex; flex-direction: column; } .use-case-payments .battle-tested-section .payments-project-card .project-logo img { /* Battle-tested company logos */ } .use-case-payments .battle-tested-section .payments-project-card .project-logo img.coinpayments { content: url("../img/uses/payments/coinpayments.png"); width: 99px; height: 60px; } .use-case-payments .battle-tested-section .payments-project-card .project-logo img.ripple { content: url("../img/uses/payments/ripple-white.png"); width: 100px; height: 26px; margin-bottom: 11px; margin-top: 19px; } .use-case-payments .battle-tested-section .payments-project-card .project-logo img.friipay { content: url("../img/uses/payments/friipay.png"); width: 60px; height: 60px; } .use-case-payments .battle-tested-section .payments-project-card .project-description { flex-grow: 1; } .use-case-payments .battle-tested-section .payments-project-card .project-button { margin-top: auto; padding-top: 32px; display: flex; justify-content: center; } .use-case-payments .battle-tested-section .payments-project-card .project-button .battle-tested-arrow { color: #9A52FF; font-size: 16px; font-style: normal; font-weight: 700; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; background: none !important; } .use-case-payments .battle-tested-section .payments-project-card .project-button .battle-tested-arrow::after { position: relative; top: -1px; display: inline-block; content: url("../img/icons/arrow-right-purple.svg"); margin-left: 8px; transition: transform 0.3s ease-out; width: 16px; height: 16px; } .use-case-payments .battle-tested-section .payments-project-card .project-button .battle-tested-arrow:hover { text-decoration: none; background: none !important; } .use-case-payments .battle-tested-section .payments-project-card .project-button .battle-tested-arrow:hover::after { transform: translateX(4px); } .use-case-payments .battle-tested-section .payments-project-card .project-button .battle-tested-arrow:focus { background: none !important; outline: none; } /* Payments integration section styling */ .use-case-payments .payments-integration-section .developer-tools { padding: 120px 0; /* Slightly less padding than default 180px */ max-width: 1280px; margin: 0 auto; } @media (max-width: 991.98px) { .use-case-payments .payments-integration-section .developer-tools { max-width: 942px; } } @media (max-width: 575.98px) { .use-case-payments .payments-integration-section .developer-tools { max-width: 608px; } } .use-case-payments .payments-integration-section .developer-tools .container { padding: 0; } .use-case-payments .payments-integration-section .developer-tools .feature-item__title { font-size: 16px; font-weight: 400; color: #FFF; } .use-case-payments .payments-integration-section .developer-tools__header { margin-bottom: 80px; } .use-case-payments .payments-integration-section .developer-tools__header.text-center { text-align: center; } .use-case-payments .payments-integration-section .developer-tools__title { font-size: 28px; font-weight: 700; margin-bottom: 0; text-align: left; } .use-case-payments .payments-integration-section { /* Two-column layout with 48px gap */ } .use-case-payments .payments-integration-section .row { gap: 48px; margin: 0; display: flex; flex-wrap: wrap; } @media (max-width: 991px) { .use-case-payments .payments-integration-section .row { flex-direction: column; gap: 32px; } } .use-case-payments .payments-integration-section .row .col-lg-6 { padding: 0; flex: 1; } @media (max-width: 991px) { .use-case-payments .payments-integration-section .row .col-lg-6 { flex: none; width: 100%; } } .use-case-payments .payments-integration-section { /* Integration column styling */ } .use-case-payments .payments-integration-section .integration-column { padding: 0px; } .use-case-payments .payments-integration-section .integration-column .integration-column__title { color: #FFF; font-size: 20px; font-weight: 700; margin-bottom: 0px; } .use-case-payments .payments-integration-section .integration-column .integration-column__subtitle { color: #E0E0E1; font-size: 16px; font-weight: 400; line-height: 150%; margin-bottom: 32px; } .use-case-payments .payments-integration-section .integration-column .developer-tools__list { margin-top: 0; } .use-case-payments .payments-integration-section { /* Responsive adjustments */ } @media (max-width: 991px) { .use-case-payments .payments-integration-section .developer-tools { padding: 80px 0; } .use-case-payments .payments-integration-section .developer-tools__header { margin-bottom: 60px; } .use-case-payments .payments-integration-section .integration-column { padding: 0; margin-bottom: 40px; } .use-case-payments .payments-integration-section .col-lg-6:last-child .integration-column { margin-bottom: 0; } } @media (max-width: 767px) { .use-case-payments .payments-integration-section .developer-tools { padding: 60px 20px; } .use-case-payments .payments-integration-section .developer-tools__header { margin-bottom: 40px; } .use-case-payments .payments-integration-section .developer-tools__title { font-size: 24px; text-align: center; } } .dark [data-component-name="Breadcrumbs/Breadcrumbs"] + div > a > svg > rect { fill: transparent; } /* Top navigation ----------------------------------------------------------- */ [data-component-name="layouts/RootLayout"] { padding-top: 80px; } .top-nav { background-color: #111112; height: 80px; padding: 0; } .top-nav .navbar-brand { text-decoration: none; white-space: pre; -webkit-transition: opacity 0.2s ease, color 0.2s ease; transition: opacity 0.2s ease, color 0.2s ease; padding-left: 2rem; } .top-nav .navbar-brand .logo { margin-left: 0; content: url(../img/XRPLedger_DevPortal-white.svg); width: 162px; height: 40px; display: block; } .top-nav .navbar-brand:hover { opacity: 0.75; } @media (max-width: 575.98px) { .top-nav .navbar-brand { padding-left: 2rem; } .top-nav .navbar-brand img { width: 120px; } } .top-nav .nav-item { font-weight: 600; } @media (min-width: 992px) { .top-nav #topnav-pages { flex-grow: 1; } } .top-nav #topnav-pages .nav-link { color: #F0F3F7; font-size: 1rem; line-height: 1.25rem; text-decoration: none; font-weight: 600; } .top-nav .dropdown-toggle { position: relative; } .top-nav .dropdown-menu { border-width: 0; } .top-nav .dropdown-menu h5, .top-nav .dropdown-menu .h5 { font-weight: 400; font-size: 12px; color: #8A919A; margin-bottom: 0; } .top-nav .dropdown-menu .dropdown-item { line-height: 1rem; padding: 0.75rem 0; white-space: normal; } .top-nav .dropdown-menu .dropdown-item.dropdown-hero { width: 100%; display: flex; padding: 1rem 2rem; } .top-nav .dropdown-menu .dropdown-item.dropdown-hero > img { width: 68px; height: 68px; background-color: #232325; border-radius: 4px; flex-grow: 0; padding: 0.75rem; margin-right: 2rem; margin-top: auto; margin-bottom: auto; } .top-nav .dropdown-menu .dropdown-item.dropdown-hero p { font-size: 14px; color: #CAD4DF; margin: 0; white-space: normal; } .top-nav .dropdown-menu .dropdown-item.dropdown-hero h4, .top-nav .dropdown-menu .dropdown-item.dropdown-hero .h4 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0; line-height: 2rem; } .top-nav .dropdown-menu .dropdown-item.dropdown-hero:hover h4, .top-nav .dropdown-menu .dropdown-item.dropdown-hero:hover .h4 { color: #7649E3; } .top-nav .dropdown-menu .dropdown-item.dropdown-hero:hover p { font-weight: 400; } .top-nav .dropdown-menu .dropdown-item:last-child { padding-bottom: 0; } .top-nav .dropdown-menu .dropdown-item:first-child { padding-top: 0; } .top-nav .dropdown-menu .col-for-get_started { background-color: #232325; } .top-nav .dropdown-menu a:hover { color: #7649E3; background-color: inherit; } .top-nav .dropdown-menu h5:hover, .top-nav .dropdown-menu .h5:hover { background-color: inherit; } .top-nav #topnav-search { flex-grow: 1; } .top-nav #topnav-search .input-group { flex-grow: 1; flex-wrap: nowrap; } @media (max-width: 575.98px) { .top-nav #topnav-search .form-inline { padding: 1rem 2rem; } } .top-nav #topnav-search .input-group-text { height: 40px; } .top-nav #topnav-search .ds-input { height: 40px; } .top-nav #topnav-language .dropdown-item { font-weight: 600; } @media (min-width: 992px) { .top-nav { padding: 0 2rem; } .top-nav .navbar-brand { margin-left: 0; padding-left: 0; } .top-nav .dropdown-toggle::after { display: none; } .top-nav .dropdown-toggle > span { border-bottom: 2px solid transparent; } .top-nav .dropdown .dropdown-toggle:hover > span:not(.chevron) { padding-bottom: 8px; border-bottom: 2px solid #7649E3; margin-bottom: -8px; } .top-nav .dropdown-menu { border-radius: 0 0 8px 8px; padding: 2.5rem; } .top-nav .dropdown-menu .dropdown-item.dropdown-hero { padding: 0; } .top-nav .dropdown-menu.show { display: grid; gap: 40px; } .top-nav .dropdown-menu.show#topnav_dd_about { grid-template-columns: 180px 180px 180px; } .top-nav .dropdown-menu.show#topnav_dd_docs { grid-template-columns: 180px 180px 260px; left: -200px; } .top-nav .dropdown-menu.show#topnav_dd_community { grid-template-columns: 200px; } .top-nav .dropdown-menu.show#topnav_dd_resources { grid-template-columns: 195px 180px 180px; left: -200px; } .top-nav .dropdown-menu.show .dropdown-hero { grid-row: 1; grid-column: 1/4; } .top-nav .dropdown-menu.show #dropdown-hero-for-docs { grid-column: 1/3; } .top-nav .dropdown-menu.show .col-for-xrp_ledger { grid-row: 1/3; grid-column: 1; } .top-nav .dropdown-menu.show .col-for-xrp { grid-column: 2; } .top-nav .dropdown-menu.show .col-for-sustainability, .top-nav .dropdown-menu.show .col-for-持続可能性 { grid-column: 2; } .top-nav .dropdown-menu.show .col-for-about, .top-nav .dropdown-menu.show .col-for-概要 { grid-row: 1/3; grid-column: 3; } .top-nav .dropdown-menu.show .col-for-article_types { grid-column: 1; grid-row: 2; } .top-nav .dropdown-menu.show .col-for-use_cases { grid-column: 2; grid-row: 2; } .top-nav .dropdown-menu.show .col-for-get_started { grid-column: 3; grid-row: 1/3; margin: -40px -40px -40px 0; padding: 40px; } .top-nav .dropdown-menu.show .col-for-development { grid-column: 1; } .top-nav .dropdown-menu.show .col-for-current-status, .top-nav .dropdown-menu.show .col-for-現在のステータス { grid-column: 2; } .top-nav .dropdown-menu.show .col-for-join-in, .top-nav .dropdown-menu.show .col-for-参加する { grid-column: 3; } .top-nav .dropdown-menu.smaller-dropdown { min-width: 180px; padding: 1.25rem; } .top-nav #topnav-pages { flex-grow: 0; } } @media (min-width: 992px) and (min-width: 992px) and (max-width: 1133px) { .top-nav #topnav-pages .nav-link { padding: 1rem 1rem; } } @media (min-width: 992px) { .top-nav #topnav-language { flex-grow: 0; } .top-nav #topnav-language hr { display: none; } .top-nav #topnav-language #language_selector_header_btn { padding-right: 0; } } @media (min-width: 992px) and (min-width: 992px) and (max-width: 1133px) { .top-nav #topnav-language #language_selector_header_btn { padding-left: 1rem; } } @media (min-width: 992px) and (min-width: 1280px) { .top-nav #topnav-search { margin-left: 3.5rem; margin-right: 0.5rem; } .top-nav #topnav-language { margin-right: 0.5rem; } .top-nav #topnav-button { margin-left: 0.2rem; margin-right: 1rem; } } @media (max-width: 575.98px) { .top-nav .navbar-toggler { border: 0; padding: 30px 2rem; font-size: 1rem; display: inline-block; } .top-nav .navbar-toggler .navbar-toggler-icon { background: none; height: 20px; width: 20px; position: relative; } .top-nav .navbar-toggler .navbar-toggler-icon::after, .top-nav .navbar-toggler .navbar-toggler-icon::before, .top-nav .navbar-toggler .navbar-toggler-icon div { position: absolute; content: " "; background-color: #F0F3F7; display: block; width: 100%; height: 3px; transition: all 0.2s ease; } .top-nav .navbar-toggler .navbar-toggler-icon::before { top: 0; } .top-nav .navbar-toggler .navbar-toggler-icon::after { bottom: 0; } .top-nav .navbar-toggler .navbar-toggler-icon div { top: calc(50% - 1.5px); } .top-nav .navbar-toggler:not(.collapsed) .navbar-toggler-icon::before { transform: translateY(8px) rotate(135deg); } .top-nav .navbar-toggler:not(.collapsed) .navbar-toggler-icon::after { transform: translateY(-9px) rotate(-135deg); } .top-nav .navbar-toggler:not(.collapsed) .navbar-toggler-icon div { transform: scale(0); } .top-nav .navbar-nav { align-items: unset !important; } .top-nav .navbar-nav #topnav-button { background-color: #111112; padding: 1rem 1.5rem; } .top-nav .navbar-nav #topnav-search [data-component-name="Search/SearchTrigger"] { cursor: pointer; } .top-nav .navbar-nav .nav-link, .top-nav .navbar-collapse > .nav-item { line-height: 150%; background: #111112; } .top-nav .navbar-nav .nav-link label, .top-nav .navbar-collapse > .nav-item label { margin-bottom: 0; } .top-nav .navbar-nav .nav-link { padding: 1rem 2rem; } .top-nav .dropdown-menu { margin: 0; width: 100%; overflow: auto; transition: all 0.2s ease; height: 0; display: block; padding: 0; border-radius: 0; } .top-nav .dropdown-menu.show { height: calc(100vh - 80px - 52px); } .top-nav .dropdown-menu.show > :last-child { padding-bottom: 4rem; } .top-nav .dropdown-menu.show#topnav_dd_docs { display: grid; grid-template-columns: minmax(187px, 1fr) minmax(187px, 1fr); gap: 1px; left: -200px; } .top-nav .dropdown-menu.show#topnav_dd_docs .dropdown-hero { grid-column: 1/3; grid-row: 1; } .top-nav .dropdown-menu.show#topnav_dd_docs .col-for-document_types { grid-column: 1; grid-row: 2; } .top-nav .dropdown-menu.show#topnav_dd_docs .col-for-use_cases { grid-column: 2; grid-row: 2; } .top-nav .dropdown-menu.show#topnav_dd_docs .col-for-get_started { grid-column: 1/3; grid-row: 4; margin: -1px; padding-top: 33px; } .top-nav .dropdown-menu .navcol { padding: 1rem 2rem; } .top-nav .dropdown-menu.smaller-dropdown { padding: 0 2rem; } .top-nav .dropdown-menu.smaller-dropdown.show { padding: 1rem 2rem; height: auto; } .top-nav .dropdown-menu .dropdown-hero:first-child { padding-top: 1rem; } .top-nav .dropdown-toggle:not(.with-caret)::before, .top-nav .dropdown-toggle:not(.with-caret)::after { border: 0; font-family: FontAwesome; color: #7649E3; font-size: 0.75rem; transition: all 0.2s ease; overflow: clip; width: 1rem; } .top-nav .dropdown-toggle:not(.with-caret)::before { content: "\f053"; display: inline-block; margin-bottom: -5px; } .top-nav .dropdown-toggle:not(.with-caret)::after { content: "\f054"; position: absolute; right: 2rem; } .top-nav .dropdown.show .dropdown-toggle::after { text-indent: 5rem; } .top-nav .dropdown:not(.show) .dropdown-toggle::before { width: 0; height: 0; text-indent: -5rem; } .top-nav .dropdown-toggle.with-caret::after { border: 0; } .top-nav #top-main-nav { background-color: #232325; padding-top: 32px; position: relative; } .top-nav #top-main-nav.submenu-expanded { padding-top: 0; } .top-nav #top-main-nav.submenu-expanded #topnav-search, .top-nav #top-main-nav.submenu-expanded #topnav-language, .top-nav #top-main-nav.submenu-expanded #topnav-theme { height: 0; overflow: clip; padding-top: 0; padding-bottom: 0; } .top-nav #topnav-search { position: absolute; top: 0; right: 105px; } .top-nav #topnav-search .input-group { flex-wrap: nowrap; } .top-nav #topnav-language { position: absolute; top: 0; right: 65px; } .top-nav #topnav-language hr { border-top: 1px solid #232325; margin-top: 0.25rem; margin-bottom: 0.25rem; display: static; } .top-nav #topnav-theme { position: absolute; top: 0; right: 26px; } } article h1:before, article .h1:before, article h2:before, article .h2:before, article h3:before, article .h3:before, article h4:before, article .h4:before, article h5:before, article .h5:before, article h6:before, article .h6:before, .interactive-block:before { display: block; content: " "; margin-top: -24px; height: 60px; visibility: hidden; pointer-events: none; } article h1:first-of-type:before, article .h1:first-of-type:before { margin-top: -40px; } .chevron { position: relative; display: inline-block; width: 0.75rem; height: 0.5625rem; } .chevron span { position: absolute; top: 0.25rem; display: inline-block; width: 0.5rem; height: 0.15rem; background-color: #7649E3; transition: all 0.2s ease; border: none; } .chevron:not(.expander) span:first-of-type { left: 0; transform: rotate(45deg); } .chevron:not(.expander) span:last-of-type { right: 0; transform: rotate(-45deg); } .chevron.active span:first-of-type { transform: rotate(-45deg); } .chevron.active span:first-of-type { transform: rotate(45deg); } .dropdown.show .chevron span:first-of-type, .expander:not(.collapsed) .chevron span:first-of-type { transform: rotate(-45deg); } .dropdown.show .chevron span:last-of-type, .expander:not(.collapsed) .chevron span:last-of-type { transform: rotate(45deg); } #topnav-theme > div { border-radius: var(--language-picker-border-radius); color: var(--language-picker-text-color); background-color: var(--language-picker-background-color); border: 1px solid var(--language-picker-border-color); padding: var(--language-picker-input-padding-vertical) var(--language-picker-input-padding-horizontal); min-height: var(--language-picker-min-height); } @media (max-width: 575.98px) { .navbar-collapse, .dropdown-menu { box-shadow: 0px 25px 40px -20px #141414; } } .bds-navbar { position: relative; width: 100%; height: 80px; margin: 0; padding: 0; background-color: #FFFFFF; border-bottom: none; box-sizing: border-box; z-index: 1000; } @media (min-width: 576px) { .bds-navbar { height: 80px; } } @media (min-width: 992px) { .bds-navbar { height: 80px; } } .bds-navbar__content { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 20px; max-width: 100%; margin: 0 auto; } @media (min-width: 576px) { .bds-navbar__content { padding: 0 32px; } } @media (min-width: 992px) { .bds-navbar__content { padding: 0 32px; } } .bds-navbar__logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; position: relative; } .bds-navbar__logo:hover { opacity: 0.8; } @media (min-width: 992px) { .bds-navbar__logo:hover { opacity: 1; } } .bds-navbar__logo-symbol { display: block; width: 33px; height: 28px; } @media (min-width: 576px) { .bds-navbar__logo-symbol { width: 33px; height: 28px; } } @media (min-width: 992px) { .bds-navbar__logo-symbol { width: 37px; height: 32px; } } .bds-navbar__logo-text { display: none; } @media (min-width: 992px) { .bds-navbar__logo-text { display: block; position: absolute; left: 37px; top: 50%; transform: translateY(-50%) translateX(-100%); height: 15px; width: 125px; opacity: 0; margin-left: 8px; transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98); pointer-events: none; } } @media (min-width: 992px) { .bds-navbar__logo:hover .bds-navbar__logo-text { opacity: 1; transform: translateY(-50%) translateX(0); } } .bds-navbar__logo-full { display: none; } .bds-navbar__items { display: none; align-items: center; justify-content: center; gap: 24px; font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; } @media (min-width: 576px) { .bds-navbar__items { display: flex; font-size: 14px; line-height: 20.1px; gap: 24px; } } @media (min-width: 992px) { .bds-navbar__items { font-size: 16px; line-height: 23.2px; gap: 32px; position: absolute; left: 50%; transform: translateX(-50%); } } .bds-navbar__item { color: #141414; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color 0.2s ease; padding: 4px 0; } .bds-navbar__item:hover, .bds-navbar__item--active { color: #0DAA3E; } .bds-navbar__item:focus { outline: none; color: #0DAA3E; } .bds-navbar__item:focus-visible { outline: 2px solid #0DAA3E; outline-offset: 2px; } .bds-navbar__controls { display: none; align-items: center; justify-content: flex-end; gap: 16px; flex-shrink: 0; } @media (min-width: 576px) { .bds-navbar__controls { display: flex; } } .bds-navbar__icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; background: transparent; border: none; cursor: pointer; transition: opacity 0.2s ease; } @media (min-width: 992px) { .bds-navbar__icon { width: 20px; height: 20px; } } .bds-navbar__icon:hover { opacity: 0.7; } .bds-navbar__icon:focus { outline: none; } .bds-navbar__icon:focus-visible { outline: 2px solid #0DAA3E; outline-offset: 2px; } .bds-navbar__icon img, .bds-navbar__icon svg { width: 100%; height: 100%; } .bds-navbar__lang-pill { display: flex; align-items: center; gap: 4px; height: 28px; padding: 8px 9px 8px 8px; background: transparent; border: 1px solid #141414; border-radius: 100px; cursor: pointer; font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; font-size: 14px; line-height: 20.1px; color: #141414; transition: background-color 0.2s ease, border-color 0.2s ease; } @media (min-width: 992px) { .bds-navbar__lang-pill { height: 32px; padding: 8px 13px 8px 12px; border-width: 1.3px; gap: 8px; font-size: 16px; line-height: 23.2px; } } .bds-navbar__lang-pill:hover { background-color: #F0F3F7; } .bds-navbar__lang-pill:focus { outline: none; } .bds-navbar__lang-pill:focus-visible { outline: 2px solid #0DAA3E; outline-offset: 2px; } .bds-navbar__lang-pill-icon { width: 16px; height: 16px; flex-shrink: 0; } @media (min-width: 992px) { .bds-navbar__lang-pill-icon { width: 20px; height: 20px; } } .bds-navbar__lang-pill-text { display: flex; align-items: center; gap: 4px; } .bds-navbar__lang-pill-chevron { width: 8px; height: 13px; transform: rotate(90deg); flex-shrink: 0; transition: transform 0.2s ease, filter 0.2s ease; } .bds-navbar__lang-pill--open { border-color: #0DAA3E; } .bds-navbar__lang-pill--open .bds-navbar__lang-pill-chevron { transform: rotate(-90deg); filter: invert(42%) sepia(93%) saturate(1095%) hue-rotate(108deg) brightness(92%) contrast(93%); } .bds-navbar__lang-pill--open .bds-navbar__lang-pill-icon { filter: invert(42%) sepia(93%) saturate(1095%) hue-rotate(108deg) brightness(92%) contrast(93%); } .bds-navbar__lang-wrapper { position: relative; } .bds-navbar__hamburger { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: transparent; border: none; cursor: pointer; transition: opacity 0.2s ease; } @media (min-width: 576px) { .bds-navbar__hamburger { display: none; } } .bds-navbar__hamburger:hover { opacity: 0.7; } .bds-navbar__hamburger:focus { outline: none; } .bds-navbar__hamburger:focus-visible { outline: 2px solid #0DAA3E; outline-offset: 2px; } .bds-navbar__hamburger img, .bds-navbar__hamburger svg { width: 100%; height: 100%; } .bds-navbar--with-banner { margin-top: 52px; } [data-component-name="layouts/RootLayout"]:has(.bds-navbar) { padding-top: 0 !important; } body [data-component-name="layouts/RootLayout"]:has(> .bds-navbar), body [data-component-name="layouts/RootLayout"]:has(header.bds-navbar) { padding-top: 0 !important; } html:has(.bds-navbar) { overflow-x: hidden; } body:has(.bds-navbar) { overflow-x: hidden; width: 100%; margin: 0; padding: 0; } [data-component-name="layouts/RootLayout"]:has(.bds-navbar) { width: 100%; max-width: none; padding-left: 0 !important; padding-right: 0 !important; margin: 0; overflow-x: hidden; } html.dark .bds-navbar { background-color: #141414; } html.dark .bds-navbar__logo-symbol, html.dark .bds-navbar__logo-full, html.dark .bds-navbar__logo-text { filter: invert(1); } html.dark .bds-navbar__item { color: #FFFFFF; } html.dark .bds-navbar__item:hover, html.dark .bds-navbar__item--active { color: #21E46B; } html.dark .bds-navbar__item:focus { color: #21E46B; } html.dark .bds-navbar__item:focus-visible { outline: 2px solid #21E46B; outline-offset: 2px; } html.dark .bds-navbar__icon img, html.dark .bds-navbar__icon svg { filter: invert(1); } html.dark .bds-navbar__icon:hover { opacity: 0.7; } html.dark .bds-navbar__icon:focus-visible { outline: 2px solid #21E46B; outline-offset: 2px; } html.dark .bds-navbar__lang-pill { border-color: #FFFFFF; color: #FFFFFF; } html.dark .bds-navbar__lang-pill-icon, html.dark .bds-navbar__lang-pill-chevron { filter: invert(1); } html.dark .bds-navbar__lang-pill:hover { background-color: #232325; } html.dark .bds-navbar__lang-pill:focus-visible { outline: 2px solid #21E46B; outline-offset: 2px; } html.dark .bds-navbar__lang-pill--open { border-color: #21E46B; } html.dark .bds-navbar__lang-pill--open .bds-navbar__lang-pill-chevron { transform: rotate(-90deg); filter: invert(73%) sepia(48%) saturate(580%) hue-rotate(86deg) brightness(98%) contrast(93%); } html.dark .bds-navbar__lang-pill--open .bds-navbar__lang-pill-icon { filter: invert(73%) sepia(48%) saturate(580%) hue-rotate(86deg) brightness(98%) contrast(93%); } html.dark .bds-navbar__hamburger img, html.dark .bds-navbar__hamburger svg { filter: invert(1); } html.dark .bds-navbar__hamburger:hover { opacity: 0.7; } html.dark .bds-navbar__hamburger:focus-visible { outline: 2px solid #21E46B; outline-offset: 2px; } html.dark .bds-submenu-backdrop { background-color: rgba(17, 17, 18, 0.8); backdrop-filter: blur(17.5px); -webkit-backdrop-filter: blur(17.5px); } html.dark .bds-submenu { background: transparent; } html.dark .bds-submenu__left, html.dark .bds-submenu__right { background: #343434; } html.dark .bds-submenu--closing .bds-submenu__left, html.dark .bds-submenu--closing .bds-submenu__right { background: transparent; } html.dark .bds-submenu__section { background: #111112; } html.dark .bds-submenu__link { color: #FFFFFF; } html.dark .bds-submenu__link .bds-submenu__arrow svg path { stroke: #FFFFFF; } html.dark .bds-submenu__sublink { color: #FFFFFF; } html.dark .bds-submenu__sublink:hover { color: #21E46B; } html.dark .bds-submenu__sublink:hover .bds-submenu__sublink-arrow { display: inline-flex; } html.dark .bds-submenu__sublink:active { color: #0DAA3E; } html.dark .bds-submenu__sublink:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; color: #21E46B; } html.dark .bds-submenu__parent-link .bds-submenu__link { color: #FFFFFF; } html.dark .bds-submenu__parent-link .bds-submenu__link .bds-submenu__arrow svg path { stroke: #FFFFFF; } html.dark .bds-submenu__parent-link:hover .bds-submenu__link { color: #21E46B; } html.dark .bds-submenu__parent-link:hover .bds-submenu__link .bds-submenu__arrow svg path { stroke: #21E46B; } html.dark .bds-submenu__parent-link:active .bds-submenu__link { color: #0DAA3E; } html.dark .bds-submenu__parent-link:active .bds-submenu__link .bds-submenu__arrow svg path { stroke: #0DAA3E; } html.dark .bds-submenu__parent-link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } html.dark .bds-submenu__parent-link:focus-visible .bds-submenu__link { color: #21E46B; } html.dark .bds-submenu__parent-link:focus-visible .bds-submenu__link .bds-submenu__arrow svg path { stroke: #21E46B; } html.dark .bds-submenu a.bds-submenu__sublink:not(.bds-link) { color: #FFFFFF; font-weight: 400; text-decoration: none; } html.dark .bds-submenu a.bds-submenu__sublink:not(.bds-link):hover { color: #21E46B; text-decoration: none; } html.dark .bds-submenu a.bds-submenu__sublink:not(.bds-link):hover .bds-submenu__sublink-arrow { display: inline-flex; } html.dark .bds-submenu a.bds-submenu__sublink:not(.bds-link):active { color: #0DAA3E; text-decoration: none; } html.dark .bds-submenu a.bds-submenu__sublink:not(.bds-link):focus { text-decoration: none; } html.dark .bds-submenu a.bds-submenu__sublink:not(.bds-link):focus-visible { color: #21E46B; text-decoration: none; } html.dark .bds-submenu a.bds-submenu__parent-link:not(.bds-link) { text-decoration: none; } html.dark .bds-submenu a.bds-submenu__parent-link:not(.bds-link):hover, html.dark .bds-submenu a.bds-submenu__parent-link:not(.bds-link):active, html.dark .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus { text-decoration: none; } html.dark .bds-submenu a.bds-submenu__parent-link:not(.bds-link) .bds-submenu__link { color: #FFFFFF; text-decoration: none; } html.dark .bds-submenu a.bds-submenu__parent-link:not(.bds-link):hover .bds-submenu__link { color: #21E46B; text-decoration: none; } html.dark .bds-submenu a.bds-submenu__parent-link:not(.bds-link):active .bds-submenu__link { color: #0DAA3E; text-decoration: none; } html.dark .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible .bds-submenu__link { color: #21E46B; text-decoration: none; } html.dark .bds-submenu--network .bds-submenu__section { background-color: #111112 !important; box-shadow: -8px 0 0 0 #343434, 8px 0 0 0 #343434, 0 -8px 0 0 #343434, 0 8px 0 0 #343434, -8px -8px 0 0 #343434, 8px -8px 0 0 #343434, -8px 8px 0 0 #343434, 8px 8px 0 0 #343434; } html.dark .bds-submenu--network.bds-submenu--closing .bds-submenu__section:nth-child(1), html.dark .bds-submenu--network.bds-submenu--closing .bds-submenu__section:nth-child(2) { box-shadow: none; } html.dark .bds-mobile-menu { background-color: #141414; } html.dark .bds-mobile-menu__header { background-color: #141414; border-bottom-color: #343437; } html.dark .bds-mobile-menu__accordion-header { background-color: #111112; border-bottom-color: #343437; color: #FFFFFF; } html.dark .bds-mobile-menu__accordion-header:hover { background-color: #232325; } html.dark .bds-mobile-menu__accordion-content { background-color: #141414; border-bottom-color: #343437; } html.dark .bds-mobile-menu__chevron { color: #FFFFFF; } html.dark .bds-mobile-menu__chevron--expanded { color: #21E46B; } html.dark .bds-mobile-menu__link { color: #FFFFFF; } html.dark .bds-mobile-menu__link .bds-mobile-menu__arrow svg path { stroke: #FFFFFF; } html.dark .bds-mobile-menu__sublink { color: #FFFFFF; } html.dark .bds-mobile-menu__sublink:hover { color: #21E46B; } html.dark .bds-mobile-menu__sublink:hover .bds-mobile-menu__sublink-arrow { display: inline-flex; } html.dark .bds-mobile-menu__sublink:active { color: #0DAA3E; } html.dark .bds-mobile-menu__sublink:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; color: #21E46B; } html.dark .bds-mobile-menu__parent-link .bds-mobile-menu__link { color: #FFFFFF; } html.dark .bds-mobile-menu__parent-link .bds-mobile-menu__link .bds-mobile-menu__arrow svg path { stroke: #FFFFFF; } html.dark .bds-mobile-menu__parent-link:hover .bds-mobile-menu__link { color: #21E46B; } html.dark .bds-mobile-menu__parent-link:hover .bds-mobile-menu__link .bds-mobile-menu__arrow svg path { stroke: #21E46B; } html.dark .bds-mobile-menu__parent-link:active .bds-mobile-menu__link { color: #0DAA3E; } html.dark .bds-mobile-menu__parent-link:active .bds-mobile-menu__link .bds-mobile-menu__arrow svg path { stroke: #0DAA3E; } html.dark .bds-mobile-menu__parent-link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } html.dark .bds-mobile-menu__parent-link:focus-visible .bds-mobile-menu__link { color: #21E46B; } html.dark .bds-mobile-menu__parent-link:focus-visible .bds-mobile-menu__link .bds-mobile-menu__arrow svg path { stroke: #21E46B; } html.dark .bds-mobile-menu__footer { background-color: #141414; } html.dark .bds-mobile-menu__lang-pill { border-color: #FFFFFF; color: #FFFFFF; } html.dark .bds-mobile-menu__lang-pill-icon, html.dark .bds-mobile-menu__lang-pill-chevron { filter: invert(1); } html.dark .bds-mobile-menu__lang-pill:hover { background-color: #232325; } html.dark .bds-mobile-menu__lang-pill--open { border-color: #21E46B; } html.dark .bds-mobile-menu__lang-pill--open .bds-mobile-menu__lang-pill-chevron { transform: rotate(-90deg); filter: invert(73%) sepia(48%) saturate(580%) hue-rotate(86deg) brightness(98%) contrast(93%); } html.dark .bds-mobile-menu__lang-pill--open .bds-mobile-menu__lang-pill-icon { filter: invert(73%) sepia(48%) saturate(580%) hue-rotate(86deg) brightness(98%) contrast(93%); } html.dark .bds-mobile-menu__footer-icon img, html.dark .bds-mobile-menu__footer-icon svg { filter: invert(1); } html.dark .bds-mobile-menu__footer-icon:hover { opacity: 0.7; } html.dark .bds-mobile-menu__close svg line { stroke: #FFFFFF; } html.dark .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link) { text-decoration: none; } html.dark .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):hover { color: #21E46B; text-decoration: none; } html.dark .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):hover .bds-mobile-menu__sublink-arrow { display: inline-flex; } html.dark .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):active { color: #0DAA3E; text-decoration: none; } html.dark .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):focus { text-decoration: none; } html.dark .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):focus-visible { color: #21E46B; text-decoration: none; } html.dark .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link) { text-decoration: none; } html.dark .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link):hover, html.dark .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link):active, html.dark .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link):focus { text-decoration: none; } html.dark .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link) .bds-mobile-menu__link { color: #FFFFFF; text-decoration: none; } html.dark .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link):hover .bds-mobile-menu__link { color: #21E46B; text-decoration: none; } html.dark .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link):active .bds-mobile-menu__link { color: #0DAA3E; text-decoration: none; } html.dark .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link):focus-visible .bds-mobile-menu__link { color: #21E46B; text-decoration: none; } html.light:has(.bds-navbar)::-webkit-scrollbar { width: 12px; background-color: #FFFFFF; } html.light:has(.bds-navbar)::-webkit-scrollbar-track { background-color: #FFFFFF; } html.light:has(.bds-navbar)::-webkit-scrollbar-thumb { background-color: #CAD4DF; border-radius: 6px; border: 3px solid #FFFFFF; } html.light:has(.bds-navbar)::-webkit-scrollbar-thumb:hover { background-color: #8A919A; } html.light:has(.bds-navbar) { scrollbar-color: #CAD4DF #FFFFFF; scrollbar-width: thin; } html.dark:has(.bds-navbar)::-webkit-scrollbar { width: 12px; background-color: #141414; } html.dark:has(.bds-navbar)::-webkit-scrollbar-track { background-color: #141414; } html.dark:has(.bds-navbar)::-webkit-scrollbar-thumb { background-color: #454549; border-radius: 6px; border: 3px solid #141414; } html.dark:has(.bds-navbar)::-webkit-scrollbar-thumb:hover { background-color: #72777E; } html.dark:has(.bds-navbar) { scrollbar-color: #454549 #141414; scrollbar-width: thin; } .bds-submenu-backdrop { display: none; position: fixed; top: 80px; left: 0; right: 0; bottom: 0; z-index: 999; pointer-events: none; opacity: 0; background-color: rgba(230, 234, 240, 0.65); backdrop-filter: blur(17.5px); -webkit-backdrop-filter: blur(17.5px); transition: opacity 300ms ease-out; } @media (min-width: 576px) { .bds-submenu-backdrop { display: block; top: 80px; } } @media (min-width: 992px) { .bds-submenu-backdrop { top: 80px; } } .bds-submenu-backdrop--active { opacity: 1; pointer-events: auto; } @keyframes submenu-right-exit-diagonal { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translate(-100%, -100%); opacity: 0; } } @keyframes submenu-left-exit-up { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-100%); opacity: 0; } } .bds-submenu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 1001; pointer-events: none; overflow: hidden; opacity: 0; visibility: hidden; width: 612px; height: 390px; padding: 8px; gap: 0; background-color: transparent; transition: opacity 100ms ease-out 400ms, visibility 0ms linear 500ms; } @media (min-width: 576px) { .bds-submenu { display: flex; } } .bds-submenu--active { pointer-events: auto; opacity: 1; visibility: visible; z-index: 1003; transition: opacity 0ms, visibility 0ms; } .bds-submenu--active .bds-submenu__left { transform: translateY(0); opacity: 1; transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 100ms, opacity 150ms ease-out 100ms; } .bds-submenu--active .bds-submenu__right { transform: translateX(0); opacity: 1; transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 300ms, opacity 150ms ease-out 300ms; } .bds-submenu--closing { pointer-events: none; z-index: 1002; transition: opacity 100ms ease-out 250ms, visibility 0ms linear 350ms; } .bds-submenu--closing .bds-submenu__left, .bds-submenu--closing .bds-submenu__right { background-color: transparent; animation: submenu-left-exit-up 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) forwards; } .bds-submenu--closing .bds-submenu__right { animation: submenu-right-exit-diagonal 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) forwards; } .bds-submenu-wrapper { position: absolute; top: 100%; left: 0; right: 0; padding-top: 0; } .bds-submenu__left { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; width: 306px; height: 374px; padding-right: 8px; transform: translateY(-100%); opacity: 0; background-color: #E6EAF0; transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-in; } .bds-submenu__left::before { content: ""; position: absolute; top: -8px; left: -8px; bottom: -8px; right: 0; background-color: inherit; z-index: -1; } .bds-submenu__right { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; width: 290px; height: 374px; transform: translateX(-100%); opacity: 0; background-color: #E6EAF0; transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-in 150ms; } .bds-submenu__right::before { content: ""; position: absolute; top: -8px; left: 0; bottom: -8px; right: -8px; background-color: inherit; z-index: -1; } .bds-submenu__section { display: flex; flex-direction: column; justify-content: flex-start; flex: 1 0 0; min-height: 1px; min-width: 1px; padding: 16px 24px; background-color: #FFFFFF; } .bds-submenu__tier1 { display: flex; align-items: flex-start; gap: 8px; width: 100%; } .bds-submenu:not(.bds-submenu--use-cases):not(.bds-submenu--community) .bds-submenu__left .bds-submenu__section { justify-content: center; } .bds-submenu__tier2 { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: auto; } .bds-submenu__icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; overflow: hidden; } .bds-submenu__icon img { width: 100%; height: 100%; } .bds-submenu__link { display: flex; align-items: center; gap: 16px; color: #141414; text-decoration: none; font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; font-weight: 400; line-height: 23.2px; white-space: nowrap; transition: color 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), gap 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-submenu__link--bold { font-weight: 500; } .bds-submenu__sublink { display: flex; align-items: center; gap: 16px; color: #141414; text-decoration: none; font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; font-weight: 400; line-height: 23.2px; white-space: nowrap; transition: color 0.2s ease; } .bds-submenu__sublink:hover, .bds-submenu__sublink:focus, .bds-submenu__sublink:active, .bds-submenu__sublink:visited { text-decoration: none; } .bds-submenu__sublink:hover { color: #0DAA3E; text-decoration: none; } .bds-submenu__sublink:hover .bds-submenu__sublink-arrow { display: inline-flex; } .bds-submenu__sublink:active { color: #078139; text-decoration: none; } .bds-submenu__sublink:active .bds-submenu__sublink-arrow { display: inline-flex; } .bds-submenu__sublink:focus { outline: none; text-decoration: none; } .bds-submenu__sublink:focus-visible { outline: 2px solid #141414; outline-offset: 2px; color: #0DAA3E; text-decoration: none; } .bds-submenu__sublink:focus-visible .bds-submenu__sublink-arrow { display: inline-flex; } .bds-submenu__sublink-arrow { display: none; align-items: center; justify-content: center; width: 15px; height: 14px; flex-shrink: 0; } .bds-submenu__sublink-arrow svg { width: 100%; height: 100%; } .bds-submenu__sublink-arrow svg path { stroke: currentColor; } html.light .bds-submenu a.bds-submenu__sublink:not(.bds-link) { color: #141414; font-weight: 400; text-decoration: none; } html.light .bds-submenu a.bds-submenu__sublink:not(.bds-link):visited { color: #141414; font-weight: 400; text-decoration: none; } html.light .bds-submenu a.bds-submenu__sublink:not(.bds-link):hover { color: #0DAA3E; text-decoration: none; } html.light .bds-submenu a.bds-submenu__sublink:not(.bds-link):hover .bds-submenu__sublink-arrow { display: inline-flex; } html.light .bds-submenu a.bds-submenu__sublink:not(.bds-link):active { color: #078139; text-decoration: none; } html.light .bds-submenu a.bds-submenu__sublink:not(.bds-link):focus { text-decoration: none; } html.light .bds-submenu a.bds-submenu__sublink:not(.bds-link):focus-visible { color: #0DAA3E; text-decoration: none; } html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link) { text-decoration: none; } html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):visited, html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):hover, html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):active, html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus { text-decoration: none; } html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link) .bds-submenu__link { color: #141414; text-decoration: none; } html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):hover .bds-submenu__link { color: #0DAA3E; text-decoration: none; } html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):active .bds-submenu__link { color: #078139; text-decoration: none; } html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible .bds-submenu__link { color: #0DAA3E; text-decoration: none; } .bds-submenu__arrow { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 14px; flex-shrink: 0; transition: transform 0.2s ease; } .bds-submenu__arrow svg { width: 100%; height: 100%; } .bds-submenu__parent-link { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-decoration: none; cursor: pointer; } .bds-submenu__parent-link:hover, .bds-submenu__parent-link:focus, .bds-submenu__parent-link:active, .bds-submenu__parent-link:visited { text-decoration: none; } .bds-submenu__parent-link .bds-submenu__link { color: #141414; text-decoration: none; transition: color 0.2s ease; } .bds-submenu__parent-link .bds-submenu__link .bds-submenu__arrow svg path { stroke: #141414; transition: stroke 0.2s ease; } .bds-submenu__parent-link .bds-submenu__link .bds-submenu__arrow svg .arrow-horizontal { transform-origin: right center; transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-submenu__parent-link:hover { text-decoration: none; } .bds-submenu__parent-link:hover .bds-submenu__link { color: #0DAA3E; text-decoration: none; gap: 20px; } .bds-submenu__parent-link:hover .bds-submenu__link .bds-submenu__arrow svg path { stroke: #0DAA3E; } .bds-submenu__parent-link:hover .bds-submenu__link .bds-submenu__arrow svg .arrow-horizontal { transform: scaleX(0); } .bds-submenu__parent-link:active { text-decoration: none; } .bds-submenu__parent-link:active .bds-submenu__link { color: #078139; text-decoration: none; gap: 20px; } .bds-submenu__parent-link:active .bds-submenu__link .bds-submenu__arrow svg path { stroke: #078139; } .bds-submenu__parent-link:active .bds-submenu__link .bds-submenu__arrow svg .arrow-horizontal { transform: scaleX(0); } .bds-submenu__parent-link:focus { outline: none; text-decoration: none; } .bds-submenu__parent-link:focus-visible { outline: 2px solid #141414; outline-offset: 2px; text-decoration: none; } .bds-submenu__parent-link:focus-visible .bds-submenu__link { color: #0DAA3E; text-decoration: none; gap: 20px; } .bds-submenu__parent-link:focus-visible .bds-submenu__link .bds-submenu__arrow svg path { stroke: #0DAA3E; } .bds-submenu__parent-link:focus-visible .bds-submenu__link .bds-submenu__arrow svg .arrow-horizontal { transform: scaleX(0); } .bds-navbar__item-wrapper { position: relative; display: inline-flex; align-items: center; } .bds-submenu--use-cases { width: 612px; height: auto; min-height: 390px; } .bds-submenu--use-cases .bds-submenu__left, .bds-submenu--use-cases .bds-submenu__right { height: auto; min-height: 374px; } .bds-submenu--use-cases .bds-submenu__section { display: flex; flex-direction: column; justify-content: space-between; } .bds-submenu--use-cases .bds-submenu__tier2 { margin-top: 0; } .bds-submenu--community { width: 612px; height: 390px; } .bds-submenu--community .bds-submenu__left { width: 290px; height: 374px; } .bds-submenu--community .bds-submenu__right { width: 298px; height: 374px; } .bds-submenu--community .bds-submenu__section { flex: none !important; } .bds-submenu--community .bds-submenu__left .bds-submenu__section:nth-child(1) { height: 270px; justify-content: space-between; } .bds-submenu--community .bds-submenu__left .bds-submenu__section:nth-child(2) { height: 96px; justify-content: center; } .bds-submenu--community .bds-submenu__right .bds-submenu__section:nth-child(1) { height: 270px; justify-content: space-between; } .bds-submenu--community .bds-submenu__right .bds-submenu__section:nth-child(2) { height: 96px; justify-content: center; } .bds-submenu--community .bds-submenu__tier2 { margin-top: auto; gap: 4px; } .bds-submenu--network { width: 604px; height: 390px; gap: 0; background-color: transparent; flex-direction: row; } .bds-submenu--network .bds-submenu__left, .bds-submenu--network .bds-submenu__right { display: none; } .bds-submenu--network .bds-submenu__section { position: relative; flex: none !important; width: 290px; height: 374px; display: flex; flex-direction: column; padding: 16px 24px; gap: 0; background-color: #FFFFFF !important; box-shadow: -8px 0 0 0 #E6EAF0, 8px 0 0 0 #E6EAF0, 0 -8px 0 0 #E6EAF0, 0 8px 0 0 #E6EAF0, -8px -8px 0 0 #E6EAF0, 8px -8px 0 0 #E6EAF0, -8px 8px 0 0 #E6EAF0, 8px 8px 0 0 #E6EAF0; } .bds-submenu--network .bds-submenu__section:nth-child(1) { z-index: 2; width: 298px; padding-right: 32px; transform: translateY(-100%); opacity: 0; transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-in, box-shadow 0ms; } .bds-submenu--network .bds-submenu__section:nth-child(2) { z-index: 1; transform: translateX(-100%); opacity: 0; transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-in 150ms, box-shadow 0ms; } .bds-submenu--network.bds-submenu--active .bds-submenu__section:nth-child(1) { transform: translateY(0); opacity: 1; transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-out; } .bds-submenu--network.bds-submenu--active .bds-submenu__section:nth-child(2) { transform: translateX(0); opacity: 1; transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 200ms, opacity 150ms ease-out 200ms; } .bds-submenu--network.bds-submenu--closing .bds-submenu__section:nth-child(1), .bds-submenu--network.bds-submenu--closing .bds-submenu__section:nth-child(2) { box-shadow: none; } .bds-submenu--network.bds-submenu--closing .bds-submenu__section:nth-child(1) { animation: submenu-left-exit-up 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) forwards; } .bds-submenu--network.bds-submenu--closing .bds-submenu__section:nth-child(2) { animation: submenu-right-exit-diagonal 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) forwards; } .bds-submenu--network .bds-submenu__tier1 { flex-shrink: 0; } .bds-submenu--network .bds-submenu__network-content { display: flex; flex-direction: column; margin-top: 108px; width: 242px; height: 210px; } .bds-submenu--network .bds-submenu__tier2 { flex-shrink: 0; height: 80px; margin-top: 0; gap: 4px; } .bds-submenu--network .bds-submenu__pattern-container { margin-top: 16px; width: 242px; height: 114px; overflow: hidden; flex-shrink: 0; } .bds-submenu--network .bds-submenu__pattern { width: 100%; height: 100%; } .bds-mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #FFFFFF; z-index: 1002; flex-direction: column; overflow-y: auto; transform: translateX(100%); transition: transform 300ms ease-out; } @media (max-width: 575.98px) { .bds-mobile-menu { display: flex; } } .bds-mobile-menu--open { transform: translateX(0); } .bds-mobile-menu__header { display: flex; align-items: center; justify-content: space-between; height: 80px; padding: 24px; background-color: #FFFFFF; border-bottom: 1px solid #E6EAF0; flex-shrink: 0; } .bds-mobile-menu__close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: transparent; border: none; cursor: pointer; } .bds-mobile-menu__close img, .bds-mobile-menu__close svg { width: 100%; height: 100%; } .bds-mobile-menu__content { display: flex; flex-direction: column; flex: 1; width: 100%; padding: 0 16px; } .bds-mobile-menu__accordion { display: flex; flex-direction: column; width: 100%; } .bds-mobile-menu__accordion-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 8px; background-color: #FFFFFF; border: none; border-bottom: 1px solid #CAD4DF; cursor: pointer; font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; font-weight: 400; line-height: 20.1px; color: #141414; text-align: left; } .bds-mobile-menu__accordion-header:hover { background-color: #F0F3F7; } .bds-mobile-menu__chevron { display: flex; align-items: center; justify-content: center; width: 13px; height: 8px; transition: transform 200ms ease, color 200ms ease; color: #141414; } .bds-mobile-menu__chevron img, .bds-mobile-menu__chevron svg { width: 100%; height: 100%; } .bds-mobile-menu__chevron--expanded { transform: rotate(180deg); color: #21E46B; } .bds-mobile-menu__accordion-content { max-height: 0; overflow: hidden; transition: max-height 300ms ease-out; background-color: #FFFFFF; border-bottom: 1px solid #CAD4DF; } .bds-mobile-menu__accordion-content--expanded { max-height: 600px; } .bds-mobile-menu__tier-list { display: flex; flex-direction: column; gap: 16px; padding: 8px 8px 16px 8px; } .bds-mobile-menu__tier1 { display: flex; align-items: center; gap: 8px; width: 100%; } .bds-mobile-menu__tier2 { display: flex; flex-direction: column; gap: 4px; width: 100%; padding-left: 26px; } .bds-mobile-menu__icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; overflow: hidden; } .bds-mobile-menu__icon img { width: 100%; height: 100%; } .bds-mobile-menu__link { display: flex; align-items: center; gap: 16px; color: #141414; text-decoration: none; font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; font-weight: 400; line-height: 20.1px; white-space: nowrap; transition: color 0.2s ease; } .bds-mobile-menu__link--bold { font-weight: 500; } .bds-mobile-menu__sublink { display: flex; align-items: center; gap: 16px; color: #141414; text-decoration: none; font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; font-weight: 300; line-height: 20.1px; white-space: nowrap; transition: color 0.2s ease, font-weight 0.2s ease; } .bds-mobile-menu__sublink:hover, .bds-mobile-menu__sublink:focus, .bds-mobile-menu__sublink:active, .bds-mobile-menu__sublink:visited { text-decoration: none; } .bds-mobile-menu__sublink:hover { color: #0DAA3E; text-decoration: none; } .bds-mobile-menu__sublink:hover .bds-mobile-menu__sublink-arrow { display: inline-flex; } .bds-mobile-menu__sublink:active { color: #078139; text-decoration: none; } .bds-mobile-menu__sublink:active .bds-mobile-menu__sublink-arrow { display: inline-flex; } .bds-mobile-menu__sublink:focus { outline: none; text-decoration: none; } .bds-mobile-menu__sublink:focus-visible { outline: 2px solid #141414; outline-offset: 2px; color: #0DAA3E; text-decoration: none; } .bds-mobile-menu__sublink:focus-visible .bds-mobile-menu__sublink-arrow { display: inline-flex; } .bds-mobile-menu__sublink-arrow { display: none; align-items: center; justify-content: center; width: 14px; height: 13px; flex-shrink: 0; } .bds-mobile-menu__sublink-arrow svg { width: 100%; height: 100%; } .bds-mobile-menu__sublink-arrow svg path { stroke: currentColor; } .bds-mobile-menu__arrow { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 13px; flex-shrink: 0; transition: transform 0.2s ease; } .bds-mobile-menu__arrow svg { width: 100%; height: 100%; } .bds-mobile-menu__parent-link { display: flex; align-items: center; gap: 8px; width: 100%; text-decoration: none; cursor: pointer; } .bds-mobile-menu__parent-link:hover, .bds-mobile-menu__parent-link:focus, .bds-mobile-menu__parent-link:active, .bds-mobile-menu__parent-link:visited { text-decoration: none; } .bds-mobile-menu__parent-link .bds-mobile-menu__link { color: #141414; text-decoration: none; transition: color 0.2s ease; } .bds-mobile-menu__parent-link .bds-mobile-menu__link .bds-mobile-menu__arrow svg path { stroke: #141414; transition: stroke 0.2s ease; } .bds-mobile-menu__parent-link .bds-mobile-menu__link .bds-mobile-menu__arrow svg .arrow-horizontal { transform-origin: right center; transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-mobile-menu__parent-link:hover { text-decoration: none; } .bds-mobile-menu__parent-link:hover .bds-mobile-menu__link { color: #0DAA3E; text-decoration: none; } .bds-mobile-menu__parent-link:hover .bds-mobile-menu__link .bds-mobile-menu__arrow svg path { stroke: #0DAA3E; } .bds-mobile-menu__parent-link:hover .bds-mobile-menu__link .bds-mobile-menu__arrow svg .arrow-horizontal { transform: scaleX(0); } .bds-mobile-menu__parent-link:active { text-decoration: none; } .bds-mobile-menu__parent-link:active .bds-mobile-menu__link { color: #078139; text-decoration: none; } .bds-mobile-menu__parent-link:active .bds-mobile-menu__link .bds-mobile-menu__arrow svg path { stroke: #078139; } .bds-mobile-menu__parent-link:active .bds-mobile-menu__link .bds-mobile-menu__arrow svg .arrow-horizontal { transform: scaleX(0); } .bds-mobile-menu__parent-link:focus { outline: none; text-decoration: none; } .bds-mobile-menu__parent-link:focus-visible { outline: 2px solid #141414; outline-offset: 2px; text-decoration: none; } .bds-mobile-menu__parent-link:focus-visible .bds-mobile-menu__link { color: #0DAA3E; text-decoration: none; } .bds-mobile-menu__parent-link:focus-visible .bds-mobile-menu__link .bds-mobile-menu__arrow svg path { stroke: #0DAA3E; } .bds-mobile-menu__parent-link:focus-visible .bds-mobile-menu__link .bds-mobile-menu__arrow svg .arrow-horizontal { transform: scaleX(0); } .bds-mobile-menu__footer { display: flex; align-items: center; gap: 16px; padding: 24px; background-color: #FFFFFF; flex-shrink: 0; margin-top: auto; position: sticky; bottom: 0; z-index: 10; } .bds-mobile-menu__lang-wrapper { position: relative; } .bds-mobile-menu__lang-pill { display: flex; align-items: center; gap: 4px; height: 28px; padding: 8px 9px 8px 8px; background: transparent; border: 1px solid #141414; border-radius: 100px; cursor: pointer; font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; font-size: 14px; line-height: 20.1px; color: #141414; } .bds-mobile-menu__lang-pill:hover { background-color: #F0F3F7; } .bds-mobile-menu__lang-pill-icon { width: 16px; height: 16px; flex-shrink: 0; } .bds-mobile-menu__lang-pill-text { display: flex; align-items: center; gap: 4px; } .bds-mobile-menu__lang-pill-chevron { width: 8px; height: 13px; transform: rotate(90deg); flex-shrink: 0; transition: transform 0.2s ease, filter 0.2s ease; } .bds-mobile-menu__lang-pill--open { border-color: #0DAA3E; } .bds-mobile-menu__lang-pill--open .bds-mobile-menu__lang-pill-chevron { transform: rotate(-90deg); filter: invert(42%) sepia(93%) saturate(1095%) hue-rotate(108deg) brightness(92%) contrast(93%); } .bds-mobile-menu__lang-pill--open .bds-mobile-menu__lang-pill-icon { filter: invert(42%) sepia(93%) saturate(1095%) hue-rotate(108deg) brightness(92%) contrast(93%); } .bds-mobile-menu__footer-icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; background: transparent; border: none; cursor: pointer; } .bds-mobile-menu__footer-icon img, .bds-mobile-menu__footer-icon svg { width: 100%; height: 100%; } .bds-mobile-menu__footer-icon:hover { opacity: 0.7; } body.bds-mobile-menu-open { overflow: hidden; } @media (min-width: 576px) { body.bds-submenu-open { overflow: hidden; } } @media (min-width: 576px) { html:has(body.bds-submenu-open) { overflow: hidden; } } html.light .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link) { color: #141414; font-weight: 300; text-decoration: none; } html.light .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):visited { color: #141414; font-weight: 300; text-decoration: none; } html.light .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):hover { color: #0DAA3E; text-decoration: none; } html.light .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):hover .bds-mobile-menu__sublink-arrow { display: inline-flex; } html.light .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):active { color: #078139; text-decoration: none; } html.light .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):focus { text-decoration: none; } html.light .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):focus-visible { color: #0DAA3E; text-decoration: none; } html.light .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link) { text-decoration: none; } html.light .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link):visited, html.light .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link):hover, html.light .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link):active, html.light .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link):focus { text-decoration: none; } html.light .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link) .bds-mobile-menu__link { color: #141414; text-decoration: none; } html.light .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link):hover .bds-mobile-menu__link { color: #0DAA3E; text-decoration: none; } html.light .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link):active .bds-mobile-menu__link { color: #078139; text-decoration: none; } html.light .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link):focus-visible .bds-mobile-menu__link { color: #0DAA3E; text-decoration: none; } .bds-lang-dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000; display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 18px; min-width: 120px; background-color: #FFFFFF; border: 1.3px solid #141414; animation: bds-dropdown-fade-in 0.2s ease; } .bds-lang-dropdown__item { display: flex; align-items: center; height: 32px; padding: 8px 13px 8px 12px; background: transparent; border: none; border-radius: 100px; cursor: pointer; font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; font-size: 16px; line-height: 23.2px; text-align: left; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; color: #141414; } .bds-lang-dropdown__item:hover { background-color: #EAFCF1; } .bds-lang-dropdown__item:active { background-color: #70EE97; } .bds-lang-dropdown__item:focus { outline: none; } .bds-lang-dropdown__item:focus-visible { outline: 2px solid #0DAA3E; outline-offset: -2px; } .bds-lang-dropdown__item--active { color: #0DAA3E; } html.dark .bds-lang-dropdown { background-color: #141414; border-color: #FFFFFF; } html.dark .bds-lang-dropdown .bds-lang-dropdown__item { color: #FFFFFF; } html.dark .bds-lang-dropdown .bds-lang-dropdown__item:hover { background-color: #70EE97; color: #141414; } html.dark .bds-lang-dropdown .bds-lang-dropdown__item:active { background-color: #21E46B; color: #141414; } html.dark .bds-lang-dropdown .bds-lang-dropdown__item:focus-visible { outline-color: #21E46B; } html.dark .bds-lang-dropdown .bds-lang-dropdown__item--active { color: #21E46B; } html.dark .bds-lang-dropdown .bds-lang-dropdown__item--active:hover { background-color: #70EE97; color: #141414; } html.dark .bds-lang-dropdown .bds-lang-dropdown__item--active:active { background-color: #21E46B; color: #141414; } @keyframes bds-dropdown-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .bds-lang-dropdown--mobile { top: auto; bottom: calc(100% + 8px); animation: bds-dropdown-fade-in-mobile 0.2s ease; } @keyframes bds-dropdown-fade-in-mobile { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .web-banner { text-decoration: none; display: flex; justify-content: space-between; height: 0; background: #32E685 !important; padding: 7px 35px; font-family: "Tobias", "Noto Serif", monospace; z-index: 10; cursor: pointer; color: #141414 !important; text-align: center; font-size: 26px; font-style: normal; font-weight: 600; letter-spacing: -0.32px; } .web-banner:hover { text-decoration: none; color: #FFFFFF; } .web-banner:hover .button-icon { animation: iconJitter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .web-banner::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #E0E500; z-index: 0; transform: scaleX(0); transform-origin: left; transition: transform 0.7s cubic-bezier(0.7, 0, 0.84, 0); will-change: transform; } .web-banner:hover::after { transform: scaleX(1); transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .web-banner > * { position: relative; z-index: 1; } @media (max-width: 768px) { .web-banner { font-size: 18px; padding: 11px 35px; } .web-banner .banner-button { gap: 11px !important; } .web-banner .button-text { margin-bottom: 4px; } } @media (max-width: 564px) { .web-banner { font-size: 15px; padding: 9px 40px; } .web-banner .button-text { margin-bottom: 0px; } .web-banner .banner-event-details { gap: 0px !important; flex-direction: column; text-align: left; line-height: 21px; } .web-banner .banner-event-details .event-date { position: relative; top: -5px; } .web-banner .banner-button { align-self: baseline; gap: 8px !important; margin-top: -2px !important; padding-top: 0px !important; } } .web-banner .banner-button { display: flex; align-items: center; gap: 14.5px; padding-top: 1px; } .web-banner .banner-button img { width: 24.5px; height: 33.7px; } @media (max-width: 768px) { .web-banner .banner-button img { width: 15.5px; height: 17px; margin-top: 4px; } } @media (max-width: 564px) { .web-banner .banner-button img { width: 14.5px; height: 13.85px; } } .web-banner .banner-event-details { display: flex; gap: 32px; } .web-banner .button-icon { transform-style: preserve-3d; aspect-ratio: 0.71; object-fit: contain; animation: none; transform: rotateZ(0deg); transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); align-self: stretch; margin: auto 0; transform-style: preserve-3d; } @keyframes iconJitter { from { transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(0deg) skew(0deg, 0deg); } to { transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(45deg) skew(0deg, 0deg); } } .web-banner a { text-decoration: none; } .button-icon { animation: iconJitter 0.7s ease-in-out; animation-iteration-count: 1; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes iconReturn { from { transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(45deg) skew(0deg, 0deg); } to { transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(0deg) skew(0deg, 0deg); } } /* After the banner has been hovered once, on unhover run the reverse animation */ .web-banner.has-hover:not(:hover) .button-icon { animation: iconReturn 0.7s ease-in-out forwards; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } /* Content text styling (applies mostly to Markdown-generated content)------- */ [data-component-name="Markdown/Markdown"] article { padding-bottom: 50px; } [data-component-name="Markdown/Markdown"] article a { text-decoration: underline; } [data-component-name="Markdown/Markdown"] article h1, [data-component-name="Markdown/Markdown"] article .h1 { font-size: 3rem; margin-top: 32px; line-height: 1.2; font-weight: 700; } [data-component-name="Markdown/Markdown"] article h1:first-child, [data-component-name="Markdown/Markdown"] article .h1:first-child { margin-top: 0; line-height: 1.2; } [data-component-name="Markdown/Markdown"] article h2, [data-component-name="Markdown/Markdown"] article .h2, [data-component-name="Markdown/Markdown"] article h2.md { margin-top: 2.5rem; margin-bottom: 1.5rem; font-size: 2.5rem; font-weight: 600; line-height: 1.2; } [data-component-name="Markdown/Markdown"] article h3, [data-component-name="Markdown/Markdown"] article .h3, [data-component-name="Markdown/Markdown"] article h3.md { font-size: 2.125rem; margin-top: 2rem; margin-bottom: 1rem; line-height: 1.2; } [data-component-name="Markdown/Markdown"] article h4, [data-component-name="Markdown/Markdown"] article .h4 { font-size: 1.75rem; margin-top: 1.5rem; margin-bottom: 0.5rem; line-height: 1.2; } [data-component-name="Markdown/Markdown"] article h5, [data-component-name="Markdown/Markdown"] article .h5 { font-size: 1.25rem; margin-top: 1.25rem; line-height: 1.2; font-weight: 700; } [data-component-name="Markdown/Markdown"] article h6, [data-component-name="Markdown/Markdown"] article .h6 { font-size: 1rem; margin-top: 1rem; line-height: 1.2; font-weight: 700; } [data-component-name="Markdown/Markdown"] article { /* Some list items contain

tags, some don't. These styles make sure both kinds are spaced consistently. */ } [data-component-name="Markdown/Markdown"] article > ul li, [data-component-name="Markdown/Markdown"] article > ol li, [data-component-name="Markdown/Markdown"] article .children-display li { margin: 6px; margin-top: 24px; } [data-component-name="Markdown/Markdown"] article > ul li:first-child, [data-component-name="Markdown/Markdown"] article > ol li:first-child, [data-component-name="Markdown/Markdown"] article .children-display li:first-child { margin-top: 16px; } [data-component-name="Markdown/Markdown"] article > ul li p, [data-component-name="Markdown/Markdown"] article > ol li p, [data-component-name="Markdown/Markdown"] article .children-display li p { margin: 0; } [data-component-name="Markdown/Markdown"] article [data-component-name="Markdoc/Tabs/Tabs"] li { margin: 0; } [data-component-name="Markdown/Markdown"] article a[title=Source], [data-component-name="Markdown/Markdown"] article a[title=ソース] { float: right; padding-left: 20px; } [data-component-name="Markdown/Markdown"] article h1.invisible, [data-component-name="Markdown/Markdown"] article .invisible.h1, [data-component-name="Markdown/Markdown"] article h2.invisible, [data-component-name="Markdown/Markdown"] article .invisible.h2, [data-component-name="Markdown/Markdown"] article h3.invisible, [data-component-name="Markdown/Markdown"] article .invisible.h3, [data-component-name="Markdown/Markdown"] article h4.invisible, [data-component-name="Markdown/Markdown"] article .invisible.h4, [data-component-name="Markdown/Markdown"] article h5.invisible, [data-component-name="Markdown/Markdown"] article .invisible.h5, [data-component-name="Markdown/Markdown"] article h6.invisible, [data-component-name="Markdown/Markdown"] article .invisible.h6 { font-size: 0; line-height: 0; margin: 0; } [data-component-name="Markdown/Markdown"] article h1.invisible .hover_anchor, [data-component-name="Markdown/Markdown"] article .invisible.h1 .hover_anchor, [data-component-name="Markdown/Markdown"] article h2.invisible .hover_anchor, [data-component-name="Markdown/Markdown"] article .invisible.h2 .hover_anchor, [data-component-name="Markdown/Markdown"] article h3.invisible .hover_anchor, [data-component-name="Markdown/Markdown"] article .invisible.h3 .hover_anchor, [data-component-name="Markdown/Markdown"] article h4.invisible .hover_anchor, [data-component-name="Markdown/Markdown"] article .invisible.h4 .hover_anchor, [data-component-name="Markdown/Markdown"] article h5.invisible .hover_anchor, [data-component-name="Markdown/Markdown"] article .invisible.h5 .hover_anchor, [data-component-name="Markdown/Markdown"] article h6.invisible .hover_anchor, [data-component-name="Markdown/Markdown"] article .invisible.h6 .hover_anchor { display: none; } [data-component-name="Markdown/Markdown"] article .shield { display: inline-block !important; vertical-align: middle; } .blurb a { text-decoration: underline; } .hover_anchor { visibility: hidden; padding-left: 1rem; font-size: 1.25rem; } h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hover .hover_anchor, h3:hover .hover_anchor, .h3:hover .hover_anchor, h4:hover .hover_anchor, .h4:hover .hover_anchor, h5:hover .hover_anchor, .h5:hover .hover_anchor, h6:hover .hover_anchor, .h6:hover .hover_anchor { visibility: visible; text-decoration: none; } .bds-grid__container { width: 100%; margin-right: auto; margin-left: auto; padding-right: 16px; padding-left: 16px; box-sizing: border-box; } @media (min-width: 576px) { .bds-grid__container { padding-right: 24px; padding-left: 24px; } } @media (min-width: 992px) { .bds-grid__container { padding-right: 32px; padding-left: 32px; } } @media (min-width: 1280px) { .bds-grid__container { padding-right: 112px; padding-left: 112px; max-width: 1440px; } } .bds-grid__container--wide { padding-left: 0px; padding-right: 0px; } @media (min-width: 1280px) { .bds-grid__container--wide { padding-right: 80px; padding-left: 80px; } } @media (min-width: 1512px) { .bds-grid__container--wide { padding-right: 112px; padding-left: 112px; max-width: 1504px; } } .bds-grid__row { display: flex; flex-wrap: wrap; gap: 8px; } .bds-grid__col { box-sizing: border-box; flex: auto; flex-shrink: 0; width: 100%; max-width: 100%; } .bds-grid__col-fill { flex: 1 0 0; width: auto; } .bds-grid__col-1 { flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 1 + 8px * (1 - 1)); } @media (min-width: 576px) { .bds-grid__col-1 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1)); } } @media (min-width: 992px) { .bds-grid__col-1 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1)); } } .bds-grid__col-2 { flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 2 + 8px * (2 - 1)); } @media (min-width: 576px) { .bds-grid__col-2 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1)); } } @media (min-width: 992px) { .bds-grid__col-2 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1)); } } .bds-grid__col-3 { flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 3 + 8px * (3 - 1)); } @media (min-width: 576px) { .bds-grid__col-3 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1)); } } @media (min-width: 992px) { .bds-grid__col-3 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1)); } } .bds-grid__col-4 { flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-4 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1)); } } @media (min-width: 992px) { .bds-grid__col-4 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1)); } } .bds-grid__col-5 { flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-5 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1)); } } @media (min-width: 992px) { .bds-grid__col-5 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1)); } } .bds-grid__col-6 { flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-6 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1)); } } @media (min-width: 992px) { .bds-grid__col-6 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1)); } } .bds-grid__col-7 { flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-7 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1)); } } @media (min-width: 992px) { .bds-grid__col-7 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1)); } } .bds-grid__col-8 { flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-8 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } } @media (min-width: 992px) { .bds-grid__col-8 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1)); } } .bds-grid__col-9 { flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-9 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } } @media (min-width: 992px) { .bds-grid__col-9 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1)); } } .bds-grid__col-10 { flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-10 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } } @media (min-width: 992px) { .bds-grid__col-10 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1)); } } .bds-grid__col-11 { flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-11 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } } @media (min-width: 992px) { .bds-grid__col-11 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1)); } } .bds-grid__col-12 { flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-12 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } } @media (min-width: 992px) { .bds-grid__col-12 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1)); } } .bds-grid__col-auto { flex: 0 0 auto; width: auto; } .bds-grid__offset-0 { margin-left: 0; } .bds-grid__offset-1 { margin-left: 25%; } .bds-grid__offset-2 { margin-left: 50%; } .bds-grid__offset-3 { margin-left: 75%; } @media (min-width: 576px) { .bds-grid__col-md-fill { flex: 1 0 0; width: auto; } .bds-grid__col-md-1 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1)); } .bds-grid__col-md-2 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1)); } .bds-grid__col-md-3 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1)); } .bds-grid__col-md-4 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1)); } .bds-grid__col-md-5 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1)); } .bds-grid__col-md-6 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1)); } .bds-grid__col-md-7 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1)); } .bds-grid__col-md-8 { flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } .bds-grid__col-md-auto { flex: 0 0 auto; width: auto; } .bds-grid__offset-md-0 { margin-left: 0; } .bds-grid__offset-md-1 { margin-left: 12.5%; } .bds-grid__offset-md-2 { margin-left: 25%; } .bds-grid__offset-md-3 { margin-left: 37.5%; } .bds-grid__offset-md-4 { margin-left: 50%; } .bds-grid__offset-md-5 { margin-left: 62.5%; } .bds-grid__offset-md-6 { margin-left: 75%; } .bds-grid__offset-md-7 { margin-left: 87.5%; } } @media (min-width: 992px) { .bds-grid__col-lg-fill { flex: 1 0 0; width: auto; } .bds-grid__col-lg-1 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1)); } .bds-grid__col-lg-2 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1)); } .bds-grid__col-lg-3 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1)); } .bds-grid__col-lg-4 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1)); } .bds-grid__col-lg-5 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1)); } .bds-grid__col-lg-6 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1)); } .bds-grid__col-lg-7 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1)); } .bds-grid__col-lg-8 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1)); } .bds-grid__col-lg-9 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1)); } .bds-grid__col-lg-10 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1)); } .bds-grid__col-lg-11 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1)); } .bds-grid__col-lg-12 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1)); } .bds-grid__col-lg-auto { flex: 0 0 auto; width: auto; } .bds-grid__offset-lg-0 { margin-left: 0; } .bds-grid__offset-lg-1 { margin-left: 8.33333333%; } .bds-grid__offset-lg-2 { margin-left: 16.66666667%; } .bds-grid__offset-lg-3 { margin-left: 25%; } .bds-grid__offset-lg-4 { margin-left: 33.33333333%; } .bds-grid__offset-lg-5 { margin-left: 41.66666667%; } .bds-grid__offset-lg-6 { margin-left: 50%; } .bds-grid__offset-lg-7 { margin-left: 58.33333333%; } .bds-grid__offset-lg-8 { margin-left: 66.66666667%; } .bds-grid__offset-lg-9 { margin-left: 75%; } .bds-grid__offset-lg-10 { margin-left: 83.33333333%; } .bds-grid__offset-lg-11 { margin-left: 91.66666667%; } } @media (min-width: 1280px) { .bds-grid__col-xl-fill { flex: 1 0 0; width: auto; } .bds-grid__col-xl-1 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1)); } .bds-grid__col-xl-2 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1)); } .bds-grid__col-xl-3 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1)); } .bds-grid__col-xl-4 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1)); } .bds-grid__col-xl-5 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1)); } .bds-grid__col-xl-6 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1)); } .bds-grid__col-xl-7 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1)); } .bds-grid__col-xl-8 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1)); } .bds-grid__col-xl-9 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1)); } .bds-grid__col-xl-10 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1)); } .bds-grid__col-xl-11 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1)); } .bds-grid__col-xl-12 { flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1)); } .bds-grid__col-xl-auto { flex: 0 0 auto; width: auto; } .bds-grid__offset-xl-0 { margin-left: 0; } .bds-grid__offset-xl-1 { margin-left: 8.33333333%; } .bds-grid__offset-xl-2 { margin-left: 16.66666667%; } .bds-grid__offset-xl-3 { margin-left: 25%; } .bds-grid__offset-xl-4 { margin-left: 33.33333333%; } .bds-grid__offset-xl-5 { margin-left: 41.66666667%; } .bds-grid__offset-xl-6 { margin-left: 50%; } .bds-grid__offset-xl-7 { margin-left: 58.33333333%; } .bds-grid__offset-xl-8 { margin-left: 66.66666667%; } .bds-grid__offset-xl-9 { margin-left: 75%; } .bds-grid__offset-xl-10 { margin-left: 83.33333333%; } .bds-grid__offset-xl-11 { margin-left: 91.66666667%; } } .bds-link-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .bds-link-icon svg { display: block; } .bds-link-icon svg path { stroke: currentColor; } .bds-link-icon svg .arrow-horizontal { transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-link-icon--internal svg .arrow-horizontal { transform-origin: right center; } .bds-link-icon--external svg .arrow-horizontal { transform-origin: 19px 2px; } a:hover .bds-link-icon--internal:not(.bds-link-icon--disabled) svg .arrow-horizontal, a:focus .bds-link-icon--internal:not(.bds-link-icon--disabled) svg .arrow-horizontal { transform: scaleX(0); } a:hover .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizontal, a:focus .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizontal { transform: scale(0); } .bds-link-icon--disabled { opacity: 0.5; cursor: not-allowed; } .bds-link-icon--disabled svg path { stroke: currentColor; } .bds-link-icon--disabled svg .arrow-horizontal { transition: none; } html.light .bds-link-icon--disabled svg path, .light .bds-link-icon--disabled svg path { stroke: #8A919A; } html.dark .bds-link-icon--disabled svg path, .dark .bds-link-icon--disabled svg path, html:not(.light) .bds-link-icon--disabled svg path { stroke: #72777E; } .bds-link-icon--internal.bds-link-icon--small { width: 14px; height: 13px; } @media (min-width: 1280px) { .bds-link-icon--internal.bds-link-icon--small { width: 15px; height: 14px; } } .bds-link-icon--internal.bds-link-icon--medium { width: 17px; height: 14px; } @media (min-width: 1280px) { .bds-link-icon--internal.bds-link-icon--medium { height: 16px; } } .bds-link-icon--internal.bds-link-icon--large { width: 20px; height: 16px; } @media (min-width: 1280px) { .bds-link-icon--internal.bds-link-icon--large { width: 26px; height: 22px; } } .bds-link-icon--external.bds-link-icon--small { width: 14px; height: 14px; } .bds-link-icon--external.bds-link-icon--medium { width: 16px; height: 16px; } .bds-link-icon--external.bds-link-icon--large { width: 17px; height: 17px; } @media (min-width: 1280px) { .bds-link-icon--external.bds-link-icon--large { width: 21px; height: 21px; } } .bds-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: color 0.2s ease, text-decoration 0.2s ease; cursor: pointer; } .bds-link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } .bds-link .bds-link-icon { margin-left: 0; flex-shrink: 0; } .bds-link--small { font-size: 14px; line-height: 20.1px; letter-spacing: 0; gap: 16px; } @media (min-width: 1280px) { .bds-link--small { font-size: 16px; line-height: 23.2px; } } .bds-link--medium { font-size: 16px; line-height: 23.2px; letter-spacing: 0; gap: 16px; } @media (min-width: 1280px) { .bds-link--medium { font-size: 18px; line-height: 26.1px; letter-spacing: -0.5px; } } .bds-link--large { font-size: 18px; line-height: 30px; letter-spacing: -0.5px; gap: 24px; } @media (min-width: 1280px) { .bds-link--large { font-size: 24px; letter-spacing: 0; } } a.bds-link, .bds-link { color: #0DAA3E; text-decoration: none; } a.bds-link:hover:not(.bds-link--disabled), .bds-link:hover:not(.bds-link--disabled) { color: #078139; text-decoration: underline; } a.bds-link:focus:not(.bds-link--disabled), .bds-link:focus:not(.bds-link--disabled) { color: #078139; text-decoration: underline; } a.bds-link:active:not(.bds-link--disabled), .bds-link:active:not(.bds-link--disabled) { color: #0DAA3E; text-decoration: underline; } a.bds-link:visited:not(.bds-link--disabled), .bds-link:visited:not(.bds-link--disabled) { color: #7649E3; } html.light a.bds-link, html.light nav a.bds-link { color: #0DAA3E; text-decoration: none; } html.light a.bds-link:focus-visible, html.light nav a.bds-link:focus-visible { outline-color: #141414; } html.light a.bds-link:hover:not(.bds-link--disabled), html.light nav a.bds-link:hover:not(.bds-link--disabled) { color: #078139; text-decoration: underline; } html.light a.bds-link:focus:not(.bds-link--disabled), html.light nav a.bds-link:focus:not(.bds-link--disabled) { color: #078139; text-decoration: underline; } html.light a.bds-link:active:not(.bds-link--disabled), html.light nav a.bds-link:active:not(.bds-link--disabled) { color: #0DAA3E; text-decoration: underline; } html.light a.bds-link:visited:not(.bds-link--disabled), html.light nav a.bds-link:visited:not(.bds-link--disabled) { color: #7649E3; } html.light a.bds-link.bds-link--disabled, html.light nav a.bds-link.bds-link--disabled { color: #8A919A; cursor: not-allowed; pointer-events: none; text-decoration: none; } html.light a.bds-link.bds-link--disabled:hover, html.light a.bds-link.bds-link--disabled:focus, html.light a.bds-link.bds-link--disabled:active, html.light a.bds-link.bds-link--disabled:visited, html.light nav a.bds-link.bds-link--disabled:hover, html.light nav a.bds-link.bds-link--disabled:focus, html.light nav a.bds-link.bds-link--disabled:active, html.light nav a.bds-link.bds-link--disabled:visited { color: #8A919A; text-decoration: none; } html.dark a.bds-link, html.dark nav a.bds-link { color: #21E46B; text-decoration: none; } html.dark a.bds-link:focus-visible, html.dark nav a.bds-link:focus-visible { outline-color: #FFFFFF; } html.dark a.bds-link:hover:not(.bds-link--disabled), html.dark nav a.bds-link:hover:not(.bds-link--disabled) { color: #70EE97; text-decoration: underline; } html.dark a.bds-link:focus:not(.bds-link--disabled), html.dark nav a.bds-link:focus:not(.bds-link--disabled) { color: #70EE97; text-decoration: underline; } html.dark a.bds-link:active:not(.bds-link--disabled), html.dark nav a.bds-link:active:not(.bds-link--disabled) { color: #21E46B; text-decoration: underline; } html.dark a.bds-link:visited:not(.bds-link--disabled), html.dark nav a.bds-link:visited:not(.bds-link--disabled) { color: #C0A7FF; } html.dark a.bds-link.bds-link--disabled, html.dark nav a.bds-link.bds-link--disabled { color: #8A919A; cursor: not-allowed; pointer-events: none; text-decoration: none; } html.dark a.bds-link.bds-link--disabled:hover, html.dark a.bds-link.bds-link--disabled:focus, html.dark a.bds-link.bds-link--disabled:active, html.dark a.bds-link.bds-link--disabled:visited, html.dark nav a.bds-link.bds-link--disabled:hover, html.dark nav a.bds-link.bds-link--disabled:focus, html.dark nav a.bds-link.bds-link--disabled:active, html.dark nav a.bds-link.bds-link--disabled:visited { color: #8A919A; text-decoration: none; } a.bds-link.bds-link--disabled, .bds-link.bds-link--disabled { color: #8A919A; cursor: not-allowed; pointer-events: none; text-decoration: none; } a.bds-link.bds-link--disabled .bds-link-icon, .bds-link.bds-link--disabled .bds-link-icon { opacity: 0.5; } a.bds-link.bds-link--disabled:hover, a.bds-link.bds-link--disabled:focus, a.bds-link.bds-link--disabled:active, a.bds-link.bds-link--disabled:visited, .bds-link.bds-link--disabled:hover, .bds-link.bds-link--disabled:focus, .bds-link.bds-link--disabled:active, .bds-link.bds-link--disabled:visited { color: #8A919A; text-decoration: none; } html.dark a.bds-link.bds-link--disabled, html.dark .bds-link.bds-link--disabled, .dark a.bds-link.bds-link--disabled, .dark .bds-link.bds-link--disabled, html:not(.light) a.bds-link.bds-link--disabled, html:not(.light) .bds-link.bds-link--disabled { color: #8A919A; } html.dark a.bds-link.bds-link--disabled:hover, html.dark a.bds-link.bds-link--disabled:focus, html.dark a.bds-link.bds-link--disabled:active, html.dark a.bds-link.bds-link--disabled:visited, html.dark .bds-link.bds-link--disabled:hover, html.dark .bds-link.bds-link--disabled:focus, html.dark .bds-link.bds-link--disabled:active, html.dark .bds-link.bds-link--disabled:visited, .dark a.bds-link.bds-link--disabled:hover, .dark a.bds-link.bds-link--disabled:focus, .dark a.bds-link.bds-link--disabled:active, .dark a.bds-link.bds-link--disabled:visited, .dark .bds-link.bds-link--disabled:hover, .dark .bds-link.bds-link--disabled:focus, .dark .bds-link.bds-link--disabled:active, .dark .bds-link.bds-link--disabled:visited, html:not(.light) a.bds-link.bds-link--disabled:hover, html:not(.light) a.bds-link.bds-link--disabled:focus, html:not(.light) a.bds-link.bds-link--disabled:active, html:not(.light) a.bds-link.bds-link--disabled:visited, html:not(.light) .bds-link.bds-link--disabled:hover, html:not(.light) .bds-link.bds-link--disabled:focus, html:not(.light) .bds-link.bds-link--disabled:active, html:not(.light) .bds-link.bds-link--disabled:visited { color: #8A919A; } .bds-link--inline { display: inline; gap: 0; } .bds-link--inline .bds-link-icon { display: none; } hr.bds-divider, .bds-divider { margin: 0; padding: 0; border: none; border-top: none; border-bottom: none; border-left: none; border-right: none; background: transparent; opacity: 1; color: transparent; background-color: #454549; } .bds-divider--horizontal { display: block; width: 100%; min-width: 100%; } .bds-divider--vertical { display: block; height: auto; min-height: 1px; align-self: stretch; flex-shrink: 0; } .bds-divider--thin.bds-divider--horizontal { height: 0.5px; } .bds-divider--thin.bds-divider--vertical { width: 0.5px; } .bds-divider--regular.bds-divider--horizontal { height: 1px; } .bds-divider--regular.bds-divider--vertical { width: 1px; } .bds-divider--strong.bds-divider--horizontal { height: 2px; } .bds-divider--strong.bds-divider--vertical { width: 2px; } hr.bds-divider--gray, .bds-divider--gray { background-color: #454549; } hr.bds-divider--base, .bds-divider--base { background-color: #FFFFFF; } hr.bds-divider--green, .bds-divider--green { background-color: #21E46B; } html.light hr.bds-divider--gray, html.light .bds-divider--gray { background-color: #CAD4DF; } html.light hr.bds-divider--base, html.light .bds-divider--base { background-color: #111112; } html.light hr.bds-divider--green, html.light .bds-divider--green { background-color: #21E46B; } .bds-card-offgrid { appearance: none; border: none; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-decoration: none; cursor: pointer; text-align: left; position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 400px; height: 480px; padding: 24px; overflow: hidden; transition: background-color 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-card-offgrid:focus { outline: 2px solid #FFFFFF; outline-offset: 1px; } .bds-card-offgrid:focus:not(:focus-visible) { outline: none; } .bds-card-offgrid:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } .bds-card-offgrid__overlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; clip-path: inset(100% 0 0 0); transition: clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-card-offgrid--hovered .bds-card-offgrid__overlay { clip-path: inset(0 0 0 0); } .bds-card-offgrid__icon-container { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; flex-shrink: 0; } .bds-card-offgrid__icon-container > * { max-width: 68px; max-height: 68px; } .bds-card-offgrid__icon-image { width: auto; height: auto; max-width: 68px; max-height: 68px; object-fit: contain; } .bds-card-offgrid__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 40px; } .bds-card-offgrid__title { margin-bottom: 0; white-space: pre-wrap; } .bds-card-offgrid--neutral { background-color: #72777E; color: #FFFFFF; } .bds-card-offgrid--neutral .bds-card-offgrid__overlay { background-color: #8A919A; } .bds-card-offgrid--neutral:active:not(.bds-card-offgrid--disabled) .bds-card-offgrid__overlay { background-color: rgba(114, 119, 126, 0.7); clip-path: inset(0 0 0 0); } .bds-card-offgrid--green { background-color: #21E46B; color: #141414; } .bds-card-offgrid--green .bds-card-offgrid__overlay { background-color: #70EE97; } .bds-card-offgrid--green:active:not(.bds-card-offgrid--disabled) .bds-card-offgrid__overlay { background-color: #0DAA3E; clip-path: inset(0 0 0 0); } .bds-card-offgrid--disabled { background-color: #72777E; color: #FFFFFF; opacity: 0.3; cursor: not-allowed; } .bds-card-offgrid--disabled:focus, .bds-card-offgrid--disabled:focus-visible { outline: none; } html.light .bds-card-offgrid:focus { outline-color: #111112; } html.light .bds-card-offgrid:focus-visible { outline-color: #111112; } html.light .bds-card-offgrid--neutral { background-color: #E6EAF0; color: #111112; } html.light .bds-card-offgrid--neutral .bds-card-offgrid__overlay { background-color: #CAD4DF; } html.light .bds-card-offgrid--neutral.bds-card-offgrid--hovered { color: #141414; } html.light .bds-card-offgrid--neutral:active:not(.bds-card-offgrid--disabled) .bds-card-offgrid__overlay { background-color: #8A919A; clip-path: inset(0 0 0 0); } html.light .bds-card-offgrid--green { background-color: #70EE97; color: #141414; } html.light .bds-card-offgrid--green .bds-card-offgrid__overlay { background-color: #21E46B; } html.light .bds-card-offgrid--green:active:not(.bds-card-offgrid--disabled) .bds-card-offgrid__overlay { background-color: #0DAA3E; clip-path: inset(0 0 0 0); } html.light .bds-card-offgrid--disabled { background-color: #F0F3F7; color: #72777E; opacity: 1; } html.light .bds-card-offgrid--disabled .bds-card-offgrid__icon-container { opacity: 0.5; } @media (max-width: 767px) { .bds-card-offgrid { width: 100%; min-height: 480px; height: auto; } } .bds-card-image { display: flex; flex-direction: column; gap: 24px; width: 100%; background-color: #FFFFFF; cursor: pointer; } .bds-grid__col .bds-card-image { flex: 1 1 auto; width: 100%; } .bds-card-image:focus { outline: 2px solid #141414; outline-offset: 2px; } .bds-card-image:focus:not(:focus-visible) { outline: none; } .bds-card-image:focus-visible { outline: 2px solid #141414; outline-offset: 2px; } .bds-card-image__image-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 400px; background-color: var(--bds-card-image-bg, #F0F3F7); overflow: hidden; flex-shrink: 0; } .bds-card-image__image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: center; transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-card-image--full-bleed { height: auto; width: 100%; } .bds-card-image--full-bleed .bds-card-image__image-container { width: 100%; height: auto; aspect-ratio: 1/1; } .bds-card-image--full-bleed .bds-card-image__image { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; } .bds-card-image__content { display: flex; flex-direction: column; justify-content: space-between; flex: 1; padding: 0 8px; padding-bottom: 8px; min-height: 0; } .bds-card-image__text { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; } .bds-card-image__title { color: #141414; margin: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bds-card-image__subtitle { color: #141414; margin: 0; text-align: left; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bds-card-image__content .bds-btn { align-self: flex-start; flex-shrink: 0; margin-top: 24px; } @media (min-width: 576px) { .bds-card-image__content .bds-btn { margin-top: 24px; } } @media (min-width: 992px) { .bds-card-image__content .bds-btn { margin-top: 32px; } } .bds-card-image--hovered:not(.bds-card-image--disabled) .bds-card-image__image, .bds-card-image:hover:not(.bds-card-image--disabled) .bds-card-image__image { transform: scale(1.1); } .bds-card-image--disabled { cursor: not-allowed; pointer-events: none; } .bds-card-image--disabled .bds-card-image__title, .bds-card-image--disabled .bds-card-image__subtitle { color: #72777E; } @media (max-width: 991.98px) { .bds-card-image { gap: 16px; } .bds-card-image__image-container { height: 280px; } .bds-card-image__content { padding: 0 8px; } .bds-card-image__text { gap: 8px; } } @media (max-width: 575.98px) { .bds-card-image { gap: 16px; } .bds-card-image__image-container { height: 268px; } .bds-card-image__content { padding: 0 8px; } .bds-card-image__text { gap: 8px; } } html.light .bds-card-image:focus { outline-color: #141414; } html.light .bds-card-image:focus-visible { outline-color: #141414; } html.dark .bds-card-image { background-color: #111112; border-color: #111112; } html.dark .bds-card-image:focus { outline: 2px solid #FFFFFF; outline-offset: 2px; } html.dark .bds-card-image:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } html.dark .bds-card-image__image-container { background-color: var(--bds-card-image-bg, #72777E); } html.dark .bds-card-image__title { color: #FFFFFF; } html.dark .bds-card-image__subtitle { color: #E6EAF0; } html.dark .bds-card-image--disabled .bds-card-image__title { color: #FFFFFF; } html.dark .bds-card-image--disabled .bds-card-image__subtitle { color: #E6EAF0; } .bds-tile-logo { appearance: none; border: none; background: none; margin: 0; font: inherit; color: inherit; text-decoration: none; text-align: center; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; width: 100%; cursor: pointer; transition: background-color 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-tile-logo:focus { outline: 2px solid #FFFFFF; outline-offset: 1px; } .bds-tile-logo:focus:not(:focus-visible) { outline: none; } .bds-tile-logo:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } .bds-tile-logo--square { aspect-ratio: 1; padding: 36px 20px; flex-shrink: 0; } @media (min-width: 576px) { .bds-tile-logo--square { padding: 40px 24px; } } @media (min-width: 992px) { .bds-tile-logo--square { padding: 72px 48px; } } .bds-tile-logo--rectangle { aspect-ratio: 9/5; width: 100%; padding: 20px 36px; flex-shrink: 0; } @media (min-width: 992px) { .bds-tile-logo--rectangle { padding: 32px 64px; } } .bds-tile-logo__overlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; clip-path: inset(100% 0 0 0); transition: clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-tile-logo--hovered .bds-tile-logo__overlay { clip-path: inset(0 0 0 0); } .bds-tile-logo__image { position: relative; z-index: 1; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .bds-tile-logo--neutral { background-color: #E6EAF0; } .bds-tile-logo--neutral .bds-tile-logo__overlay { background-color: #CAD4DF; } .bds-tile-logo--neutral:active:not(.bds-tile-logo--disabled) .bds-tile-logo__overlay { background-color: #8A919A; clip-path: inset(0 0 0 0); } .bds-tile-logo--green { background-color: #70EE97; } .bds-tile-logo--green .bds-tile-logo__overlay { background-color: #21E46B; } .bds-tile-logo--green:active:not(.bds-tile-logo--disabled) .bds-tile-logo__overlay { background-color: #0DAA3E; clip-path: inset(0 0 0 0); } .bds-tile-logo--disabled { background-color: #F0F3F7; cursor: not-allowed; pointer-events: none; } .bds-tile-logo--disabled:focus, .bds-tile-logo--disabled:focus-visible { outline: none; } .bds-tile-logo--disabled .bds-tile-logo__image { opacity: 0.5; } html.dark .bds-tile-logo:focus { outline-color: #FFFFFF; } html.dark .bds-tile-logo:focus-visible { outline-color: #FFFFFF; } html.dark .bds-tile-logo--neutral { background-color: #72777E; } html.dark .bds-tile-logo--neutral .bds-tile-logo__overlay { background-color: #8A919A; } html.dark .bds-tile-logo--neutral:active:not(.bds-tile-logo--disabled) .bds-tile-logo__overlay { background-color: rgba(114, 119, 126, 0.7); clip-path: inset(0 0 0 0); } html.dark .bds-tile-logo--green { background-color: #70EE97; } html.dark .bds-tile-logo--green .bds-tile-logo__overlay { background-color: #21E46B; } html.dark .bds-tile-logo--green:active:not(.bds-tile-logo--disabled) .bds-tile-logo__overlay { background-color: #0DAA3E; clip-path: inset(0 0 0 0); } html.dark .bds-tile-logo--disabled { background-color: rgba(114, 119, 126, 0.3); opacity: 1; } html.dark .bds-tile-logo--disabled .bds-tile-logo__image { opacity: 0.5; } html.light .bds-tile-logo:focus { outline-color: #141414; } html.light .bds-tile-logo:focus-visible { outline-color: #141414; } html.light .bds-tile-logo--neutral { background-color: #E6EAF0; } html.light .bds-tile-logo--neutral .bds-tile-logo__overlay { background-color: #CAD4DF; } html.light .bds-tile-logo--neutral:active:not(.bds-tile-logo--disabled) .bds-tile-logo__overlay { background-color: #8A919A; clip-path: inset(0 0 0 0); } html.light .bds-tile-logo--green { background-color: #70EE97; } html.light .bds-tile-logo--green .bds-tile-logo__overlay { background-color: #21E46B; } html.light .bds-tile-logo--green:active:not(.bds-tile-logo--disabled) .bds-tile-logo__overlay { background-color: #0DAA3E; clip-path: inset(0 0 0 0); } html.light .bds-tile-logo--disabled { background-color: #F0F3F7; opacity: 1; } html.light .bds-tile-logo--disabled .bds-tile-logo__image { opacity: 0.5; } .bds-card-icon { appearance: none; border: none; background: none; margin: 0; font: inherit; color: inherit; text-decoration: none; text-align: left; position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-sizing: border-box; width: 100%; height: 136px; padding: 8px; } @media (min-width: 576px) { .bds-card-icon { height: 140px; padding: 12px; } } @media (min-width: 992px) { .bds-card-icon { height: 144px; padding: 16px; } } .bds-card-icon { cursor: pointer; transition: background-color 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-card-icon:hover { text-decoration: none; } .bds-card-icon:focus { outline: 2px solid #141414; outline-offset: 1px; } .bds-card-icon:focus:not(:focus-visible) { outline: none; } .bds-card-icon:focus-visible { outline: 2px solid #141414; outline-offset: 2px; } .bds-card-icon__overlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; clip-path: inset(100% 0 0 0); transition: clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-card-icon--hovered .bds-card-icon__overlay { clip-path: inset(0 0 0 0); } .bds-card-icon__icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; } @media (min-width: 576px) { .bds-card-icon__icon { width: 60px; height: 60px; } } @media (min-width: 992px) { .bds-card-icon__icon { width: 64px; height: 64px; } } .bds-card-icon__icon-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .bds-card-icon__content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; } .bds-card-icon__label { font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; color: #141414; margin-bottom: 0; font-size: 16px; line-height: 26.1px; letter-spacing: 0px; } @media (min-width: 992px) { .bds-card-icon__label { font-size: 18px; line-height: 26.1px; letter-spacing: -0.5px; } } .bds-card-icon__arrow { flex-shrink: 0; color: #141414; } .bds-card-icon:hover .bds-card-icon__arrow .bds-link-icon--internal:not(.bds-link-icon--disabled) svg .arrow-horizontal, .bds-card-icon:focus .bds-card-icon__arrow .bds-link-icon--internal:not(.bds-link-icon--disabled) svg .arrow-horizontal, .bds-card-icon--hovered .bds-card-icon__arrow .bds-link-icon--internal:not(.bds-link-icon--disabled) svg .arrow-horizontal { transform: scaleX(0); } .bds-card-icon:hover .bds-card-icon__arrow .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizontal, .bds-card-icon:focus .bds-card-icon__arrow .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizontal, .bds-card-icon--hovered .bds-card-icon__arrow .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizontal { transform: scale(0); } .bds-card-icon--neutral { background-color: #E6EAF0; } .bds-card-icon--neutral .bds-card-icon__overlay { background-color: #CAD4DF; } .bds-card-icon--neutral:active:not(.bds-card-icon--disabled) .bds-card-icon__overlay { background-color: #8A919A; clip-path: inset(0 0 0 0); } .bds-card-icon--green { background-color: #70EE97; } .bds-card-icon--green .bds-card-icon__overlay { background-color: #21E46B; } .bds-card-icon--green:active:not(.bds-card-icon--disabled) .bds-card-icon__overlay { background-color: #0DAA3E; clip-path: inset(0 0 0 0); } .bds-card-icon--disabled { cursor: not-allowed; pointer-events: none; } .bds-card-icon--disabled:focus, .bds-card-icon--disabled:focus-visible { outline: none; } .bds-card-icon--disabled.bds-card-icon--neutral { background-color: #F0F3F7; } .bds-card-icon--disabled.bds-card-icon--neutral .bds-card-icon__label, .bds-card-icon--disabled.bds-card-icon--neutral .bds-card-icon__arrow { color: #8A919A; } .bds-card-icon--disabled.bds-card-icon--neutral .bds-card-icon__icon-img { opacity: 0.5; } .bds-card-icon--disabled.bds-card-icon--green { background-color: #EAFCF1; } .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__label, .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__arrow { color: #8A919A; } .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__icon-img { opacity: 0.5; } html.dark .bds-card-icon:focus { outline-color: #FFFFFF; } html.dark .bds-card-icon:focus-visible { outline-color: #FFFFFF; } html.dark .bds-card-icon--neutral { background-color: #72777E; } html.dark .bds-card-icon--neutral .bds-card-icon__label, html.dark .bds-card-icon--neutral .bds-card-icon__arrow { color: #FFFFFF; } html.dark .bds-card-icon--neutral .bds-card-icon__overlay { background-color: #8A919A; } html.dark .bds-card-icon--neutral:active:not(.bds-card-icon--disabled) .bds-card-icon__overlay { background-color: rgba(114, 119, 126, 0.7); clip-path: inset(0 0 0 0); } html.dark .bds-card-icon--green { background-color: #21E46B; } html.dark .bds-card-icon--green .bds-card-icon__label, html.dark .bds-card-icon--green .bds-card-icon__arrow { color: #141414; } html.dark .bds-card-icon--green .bds-card-icon__overlay { background-color: #70EE97; } html.dark .bds-card-icon--green:active:not(.bds-card-icon--disabled) .bds-card-icon__overlay { background-color: #0DAA3E; clip-path: inset(0 0 0 0); } html.dark .bds-card-icon--disabled { opacity: 0.3; } html.dark .bds-card-icon--disabled.bds-card-icon--neutral { background-color: #72777E; } html.dark .bds-card-icon--disabled.bds-card-icon--neutral .bds-card-icon__label, html.dark .bds-card-icon--disabled.bds-card-icon--neutral .bds-card-icon__arrow { color: #FFFFFF; } html.dark .bds-card-icon--disabled.bds-card-icon--neutral .bds-card-icon__icon-img { opacity: 1; } html.dark .bds-card-icon--disabled.bds-card-icon--green { background-color: #72777E; } html.dark .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__label, html.dark .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__arrow { color: #FFFFFF; } html.dark .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__icon-img { opacity: 1; } html.light .bds-card-icon:focus { outline-color: #141414; } html.light .bds-card-icon:focus-visible { outline-color: #141414; } html.light .bds-card-icon--neutral { background-color: #E6EAF0; } html.light .bds-card-icon--neutral .bds-card-icon__label, html.light .bds-card-icon--neutral .bds-card-icon__arrow { color: #141414; } html.light .bds-card-icon--neutral .bds-card-icon__overlay { background-color: #CAD4DF; } html.light .bds-card-icon--neutral:focus { background-color: #E6EAF0 !important; } html.light .bds-card-icon--neutral:active:not(.bds-card-icon--disabled) .bds-card-icon__overlay { background-color: #8A919A; clip-path: inset(0 0 0 0); } html.light .bds-card-icon--green { background-color: #70EE97; } html.light .bds-card-icon--green .bds-card-icon__label, html.light .bds-card-icon--green .bds-card-icon__arrow { color: #141414; } html.light .bds-card-icon--green .bds-card-icon__overlay { background-color: #21E46B; } html.light .bds-card-icon--green:focus { background-color: #70EE97 !important; } html.light .bds-card-icon--green:active:not(.bds-card-icon--disabled) .bds-card-icon__overlay { background-color: #0DAA3E; clip-path: inset(0 0 0 0); } html.light .bds-card-icon--disabled { opacity: 1; } html.light .bds-card-icon--disabled.bds-card-icon--neutral { background-color: #F0F3F7; } html.light .bds-card-icon--disabled.bds-card-icon--neutral .bds-card-icon__label, html.light .bds-card-icon--disabled.bds-card-icon--neutral .bds-card-icon__arrow { color: #8A919A; } html.light .bds-card-icon--disabled.bds-card-icon--neutral .bds-card-icon__icon-img { opacity: 0.5; } html.light .bds-card-icon--disabled.bds-card-icon--green { background-color: #EAFCF1; } html.light .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__label, html.light .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__arrow { color: #8A919A; } html.light .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__icon-img { opacity: 0.5; } .bds-small-tiles-section__headline { margin-bottom: 8px; } @media (min-width: 992px) { .bds-small-tiles-section__headline { margin-bottom: 16px; } } .bds-small-tiles-section__cards-grid-wrapper { margin-top: 24px; } @media (min-width: 576px) { .bds-small-tiles-section__cards-grid-wrapper { margin-top: 32px; } } @media (min-width: 992px) { .bds-small-tiles-section__cards-grid-wrapper { margin-top: 40px; } } .bds-small-tiles-section__cards-grid { list-style: none; display: grid; grid-template-columns: 1fr; gap: 8px; grid-auto-flow: row; width: 100%; padding: 0; margin: 0; } @media (min-width: 576px) { .bds-small-tiles-section__cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .bds-small-tiles-section__cards-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 992px) { .bds-small-tiles-section__cards-grid.__needs-spacer { grid-template-columns: repeat(2, 1fr); direction: rtl; } } .bds-small-tiles-section__cards-grid__card { direction: ltr; unicode-bidi: isolate; } .bds-standard-card { display: flex; flex-direction: column; justify-content: space-between; padding: 16px; width: 100%; height: 100%; aspect-ratio: 4/3; gap: 16px; } @media (min-width: 576px) { .bds-standard-card { aspect-ratio: 1; padding: 20px; } } @media (min-width: 992px) { .bds-standard-card { padding: 24px; } } .bds-standard-card.bds-standard-card--neutral { background-color: #E6EAF0; } .bds-standard-card.bds-standard-card--green { background-color: #21E46B; } .bds-standard-card.bds-standard-card--yellow { background-color: #F3F1EB; } .bds-standard-card.bds-standard-card--blue { background-color: #EDF4FF; } .bds-standard-card__content { display: flex; flex-direction: column; gap: 8px; width: 100%; color: #141414; } @media (min-width: 992px) { .bds-standard-card__content { gap: 16px; } } .bds-standard-card__headline { word-break: break-word; overflow-wrap: break-word; hyphens: auto; color: #141414; margin: 0; } .bds-standard-card__headline:before { display: none; } .bds-standard-card__description { margin: 0; } .bds-standard-card__buttons { display: flex; flex-direction: column; width: 100%; flex-wrap: wrap; align-items: flex-start; } @media (min-width: 992px) { .bds-standard-card__buttons { flex-direction: row; justify-content: flex-start; align-items: center; } } .bds-header-hero-primary-media { padding-top: 24px; padding-bottom: 24px; } @media (min-width: 576px) { .bds-header-hero-primary-media { padding-top: 32px; padding-bottom: 32px; } } @media (min-width: 992px) { .bds-header-hero-primary-media { padding-top: 170px; padding-bottom: 40px; } } html.light .bds-header-hero-primary-media { background-color: #FFFFFF; } html.dark .bds-header-hero-primary-media { background-color: #141414; } .bds-header-hero-primary-media__headline-container { margin-bottom: 32px; } @media (min-width: 992px) { .bds-header-hero-primary-media__headline-container { margin-bottom: 0px; } } .bds-header-hero-primary-media__headline { margin: 0; display: flex; align-items: flex-end; height: 100%; } .bds-header-hero-primary-media__headline * { max-width: 100%; overflow-wrap: break-word; word-break: break-word; } .bds-header-hero-primary-media__subtitle { margin: 0; padding: 0; } html.light .bds-header-hero-primary-media__subtitle { color: #72777E; } .bds-header-hero-primary-media__cta-container { display: flex; flex-direction: column; gap: 24px; justify-content: flex-end; min-height: 100%; } @media (min-width: 992px) { .bds-header-hero-primary-media__cta-container { gap: 40px; } } .bds-header-hero-primary-media__cta-buttons { width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 16px; } @media (min-width: 576px) { .bds-header-hero-primary-media__cta-buttons { flex-direction: row; justify-content: flex-start; align-items: center; } } @media (min-width: 992px) { .bds-header-hero-primary-media__cta-buttons { gap: 24px; } } .bds-header-hero-primary-media__cta-buttons .bds-btn--tertiary { padding: 0; } .bds-header-hero-primary-media__cta-buttons .bds-btn--tertiary:hover, .bds-header-hero-primary-media__cta-buttons .bds-btn--tertiary:focus-visible, .bds-header-hero-primary-media__cta-buttons .bds-btn--tertiary:focus { padding: 0; } .bds-header-hero-primary-media__media-container { width: 100%; aspect-ratio: 16/9; overflow: hidden; position: relative; margin-top: 24px; height: auto; } @media (min-width: 576px) { .bds-header-hero-primary-media__media-container { margin-top: 32px; aspect-ratio: 2/1; } } @media (min-width: 992px) { .bds-header-hero-primary-media__media-container { margin-top: 40px; aspect-ratio: 3/1; } } .bds-header-hero-primary-media__media-element { width: 100%; height: 100%; object-fit: cover; object-position: center; } .bds-hero-split-media { width: 100%; } .bds-hero-split-media__container { padding-top: 24px; padding-bottom: 24px; } @media (min-width: 576px) { .bds-hero-split-media__container { padding-top: 32px; padding-bottom: 32px; } } @media (min-width: 992px) { .bds-hero-split-media__container { padding-top: 40px; padding-bottom: 40px; } } .bds-hero-split-media__row { gap: 32px; } @media (min-width: 576px) { .bds-hero-split-media__row { gap: 32px; } } @media (min-width: 992px) { .bds-hero-split-media__row { gap: 8px; } } .bds-hero-split-media__content-col { display: flex; flex-direction: column; } .bds-hero-split-media__content { display: flex; flex-direction: column; justify-content: space-between; width: 100%; min-height: 100%; } @media (min-width: 576px) { .bds-hero-split-media__content { min-height: 100%; } } .bds-hero-split-media__title-group { display: flex; flex-direction: column; gap: 8px; max-width: 100%; } @media (min-width: 576px) { .bds-hero-split-media__title-group { gap: 8px; max-width: 75%; } } @media (min-width: 992px) { .bds-hero-split-media__title-group { gap: 16px; max-width: 83.3333333333%; } } .bds-hero-split-media__title { color: #141414; font-family: "Tobias", "Noto Serif", monospace; font-weight: 300; font-size: 48px; line-height: 53px; letter-spacing: -2px; margin-bottom: 32px; } @media (min-width: 576px) { .bds-hero-split-media__title { font-size: 60px; line-height: 66px; letter-spacing: -2px; margin-bottom: 32px; } } @media (min-width: 992px) { .bds-hero-split-media__title { font-size: 72px; line-height: 75.6px; letter-spacing: -3px; margin-bottom: 32px; } } .bds-hero-split-media__title { margin: 0; } .bds-hero-split-media__subtitle { color: #141414; font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 300; font-size: 18px; line-height: 23px; letter-spacing: -0.5px; } @media (min-width: 576px) { .bds-hero-split-media__subtitle { font-size: 18px; line-height: 23px; letter-spacing: -0.5px; } } @media (min-width: 992px) { .bds-hero-split-media__subtitle { font-size: 24px; line-height: 30px; letter-spacing: -1px; } } .bds-hero-split-media__subtitle { margin: 0; } .bds-hero-split-media__description-group { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; } @media (min-width: 576px) { .bds-hero-split-media__description-group { gap: 32px; margin-top: 32px; justify-content: flex-end; } } @media (min-width: 992px) { .bds-hero-split-media__description-group { gap: 40px; margin-top: 0; } } .bds-hero-split-media__description { color: #72777E; font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 300; font-size: 16px; line-height: 23.2px; letter-spacing: 0px; margin-bottom: 16px; } @media (min-width: 576px) { .bds-hero-split-media__description { font-size: 16px; line-height: 23.2px; letter-spacing: 0px; margin-bottom: 16px; } } @media (min-width: 992px) { .bds-hero-split-media__description { font-size: 18px; line-height: 26.1px; letter-spacing: -0.5px; margin-bottom: 16px; } } .bds-hero-split-media__description { margin: 0; max-width: 100%; } @media (min-width: 576px) { .bds-hero-split-media__description { max-width: 75%; } } @media (min-width: 992px) { .bds-hero-split-media__description { max-width: 83.3333333333%; } } .bds-hero-split-media__cta { display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 576px) { .bds-hero-split-media__cta { flex-direction: row; align-items: center; } } .bds-hero-split-media__media-col { display: flex; flex-direction: column; } .bds-hero-split-media__media { width: 100%; aspect-ratio: 1/1; overflow: hidden; } @media (min-width: 576px) { .bds-hero-split-media__media { aspect-ratio: 16/9; } } @media (min-width: 992px) { .bds-hero-split-media__media { aspect-ratio: 1/1; } } .bds-hero-split-media__media-img { width: 100%; height: 100%; object-fit: cover; object-position: center; } html.light .bds-hero-split-media { background-color: #FFFFFF; } html.light .bds-hero-split-media__title, html.light .bds-hero-split-media__subtitle { color: #141414; } html.light .bds-hero-split-media__description { color: #72777E; } html.dark .bds-hero-split-media { background-color: #141414; } html.dark .bds-hero-split-media__title, html.dark .bds-hero-split-media__subtitle { color: #FFFFFF; } html.dark .bds-hero-split-media__description { color: #E6EAF0; } .bds-hero-split-media--accent .bds-hero-split-media__title-surface { background-color: #70EE97; padding: 8px 8px 16px; } @media (min-width: 576px) { .bds-hero-split-media--accent .bds-hero-split-media__title-surface { padding: 16px 16px 24px; } } @media (min-width: 992px) { .bds-hero-split-media--accent .bds-hero-split-media__title-surface { padding: 16px 16px 24px; } } .bds-hero-split-media--accent .bds-hero-split-media__title, .bds-hero-split-media--accent .bds-hero-split-media__subtitle { color: #141414; } @media (min-width: 576px) { .bds-hero-split-media--accent .bds-hero-split-media__title-group { gap: 16px; } } @media (min-width: 992px) { .bds-hero-split-media--accent .bds-hero-split-media__title-group { gap: 16px; } } @media (min-width: 576px) { .bds-hero-split-media--accent .bds-hero-split-media__description-group { gap: 24px; margin-top: 40px; } } @media (min-width: 992px) { .bds-hero-split-media--accent .bds-hero-split-media__description-group { gap: 40px; margin-top: 0; } } html.dark .bds-hero-split-media--accent .bds-hero-split-media__title, html.dark .bds-hero-split-media--accent .bds-hero-split-media__subtitle { color: #141414; } html.light .bds-hero-split-media--accent .bds-hero-split-media__title, html.light .bds-hero-split-media--accent .bds-hero-split-media__subtitle { color: #141414; } .bds-hero-split-media--title-only .bds-hero-split-media__content { justify-content: flex-start; } .bds-hero-split-media--no-description .bds-hero-split-media__description-group { gap: 0; } .bds-button-group { gap: 8px; } @media (min-width: 576px) { .bds-button-group { flex-direction: row !important; align-items: center; } } @media (min-width: 576px) { .bds-button-group--gap-none { gap: 0px; } } @media (min-width: 576px) { .bds-button-group--gap-small { gap: 4px; } } .bds-callout-media-banner { box-sizing: border-box; min-height: 280px; } .bds-callout-media-banner { background-size: cover; background-position: center; background-repeat: no-repeat; padding: 16px; } @media (min-width: 576px) { .bds-callout-media-banner { padding: 24px; } } @media (min-width: 992px) { .bds-callout-media-banner { padding: 40px 32px; min-height: 360px; } } .bds-callout-media-banner__content { gap: 48px; } @media (min-width: 576px) { .bds-callout-media-banner__content { gap: 64px; } } @media (min-width: 1280px) { .bds-callout-media-banner__content { gap: 80px; } } .bds-callout-media-banner--centered .bds-callout-media-banner__content { justify-content: center; } .bds-callout-media-banner__text { flex-direction: column; color: var(--bds-cmb-text-color, #232021); gap: 16px; } @media (min-width: 576px) { .bds-callout-media-banner__text { gap: 24px; } } @media (min-width: 1280px) { .bds-callout-media-banner__text { gap: 32px; } } .bds-callout-media-banner__heading { font-family: "Tobias", "Noto Serif", monospace; font-weight: 300; font-size: 32px; line-height: 40px; letter-spacing: 0px; margin-bottom: 16px; } @media (min-width: 576px) { .bds-callout-media-banner__heading { font-size: 36px; line-height: 45px; letter-spacing: -0.5px; margin-bottom: 16px; } } @media (min-width: 992px) { .bds-callout-media-banner__heading { font-size: 40px; line-height: 46px; letter-spacing: -1px; margin-bottom: 16px; } } .bds-callout-media-banner__heading { margin: 0; color: inherit !important; } .bds-callout-media-banner__subheading { font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: -1px; margin-bottom: 16px; } @media (min-width: 576px) { .bds-callout-media-banner__subheading { font-size: 28px; line-height: 35px; letter-spacing: -0.75px; margin-bottom: 16px; } } @media (min-width: 992px) { .bds-callout-media-banner__subheading { font-size: 32px; line-height: 40px; letter-spacing: -0.5px; margin-bottom: 16px; } } .bds-callout-media-banner__subheading { margin: 0; color: inherit; } .bds-callout-media-banner--default { background-color: #FFFFFF; } .bds-callout-media-banner--light-gray { background-color: #E6EAF0; } .bds-callout-media-banner--lilac { background-color: #C0A7FF; } .bds-callout-media-banner--green { background-color: #70EE97; } .bds-callout-media-banner--gray { background-color: #CAD4DF; } .bds-callout-media-banner--image { background-color: transparent; } .bds-callout-media-banner--image::before { content: ""; top: 0; left: 0; right: 0; bottom: 0; inset: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.1) 100%); z-index: 0; pointer-events: none; } .bds-callout-media-banner--image-text-black::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 100%); } .bds-callout-media-banner--image-text-black .bds-callout-media-banner__text { color: #141414 !important; } html.dark .bds-callout-media-banner--default { background-color: #232325; } html.dark .bds-callout-media-banner--default .bds-callout-media-banner__text { color: #FFFFFF; } html.dark .bds-callout-media-banner--light-gray { background-color: #343437; } html.dark .bds-callout-media-banner--light-gray .bds-callout-media-banner__text { color: #FFFFFF; } html.dark .bds-callout-media-banner--lilac { background-color: #7649E3; } html.dark .bds-callout-media-banner--lilac .bds-callout-media-banner__text { color: #FFFFFF; } html.dark .bds-callout-media-banner--green { background-color: #21E46B; } html.dark .bds-callout-media-banner--green .bds-callout-media-banner__text { color: #141414; } html.dark .bds-callout-media-banner--gray { background-color: #454549; } html.dark .bds-callout-media-banner--gray .bds-callout-media-banner__text { color: #FFFFFF; } html.dark .bds-callout-media-banner--image .bds-callout-media-banner__text { color: #FFFFFF; } html.dark .bds-callout-media-banner--image-text-black .bds-callout-media-banner__text { color: #141414 !important; } html.light .bds-callout-media-banner--default { background-color: #FFFFFF; } html.light .bds-callout-media-banner--default .bds-callout-media-banner__text { color: #141414; } html.light .bds-callout-media-banner--light-gray { background-color: #E6EAF0; } html.light .bds-callout-media-banner--light-gray .bds-callout-media-banner__text { color: #141414; } html.light .bds-callout-media-banner--lilac { background-color: #C0A7FF; } html.light .bds-callout-media-banner--lilac .bds-callout-media-banner__text { color: #141414; } html.light .bds-callout-media-banner--green { background-color: #70EE97; } html.light .bds-callout-media-banner--green .bds-callout-media-banner__text { color: #141414; } html.light .bds-callout-media-banner--gray { background-color: #CAD4DF; } html.light .bds-callout-media-banner--gray .bds-callout-media-banner__text { color: #141414; } html.light .bds-callout-media-banner--image .bds-callout-media-banner__text { color: #FFFFFF; } html.light .bds-callout-media-banner--image-text-black .bds-callout-media-banner__text { color: #141414 !important; } .bds-logo-square-grid { gap: 24px; } @media (min-width: 576px) { .bds-logo-square-grid { gap: 32px; } } @media (min-width: 992px) { .bds-logo-square-grid { gap: 40px; } } .bds-logo-square-grid__header { margin-top: 24px; margin-bottom: 24px; gap: 24px; } @media (min-width: 576px) { .bds-logo-square-grid__header { gap: 32px; margin-top: 32px; margin-bottom: 32px; } } @media (min-width: 992px) { .bds-logo-square-grid__header { gap: 40px; margin-top: 40px; margin-bottom: 40px; } } .bds-logo-square-grid__text { gap: 8px; } @media (min-width: 992px) { .bds-logo-square-grid__text { gap: 16px; } } .bds-cards-featured { width: 100%; padding-top: 48px; padding-bottom: 48px; } @media (min-width: 576px) { .bds-cards-featured { padding-top: 64px; padding-bottom: 64px; } } @media (min-width: 992px) { .bds-cards-featured { padding-top: 80px; padding-bottom: 80px; } } .bds-cards-featured__header { display: flex; flex-direction: column; gap: 8px; } @media (min-width: 576px) { .bds-cards-featured__header { gap: 8px; } } @media (min-width: 992px) { .bds-cards-featured__header { gap: 16px; } } .bds-cards-featured__heading { margin: 0; } .bds-cards-featured__description { margin: 0; } .bds-cards-featured__cards { display: grid; grid-template-columns: 1fr; column-gap: 48px; row-gap: 48px; width: 100%; margin-top: 24px; } @media (min-width: 576px) { .bds-cards-featured__cards { grid-template-columns: repeat(2, 1fr); column-gap: 8px; row-gap: 52px; margin-top: 32px; } } @media (min-width: 992px) { .bds-cards-featured__cards { grid-template-columns: repeat(3, 1fr); column-gap: 8px; row-gap: 56px; margin-top: 40px; } } .bds-cards-featured__card-wrapper { display: flex; min-width: 0; width: 100%; } .bds-cards-featured__card-wrapper .bds-card-image { width: 100%; } html.light .bds-cards-featured { background-color: #FFFFFF; } html.light .bds-cards-featured__heading { color: #141414; } html.light .bds-cards-featured__description { color: #141414; } html.dark .bds-cards-featured__heading { color: #FFFFFF; } html.dark .bds-cards-featured__description { color: #FFFFFF; } .bds-callout-media-banner { box-sizing: border-box; min-height: 280px; } .bds-callout-media-banner { background-size: cover; background-position: center; background-repeat: no-repeat; padding: 16px; } @media (min-width: 576px) { .bds-callout-media-banner { padding: 24px; } } @media (min-width: 992px) { .bds-callout-media-banner { padding: 40px 32px; min-height: 360px; } } .bds-callout-media-banner__content { gap: 48px; } @media (min-width: 576px) { .bds-callout-media-banner__content { gap: 64px; } } @media (min-width: 1280px) { .bds-callout-media-banner__content { gap: 80px; } } .bds-callout-media-banner--centered .bds-callout-media-banner__content { justify-content: center; } .bds-callout-media-banner__text { flex-direction: column; color: var(--bds-cmb-text-color, #232021); gap: 16px; } @media (min-width: 576px) { .bds-callout-media-banner__text { gap: 24px; } } @media (min-width: 1280px) { .bds-callout-media-banner__text { gap: 32px; } } .bds-callout-media-banner__heading { font-family: "Tobias", "Noto Serif", monospace; font-weight: 300; font-size: 32px; line-height: 40px; letter-spacing: 0px; margin-bottom: 16px; } @media (min-width: 576px) { .bds-callout-media-banner__heading { font-size: 36px; line-height: 45px; letter-spacing: -0.5px; margin-bottom: 16px; } } @media (min-width: 992px) { .bds-callout-media-banner__heading { font-size: 40px; line-height: 46px; letter-spacing: -1px; margin-bottom: 16px; } } .bds-callout-media-banner__heading { margin: 0; color: inherit !important; } .bds-callout-media-banner__subheading { font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: -1px; margin-bottom: 16px; } @media (min-width: 576px) { .bds-callout-media-banner__subheading { font-size: 28px; line-height: 35px; letter-spacing: -0.75px; margin-bottom: 16px; } } @media (min-width: 992px) { .bds-callout-media-banner__subheading { font-size: 32px; line-height: 40px; letter-spacing: -0.5px; margin-bottom: 16px; } } .bds-callout-media-banner__subheading { margin: 0; color: inherit; } .bds-callout-media-banner--default { background-color: #FFFFFF; } .bds-callout-media-banner--light-gray { background-color: #E6EAF0; } .bds-callout-media-banner--lilac { background-color: #C0A7FF; } .bds-callout-media-banner--green { background-color: #70EE97; } .bds-callout-media-banner--gray { background-color: #CAD4DF; } .bds-callout-media-banner--image { background-color: transparent; } .bds-callout-media-banner--image::before { content: ""; top: 0; left: 0; right: 0; bottom: 0; inset: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.1) 100%); z-index: 0; pointer-events: none; } .bds-callout-media-banner--image-text-black::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 100%); } .bds-callout-media-banner--image-text-black .bds-callout-media-banner__text { color: #141414 !important; } html.dark .bds-callout-media-banner--default { background-color: #232325; } html.dark .bds-callout-media-banner--default .bds-callout-media-banner__text { color: #FFFFFF; } html.dark .bds-callout-media-banner--light-gray { background-color: #343437; } html.dark .bds-callout-media-banner--light-gray .bds-callout-media-banner__text { color: #FFFFFF; } html.dark .bds-callout-media-banner--lilac { background-color: #7649E3; } html.dark .bds-callout-media-banner--lilac .bds-callout-media-banner__text { color: #FFFFFF; } html.dark .bds-callout-media-banner--green { background-color: #21E46B; } html.dark .bds-callout-media-banner--green .bds-callout-media-banner__text { color: #141414; } html.dark .bds-callout-media-banner--gray { background-color: #454549; } html.dark .bds-callout-media-banner--gray .bds-callout-media-banner__text { color: #FFFFFF; } html.dark .bds-callout-media-banner--image .bds-callout-media-banner__text { color: #FFFFFF; } html.dark .bds-callout-media-banner--image-text-black .bds-callout-media-banner__text { color: #141414 !important; } html.light .bds-callout-media-banner--default { background-color: #FFFFFF; } html.light .bds-callout-media-banner--default .bds-callout-media-banner__text { color: #141414; } html.light .bds-callout-media-banner--light-gray { background-color: #E6EAF0; } html.light .bds-callout-media-banner--light-gray .bds-callout-media-banner__text { color: #141414; } html.light .bds-callout-media-banner--lilac { background-color: #C0A7FF; } html.light .bds-callout-media-banner--lilac .bds-callout-media-banner__text { color: #141414; } html.light .bds-callout-media-banner--green { background-color: #70EE97; } html.light .bds-callout-media-banner--green .bds-callout-media-banner__text { color: #141414; } html.light .bds-callout-media-banner--gray { background-color: #CAD4DF; } html.light .bds-callout-media-banner--gray .bds-callout-media-banner__text { color: #141414; } html.light .bds-callout-media-banner--image .bds-callout-media-banner__text { color: #FFFFFF; } html.light .bds-callout-media-banner--image-text-black .bds-callout-media-banner__text { color: #141414 !important; } .bds-feature-two-column__button-group .bds-btn--tertiary { padding-top: 0px !important; padding-bottom: 0px !important; } .bds-feature-two-column__cta-row .bds-btn--tertiary { padding-top: 16px !important; } .bds-feature-two-column { width: 100%; } @media (min-width: 992px) { .bds-feature-two-column { max-width: 1280px; margin: 0 auto; } } .bds-feature-two-column__desktop-layout { display: none; } @media (min-width: 992px) { .bds-feature-two-column__desktop-layout { display: flex; width: 100%; align-items: stretch; } } .bds-feature-two-column__mobile-layout { display: block; } @media (min-width: 992px) { .bds-feature-two-column__mobile-layout { display: none; } } .bds-feature-two-column__container { padding: 0 !important; } .bds-feature-two-column__row { gap: 0 !important; } .bds-feature-two-column__content-col { display: flex; flex-direction: column; padding: 64px 0; } @media (min-width: 576px) { .bds-feature-two-column__content-col { padding: 80px 0; } } @media (min-width: 992px) { .bds-feature-two-column__content-col { width: 50%; padding: 96px 0; aspect-ratio: 1/1; } } .bds-feature-two-column__content-grid { display: grid; width: 100%; height: 100%; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px; } @media (min-width: 576px) { .bds-feature-two-column__content-grid { grid-template-columns: repeat(8, 1fr); padding: 0 24px; } } @media (min-width: 992px) { .bds-feature-two-column__content-grid { grid-template-columns: repeat(6, 1fr); padding: 0 32px; } } .bds-feature-two-column__content-wrapper { grid-column: 1/-1; } @media (min-width: 576px) { .bds-feature-two-column__content-wrapper { grid-column: 2/span 6; } } @media (min-width: 992px) { .bds-feature-two-column__content-wrapper { grid-column: 2/span 4; } } .bds-feature-two-column__media-col { display: flex; flex-direction: column; } @media (min-width: 992px) { .bds-feature-two-column__media-col { width: 50%; aspect-ratio: 1/1; background-size: cover; background-position: center; background-repeat: no-repeat; } } .bds-feature-two-column__media-col--mobile { display: flex; flex-direction: column; } .bds-feature-two-column__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; height: 100%; gap: 24px; } @media (min-width: 576px) { .bds-feature-two-column__content { gap: 32px; } } @media (min-width: 992px) { .bds-feature-two-column__content { gap: 0; } } .bds-feature-two-column__content--multiple { gap: 0; justify-content: flex-start; } @media (min-width: 992px) { .bds-feature-two-column__content--multiple { gap: 0; justify-content: space-between; } } .bds-feature-two-column__content--multiple > .bds-btn--secondary { align-self: flex-start; } .bds-feature-two-column__button-group { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 24px; } @media (min-width: 576px) { .bds-feature-two-column__button-group { gap: 16px; margin-top: 32px; } } @media (min-width: 992px) { .bds-feature-two-column__button-group { gap: 16px; margin-top: 0; } } .bds-feature-two-column__button-group > .bds-btn--tertiary { padding-left: 0 !important; margin-left: 0; } .bds-feature-two-column__button-group > .bds-btn--tertiary:hover:not(:disabled):not(.bds-btn--disabled), .bds-feature-two-column__button-group > .bds-btn--tertiary:focus:not(:disabled):not(.bds-btn--disabled), .bds-feature-two-column__button-group > .bds-btn--tertiary:focus-visible:not(:disabled):not(.bds-btn--disabled), .bds-feature-two-column__button-group > .bds-btn--tertiary:active:not(:disabled):not(.bds-btn--disabled) { padding-left: 0 !important; } .bds-feature-two-column__text-group { display: flex; flex-direction: column; gap: 8px; } @media (min-width: 576px) { .bds-feature-two-column__text-group { gap: 8px; } } @media (min-width: 992px) { .bds-feature-two-column__text-group { gap: 16px; } } .bds-feature-two-column__title { font-family: "Tobias", "Noto Serif", monospace; font-weight: 300; font-size: 32px; line-height: 40px; letter-spacing: 0px; margin-bottom: 16px; } @media (min-width: 576px) { .bds-feature-two-column__title { font-size: 36px; line-height: 45px; letter-spacing: -0.5px; margin-bottom: 16px; } } @media (min-width: 992px) { .bds-feature-two-column__title { font-size: 40px; line-height: 46px; letter-spacing: -1px; margin-bottom: 16px; } } .bds-feature-two-column__title { color: #141414; margin: 0; } .bds-feature-two-column__description { font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 300; font-size: 16px; line-height: 23.2px; letter-spacing: 0px; margin-bottom: 16px; } @media (min-width: 576px) { .bds-feature-two-column__description { font-size: 16px; line-height: 23.2px; letter-spacing: 0px; margin-bottom: 16px; } } @media (min-width: 992px) { .bds-feature-two-column__description { font-size: 18px; line-height: 26.1px; letter-spacing: -0.5px; margin-bottom: 16px; } } .bds-feature-two-column__description { color: #141414; margin: 0; } .bds-feature-two-column__cta { display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 576px) { .bds-feature-two-column__cta { flex-direction: row; flex-wrap: wrap; } } .bds-feature-two-column__cta--single { flex-direction: column; } @media (min-width: 576px) { .bds-feature-two-column__cta--double { flex-direction: row; align-items: center; } } .bds-feature-two-column__cta-row { display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 576px) { .bds-feature-two-column__cta-row { flex-direction: row; align-items: center; } } @media (min-width: 992px) { .bds-feature-two-column__cta-row { flex-direction: row; align-items: center; } } .bds-feature-two-column__tertiary-group { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } .bds-feature-two-column__tertiary-group .bds-btn--tertiary { padding-left: 0 !important; margin-left: 0; } .bds-feature-two-column__tertiary-group .bds-btn--tertiary:hover:not(:disabled):not(.bds-btn--disabled), .bds-feature-two-column__tertiary-group .bds-btn--tertiary:focus:not(:disabled):not(.bds-btn--disabled), .bds-feature-two-column__tertiary-group .bds-btn--tertiary:focus-visible:not(:disabled):not(.bds-btn--disabled), .bds-feature-two-column__tertiary-group .bds-btn--tertiary:active:not(:disabled):not(.bds-btn--disabled) { padding-left: 0 !important; } .bds-feature-two-column__media { width: 100%; overflow: hidden; aspect-ratio: 1/1; } @media (min-width: 576px) { .bds-feature-two-column__media { aspect-ratio: 16/9; } } @media (min-width: 992px) { .bds-feature-two-column__media { aspect-ratio: 1/1; } } .bds-feature-two-column__media-img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .bds-feature-two-column--neutral { background-color: #F0F3F7; } .bds-feature-two-column--lilac { background-color: #D9CAFF; } .bds-feature-two-column--yellow { background-color: #F3F1EB; } .bds-feature-two-column--green { background-color: #21E46B; } html.dark .bds-feature-two-column__title { color: #141414; } html.dark .bds-feature-two-column__description { color: #141414; } html.dark .bds-feature-two-column--neutral { background-color: #E6EAF0; } html.dark .bds-feature-two-column--lilac { background-color: #D9CAFF; } html.dark .bds-feature-two-column--yellow { background-color: #F3F1EB; } html.dark .bds-feature-two-column--green { background-color: #21E46B; } .bds-feature-two-column--right .bds-feature-two-column__row { flex-direction: column-reverse !important; } @media (min-width: 992px) { .bds-feature-two-column--right .bds-feature-two-column__desktop-layout { flex-direction: row-reverse; } } @media (min-width: 992px) { .bds-feature-two-column--right .bds-feature-two-column__content-wrapper { grid-column: 2/span 4; } } .bds-standard-card-group-section { width: 100%; padding-top: 48px; padding-bottom: 48px; } @media (min-width: 576px) { .bds-standard-card-group-section { padding-top: 64px; padding-bottom: 64px; } } @media (min-width: 992px) { .bds-standard-card-group-section { padding-top: 80px; padding-bottom: 80px; } } html.light .bds-standard-card-group-section { background-color: #FFFFFF; } html.dark .bds-standard-card-group-section { background-color: #141414; } .bds-standard-card-group-section__header { display: flex; flex-direction: column; gap: 8px; } @media (min-width: 576px) { .bds-standard-card-group-section__header { gap: 8px; } } @media (min-width: 992px) { .bds-standard-card-group-section__header { gap: 16px; } } .bds-standard-card-group-section__headline { margin: 0; } .bds-standard-card-group-section__description { margin: 0; } .bds-standard-card-group-section__cards { margin-top: 24px; } @media (min-width: 576px) { .bds-standard-card-group-section__cards { margin-top: 32px; } } @media (min-width: 992px) { .bds-standard-card-group-section__cards { margin-top: 40px; } } pre { color: #FFFFFF; background-color: #232325; word-wrap: normal; padding: 2rem; border-radius: 4px; } pre code { white-space: pre; color: #FFFFFF; background-color: #232325; } .multicode { padding: 0; z-index: 1; position: relative; } .multicode pre { background: none; border: none; border-radius: 0; padding: 0; clear: both; } .multicode pre code { overflow: auto; max-height: 24em; border-radius: 0 4px 4px 4px; display: block; padding: 2rem; } .multicode pre code.expanded { overflow: visible; max-height: none; position: absolute; min-width: 100%; } .multicode ul { margin: 0 !important; padding: 0; } .multicode ul li { display: block; float: left; list-style-type: none; margin-right: 0px; margin-left: 0px; border: 0; clear: none; } .multicode a { text-decoration: none; color: #FFFFFF; background-color: transparent; padding: 0.75rem 2rem; margin: 0; border-radius: 4px 4px 0 0; } .multicode a.current { background-color: #232325; } .multicode a:hover { text-decoration: none; background-color: #232325; color: #7649E3; padding-bottom: 0.625rem; } .multicode .btn { z-index: 10; } .multicode .codetabs { position: relative; z-index: 10; } .clipboard-btn { z-index: 10; margin-right: 10px; } .codehilite { background: #232325; color: #FFFFFF; } .codehilite .c, .codehilite .ch, .codehilite .cm, .codehilite .cp, .codehilite .cpf, .codehilite .c1, .codehilite .cs { color: #72777E; } .codehilite .k, .codehilite .kc, .codehilite .kd, .codehilite .kn, .codehilite .kp, .codehilite .kr, .codehilite .kt { color: #FF6719; } .codehilite .m, .codehilite .mb, .codehilite .mh, .codehilite .mi, .codehilite .mo, .codehilite .il { color: #0A4DC0; } .codehilite .n, .codehilite .na, .codehilite .nb, .codehilite .nc, .codehilite .nd, .codehilite .ne, .codehilite .nf, .codehilite .ni, .codehilite .nl, .codehilite .nn, .codehilite .nt, .codehilite .nv, .codehilite .nx, .codehilite .bp, .codehilite .fm, .codehilite .py { color: #FFFFFF; } .codehilite .p { color: #E6EAF0; } .codehilite .s, .codehilite .s1, .codehilite .s2, .codehilite .sa, .codehilite .sb, .codehilite .sc, .codehilite .dl, .codehilite .sd, .codehilite .se, .codehilite .sh, .codehilite .si, .codehilite .sr, .codehilite .ss, .codehilite .sx { color: #70EE97; } .codehilite { background: transparent; position: relative; } .codehilite .btn-group { top: 1rem; right: 1rem; position: absolute; } .multicode .codehilite .btn-group { top: 70px; right: 20px; } #redocly_root .cm-foldPlaceholder { background-color: #232325; border: none; font-size: 18px; } #app_root article .code-walkthrough { margin-right: 112px; max-width: calc(100% - 112px); padding-right: 0; grid-template-columns: 5fr 5fr; } @media screen and (max-width: 990px) { #app_root article .code-walkthrough { margin-right: 96px; max-width: calc(100% - 96px); } } @media screen and (min-width: 1600px) { #app_root article .code-walkthrough [data-component-name="Markdoc/CodeWalkthrough/CodeFilters"] { margin-left: 96px; max-width: calc(100% - 96px); } #app_root article .code-walkthrough [class*=CodeWalkthrough__ContentWrapper] { margin-left: 96px; max-width: calc(100% - 200px); } } #app_root article .code-walkthrough .tag-size-large { margin: 0 var(--spacing-xs); } #app_root article .code-walkthrough .tag-size-large > div { padding: 2px 4px; } #app_root article .code-walkthrough [data-component-name="Markdoc/CodeWalkthrough/CodeFilters"] { padding: var(--spacing-xs) var(--spacing-lg); } #app_root article .code-walkthrough [data-component-name="Markdoc/CodeWalkthrough/CodeFilters"] > :first-child > :first-child { margin: auto; } #app_root article .code-walkthrough [data-component-name="Markdoc/CodeWalkthrough/CodePanel"] { top: var(--navbar-height); border: 0; } #app_root article .code-walkthrough [data-component-name="Markdoc/CodeWalkthrough/CodePanel"] [data-component-name="CodeBlock/CodeBlockContainer"] { border-top-left-radius: 0; border-top-right-radius: 0; } #app_root article .code-walkthrough > :first-child > div { border-radius: var(--border-radius-md); } #app_root article .code-walkthrough [data-component-name="Markdoc/CodeWalkthrough/CodeFilters"] { background-color: var(--code-panel-bg-color); } #app_root article .code-walkthrough [data-line-number]::before { padding-left: 0.8em; } article img { max-width: 100%; height: auto; } article svg { max-width: 100%; } article .floating-diagram { margin: 0.5rem; float: left; } article li { clear: left; } html:not(.light) article svg[fill=black] { fill: #FFFFFF; stroke: #FFFFFF; } html:not(.light) article svg[fill=black] *[fill=white] { fill: #141414; } html:not(.light) article svg[fill=black] *[stroke=white] { stroke: #141414; } html:not(.light) article svg[fill=black] *[fill=black] { fill: #FFFFFF; } html:not(.light) article svg[fill=black] *[stroke=black] { stroke: #FFFFFF; } html:not(.light) article svg[fill=black] g[fill=blue] { fill: #0A4DC0; } html:not(.light) article svg[fill=black] g[stroke=blue] { stroke: #0A4DC0; } html:not(.light) article svg[fill=black] g[fill="rgb(120,120,120)"] { fill: #E6EAF0; } html:not(.light) article svg[fill=black] g[stroke="rgb(120,120,120)"] { stroke: #E6EAF0; } html:not(.light) article svg[fill=black] g[fill="rgb(200,200,200)"] { fill: #343437; } html:not(.light) article svg[fill=black] g[fill="rgb(70,70,70)"] { fill: #72777E; } html:not(.light) article svg[fill=black] g[stroke="rgb(70,70,70)"] { stroke: #72777E; } html:not(.light) article svg[fill=black] g[fill="rgb(29,180,255)"] { fill: #7649E3; } html:not(.light) article svg[fill=black] g[stroke="rgb(29,180,255)"] { stroke: #7649E3; } html:not(.light) article svg[fill=black] rect[stroke="rgb(245,247,249)"] { stroke: #141414; } html:not(.light) article svg[fill=black] g[fill=lime], html:not(.light) article svg[fill=black] g[fill="rgb(0,255,0)"] { fill: #7649E3; } html:not(.light) article svg[fill=black] g[stroke=lime], html:not(.light) article svg[fill=black] g[stroke="rgb(0,255,0)"] { stroke: #7649E3; } html:not(.light) article svg[fill=black] g[fill=yellow], html:not(.light) article svg[fill=black] g[fill="rgb(255,255,0)"] { fill: #D4C02D; } html:not(.light) article svg[fill=black] g[fill=yellow] path[stroke=black], html:not(.light) article svg[fill=black] g[fill="rgb(255,255,0)"] path[stroke=black] { stroke: #141414; } html:not(.light) article svg[fill=black] g[fill=red], html:not(.light) article svg[fill=black] g[fill="rgb(255,255,0)"] { fill: #DC466F; } html:not(.light) article svg[fill=black] g[stroke=red], html:not(.light) article svg[fill=black] g[stroke="rgb(255,255,0)"] { stroke: #DC466F; } html:not(.light) article svg[fill=black] g[fill=yellow] + g text, html:not(.light) article svg[fill=black] g[fill="rgb(255,255,0)"] + g text { fill: #141414; } html:not(.light) article svg[fill=black] g[fill=lime] + g text { fill: #141414; } html:not(.light) article svg[fill=none] path[fill="#000000"] { fill: #FFFFFF; } html:not(.light) article svg[fill=none] path[stroke="#000000"] { stroke: #FFFFFF; } html:not(.light) article svg[fill=none] path[fill="#ffffff"] { fill: #141414; } html:not(.light) article svg[fill=none] path[stroke="#ffffff"] { stroke: #141414; } html:not(.light) article svg[fill=none] path[fill="#23292f"], html:not(.light) article svg[fill=none] path[fill="#23282f"] { fill: #FFFFFF; } html:not(.light) article svg[fill=none] path[stroke="#23292f"], html:not(.light) article svg[fill=none] path[stroke="#23282f"] { stroke: #FFFFFF; } html:not(.light) article svg[fill=none] path[fill="#2c3e50"], html:not(.light) article svg[fill=none] path[fill="#2b3e51"] { fill: #E6EAF0; } html:not(.light) article svg[fill=none] path[stroke="#2c3e50"], html:not(.light) article svg[fill=none] path[stroke="#2b3e51"] { stroke: #E6EAF0; } html:not(.light) article svg[fill=none] path[fill="#1c2835"] { fill: #F0F3F7; } html:not(.light) article svg[fill=none] path[stroke="#1c2835"] { stroke: #F0F3F7; } html:not(.light) article svg[fill=none] path[fill="#21aa47"] { fill: #078139; } html:not(.light) article svg[fill=none] path[stroke="#21aa47"] { stroke: #078139; } html:not(.light) article svg[fill=none] path[fill="#e64b3b"] { fill: #A22514; } html:not(.light) article svg[fill=none] path[stroke="#e64b3b"] { stroke: #A22514; } html:not(.light) article svg[fill=none] path[stroke="#27a2db"], html:not(.light) article svg[fill=none] path[stroke="#00aae4"] { stroke: #7649E3; } html:not(.light) article svg[fill=none] path[fill="#27a2db"], html:not(.light) article svg[fill=none] path[fill="#00aae4"] { fill: #7649E3; } html:not(.light) article svg[fill=none] path[fill="#e6e7e8"] { fill: #232325; } html:not(.light) article svg[fill=none] path[stroke="#e6e7e8"] { stroke: #232325; } html:not(.light) article svg[fill=none] path[stroke="#ffbf27"] { stroke: #D919FF; } html:not(.light) article svg[fill=none] path[fill="#00ff00"] { fill: #078139; } html:not(.light) article svg[fill=none] path[stroke="#00ff00"] { stroke: #078139; } html:not(.light) article svg[fill=none] path[fill="#ff00ff"] { fill: #DC466F; } html:not(.light) article svg[fill=none] path[stroke="#ff00ff"] { stroke: #DC466F; } html:not(.light) article svg[fill=none] linearGradient stop[stop-color="#ffffff"] { stop-color: #343437; } html:not(.light) article svg[fill=none] linearGradient stop[stop-color="#e6e7e8"] { stop-color: #232325; } html:not(.light) article svg[fill=none] linearGradient stop[stop-color="#dbdcdd"] { stop-color: #141414; } html:not(.light) article svg[fill=none] linearGradient stop[stop-color="#b1b3b5"] { stop-color: #111112; } html:not(.light) article svg[fill=none] linearGradient stop[stop-color="#29a1da"] { stop-color: #21E46B; } html:not(.light) article svg[fill=none] linearGradient stop[stop-color="#2789b9"] { stop-color: #70EE97; } html:not(.light) article svg[fill=none] linearGradient stop[stop-color="#6bc1ec"] { stop-color: #EAFCF1; } html:not(.light) article svg[fill=none] linearGradient stop[stop-color="#8ad6f4"] { stop-color: #21E46B; } html:not(.light) article svg[fill=none] linearGradient stop[stop-color="#fab913"] { stop-color: #F2B2FF; } html:not(.light) article svg[fill=none] linearGradient stop[stop-color="#fad26b"] { stop-color: #EA80FF; } html:not(.light) article svg[fill=none] linearGradient stop[stop-color="#f8a136"] { stop-color: #E24CFF; } html:not(.light) article svg[fill=none] linearGradient stop[stop-color="#f7931a"] { stop-color: #C000E5; } html.light svg[fill=black] g[fill=blue] { fill: #0179E7; } html.light svg[fill=black] g[stroke=blue] { stroke: #0A4DC0; } html.light svg[fill=black] g[fill="rgb(120,120,120)"] { fill: #343437; } html.light svg[fill=black] g[stroke="rgb(120,120,120)"] { stroke: #343437; } html.light svg[fill=black] g[fill="rgb(200,200,200)"] { fill: #8A919A; } html.light svg[fill=black] g[fill="rgb(70,70,70)"] { fill: #343437; } html.light svg[fill=black] g[stroke="rgb(70,70,70)"] { stroke: #343437; } html.light svg[fill=black] g[fill="rgb(29,180,255)"] { fill: #0A4DC0; } html.light svg[fill=black] g[stroke="rgb(29,180,255)"] { stroke: #0179E7; } html.light svg[fill=black] rect[stroke="rgb(245,247,249)"] { stroke: #FCFCFD; } html.light svg[fill=black] g[fill=lime], html.light svg[fill=black] g[fill="rgb(0,255,0)"] { fill: #0DAA3E; } html.light svg[fill=black] g[stroke=lime], html.light svg[fill=black] g[stroke="rgb(0,255,0)"] { stroke: #0DAA3E; } html.light svg[fill=black] g[fill=yellow], html.light svg[fill=black] g[fill="rgb(255,255,0)"] { fill: #DBF15E; } html.light svg[fill=black] g[fill=red], html.light svg[fill=black] g[fill="rgb(255,255,0)"] { fill: #FF577F; } html.light svg[fill=black] g[stroke=red], html.light svg[fill=black] g[stroke="rgb(255,255,0)"] { stroke: #DC466F; } html.light svg[fill=none] rect[fill="#111112"] { fill: #F0F3F7; } html.light svg[fill=none] path[fill=white] { fill: #141414; } html.light svg[fill=none] path[fill="#343437"] { fill: #CAD4DF; } html.light svg[fill=none] path[fill="#A2A2A4"], html.light svg[fill=none] rect[fill="#A2A2A4"], html.light svg[fill=none] ellipse[fill="#A2A2A4"] { fill: #454549; } html.light svg[fill=none] path[fill="#232325"] { fill: #E6EAF0; } html.light svg[fill=none] path[fill="#F5F5F7"] { fill: #111112; } html.light svg[fill=none] path[stroke="#F5F5F7"] { stroke: #111112; } html.light svg[fill=none] path[stroke="#FF198B"] { stroke: #FF577F; } html.light svg[fill=none] linearGradient stop[stop-color="#F5F5F7"] { stop-color: #111112; } html.light svg[fill=none] linearGradient stop[stop-color="#C1C1C2"] { stop-color: #343437; } .external-link::after { content: " "; background-image: url(../img/icons/arrow-up-right.svg); background-repeat: no-repeat; display: inline-block; background-size: 16px; padding: 0 4px 0 8px; width: 16px; height: 16px; background-position: center; transition: transform 100ms ease-in-out; } .external-link:hover::after { transform: translate(3px, -3px); } .external-link .fa-external-link { display: none; } .top-nav .dropdown .external-link::after, .xrpl-footer .external-link::after { background-position: left 6px bottom 1px; width: 2rem; } @-moz-document url-prefix() { @supports (animation: calc(0s)) { .top-nav .dropdown .external-link::after, .xrpl-footer .external-link::after { background-position: left 8px bottom 2px; } } } .top-nav .dropdown .external-link:hover::after, .xrpl-footer .external-link:hover::after { background-position: left 8px bottom 3px; } .q-wrapper .external-link::after { background-position: left 0 bottom 7px; } .q-wrapper .external-link:hover::after { background-position: left 4px bottom 11px; } .li-links { position: relative; border-bottom: 2px solid #454549; } .li-links a { width: 100%; padding: 16px 0; } .li-links a::after { position: absolute; right: 4px; content: " "; background-image: url(../img/icons/arrow-up-right.svg); background-repeat: no-repeat; display: inline-block; background-size: 1.5rem; padding: 0 0.5rem; background-position: left 0 bottom -0.1rem; transition: background-position 100ms ease-in-out; } .li-links a:hover::after { background-position: left 0.2rem bottom 0.1rem; } /* Footer ------------------------------------------------------------------- */ [data-component-name="Footer/Footer"] [data-component-name="Footer/FooterColumn"] { text-shadow: #111112 0px 0px 2px, #111112 1px 1px 2px, #111112 2px 2px 3px, #111112 2px 2px 4px, #111112 2px 2px 5px, #111112 2px 2px 6px, #111112 -1px -1px 2px, #111112 -2px -2px 3px, #111112 -2px -2px 4px; } [data-component-name="Footer/Footer"] { padding: 7.5rem 2rem; } @media (max-width: 575.98px) { [data-component-name="Footer/Footer"] .col-lg:not(:first-child) { margin-top: 4rem; } } [data-component-name="Footer/Footer"] h5, [data-component-name="Footer/Footer"] .h5 { font-size: 1rem; font-weight: 600; color: #8A919A; } [data-component-name="Footer/Footer"] .nav-link { padding: 0.75rem 0; line-height: 1; } [data-component-name="Footer/Footer"] .absolute-bottom-footer { font-size: 10px; line-height: 1rem; } @media (max-width: 575.98px) { [data-component-name="Footer/Footer"] .absolute-bottom-footer .copyright-license { margin-top: 3rem; } } /* Callouts ----------------------------------------------------------------- */ .devportal-callout.tip, .devportal-callout.ヒント { border-color: #078139; } .devportal-callout.tip > strong:first-child:before, .devportal-callout.ヒント > strong:first-child:before { color: #078139; } .devportal-callout.note > strong:first-child:before, .devportal-callout.注記 > strong:first-child:before { color: #0A4DC0; } .devportal-callout.note, .devportal-callout.注記 { border-color: #0A4DC0; } .devportal-callout.caution, .devportal-callout.注意 { border-color: #D4C02D; /* not a typo */ } .devportal-callout.caution > strong:first-child:before, .devportal-callout.注意 > strong:first-child:before { color: #D4C02D; /* not a typo */ } .devportal-callout.warning, .devportal-callout.警告 { border-color: #DC466F; } .devportal-callout.warning > strong:first-child:before, .devportal-callout.警告 > strong:first-child:before { color: #DC466F; } blockquote, .devportal-callout { border-style: solid; border-radius: 0; border-width: 1px; border-left-width: 4px; padding: 5px; padding-left: 25px; page-break-inside: avoid; } .devportal-callout > strong:first-child { display: block; page-break-after: avoid; } .devportal-callout.tip > strong:first-child:before { content: "\f058"; /* fontawesome check-circle icon */ font-family: FontAwesome; /* color in scss */ margin-left: -20px; padding-right: 5px; } .devportal-callout.note > strong:first-child:before { content: "\f05a"; /* fontawesome (i) info-circle icon */ font-family: FontAwesome; /* color in scss */ margin-left: -20px; padding-right: 5px; } .devportal-callout.caution > strong:first-child:before { content: "\f071"; /* fontawesome /!\ exclamation-triangle icon */ font-family: FontAwesome; /* color in scss */ margin-left: -20px; padding-right: 5px; } .devportal-callout.warning > strong:first-child:before { content: "\f057"; /* fontawesome (x) times-circle icon */ font-family: FontAwesome; /* color in scss */ margin-left: -20px; padding-right: 5px; } .card, .cta-card, .q-wrapper { position: relative; } @media (min-width: 992px) { .card, .cta-card, .q-wrapper { box-shadow: 0px 5px 40px #141414; } } #code-samples-deck .card { box-shadow: none; margin: 0 2rem 5rem 2rem; } #code-samples-deck .card-header { border-bottom: none; background-color: unset; } #code-samples-deck .card-footer { background-color: unset; font-size: initial; } #code-samples-deck .card-deck .card a { margin: 0 2.5rem 5rem 2.5rem; } #code-samples-deck .circled-logo { margin-left: -15px; } @media (min-width: 992px) { .code-contribute { width: 75vw; position: relative; left: 20%; right: 20%; margin-left: -30vw; margin-right: -30vw; } } .contribute::before { content: ""; display: block; height: 2px; width: 100%; position: absolute; top: 0; } .contribute .dot { height: 16px; width: 16px; background-color: #111112; border-radius: 50%; border: 3px solid #FBFF4C; display: inline-block; position: absolute; top: -7px; left: -6px; } @media (max-width: 575.98px) { .contribute::before { left: 0; height: 100%; width: 2px; top: 15px; } .contribute .dot { top: 5px; left: -6px; } } .contribute_1::before { background: -webkit-linear-gradient(left, rgb(254, 255, 1), rgb(255, 45, 154)); } .contribute_1 .dot { border-color: #FBFF4C; } .contribute_2::before { background: -webkit-linear-gradient(left, rgb(255, 45, 154), rgb(226, 76, 255)); } .contribute_2 .dot { border-color: #FF198B; } .contribute_3::before { background: -webkit-linear-gradient(left, rgb(226, 76, 255), rgb(154, 82, 255)); } .contribute_3 .dot { border-color: #C000E5; } .contribute_4::before { background: -webkit-linear-gradient(left, rgb(154, 82, 255), rgb(154, 82, 255)); } .contribute_4 .dot { border-color: #9A52FF; } .card > img { border-radius: 8px 8px 0 0; } .card-body > p, .card-body > p:not(:last-child) { padding: 0; margin-bottom: 2rem; } /* Full-link cards */ main a.card { border: 0; color: #FFFFFF; } a.card:hover, a:hover .card-new, [data-component-name="Markdown/Markdown"] a.card { text-decoration: none !important; } a.card:hover h3, a.card:hover .h3 { text-decoration: underline; } .circled-logo { background-color: #454549; border-radius: 50%; padding: 0.65rem; width: 50px; height: 50px; } .circled-logo img { width: 26px; height: 26px; display: inline-block; } .circled-logo { margin-bottom: 0.75rem; border: 2px solid #232325; } .light .circled-logo { border: none; } .cols-of-1 { grid-template-rows: repeat(1, min-content); } .cols-of-2 { grid-template-rows: repeat(2, min-content); } .cols-of-3 { grid-template-rows: repeat(3, min-content); } .cols-of-4 { grid-template-rows: repeat(4, min-content); } .cols-of-5 { grid-template-rows: repeat(5, min-content); } .cols-of-6 { grid-template-rows: repeat(6, min-content); } .cols-of-7 { grid-template-rows: repeat(7, min-content); } .cols-of-8 { grid-template-rows: repeat(8, min-content); } .cols-of-9 { grid-template-rows: repeat(9, min-content); } .cols-of-10 { grid-template-rows: repeat(10, min-content); } .card-deck { margin-top: 2.5rem; margin-left: -1.25rem; margin-right: -1.25rem; margin-bottom: 5rem; flex-grow: 1; } @media (min-width: 992px) { .card-deck { margin-top: 5rem; } } .card-deck .card { flex-grow: 0; flex-basis: 100%; padding: 0; margin: 0 1.25rem 5rem 1.25rem; background-position: bottom; background-repeat: no-repeat; background-size: contain; } .card-deck.row-cols-1 .card { flex-basis: 100%; min-height: 264px; } @media (min-width: 576px) { .card-deck.row-cols-1 .card { min-height: 347px; } } @media (min-width: 1280px) { .card-deck.row-cols-lg-3 { margin-left: -2.5rem; margin-right: -2.5rem; } } @media (min-width: 992px) { .card-deck.row-cols-lg-3 .card { flex-basis: calc(33% - 2.5rem); } } @media (min-width: 1280px) { .card-deck.row-cols-lg-3 .card { margin: 0 2.5rem 5rem 2.5rem; flex-basis: calc(33% - 5rem); } } @media (min-width: 992px) { .card-deck.row-cols-lg-4 .card { flex-basis: calc(25% - 2.5rem); } } .card-deck a.card { transition: all 0.35s ease-out; cursor: pointer; } .card-deck a.card:hover { -webkit-transform: translateY(-16px); -moz-transform: translateY(-16px); -ms-transform: translateY(-16px); -o-transform: translateY(-16px); transform: translateY(-16px); } .card-deck .card-footer { font-size: 0; padding: 1rem; background-position: bottom; background-repeat: no-repeat; background-size: cover; border-top: 0; } @media (max-width: 575.98px) { .card-deck { margin-top: 2rem; } .card-deck .card-body { padding: 1rem; } .card-deck.row-cols-1 .card { margin: 0.75rem 0.75rem 5rem 0.75rem; max-width: calc(100% - 1.5rem); } .card-deck.row-cols-2 .card { margin: 0.75rem; max-width: calc(50% - 1.5rem); } } main article .card-grid.card-grid-3xN { grid-gap: 1rem; } main article .card-grid.card-grid-3xN .card { padding: 0; margin: 0.5rem; } main article .card-grid.card-grid-3xN .card .card-body { padding: 1rem; } main article .card-grid.card-grid-3xN .card .card-icon-container { width: 50px; height: 50px; background: #454549; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-bottom: 12px; } main article .card-grid.card-grid-3xN .card .card-icon-container img { width: 70%; height: 70%; } main article .card-grid.card-grid-3xN .card .card-footer { font-size: 0; line-height: 0; padding: 1rem; background-position: bottom; background-repeat: no-repeat; background-size: cover; border-top: 0; } main article .card-grid.card-grid-3xN:nth-of-type(0) .card:nth-child(1) .card-footer { background-image: url("../img/cards/3-col-light-blue.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(0) .card:nth-child(2) .card-footer { background-image: url("../img/cards/3-col-green-purple.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(0) .card:nth-child(3) .card-footer { background-image: url("../img/cards/3col-purple-blue-green.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(0) .card:nth-child(4) .card-footer { background-image: url("../img/cards/3col-magenta-3.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(0) .card:nth-child(5) .card-footer { background-image: url("../img/cards/3col-green-blue.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(0) .card:nth-child(6) .card-footer { background-image: url("../img/cards/3col-light-blue-2.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(0) .card:nth-child(7) .card-footer { background-image: url("../img/cards/3col-orange-yellow-2.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(0) .card:nth-child(8) .card-footer { background-image: url("../img/cards/3col-pink-purple.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(0) .card:nth-child(9) .card-footer { background-image: url("../img/cards/3col-green-purple.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(1) .card:nth-child(1) .card-footer { background-image: url("../img/cards/3col-magenta.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(1) .card:nth-child(2) .card-footer { background-image: url("../img/cards/3-col-purple2.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(1) .card:nth-child(3) .card-footer { background-image: url("../img/cards/3col-neutral-blue.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(1) .card:nth-child(4) .card-footer { background-image: url("../img/cards/3col-purple-blue.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(1) .card:nth-child(5) .card-footer { background-image: url("../img/cards/3-col-pink2.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(1) .card:nth-child(6) .card-footer { background-image: url("../img/cards/3col-orange.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(1) .card:nth-child(7) .card-footer { background-image: url("../img/cards/3col-light-green.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(1) .card:nth-child(8) .card-footer { background-image: url("../img/cards/3col-blue-light-blue.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(1) .card:nth-child(9) .card-footer { background-image: url("../img/cards/3col-green.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(2) .card:nth-child(1) .card-footer { background-image: url("../img/cards/3-col-dark-blue.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(2) .card:nth-child(2) .card-footer { background-image: url("../img/cards/3-col-purple.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(2) .card:nth-child(3) .card-footer { background-image: url("../img/cards/3col-magenta-2.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(2) .card:nth-child(4) .card-footer { background-image: url("../img/cards/3-col-light-blue-2.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(2) .card:nth-child(5) .card-footer { background-image: url("../img/cards/3col-light-blue.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(2) .card:nth-child(6) .card-footer { background-image: url("../img/cards/3col-magenta-orange.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(2) .card:nth-child(7) .card-footer { background-image: url("../img/cards/3-col-purple-blue.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(2) .card:nth-child(8) .card-footer { background-image: url("../img/cards/3col-orange-3.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(2) .card:nth-child(9) .card-footer { background-image: url("../img/cards/3col-blue-green.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(3) .card:nth-child(1) .card-footer { background-image: url("../img/cards/3-col-green.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(3) .card:nth-child(2) .card-footer { background-image: url("../img/cards/3-col-orange.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(3) .card:nth-child(3) .card-footer { background-image: url("../img/cards/3col-purple-blue-2.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(3) .card:nth-child(4) .card-footer { background-image: url("../img/cards/3col-purple.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(3) .card:nth-child(5) .card-footer { background-image: url("../img/cards/3-col-light-blue2.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(3) .card:nth-child(6) .card-footer { background-image: url("../img/cards/3col-orange-yellow.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(3) .card:nth-child(7) .card-footer { background-image: url("../img/cards/3-col-pink.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(3) .card:nth-child(8) .card-footer { background-image: url("../img/cards/3col-green-2.svg"); } main article .card-grid.card-grid-3xN:nth-of-type(3) .card:nth-child(9) .card-footer { background-image: url("../img/cards/3col-orange-2.svg"); } .cta-card { text-align: center; background-color: #232325; } .card-subhead { font-size: 1rem; margin-bottom: 0.25rem; margin-top: 0.5rem; } /* Breadcrumbs -------------------------------------------------------------- */ .breadcrumbs-wrap { position: relative; z-index: 11; padding: 0 0 2rem 0; } .interactive-block .breadcrumbs-wrap { padding: 0; } .breadcrumb-item + .breadcrumb-item:before { content: "\f105"; /* fontawesome angle-right */ font-family: FontAwesome; padding-right: 5px; } .breadcrumbs-wrap .breadcrumb { padding: 0; margin-bottom: 0; font-size: 0.833em; } .breadcrumb-item a { color: #E6EAF0; text-decoration: none; } .breadcrumb-item a:hover { color: #7649E3; } /* Landing Pages ------------------------------------------------------------ */ .landing .container-fluid.section-hero, .landing .section-hero.container-sm, .landing .section-hero.container-md, .landing .section-hero.container-lg, .landing .section-hero.container-xl, .landing .section-hero.container-xxl { padding: 48px 0; } .landing article .children-display > ul > li, .landing article .curated-links > ul > li { margin-top: 24px; } .landing article .children-display li a, .landing article .curated-links li a { /* Category landing pages */ font-weight: 700; font-size: 1.25rem; text-decoration: none; } .landing article .children-display li a:hover, .landing article .curated-links li a:hover { text-decoration: underline; } .landing .level-1, .landing .level-2 { margin-top: 0; } .landing .curated-links ul, .landing .curated-links ol, .landing .children-display ul { padding-left: 0; margin-bottom: 0; } .landing .section-hero .blurb { font-size: 1.2em; line-height: 1.71em; } .landing .doc-index .level-1 { list-style-type: disc; margin-left: 1rem; } .landing .doc-index .level-2 { list-style-type: circle; margin-left: 2rem; } .landing .doc-index .level-3 { list-style-type: square; margin-left: 3rem; } .landing .doc-index .level-4 { list-style-type: disc; margin-left: 4rem; } .landing .doc-index .level-5 { margin-left: 5rem; list-style-type: circle; } .landing .doc-index .level-6 { margin-left: 6rem; list-style-type: square; } .landing p a:not(.bds-link), .landing h5 a:not(.bds-link), .landing .h5 a:not(.bds-link) { color: #7649E3; font-weight: 600; } .landing p a:not(.bds-link):hover, .landing h5 a:not(.bds-link):hover, .landing .h5 a:not(.bds-link):hover { text-decoration: underline; } .landing { /* Misc. ------------------------------------------------------------------ */ } .landing .display-4 { margin-bottom: 1.5rem; } .landing #test-net-servers h3, .landing #test-net-servers .h3 { font-size: 1.4rem; font-weight: 700; } .landing #test-net-servers pre { overflow-x: auto; } .landing section:first-of-type { border-top-width: 0; } .landing #main_content_wrapper { border-bottom: none; margin-top: 80px; } .landing .marketing-wrapper { margin-top: 10rem; margin-bottom: 6rem; } @media (max-width: 575.98px) { .landing .marketing-wrapper { margin-top: 6rem; } } .landing .nav .nav-link { padding: 1rem 2rem 1rem 0; color: #E6EAF0; border-bottom: 1px solid #232325; position: relative; } .landing .nav .nav-link:hover { color: #7649E3; } .landing .nav .nav-link:not(.external-link)::after { content: " "; background-image: url(../img/icons/arrow-right-purple.svg); background-repeat: no-repeat; background-position: center; background-size: 1rem; position: absolute; right: 0; width: 1.5rem; height: 1.5rem; transition: all 0.2s ease; } .landing .nav .nav-link:not(.external-link):hover::after { animation: arrowDance2 1.2s infinite; } .landing .nav .nav-link.external-link::after { content: " "; background-image: url(../img/icons/arrow-up-right.svg); background-repeat: no-repeat; position: absolute; background-position: center; background-size: 0.75rem; right: 7px; width: 1.5rem; height: 1.5rem; transition: all 0.2s ease; } .landing .nav .nav-link.external-link:hover::after { animation: arrowDanceDiag 1.2s infinite; } .landing .card-body .nav .nav-link { border-bottom: 1px solid #454549; } .alert-info { color: white; background-color: #0179E7; border-width: 0; } .alert-info a { text-decoration: underline; color: white; } .alert-info a:hover { color: #E6EAF0; } .highlight-subcard { margin: 1.5rem 0; padding: 1rem; border: 2px solid #FFFFFF; background: #111112; } /* Interactive blocks in tutorial contents ---------------------------------- */ /* I don't get it, but apparently setting padding or border on .interactive-block breaks the fixed-header anchor fix. So the visual styles go on this inner div. */ .interactive-block-inner { border: 1px dashed #7649E3; padding: 10px; margin: 5px; } .interactive-block-ui > button { margin: 10px 0; } .interactive-block input:invalid { box-shadow: inset 0 0 5px 5px #DC466F; } .interactive-block .breadcrumbs-wrap { margin-bottom: 11px; } .interactive-block .breadcrumb-item { margin-top: 6px; } .interactive-block .breadcrumb-item a { text-decoration: none; } .interactive-block .breadcrumb-item.current a { font-weight: bold; } .interactive-block .breadcrumb-item.active a { color: #C0A7FF; } .interactive-block .breadcrumb-item.disabled a { color: #454549; } .interactive-block .breadcrumb-item.done a:after { content: "\f058"; /* fontawesome check-circle icon */ font-family: FontAwesome; color: #E6EAF0; padding-right: 5px; padding-left: 5px; } .interactive-block .waiting-for-tx { word-break: break-word; } .ws-console { height: 200px; overflow: auto; } /* Status labels ("DEV" etc) for non-enabled features ----------------------- */ .status { cursor: help; padding: 1px 2px; font-weight: normal; text-indent: 0; } .status.not_enabled { /* flask icon for "not yet enabled" features */ color: #D4C02D; } .status.removed { /* trash icon for removed features */ color: #DC466F; } /* "Topic by Label" browsing ------------------------------------------------ */ .labels-wrap ul::before { content: "\f02c"; font-family: FontAwesome; font-size: 1.5rem; } .labels-wrap .list-inline-item { margin-top: 0.5rem; } .pg-category { color: #8A919A; } .pg-category::after { content: "\f105"; /* fontawesome angle-right */ font-family: FontAwesome; padding-left: 5px; } .label { border-radius: 100px; border-width: 0; padding: 0.5rem 1rem; font-weight: bold; text-decoration: none !important; text-align: center; white-space: nowrap; } .label .badge-pill { width: 24px; height: 24px; border-radius: 50px; margin-left: 0.5rem; font-weight: 400; line-height: 23px; font-size: 16px; padding: 0; margin-top: -2px; } .label { background-color: #111112; color: #CAD4DF; } html.light .label { background-color: #E6EAF0; color: #232325; } html.light .label .badge-pill { color: #E6EAF0; background-color: #232325; } html.light .label:hover { background-color: #CAD4DF; color: #111112; } html.light .label:hover .badge-pill { color: #CAD4DF; background-color: #111112; } .label .badge-pill { color: #111112; background-color: #CAD4DF; } .label:hover { color: #E6EAF0; background-color: #232325; } .label:hover .badge-pill { color: #232325; background-color: #E6EAF0; } .label.label-accounts, .label.label-payment-channels, .label.label-amm, .label.label-アカウント, .label.label-payment-channel, .label.label-use-infrastructure, .label.label-use-security, .label.blog-category-development, .label.chip-indigo { background-color: #5429A1; color: #C0A7FF; } .label.label-accounts .badge-pill, .label.label-payment-channels .badge-pill, .label.label-amm .badge-pill, .label.label-アカウント .badge-pill, .label.label-payment-channel .badge-pill, .label.label-use-infrastructure .badge-pill, .label.label-use-security .badge-pill, .label.blog-category-development .badge-pill, .label.chip-indigo .badge-pill { color: #5429A1; background-color: #C0A7FF; } .label.label-accounts:hover, .label.label-payment-channels:hover, .label.label-amm:hover, .label.label-アカウント:hover, .label.label-payment-channel:hover, .label.label-use-infrastructure:hover, .label.label-use-security:hover, .label.blog-category-development:hover, .label.chip-indigo:hover { background-color: #7649E3; color: #D9CAFF; } .label.label-accounts:hover .badge-pill, .label.label-payment-channels:hover .badge-pill, .label.label-amm:hover .badge-pill, .label.label-アカウント:hover .badge-pill, .label.label-payment-channel:hover .badge-pill, .label.label-use-infrastructure:hover .badge-pill, .label.label-use-security:hover .badge-pill, .label.blog-category-development:hover .badge-pill, .label.chip-indigo:hover .badge-pill { color: #7649E3; background-color: #D9CAFF; } html.light .label.label-accounts, html.light .label.label-payment-channels, html.light .label.label-amm, html.light .label.label-アカウント, html.light .label.label-payment-channel, html.light .label.label-use-infrastructure, html.light .label.label-use-security, html.light .label.blog-category-development, html.light .label.chip-indigo { background-color: #D9CAFF; color: #7649E3; } html.light .label.label-accounts .badge-pill, html.light .label.label-payment-channels .badge-pill, html.light .label.label-amm .badge-pill, html.light .label.label-アカウント .badge-pill, html.light .label.label-payment-channel .badge-pill, html.light .label.label-use-infrastructure .badge-pill, html.light .label.label-use-security .badge-pill, html.light .label.blog-category-development .badge-pill, html.light .label.chip-indigo .badge-pill { color: #D9CAFF; background-color: #7649E3; } html.light .label.label-accounts:hover, html.light .label.label-payment-channels:hover, html.light .label.label-amm:hover, html.light .label.label-アカウント:hover, html.light .label.label-payment-channel:hover, html.light .label.label-use-infrastructure:hover, html.light .label.label-use-security:hover, html.light .label.blog-category-development:hover, html.light .label.chip-indigo:hover { background-color: #C0A7FF; color: #5429A1; } html.light .label.label-accounts:hover .badge-pill, html.light .label.label-payment-channels:hover .badge-pill, html.light .label.label-amm:hover .badge-pill, html.light .label.label-アカウント:hover .badge-pill, html.light .label.label-payment-channel:hover .badge-pill, html.light .label.label-use-infrastructure:hover .badge-pill, html.light .label.label-use-security:hover .badge-pill, html.light .label.blog-category-development:hover .badge-pill, html.light .label.chip-indigo:hover .badge-pill { color: #C0A7FF; background-color: #5429A1; } .label.label-blockchain, .label.label-xrp, .label.label-ブロックチェーン, .label.label-non-fungible-tokens-nfts, .label.label-use-nfts, .label.blog-category-release_notes, .label.blog-category-features, .label.chip-green { background-color: #078139; color: #70EE97; } .label.label-blockchain .badge-pill, .label.label-xrp .badge-pill, .label.label-ブロックチェーン .badge-pill, .label.label-non-fungible-tokens-nfts .badge-pill, .label.label-use-nfts .badge-pill, .label.blog-category-release_notes .badge-pill, .label.blog-category-features .badge-pill, .label.chip-green .badge-pill { background-color: #70EE97; color: #078139; } .label.label-blockchain:hover, .label.label-xrp:hover, .label.label-ブロックチェーン:hover, .label.label-non-fungible-tokens-nfts:hover, .label.label-use-nfts:hover, .label.blog-category-release_notes:hover, .label.blog-category-features:hover, .label.chip-green:hover { background-color: #0DAA3E; color: #EAFCF1; } .label.label-blockchain:hover .badge-pill, .label.label-xrp:hover .badge-pill, .label.label-ブロックチェーン:hover .badge-pill, .label.label-non-fungible-tokens-nfts:hover .badge-pill, .label.label-use-nfts:hover .badge-pill, .label.blog-category-release_notes:hover .badge-pill, .label.blog-category-features:hover .badge-pill, .label.chip-green:hover .badge-pill { background-color: #EAFCF1; color: #0DAA3E; } html.light .label.label-blockchain, html.light .label.label-xrp, html.light .label.label-ブロックチェーン, html.light .label.label-non-fungible-tokens-nfts, html.light .label.label-use-nfts, html.light .label.blog-category-release_notes, html.light .label.blog-category-features, html.light .label.chip-green { background-color: #EAFCF1; color: #078139; } html.light .label.label-blockchain .badge-pill, html.light .label.label-xrp .badge-pill, html.light .label.label-ブロックチェーン .badge-pill, html.light .label.label-non-fungible-tokens-nfts .badge-pill, html.light .label.label-use-nfts .badge-pill, html.light .label.blog-category-release_notes .badge-pill, html.light .label.blog-category-features .badge-pill, html.light .label.chip-green .badge-pill { color: #EAFCF1; background-color: #078139; } html.light .label.label-blockchain:hover, html.light .label.label-xrp:hover, html.light .label.label-ブロックチェーン:hover, html.light .label.label-non-fungible-tokens-nfts:hover, html.light .label.label-use-nfts:hover, html.light .label.blog-category-release_notes:hover, html.light .label.blog-category-features:hover, html.light .label.chip-green:hover { background-color: #70EE97; color: #141414; } html.light .label.label-blockchain:hover .badge-pill, html.light .label.label-xrp:hover .badge-pill, html.light .label.label-ブロックチェーン:hover .badge-pill, html.light .label.label-non-fungible-tokens-nfts:hover .badge-pill, html.light .label.label-use-nfts:hover .badge-pill, html.light .label.blog-category-release_notes:hover .badge-pill, html.light .label.blog-category-features:hover .badge-pill, html.light .label.chip-green:hover .badge-pill { color: #70EE97; background-color: #141414; } .label.label-checks, .label.label-core-server, .label.label-コアサーバ, .label.label-use-interoperability, .label.label-use-web_monetization, .label.blog-category-gateway_bulletins, .label.chip-purple { background-color: #40004C; color: #EA80FF; } .label.label-checks .badge-pill, .label.label-core-server .badge-pill, .label.label-コアサーバ .badge-pill, .label.label-use-interoperability .badge-pill, .label.label-use-web_monetization .badge-pill, .label.blog-category-gateway_bulletins .badge-pill, .label.chip-purple .badge-pill { background-color: #EA80FF; color: #40004C; } .label.label-checks:hover, .label.label-core-server:hover, .label.label-コアサーバ:hover, .label.label-use-interoperability:hover, .label.label-use-web_monetization:hover, .label.blog-category-gateway_bulletins:hover, .label.chip-purple:hover { background-color: #6B0080; color: #F2B2FF; } .label.label-checks:hover .badge-pill, .label.label-core-server:hover .badge-pill, .label.label-コアサーバ:hover .badge-pill, .label.label-use-interoperability:hover .badge-pill, .label.label-use-web_monetization:hover .badge-pill, .label.blog-category-gateway_bulletins:hover .badge-pill, .label.chip-purple:hover .badge-pill { background-color: #F2B2FF; color: #6B0080; } html.light .label.label-checks, html.light .label.label-core-server, html.light .label.label-コアサーバ, html.light .label.label-use-interoperability, html.light .label.label-use-web_monetization, html.light .label.blog-category-gateway_bulletins, html.light .label.chip-purple { background-color: #F2B2FF; color: #6B0080; } html.light .label.label-checks .badge-pill, html.light .label.label-core-server .badge-pill, html.light .label.label-コアサーバ .badge-pill, html.light .label.label-use-interoperability .badge-pill, html.light .label.label-use-web_monetization .badge-pill, html.light .label.blog-category-gateway_bulletins .badge-pill, html.light .label.chip-purple .badge-pill { color: #F2B2FF; background-color: #6B0080; } html.light .label.label-checks:hover, html.light .label.label-core-server:hover, html.light .label.label-コアサーバ:hover, html.light .label.label-use-interoperability:hover, html.light .label.label-use-web_monetization:hover, html.light .label.blog-category-gateway_bulletins:hover, html.light .label.chip-purple:hover { background-color: #EA80FF; color: #40004C; } html.light .label.label-checks:hover .badge-pill, html.light .label.label-core-server:hover .badge-pill, html.light .label.label-コアサーバ:hover .badge-pill, html.light .label.label-use-interoperability:hover .badge-pill, html.light .label.label-use-web_monetization:hover .badge-pill, html.light .label.blog-category-gateway_bulletins:hover .badge-pill, html.light .label.chip-purple:hover .badge-pill { color: #EA80FF; background-color: #40004C; } .label.label-cross-currency, .label.label-security, .label.label-クロスカレンシー, .label.label-セキュリティ, .label.label-use-gaming, .label.label-use-defi, .label.blog-category-amendments, .label.chip-yellow { background-color: #D4C02D; color: #DBF15E; } .label.label-cross-currency .badge-pill, .label.label-security .badge-pill, .label.label-クロスカレンシー .badge-pill, .label.label-セキュリティ .badge-pill, .label.label-use-gaming .badge-pill, .label.label-use-defi .badge-pill, .label.blog-category-amendments .badge-pill, .label.chip-yellow .badge-pill { background-color: #DBF15E; color: #D4C02D; } .label.label-cross-currency:hover, .label.label-security:hover, .label.label-クロスカレンシー:hover, .label.label-セキュリティ:hover, .label.label-use-gaming:hover, .label.label-use-defi:hover, .label.blog-category-amendments:hover, .label.chip-yellow:hover { background-color: #E1DB26; color: #E6F1A7; } .label.label-cross-currency:hover .badge-pill, .label.label-security:hover .badge-pill, .label.label-クロスカレンシー:hover .badge-pill, .label.label-セキュリティ:hover .badge-pill, .label.label-use-gaming:hover .badge-pill, .label.label-use-defi:hover .badge-pill, .label.blog-category-amendments:hover .badge-pill, .label.chip-yellow:hover .badge-pill { background-color: #E6F1A7; color: #E1DB26; } html.light .label.label-cross-currency, html.light .label.label-security, html.light .label.label-クロスカレンシー, html.light .label.label-セキュリティ, html.light .label.label-use-gaming, html.light .label.label-use-defi, html.light .label.blog-category-amendments, html.light .label.chip-yellow { background-color: #E6F1A7; color: #D4C02D; } html.light .label.label-cross-currency .badge-pill, html.light .label.label-security .badge-pill, html.light .label.label-クロスカレンシー .badge-pill, html.light .label.label-セキュリティ .badge-pill, html.light .label.label-use-gaming .badge-pill, html.light .label.label-use-defi .badge-pill, html.light .label.blog-category-amendments .badge-pill, html.light .label.chip-yellow .badge-pill { color: #E6F1A7; background-color: #D4C02D; } html.light .label.label-cross-currency:hover, html.light .label.label-security:hover, html.light .label.label-クロスカレンシー:hover, html.light .label.label-セキュリティ:hover, html.light .label.label-use-gaming:hover, html.light .label.label-use-defi:hover, html.light .label.blog-category-amendments:hover, html.light .label.chip-yellow:hover { background-color: #DBF15E; color: #D4C02D; } html.light .label.label-cross-currency:hover .badge-pill, html.light .label.label-security:hover .badge-pill, html.light .label.label-クロスカレンシー:hover .badge-pill, html.light .label.label-セキュリティ:hover .badge-pill, html.light .label.label-use-gaming:hover .badge-pill, html.light .label.label-use-defi:hover .badge-pill, html.light .label.blog-category-amendments:hover .badge-pill, html.light .label.chip-yellow:hover .badge-pill { color: #DBF15E; background-color: #D4C02D; } .label.label-decentralized-exchange, .label.label-smart-contracts, .label.label-transaction-sending, .label.label-分散型取引所, .label.label-スマートコントラクト, .label.label-トランザクション送信, .label.label-use-developer_tooling, .label.label-use-payments, .label.blog-category-developer_reflections, .label.blog-category-case_study, .label.chip-blue { background-color: #0A4DC0; color: #428CFF; } .label.label-decentralized-exchange .badge-pill, .label.label-smart-contracts .badge-pill, .label.label-transaction-sending .badge-pill, .label.label-分散型取引所 .badge-pill, .label.label-スマートコントラクト .badge-pill, .label.label-トランザクション送信 .badge-pill, .label.label-use-developer_tooling .badge-pill, .label.label-use-payments .badge-pill, .label.blog-category-developer_reflections .badge-pill, .label.blog-category-case_study .badge-pill, .label.chip-blue .badge-pill { background-color: #428CFF; color: #0A4DC0; } .label.label-decentralized-exchange:hover, .label.label-smart-contracts:hover, .label.label-transaction-sending:hover, .label.label-分散型取引所:hover, .label.label-スマートコントラクト:hover, .label.label-トランザクション送信:hover, .label.label-use-developer_tooling:hover, .label.label-use-payments:hover, .label.blog-category-developer_reflections:hover, .label.blog-category-case_study:hover, .label.chip-blue:hover { background-color: #0179E7; color: #93BFF1; } .label.label-decentralized-exchange:hover .badge-pill, .label.label-smart-contracts:hover .badge-pill, .label.label-transaction-sending:hover .badge-pill, .label.label-分散型取引所:hover .badge-pill, .label.label-スマートコントラクト:hover .badge-pill, .label.label-トランザクション送信:hover .badge-pill, .label.label-use-developer_tooling:hover .badge-pill, .label.label-use-payments:hover .badge-pill, .label.blog-category-developer_reflections:hover .badge-pill, .label.blog-category-case_study:hover .badge-pill, .label.chip-blue:hover .badge-pill { background-color: #93BFF1; color: #0179E7; } html.light .label.label-decentralized-exchange, html.light .label.label-smart-contracts, html.light .label.label-transaction-sending, html.light .label.label-分散型取引所, html.light .label.label-スマートコントラクト, html.light .label.label-トランザクション送信, html.light .label.label-use-developer_tooling, html.light .label.label-use-payments, html.light .label.blog-category-developer_reflections, html.light .label.blog-category-case_study, html.light .label.chip-blue { background-color: #93BFF1; color: #0179E7; } html.light .label.label-decentralized-exchange .badge-pill, html.light .label.label-smart-contracts .badge-pill, html.light .label.label-transaction-sending .badge-pill, html.light .label.label-分散型取引所 .badge-pill, html.light .label.label-スマートコントラクト .badge-pill, html.light .label.label-トランザクション送信 .badge-pill, html.light .label.label-use-developer_tooling .badge-pill, html.light .label.label-use-payments .badge-pill, html.light .label.blog-category-developer_reflections .badge-pill, html.light .label.blog-category-case_study .badge-pill, html.light .label.chip-blue .badge-pill { color: #93BFF1; background-color: #0179E7; } html.light .label.label-decentralized-exchange:hover, html.light .label.label-smart-contracts:hover, html.light .label.label-transaction-sending:hover, html.light .label.label-分散型取引所:hover, html.light .label.label-スマートコントラクト:hover, html.light .label.label-トランザクション送信:hover, html.light .label.label-use-developer_tooling:hover, html.light .label.label-use-payments:hover, html.light .label.blog-category-developer_reflections:hover, html.light .label.blog-category-case_study:hover, html.light .label.chip-blue:hover { background-color: #428CFF; color: #0A4DC0; } html.light .label.label-decentralized-exchange:hover .badge-pill, html.light .label.label-smart-contracts:hover .badge-pill, html.light .label.label-transaction-sending:hover .badge-pill, html.light .label.label-分散型取引所:hover .badge-pill, html.light .label.label-スマートコントラクト:hover .badge-pill, html.light .label.label-トランザクション送信:hover .badge-pill, html.light .label.label-use-developer_tooling:hover .badge-pill, html.light .label.label-use-payments:hover .badge-pill, html.light .label.blog-category-developer_reflections:hover .badge-pill, html.light .label.blog-category-case_study:hover .badge-pill, html.light .label.chip-blue:hover .badge-pill { color: #428CFF; background-color: #0A4DC0; } .label.label-escrow, .label.label-tokens, .label.label-development, .label.label-トークン, .label.label-開発, .label.label-use-wallet, .label.label-use-sustainability, .label.blog-category-advisories, .label.chip-orange { background-color: #4C1A00; color: #FFAA80; } .label.label-escrow .badge-pill, .label.label-tokens .badge-pill, .label.label-development .badge-pill, .label.label-トークン .badge-pill, .label.label-開発 .badge-pill, .label.label-use-wallet .badge-pill, .label.label-use-sustainability .badge-pill, .label.blog-category-advisories .badge-pill, .label.chip-orange .badge-pill { background-color: #FFAA80; color: #4C1A00; } .label.label-escrow:hover, .label.label-tokens:hover, .label.label-development:hover, .label.label-トークン:hover, .label.label-開発:hover, .label.label-use-wallet:hover, .label.label-use-sustainability:hover, .label.blog-category-advisories:hover, .label.chip-orange:hover { background-color: #802B00; color: #FFCCB2; } .label.label-escrow:hover .badge-pill, .label.label-tokens:hover .badge-pill, .label.label-development:hover .badge-pill, .label.label-トークン:hover .badge-pill, .label.label-開発:hover .badge-pill, .label.label-use-wallet:hover .badge-pill, .label.label-use-sustainability:hover .badge-pill, .label.blog-category-advisories:hover .badge-pill, .label.chip-orange:hover .badge-pill { background-color: #FFCCB2; color: #802B00; } html.light .label.label-escrow, html.light .label.label-tokens, html.light .label.label-development, html.light .label.label-トークン, html.light .label.label-開発, html.light .label.label-use-wallet, html.light .label.label-use-sustainability, html.light .label.blog-category-advisories, html.light .label.chip-orange { background-color: #FFCCB2; color: #802B00; } html.light .label.label-escrow .badge-pill, html.light .label.label-tokens .badge-pill, html.light .label.label-development .badge-pill, html.light .label.label-トークン .badge-pill, html.light .label.label-開発 .badge-pill, html.light .label.label-use-wallet .badge-pill, html.light .label.label-use-sustainability .badge-pill, html.light .label.blog-category-advisories .badge-pill, html.light .label.chip-orange .badge-pill { color: #FFCCB2; background-color: #802B00; } html.light .label.label-escrow:hover, html.light .label.label-tokens:hover, html.light .label.label-development:hover, html.light .label.label-トークン:hover, html.light .label.label-開発:hover, html.light .label.label-use-wallet:hover, html.light .label.label-use-sustainability:hover, html.light .label.blog-category-advisories:hover, html.light .label.chip-orange:hover { background-color: #FFAA80; color: #4C1A00; } html.light .label.label-escrow:hover .badge-pill, html.light .label.label-tokens:hover .badge-pill, html.light .label.label-development:hover .badge-pill, html.light .label.label-トークン:hover .badge-pill, html.light .label.label-開発:hover .badge-pill, html.light .label.label-use-wallet:hover .badge-pill, html.light .label.label-use-sustainability:hover .badge-pill, html.light .label.blog-category-advisories:hover .badge-pill, html.light .label.chip-orange:hover .badge-pill { color: #FFAA80; background-color: #4C1A00; } .label.label-fees, .label.label-payments, .label.label-data-retention, .label.label-手数料, .label.label-支払い, .label.label-データ保持, .label.label-use-exchanges, .label.label-use-custody, .label.blog-category-security, .label.chip-magenta { background-color: #DC466F; color: #F18DA5; } .label.label-fees .badge-pill, .label.label-payments .badge-pill, .label.label-data-retention .badge-pill, .label.label-手数料 .badge-pill, .label.label-支払い .badge-pill, .label.label-データ保持 .badge-pill, .label.label-use-exchanges .badge-pill, .label.label-use-custody .badge-pill, .label.blog-category-security .badge-pill, .label.chip-magenta .badge-pill { background-color: #F18DA5; color: #DC466F; } .label.label-fees:hover, .label.label-payments:hover, .label.label-data-retention:hover, .label.label-手数料:hover, .label.label-支払い:hover, .label.label-データ保持:hover, .label.label-use-exchanges:hover, .label.label-use-custody:hover, .label.blog-category-security:hover, .label.chip-magenta:hover { background-color: #FF577F; color: #F2B5C3; } .label.label-fees:hover .badge-pill, .label.label-payments:hover .badge-pill, .label.label-data-retention:hover .badge-pill, .label.label-手数料:hover .badge-pill, .label.label-支払い:hover .badge-pill, .label.label-データ保持:hover .badge-pill, .label.label-use-exchanges:hover .badge-pill, .label.label-use-custody:hover .badge-pill, .label.blog-category-security:hover .badge-pill, .label.chip-magenta:hover .badge-pill { background-color: #F2B5C3; color: #FF577F; } html.light .label.label-fees, html.light .label.label-payments, html.light .label.label-data-retention, html.light .label.label-手数料, html.light .label.label-支払い, html.light .label.label-データ保持, html.light .label.label-use-exchanges, html.light .label.label-use-custody, html.light .label.blog-category-security, html.light .label.chip-magenta { background-color: #F2B5C3; color: #FF577F; } html.light .label.label-fees .badge-pill, html.light .label.label-payments .badge-pill, html.light .label.label-data-retention .badge-pill, html.light .label.label-手数料 .badge-pill, html.light .label.label-支払い .badge-pill, html.light .label.label-データ保持 .badge-pill, html.light .label.label-use-exchanges .badge-pill, html.light .label.label-use-custody .badge-pill, html.light .label.blog-category-security .badge-pill, html.light .label.chip-magenta .badge-pill { color: #F2B5C3; background-color: #FF577F; } html.light .label.label-fees:hover, html.light .label.label-payments:hover, html.light .label.label-data-retention:hover, html.light .label.label-手数料:hover, html.light .label.label-支払い:hover, html.light .label.label-データ保持:hover, html.light .label.label-use-exchanges:hover, html.light .label.label-use-custody:hover, html.light .label.blog-category-security:hover, html.light .label.chip-magenta:hover { background-color: #F18DA5; color: #DC466F; } html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments:hover .badge-pill, html.light .label.label-data-retention:hover .badge-pill, html.light .label.label-手数料:hover .badge-pill, html.light .label.label-支払い:hover .badge-pill, html.light .label.label-データ保持:hover .badge-pill, html.light .label.label-use-exchanges:hover .badge-pill, html.light .label.label-use-custody:hover .badge-pill, html.light .label.blog-category-security:hover .badge-pill, html.light .label.chip-magenta:hover .badge-pill { color: #F18DA5; background-color: #DC466F; } .tag-cloud .list-inline-item { margin-top: 1.5rem; } /* Dev Tool styles stuff ---------------------------------------------------- */ .command-list-wrapper { position: sticky; top: calc(var(--navbar-height) + var(--toc-offset-top)); max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top)); overflow-y: auto; width: var(--toc-width); } #tx-sender-history .list-group-item { font-size: small; color: #454549; } .response-metadata .timestamp { color: #454549; } .throbber { width: 24px; height: 24px; } #connection-status .card-body { border-left: 0; } #connection-status-item.active { background-color: #078139; border-color: #078139; } .api-input-area .btn-group > .send-request.btn { border-bottom-right-radius: 4px; border-top-right-radius: 4px; } #tx-sender-history ul { overflow: auto; height: 220px; border: 1px solid #E6EAF0; } .progress small, .progress .small { margin-top: 0.5rem; } .page-tx-sender .input-group .form-control, .interactive-block-ui .input-group .form-control { flex: 1 1 20%; height: auto; } .bootstrap-growl { max-width: 90vw !important; overflow: hidden; } .list-group-item-danger, #tx-sender-history .list-group-item-danger { background-color: #F18DA5; color: #141414; } .list-group-item-danger a, #tx-sender-history .list-group-item-danger a { color: #141414; } .list-group-item-danger a:hover, #tx-sender-history .list-group-item-danger a:hover { color: #141414; text-decoration: underline; } .rpc-tool .main h1::before, .rpc-tool .main .h1::before, .rpc-tool .main h2::before, .rpc-tool .main .h2::before, .rpc-tool .main h3::before, .rpc-tool .main .h3::before { display: none; } .form-text a { text-decoration: underline; } /* Print styles ------------------------------------------------------------- */ @media print { /* undo code tabs */ .multicode > div { display: block !important; } .multicode > em, .multicode > p > em { display: block !important; page-break-after: avoid; } .multicode > p { display: block !important; } .code_toggler { display: none; } /* wrap code, not scroll */ pre { white-space: pre-wrap; max-height: none !important; overflow: visible; page-break-inside: auto; word-wrap: break-word; } pre code { white-space: pre-wrap !important; color: #22252B !important; } code { white-space: pre-wrap !important; color: #22252B !important; } .codehilite .n, .codehilite .na, .codehilite .nb, .codehilite .nc, .codehilite .nd, .codehilite .ne, .codehilite .nf, .codehilite .ni, .codehilite .nl, .codehilite .nn, .codehilite .nt, .codehilite .nv, .codehilite .nx, .codehilite .bp, .codehilite .fm, .codehilite .py { color: #22252B; } article a[title=Source] { float: none; } /* Drop header, footer, sidebars */ header, footer, aside { display: none !important; } .navbar { display: none !important; } /* Full-width content body */ article, #main_content_body { position: static; display: block; width: auto; height: auto; color: black !important; max-width: 100%; overflow: visible !important; } body { overflow: visible; background: #fff; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: black; } .interactive-block { display: none; } .container { margin-top: 1rem !important; } } /* HOME STYLINGS */ .sidelinks:hover { color: #7649E3; } .sidelinks.active { color: #7649E3; font-weight: bold; } .page-home #home-hero-container { display: flex; justify-content: center; align-items: center; width: 100%; padding-top: 54.8%; overflow: hidden; } .page-home #home-hero-graphic { width: 100%; max-width: 856px; height: auto; object-fit: cover; content: url("../img/home-hero.svg"); margin-bottom: 24px; display: block; margin-left: auto; margin-right: auto; } @media (min-width: 992px) { .page-home #home-hero-graphic { min-height: 470px; } } @media (max-width: 991px) and (min-width: 540px) { .page-home #home-hero-graphic { min-height: 250px; } } @media (max-width: 539px) { .page-home #home-hero-graphic { min-height: 170px; } } .page-home #benefits-list #public { content: url("../img/icons/public.svg"); } .page-home #benefits-list #streamlined { content: url("../img/icons/streamlined.svg"); } .page-home #benefits-list #performance { content: url("../img/icons/performance.svg"); } .page-home #benefits-list #low-cost { content: url("../img/icons/low-cost.svg"); } .page-home #benefits-list #community { content: url("../img/icons/community.svg"); } .page-home #benefits-list #reliability { content: url("../img/icons/reliability.svg"); } .page-home #advanced-features .card:nth-child(1) .card-footer { background-image: url("../img/cards/3col-pink-purple.svg"); } .page-home #advanced-features .card:nth-child(2) .card-footer { background-image: url("../img/cards/3col-neutral-blue.svg"); } .page-home #advanced-features .card:nth-child(3) .card-footer { background-image: url("../img/cards/3col-light-green.svg"); } .page-home #advanced-features .card:nth-child(4) .card-footer { background-image: url("../img/cards/3col-orange.svg"); } .page-home #advanced-features .card:nth-child(5) .card-footer { background-image: url("../img/cards/3col-purple-blue-2.svg"); } .page-home #get-started .card:nth-child(1) .card-footer { background-image: url("../img/cards/3col-orange-yellow.svg"); } .page-home #get-started .card:nth-child(2) .card-footer { background-image: url("../img/cards/3col-magenta-orange.svg"); } .page-home #get-started .card:nth-child(3) .card-footer { background-image: url("../img/cards/3col-purple-blue-green.svg"); } .page-home #get-started .card:nth-child(4) .card-footer { background-image: url("../img/cards/3col-light-blue.svg"); } .page-home #get-started .card:nth-child(5) .card-footer { background-image: url("../img/cards/3col-green-blue.svg"); } #embedded-payments-list #digital-wallets { content: url("../img/uses/payments/digital-wallet.png"); } #embedded-payments-list #cross-border-remittance { content: url("../img/uses/payments/cross-border.png"); } #embedded-payments-list #regulated-foreign-exchange { content: url("../img/uses/payments/regulated.png"); } #embedded-payments-list #merchant-settlement { content: url("../img/uses/payments/merchant-settlement.png"); } #embedded-payments-list #b2b-payment-rails { content: url("../img/uses/payments/b2b-payment.png"); } #embedded-payments-list #compliance-first-payment-acceptance { content: url("../img/uses/payments/compliance.png"); } .cta { position: absolute; } .cta-top-left { top: 0; left: 0; } .cta-bottom-right { bottom: 0; right: 0; } .landing-bg { opacity: 0.6; } @media (min-width: 576px) { .landing-bg { opacity: 1; } } .landing-builtin-bg::before { content: ""; position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-position-x: left; background-position-y: top; opacity: 0.6; } @media (min-width: 576px) { .landing-builtin-bg::before { opacity: 1; } } #xrp-overview-blue { position: absolute; top: 0; left: 0; } @media (max-width: 575.98px) { #xrp-mark-overview { height: 40px; margin-top: 16px; } } #wallets #wallet-ledger { content: url("../img/wallets/ledger.svg"); } #wallets #wallet-secalot { content: url("../img/wallets/secalot.svg"); } #wallets #wallet-trezor { content: url("../img/wallets/trezor.svg"); } #wallets #wallet-xumm { content: url("../img/wallets/xumm.svg"); } #wallets #wallet-trust { content: url("../img/wallets/trust.svg"); } #wallets #wallet-gatehub { content: url("../img/wallets/gatehub.svg"); } #wallets #wallet-towo { content: url("../img/wallets/towo.svg"); } #wallets #wallet-keystone { content: url("../img/wallets/keystone.svg"); } #wallets #wallet-dcent { content: url("../img/wallets/dcent.svg"); } #wallets #wallet-coin { content: url("../img/wallets/coin.svg"); } #wallets #wallet-gem { content: url("../img/wallets/gem.svg"); } #wallets #wallet-joey { content: url("../img/wallets/joey.svg"); } #wallets #wallet-bitfrost { content: url("../img/wallets/bitfrost.png"); } #wallets #wallet-crossmark { content: url("../img/wallets/crossmark.png"); } #top-exchanges #exch-bitstamp { content: url("../img/exchanges/bitstamp.svg"); } #top-exchanges #exch-kraken { content: url("../img/exchanges/kraken.svg"); } #top-exchanges #exch-cex-io { content: url("../img/exchanges/cex-io.svg"); } #top-exchanges #exch-liquid { content: url("../img/exchanges/liquid.svg"); } #top-exchanges #exch-lmax { content: url("../img/exchanges/lmax.svg"); } #top-exchanges #exch-bitfinex { content: url("../img/exchanges/bitfinex.svg"); } #top-exchanges #exch-etoro { content: url("../img/exchanges/etoro.svg"); } #top-exchanges #exch-bittrex { content: url("../img/exchanges/bittrex.png"); } #top-exchanges #exch-currency-com { content: url("../img/exchanges/currency-com.png"); } #top-exchanges #exch-ftx { content: url("../img/exchanges/ftx.png"); } #xrpl-overview-purple { position: absolute; top: 40px; left: 0; } @media (max-width: 575.98px) { #xrpl-overview-purple { top: 0; left: -20vw; } } #xrpl-overview-orange { position: absolute; top: 80px; right: -4px; } #use-cases-orange { position: absolute; top: -480px; right: -4px; } #validator-graphic { content: url(../img/validators.svg); } .page-uses .container-new { padding-left: 16px; padding-right: 16px; } .page-uses h1, .page-uses .h1 { font-size: 42px; } .page-uses::before { transform: scaleX(-1); background-image: url(../img/backgrounds/use-cases-blue.svg); } .page-uses .card-grid { grid-gap: 8px; } .page-uses .card-grid img { max-height: 40px; } .page-uses { /* Cleanup bootstrap modal */ } .page-uses .modal { padding: 0; } .page-uses .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #141414; background-clip: padding-box; border: none; border-radius: 0; box-shadow: none; outline: none; background: #111112; } .page-uses .modal-header { border: none; background: #111112; box-shadow: 0px 1px 2px #141414; } .page-uses .modal-header .cancel .chevron { transform: rotate(90deg); } .page-uses .modal-header .apply .chevron { transform: rotate(-90deg); } .page-uses .modal-footer { border: none; background: #111112; box-shadow: 0px -1px 2px #141414; align-items: unset; padding: 0.75rem; flex-direction: column; flex-wrap: wrap; } .page-uses .card-title { margin-bottom: 0.5rem; line-height: 26px; } .page-uses .card-uses { padding: 16px; margin: 0; text-decoration: none; transition: all 0.35s ease-out; } .page-uses .card-uses:hover { text-decoration: none; color: #E6EAF0; transform: translateY(-16px); text-decoration: none; } .page-uses .card-body { background: #232325; border-radius: 8px; height: 100%; padding: 32px; margin: 0; } .page-uses .page-events .label { font-weight: normal; font-size: 14px; margin: 0; padding-left: 26px; } .page-uses .category-header { font-weight: bold; /*color: $gray-300;*/ color: #CAD4DF; } .page-uses .light .category-checkbox label { color: #ffffff; } .page-uses .category-checkbox { display: flex; align-items: center; } .page-uses .category-checkbox label { font-weight: normal; font-size: 14px; margin: 0; padding-left: 26px; } .page-uses .category_count { margin-left: 8px; padding: 2px 16px; width: 24px; height: 16px; background: #7649E3; border-radius: 100px; font-weight: 600; font-size: 12px; line-height: 16px; color: #C0A7FF; } .page-uses .category_sidebar { position: sticky; top: 10px; } .page-uses #infrastructure { content: url("../img/icons/usecases/ic_infrastructure.png"); } .page-uses #developer_tooling { content: url("../img/icons/usecases/ic_developer_tooling.png"); } .page-uses #interoperability { content: url("../img/icons/usecases/ic_interoperability.png"); } .page-uses #wallet { content: url("../img/icons/usecases/ic_wallet.png"); } .page-uses #nfts { content: url("../img/icons/usecases/ic_nfts.png"); } .page-uses #exchanges { content: url("../img/icons/usecases/ic_exchanges.png"); } .page-uses #gaming { content: url("../img/icons/usecases/ic_gaming.png"); } .page-uses #security { content: url("../img/icons/usecases/ic_security.png"); } .page-uses #payments { content: url("../img/icons/usecases/ic_payments.png"); } .page-uses #web_monetization { content: url("../img/icons/usecases/ic_web_monetization.png"); } .page-uses #sustainability { content: url("../img/icons/usecases/ic_sustainability.png"); } .page-uses #cbdc { content: url("../img/icons/usecases/ic_cbdc.png"); } .page-uses #other { content: url("../img/icons/usecases/ic_other.png"); } .page-uses #carbon_markets { content: url("../img/icons/usecases/ic_carbon_markets.png"); } .page-uses #custody { content: url("../img/icons/usecases/ic_custody.png"); } .page-uses #defi { content: url("../img/icons/usecases/ic_defi.png"); } .page-uses #use_case_companies_list #bithomp .biz-logo { max-height: 40px; content: url("../img/uses/bithomp.svg"); } .page-uses #use_case_companies_list #onthedex .biz-logo { max-height: 40px; content: url("../img/uses/onthedex.svg"); } .page-uses #use_case_companies_list #gatehub .biz-logo { max-height: 40px; content: url("../img/uses/gatehub.svg"); } .page-uses #use_case_companies_list #towo-labs .biz-logo { max-height: 40px; content: url("../img/uses/towo-labs.svg"); } .page-uses #use_case_companies_list #xrp-toolkit .biz-logo { max-height: 40px; content: url("../img/uses/xrp-toolkit.svg"); } .page-uses #use_case_companies_list #xrpl-org-ledger-explorer .biz-logo { max-height: 40px; content: url("../img/uses/xrpl-org-ledger-explorer.svg"); } .page-uses #use_case_companies_list #xrpl-rosetta .biz-logo { max-height: 40px; content: url("../img/uses/xrpl-rosetta.svg"); } .page-uses #use_case_companies_list #xrpscan .biz-logo { max-height: 40px; content: url("../img/uses/xrpscan.svg"); } .page-uses #use_case_companies_list #evernode .biz-logo { max-height: 40px; content: url("../img/uses/evernode.svg"); } .page-uses #use_case_companies_list #cryptum .biz-logo { max-height: 40px; content: url("../img/uses/cryptum.svg"); } .page-uses #use_case_companies_list #x-tokenize .biz-logo { max-height: 40px; content: url("../img/uses/x-tokenize.svg"); } .page-uses #use_case_companies_list #multichain .biz-logo { max-height: 40px; content: url("../img/uses/multichain.svg"); } .page-uses #use_case_companies_list #xumm-wallet .biz-logo { max-height: 40px; content: url("../img/uses/xumm-wallet.svg"); } .page-uses #use_case_companies_list #gem-wallet .biz-logo { max-height: 40px; content: url("../img/uses/gem-wallet.svg"); } .page-uses #use_case_companies_list #aesthetes .biz-logo { max-height: 40px; content: url("../img/uses/aesthetes.svg"); } .page-uses #use_case_companies_list #audiotarky .biz-logo { max-height: 40px; content: url("../img/uses/audiotarky.svg"); } .page-uses #use_case_companies_list #xrp-cafe .biz-logo { max-height: 40px; content: url("../img/uses/xrp-cafe.svg"); } .page-uses #use_case_companies_list #nft-master .biz-logo { max-height: 40px; content: url("../img/uses/nft-master.svg"); } .page-uses #use_case_companies_list #onxrp .biz-logo { max-height: 40px; content: url("../img/uses/onxrp.svg"); } .page-uses #use_case_companies_list #peerkat .biz-logo { max-height: 40px; content: url("../img/uses/peerkat.svg"); } .page-uses #use_case_companies_list #sologenic-nft .biz-logo { max-height: 40px; content: url("../img/uses/sologenic-nft.svg"); } .page-uses #use_case_companies_list #sologenic-dex .biz-logo { max-height: 40px; content: url("../img/uses/sologenic-dex.svg"); } .page-uses #use_case_companies_list #xp-market .biz-logo { max-height: 40px; content: url("../img/uses/xp-market.svg"); } .page-uses #use_case_companies_list #ledger-city .biz-logo { max-height: 40px; content: url("../img/uses/ledger-city.svg"); } .page-uses #use_case_companies_list #forte .biz-logo { max-height: 40px; content: url("../img/uses/forte.svg"); } .page-uses #use_case_companies_list #futureverse .biz-logo { max-height: 40px; content: url("../img/uses/futureverse.svg"); } .page-uses #use_case_companies_list #first-ledger-bot .biz-logo { max-height: 40px; content: url("../img/uses/first-ledger-bot.svg"); } .page-uses #use_case_companies_list #moai-finance .biz-logo { max-height: 40px; content: url("../img/uses/moai-finance.svg"); } .page-uses #use_case_companies_list #orchestra-finance .biz-logo { max-height: 40px; content: url("../img/uses/orchestra-finance.svg"); } .page-uses #use_case_companies_list #anchain-ai .biz-logo { max-height: 40px; content: url("../img/uses/anchain-ai.svg"); } .page-uses #use_case_companies_list #coil .biz-logo { max-height: 40px; content: url("../img/uses/coil.svg"); } .page-uses #use_case_companies_list #carbonland-trust .biz-logo { max-height: 40px; content: url("../img/uses/carbonland-trust.svg"); } .page-uses #use_case_companies_list #casino-coin .biz-logo { max-height: 40px; content: url("../img/uses/casino-coin.svg"); } .page-uses #use_case_companies_list #bitgo .biz-logo { max-height: 40px; content: url("../img/uses/bitgo.svg"); } .page-uses #use_case_companies_list #bitpay .biz-logo { max-height: 40px; content: url("../img/uses/bitpay.svg"); } .page-uses #use_case_companies_list #ripples-on-demand-liquidity .biz-logo { max-height: 40px; content: url("../img/uses/ripples-on-demand-liquidity.svg"); } .page-uses #use_case_companies_list #ripples-cbdc-platform .biz-logo { max-height: 40px; content: url("../img/uses/ripples-cbdc-platform.svg"); } .page-uses #use_case_companies_list #momento .biz-logo { max-height: 40px; content: url("../img/uses/momento.svg"); } .page-uses #use_case_companies_list #zerpmon .biz-logo { max-height: 40px; content: url("../img/uses/zerpmon.png"); } .page-uses #use_case_companies_list #joey-wallet .biz-logo { max-height: 40px; content: url("../img/uses/joey-wallet.svg"); } .page-uses #use_case_companies_list #Crossmark .biz-logo { max-height: 40px; content: url("../img/uses/Crossmark.png"); } .page-uses #use_case_companies_list #Edge .biz-logo { max-height: 40px; content: url("../img/uses/Edge.png"); } .page-uses .orchestra-finance { max-height: 52px !important; margin: 0 !important; } .page-uses #use_case_companies_list #first-ledger-bot .biz-logo { max-height: 81px !important; } .page-uses #use_case_companies_list #zerpmon .biz-logo { max-height: 81px !important; } @media (min-width: 992px) { .page-uses h1, .page-uses .h1 { font-size: 62px; } .page-uses .container-new { padding-left: 64px; padding-right: 64px; } .page-uses .card-grid img { max-height: 48px; } .page-uses .card-grid { grid-gap: 48px; } .page-uses .card-uses { padding: 24px; } } #history-orange { position: absolute; top: 0; right: -4px; } #history-purple { position: absolute; top: -480px; left: -4px; } .hidden-section { overflow: hidden; visibility: hidden; height: 0; } .hidden-section.show { overflow: auto; visibility: visible; height: auto; } #impact-green { position: absolute; top: 0; left: -4px; rotate: 180deg; } #impact-purple { position: absolute; top: 100px; right: -4px; } #impact-magenta { position: absolute; top: 100px; right: -4px; } #foundation-magenta { position: absolute; top: 0px; left: 0px; } #foundation-orange { position: absolute; top: 40px; right: -4px; } .page-impact #map-light { display: none; } .page-impact #map-dark { display: block; } .page-impact .connect-list #connect-01 { content: url("../img/impact/connect-01.svg"); } .page-impact .connect-list #connect-02 { content: url("../img/impact/connect-02.svg"); } .page-impact .connect-list #connect-03 { content: url("../img/impact/connect-03.svg"); } .page-impact .connect-list #connect-04 { content: url("../img/impact/connect-04.svg"); } .page-funding .funding-list #funding-01 { content: url("../img/funding/funding-01.svg"); } .page-funding .funding-list #funding-02 { content: url("../img/funding/funding-02.svg"); } .page-funding .funding-list #funding-03 { content: url("../img/funding/funding-03.svg"); } .page-funding .funding-list #funding-04 { content: url("../img/funding/funding-04.svg"); } .page-funding #funding-orange { position: absolute; top: 132px; left: -4px; } @media (min-width: 992px) { .page-funding .funding-box { min-height: 200px; } } .page-ambassadors #benefits-list #benefits-01 { content: url("../img/ambassadors/benefits-01.svg"); } .page-ambassadors #benefits-list #benefits-02 { content: url("../img/ambassadors/benefits-02.svg"); } .page-ambassadors #benefits-list #benefits-03 { content: url("../img/ambassadors/benefits-03.svg"); } .page-ambassadors #benefits-list #benefits-04 { content: url("../img/ambassadors/benefits-04.svg"); } .page-ambassadors #benefits-list #benefits-05 { content: url("../img/ambassadors/benefits-05.svg"); } .page-ambassadors #benefits-list #benefits-06 { content: url("../img/ambassadors/benefits-06.svg"); } .page-ambassadors #eligibility-list #eligibility-01 { content: url("../img/ambassadors/eligibility-01.svg"); } .page-ambassadors #eligibility-list #eligibility-02 { content: url("../img/ambassadors/eligibility-02.svg"); } .page-ambassadors #eligibility-list #eligibility-03 { content: url("../img/ambassadors/eligibility-03.svg"); } .page-ambassadors #eligibility-list #eligibility-04 { content: url("../img/ambassadors/eligibility-04.svg"); } .page-ambassadors #eligibility-list #eligibility-05 { content: url("../img/ambassadors/eligibility-05.svg"); } .page-ambassadors .btn { padding: 0.75rem; } .page-ambassadors #container-scroll { height: 160px; position: relative; overflow: hidden; margin-top: 80px; margin-bottom: 64px; } .page-ambassadors .photobanner { position: absolute; top: 0px; left: 0px; overflow: hidden; white-space: nowrap; animation: bannermove 40s linear infinite; } .page-ambassadors .photobanner-bottom { top: 112px; } .page-ambassadors .photobanner img { margin: 0 0.5em; } @keyframes bannermove { 0% { transform: translate(0, 0); } 100% { transform: translate(-50%, 0); } } .page-ambassadors #carouselSlidesOnly { height: 392px; margin-bottom: 40px; } @media (min-width: 992px) { .page-ambassadors #carouselSlidesOnly { height: 320px; margin-bottom: 104px; } } .page-ambassadors h6, .page-ambassadors .h6 { font-size: 1.25rem; } .page-ambassadors .btn-arrow::after { display: inline-block; content: url(../img/icons/arrow-right-purple.svg); vertical-align: middle; padding-left: 8px; transition: transform 0.3s ease-out; } .page-ambassadors .btn-arrow:hover { text-decoration: none; background: none !important; border: none; } .page-ambassadors .btn-arrow:hover::after { background-position: left 4px bottom 4px; transform: translateX(4px); } .autoscroll-content { animation: autoscroll 15s linear infinite; white-space: nowrap; overflow: hidden; max-width: 300px; } #community-magenta { position: absolute; top: 0px; left: 0px; } #community-purple { position: absolute; top: 160px; right: 0px; } .page-events #event-hero-image { height: 100%; min-height: 209px; background: url(../img/events/event-hero1@2x.png); background-size: contain; background-repeat: no-repeat; background-position: center; } .page-events #events-orange { position: absolute; top: 0px; right: 0px; } .page-events .event-hero { color: #F0F3F7; } .page-events .event-hero p { font-weight: 500; font-size: 24px; line-height: 32px; } .page-events .event-save-date { color: #FFFFFF; font-weight: bold; font-size: 20px; line-height: 26px; } .page-events .event-small-gray { color: #E6EAF0; } .page-events .btn { padding: 0.75rem; } .page-events .event-card { max-width: 311px; margin: 32px auto; transition: all 0.35s ease-out; position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-clip: border-box; background-color: #232325; box-shadow: 0px 5px 40px #141414; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 8px; font-size: 16px; line-height: 24px; color: #E6EAF0; } .page-events .event-card .event-card-header { position: relative; height: 176px; background-size: contain !important; width: 100%; border-radius: 8px 8px 0 0; } .page-events .event-card .event-card-title { position: absolute; bottom: 32px; padding: 0 32px; color: #F0F3F7; font-weight: bold; font-size: 20px; line-height: 28px; } .page-events .event-card .event-card-body { padding: 32px; } .page-events .event-card .event-card-footer { padding: 0 32px 32px; } .page-events .event-card .event-card-footer .icon::before { height: 24px; width: 24px; content: ""; margin-right: 8px; background-size: contain; background-repeat: no-repeat; } .page-events .event-card .icon-date::before { background: url(../img/events/event-date.svg); } .page-events .event-card .icon-location::before { background: url(../img/events/event-location.svg); } @media (min-width: 992px) { .page-events .event-card { max-width: 347px; margin: 32px; } .page-events .event-card-header { height: 197px !important; } } .page-events a.event-card:hover { transform: translateY(-16px); text-decoration: none; } .page-events label { margin: 0; padding-left: 8px; color: #FFFFFF; } .page-events .events-filter h6, .page-events .events-filter .h6 { font-size: 16px; } .page-events .form-check-inline { margin-right: 2rem; } .page-events .events-filter { height: 20px; width: 20px; } .page-events .events-filter[type=checkbox]::before { position: relative; display: block; width: 20px; height: 20px; content: ""; background: #111112; border-radius: 4px; border-width: 2px; border-style: solid; border-color: #8A919A; } .page-events .events-filter[type=checkbox]::after { position: relative; display: block; top: -20px; width: 20px; height: 20px; content: ""; background-repeat: no-repeat; background-position: center; border-radius: 4px; border-width: 2px; border-style: solid; border-color: #8A919A; } .page-events .events-filter[type=checkbox]:checked::before { background: #111112; border: none; border-radius: 0; } .page-events .events-filter[type=checkbox]:checked::after { background-image: url(../img/events/event-check.svg); background-repeat: no-repeat; background-position: center; background-color: #5429A1; border-width: 2px; border-style: solid; border-color: #5429A1; border-radius: 4px; } .page-events .events-filter[type=checkbox]:not(:disabled):checked:hover::after { background-image: url(../img/events/event-check.svg); background-repeat: no-repeat; background-position: center; border-width: 2px; border-style: solid; border-color: #C0A7FF; border-radius: 4px; } .page-events .events-filter[type=checkbox]:not(:disabled):hover::before { background: #111112; border: none; border-radius: 0; } .page-events .events-filter[type=checkbox]:not(:disabled):hover::after { background: #111112; border: none; border-width: 2px; border-style: solid; border-color: #C0A7FF; border-radius: 4px; } #find-us-on-platforms .card-deck .card:nth-child(1) .card-footer { background-image: url(../img/cards/4col-light-blue-3.svg); } #find-us-on-platforms .card-deck .card:nth-child(2) .card-footer { background-image: url(../img/cards/4col-purple-blue-2.svg); } #find-us-on-platforms .card-deck .card:nth-child(3) .card-footer { background-image: url(../img/cards/4col-magenta-3.svg); } #find-us-on-platforms .card-deck .card:nth-child(4) .card-footer { background-image: url(../img/cards/4col-green-2.svg); } #find-us-on-platforms .card-deck .card:nth-child(5) .card-footer { background-image: url(../img/cards/4col-orange-yellow-2.svg); } #find-us-on-platforms .card-deck .card:nth-child(6) .card-footer { background-image: url(../img/cards/4col-blue-purple.svg); } #find-us-on-platforms .card-deck .card:nth-child(7) .card-footer { background-image: url(../img/cards/4col-yellow-2.svg); } #find-us-on-platforms .card-deck .card:nth-child(8) .card-footer { background-image: url(../img/cards/4col-orange-2.svg); } #find-us-on-platforms .card-deck .card { margin-bottom: 2.5rem; } @media (min-width: 992px) { .page-faq article { max-width: 704px; margin-left: auto; margin-right: auto; } } .page-faq article h6:first-of-type, .page-faq article .h6:first-of-type { color: #078139; margin-bottom: 1rem; margin-top: 2.5rem; font-size: 1.25rem; line-height: 26px; text-align: center; } .page-faq article h6:first-of-type .hover_anchor, .page-faq article .h6:first-of-type .hover_anchor { display: none; } @media (min-width: 992px) { .page-faq article h6:first-of-type, .page-faq article .h6:first-of-type { margin-top: 6.5rem; } } .page-faq article h1:first-of-type, .page-faq article .h1:first-of-type { font-size: 2.625rem; line-height: 1.2; margin-top: 0; margin-bottom: 5rem; text-align: center; } .page-faq article h1:first-of-type .hover_anchor, .page-faq article .h1:first-of-type .hover_anchor { display: none; } @media (min-width: 992px) { .page-faq article h1:first-of-type, .page-faq article .h1:first-of-type { font-size: 3.875rem; margin-bottom: 13rem; } } .page-faq h2, .page-faq .h2 { margin-top: 13rem; font-size: 2rem; line-height: 2.375rem; text-align: center; font-weight: 700; } .page-faq .q-wrapper, .mini-faq .q-wrapper { background: #232325; border-radius: 4px; padding: 2rem; padding-right: 3rem; margin-bottom: 1.5rem; position: relative; z-index: 5; width: 100%; transform: translateY(0%); } .page-faq .q-wrapper p a, .mini-faq .q-wrapper p a { text-decoration: none; font-weight: 600; color: #7649E3; } .page-faq .q-wrapper p a:hover, .mini-faq .q-wrapper p a:hover { text-decoration: underline; } .page-faq .q-wrapper h4, .page-faq .q-wrapper .h4, .mini-faq .q-wrapper h4, .mini-faq .q-wrapper .h4 { font-size: 1.25rem; line-height: 1.625rem; margin-top: 0; } .page-faq .q-wrapper h4::before, .page-faq .q-wrapper .h4::before, .mini-faq .q-wrapper h4::before, .mini-faq .q-wrapper .h4::before { display: block; content: " "; margin-top: -40px; height: 40px; visibility: hidden; pointer-events: none; } .page-faq .q-wrapper h4 > a, .page-faq .q-wrapper .h4 > a, .mini-faq .q-wrapper h4 > a, .mini-faq .q-wrapper .h4 > a { text-decoration: none; } .page-faq .q-wrapper h4 > a:hover, .page-faq .q-wrapper .h4 > a:hover, .mini-faq .q-wrapper h4 > a:hover, .mini-faq .q-wrapper .h4 > a:hover { text-decoration: underline; color: #FFFFFF; } @media (max-width: 575.98px) { .page-faq .q-wrapper h4, .page-faq .q-wrapper .h4, .mini-faq .q-wrapper h4, .mini-faq .q-wrapper .h4 { font-size: 1rem; line-height: 1.5rem; } } .page-faq .q-wrapper h4 .chevron, .page-faq .q-wrapper .h4 .chevron, .mini-faq .q-wrapper h4 .chevron, .mini-faq .q-wrapper .h4 .chevron { position: absolute; top: 40px; right: 2rem; } .page-docs-index::before { background-position-x: right; } .page-docs-index .center-search .input-group-text { height: 56px; padding: 0.75rem 0.75rem 0.75rem 1rem; line-height: 2rem; } .page-docs-index .center-search .ds-input { height: 56px; padding: 0.75rem 1rem 0.75rem 0.5rem; } .page-docs-index #software-and-sdks .card-deck .card:nth-child(1) .card-footer { background-image: url(../img/cards/4col-green.svg); } .page-docs-index #software-and-sdks .card-deck .card:nth-child(2) .card-footer { background-image: url(../img/cards/4col-light-blue.svg); } .page-docs-index #software-and-sdks .card-deck .card:nth-child(3) .card-footer { background-image: url(../img/cards/4col-orange.svg); } .page-docs-index #software-and-sdks .card-deck .card:nth-child(4) .card-footer { background-image: url(../img/cards/4col-yellow.svg); } .page-docs-index #doc-types .card-deck .card:nth-child(1) .card-footer { background-image: url(../img/cards/4col-orange-yellow.svg); } .page-docs-index #doc-types .card-deck .card:nth-child(2) .card-footer { background-image: url(../img/cards/4col-magenta.svg); } .page-docs-index #doc-types .card-deck .card:nth-child(3) .card-footer { background-image: url(../img/cards/4col-blue-green.svg); } .page-docs-index #doc-types .card-deck .card:nth-child(4) .card-footer { background-image: url(../img/cards/4col-light-blue-2.svg); } .page-docs-index #docs-hot-topic .longform { margin-top: 2.5rem; } .page-docs-index #community-heading, .page-community #community-heading { padding-top: 25rem; } @media (max-width: 768px) { .page-docs-index #community-heading, .page-community #community-heading { padding-top: 31rem; } } .page-docs-index #community-heading .hero-title, .page-community #community-heading .hero-title { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .page-docs-index #community-heading, .page-community #community-heading { margin-top: 0px; } @media (min-width: 992px) { .page-docs-index #community-heading, .page-community #community-heading { padding-left: 0; } .page-docs-index #community-heading .hero-title, .page-community #community-heading .hero-title { min-width: max-content; bottom: -83%; } } .page-docs-index #community-heading .parallax, .page-community #community-heading .parallax { position: absolute; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -ms-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease; } .page-docs-index #community-heading .one, .page-community #community-heading .one { top: 160px; left: 0%; opacity: 0.4; } .page-docs-index #community-heading .two, .page-community #community-heading .two { top: 130px; left: 56%; height: 320px; opacity: 0.4; } .page-docs-index #community-heading .three, .page-community #community-heading .three { top: 145px; right: 16%; height: 67px; } .page-docs-index #community-heading .four, .page-community #community-heading .four { top: 374px; left: 8%; width: 107px; } .page-docs-index #community-heading .five, .page-community #community-heading .five { top: 476px; width: 152px; height: 102px; right: 5%; opacity: 0.4; } .page-docs-index #run-a-network-node .card-deck .card:nth-child(1) .card-footer, .page-community #run-a-network-node .card-deck .card:nth-child(1) .card-footer { background-image: url(../img/cards/4col-yellow-2.svg); } .page-docs-index #run-a-network-node .card-deck .card:nth-child(2) .card-footer, .page-community #run-a-network-node .card-deck .card:nth-child(2) .card-footer { background-image: url(../img/cards/4col-purple.svg); } .page-docs-index #run-a-network-node .card-deck .card:nth-child(3) .card-footer, .page-community #run-a-network-node .card-deck .card:nth-child(3) .card-footer { background-image: url(../img/cards/4col-magenta-2.svg); } .page-docs-index #run-a-network-node .card-deck .card:nth-child(4) .card-footer, .page-community #run-a-network-node .card-deck .card:nth-child(4) .card-footer { background-image: url(../img/cards/4col-light-green.svg); } .page-docs-index #run-a-network-node, .page-community #run-a-network-node { padding-bottom: 5rem; } @media (min-width: 576px) { .page-docs-index #run-a-network-node, .page-community #run-a-network-node { padding-top: 104px; padding-bottom: 104px; } } .page-docs-index #run-a-network-node .text-cards, .page-community #run-a-network-node .text-cards { grid-gap: 40px; } .page-docs-index #run-a-network-node .text-cards h6::before, .page-docs-index #run-a-network-node .text-cards .h6::before, .page-community #run-a-network-node .text-cards h6::before, .page-community #run-a-network-node .text-cards .h6::before { margin-top: 0; height: unset; } .page-docs-index #run-a-network-node .text-cards a, .page-community #run-a-network-node .text-cards a { font-size: 1.25rem; line-height: 26px; color: #fff; font-weight: bold; } .page-docs-index #run-a-network-node .text-cards a:hover, .page-community #run-a-network-node .text-cards a:hover { text-decoration: none; background: none !important; } .page-docs-index #run-a-network-node .text-cards .btn-arrow::after, .page-community #run-a-network-node .text-cards .btn-arrow::after { display: inline-block; content: url(../img/icons/arrow-right-purple.svg); vertical-align: middle; padding-left: 8px; -webkit-transition: transform 0.3s ease-out; -moz-transition: transform 0.3s ease-out; -ms-transition: transform 0.3s ease-out; -o-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; } .page-docs-index #xrpl-grants, .page-community #xrpl-grants { padding-bottom: 5rem; } @media (min-width: 576px) { .page-docs-index #xrpl-grants, .page-community #xrpl-grants { padding-top: 104px; padding-bottom: 104px; } } .page-docs-index #xrpl-blog, .page-community #xrpl-blog { padding-bottom: 5rem; } @media (min-width: 576px) { .page-docs-index #xrpl-blog, .page-community #xrpl-blog { padding-top: 104px; padding-bottom: 104px; } } .page-docs-index #xrpl-events, .page-community #xrpl-events { padding-bottom: 5rem; } @media (min-width: 576px) { .page-docs-index #xrpl-events, .page-community #xrpl-events { padding-top: 104px; padding-bottom: 104px; } } .page-docs-index #xrpl-careers, .page-community #xrpl-careers { padding-bottom: 5rem; } @media (min-width: 576px) { .page-docs-index #xrpl-careers, .page-community #xrpl-careers { padding-top: 104px; padding-bottom: 104px; } } .page-docs-index #xrpl-design-assets, .page-community #xrpl-design-assets { padding-bottom: 5rem; } @media (min-width: 576px) { .page-docs-index #xrpl-design-assets, .page-community #xrpl-design-assets { padding-top: 104px; padding-bottom: 208px; } } .page-community #platform-github { content: url("../img/logos/github.svg"); } .page-community #platform-twitch { content: url("../img/logos/twitch.svg"); } .page-community #platform-stack-overflow { content: url("../img/logos/stack-overflow.svg"); } .page-community #platform-twitter { content: url("../img/logos/twitter.svg"); } .page-community #platform-discord { content: url("../img/logos/discord.svg"); } .page-community #platform-youtube { content: url("../img/logos/youtube.svg"); } .page-community #platform-devto { content: url("../img/logos/devto.svg"); } .page-references #refs-types .card-deck .card:nth-child(1) .card-footer { background-image: url(../img/cards/3col-orange-2.svg); } .page-references #refs-types .card-deck .card:nth-child(2) .card-footer { background-image: url(../img/cards/3col-green-2.svg); } .page-references #refs-types .card-deck .card:nth-child(3) .card-footer { background-image: url(../img/cards/3col-magenta.svg); } .page-references #xrpl-protocol .card-deck .card:nth-child(1) .card-footer { background-image: url(../img/cards/4col-light-blue-4.svg); } .page-references #xrpl-protocol .card-deck .card:nth-child(2) .card-footer { background-image: url(../img/cards/4col-blue-green-2.svg); } .page-references #xrpl-protocol .card-deck .card:nth-child(3) .card-footer { background-image: url(../img/cards/4col-yellow-3.svg); } .page-references #xrpl-protocol .card-deck .card:nth-child(4) .card-footer { background-image: url(../img/cards/4col-purple-blue.svg); } .page-dev-tools #xrp-explorer .card-footer { background-image: url("../img/cards/3-col-orange.svg"); } .page-dev-tools #bithomp-explorer .card-footer { background-image: url("../img/cards/3-col-light-blue.svg"); } .page-dev-tools #xrpscan .card-footer { background-image: url("../img/cards/3-col-pink.svg"); } .page-dev-tools #token-list .card-footer { background-image: url("../img/cards/3-col-pink2.svg"); } .page-dev-tools #websocket .card-footer { background-image: url("../img/cards/3-col-purple2.svg"); } .page-dev-tools #rpc .card-footer { background-image: url("../img/cards/3-col-green.svg"); } .page-dev-tools #technical-explorer .card-footer { background-image: url("../img/cards/3-col-purple-blue.svg"); } .page-dev-tools #faucets .card-footer { background-image: url("../img/cards/3-col-pink2.svg"); } .page-dev-tools #trasaction-sender .card-footer { background-image: url("../img/cards/3-col-light-blue2.svg"); } .page-dev-tools #domain .card-footer { background-image: url("../img/cards/3-col-green-purple.svg"); } .page-dev-tools #xrp-ledger .card-footer { background-image: url("../img/cards/3-col-dark-blue.svg"); } .page-dev-tools #binary-visualizer .card-footer { background-image: url("../img/cards/3-col-purple-blue.svg"); } .page-dev-tools #token-metadata-lookup .card-footer { background-image: url("../img/cards/3-col-pink-purple.svg"); } .page-dev-tools .nav-link { color: #8A919A; background-color: #111112; border-top: none; border-left: none; border-right: none; border-bottom-color: #454549; } @media (max-width: 767.98px) { .page-dev-tools .nav-tabs { display: flex; list-style: none; margin-left: 0; padding-left: 0; justify-content: space-between; } .page-dev-tools .nav-item { display: inline-flex; width: auto; list-style: outside none none; } .page-dev-tools .nav-link { display: inline-flex; width: auto; padding: 1em 1em; } } .page-dev-tools .nav-link.active { border-bottom-color: #7649E3; color: #FFFFFF; font-weight: bold; } .page-dev-tools .nav-tabs { border-bottom: 1px solid #454549; } .page-dev-tools .btn { padding: 0.75rem; } html.light .page-dev-tools .nav-link { background-color: #F0F3F7; } html.light .page-dev-tools .nav-link.active { border-bottom-color: #7649E3; color: #141414; font-weight: bold; } html.light .page-dev-tools .nav-link { color: #141414; } html.light .page-dev-tools #trasaction-sender .card-footer { background-image: url("../img/cards/3-col-light-blue-2.svg"); } .page-rwa-tokenization .developer-tools { padding: 180px 0px; } .page-rwa-tokenization .right-arrow-item::after, .use-case-payments .right-arrow-item::after { display: inline-block; content: url("../img/icons/arrow-right-purple.svg"); position: relative; top: 1px; vertical-align: middle; padding-left: 8px; transition: transform 0.3s ease-out; } .page-rwa-tokenization #events-orange, .use-case-payments #events-orange { position: absolute; top: 0px; right: 0px; } .page-rwa-tokenization .token-title, .use-case-payments .token-title { color: var(--black-black-0-white, #FFF); text-align: center; font-size: 62px; font-style: normal; font-weight: 700; line-height: 70px; /* 112.903% */ max-width: 720px; z-index: 1; } @media (max-width: 575.98px) { .page-rwa-tokenization .token-title, .use-case-payments .token-title { line-height: 48px; font-size: 42px; text-align: left; } } .page-rwa-tokenization .token-title-container, .use-case-payments .token-title-container { gap: 32px; padding: 104px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .page-rwa-tokenization .token-title-container .button-container, .use-case-payments .token-title-container .button-container { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; align-items: center; } .page-rwa-tokenization .token-title-container .button-container .internal-link, .use-case-payments .token-title-container .button-container .internal-link { color: #9a52ff; font-size: 16px; font-style: normal; font-weight: 700; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; background: none !important; } @media (max-width: 767px) { .page-rwa-tokenization .token-title-container .button-container, .use-case-payments .token-title-container .button-container { padding-bottom: 0px; gap: 16px; flex-direction: column; width: 100%; } .page-rwa-tokenization .token-title-container .button-container .btn-primary.p-12, .use-case-payments .token-title-container .button-container .btn-primary.p-12 { width: 100%; } .page-rwa-tokenization .token-title-container .button-container .internal-link, .use-case-payments .token-title-container .button-container .internal-link { width: 100%; text-align: center; white-space: normal; } } .page-rwa-tokenization .token-title-container .button-container .btn-primary.p-12, .use-case-payments .token-title-container .button-container .btn-primary.p-12 { padding: 12px; } .page-rwa-tokenization .token-video-container, .use-case-payments .token-video-container { padding: 104px 64px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 48px; max-width: 1200px; margin: 0 auto; } @media (max-width: 767px) { .page-rwa-tokenization .token-video-container, .use-case-payments .token-video-container { padding-bottom: 0px; } } .page-rwa-tokenization .token-video-container .__button-container, .use-case-payments .token-video-container .__button-container { margin-top: 16px; } .page-rwa-tokenization .token-video-container .token-video, .use-case-payments .token-video-container .token-video { width: 50%; max-width: 602px; height: 372px; } .page-rwa-tokenization .token-video-container .token-video-text-container, .use-case-payments .token-video-container .token-video-text-container { max-width: 520px; width: 50%; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 24px; } .page-rwa-tokenization .token-video-container .token-video-text-container p, .use-case-payments .token-video-container .token-video-text-container p { color: var(--black-black-10-gray-200, #E0E0E1); font-size: 24px; font-style: normal; font-weight: 400; line-height: 32px; margin: 0; } @media (max-width: 1145px) { .page-rwa-tokenization .token-video-container, .use-case-payments .token-video-container { flex-direction: column; gap: 40px; padding: 80px 40px; max-width: 800px; } .page-rwa-tokenization .token-video-container .token-video, .use-case-payments .token-video-container .token-video { width: 100%; max-width: 100%; height: auto; aspect-ratio: 16/9; } .page-rwa-tokenization .token-video-container .token-video-text-container, .use-case-payments .token-video-container .token-video-text-container { width: 100%; max-width: 100%; align-items: flex-start; text-align: left; } .page-rwa-tokenization .token-video-container .token-video-text-container p, .use-case-payments .token-video-container .token-video-text-container p { font-size: 22px; line-height: 30px; } } @media (max-width: 767px) { .page-rwa-tokenization .token-video-container, .use-case-payments .token-video-container { padding: 60px 40px; gap: 32px; max-width: 100%; } .page-rwa-tokenization .token-video-container .token-video-text-container p, .use-case-payments .token-video-container .token-video-text-container p { font-size: 18px; line-height: 26px; } } .page-rwa-tokenization .token-cards-wrapper, .use-case-payments .token-cards-wrapper { display: flex; justify-content: center; } .page-rwa-tokenization .token-cards-container, .use-case-payments .token-cards-container { display: flex; padding: 100px 40px; flex-direction: column; justify-content: center; align-items: start; gap: 40px; max-width: 1280px; } @media (max-width: 767px) { .page-rwa-tokenization .token-cards-container, .use-case-payments .token-cards-container { padding-bottom: 0px; } } .page-rwa-tokenization .token-cards-container .cards-title-token, .use-case-payments .token-cards-container .cards-title-token { color: var(--black-black-0-white, #FFF); font-size: 32px; font-style: normal; font-weight: 700; line-height: 38px; max-width: 780px; /* 118.75% */ } .page-rwa-tokenization .token-cards-container .benefits-section, .use-case-payments .token-cards-container .benefits-section { display: flex; flex-direction: column; align-items: center; overflow: hidden; } .page-rwa-tokenization .token-cards-container .section-title, .use-case-payments .token-cards-container .section-title { font-size: 32px; color: var(--black-black-0-white, #fff); font-weight: 700; line-height: 38px; max-width: 776px; text-align: center; margin-bottom: 40px; } .page-rwa-tokenization .token-cards-container .benefits-container, .use-case-payments .token-cards-container .benefits-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; width: 100%; max-width: 1136px; } @media (max-width: 1399px) { .page-rwa-tokenization .token-cards-container .benefits-container, .use-case-payments .token-cards-container .benefits-container { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1145px) { .page-rwa-tokenization .token-cards-container .section-title, .use-case-payments .token-cards-container .section-title { font-size: 28px; line-height: 34px; } .page-rwa-tokenization .token-cards-container .benefits-container, .use-case-payments .token-cards-container .benefits-container { grid-template-columns: repeat(2, 1fr); gap: 32px; } .page-rwa-tokenization .token-cards-container .benefit-card, .use-case-payments .token-cards-container .benefit-card { padding: 24px; min-height: 280px; } } @media (max-width: 767px) { .page-rwa-tokenization .token-cards-container .benefits-container, .use-case-payments .token-cards-container .benefits-container { grid-template-columns: 1fr; gap: 24px; } .page-rwa-tokenization .token-cards-container .benefit-card, .use-case-payments .token-cards-container .benefit-card { padding: 20px; min-height: 240px; } } .page-rwa-tokenization .token-cards-container .benefit-card, .use-case-payments .token-cards-container .benefit-card { border-radius: 8px; background-color: var(--XRPL-Black-Black-80, #232325); display: flex; flex-direction: column; justify-content: flex-start; padding: 32px; min-height: 332px; } .page-rwa-tokenization .token-cards-container .benefit-icon, .use-case-payments .token-cards-container .benefit-icon { min-width: 40px; min-height: 40px; background-size: contain; background-repeat: no-repeat; } .page-rwa-tokenization .token-cards-container .benefit-icon.low-fees, .use-case-payments .token-cards-container .benefit-icon.low-fees { background-image: url(../img/tokenization/low-fees.png); } .page-rwa-tokenization .token-cards-container .benefit-icon.access, .use-case-payments .token-cards-container .benefit-icon.access { background-image: url(../img/tokenization/cross-chain.png); } .page-rwa-tokenization .token-cards-container .benefit-icon.native-compliance, .use-case-payments .token-cards-container .benefit-icon.native-compliance { background-image: url(../img/tokenization/native-compliance.png); } .page-rwa-tokenization .token-cards-container .benefit-icon.delegated-token-management, .use-case-payments .token-cards-container .benefit-icon.delegated-token-management { background-image: url(../img/tokenization/delegated-token-management.png); } .page-rwa-tokenization .token-cards-container .benefit-title, .use-case-payments .token-cards-container .benefit-title { color: var(--black-black-0-white, #fff); font-size: 20px; font-weight: 700; line-height: 26px; margin-top: -10px; } .page-rwa-tokenization .token-cards-container .benefit-description, .use-case-payments .token-cards-container .benefit-description { color: var(--Black-Black-20, #e0e0e1); font-size: 16px; font-weight: 400; line-height: 24px; margin-top: 16px; } @media (max-width: 991px) { .page-rwa-tokenization .token-cards-container .benefit-card, .use-case-payments .token-cards-container .benefit-card { padding: 20px; } } .page-rwa-tokenization .upcoming-events, .use-case-payments .upcoming-events { display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 100px 40px; max-width: 1200px; width: 100%; } @media (max-width: 767px) { .page-rwa-tokenization .upcoming-events, .use-case-payments .upcoming-events { padding-bottom: 0px; padding-top: 0px; } } .page-rwa-tokenization .upcoming-events__title, .use-case-payments .upcoming-events__title { max-width: 630px; align-self: stretch; color: #fff; font: 700 32px/38px Work Sans, -apple-system, Roboto, Helvetica, sans-serif; margin-bottom: 64px; } @media (max-width: 767px) { .page-rwa-tokenization .upcoming-events__title, .use-case-payments .upcoming-events__title { text-align: left; } } .page-rwa-tokenization .upcoming-events__logo-container, .use-case-payments .upcoming-events__logo-container { display: flex; align-items: center; gap: 60px; justify-content: center; flex-wrap: wrap; } .page-rwa-tokenization .token-events-wrapper, .use-case-payments .token-events-wrapper { padding-top: 0px; display: flex; justify-content: center; } .page-rwa-tokenization .company-logo, .use-case-payments .company-logo { flex: 0 0 auto; width: 140px; aspect-ratio: var(--aspect-ratio); background-size: contain; background-repeat: no-repeat; background-position: center; } @media (max-width: 991px) { .page-rwa-tokenization .upcoming-events__title, .use-case-payments .upcoming-events__title { margin-bottom: 40px; } .page-rwa-tokenization .upcoming-events, .use-case-payments .upcoming-events { text-align: center; } .page-rwa-tokenization .upcoming-events__logo-container, .use-case-payments .upcoming-events__logo-container { justify-content: center; } } @media (max-width: 575.98px) { .page-rwa-tokenization .small-100, .use-case-payments .small-100 { /* Applies only on screens smaller than Bootstrap's `sm` breakpoint */ width: 100%; } } .page-rwa-tokenization .company-logo, .use-case-payments .company-logo { cursor: pointer; flex: 0 0 auto; max-width: 140px; aspect-ratio: var(--aspect-ratio); background-size: contain; background-repeat: no-repeat; background-position: center; } .page-rwa-tokenization .company-logo.zoniqx, .use-case-payments .company-logo.zoniqx { background-image: url(../img/tokenization/zoniqx.png); } .page-rwa-tokenization .company-logo.archax, .use-case-payments .company-logo.archax { background-image: url(../img/tokenization/archax.png); } .page-rwa-tokenization .company-logo.palisade, .use-case-payments .company-logo.palisade { background-image: url(../img/tokenization/palisade.png); } .page-rwa-tokenization .company-logo.axiology, .use-case-payments .company-logo.axiology { background-image: url(../img/tokenization/axiology.png); } .page-rwa-tokenization .company-logo.open-eden, .use-case-payments .company-logo.open-eden { background-image: url(../img/tokenization/open-eden.png); } .page-rwa-tokenization .company-logo.ondo, .use-case-payments .company-logo.ondo { background-image: url(../img/tokenization/ondo.png); } .page-rwa-tokenization .company-logo.meld, .use-case-payments .company-logo.meld { background-image: url(../img/tokenization/meld.png); } .page-rwa-tokenization .company-logo.ripple-logo, .use-case-payments .company-logo.ripple-logo { background-image: url(../img/tokenization/ripple-logo.png); } .page-rwa-tokenization .company-logo.hidden-road, .use-case-payments .company-logo.hidden-road { background-image: url(../img/tokenization/hidden-road.png); } .page-rwa-tokenization .company-logo, .use-case-payments .company-logo { max-height: 66px; max-width: 100px; width: 100%; height: 100%; } .page-rwa-tokenization, .use-case-payments { /* Developer tools styles - shared between tokenization and payments pages */ } .page-rwa-tokenization .token-developer-tools-section .developer-tools, .page-rwa-tokenization .payments-integration-section .developer-tools, .use-case-payments .token-developer-tools-section .developer-tools, .use-case-payments .payments-integration-section .developer-tools { color: #fff; } .page-rwa-tokenization .token-developer-tools-section .developer-tools__header, .page-rwa-tokenization .payments-integration-section .developer-tools__header, .use-case-payments .token-developer-tools-section .developer-tools__header, .use-case-payments .payments-integration-section .developer-tools__header { margin-bottom: 64px; } .page-rwa-tokenization .token-developer-tools-section .developer-tools__title, .page-rwa-tokenization .payments-integration-section .developer-tools__title, .use-case-payments .token-developer-tools-section .developer-tools__title, .use-case-payments .payments-integration-section .developer-tools__title { font-size: 32px; font-weight: 700; line-height: 1; margin-bottom: 24px; } .page-rwa-tokenization .token-developer-tools-section .developer-tools__description, .page-rwa-tokenization .payments-integration-section .developer-tools__description, .use-case-payments .token-developer-tools-section .developer-tools__description, .use-case-payments .payments-integration-section .developer-tools__description { font-size: 16px; line-height: 24px; } .page-rwa-tokenization .token-developer-tools-section .developer-tools__list, .page-rwa-tokenization .payments-integration-section .developer-tools__list, .use-case-payments .token-developer-tools-section .developer-tools__list, .use-case-payments .payments-integration-section .developer-tools__list { list-style: none; padding: 0; margin: 0; } .page-rwa-tokenization .token-developer-tools-section .feature-item a:hover, .page-rwa-tokenization .payments-integration-section .feature-item a:hover, .use-case-payments .token-developer-tools-section .feature-item a:hover, .use-case-payments .payments-integration-section .feature-item a:hover { text-decoration: none; } .page-rwa-tokenization .token-developer-tools-section .feature-item, .page-rwa-tokenization .payments-integration-section .feature-item, .use-case-payments .token-developer-tools-section .feature-item, .use-case-payments .payments-integration-section .feature-item { margin-bottom: 16px; cursor: pointer; } .page-rwa-tokenization .token-developer-tools-section .feature-item__content, .page-rwa-tokenization .payments-integration-section .feature-item__content, .use-case-payments .token-developer-tools-section .feature-item__content, .use-case-payments .payments-integration-section .feature-item__content { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; cursor: pointer; } .page-rwa-tokenization .token-developer-tools-section .feature-item__content:hover .right-arrow-item::after, .page-rwa-tokenization .payments-integration-section .feature-item__content:hover .right-arrow-item::after, .use-case-payments .token-developer-tools-section .feature-item__content:hover .right-arrow-item::after, .use-case-payments .payments-integration-section .feature-item__content:hover .right-arrow-item::after { transform: translateX(4px); /* Moves the arrow 4px to the right on hover */ } .page-rwa-tokenization .token-developer-tools-section .feature-item__title, .page-rwa-tokenization .payments-integration-section .feature-item__title, .use-case-payments .token-developer-tools-section .feature-item__title, .use-case-payments .payments-integration-section .feature-item__title { font-size: 16px; color: #e0e0e1; cursor: pointer; } .page-rwa-tokenization .token-developer-tools-section .feature-item__icon, .page-rwa-tokenization .payments-integration-section .feature-item__icon, .use-case-payments .token-developer-tools-section .feature-item__icon, .use-case-payments .payments-integration-section .feature-item__icon { width: 24px; height: 24px; object-fit: contain; } .page-rwa-tokenization .token-developer-tools-section .feature-item__divider, .page-rwa-tokenization .payments-integration-section .feature-item__divider, .use-case-payments .token-developer-tools-section .feature-item__divider, .use-case-payments .payments-integration-section .feature-item__divider { height: 1px; opacity: 0.3; background-color: #fff; } .page-rwa-tokenization .token-developer-tools-section .developer-tools__image, .page-rwa-tokenization .payments-integration-section .developer-tools__image, .use-case-payments .token-developer-tools-section .developer-tools__image, .use-case-payments .payments-integration-section .developer-tools__image { width: 110%; height: 124%; background-image: url("../img/tokenization/graphic.png"); background-size: contain; background-repeat: no-repeat; background-position: center; } .page-rwa-tokenization .token-developer-tools-section .m-h-300, .page-rwa-tokenization .payments-integration-section .m-h-300, .use-case-payments .token-developer-tools-section .m-h-300, .use-case-payments .payments-integration-section .m-h-300 { min-height: 300px; } @media (max-width: 991px) { .page-rwa-tokenization .token-developer-tools-section .developer-tools, .page-rwa-tokenization .payments-integration-section .developer-tools, .use-case-payments .token-developer-tools-section .developer-tools, .use-case-payments .payments-integration-section .developer-tools { padding: 50px 40px; } .page-rwa-tokenization .token-developer-tools-section .developer-tools__header, .page-rwa-tokenization .payments-integration-section .developer-tools__header, .use-case-payments .token-developer-tools-section .developer-tools__header, .use-case-payments .payments-integration-section .developer-tools__header { margin-bottom: 40px; } } .page-rwa-tokenization .token-features-section .rwa-tokenization, .use-case-payments .token-features-section .rwa-tokenization { padding: 100px 40px; padding-top: 0px; color: #fff; } .page-rwa-tokenization .token-features-section .container, .use-case-payments .token-features-section .container { max-width: 1200px; margin: 0 auto; } .page-rwa-tokenization .token-features-section .rwa-header, .use-case-payments .token-features-section .rwa-header { text-align: start; margin-bottom: 40px; } .page-rwa-tokenization .token-features-section .rwa-title, .use-case-payments .token-features-section .rwa-title { font-size: 32px; font-weight: 700; line-height: 38px; } .page-rwa-tokenization .token-features-section .cta-container, .use-case-payments .token-features-section .cta-container { display: flex; justify-content: flex-start; gap: 24px; } .page-rwa-tokenization .token-features-section .btn, .use-case-payments .token-features-section .btn { font-size: 16px; font-weight: 700; padding: 8px 16px; border-radius: 4px; text-decoration: none; } .page-rwa-tokenization .token-features-section .btn-primary, .use-case-payments .token-features-section .btn-primary { background-color: #7919ff; color: #fff; } .page-rwa-tokenization .token-features-section .btn-link, .use-case-payments .token-features-section .btn-link { color: #9a52ff; } @media (max-width: 991px) { .page-rwa-tokenization .token-features-section .auto-bridge, .use-case-payments .token-features-section .auto-bridge { padding: 18px !important; } .page-rwa-tokenization .token-features-section .rwa-tokenization, .use-case-payments .token-features-section .rwa-tokenization { padding: 50px 20px; } .page-rwa-tokenization .token-features-section .feature-grid, .use-case-payments .token-features-section .feature-grid { gap: 20px; } .page-rwa-tokenization .token-features-section .cta-container, .use-case-payments .token-features-section .cta-container { flex-direction: column; align-items: center; } } .page-rwa-tokenization .token-features-section .feature-grid, .use-case-payments .token-features-section .feature-grid { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; margin-bottom: 20px; } .page-rwa-tokenization .token-features-section .feature-grid .feature-card, .use-case-payments .token-features-section .feature-grid .feature-card { flex: 1 0 100%; max-width: 100%; margin-bottom: 20px; position: relative; } @media (min-width: 768px) { .page-rwa-tokenization .token-features-section .feature-grid .feature-card, .use-case-payments .token-features-section .feature-grid .feature-card { flex: 1 0 calc(50% - 40px); max-width: calc(50% - 40px); } } @media (min-width: 1200px) { .page-rwa-tokenization .token-features-section .feature-grid .feature-card, .use-case-payments .token-features-section .feature-grid .feature-card { flex: 1 0 calc(25% - 30px); max-width: calc(25% - 30px); } } .page-rwa-tokenization .token-features-section .feature-card:hover .right-arrow-item::after, .use-case-payments .token-features-section .feature-card:hover .right-arrow-item::after { transform: translateX(4px); /* Moves the arrow 4px to the right on hover */ } .page-rwa-tokenization .token-features-section .feature-header, .use-case-payments .token-features-section .feature-header { margin-bottom: 16px; position: relative; } .page-rwa-tokenization .token-features-section .feature-title, .use-case-payments .token-features-section .feature-title { display: flex; align-items: flex-start; justify-content: space-between; font-size: 20px; font-weight: 700; line-height: 26px; color: #fff; width: 100%; flex-wrap: wrap; } @media (max-width: 767px) { .page-rwa-tokenization .token-features-section .feature-title, .use-case-payments .token-features-section .feature-title { padding-right: 30px; flex-wrap: nowrap; justify-content: flex-start; } } @media (min-width: 768px) and (max-width: 1199px) { .page-rwa-tokenization .token-features-section .feature-title, .use-case-payments .token-features-section .feature-title { flex-wrap: nowrap; padding-right: 30px; justify-content: flex-start; } } .page-rwa-tokenization .token-features-section .feature-icon, .use-case-payments .token-features-section .feature-icon { width: 16px; height: 16px; margin-left: 8px; } .page-rwa-tokenization .token-features-section .feature-description, .use-case-payments .token-features-section .feature-description { font-size: 16px; line-height: 24px; color: #e0e0e1; } .page-rwa-tokenization .max-w-1150, .use-case-payments .max-w-1150 { max-width: 1150px !important; } .page-rwa-tokenization .custom-gap, .use-case-payments .custom-gap { justify-content: start !important; } .page-rwa-tokenization .mt-16, .use-case-payments .mt-16 { margin-top: 16px; } .page-rwa-tokenization .com-card, .use-case-payments .com-card { min-width: auto !important; padding: 40px !important; height: fit-content; max-height: 388px !important; } .page-rwa-tokenization .section-padding, .use-case-payments .section-padding { padding: 100px 40px; } .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding { display: flex !important; flex-wrap: wrap !important; gap: 32px; max-width: 1200px; margin: 80px auto; padding: 0px; justify-content: center; } @media (min-width: 768px) { .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding { gap: 40px; justify-content: space-between; } } @media (max-width: 767px) { .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding { flex-direction: column; gap: 20px; margin: 40px auto; padding: 0px; } } .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card { flex: 1 !important; position: relative; margin: 0 !important; } @media (min-width: 768px) { .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card { flex: 1 1 calc(50% - 20px); max-width: calc(50% - 20px); min-width: calc(50% - 20px); width: auto; } } @media (max-width: 767px) { .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card { width: 100% !important; max-width: 100% !important; min-width: 100% !important; margin-bottom: 0 !important; flex: none !important; } } .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content { display: flex; flex-direction: column; height: 100%; } .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content .card-description, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content .card-description { flex-grow: 1; margin-bottom: 24px; max-width: 560px; } @media (max-width: 767px) { .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content .card-description, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content .card-description { margin-bottom: 20px; } } .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content .card-links, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content .card-links { margin-top: auto; } @media (max-width: 767px) { .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content .card-links, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content .card-links { margin-top: 16px; } .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content .card-links .com-card-link, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content .card-links .com-card-link { display: block; margin-bottom: 12px; } .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content .card-links .com-card-link:last-child, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content .card-links .com-card-link:last-child { margin-bottom: 0; } } .page-rwa-tokenization .developer-resources-section.single-card .bottom-cards-section.bug-bounty.section-padding, .use-case-payments .developer-resources-section.single-card .bottom-cards-section.bug-bounty.section-padding { gap: 0 !important; } @media (max-width: 767px) { .page-rwa-tokenization .developer-resources-section.single-card .bug-bounty-card-bg-2, .use-case-payments .developer-resources-section.single-card .bug-bounty-card-bg-2 { content: url("../img/community/bug-bounty-card-bg-2-mobile.png"); } } .page-rwa-tokenization .developer-resources-section.single-card .com-card, .use-case-payments .developer-resources-section.single-card .com-card { font-size: 24px; max-height: 288px !important; } @media (max-width: 768px) { .page-rwa-tokenization .developer-resources-section.single-card .com-card, .use-case-payments .developer-resources-section.single-card .com-card { min-height: 493px !important; } } @media (min-width: 768px) { .page-rwa-tokenization .developer-resources-section.single-card .com-card, .use-case-payments .developer-resources-section.single-card .com-card { flex: 1 1 100% !important; max-width: 100% !important; min-width: 100% !important; } } .page-rwa-tokenization .developer-resources-section.single-card .com-card .bottom-right-img.bug-bounty-card-bg-2, .use-case-payments .developer-resources-section.single-card .com-card .bottom-right-img.bug-bounty-card-bg-2 { height: 714px; width: auto; object-fit: cover; object-position: right bottom; } .page-rwa-tokenization .developer-resources-section.single-card .com-card .card-content, .use-case-payments .developer-resources-section.single-card .com-card .card-content { gap: 0; } .page-rwa-tokenization .developer-resources-section.single-card .com-card .card-content .card-title, .use-case-payments .developer-resources-section.single-card .com-card .card-content .card-title { margin-bottom: 24px; margin-top: 0; } .page-rwa-tokenization .developer-resources-section.single-card .com-card .card-content .card-description, .use-case-payments .developer-resources-section.single-card .com-card .card-content .card-description { margin-bottom: 24px; margin-top: 0; flex-grow: 0; padding: 0; } .page-rwa-tokenization .developer-resources-section.single-card .com-card .card-content .card-links, .use-case-payments .developer-resources-section.single-card .com-card .card-content .card-links { margin-top: 0; margin-bottom: 0; } .page-rwa-tokenization .token-utility-section, .use-case-payments .token-utility-section { padding: 100px 40px; } @media (max-width: 767px) { .page-rwa-tokenization .token-utility-section, .use-case-payments .token-utility-section { padding-bottom: 0px; } } .page-rwa-tokenization .token-utility-section .section-title, .use-case-payments .token-utility-section .section-title { font-size: 32px; font-weight: 700; line-height: 38px; text-align: start; margin-bottom: 64px; color: #FFFFFF; } .page-rwa-tokenization .token-utility-section .utility-grid, .use-case-payments .token-utility-section .utility-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } @media (max-width: 1199px) { .page-rwa-tokenization .token-utility-section .utility-grid, .use-case-payments .token-utility-section .utility-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .page-rwa-tokenization .token-utility-section .utility-grid, .use-case-payments .token-utility-section .utility-grid { grid-template-columns: 1fr; } } .page-rwa-tokenization .token-utility-section .utility-card .utility-title, .use-case-payments .token-utility-section .utility-card .utility-title { font-size: 20px; font-weight: 700; line-height: 26px; margin-bottom: 16px; color: #FFFFFF; } .page-rwa-tokenization .token-utility-section .utility-card .utility-description, .use-case-payments .token-utility-section .utility-card .utility-description { font-size: 16px; line-height: 24px; color: #E6EAF0; } .page-rwa-tokenization .token-utility-section .utility-card .utility-description a, .use-case-payments .token-utility-section .utility-card .utility-description a { color: #7649E3; text-decoration: none; } .page-rwa-tokenization .token-utility-section .utility-card .utility-description a:hover, .use-case-payments .token-utility-section .utility-card .utility-description a:hover { text-decoration: underline; } .json-view { display: block; color: #4d4d4d; text-align: left; --json-property: #009033; --json-index: #676dff; --json-number: #676dff; --json-string: #b2762e; --json-boolean: #dc155e; --json-null: #dc155e; } .json-view .json-view--property { color: var(--json-property); } .json-view .json-view--index { color: var(--json-index); } .json-view .json-view--number { color: var(--json-number); } .json-view .json-view--string { color: var(--json-string); } .json-view .json-view--boolean { color: var(--json-boolean); } .json-view .json-view--null { color: var(--json-null); } .json-view .jv-indent { padding-left: 1em; } .json-view .jv-chevron { display: inline-block; vertical-align: -20%; cursor: pointer; opacity: 0.4; width: 1em; height: 1em; } :is(.json-view .jv-chevron:hover, .json-view .jv-size:hover + .jv-chevron) { opacity: 0.8; } .json-view .jv-size { cursor: pointer; opacity: 0.4; font-size: 0.875em; font-style: italic; margin-left: 0.5em; vertical-align: -5%; line-height: 1; } .json-view :is(.json-view--copy, .json-view--edit), .json-view .json-view--link svg { display: none; width: 1em; height: 1em; margin-left: 0.25em; cursor: pointer; } .json-view .json-view--input { width: 120px; margin-left: 0.25em; border-radius: 4px; border: 1px solid currentColor; padding: 0px 4px; font-size: 87.5%; line-height: 1.25; background: transparent; } .json-view .json-view--deleting { outline: 1px solid #da0000; background-color: rgba(218, 0, 0, 0.0666666667); text-decoration-line: line-through; } :is(.json-view:hover, .json-view--pair:hover) > :is(.json-view--copy, .json-view--edit), :is(.json-view:hover, .json-view--pair:hover) > .json-view--link svg { display: inline-block; } .json-view .jv-button { background: transparent; outline: none; border: none; cursor: pointer; color: inherit; } .json-view .cursor-pointer { cursor: pointer; } .json-view svg { vertical-align: -10%; } .jv-size-chevron ~ svg { vertical-align: -16%; } /* Themes */ .json-view_a11y { color: #545454; --json-property: #aa5d00; --json-index: #007299; --json-number: #007299; --json-string: #008000; --json-boolean: #d91e18; --json-null: #d91e18; } .json-view_github { color: #005cc5; --json-property: #005cc5; --json-index: #005cc5; --json-number: #005cc5; --json-string: #032f62; --json-boolean: #005cc5; --json-null: #005cc5; } .json-view_vscode { color: #005cc5; --json-property: #0451a5; --json-index: #0000ff; --json-number: #0000ff; --json-string: #a31515; --json-boolean: #0000ff; --json-null: #0000ff; } .json-view_atom { color: #383a42; --json-property: #e45649; --json-index: #986801; --json-number: #986801; --json-string: #50a14f; --json-boolean: #0184bc; --json-null: #0184bc; } .json-view_winter-is-coming { color: #0431fa; --json-property: #3a9685; --json-index: #ae408b; --json-number: #ae408b; --json-string: #8123a9; --json-boolean: #0184bc; --json-null: #0184bc; } .json-view { font-family: "Tobias", "Noto Serif", monospace; padding: 1em; background: #232325; overflow: hidden; color: #F0F3F7 !important; font-size: 14px; letter-spacing: 0; } .json-view svg { height: 11px !important; color: #F0F3F7; } .jv-button { color: #FF6719 !important; font-size: 14px; } .jv-indent { border-left: 1px solid #454549; margin: 4px; } /* stylelint-disable selector-class-pattern -- react18-json-view uses these */ .json-view--boolean { color: #F18DA5 !important; } .json-view--pair { margin: 4px; } .json-view--property { color: #F0F3F7 !important; } .json-view--null, .json-view--undefined { display: inline-block; padding: 1px 2px; border-radius: 3px; background-color: #454549; color: #F0F3F7 !important; font-size: 11px; } .json-view--number { color: #70EE97 !important; } .json-view--string { color: #FF6719 !important; } /* stylelint-enable selector-class-pattern */ .rpc-tool .nav-link { cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 6px 9px; } .dev-blog .image-container { transform: translateY(15%); z-index: 1; } .dev-blog .text-bg { background-color: #232325; padding: 60px 40px; width: 100%; border-radius: 30px; } @media (min-width: 992px) { .dev-blog .image-container { transform: translateX(15%); } .dev-blog .text-bg { padding: 50px 60px; } } .dev-blog .line-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .dev-blog #blog-purple { position: absolute; top: 0px; left: 0px; } .dev-blog .card-date { color: #8A919A; } .dev-blog .hero-post-date { text-decoration: overline solid #32E685 10%; } .dev-blog .general .category-list img { content: url("../img/blog/general.png"); max-width: 100%; width: 100%; } .dev-blog .general .category-list .label { width: fit-content; } .dev-blog .developer_reflections .category-list img { content: url("../img/blog/developer_reflections.png"); max-width: 100%; width: 100%; } .dev-blog .developer_reflections .category-list .label { width: fit-content; } .dev-blog .amendments .category-list img { content: url("../img/blog/amendments.png"); max-width: 100%; width: 100%; } .dev-blog .amendments .category-list .label { width: fit-content; } .dev-blog .case_study .category-list img { content: url("../img/blog/case_study.png"); max-width: 100%; width: 100%; } .dev-blog .case_study .category-list .label { width: fit-content; } .dev-blog .advisories .category-list img { content: url("../img/blog/advisories.png"); max-width: 100%; width: 100%; } .dev-blog .advisories .category-list .label { width: fit-content; } .dev-blog .release_notes .category-list img { content: url("../img/blog/release_notes.png"); max-width: 100%; width: 100%; } .dev-blog .release_notes .category-list .label { width: fit-content; } .dev-blog .development .category-list img { content: url("../img/blog/development.png"); max-width: 100%; width: 100%; } .dev-blog .development .category-list .label { width: fit-content; } .dev-blog .gateway_bulletins .category-list img { content: url("../img/blog/gateway_bulletins.png"); max-width: 100%; width: 100%; } .dev-blog .gateway_bulletins .category-list .label { width: fit-content; } .dev-blog .features .category-list img { content: url("../img/blog/features.png"); max-width: 100%; width: 100%; } .dev-blog .features .category-list .label { width: fit-content; } .dev-blog .security .category-list img { content: url("../img/blog/security.png"); max-width: 100%; width: 100%; } .dev-blog .security .category-list .label { width: fit-content; } @media (min-width: 768px) and (max-width: 991px) { .dev-blog .category-list { display: block; } .dev-blog .category-list img { display: block; margin-bottom: 10px; } .dev-blog .category-list .label { display: block !important; margin-bottom: 15px; } } .dev-blog .category_sidebar { position: sticky; top: 80px; } .dev-blog .category-checkbox { display: flex; align-items: center; } .dev-blog .dropdown { position: relative; display: inline-block; } .dev-blog .dropdown-btn { color: #FFFFFF; background-color: #232325; border-color: #232325; border-style: solid; border-radius: 4px; padding: 8px 16px; font-size: 16px; cursor: pointer; text-align: start; padding-right: 10px; } .dev-blog .dropdown-btn img { content: url("../img/icons/chevron-arrow-down.svg"); width: 10px; height: 13px; padding: 8px; } .dev-blog .dropdown-content { display: flex; align-items: start; background-color: #232325; padding: 16px 8px; width: 254px; height: auto; border-radius: 4px; } .dev-blog .category-checkbox label { font-weight: normal; font-size: 14px; margin: 0; padding-left: 26px; } .dev-blog .category-header { font-weight: normal; width: 200px; color: #F0F3F7; } .dev-blog label { margin: 0; padding-left: 8px; color: #FFFFFF; } .dev-blog .blog-filter h6, .dev-blog .blog-filter .h6 { font-size: 16px; } .dev-blog .blog-filter[type=checkbox]::before { position: relative; display: block; width: 20px; height: 20px; content: ""; background: #111112; border-radius: 4px; border-width: 2px; border-style: solid; border-color: #8A919A; } .dev-blog .blog-filter[type=checkbox]::after { position: relative; display: block; top: -20px; width: 20px; height: 20px; content: ""; background-repeat: no-repeat; background-position: center; border-radius: 4px; border-width: 2px; border-style: solid; border-color: #8A919A; } .dev-blog .blog-filter[type=checkbox]:checked::before { background: #111112; border: none; border-radius: 0; } .dev-blog .blog-filter[type=checkbox]:checked::after { background-image: url(../img/blog/blog-check.svg); background-repeat: no-repeat; background-position: center; background-color: #5429A1; border-width: 2px; border-style: solid; border-color: #5429A1; border-radius: 4px; } .dev-blog .blog-filter[type=checkbox]:not(:disabled):checked:hover::after { background-image: url(../img/blog/blog-check.svg); background-repeat: no-repeat; background-position: center; border-width: 2px; border-style: solid; border-color: #C0A7FF; border-radius: 4px; } .dev-blog .blog-filter[type=checkbox]:not(:disabled):hover::before { background: #111112; border: none; border-radius: 0; } .dev-blog .blog-filter[type=checkbox]:not(:disabled):hover::after { background: #111112; border: none; border-width: 2px; border-style: solid; border-color: #C0A7FF; border-radius: 4px; } #feedback-content .docked-widget { border: none !important; background-color: transparent !important; position: static !important; box-shadow: none !important; width: auto !important; } #feedback-content .widget-form-wrapper { position: static !important; box-shadow: none !important; display: block; background-color: #232325 !important; border-width: 0 !important; padding: 24px !important; border-radius: 8px !important; } #feedback-content .widget-form-wrapper div { background-color: #232325 !important; } #feedback-content .widget-form-wrapper textarea { background-color: #FFFFFF !important; opacity: 1 !important; border: none !important; border-radius: 4px !important; margin: 0 !important; width: 100% !important; color: #141414 !important; } #feedback-content .widget-form-wrapper .widget-header-title { background: none !important; flex-grow: 0 !important; padding-right: 1rem !important; height: auto !important; padding: 0 !important; margin-bottom: 10px !important; } #feedback-content .widget-form-wrapper .widget-header-footer { background: none !important; } #feedback-content .widget-form-wrapper .widget-form-footer { padding-right: 0 !important; } #feedback-content .widget-form-wrapper .submit { background-color: #5429A1 !important; font-weight: bold !important; color: #FFFFFF !important; border: none !important; border-color: transparent !important; border-radius: 4px !important; margin: 0 !important; margin-top: 8px !important; } #feedback-content .widget-form-wrapper .submit:hover { background: #C0A7FF !important; } #feedback-content .widget-form-wrapper .submit.disabled, #feedback-content .widget-form-wrapper .submit[disabled=disabled] { background-color: #7649E3 !important; } #feedback-content .widget-form-wrapper .submit.disabled:hover, #feedback-content .widget-form-wrapper .submit[disabled=disabled]:hover { background-color: #7649E3 !important; } #feedback-content .widget-form-wrapper .cancel { margin: 0 !important; margin-top: 8px !important; color: #C0A7FF !important; font-weight: 600 !important; } #feedback-content #closeFeedback { display: none; } #feedback-content .widget-helpful .widget-header { background-color: #232325 !important; border-radius: 8px !important; } #feedback-content .widget-helpful .widget-header-title { color: #FFFFFF !important; } .video-image { transition: all 0.35s ease-out; cursor: pointer; } .video-image:hover { -webkit-transform: translateY(-16px); -moz-transform: translateY(-16px); -ms-transform: translateY(-16px); -o-transform: translateY(-16px); transform: translateY(-16px); } #video-overlay { position: fixed; top: 0; left: 0; z-index: 1190; height: 100%; width: 100%; background: #ffffff; opacity: 0.6; display: none; } #video { display: none; position: fixed; top: 10%; left: 15%; width: 70%; z-index: 1200; } #video-container { position: relative; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 982px; padding: 0 20px; } #videoWrapper { position: absolute; top: 0; left: 0; height: calc(90vh - 100px); width: 80vw; } #videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-external-link { color: #7649E3; font-weight: 600; } .video-external-link::after { content: " "; background-image: url(../img/icons/arrow-up-right.svg); background-repeat: no-repeat; display: inline-block; background-size: 24px; padding: 9px 4px 0 8px; width: 2rem; background-position: left 8px bottom 0px; transition: background-position 100ms ease-in-out; } .video-external-link.video-external-link:hover::after { background-position: left 12px bottom 8px; } .video-title { line-height: 1.2; } @media (min-width: 576px) { .video-title { font-size: 1rem; } } @media (max-width: 768px) { .page-community .sm-align-items-start { align-items: start !important; } } .page-community .numbers-animation { width: 218px; height: 96px; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .page-community .bounce-arrow { animation: bounce 1.5s infinite; animation-timing-function: ease-in-out; height: 26px; width: 26px; position: relative; top: 24px; } .page-community .m-gif { height: 108px; } .page-community .middle-image { margin: 0 auto; height: 35px; } .page-community .bg-hero { width: 100%; height: 635px; } .page-community #center-image { cursor: pointer; } .page-community .gradient-num-three { background: linear-gradient(35deg, #84F0B6 -0.3%, #B480FF 99.7%); -webkit-background-clip: text; background-clip: text; color: transparent; } .page-community .middle-image-two { margin: 0 auto; height: 52px; } .page-community .gradient-num-two { background: linear-gradient(35deg, #EA80FF -0.3%, #80CCFF 99.7%); -webkit-background-clip: text; background-clip: text; color: transparent; } .page-community .gradient-num { background: linear-gradient(35deg, #B480FF -0.3%, #FFAA80 99.7%); -webkit-background-clip: text; background-clip: text; color: transparent; } .page-community .surround-gradient { background: linear-gradient(35deg, #B480FF -0.3%, #FFAA80 99.7%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 40px; font-weight: 400; } .page-community .surround-gradient-two { background: linear-gradient(35deg, #EA80FF -0.3%, #80CCFF 99.7%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 40px; font-weight: 400; } .page-community .surround-gradient-three { background: linear-gradient(35deg, #84F0B6 -0.3%, #B480FF 99.7%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 40px; font-weight: 400; } .page-community .main-title { color: var(--black-black-0, #FFF); text-align: center; /* Desktop / H1 */ font-family: "Tobias", "Noto Serif", monospace; font-size: 62px; font-style: normal; font-weight: 700; line-height: 70px; } @media (max-width: 768px) { .page-community .main-title { font-size: 42px; line-height: 52px; text-align: left; } } .page-community .get-funding-btn { width: 90%; margin: 0 auto; } @media (max-width: 768px) { .page-community .cd-none-sm { display: none !important; } } @media (min-width: 769px) { .page-community .cd-none-lg { display: none !important; } } .page-community .icon-date { padding-right: 4px; content: url(../img/events/event-date.svg); } .page-community .icon-location { padding-right: 4px; content: url(../img/events/event-location.svg); } .page-community .builders-wrap { white-space: nowrap; } @media (min-width: 768px) { .page-community .builders-wrap { white-space: normal; } } .page-community #community-table { padding: 20px 93px; max-width: 1280px; margin: 0 auto; border-radius: 5px; padding-top: 165px; } @media (min-width: 992px) { .page-community #community-table { padding-top: 512px; } } @media (max-width: 768px) { .page-community #community-table { margin: 0; padding: 20px; margin-top: 100px !important; } } .page-community .eyebrow-convo { text-align: start; font-size: 20px; font-style: normal; font-weight: 700; line-height: 26px; padding-bottom: 5px; /* 130% */ } .page-community .final-tr { border: none !important; } .page-community #community-table h4, .page-community #community-table .h4 { text-align: start; margin: 10px 0; font-size: 32px; font-style: normal; font-weight: 700; line-height: 38px; /* 118.75% */ } .page-community #community-table table { width: 100%; margin-top: 31px; border-collapse: collapse; } .page-community #community-table tr { padding: 10px 10px; border-bottom: 1px solid #343437; } .page-community #community-table td { overflow: hidden; max-width: 34vw; position: relative; vertical-align: middle; } .page-community .scrolling-text { display: inline-block; } .page-community #community-table img { max-width: 52px; height: 29px; } .page-community .td-img { padding: 10px; width: 69px; } .page-community .td-img .discord-icon { content: url(../img/community/ic_discord.png); } .page-community .td-img .twitter-icon { content: url(../img/community/ic_twitter.png); } .page-community .td-img .youtube-icon { content: url(../img/community/ic_youtube.png); } .page-community .td-img .xrpl-icon { content: url(../img/community/ic_xrpl.png); } .page-community .td-img .github-icon { content: url(../img/community/ic_github.png); } .page-community .td-img .stackoverflow-icon { content: url(../img/community/ic_stackoverflow.png); } .page-community .text-external-link { display: inline-flex; align-items: center; margin-left: 10px; } .page-community .external-link-contribute { display: inline-block; vertical-align: middle; padding-right: 41px; height: 16px; background: url(../img/icons/arrow-up-right.svg) no-repeat center center; transition: transform 0.3s ease; /* smooth transition effect */ } .page-community .text-external-link:hover .external-link-contribute { transform: translate(5px, -5px); /* move 5px to the right and 5px up */ } .page-community table td { position: relative; padding-right: 25px; /* Give some space for the arrow */ } .page-community table td .text-external-link { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); } @media (max-width: 768px) { .page-community #community-table img { width: 96px; height: 29px; } .page-community #community-table { width: 100%; } .page-community .td-img { min-width: 60px; /* Remove fixed width for mobile view */ } } .page-community .funding-text { /* Desktop/H6 */ font-size: 20px; font-style: normal; font-weight: 700; line-height: 44px; padding-bottom: 4px; } .page-community .xrpl-events-section { padding: 50px 40px; margin: 100px auto; display: flex; justify-content: space-around; align-items: center; max-width: 1280px; } @media screen and (max-width: 768px) { .page-community .xrpl-events-section { flex-direction: column; align-items: start; } .page-community .xrpl-events-section .header-div { text-align: center; } .page-community .xrpl-events-section .header { display: flex; flex-direction: column; align-items: start; } .page-community .xrpl-events-section .header h6, .page-community .xrpl-events-section .header .h6 { margin-bottom: 0.5rem; font-family: "Tobias", "Noto Serif", monospace; font-size: 20px; font-style: normal; font-weight: 700; line-height: 28px; } .page-community .xrpl-events-section .header h4, .page-community .xrpl-events-section .header .h4 { font-family: "Tobias", "Noto Serif", monospace; font-size: 28px; font-style: normal; font-weight: 700; line-height: 34px; } .page-community .xrpl-events-section .description { text-align: start; margin-top: 2rem; font-size: 24px; font-style: normal; font-weight: 500; line-height: 28px; /* 140% */ } .page-community .xrpl-events-section .view-all-events-btn { float: left; } .page-community .xrpl-events-section .upcoming-event { text-align: start; margin-top: 2rem; padding: 1rem 0; } .page-community .xrpl-events-section .upcoming-event .days-count { margin-bottom: 1rem; } } .page-community .xrpl-events-section .header-div { padding-top: 27px; } .page-community .xrpl-events-section .header h6, .page-community .xrpl-events-section .header .h6 { padding-left: 1.5px; font-family: "Tobias", "Noto Serif", monospace; font-size: 20px; font-weight: 700; color: var(--black-black-0, #FFF); text-align: start; } .page-community .xrpl-events-section .header h4, .page-community .xrpl-events-section .header .h4 { text-align: start; font-family: "Tobias", "Noto Serif", monospace; font-size: 32px; font-weight: 700; color: var(--black-black-0, #FFF); } .page-community .xrpl-events-section .description { font-size: 20px; font-weight: 500; max-width: 444px; color: var(--black-black-10-gray-200, #E0E0E1); line-height: 32px; /* 133.333% */ } .page-community .xrpl-events-section .view-all-events-btn { display: inline-block; margin-top: 1rem; } .page-community .xrpl-events-section .upcoming-event { margin-top: 2rem; } .page-community .xrpl-events-section .upcoming-event .upcoming-label { position: relative; top: 7px; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--black-black-30, #C1C1C2); } .page-community .xrpl-events-section .upcoming-event .days-count { font-weight: 300; margin-bottom: 21px; line-height: 99px; font-size: 88px; background: linear-gradient(35deg, #B480FF -0.3%, #FFAA80 99.7%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } .page-community .xrpl-events-section .upcoming-event .days-word { vertical-align: bottom; font-weight: normal; margin-bottom: 21px; line-height: 99px; font-size: 40px; background: linear-gradient(35deg, #B480FF -0.3%, #FFAA80 99.7%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } .page-community .xrpl-events-section .upcoming-event h5, .page-community .xrpl-events-section .upcoming-event .h5 { font-family: "Tobias", "Noto Serif", monospace; font-size: 16px; font-weight: 700; color: var(--black-black-10, #F5F5F7); } .page-community .xrpl-events-section .upcoming-event .event-details, .page-community .xrpl-events-section .upcoming-event .event-location { font-size: 12px; font-weight: 600; color: var(--black-black-30, #C1C1C2); } .page-community .community-funding { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1280px; margin: 100px auto; padding-right: 54px; padding-left: 73px; margin-top: 120px; } .page-community .funding-section { flex: 1; padding: 20px; color: var(--black-black-0); } .page-community .small-text { color: var(--black-black-30, #C1C1C2); font-size: 12px; font-style: normal; font-weight: 600; line-height: 16px; /* 133.333% */ text-transform: uppercase; padding-left: 11px; text-align: start; } .page-community .funding-section h2, .page-community .funding-section .h2 { font-size: 32px; font-weight: 700; line-height: 38px; margin-top: 10px; margin-bottom: 40px; } .page-community .funding-section p { color: var(--black-black-20); font-size: 24px; font-weight: 500; line-height: 32px; margin-bottom: 40px; } .page-community .stats { flex: 1; display: flex; justify-content: space-between; } @media (max-width: 768px) { .page-community .stats { flex-direction: column; align-items: start; text-align: start; padding-left: 7px; } } .page-community .stacked-stats { display: flex; flex-direction: column; justify-content: space-between; } .page-community .stat { align-self: center; text-align: center; margin: 0 auto; display: flex; flex-direction: column; } @media (max-width: 768px) { .page-community .stat { margin: 0px; text-align: start; align-self: start; } } .page-community .number { opacity: 1; font-size: 88px; display: flex; padding: 10px; align-items: center; line-height: 96px; font-weight: 300; } @media screen and (max-width: 768px) { .page-community .community-funding { flex-direction: column-reverse; padding-left: 16px; padding-right: 16px; } .page-community .funding-section, .page-community .stats { width: 100%; } } .page-community .carousel { position: relative; width: 1280px; margin: 0 auto; margin-top: 106px; max-width: 100%; } .page-community .carousel .flex-align { display: flex; align-items: center; } @media (max-width: 768px) { .page-community .carousel { width: 100%; } } .page-community .center-image-wrapper { position: relative; width: 552px; height: 314px; } @media (max-width: 1118px) { .page-community .center-image-wrapper { width: 55%; height: auto; } } @media (max-width: 768px) { .page-community .center-image-wrapper { margin: 0 auto; width: 86%; } } .page-community .image-container { display: flex; justify-content: space-around; align-items: center; overflow: hidden; /* Hide overflow to keep the sliding effect clean */ } .page-community .image-container img { max-width: 100%; transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out; } .page-community #center-image { width: 100%; } .page-community #left-image, .page-community #right-image { width: 252px; height: 144px; opacity: 0.7; } @media (max-width: 1118px) { .page-community #left-image, .page-community #right-image { width: 15%; height: auto; } } @media (max-width: 768px) { .page-community #left-image, .page-community #right-image { display: none; margin: 0; } } .page-community { /* Additional styles for animating the left and right images off-screen */ } .page-community #left-image.exit, .page-community #right-image.exit { transform: translateX(-100%); opacity: 0; } .page-community #left-image.enter, .page-community #right-image.enter { transform: translateX(100%); opacity: 0; } .page-community #center-image.exit { transform: scale(0.8); /* Shrink the center image a bit when exiting */ opacity: 0; } .page-community #center-image.enter { transform: scale(1); /* Return to normal size when entering */ opacity: 1; } .page-community .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); font-size: 24px; background: none; border: none; cursor: pointer; } .page-community #prev-btn { left: 0; } .page-community #next-btn { right: 0; } .page-community .event-info { position: absolute; bottom: 10px; left: 32px; display: flex; flex-direction: column; gap: 4px; } @media (max-width: 768px) { .page-community .event-info { left: 7px; } } .page-community .event-info span { color: #FFF; font-size: 12px; font-style: normal; font-weight: 600; line-height: 16px; } .page-community .event-info .name { padding-bottom: 5px; color: var(--black-black-10, #F5F5F7); font-size: 16px; font-style: normal; font-weight: 700; line-height: 24px; /* 150% */ } .page-community .arrow-wrapper { display: flex; justify-content: center; padding-top: 24px; } .page-community :root { --black-black-0: #FFF; --black-black-10: #F5F5F7; --black-black-30: #C1C1C2; } .page-community .community-spotlight-wrapper { display: flex; padding: 20px; max-width: 1280px; min-height: 582px; margin: 100px auto; gap: 48px; padding-right: 54px; padding-left: 73px; } .page-community .community-spotlight { flex: 1; display: flex; flex-direction: column; padding-right: 10px; /* for spacing */ } .page-community .projects-wrapper { flex: 1; position: relative; display: flex; justify-content: center; gap: 48px; } @media (max-width: 768px) { .page-community .projects-wrapper { gap: 48px; } } .page-community .project-card { background-color: transparent; border-radius: 4px; height: fit-content; width: 252px; max-height: 456px; } @media (max-width: 768px) { .page-community .project-card { width: 99%; } } .page-community .project-card.bottom-right { align-self: end; } .page-community .card-image { border-radius: 4px; height: 144px; width: 252px; /* adjust as per your design */ background-color: rgb(44, 43, 43); /* placeholder */ display: flex; align-items: center; } .page-community .spotlight-title, .page-community .project-title { color: var(--black-black-10, #F5F5F7); font-size: 16px; font-style: normal; font-weight: 700; line-height: 16px; /* 100% */ } .page-community .spotlight-subtitle { color: var(--black-black-10, #F5F5F7); font-size: 16px; font-style: normal; font-weight: 700; line-height: 16px; /* 100% */ } .page-community .project-description { color: var(--black-black-30, #C1C1C2); font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; /* 150% */ } .page-community .card-details { background-color: transparent; display: flex; flex-direction: column; text-align: start; padding: 15px; height: fit-content; } .page-community .view-project { color: var(--blue-purple-blue-purple-50, #7919FF); font-size: 16px; font-style: normal; font-weight: 400; line-height: 16px; cursor: pointer; text-decoration: none; } @media (max-width: 1076px) { .page-community .project-card.bottom-right { align-self: auto; } .page-community .community-spotlight-wrapper { flex-direction: column; align-items: center; margin-left: 0px; padding-right: 26px; padding-left: 26px; } .page-community .community-spotlight, .page-community .projects-wrapper { width: 100%; margin: 0; padding: 0; } .page-community .projects-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; position: static; } .page-community .card-image { width: 100%; } .page-community .card-details { gap: 16px; margin-top: 10px; } .page-community .project-card { position: static; margin: 20px 0; height: fit-content; /* Space between the cards */ } } .page-community .w-222 { width: 222px; } .page-community .bottom-cards-section .com-card .card-content { display: flex; flex-direction: column; justify-content: space-between; /* Add this line */ gap: 16px; position: relative; z-index: 1; height: 100%; /* Add this line to make card-content full height */ } .page-community .bottom-cards-section .com-card { border-radius: 8px; padding: 36px; background: #232325; min-width: 352px; height: 442px; /* You have a fixed height for the cards */ max-width: 352px; position: relative; display: flex; /* This makes sure your card content is a flex container */ flex-direction: column; /* Align children vertically */ justify-content: space-between; /* This will push the links to the bottom */ } .page-community .bottom-cards-section.bug-bounty { justify-content: space-around; } .page-community .bottom-cards-section.bug-bounty .com-card { min-width: 559px; max-width: 559px; height: 442px; } .page-community .pr-bt16 { position: relative; bottom: 16px; } .page-community .pr-bt28 { position: relative; bottom: 28px; } .page-community .bottom-cards-section { display: flex; flex-direction: row; justify-content: space-around; gap: 48px; max-width: 1280px; margin: 70px auto; } .page-community .bottom-cards-section .com-card { padding: 36px; background: #232325; min-width: 352px; height: 442px; max-width: 352px; position: relative; } .page-community .bottom-cards-section .com-card .top-left-img { position: absolute; top: 0; height: 292px; left: 0; content: url(../img/community/card-bg-1.svg); } .page-community .bottom-cards-section .com-card .top-right-img.bug-bounty-card-bg { content: url(../img/community/bug-bounty-card-bg.png); height: 123px; } .page-community .bottom-cards-section .com-card .bottom-right-img.bug-bounty-card-bg-2 { content: url(../img/community/bug-bounty-card-bg-2.png); height: 123px; } .page-community .bottom-cards-section .com-card .bottom-right-img { position: absolute; bottom: 0; right: 0; height: 333px; content: url(../img/community/card-bg-2.svg); } .page-community .bottom-cards-section .com-card .top-right-img { height: 390px; position: absolute; top: 0; right: 0; content: url(../img/community/card-bg-3.svg); } .page-community .bottom-cards-section .com-card .card-content { display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 1; } .page-community .bottom-cards-section .com-card .card-content .card-title { margin-bottom: 0px !important; color: var(--black-black-0-white, #FFF); white-space: nowrap; font-size: 20px; font-style: normal; font-weight: 700; line-height: 26px; /* 130% */ } .page-community .bottom-cards-section .com-card .card-content .card-subtitle { color: var(--black-black-0, #FFF); font-size: 24px; font-style: normal; font-weight: 700; line-height: 32px; /* 133.333% */ margin-top: 2px; } .page-community .bottom-cards-section .com-card .card-content .card-description { color: var(--black-black-20, #E0E0E1); font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; /* 150% */ margin-top: 15px; margin-bottom: 15px; } .page-community .bottom-cards-section .com-card .card-content .card-description a { color: #7649E3; } .page-community .bottom-cards-section .com-card .card-content .card-links { display: flex; flex-direction: column; gap: 8px; } .page-community .bottom-cards-section .com-card .card-content .com-card-link { text-decoration: none; cursor: pointer; color: #9A52FF; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; white-space: nowrap; } @media (max-width: 575.98px) { .page-community .bottom-cards-section .com-card .card-content .com-card-link { display: block; width: 100%; } } .page-community .bottom-cards-section .com-card .card-content .com-card-link::after { display: inline-block; content: url(../img/icons/arrow-right-purple.svg); position: relative; top: 1px; vertical-align: middle; padding-left: 8px; -webkit-transition: transform 0.3s ease-out; -moz-transition: transform 0.3s ease-out; -ms-transition: transform 0.3s ease-out; -o-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; } .page-community .bottom-cards-section .com-card .card-content .com-card-link:hover { border: none; } .page-community .bottom-cards-section .com-card .card-content .com-card-link:hover::after { -webkit-transform: translateX(4px); -moz-transform: translateX(4px); -ms-transform: translateX(4px); -o-transform: translateX(4px); transform: translateX(4px); } .page-community { /* Media query for mobile view */ } @media (max-width: 768px) { .page-community .pr-bt28 { position: relative; bottom: 0px; } .page-community .pr-bt16 { position: relative; bottom: 0px; } .page-community .bottom-cards-section { flex-direction: column; align-items: center; padding: 20px; } .page-community .bottom-cards-section.bug-bounty { justify-content: space-around; } .page-community .bottom-cards-section.bug-bounty .com-card { min-width: 352px; height: fit-content; max-width: 352px; } .page-community .bottom-cards-section .com-card { margin-bottom: 20px; /* Ensure that the card takes up space */ display: block; width: 100%; } } .page-community .num-separator { width: 32px; height: 1px; background: var(--black-black-70, #343437); margin-bottom: 32px; margin-top: 1px; } .page-community .stat-separator { width: 32px; height: 1px; background: var(--black-black-70, #343437); margin-bottom: 32px; margin-top: 8px; } .page-community .ml-8 { margin-left: 8px; } .page-community .ml-19 { margin-left: 19px; } .page-community .ml-14 { margin-left: 11px; } .page-community .header-div .header { gap: 10px; display: flex; flex-direction: column; padding-bottom: 35px; } .page-community .spotlight-subtitle { font-size: 32px; font-weight: 700; line-height: 38px; margin-top: 10px; margin-bottom: 40px; } .page-community .spotlight-description { color: var(--black-black-20); font-size: 24px; font-weight: 500; line-height: 32px; margin-bottom: 40px; } .sdk-img { align-self: center; } .light .sdk-img { content: url(../img/graphics/sdk-white.png); } .light .ref-book-illustration { content: url(../img/graphics/ref-book-light.png); } .light .tutorial-illustration { content: url(../img/graphics/tutorials-illustration-light.png); } .light .concepts-doc-illustration { content: url(../img/graphics/concepts-docs-light.png); } .light .use-cases .wallet-illustration { content: url(../img/graphics/wallet-light.svg); } .light .use-cases .token-illustration { content: url(../img/graphics/tokens-light.png); } .light .use-cases .connections-illustration { content: url(../img/graphics/nodes-light.svg); } .light .quickstart-image { content: url(../img/graphics/getting-started-pages-light.png); } .light .dev-tools-img { content: url(../img/graphics/dev-tools-light.svg); } .light .dev-tools-link:hover p { color: #141414; } .dark .sdk-img { content: url(../img/graphics/sdk-black.png); } .dark .ref-book-illustration { content: url(../img/graphics/ref-book.png); } .dark .tutorial-illustration { content: url(../img/graphics/tutorials-illustration.png); } .dark .concepts-doc-illustration { content: url(../img/graphics/concepts-doc.png); } .dark .use-cases .wallet-illustration { content: url(../img/graphics/wallet-dark.png); } .dark .use-cases .token-illustration { content: url(../img/graphics/tokens-dark.png); } .dark .use-cases .connections-illustration { content: url(../img/graphics/nodes-dark.png); } .dark .quickstart-image { content: url(../img/graphics/getting-started-pages-dark.svg); } .dark .dev-tools-img { content: url(../img/graphics/dev-tools-dark.png); } .dark .dev-tools-link:hover p { color: #FFFFFF; } .dark .flat-card-grid .nav-link:hover { color: #E6EAF0; } .get-started-img, .flat-card { max-width: 100%; max-height: 100%; } .faded-text { font-style: normal; font-weight: 400; font-size: 15.5667px; line-height: 23px; } .page-docs-index section { padding-top: 64px; padding-bottom: 64px; } .page-docs-index .dev-tools-link h6::before, .page-docs-index .dev-tools-link .h6::before { margin-top: -20px; height: 20px; } .page-docs-index .dev-tools-link h6:hover, .page-docs-index .dev-tools-link .h6:hover { text-decoration: underline; text-decoration-color: #7649E3; background: none !important; } .page-docs-index .dev-tools-link:hover p { text-decoration: none !important; background: none !important; display: inline-block; } .page-docs-index .dev-tools-link a:hover { color: #7649E3; text-decoration: none !important; } .page-docs-index .dev-tools-link .btn-arrow::after { content: url(../img/icons/arrow-right-purple.svg); width: 1.5rem; height: 1.5rem; } .page-docs-index .langs > a { display: block; } .page-docs-index .langs h5:hover, .page-docs-index .langs .h5:hover { text-decoration: underline; text-decoration-color: #7649E3; background: none !important; } .page-docs-index .langs a:hover { text-decoration: none !important; } .page-docs-index .langs .btn-arrow::after { content: url(../img/icons/arrow-right-purple.svg); vertical-align: baseline; width: 1.5rem; height: 1.5rem; } .page-docs-index .langs h5, .page-docs-index .langs .h5 { margin-block-start: 0 !important; } .page-docs-index .langs h5::before, .page-docs-index .langs .h5::before { margin-top: 0; height: 0; } .page-docs-index h1, .page-docs-index .h1 { font-size: 3.875rem; } .page-docs-index .arrow-purple::after { content: url(../img/icons/arrow-right-purple.svg); } .page-docs-index .documentation-index:hover, .page-docs-index .documentation-index::after { color: #7649E3; text-decoration: none !important; background: none !important; } @media (max-width: 765px) { .page-docs-index h1, .page-docs-index .h1 { font-size: 3rem; } .page-docs-index .flat-card-grid { grid-gap: 24px; } .page-docs-index .flat-card-grid .flat-card { padding: 32px 12px; } .page-docs-index::before { display: none; } } #langs-cards { grid-gap: 40px; } @media (max-width: 991.98px) { /* Fix dropdown size with top banner present */ .page-docs-index .langs-cards { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; } } .dev-tools-img { max-width: 100%; max-height: 100%; margin: auto; } .page-docs .h4::before { margin-top: 0; height: 0; } .page-docs .row { margin-right: 0; margin-left: 0; } .page-docs .video-grid { grid-gap: 35px; } .page-docs .title-space { margin-bottom: 16px; } .page-docs .circled-logo { margin-left: 0.1rem; } .flat-card-grid { grid-gap: 15px; max-width: 100%; min-height: 384px; } .flat-card-grid .flat-card { padding: 32px 50px; height: 100%; width: 100%; box-shadow: none; } .flat-card-grid .flat-card-padding { margin-bottom: 75px; } .flat-card-grid img { width: auto; height: 115px; margin-left: auto; margin-right: auto; } .flat-card-grid .nav-link { border: none !important; } .flat-card-grid .nav-link:hover { text-decoration: underline; text-decoration-color: #7649E3; } .flat-card-grid .nav-link::after { content: none !important; } @media (max-width: 575.98px) { .flat-card-grid .flat-card-padding { margin-bottom: 0; } .flat-card-grid .nav-link::after { content: " " !important; } .flat-card-grid .flat-card .btn { display: none; } } .float-up-on-hover { transition: all 0.35s ease-out; cursor: pointer; } .float-up-on-hover:hover { -webkit-transform: translateY(-16px); -moz-transform: translateY(-16px); -ms-transform: translateY(-16px); -o-transform: translateY(-16px); transform: translateY(-16px); } .float-up-on-hover .video-image:hover { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } @media (min-width: 992px) { .align-button-on-bottom .btn-primary { position: absolute; bottom: 0; } } .center-image { display: flex; justify-content: center; } .quickstart-card .quickstart-image { margin-left: -20px; margin-right: -20px; margin-bottom: -20px; } @media (min-width: 992px) { .quickstart-card { margin-left: -32px; margin-right: -32px; margin-bottom: -32px; width: calc(100% + 64px); } } .explore-links .card-grid { grid-gap: 40px; } .full-documentation-link { margin-top: -35px; } .osano-cm-close { box-sizing: content-box !important; } .osano-cm-switch { box-sizing: content-box !important; } .osano-cm-widget { right: 16px; width: 50px; height: 50px; border: 1px solid transparent; } @media (min-width: 992px) { .osano-cm-widget { right: 32px; } } html.light article p code, html.light article table code, html.light article li > code { background-color: #E6EAF0; color: #111112; } html.light body { background-color: #F0F3F7; color: #141414; } html.light #topnav-theme .custom-theme-toggle .form-check-input { background-color: transparent; background-position: bottom right; transform: rotate(-15deg); } html.light h1:not(.chip), html.light h2:not(.chip), html.light h3:not(.chip), html.light h4:not(.chip), html.light h5:not(.chip), html.light h6:not(.chip), html.light .h1:not(.chip), html.light .h2:not(.chip), html.light .h3:not(.chip), html.light .h4:not(.chip), html.light .h5:not(.chip), html.light .h6:not(.chip) { color: #141414; } html.light h1.green-500, html.light h2.green-500, html.light h3.green-500, html.light h4.green-500, html.light h5.green-500, html.light h6.green-500, html.light .h1.green-500, html.light .h2.green-500, html.light .h3.green-500, html.light .h4.green-500, html.light .h5.green-500, html.light .h6.green-500 { color: #0DAA3E; text-shadow: white 0 0 2px, white -1px -1px 2px, white 1px 1px 2px; } html.light .bg-grey-800 { background-color: #F0F3F7; } html.light .grey-400 { color: #454549; } html.light .text-muted { color: #232325 !important; } html.light .longform { color: #232325; } html.light .numbers { color: #141414; } html.light .stat-highlight, html.light .eyebrow { color: #111112; } html.light .invertible-img { filter: invert(100%); } html.light .arrow-link::after { content: url("../img/lightmode/icon-long-arrow.svg"); } html.light .search .input-group-text, html.light .input-group .input-group-text, html.light .form-group .input-group-text { background-color: #E6EAF0; color: #232325; } html.light .search label .input-group-text, html.light .search .form-control:not(.btn), html.light .input-group label .input-group-text, html.light .input-group .form-control:not(.btn), html.light .form-group label .input-group-text, html.light .form-group .form-control:not(.btn) { color: #141414; background-color: #E6EAF0; border-color: #E6EAF0; } html.light .search .ds-input, html.light .input-group .ds-input, html.light .form-group .ds-input { color: #141414; background-color: #E6EAF0; border-color: #E6EAF0; } html.light .search .ds-input:focus, html.light .input-group .ds-input:focus, html.light .form-group .ds-input:focus { border-color: #7649E3; } html.light .list-group-item { border-color: #232325; background-color: #F0F3F7; } html.light .list-group-item.disabled { color: #8A919A; } html.light .progress { background-color: #E6EAF0; } html.light [data-component-name="Search/SearchIcon"] > path { fill: black; } html.light a:not(.bds-link), html.light nav a:not(.bds-link), html.light a:not([role=button]):not(.bds-link) { color: #141414; } html.light a:not(.bds-link).btn-primary, html.light nav a:not(.bds-link).btn-primary, html.light a:not([role=button]):not(.bds-link).btn-primary { color: #FFFFFF; } html.light a:not(.bds-link).btn-primary:hover, html.light nav a:not(.bds-link).btn-primary:hover, html.light a:not([role=button]):not(.bds-link).btn-primary:hover { color: #FFFFFF; } html.light a:not(.bds-link):hover, html.light a:not(.bds-link):active, html.light a:not(.bds-link).active, html.light nav a:not(.bds-link):hover, html.light nav a:not(.bds-link):active, html.light nav a:not(.bds-link).active, html.light a:not([role=button]):not(.bds-link):hover, html.light a:not([role=button]):not(.bds-link):active, html.light a:not([role=button]):not(.bds-link).active { color: #5429A1; } html.light a:not(.bds-link):not(.btn):focus, html.light nav a:not(.bds-link):not(.btn):focus, html.light a:not([role=button]):not(.bds-link):not(.btn):focus { background-color: transparent; } html.light a.card:hover, html.light:active, html.light.active { color: #141414; } html.light .landing-table tbody td { color: #232325; } html.light .btn-outline-secondary, html.light article a.button, html.light .navbar-dark .navbar-nav .nav-link.btn-outline-secondary { color: #111112; border-color: #111112; } html.light .btn-outline-secondary:not(:disabled):not(.disabled):hover, html.light .btn-outline-secondary:not(:disabled):not(.disabled):active, html.light article a.button:not(:disabled):not(.disabled):hover, html.light article a.button:not(:disabled):not(.disabled):active, html.light .navbar-dark .navbar-nav .nav-link.btn-outline-secondary:not(:disabled):not(.disabled):hover, html.light .navbar-dark .navbar-nav .nav-link.btn-outline-secondary:not(:disabled):not(.disabled):active { color: #7649E3; border-color: #7649E3; background-color: transparent; } html.light .breadcrumb { background: #F0F3F7; } html.light .breadcrumb-item a { color: #454549; } html.light .breadcrumb-item a:hover { color: #7649E3; } html.light .top-nav { background: #F0F3F7; } html.light .top-nav #topnav-pages .nav-link { color: #141414; } html.light .top-nav .navbar-brand .logo { content: url(../img/XRPLedger_DevPortal-black.svg); height: 40px; } html.light .top-nav #dropdown-hero-for-docs > img { content: url(../img/icons/lightmode/docs.svg); } html.light .top-nav #dropdown-hero-for-community > img { content: url(../img/icons/lightmode/contribute.svg); } html.light .top-nav .dropdown-menu { background-color: #F0F3F7; border-color: #F0F3F7; box-shadow: 0px 5px 20px 0px #CAD4DF; } html.light .top-nav .dropdown-menu a:hover, html.light .top-nav .dropdown-menu a.active { color: #5429A1; } html.light .top-nav .dropdown-menu .dropdown-item.dropdown-hero > img { background-color: #FCFCFD; } html.light .top-nav .dropdown-menu .dropdown-item.dropdown-hero p { color: #343437; } html.light .top-nav .dropdown-menu .dropdown-item.active { color: #5429A1; } html.light .top-nav .dropdown-menu h5, html.light .top-nav .dropdown-menu .h5 { color: #454549; } html.light .top-nav .dropdown-menu .col-for-get_started { background-color: #E6EAF0; } html.light .top-nav #topnav-button { background-color: #E6EAF0; } @media (max-width: 575.98px) { html.light .top-nav .navbar-toggler .navbar-toggler-icon::after, html.light .top-nav .navbar-toggler .navbar-toggler-icon::before, html.light .top-nav .navbar-toggler .navbar-toggler-icon div { background-color: #111112; } html.light .top-nav .navbar-nav .nav-link, html.light .top-nav .navbar-collapse > .nav-item { background: #E6EAF0; } html.light .top-nav #top-main-nav { background-color: #CAD4DF; } } html.light aside .sidenav_cat_title { color: #141414; } html.light .page-toc .level-1 a, html.light .command-list .separator { color: #141414; } html.light aside a:hover, html.light aside .sidenav_cat_title:hover, html.light aside a.active, html.light aside a.active:hover, html.light aside .active > a, html.light aside .active > a:hover { color: #5429A1; } html.light .dactyl-tree-nav nav { border-left: 1px solid #141414; } html.light .dactyl-tree-nav nav .nav-link:hover, html.light .dactyl-tree-nav nav .nav-link:active { border-left-color: #5429A1; } html.light .dactyl-tree-nav nav .active > .nav-link { border-left-color: #5429A1; } html.light .page-toc, html.light .command-list { border-left: 1px solid #141414; } html.light .page-toc .level-3, html.light .command-list .level-3 { border-left: 1px solid #141414; } html.light .page-toc li a:hover, html.light .page-toc li a .active, html.light .command-list li a:hover, html.light .command-list li a .active { border-left-color: #5429A1; } html.light .footer-brand .logo { filter: invert(100%); } html.light .copyright-license { text-shadow: white 0px 0px 2px, white 1px 1px 2px, white 2px 2px 3px, white 2px 2px 4px, white 2px 2px 5px, white 2px 2px 6px, white -1px -1px 2px, white -2px -2px 3px, white -2px -2px 4px; } html.light a.osano-cm-link { color: #ffffff; } html.light article .card, html.light .landing .card, html.light .cta-card, html.light aside .card { color: #141414; background-color: #F0F3F7; box-shadow: 0px 5px 20px 0px #CAD4DF; } html.light #code-samples-deck .card { box-shadow: 0px 5px 20px 0px #CAD4DF; } html.light #code-samples-deck .card-header { border-bottom: none; background-color: #F0F3F7; } html.light #code-samples-deck .card-footer { background-color: #F0F3F7; } html.light .page-faq.landing-builtin-bg::before, html.light .mini-faq.landing-builtin-bg::before { opacity: 0.6; } html.light .page-faq .q-wrapper, html.light .mini-faq .q-wrapper { background-color: #F0F3F7; color: #141414; box-shadow: 0px 5px 20px 0px #CAD4DF; } html.light .page-faq .q-wrapper > h4 a.expander:hover, html.light .page-faq .q-wrapper > .h4 a.expander:hover, html.light .mini-faq .q-wrapper > h4 a.expander:hover, html.light .mini-faq .q-wrapper > .h4 a.expander:hover { color: #141414; } html.light .page-community .com-card { background: #FFFFFF; } html.light .page-community .project-description { color: #343437; } html.light .page-community #platform-stack-overflow { content: url("../img/logos/lightmode/stack-overflow.svg"); } html.light .page-community #platform-discord { content: url("../img/logos/lightmode/discord.svg"); } html.light .status.not_enabled { color: #E1DB26; } html.light .pg-category { color: #454549; } html.light .landing .nav .nav-link { color: #232325; border-bottom-color: #CAD4DF; } html.light .landing .circled-logo { background-color: #E6EAF0; } html.light .landing .circled-logo img[src="assets/img/logos/globe.svg"] { filter: invert(100%); } html.light .landing p a:not(.bds-link), html.light .landing .longform a:not(.bds-link) { color: #5429A1; } html.light .devportal-callout.caution, html.light .devportal-callout.注意 { border-color: #E1DB26; } html.light .devportal-callout.caution > strong:first-child::before, html.light .devportal-callout.注意 > strong:first-child::before { color: #E1DB26; } html.light .devportal-callout.tip, html.light .devportal-callout.ヒント { border-color: #21E46B; } html.light .devportal-callout.tip > strong:first-child::before, html.light .devportal-callout.ヒント > strong:first-child::before { color: #21E46B; } html.light code { color: #141414; } html.light pre code, html.light pre { background-color: #E6EAF0; } html.light .multicode a { color: #141414; } html.light .multicode a.current { color: #FFFFFF; } html.light .multicode a:hover { text-decoration: none; background-color: #E6EAF0; color: #FFFFFF; } html.light .multicode a:focus { background-color: #232325; } html.light .codehilite .btn-outline-secondary { background-color: #232325; color: #F0F3F7; border-color: #F0F3F7; } html.light .interactive-block .breadcrumb-item.done a::after { color: #078139; } html.light .modal-content { background-color: #F0F3F7; } html.light .rpc-tool pre .toggle { color: #FFFFFF; } html.light .rpc-tool pre .toggle:hover { color: #C0A7FF; } html.light .page-home #home-hero-graphic { content: url("../img/lightmode/home-hero.svg"); } html.light .page-home #benefits-list #public { content: url("../img/icons/lightmode/public.svg"); } html.light .page-home #benefits-list #streamlined { content: url("../img/icons/lightmode/streamlined.svg"); } html.light .page-home #benefits-list #performance { content: url("../img/icons/lightmode/performance.svg"); } html.light .page-home #benefits-list #low-cost { content: url("../img/icons/lightmode/low-cost.svg"); } html.light .page-home #benefits-list #community { content: url("../img/icons/lightmode/community.svg"); } html.light .page-home #benefits-list #reliability { content: url("../img/icons/lightmode/reliability.svg"); } html.light #validator-graphic { content: url("../img/lightmode/validators.svg"); } html.light #wallets #wallet-xumm { content: url("../img/wallets/lightmode/xumm.svg"); } html.light #wallets #wallet-bitfrost { content: url("../img/wallets/lightmode/bitfrost.png"); } html.light #wallets #wallet-towo { content: url("../img/wallets/lightmode/towo.svg"); } html.light #wallets #wallet-keystone { content: url("../img/wallets/lightmode/keystone.svg"); } html.light #wallets #wallet-dcent { content: url("../img/wallets/lightmode/dcent.svg"); } html.light #wallets #wallet-coin { content: url("../img/wallets/lightmode/coin.svg"); } html.light #wallets #wallet-gem { content: url("../img/wallets/lightmode/gem.svg"); } html.light #wallets #wallet-crossmark { content: url("../img/wallets/lightmode/crossmark.png"); } html.light #wallets #wallet-joey { content: url("../img/wallets/lightmode/joey.svg"); } html.light #top-exchanges #exch-bitstamp { content: url("../img/exchanges/lightmode/bitstamp.svg"); } html.light #top-exchanges #exch-cex-io { content: url("../img/exchanges/lightmode/cex-io.svg"); } html.light #top-exchanges #exch-liquid { content: url("../img/exchanges/lightmode/liquid.svg"); } html.light #top-exchanges #exch-bitfinex { content: url("../img/exchanges/lightmode/bitfinex.svg"); } html.light #top-exchanges #exch-bittrex { content: url("../img/exchanges/lightmode/bittrex.png"); } html.light #top-exchanges #exch-currency-com { content: url("../img/exchanges/lightmode/currency-com.png"); } html.light #top-exchanges #exch-ftx { content: url("../img/exchanges/lightmode/ftx.png"); } html.light #top-exchanges #exch-lmax { content: url("../img/exchanges/lightmode/lmax.png"); } html.light .timeline-dot { background-color: #F0F3F7; } html.light .page-uses .card-body { background: #FFFFFF; color: #343437; } html.light .page-uses .modal-footer, html.light .page-uses .modal-header { background-color: #FCFCFD; } html.light .page-uses #infrastructure { content: url("../img/icons/usecases/lightmode/ic_infrastructure.png"); } html.light .page-uses #developer_tooling { content: url("../img/icons/usecases/lightmode/ic_developer_tooling.png"); } html.light .page-uses #interoperability { content: url("../img/icons/usecases/lightmode/ic_interoperability.png"); } html.light .page-uses #wallet { content: url("../img/icons/usecases/lightmode/ic_wallet.png"); } html.light .page-uses #nfts { content: url("../img/icons/usecases/lightmode/ic_nfts.png"); } html.light .page-uses #exchanges { content: url("../img/icons/usecases/lightmode/ic_exchanges.png"); } html.light .page-uses #gaming { content: url("../img/icons/usecases/lightmode/ic_gaming.png"); } html.light .page-uses #security { content: url("../img/icons/usecases/lightmode/ic_security.png"); } html.light .page-uses #payments { content: url("../img/icons/usecases/lightmode/ic_payments.png"); } html.light .page-uses #web_monetization { content: url("../img/icons/usecases/lightmode/ic_web_monetization.png"); } html.light .page-uses #sustainability { content: url("../img/icons/usecases/lightmode/ic_sustainability.png"); } html.light .page-uses #cbdc { content: url("../img/icons/usecases/lightmode/ic_cbdc.png"); } html.light .page-uses #custody { content: url("../img/icons/usecases/lightmode/ic_custody.png"); } html.light .page-uses #other { content: url("../img/icons/usecases/lightmode/ic_other.png"); } html.light .page-uses #carbon_markets { content: url("../img/icons/usecases/lightmode/ic_carbon_markets.png"); } html.light .page-uses #defi { content: url("../img/icons/usecases/lightmode/ic_defi.png"); } html.light .page-uses .category-header { color: #343437; } html.light .page-uses .category_count { background: #D2B2FF; color: #350080; } html.light .page-uses .section-text-title { color: #000; } html.light .page-uses #use_case_companies_list #bitgo .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/bitgo.svg"); } html.light .page-uses #use_case_companies_list #sologenic-nft .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/sologenic-nft.svg"); } html.light .page-uses #use_case_companies_list #carbonland-trust .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/carbonland-trust.svg"); } html.light .page-uses #use_case_companies_list #futureverse .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/futureverse.png"); } html.light .page-uses #use_case_companies_list #moai-finance .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/moai-finance.svg"); } html.light .page-uses #use_case_companies_list #orchestra-finance .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/orchestra-finance.svg"); } html.light .page-uses #use_case_companies_list #x-tokenize .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/x-tokenize.svg"); } html.light .page-uses #use_case_companies_list #casino-coin .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/casino-coin.svg"); } html.light .page-uses #use_case_companies_list #xrp-cafe .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/xrp-cafe.svg"); } html.light .page-uses #use_case_companies_list #coil .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/coil.svg"); } html.light .page-uses #use_case_companies_list #xrp-toolkit .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/xrp-toolkit.svg"); } html.light .page-uses #use_case_companies_list #first-ledger-bot .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/first-ledger-bot.svg"); } html.light .page-uses #use_case_companies_list #cryptum .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/cryptum.svg"); } html.light .page-uses #use_case_companies_list #xrpl-org-ledger-explorer .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/xrpl-org-ledger-explorer.svg"); } html.light .page-uses #use_case_companies_list #evernode .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/evernode.svg"); } html.light .page-uses #use_case_companies_list #xrpl-rosetta .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/xrpl-rosetta.svg"); } html.light .page-uses #use_case_companies_list #ripples-cbdc-platform .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/ripples-cbdc-platform.svg"); } html.light .page-uses #use_case_companies_list #xrpscan .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/xrpscan.svg"); } html.light .page-uses #use_case_companies_list #ripples-on-demand-liquidity .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/ripples-on-demand-liquidity.svg"); } html.light .page-uses #use_case_companies_list #xumm-wallet .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/xumm-wallet.svg"); } html.light .page-uses #use_case_companies_list #sologenic-dex .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/sologenic-dex.svg"); } html.light .page-uses #use_case_companies_list #joey-wallet .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/joey-wallet.svg"); } html.light .page-uses #use_case_companies_list #Crossmark .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/Crossmark.png"); } html.light .page-uses #use_case_companies_list #threezy .biz-logo { max-height: 40px; content: url("../img/uses/lightmode/threezy.png"); } html.light .page-uses .modal-content-uses .first-ledger-bot { content: url("../img/uses/lightmode/first-ledger-bot.svg"); } html.light .page-uses .modal-content-uses .moai-finance { content: url("../img/uses/lightmode/moai-finance.svg"); } html.light .page-uses .modal-content-uses .orchestra-finance { max-height: 52px; margin: 0; content: url("../img/uses/lightmode/orchestra-finance.svg"); } html.light .page-uses #bitpay .biz-logo, html.light .page-uses #forte .biz-logo, html.light .page-uses #xrplorer .biz-logo, html.light .page-uses #gatehub .biz-logo { filter: invert(100%); } html.light .landing-bg { opacity: 0.4; } @media (min-width: 576px) { html.light .landing-bg { opacity: 1; } } html.light .landing-builtin-bg::before { opacity: 0.4; } @media (min-width: 576px) { html.light .landing-builtin-bg::before { opacity: 1; } } html.light #feedback-content .widget-form-wrapper { background-color: #FFFFFF !important; } html.light #feedback-content .widget-form-wrapper div { background-color: #FFFFFF !important; } html.light #feedback-content .widget-form-wrapper textarea { background-color: #F0F3F7 !important; } html.light #feedback-content .widget-form-wrapper .widget-header-title { color: #111112 !important; } html.light #feedback-content .widget-form-wrapper .cancel { color: #5429A1 !important; } html.light #feedback-content .widget-helpful .widget-header { background-color: #FFFFFF !important; } html.light #feedback-content .widget-helpful .widget-header-title { color: #111112 !important; } html.light #feedback-content .widget-helpful .widget-header-icon { filter: invert(100%); } html.light .page-docs-index #software-and-sdks .card-deck .card:nth-child(1) .card-footer { background-image: url(../img/cards/lightmode/4col-green.svg); } html.light .page-docs-index #software-and-sdks .card-deck .card:nth-child(2) .card-footer { background-image: url(../img/cards/lightmode/4col-light-blue.svg); } html.light .page-docs-index #software-and-sdks .card-deck .card:nth-child(4) .card-footer { background-image: url(../img/cards/lightmode/4col-yellow.svg); } html.light .page-docs-index #doc-types .card-deck .card:nth-child(4) .card-footer { background-image: url(../img/cards/lightmode/4col-light-blue-2.svg); } html.light .page-docs-index .funding-text, html.light .page-community .funding-text { color: #232325; } html.light .page-docs-index .stat .small-text, html.light .page-community .stat .small-text { color: #232325; } html.light .page-docs-index .project-card, html.light .page-community .project-card { background-color: transparent; } html.light .page-docs-index .card-details, html.light .page-community .card-details { background-color: transparent; } html.light .page-docs-index .card-image, html.light .page-community .card-image { background: #E0E0E1; } html.light .page-docs-index #community-table tr, html.light .page-community #community-table tr { border-bottom: 1px solid rgba(52, 52, 55, 0.2509803922); } html.light .page-docs-index .card-description, html.light .page-community .card-description { color: #343437 !important; } html.light .page-docs-index .card-subtitle, html.light .page-community .card-subtitle { color: #111112 !important; } html.light .page-docs-index .card-title, html.light .page-community .card-title { color: #111112 !important; } html.light .page-docs-index .main-title, html.light .page-community .main-title { color: #111112; } html.light .page-docs-index .event-location, html.light .page-community .event-location { color: #232325 !important; } html.light .page-docs-index .event-details, html.light .page-community .event-details { color: #232325 !important; } html.light .page-docs-index .upcoming-event .event-name, html.light .page-community .upcoming-event .event-name { color: #111112; } html.light .page-docs-index .upcoming-label, html.light .page-community .upcoming-label { color: #232325 !important; } html.light .page-docs-index .description, html.light .page-community .description { color: #232325; } html.light .page-docs-index .events-text, html.light .page-community .events-text { color: #111112; } html.light .page-docs-index .discord-icon, html.light .page-community .discord-icon { content: url(../img/community/ic_discord_light.png); } html.light .page-docs-index .twitter-icon, html.light .page-community .twitter-icon { content: url(../img/community/ic_twitter_light.png); } html.light .page-docs-index .youtube-icon, html.light .page-community .youtube-icon { content: url(../img/community/ic_youtube_light.png); } html.light .page-docs-index .xrpl-icon, html.light .page-community .xrpl-icon { content: url(../img/community/ic_xrpl_light.png); } html.light .page-docs-index .github-icon, html.light .page-community .github-icon { content: url(../img/community/ic_github_light.png); } html.light .page-docs-index .stackoverflow-icon, html.light .page-community .stackoverflow-icon { content: url(../img/community/ic_stackoverflow_light.png); } html.light .page-docs-index #run-a-network-node .card-deck .card:nth-child(4) .card-footer, html.light .page-community #run-a-network-node .card-deck .card:nth-child(4) .card-footer { background-image: url(../img/cards/lightmode/4col-light-green.svg); } html.light .page-docs-index #run-a-network-node .text-cards a, html.light .page-community #run-a-network-node .text-cards a { color: #141414; } html.light .page-docs-index #xrpl-blog .blog-graphic, html.light .page-community #xrpl-blog .blog-graphic { content: url(../img/community/lightmode/community-blog@2x.png); } html.light .page-docs-index #xrpl-events .text-light, html.light .page-community #xrpl-events .text-light { color: #141414 !important; } html.light .page-docs-index #xrplGrantsDark g, html.light .page-docs-index #xrplGrantsDark-small g, html.light .page-docs-index #careersDark g, html.light .page-docs-index #careersDark-small g, html.light .page-community #xrplGrantsDark g, html.light .page-community #xrplGrantsDark-small g, html.light .page-community #careersDark g, html.light .page-community #careersDark-small g { filter: invert(100%) brightness(0.8); } html.light #find-us-on-platforms .card-deck .card:nth-child(2) .card-footer { background-image: url(../img/cards/lightmode/4col-light-blue-3.svg); } html.light .page-references #refs-types .card-deck .card:nth-child(2) .card-footer { background-image: url(../img/cards/lightmode/3col-green-2.svg); } html.light .page-references #xrpl-protocol .card-deck .card:nth-child(1) .card-footer { background-image: url(../img/cards/lightmode/4col-light-blue-4.svg); } html.light ::-webkit-input-placeholder { /* Chrome */ color: #454549; } html.light :-ms-input-placeholder { /* IE 10+ */ color: #454549; } html.light ::-moz-placeholder { /* Firefox 19+ */ color: #454549; opacity: 1; } html.light :-moz-placeholder { /* Firefox 4 - 18 */ color: #454549; opacity: 1; } html.light .page-events label { color: #111112; } html.light .page-events .event-card { color: #141414; background-color: #FCFCFD; box-shadow: 0px 5px 20px 0px #CAD4DF; } html.light .page-events a.event-card:hover { color: #141414; } html.light .page-events .event-hero { color: #111112; } html.light .page-events .event-save-date { color: #111112; } html.light .page-events .event-small-gray { color: #454549; } html.light .page-events #event-hero-image { height: 100%; min-height: 209px; background: url(../img/events/event-hero1-light@2x.png); background-size: contain; background-repeat: no-repeat; background-position: center; } html.light .page-events .icon-date::before { background: url(../img/events/event-date-light.svg); } html.light .page-events .icon-location::before { background: url(../img/events/event-location-light.svg); } html.light .page-events .events-filter[type=checkbox]::before { background-color: #F0F3F7; } html.light .page-events .events-filter[type=checkbox]:not(:disabled):checked:hover::after { background-image: url(../img/events/event-check.svg); background-repeat: no-repeat; background-position: center; background-color: #C0A7FF; border-width: 2px; border-style: solid; border-color: #C0A7FF; border-radius: 4px; } html.light .page-events .events-filter[type=checkbox]:not(:disabled):hover::before { background-color: #F0F3F7; } html.light .page-events .events-filter[type=checkbox]:not(:disabled):hover::after { background-color: #F0F3F7; } html.light .page-ambassadors #benefits-list #benefits-01 { content: url("../img/ambassadors/lightmode/benefits-01.svg"); } html.light .page-ambassadors #benefits-list #benefits-02 { content: url("../img/ambassadors/lightmode/benefits-02.svg"); } html.light .page-ambassadors #benefits-list #benefits-03 { content: url("../img/ambassadors/lightmode/benefits-03.svg"); } html.light .page-ambassadors #benefits-list #benefits-04 { content: url("../img/ambassadors/lightmode/benefits-04.svg"); } html.light .page-ambassadors #benefits-list #benefits-05 { content: url("../img/ambassadors/lightmode/benefits-05.svg"); } html.light .page-ambassadors #benefits-list #benefits-06 { content: url("../img/ambassadors/lightmode/benefits-06.svg"); } html.light .page-ambassadors #eligibility-list #eligibility-01 { content: url("../img/ambassadors/lightmode/eligibility-01.svg"); } html.light .page-ambassadors #eligibility-list #eligibility-02 { content: url("../img/ambassadors/lightmode/eligibility-02.svg"); } html.light .page-ambassadors #eligibility-list #eligibility-03 { content: url("../img/ambassadors/lightmode/eligibility-03.svg"); } html.light .page-ambassadors #eligibility-list #eligibility-04 { content: url("../img/ambassadors/lightmode/eligibility-04.svg"); } html.light .page-ambassadors #eligibility-list #eligibility-05 { content: url("../img/ambassadors/lightmode/eligibility-05.svg"); } html.light .page-funding .funding-list #funding-01 { content: url("../img/funding/lightmode/funding-01.svg"); } html.light .page-funding .funding-list #funding-02 { content: url("../img/funding/lightmode/funding-02.svg"); } html.light .page-funding .funding-list #funding-03 { content: url("../img/funding/lightmode/funding-03.svg"); } html.light .page-funding .funding-list #funding-04 { content: url("../img/funding/lightmode/funding-04.svg"); } html.light .page-funding #xrplGrantsDark { filter: invert(100%) brightness(0.8); } html.light .page-impact .connect-list #connect-01 { content: url("../img/impact/lightmode/connect-01.svg"); } html.light .page-impact .connect-list #connect-02 { content: url("../img/impact/lightmode/connect-02.svg"); } html.light .page-impact .connect-list #connect-03 { content: url("../img/impact/lightmode/connect-03.svg"); } html.light .page-impact .connect-list #connect-04 { content: url("../img/impact/lightmode/connect-04.svg"); } html.light .page-impact #map-light { display: block; } html.light .page-impact #map-dark { display: none; } html.light main article .card-grid { color: #141414; } html.light main article .card-grid code { background-color: #EAFCF1; } html.light main article .card-grid .card-icon-container, html.light main article .card-grid.card-grid-3xN .card-icon-container { background: #CAD4DF; } html.light [data-component-name="Footer/Footer"] [data-component-name="Footer/FooterColumn"] { text-shadow: #F0F3F7 0px 0px 2px, #F0F3F7 1px 1px 2px, #F0F3F7 2px 2px 3px, #F0F3F7 2px 2px 4px, #F0F3F7 2px 2px 5px, #F0F3F7 2px 2px 6px, #F0F3F7 -1px -1px 2px, #F0F3F7 -2px -2px 3px, #F0F3F7 -2px -2px 4px; } html.light .dev-blog .text-bg { background-color: #FFFFFF; } html.light .dev-blog #card-date { color: #454549; } html.light .dev-blog .category-header { color: #111112; } html.light .dev-blog label { color: #343437; } html.light .dev-blog .blog-filter[type=checkbox]::before { background: #F0F3F7; } html.light .dev-blog .blog-filter[type=checkbox]:checked::before { background: #F0F3F7; } html.light .dev-blog .blog-filter[type=checkbox]:not(:disabled):checked:hover::after { background-image: url(../img/blog/blog-check-light-mode.svg); } html.light .dev-blog .blog-filter[type=checkbox]:not(:disabled):hover::before { background: #F0F3F7; } html.light .dev-blog .blog-filter[type=checkbox]:not(:disabled):hover::after { background: #F0F3F7; } html.light .dev-blog .post-date { text-decoration: overline solid #145C35 10%; } html.light .dev-blog #general-badge { background-color: #FFFFFF; color: #343437; } html.light .dev-blog #release_notes-badge { background-color: #32E685; color: #145C35; } html.light .dev-blog #advisories-badge { background-color: #FF6719; color: #4C1A00; } html.light .dev-blog #amendments-badge { background-color: #FAFF19; color: #4B4C00; } html.light .dev-blog #development-badge { background-color: #7919FF; color: #20004C; } html.light .dev-blog #developer_reflections-badge { background-color: #19A3FF; color: #002E4C; } html.light .dev-blog #gateway_bulletins-badge { background-color: #D919FF; color: #40004C; } html.light .dev-blog #features-badge { background-color: #32E685; color: #145C35; } html.light .dev-blog #security-badge { background-color: #FF198B; color: #4C0026; } html.light .dev-blog .dropdown-btn { color: #111112; background-color: #E6EAF0; border-color: #E6EAF0; } html.light .dev-blog .dropdown-btn img { content: url("../img/icons/lightmode/chevron-arrow-down.svg"); } html.light .dev-blog .dropdown-content { background-color: #E6EAF0; } html.light .page-tokenization .project-cards .project-logo { filter: invert(100%); } html.light .page-tokenization .article-card { background-color: #FFFFFF; } html.light .page-tokenization .article-card-background { filter: drop-shadow(0px 1px 18px rgba(24, 24, 24, 0.5)); } html.light .page-tokenization .evernode { content: url("../img/logos/evernode.svg"); } html.light .page-tokenization .prev img { content: url("../img/icons/prev_light.svg"); } html.light .page-tokenization .next img { content: url("../img/icons/prev_light.svg"); transform: scaleX(-1); } html.light .page-tokenization .arrow-button { background-color: #E6EAF0; } html.light .page-rwa-tokenization .section-title { color: #141414; } html.light .page-rwa-tokenization .utility-card .utility-title { color: #141414; } html.light .page-rwa-tokenization .utility-card .utility-description { color: #141414; } html.light .page-rwa-tokenization .benefit-icon.low-fees { background-image: url(../img/tokenization/lightmode/low-fees.png); } html.light .page-rwa-tokenization .benefit-icon.access { background-image: url(../img/tokenization/lightmode/cross-chain.png); } html.light .page-rwa-tokenization .benefit-icon.native-compliance { background-image: url(../img/tokenization/lightmode/native-compliance.png); } html.light .page-rwa-tokenization .benefit-icon.delegated-token-management { background-image: url(../img/tokenization/lightmode/delegated-token-management.png); } html.light .page-rwa-tokenization .company-logo.open-eden { background-image: url(../img/tokenization/lightmode/open-eden.png); } html.light .page-rwa-tokenization .company-logo.zoniqx { background-image: url(../img/tokenization/lightmode/zoniqx.png); } html.light .page-rwa-tokenization .company-logo.axiology { background-image: url(../img/tokenization/lightmode/axiology.png); } html.light .page-rwa-tokenization .company-logo.archax { background-image: url(../img/tokenization/lightmode/archax.png); } html.light .page-rwa-tokenization .company-logo.meld { background-image: url(../img/tokenization/lightmode/meld.png); } html.light .page-rwa-tokenization .company-logo.palisade { background-image: url(../img/tokenization/lightmode/palisade.png); } html.light .page-rwa-tokenization .company-logo.ripple-logo { background-image: url(../img/tokenization/lightmode/ripple-logo.png); } html.light .page-rwa-tokenization .company-logo.ondo { background-image: url(../img/tokenization/lightmode/ondo.png); } html.light .page-rwa-tokenization .company-logo.hidden-road { background-image: url(../img/tokenization/lightmode/hidden-road.png); } html.light .page-rwa-tokenization .token-features-section .btn-link { color: #7919FF; } html.light .page-rwa-tokenization .card-description a { color: #7919FF !important; } html.light .page-rwa-tokenization .developer-tools__image { background-image: url("../img/tokenization/lightmode/graphic.png"); } html.light .page-rwa-tokenization .right-arrow-item::after { content: url("../img/icons/lightmode/arrow-right-purple.svg"); } html.light .page-rwa-tokenization .token-video-text-container p { color: var(--XRPL-Primary-Black, #000); } html.light .page-rwa-tokenization .cards-title-token { color: var(--XRPL-Primary-Black, #000); } html.light .page-rwa-tokenization .benefit-card { background: #FFF; } html.light .page-rwa-tokenization .benefit-card .benefit-title { color: var(--XRPL-Primary-Black, #000); } html.light .page-rwa-tokenization .benefit-card .benefit-description { color: var(--XRPL-Black-Black-80, #232325); } html.light .page-rwa-tokenization .developer-tools__description { color: var(--XRPL-Primary-Black, #000); } html.light .page-rwa-tokenization .feature-item__title { color: var(--XRPL-Primary-Black, #000); } html.light .page-rwa-tokenization .feature-item__divider { background-color: black; } html.light .page-rwa-tokenization .rwa-subtitle { color: var(--XRPL-Primary-Black, #000); } html.light .page-rwa-tokenization .feature-title { color: var(--XRPL-Primary-Black, #000); } html.light .page-rwa-tokenization .feature-description { color: var(--XRPL-Black-Black-80, #232325); } html.light .page-rwa-tokenization .com-card-link { color: #7919FF !important; } html.light { /* Algolia Search styles .algolia-autocomplete .ds-dropdown-menu::before { background-color: $gray-100; } .algolia-autocomplete .algolia-docsearch-suggestion { background-color: $gray-100; } .DocSearch-Modal { box-shadow: $light-box-shadow; } */ } html.light .use-case-payments .payments-integration-section .integration-column__title { color: var(--XRPL-Primary-Black, #000); } html.light .use-case-payments .payments-integration-section .integration-column__subtitle { color: var(--XRPL-Black-Black-80, #232325); } html.light .use-case-payments .payments-integration-section .feature-item__title { color: var(--XRPL-Primary-Black, #000); } html.light .use-case-payments .payments-integration-section .feature-item__divider { background-color: #000; } html.light .use-case-payments .payments-project-card { background: #FFF; box-shadow: none; } html.light .use-case-payments .payments-project-card .first-word { color: var(--XRPL-Black-Black-80, #232325); } html.light .use-case-payments .payments-project-card .rest-text { color: var(--XRPL-Black-Black-80, #232325); } html.light .use-case-payments .payments-project-card { /* Light mode payment logos */ } html.light .use-case-payments .payments-project-card .project-logo img.ripple-usd { content: url("../img/uses/lightmode/payments/rlusd.png"); } html.light .use-case-payments .payments-project-card .project-logo img.usdc { content: url("../img/uses/lightmode/payments/usdc.png"); } html.light .use-case-payments .payments-project-card .project-logo img.usdb { content: url("../img/uses/lightmode/payments/usdb.png"); } html.light .use-case-payments .payments-project-card .project-logo img.europ { content: url("../img/uses/lightmode/payments/erop.png"); } html.light .use-case-payments .payments-project-card .project-logo img.xsgd { content: url("../img/uses/lightmode/payments/xsgd.png"); } html.light .use-case-payments .payments-project-card .project-logo img.audd { content: url("../img/uses/lightmode/payments/audd.png"); } html.light .use-case-payments .advantages-section .advantage-item strong { color: var(--XRPL-Black-Black-80, #232325); } html.light { /* Light mode embedded payments icons */ } html.light #embedded-payments-list #digital-wallets { content: url("../img/uses/lightmode/payments/digital-wallet.png"); } html.light #embedded-payments-list #cross-border-remittance { content: url("../img/uses/lightmode/payments/cross-border.png"); } html.light #embedded-payments-list #regulated-foreign-exchange { content: url("../img/uses/lightmode/payments/regulated.png"); } html.light #embedded-payments-list #merchant-settlement { content: url("../img/uses/lightmode/payments/merchant-settlement.png"); } html.light #embedded-payments-list #b2b-payment-rails { content: url("../img/uses/lightmode/payments/b2b-payment.png"); } html.light #embedded-payments-list #compliance-first-payment-acceptance { content: url("../img/uses/lightmode/payments/compliance.png"); } html.light { /* Light mode battle-tested company logos */ } html.light .use-case-payments .battle-tested-section .payments-project-card { background: #FFF !important; } html.light .use-case-payments .battle-tested-section .payments-project-card .project-logo img.coinpayments { content: url("../img/uses/lightmode/payments/coinpayments.png"); } html.light .use-case-payments .battle-tested-section .payments-project-card .project-logo img.ripple { content: url("../img/uses/lightmode/payments/ripple-black.png"); } html.light .use-case-payments .battle-tested-section .payments-project-card .project-logo img.friipay { content: url("../img/uses/lightmode/payments/friipay.png"); } /*# sourceMappingURL=devportal2024-v1.css.map */