:root [data-theme-mode=light] { --c-base: #ffffff; --c-base-inverse: #000000; --c-primary: #0052ff; --c-accent: #e80262; --c-gray: color-mix(in srgb, var(--c-base-inverse) 80%, var(--c-base)); --c-success: #008537; --c-alert: #bd5b00; --c-error: #e72326; } :root [data-theme-mode=dark] { --c-base: #000000; --c-base-inverse: #ffffff; --c-primary: #2469ff; --c-accent: #e80262; --c-gray: color-mix(in srgb, var(--c-base-inverse) 80%, var(--c-base)); --c-success: #008a39; --c-alert: #bd5b00; --c-error: #e72326; } .sui-AtomTag { border-radius: 16px; height: 32px; padding: 0 16px; border: none; align-items: center; align-content: center; background-color: color-mix(in srgb, var(--c-base, white) 60%, #bfc5cc); box-sizing: border-box; cursor: text; display: inline-flex; font-size: 12px; justify-content: center; position: relative; white-space: nowrap; text-decoration: none; } .sui-AtomTag:has(.sui-AtomTag-closeable) { padding-right: 0; } .sui-AtomTag.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag:focus-visible { box-shadow: none; outline: 2px solid color-mix(in srgb, #000e23 80%, transparent); outline-offset: 2px; } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid { background-color: #000e23; color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 90%, #000000); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid[aria-pressed=true] { background-color: color-mix(in srgb, #000e23 80%, #000000); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 70%, #000000); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #000e23 80%, #000000) 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid:disabled, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid[data-disabled=true] { background-color: color-mix(in srgb, #000e23 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid .sui-AtomTag-closeable { color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #ffffff 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid .sui-AtomTag-closeable:focus-visible .sui-AtomTag-closeableIcon { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted { background-color: color-mix(in srgb, #000e23 10%, transparent); color: #000e23; } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { color: #000e23; background-color: color-mix(in srgb, #000e23 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted[aria-pressed=true] { background-color: color-mix(in srgb, #000e23 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 25%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #000e23 20%, #bfc5cc) 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted:disabled, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted[data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #000e23 20%, #bfc5cc) 10%, transparent); color: color-mix(in srgb, #000e23 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted .sui-AtomTag-closeable { color: #000e23; } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #000e23 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed { background-color: transparent; border-color: #000e23; border-width: 1px; color: #000e23; } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 10%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline[aria-pressed=true], .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed[aria-pressed=true] { background-color: color-mix(in srgb, #000e23 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline[aria-pressed=true][data-disabled=true], .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #000e23 15%, #bfc5cc) 15%, transparent); border-color: color-mix(in srgb, #000e23 15%, #bfc5cc); color: color-mix(in srgb, #000e23 15%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline:disabled, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline[data-disabled=true], .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed:disabled, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed[data-disabled=true] { border-color: color-mix(in srgb, #000e23 20%, #bfc5cc); color: color-mix(in srgb, #000e23 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline .sui-AtomTag-closeable, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed .sui-AtomTag-closeable { color: #000e23; } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline .sui-AtomTag-closeable:hover, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #000e23 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline { border-style: solid; } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed { border-style: dashed; } .sui-AtomTag.sui-AtomTag--color-primary .sui-AtomTag-closeable { cursor: pointer; } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid { background-color: #e60e27; color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { background-color: color-mix(in srgb, #e60e27 90%, #000000); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid[aria-pressed=true] { background-color: color-mix(in srgb, #e60e27 80%, #000000); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #e60e27 70%, #000000); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #e60e27 80%, #000000) 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid:disabled, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid[data-disabled=true] { background-color: color-mix(in srgb, #e60e27 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid .sui-AtomTag-closeable { color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #ffffff 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid .sui-AtomTag-closeable:focus-visible .sui-AtomTag-closeableIcon { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted { background-color: color-mix(in srgb, #e60e27 10%, transparent); color: #e60e27; } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { color: #e60e27; background-color: color-mix(in srgb, #e60e27 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted[aria-pressed=true] { background-color: color-mix(in srgb, #e60e27 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #e60e27 25%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #e60e27 20%, #bfc5cc) 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted:disabled, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted[data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #e60e27 20%, #bfc5cc) 10%, transparent); color: color-mix(in srgb, #e60e27 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted .sui-AtomTag-closeable { color: #e60e27; } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #e60e27 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed { background-color: transparent; border-color: #e60e27; border-width: 1px; color: #e60e27; } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #e60e27 10%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline[aria-pressed=true], .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed[aria-pressed=true] { background-color: color-mix(in srgb, #e60e27 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #e60e27 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline[aria-pressed=true][data-disabled=true], .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #e60e27 15%, #bfc5cc) 15%, transparent); border-color: color-mix(in srgb, #e60e27 15%, #bfc5cc); color: color-mix(in srgb, #e60e27 15%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline:disabled, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline[data-disabled=true], .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed:disabled, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed[data-disabled=true] { border-color: color-mix(in srgb, #e60e27 20%, #bfc5cc); color: color-mix(in srgb, #e60e27 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline .sui-AtomTag-closeable, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed .sui-AtomTag-closeable { color: #e60e27; } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline .sui-AtomTag-closeable:hover, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #e60e27 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline { border-style: solid; } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed { border-style: dashed; } .sui-AtomTag.sui-AtomTag--color-accent .sui-AtomTag-closeable { cursor: pointer; } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid { background-color: #017943; color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { background-color: color-mix(in srgb, #017943 90%, #000000); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid[aria-pressed=true] { background-color: color-mix(in srgb, #017943 80%, #000000); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #017943 70%, #000000); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #017943 80%, #000000) 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid:disabled, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid[data-disabled=true] { background-color: color-mix(in srgb, #017943 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid .sui-AtomTag-closeable { color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #ffffff 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid .sui-AtomTag-closeable:focus-visible .sui-AtomTag-closeableIcon { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted { background-color: color-mix(in srgb, #017943 10%, transparent); color: #017943; } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { color: #017943; background-color: color-mix(in srgb, #017943 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted[aria-pressed=true] { background-color: color-mix(in srgb, #017943 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #017943 25%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #017943 20%, #bfc5cc) 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted:disabled, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted[data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #017943 20%, #bfc5cc) 10%, transparent); color: color-mix(in srgb, #017943 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted .sui-AtomTag-closeable { color: #017943; } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #017943 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed { background-color: transparent; border-color: #017943; border-width: 1px; color: #017943; } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #017943 10%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline[aria-pressed=true], .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed[aria-pressed=true] { background-color: color-mix(in srgb, #017943 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #017943 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline[aria-pressed=true][data-disabled=true], .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #017943 15%, #bfc5cc) 15%, transparent); border-color: color-mix(in srgb, #017943 15%, #bfc5cc); color: color-mix(in srgb, #017943 15%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline:disabled, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline[data-disabled=true], .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed:disabled, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed[data-disabled=true] { border-color: color-mix(in srgb, #017943 20%, #bfc5cc); color: color-mix(in srgb, #017943 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline .sui-AtomTag-closeable, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed .sui-AtomTag-closeable { color: #017943; } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline .sui-AtomTag-closeable:hover, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #017943 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline { border-style: solid; } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed { border-style: dashed; } .sui-AtomTag.sui-AtomTag--color-success .sui-AtomTag-closeable { cursor: pointer; } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid { background-color: #d97703; color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { background-color: color-mix(in srgb, #d97703 90%, #000000); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid[aria-pressed=true] { background-color: color-mix(in srgb, #d97703 80%, #000000); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #d97703 70%, #000000); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #d97703 80%, #000000) 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid:disabled, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid[data-disabled=true] { background-color: color-mix(in srgb, #d97703 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid .sui-AtomTag-closeable { color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #ffffff 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid .sui-AtomTag-closeable:focus-visible .sui-AtomTag-closeableIcon { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted { background-color: color-mix(in srgb, #d97703 10%, transparent); color: #d97703; } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { color: #d97703; background-color: color-mix(in srgb, #d97703 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted[aria-pressed=true] { background-color: color-mix(in srgb, #d97703 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #d97703 25%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #d97703 20%, #bfc5cc) 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted:disabled, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted[data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #d97703 20%, #bfc5cc) 10%, transparent); color: color-mix(in srgb, #d97703 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted .sui-AtomTag-closeable { color: #d97703; } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #d97703 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed { background-color: transparent; border-color: #d97703; border-width: 1px; color: #d97703; } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #d97703 10%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline[aria-pressed=true], .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed[aria-pressed=true] { background-color: color-mix(in srgb, #d97703 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #d97703 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline[aria-pressed=true][data-disabled=true], .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #d97703 15%, #bfc5cc) 15%, transparent); border-color: color-mix(in srgb, #d97703 15%, #bfc5cc); color: color-mix(in srgb, #d97703 15%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline:disabled, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline[data-disabled=true], .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed:disabled, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed[data-disabled=true] { border-color: color-mix(in srgb, #d97703 20%, #bfc5cc); color: color-mix(in srgb, #d97703 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline .sui-AtomTag-closeable, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed .sui-AtomTag-closeable { color: #d97703; } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline .sui-AtomTag-closeable:hover, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #d97703 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline { border-style: solid; } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed { border-style: dashed; } .sui-AtomTag.sui-AtomTag--color-alert .sui-AtomTag-closeable { cursor: pointer; } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid { background-color: #b21229; color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { background-color: color-mix(in srgb, #b21229 90%, #000000); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid[aria-pressed=true] { background-color: color-mix(in srgb, #b21229 80%, #000000); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #b21229 70%, #000000); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #b21229 80%, #000000) 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid:disabled, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid[data-disabled=true] { background-color: color-mix(in srgb, #b21229 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid .sui-AtomTag-closeable { color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #ffffff 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid .sui-AtomTag-closeable:focus-visible .sui-AtomTag-closeableIcon { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted { background-color: color-mix(in srgb, #b21229 10%, transparent); color: #b21229; } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { color: #b21229; background-color: color-mix(in srgb, #b21229 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted[aria-pressed=true] { background-color: color-mix(in srgb, #b21229 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #b21229 25%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #b21229 20%, #bfc5cc) 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted:disabled, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted[data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #b21229 20%, #bfc5cc) 10%, transparent); color: color-mix(in srgb, #b21229 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted .sui-AtomTag-closeable { color: #b21229; } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #b21229 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed { background-color: transparent; border-color: #b21229; border-width: 1px; color: #b21229; } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #b21229 10%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline[aria-pressed=true], .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed[aria-pressed=true] { background-color: color-mix(in srgb, #b21229 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #b21229 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline[aria-pressed=true][data-disabled=true], .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #b21229 15%, #bfc5cc) 15%, transparent); border-color: color-mix(in srgb, #b21229 15%, #bfc5cc); color: color-mix(in srgb, #b21229 15%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline:disabled, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline[data-disabled=true], .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed:disabled, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed[data-disabled=true] { border-color: color-mix(in srgb, #b21229 20%, #bfc5cc); color: color-mix(in srgb, #b21229 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline .sui-AtomTag-closeable, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed .sui-AtomTag-closeable { color: #b21229; } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline .sui-AtomTag-closeable:hover, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #b21229 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline { border-style: solid; } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed { border-style: dashed; } .sui-AtomTag.sui-AtomTag--color-error .sui-AtomTag-closeable { cursor: pointer; } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid { background-color: #000e23; color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 90%, #000000); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid[aria-pressed=true] { background-color: color-mix(in srgb, #000e23 80%, #000000); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 70%, #000000); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #000e23 80%, #000000) 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid:disabled, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid[data-disabled=true] { background-color: color-mix(in srgb, #000e23 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid .sui-AtomTag-closeable { color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #ffffff 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid .sui-AtomTag-closeable:focus-visible .sui-AtomTag-closeableIcon { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted { background-color: color-mix(in srgb, #000e23 10%, transparent); color: #000e23; } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { color: #000e23; background-color: color-mix(in srgb, #000e23 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted[aria-pressed=true] { background-color: color-mix(in srgb, #000e23 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 25%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #000e23 20%, #bfc5cc) 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted:disabled, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted[data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #000e23 20%, #bfc5cc) 10%, transparent); color: color-mix(in srgb, #000e23 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted .sui-AtomTag-closeable { color: #000e23; } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #000e23 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed { background-color: transparent; border-color: #000e23; border-width: 1px; color: #000e23; } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 10%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline[aria-pressed=true], .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed[aria-pressed=true] { background-color: color-mix(in srgb, #000e23 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline[aria-pressed=true][data-disabled=true], .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #000e23 15%, #bfc5cc) 15%, transparent); border-color: color-mix(in srgb, #000e23 15%, #bfc5cc); color: color-mix(in srgb, #000e23 15%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline:disabled, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline[data-disabled=true], .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed:disabled, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed[data-disabled=true] { border-color: color-mix(in srgb, #000e23 20%, #bfc5cc); color: color-mix(in srgb, #000e23 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline .sui-AtomTag-closeable, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed .sui-AtomTag-closeable { color: #000e23; } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline .sui-AtomTag-closeable:hover, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #000e23 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline { border-style: solid; } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed { border-style: dashed; } .sui-AtomTag.sui-AtomTag--color-neutral .sui-AtomTag-closeable { cursor: pointer; } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid { background-color: #ffffff; color: #000000; } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { background-color: color-mix(in srgb, #ffffff 90%, #000000); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid[aria-pressed=true] { background-color: color-mix(in srgb, #ffffff 80%, #000000); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #ffffff 70%, #000000); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #ffffff 80%, #000000) 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid:disabled, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid[data-disabled=true] { background-color: color-mix(in srgb, #ffffff 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid .sui-AtomTag-closeable { color: #000000; } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #000000 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid .sui-AtomTag-closeable:focus-visible .sui-AtomTag-closeableIcon { outline: 2px solid color-mix(in srgb, #000000 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid:focus-visible { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted { background-color: color-mix(in srgb, #ffffff 10%, transparent); color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { color: #ffffff; background-color: color-mix(in srgb, #ffffff 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted[aria-pressed=true] { background-color: color-mix(in srgb, #ffffff 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #ffffff 25%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #ffffff 20%, #bfc5cc) 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted:disabled, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted[data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #ffffff 20%, #bfc5cc) 10%, transparent); color: color-mix(in srgb, #ffffff 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted .sui-AtomTag-closeable { color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #ffffff 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted:focus-visible { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed { background-color: transparent; border-color: #ffffff; border-width: 1px; color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #ffffff 10%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline[aria-pressed=true], .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed[aria-pressed=true] { background-color: color-mix(in srgb, #ffffff 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #ffffff 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline[aria-pressed=true][data-disabled=true], .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #ffffff 15%, #bfc5cc) 15%, transparent); border-color: color-mix(in srgb, #ffffff 15%, #bfc5cc); color: color-mix(in srgb, #ffffff 15%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline:disabled, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline[data-disabled=true], .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed:disabled, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed[data-disabled=true] { border-color: color-mix(in srgb, #ffffff 20%, #bfc5cc); color: color-mix(in srgb, #ffffff 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline .sui-AtomTag-closeable, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed .sui-AtomTag-closeable { color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline .sui-AtomTag-closeable:hover, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #ffffff 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline:focus-visible, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed:focus-visible { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline { border-style: solid; } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed { border-style: dashed; } .sui-AtomTag.sui-AtomTag--color-surface .sui-AtomTag-closeable { cursor: pointer; } .sui-AtomTag * ~ .sui-AtomTag-label { margin: 0 0 0 4px; } .sui-AtomTag .sui-AtomTag-label + * { margin: 0 0 0 4px; } .sui-AtomTag .sui-AtomTag-label { display: inline-block; line-height: 32px; max-width: 208px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; } .sui-AtomTag-hasIcon .sui-AtomTag .sui-AtomTag-label, .sui-AtomTag-hasClose .sui-AtomTag .sui-AtomTag-label { max-width: 188px; } .sui-AtomTag-hasIcon.sui-AtomTag-hasClose .sui-AtomTag .sui-AtomTag-label { max-width: 168px; } .sui-AtomTag-closeable { padding: 0; display: flex; height: 100%; justify-content: center; align-items: center; background: transparent; border: none; border-radius: 16px; } .sui-AtomTag-closeable:focus-visible { box-shadow: none; outline: none; } .sui-AtomTag-closeable:focus-visible .sui-AtomTag-closeableIcon { box-shadow: none; outline: 2px solid color-mix(in srgb, #000e23 80%, transparent); outline-offset: 1px; } .sui-AtomTag-closeableIcon { cursor: pointer; line-height: initial; position: relative; border-radius: 50%; background-color: transparent; fill: inherit; color: inherit; } .sui-AtomTag-icon { align-items: center; height: 16px; width: 16px; display: flex; justify-content: center; line-height: initial; vertical-align: middle; margin-left: 0; } .sui-AtomTag-secondary-icon { align-items: center; height: 16px; width: 16px; display: flex; justify-content: center; line-height: initial; vertical-align: middle; margin-right: 0; } .sui-AtomTag-actionable:not(:disabled, [data-disabled=true], [data-read-only=true]) { cursor: pointer; } .sui-AtomTag:disabled, .sui-AtomTag[data-disabled=true], .sui-AtomTag[data-read-only=true] { cursor: default; } .sui-AtomTag--size-xs { border-radius: 8px; height: 16px; padding: 0 4px; } .sui-AtomTag--size-xs.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--size-xs .sui-AtomTag-closeable { padding: 0 4px 0 0; } .sui-AtomTag--size-xs .sui-AtomTag-label { line-height: 16px; } .sui-AtomTag--size-s { border-radius: 12px; height: 24px; padding: 0 8px; } .sui-AtomTag--size-s.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--size-s .sui-AtomTag-closeable { padding: 0 8px 0 0; } .sui-AtomTag--size-s .sui-AtomTag-label { line-height: 24px; } .sui-AtomTag--size-m { border-radius: 16px; height: 32px; padding: 0 16px; } .sui-AtomTag--size-m.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--size-m .sui-AtomTag-closeable { padding: 0 16px 0 0; } .sui-AtomTag--size-m .sui-AtomTag-label { line-height: 32px; } .sui-AtomTag--size-l { border-radius: 20px; height: 40px; padding: 0 24px; } .sui-AtomTag--size-l.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--size-l .sui-AtomTag-closeable { padding: 0 24px 0 0; } .sui-AtomTag--size-l .sui-AtomTag-label { line-height: 40px; } .sui-AtomTag--size-xl { border-radius: 24px; height: 48px; padding: 0 32px; } .sui-AtomTag--size-xl.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--size-xl .sui-AtomTag-closeable { padding: 0 32px 0 0; } .sui-AtomTag--size-xl .sui-AtomTag-label { line-height: 48px; } .sui-AtomTag--responsive { border-radius: 20px; height: 40px; } .sui-AtomTag--responsive:has(.sui-AtomTag-closeable) { padding-right: 0; } .sui-AtomTag--responsive.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--responsive .sui-AtomTag-label { line-height: 40px; } @media (min-width: 600px) { .sui-AtomTag--responsive.sui-AtomTag--size-xs { border-radius: 8px; height: 16px; padding: 0 4px; } .sui-AtomTag--responsive.sui-AtomTag--size-xs .sui-AtomTag-label { line-height: 16px; } .sui-AtomTag--responsive.sui-AtomTag--size-xs.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--responsive.sui-AtomTag--size-xs .sui-AtomTag-closeable { padding: 0 4px 0 0; } .sui-AtomTag--responsive.sui-AtomTag--size-s { border-radius: 12px; height: 24px; padding: 0 8px; } .sui-AtomTag--responsive.sui-AtomTag--size-s .sui-AtomTag-label { line-height: 24px; } .sui-AtomTag--responsive.sui-AtomTag--size-s.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--responsive.sui-AtomTag--size-s .sui-AtomTag-closeable { padding: 0 8px 0 0; } .sui-AtomTag--responsive.sui-AtomTag--size-m { border-radius: 16px; height: 32px; padding: 0 16px; } .sui-AtomTag--responsive.sui-AtomTag--size-m .sui-AtomTag-label { line-height: 32px; } .sui-AtomTag--responsive.sui-AtomTag--size-m.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--responsive.sui-AtomTag--size-m .sui-AtomTag-closeable { padding: 0 16px 0 0; } .sui-AtomTag--responsive.sui-AtomTag--size-l { border-radius: 20px; height: 40px; padding: 0 24px; } .sui-AtomTag--responsive.sui-AtomTag--size-l .sui-AtomTag-label { line-height: 40px; } .sui-AtomTag--responsive.sui-AtomTag--size-l.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--responsive.sui-AtomTag--size-l .sui-AtomTag-closeable { padding: 0 24px 0 0; } .sui-AtomTag--responsive.sui-AtomTag--size-xl { border-radius: 24px; height: 48px; padding: 0 32px; } .sui-AtomTag--responsive.sui-AtomTag--size-xl .sui-AtomTag-label { line-height: 48px; } .sui-AtomTag--responsive.sui-AtomTag--size-xl.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--responsive.sui-AtomTag--size-xl .sui-AtomTag-closeable { padding: 0 32px 0 0; } } @media print { .sui-AtomTag { border-color: color-mix(in srgb, var(--c-base, white) 60%, #bfc5cc); border-style: solid; border-width: 1px; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .sui-PrimitiveLoadingIcon { display: inline-block; border-width: 2px; border-color: currentcolor currentcolor transparent transparent; border-style: solid; border-radius: 9999px; animation: spin 1s linear infinite; width: 100%; height: 100%; box-sizing: border-box; } .sui-AtomButton { background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; border-radius: 4px; border: 1px solid; box-sizing: border-box; display: inline-block; position: relative; font-family: "PoppinsMotor", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; height: 40px; line-height: normal; min-width: 40px; outline: 0; padding: 0 16px; text-decoration: none; text-transform: none; white-space: nowrap; } .sui-AtomButton:focus { outline: 0; } .sui-AtomButton .sui-AtomButton-leftIcon:not(.sui-AtomButton .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton .sui-AtomButton-centerIcon [class*=Icon]), .sui-AtomButton .sui-AtomButton-rightIcon:not(.sui-AtomButton .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton .sui-AtomButton-centerIcon [class*=Icon]), .sui-AtomButton .sui-AtomButton-centerIcon:not(.sui-AtomButton .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton .sui-AtomButton-centerIcon [class*=Icon]) { height: 16px; width: 16px; display: flex; align-content: center; justify-content: center; align-items: center; } .sui-AtomButton .sui-AtomButton-leftIcon { margin-right: 8px; } .sui-AtomButton .sui-AtomButton-rightIcon { margin-left: 8px; } .sui-AtomButton + .sui-AtomButton:not(.sui-AtomButton--fitted):not(.sui-AtomButton-group) { margin-left: 8px; } .sui-AtomButton-inner, .sui-AtomButton-content { display: inline-flex; align-items: center; height: 100%; pointer-events: none; text-decoration: inherit; } .sui-AtomButton--loading .sui-AtomButton-inner { justify-content: center; } .sui-AtomButton--loading .sui-AtomButton-content { opacity: 0; } .sui-AtomButton-leftIcon, .sui-AtomButton-rightIcon, .sui-AtomButton-centerIcon { display: inline-flex; } .sui-AtomButton-leftIcon .sui-AtomIcon, .sui-AtomButton-rightIcon .sui-AtomIcon, .sui-AtomButton-centerIcon .sui-AtomIcon { display: inline-flex; } .sui-AtomButton-leftIcon svg, .sui-AtomButton-rightIcon svg, .sui-AtomButton-centerIcon svg { fill: currentColor; stroke: currentColor; } .sui-AtomButton-centerIcon { align-items: center; justify-content: center; position: absolute; } .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat) { background: transparent; -webkit-user-select: text; -moz-user-select: text; user-select: text; border: none; color: #000e23; font-family: "PoppinsMotor", Helvetica, Arial, sans-serif; font-stretch: normal; font-style: normal; font-weight: 600; letter-spacing: normal; line-height: 1.875; text-align: left; padding: 0; justify-content: center; text-align: center; text-decoration: underline; } .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):hover, .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):active { color: #242f44; text-decoration: underline; } .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--focused, .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):active { background: transparent; } @media (hover: hover) { .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):hover { background: transparent; } } .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative { background: transparent; } .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:active { background: transparent; } @media (hover: hover) { .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:hover { background: transparent; } } .sui-AtomButton--primary.sui-AtomButton--solid { background: #000e23; border-color: #000e23; color: #ffffff; -webkit-text-decoration-line: none; text-decoration-line: none; } .sui-AtomButton--primary.sui-AtomButton--solid.sui-AtomButton--focused, .sui-AtomButton--primary.sui-AtomButton--solid:active { background: #242f44; border-color: #242f44; } @media (hover: hover) { .sui-AtomButton--primary.sui-AtomButton--solid:hover { background: #242f44; border-color: #242f44; } } .sui-AtomButton--primary.sui-AtomButton--solid.sui-AtomButton--negative { background: var(--c-base, #ffffff); border-color: #ffffff; color: #000e23; } .sui-AtomButton--primary.sui-AtomButton--solid.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--primary.sui-AtomButton--solid.sui-AtomButton--negative:active { background: color-mix(in srgb, var(--c-base, white) 80%, #000e23); border-color: color-mix(in srgb, var(--c-base, white) 80%, #000e23); } @media (hover: hover) { .sui-AtomButton--primary.sui-AtomButton--solid.sui-AtomButton--negative:hover { background: color-mix(in srgb, var(--c-base, white) 80%, #000e23); border-color: color-mix(in srgb, var(--c-base, white) 80%, #000e23); } } .sui-AtomButton--primary.sui-AtomButton--outline, .sui-AtomButton--primary.sui-AtomButton--flat { border-color: #000e23; color: #000e23; -webkit-text-decoration-line: none; text-decoration-line: none; } .sui-AtomButton--primary.sui-AtomButton--outline.sui-AtomButton--focused, .sui-AtomButton--primary.sui-AtomButton--outline:active, .sui-AtomButton--primary.sui-AtomButton--flat.sui-AtomButton--focused, .sui-AtomButton--primary.sui-AtomButton--flat:active { background: rgba(0, 14, 35, 0.1607843137); } @media (hover: hover) { .sui-AtomButton--primary.sui-AtomButton--outline:hover, .sui-AtomButton--primary.sui-AtomButton--flat:hover { background: rgba(0, 14, 35, 0.1607843137); } } .sui-AtomButton--primary.sui-AtomButton--outline.sui-AtomButton--negative, .sui-AtomButton--primary.sui-AtomButton--flat.sui-AtomButton--negative { border-color: #ffffff; color: #ffffff; } .sui-AtomButton--primary.sui-AtomButton--outline.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--primary.sui-AtomButton--outline.sui-AtomButton--negative:active, .sui-AtomButton--primary.sui-AtomButton--flat.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--primary.sui-AtomButton--flat.sui-AtomButton--negative:active { background: #242f44; } @media (hover: hover) { .sui-AtomButton--primary.sui-AtomButton--outline.sui-AtomButton--negative:hover, .sui-AtomButton--primary.sui-AtomButton--flat.sui-AtomButton--negative:hover { background: #242f44; } } .sui-AtomButton--primary.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat) { color: #000e23; } .sui-AtomButton--primary.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--focused, .sui-AtomButton--primary.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):active { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #000e23); } @media (hover: hover) { .sui-AtomButton--primary.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):hover { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #000e23); } } .sui-AtomButton--primary.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative { color: #ffffff; } .sui-AtomButton--primary.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--primary.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:active { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #ffffff); } @media (hover: hover) { .sui-AtomButton--primary.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:hover { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #ffffff); } } .sui-AtomButton--accent.sui-AtomButton--solid { background: #e60e27; border-color: #e60e27; color: #ffffff; -webkit-text-decoration-line: none; text-decoration-line: none; } .sui-AtomButton--accent.sui-AtomButton--solid.sui-AtomButton--focused, .sui-AtomButton--accent.sui-AtomButton--solid:active { background: #b21229; border-color: #b21229; } @media (hover: hover) { .sui-AtomButton--accent.sui-AtomButton--solid:hover { background: #b21229; border-color: #b21229; } } .sui-AtomButton--accent.sui-AtomButton--solid.sui-AtomButton--negative { background: var(--c-base, #ffffff); border-color: #ffffff; color: #e60e27; } .sui-AtomButton--accent.sui-AtomButton--solid.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--accent.sui-AtomButton--solid.sui-AtomButton--negative:active { background: color-mix(in srgb, var(--c-base, white) 80%, #e60e27); border-color: color-mix(in srgb, var(--c-base, white) 80%, #e60e27); } @media (hover: hover) { .sui-AtomButton--accent.sui-AtomButton--solid.sui-AtomButton--negative:hover { background: color-mix(in srgb, var(--c-base, white) 80%, #e60e27); border-color: color-mix(in srgb, var(--c-base, white) 80%, #e60e27); } } .sui-AtomButton--accent.sui-AtomButton--outline, .sui-AtomButton--accent.sui-AtomButton--flat { border-color: #e60e27; color: #e60e27; -webkit-text-decoration-line: none; text-decoration-line: none; } .sui-AtomButton--accent.sui-AtomButton--outline.sui-AtomButton--focused, .sui-AtomButton--accent.sui-AtomButton--outline:active, .sui-AtomButton--accent.sui-AtomButton--flat.sui-AtomButton--focused, .sui-AtomButton--accent.sui-AtomButton--flat:active { background: #f7cbcb; } @media (hover: hover) { .sui-AtomButton--accent.sui-AtomButton--outline:hover, .sui-AtomButton--accent.sui-AtomButton--flat:hover { background: #f7cbcb; } } .sui-AtomButton--accent.sui-AtomButton--outline.sui-AtomButton--negative, .sui-AtomButton--accent.sui-AtomButton--flat.sui-AtomButton--negative { border-color: #ffffff; color: #ffffff; } .sui-AtomButton--accent.sui-AtomButton--outline.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--accent.sui-AtomButton--outline.sui-AtomButton--negative:active, .sui-AtomButton--accent.sui-AtomButton--flat.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--accent.sui-AtomButton--flat.sui-AtomButton--negative:active { background: #242f44; } @media (hover: hover) { .sui-AtomButton--accent.sui-AtomButton--outline.sui-AtomButton--negative:hover, .sui-AtomButton--accent.sui-AtomButton--flat.sui-AtomButton--negative:hover { background: #242f44; } } .sui-AtomButton--accent.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat) { color: #e60e27; } .sui-AtomButton--accent.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--focused, .sui-AtomButton--accent.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):active { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #e60e27); } @media (hover: hover) { .sui-AtomButton--accent.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):hover { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #e60e27); } } .sui-AtomButton--accent.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative { color: #ffffff; } .sui-AtomButton--accent.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--accent.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:active { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #ffffff); } @media (hover: hover) { .sui-AtomButton--accent.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:hover { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #ffffff); } } .sui-AtomButton--neutral.sui-AtomButton--solid { background: #000e23; border-color: #000e23; color: #ffffff; -webkit-text-decoration-line: none; text-decoration-line: none; } .sui-AtomButton--neutral.sui-AtomButton--solid.sui-AtomButton--focused, .sui-AtomButton--neutral.sui-AtomButton--solid:active { background: color-mix(in srgb, var(--c-base-inverse, black) 20%, #000e23); border-color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #000e23); } @media (hover: hover) { .sui-AtomButton--neutral.sui-AtomButton--solid:hover { background: color-mix(in srgb, var(--c-base-inverse, black) 20%, #000e23); border-color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #000e23); } } .sui-AtomButton--neutral.sui-AtomButton--solid.sui-AtomButton--negative { background: var(--c-base, #ffffff); border-color: #ffffff; color: #000e23; } .sui-AtomButton--neutral.sui-AtomButton--solid.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--neutral.sui-AtomButton--solid.sui-AtomButton--negative:active { background: color-mix(in srgb, var(--c-base, white) 80%, #000e23); border-color: color-mix(in srgb, var(--c-base, white) 80%, #000e23); } @media (hover: hover) { .sui-AtomButton--neutral.sui-AtomButton--solid.sui-AtomButton--negative:hover { background: color-mix(in srgb, var(--c-base, white) 80%, #000e23); border-color: color-mix(in srgb, var(--c-base, white) 80%, #000e23); } } .sui-AtomButton--neutral.sui-AtomButton--outline, .sui-AtomButton--neutral.sui-AtomButton--flat { border-color: #000e23; color: #000e23; -webkit-text-decoration-line: none; text-decoration-line: none; } .sui-AtomButton--neutral.sui-AtomButton--outline.sui-AtomButton--focused, .sui-AtomButton--neutral.sui-AtomButton--outline:active, .sui-AtomButton--neutral.sui-AtomButton--flat.sui-AtomButton--focused, .sui-AtomButton--neutral.sui-AtomButton--flat:active { background: color-mix(in srgb, var(--c-base, white) 80%, #000e23); } @media (hover: hover) { .sui-AtomButton--neutral.sui-AtomButton--outline:hover, .sui-AtomButton--neutral.sui-AtomButton--flat:hover { background: color-mix(in srgb, var(--c-base, white) 80%, #000e23); } } .sui-AtomButton--neutral.sui-AtomButton--outline.sui-AtomButton--negative, .sui-AtomButton--neutral.sui-AtomButton--flat.sui-AtomButton--negative { border-color: #ffffff; color: #ffffff; } .sui-AtomButton--neutral.sui-AtomButton--outline.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--neutral.sui-AtomButton--outline.sui-AtomButton--negative:active, .sui-AtomButton--neutral.sui-AtomButton--flat.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--neutral.sui-AtomButton--flat.sui-AtomButton--negative:active { background: #242f44; } @media (hover: hover) { .sui-AtomButton--neutral.sui-AtomButton--outline.sui-AtomButton--negative:hover, .sui-AtomButton--neutral.sui-AtomButton--flat.sui-AtomButton--negative:hover { background: #242f44; } } .sui-AtomButton--neutral.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat) { color: #000e23; } .sui-AtomButton--neutral.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--focused, .sui-AtomButton--neutral.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):active { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #000e23); } @media (hover: hover) { .sui-AtomButton--neutral.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):hover { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #000e23); } } .sui-AtomButton--neutral.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative { color: #ffffff; } .sui-AtomButton--neutral.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--neutral.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:active { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #ffffff); } @media (hover: hover) { .sui-AtomButton--neutral.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:hover { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #ffffff); } } .sui-AtomButton--success.sui-AtomButton--solid { background: #017943; border-color: #017943; color: #ffffff; -webkit-text-decoration-line: none; text-decoration-line: none; } .sui-AtomButton--success.sui-AtomButton--solid.sui-AtomButton--focused, .sui-AtomButton--success.sui-AtomButton--solid:active { background: color-mix(in srgb, var(--c-base-inverse, black) 20%, #017943); border-color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #017943); } @media (hover: hover) { .sui-AtomButton--success.sui-AtomButton--solid:hover { background: color-mix(in srgb, var(--c-base-inverse, black) 20%, #017943); border-color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #017943); } } .sui-AtomButton--success.sui-AtomButton--solid.sui-AtomButton--negative { background: var(--c-base, #ffffff); border-color: #ffffff; color: #017943; } .sui-AtomButton--success.sui-AtomButton--solid.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--success.sui-AtomButton--solid.sui-AtomButton--negative:active { background: color-mix(in srgb, var(--c-base, white) 80%, #017943); border-color: color-mix(in srgb, var(--c-base, white) 80%, #017943); } @media (hover: hover) { .sui-AtomButton--success.sui-AtomButton--solid.sui-AtomButton--negative:hover { background: color-mix(in srgb, var(--c-base, white) 80%, #017943); border-color: color-mix(in srgb, var(--c-base, white) 80%, #017943); } } .sui-AtomButton--success.sui-AtomButton--outline, .sui-AtomButton--success.sui-AtomButton--flat { border-color: #017943; color: #017943; -webkit-text-decoration-line: none; text-decoration-line: none; } .sui-AtomButton--success.sui-AtomButton--outline.sui-AtomButton--focused, .sui-AtomButton--success.sui-AtomButton--outline:active, .sui-AtomButton--success.sui-AtomButton--flat.sui-AtomButton--focused, .sui-AtomButton--success.sui-AtomButton--flat:active { background: color-mix(in srgb, var(--c-base, white) 80%, #017943); } @media (hover: hover) { .sui-AtomButton--success.sui-AtomButton--outline:hover, .sui-AtomButton--success.sui-AtomButton--flat:hover { background: color-mix(in srgb, var(--c-base, white) 80%, #017943); } } .sui-AtomButton--success.sui-AtomButton--outline.sui-AtomButton--negative, .sui-AtomButton--success.sui-AtomButton--flat.sui-AtomButton--negative { border-color: #ffffff; color: #ffffff; } .sui-AtomButton--success.sui-AtomButton--outline.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--success.sui-AtomButton--outline.sui-AtomButton--negative:active, .sui-AtomButton--success.sui-AtomButton--flat.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--success.sui-AtomButton--flat.sui-AtomButton--negative:active { background: #242f44; } @media (hover: hover) { .sui-AtomButton--success.sui-AtomButton--outline.sui-AtomButton--negative:hover, .sui-AtomButton--success.sui-AtomButton--flat.sui-AtomButton--negative:hover { background: #242f44; } } .sui-AtomButton--success.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat) { color: #017943; } .sui-AtomButton--success.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--focused, .sui-AtomButton--success.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):active { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #017943); } @media (hover: hover) { .sui-AtomButton--success.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):hover { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #017943); } } .sui-AtomButton--success.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative { color: #ffffff; } .sui-AtomButton--success.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--success.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:active { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #ffffff); } @media (hover: hover) { .sui-AtomButton--success.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:hover { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #ffffff); } } .sui-AtomButton--outline, .sui-AtomButton--negative { background: none; } .sui-AtomButton--flat { border: 0; } .sui-AtomButton--solid.sui-AtomButton--primary { box-shadow: none; } .sui-AtomButton--solid.sui-AtomButton--primary.sui-AtomButton--negative { box-shadow: none; } .sui-AtomButton--elevation-large { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16); } .sui-AtomButton--elevation-large.sui-AtomButton--primary { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16); } .sui-AtomButton--elevation-large.sui-AtomButton--primary.sui-AtomButton--negative { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16); } .sui-AtomButton--elevation-medium { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.24); } .sui-AtomButton--elevation-medium.sui-AtomButton--primary { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.24); } .sui-AtomButton--elevation-medium.sui-AtomButton--primary.sui-AtomButton--negative { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.24); } .sui-AtomButton:focus-visible { box-shadow: none; outline: 2px solid color-mix(in srgb, #000e23 80%, transparent); outline-offset: 2px; } .sui-AtomButton--squared { border-radius: 0; } .sui-AtomButton--circular { border-radius: 20px; } .sui-AtomButton--center { text-align: center; } .sui-AtomButton--left { text-align: left; } .sui-AtomButton--right { text-align: right; } .sui-AtomButton--disabled { cursor: default; opacity: 0.3; pointer-events: none; } .sui-AtomButton--small { font-size: 14px; font-weight: 600; height: 32px; min-width: 32px; padding: 0 16px; } .sui-AtomButton--small .sui-AtomButton-leftIcon:not(.sui-AtomButton--small .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton--small .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton--small .sui-AtomButton-centerIcon [class*=Icon]), .sui-AtomButton--small .sui-AtomButton-rightIcon:not(.sui-AtomButton--small .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton--small .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton--small .sui-AtomButton-centerIcon [class*=Icon]), .sui-AtomButton--small .sui-AtomButton-centerIcon:not(.sui-AtomButton--small .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton--small .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton--small .sui-AtomButton-centerIcon [class*=Icon]) { height: 16px; width: 16px; display: flex; align-content: center; justify-content: center; align-items: center; } .sui-AtomButton--small .sui-AtomButton-leftIcon { margin-right: 4px; } .sui-AtomButton--small .sui-AtomButton-rightIcon { margin-left: 4px; } .sui-AtomButton--small.sui-AtomButton--squared { border-radius: 0; } .sui-AtomButton--small.sui-AtomButton--circular { border-radius: 16px; } .sui-AtomButton--large { border-radius: 2px; font-size: 14px; font-weight: 600; height: 48px; min-width: 48px; padding: 0 16px; } .sui-AtomButton--large .sui-AtomButton-leftIcon:not(.sui-AtomButton--large .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton--large .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton--large .sui-AtomButton-centerIcon [class*=Icon]), .sui-AtomButton--large .sui-AtomButton-rightIcon:not(.sui-AtomButton--large .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton--large .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton--large .sui-AtomButton-centerIcon [class*=Icon]), .sui-AtomButton--large .sui-AtomButton-centerIcon:not(.sui-AtomButton--large .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton--large .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton--large .sui-AtomButton-centerIcon [class*=Icon]) { height: 24px; width: 24px; display: flex; align-content: center; justify-content: center; align-items: center; } .sui-AtomButton--large .sui-AtomButton-leftIcon { margin-right: 8px; } .sui-AtomButton--large .sui-AtomButton-rightIcon { margin-left: 8px; } .sui-AtomButton--large.sui-AtomButton--squared { border-radius: 0; } .sui-AtomButton--large.sui-AtomButton--circular { border-radius: 24px; } .sui-AtomButton--fullWidth { justify-content: center; width: 100%; } .sui-AtomButton--empty { padding: 0; } .sui-AtomButton--empty .sui-AtomButton-leftIcon, .sui-AtomButton--empty .sui-AtomButton-rightIcon { margin: 0; } .sui-AtomButton-group { margin-left: -1px; margin-right: 0; padding: 0 16px; } .sui-AtomButton-group + .sui-AtomButton-group { margin-left: -1px; margin-right: 0; } .sui-AtomButton-group--middle.sui-AtomButton { border-radius: 0; } .sui-AtomButton-group--first.sui-AtomButton { border-bottom-right-radius: 0; border-top-right-radius: 0; } .sui-AtomButton-group--last.sui-AtomButton { border-bottom-left-radius: 0; border-top-left-radius: 0; } .sui-AtomButton-group--selected.sui-AtomButton { border-radius: none; box-shadow: none; } .sui-AtomButton-group--focused { border: 1px solid; } #didomi-host { font-family: "PoppinsMotor", Helvetica, Arial, sans-serif !important; } #didomi-host .didomi-popup-notice-logo { min-height: 37px !important; } #didomi-host .didomi-popup-container.didomi-popup__dialog.didomi-popup-notice.didomi-popup-notice-info-type.didomi-popup-notice-with-data-processing { max-width: 448px !important; padding: 24px !important; } #didomi-host .didomi-popup-notice.didomi-popup-notice-with-data-processing { max-width: 448px !important; } #didomi-host .didomi-popup-notice .didomi-popup-notice-buttons { gap: 16px !important; } #didomi-host .didomi-popup-notice .didomi-popup-notice-buttons button { width: 100% !important; } #didomi-host .didomi-popup-notice-buttons { flex-direction: column !important; margin-top: 24px !important; } #didomi-host .didomi-popup-notice-buttons .didomi-components-button:nth-child(1) { order: 3 !important; } #didomi-host .didomi-popup-notice-buttons .didomi-components-button:nth-child(2) { order: 2 !important; } #didomi-host .didomi-popup-notice-buttons .didomi-components-button:nth-child(3) { order: 1 !important; } #didomi-host .didomi-popup-container, #didomi-host .didomi-exterior-border { border-radius: 4px !important; border: 0 !important; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.24) !important; } #didomi-host .multiple.didomi-buttons.didomi-popup-notice-buttons button { margin-top: 0px !important; } #didomi-host .didomi-components-button { background-color: #000e23 !important; color: white !important; min-width: auto !important; height: 40px !important; border-radius: 20px !important; font-size: 14px !important; margin-right: 0px !important; border-color: transparent !important; } #didomi-host .didomi-components-button:hover { background-color: #242f44 !important; } #didomi-host .didomi-components-button:disabled { background-color: #000e23 !important; border: none !important; } #didomi-host .didomi-components-button:disabled span { color: #000e23 !important; } #didomi-host .didomi-components-button.didomi-components-button.didomi-button.didomi-learn-more-button.didomi-button-standard.standard-button { background-color: #000e23 !important; color: #ffffff !important; padding: 8px 16px !important; text-align: center !important; font-weight: 700 !important; font-size: 14px !important; text-decoration: none !important; } #didomi-host .didomi-components-button.didomi-components-button.didomi-button.didomi-learn-more-button.didomi-button-standard.standard-button:hover { background-color: #242f44 !important; } #didomi-host .didomi-consent-popup-view-vendors-list-link { border-radius: 20px !important; background-color: #ffffff !important; border: 2px solid #000e23 !important; color: #000e23 !important; padding: 8px 16px !important; height: auto !important; } #didomi-host .didomi-consent-popup-view-vendors-list-link:hover { background-color: #ffffff !important; } #didomi-host .didomi-consent-popup-view-vendors-list-link span { color: #000e23 !important; font-size: 14px !important; } #didomi-host .didomi-popup-footer { padding: 24px; } #didomi-host .didomi-notice-view-partners-link-in-text { font-weight: 600; } #didomi-host .didomi-consent-popup-footer.didomi-popup-footer { padding: 24px !important; } #didomi-host .didomi-consent-popup-body.didomi-popup-body { padding: 24px !important; } #didomi-host .didomi-components-radio__option { border: 1px solid #eef0f4 !important; height: 24px !important; padding: 0 8px !important; border-radius: 20px !important; } #didomi-host .didomi-components-radio__option span { color: #000e23 !important; } #didomi-host .didomi-components-radio__option--selected { border-color: transparent !important; } #didomi-host .didomi-components-radio__option--selected span { color: #ffffff !important; } #didomi-host .didomi-notice-data-processing-container.didomi-popup-notice-data-processing-list { text-align: left !important; } #didomi-host .didomi-notice-data-processing-title { margin-bottom: 4px !important; } #didomi-host .didomi-notice-data-processing-list span { font-weight: 400 !important; font-size: 12px !important; color: #000e23 !important; } #didomi-host .didomi-popup-notice-text p { font-size: 12px !important; } #didomi-host .didomi-popup-notice-text a { font-weight: 600 !important; } .cc-ToolTip { display: none; pointer-events: none; position: absolute; width: 250px; } .sui-AtomTooltip { font-size: 12px; word-wrap: break-word; } .sui-AtomTooltip .sui-AtomTooltip-inner { -webkit-box-orient: vertical; -webkit-line-clamp: 10; background-color: #000e23; border-color: #000e23; border-radius: 4px; border-style: solid; border-width: 1px; color: #ffffff; display: -webkit-box; line-height: 1.3333333333; max-height: unset; max-width: 390px; padding: 8px; overflow: hidden; text-align: left; text-overflow: ellipsis; } .sui-AtomTooltip .sui-AtomTooltip-arrow { background-color: #000e23; display: block; height: 12px; position: absolute; transform: rotate(45deg); width: 12px; } .sui-AtomTooltip--primaryColor .sui-AtomTooltip-inner { background-color: #000e23; border-color: #000e23; color: #ffffff; } .sui-AtomTooltip--primaryColor .sui-AtomTooltip-arrow { background-color: #000e23; } .sui-AtomTooltip--secondaryColor .sui-AtomTooltip-inner { background-color: #d97703; border-color: #d97703; color: #ffffff; } .sui-AtomTooltip--secondaryColor .sui-AtomTooltip-arrow { background-color: #d97703; } .sui-AtomTooltip--accentColor .sui-AtomTooltip-inner { background-color: #e60e27; border-color: #e60e27; color: #ffffff; } .sui-AtomTooltip--accentColor .sui-AtomTooltip-arrow { background-color: #e60e27; } .sui-AtomTooltip--neutralColor .sui-AtomTooltip-inner { background-color: #000e23; border-color: #000e23; color: #ffffff; } .sui-AtomTooltip--neutralColor .sui-AtomTooltip-arrow { background-color: #000e23; } .sui-AtomTooltip--successColor .sui-AtomTooltip-inner { background-color: #017943; border-color: #017943; color: #ffffff; } .sui-AtomTooltip--successColor .sui-AtomTooltip-arrow { background-color: #017943; } .sui-AtomTooltip--alertColor .sui-AtomTooltip-inner { background-color: #d97703; border-color: #d97703; color: #ffffff; } .sui-AtomTooltip--alertColor .sui-AtomTooltip-arrow { background-color: #d97703; } .sui-AtomTooltip--errorColor .sui-AtomTooltip-inner { background-color: #b21229; border-color: #b21229; color: #ffffff; } .sui-AtomTooltip--errorColor .sui-AtomTooltip-arrow { background-color: #b21229; } /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type=button], [type=reset], [type=submit] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /* TODO This color is not still in our palette until the colors refactor*/ :root [data-theme-mode=light] { --c-base: #ffffff; --c-base-inverse: #000000; --c-primary: #0052ff; --c-accent: #e80262; --c-gray: color-mix(in srgb, var(--c-base-inverse) 80%, var(--c-base)); --c-success: #008537; --c-alert: #bd5b00; --c-error: #e72326; } :root [data-theme-mode=dark] { --c-base: #000000; --c-base-inverse: #ffffff; --c-primary: #2469ff; --c-accent: #e80262; --c-gray: color-mix(in srgb, var(--c-base-inverse) 80%, var(--c-base)); --c-success: #008a39; --c-alert: #bd5b00; --c-error: #e72326; } .sui-AtomTag { border-radius: 16px; height: 32px; padding: 0 16px; border: none; align-items: center; align-content: center; background-color: color-mix(in srgb, var(--c-base, white) 60%, #bfc5cc); box-sizing: border-box; cursor: text; display: inline-flex; font-size: 12px; justify-content: center; position: relative; white-space: nowrap; text-decoration: none; } .sui-AtomTag:has(.sui-AtomTag-closeable) { padding-right: 0; } .sui-AtomTag.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag:focus-visible { box-shadow: none; outline: 2px solid color-mix(in srgb, #000e23 80%, transparent); outline-offset: 2px; } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid { background-color: #000e23; color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 90%, #000000); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid[aria-pressed=true] { background-color: color-mix(in srgb, #000e23 80%, #000000); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 70%, #000000); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #000e23 80%, #000000) 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid:disabled, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid[data-disabled=true] { background-color: color-mix(in srgb, #000e23 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid .sui-AtomTag-closeable { color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #ffffff 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-solid .sui-AtomTag-closeable:focus-visible .sui-AtomTag-closeableIcon { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted { background-color: color-mix(in srgb, #000e23 10%, transparent); color: #000e23; } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { color: #000e23; background-color: color-mix(in srgb, #000e23 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted[aria-pressed=true] { background-color: color-mix(in srgb, #000e23 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 25%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #000e23 20%, #bfc5cc) 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted:disabled, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted[data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #000e23 20%, #bfc5cc) 10%, transparent); color: color-mix(in srgb, #000e23 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted .sui-AtomTag-closeable { color: #000e23; } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-tinted .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #000e23 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed { background-color: transparent; border-color: #000e23; border-width: 1px; color: #000e23; } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 10%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline[aria-pressed=true], .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed[aria-pressed=true] { background-color: color-mix(in srgb, #000e23 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline[aria-pressed=true][data-disabled=true], .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #000e23 15%, #bfc5cc) 15%, transparent); border-color: color-mix(in srgb, #000e23 15%, #bfc5cc); color: color-mix(in srgb, #000e23 15%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline:disabled, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline[data-disabled=true], .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed:disabled, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed[data-disabled=true] { border-color: color-mix(in srgb, #000e23 20%, #bfc5cc); color: color-mix(in srgb, #000e23 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline .sui-AtomTag-closeable, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed .sui-AtomTag-closeable { color: #000e23; } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline .sui-AtomTag-closeable:hover, .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #000e23 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-outline { border-style: solid; } .sui-AtomTag.sui-AtomTag--color-primary.sui-AtomTag--design-dashed { border-style: dashed; } .sui-AtomTag.sui-AtomTag--color-primary .sui-AtomTag-closeable { cursor: pointer; } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid { background-color: #e60e27; color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { background-color: color-mix(in srgb, #e60e27 90%, #000000); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid[aria-pressed=true] { background-color: color-mix(in srgb, #e60e27 80%, #000000); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #e60e27 70%, #000000); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #e60e27 80%, #000000) 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid:disabled, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid[data-disabled=true] { background-color: color-mix(in srgb, #e60e27 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid .sui-AtomTag-closeable { color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #ffffff 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-solid .sui-AtomTag-closeable:focus-visible .sui-AtomTag-closeableIcon { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted { background-color: color-mix(in srgb, #e60e27 10%, transparent); color: #e60e27; } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { color: #e60e27; background-color: color-mix(in srgb, #e60e27 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted[aria-pressed=true] { background-color: color-mix(in srgb, #e60e27 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #e60e27 25%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #e60e27 20%, #bfc5cc) 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted:disabled, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted[data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #e60e27 20%, #bfc5cc) 10%, transparent); color: color-mix(in srgb, #e60e27 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted .sui-AtomTag-closeable { color: #e60e27; } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-tinted .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #e60e27 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed { background-color: transparent; border-color: #e60e27; border-width: 1px; color: #e60e27; } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #e60e27 10%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline[aria-pressed=true], .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed[aria-pressed=true] { background-color: color-mix(in srgb, #e60e27 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #e60e27 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline[aria-pressed=true][data-disabled=true], .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #e60e27 15%, #bfc5cc) 15%, transparent); border-color: color-mix(in srgb, #e60e27 15%, #bfc5cc); color: color-mix(in srgb, #e60e27 15%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline:disabled, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline[data-disabled=true], .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed:disabled, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed[data-disabled=true] { border-color: color-mix(in srgb, #e60e27 20%, #bfc5cc); color: color-mix(in srgb, #e60e27 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline .sui-AtomTag-closeable, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed .sui-AtomTag-closeable { color: #e60e27; } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline .sui-AtomTag-closeable:hover, .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #e60e27 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-outline { border-style: solid; } .sui-AtomTag.sui-AtomTag--color-accent.sui-AtomTag--design-dashed { border-style: dashed; } .sui-AtomTag.sui-AtomTag--color-accent .sui-AtomTag-closeable { cursor: pointer; } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid { background-color: #017943; color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { background-color: color-mix(in srgb, #017943 90%, #000000); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid[aria-pressed=true] { background-color: color-mix(in srgb, #017943 80%, #000000); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #017943 70%, #000000); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #017943 80%, #000000) 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid:disabled, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid[data-disabled=true] { background-color: color-mix(in srgb, #017943 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid .sui-AtomTag-closeable { color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #ffffff 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-solid .sui-AtomTag-closeable:focus-visible .sui-AtomTag-closeableIcon { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted { background-color: color-mix(in srgb, #017943 10%, transparent); color: #017943; } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { color: #017943; background-color: color-mix(in srgb, #017943 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted[aria-pressed=true] { background-color: color-mix(in srgb, #017943 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #017943 25%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #017943 20%, #bfc5cc) 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted:disabled, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted[data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #017943 20%, #bfc5cc) 10%, transparent); color: color-mix(in srgb, #017943 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted .sui-AtomTag-closeable { color: #017943; } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-tinted .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #017943 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed { background-color: transparent; border-color: #017943; border-width: 1px; color: #017943; } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #017943 10%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline[aria-pressed=true], .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed[aria-pressed=true] { background-color: color-mix(in srgb, #017943 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #017943 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline[aria-pressed=true][data-disabled=true], .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #017943 15%, #bfc5cc) 15%, transparent); border-color: color-mix(in srgb, #017943 15%, #bfc5cc); color: color-mix(in srgb, #017943 15%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline:disabled, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline[data-disabled=true], .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed:disabled, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed[data-disabled=true] { border-color: color-mix(in srgb, #017943 20%, #bfc5cc); color: color-mix(in srgb, #017943 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline .sui-AtomTag-closeable, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed .sui-AtomTag-closeable { color: #017943; } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline .sui-AtomTag-closeable:hover, .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #017943 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-outline { border-style: solid; } .sui-AtomTag.sui-AtomTag--color-success.sui-AtomTag--design-dashed { border-style: dashed; } .sui-AtomTag.sui-AtomTag--color-success .sui-AtomTag-closeable { cursor: pointer; } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid { background-color: #d97703; color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { background-color: color-mix(in srgb, #d97703 90%, #000000); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid[aria-pressed=true] { background-color: color-mix(in srgb, #d97703 80%, #000000); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #d97703 70%, #000000); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #d97703 80%, #000000) 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid:disabled, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid[data-disabled=true] { background-color: color-mix(in srgb, #d97703 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid .sui-AtomTag-closeable { color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #ffffff 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-solid .sui-AtomTag-closeable:focus-visible .sui-AtomTag-closeableIcon { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted { background-color: color-mix(in srgb, #d97703 10%, transparent); color: #d97703; } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { color: #d97703; background-color: color-mix(in srgb, #d97703 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted[aria-pressed=true] { background-color: color-mix(in srgb, #d97703 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #d97703 25%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #d97703 20%, #bfc5cc) 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted:disabled, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted[data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #d97703 20%, #bfc5cc) 10%, transparent); color: color-mix(in srgb, #d97703 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted .sui-AtomTag-closeable { color: #d97703; } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-tinted .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #d97703 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed { background-color: transparent; border-color: #d97703; border-width: 1px; color: #d97703; } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #d97703 10%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline[aria-pressed=true], .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed[aria-pressed=true] { background-color: color-mix(in srgb, #d97703 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #d97703 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline[aria-pressed=true][data-disabled=true], .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #d97703 15%, #bfc5cc) 15%, transparent); border-color: color-mix(in srgb, #d97703 15%, #bfc5cc); color: color-mix(in srgb, #d97703 15%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline:disabled, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline[data-disabled=true], .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed:disabled, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed[data-disabled=true] { border-color: color-mix(in srgb, #d97703 20%, #bfc5cc); color: color-mix(in srgb, #d97703 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline .sui-AtomTag-closeable, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed .sui-AtomTag-closeable { color: #d97703; } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline .sui-AtomTag-closeable:hover, .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #d97703 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-outline { border-style: solid; } .sui-AtomTag.sui-AtomTag--color-alert.sui-AtomTag--design-dashed { border-style: dashed; } .sui-AtomTag.sui-AtomTag--color-alert .sui-AtomTag-closeable { cursor: pointer; } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid { background-color: #b21229; color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { background-color: color-mix(in srgb, #b21229 90%, #000000); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid[aria-pressed=true] { background-color: color-mix(in srgb, #b21229 80%, #000000); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #b21229 70%, #000000); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #b21229 80%, #000000) 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid:disabled, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid[data-disabled=true] { background-color: color-mix(in srgb, #b21229 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid .sui-AtomTag-closeable { color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #ffffff 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-solid .sui-AtomTag-closeable:focus-visible .sui-AtomTag-closeableIcon { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted { background-color: color-mix(in srgb, #b21229 10%, transparent); color: #b21229; } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { color: #b21229; background-color: color-mix(in srgb, #b21229 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted[aria-pressed=true] { background-color: color-mix(in srgb, #b21229 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #b21229 25%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #b21229 20%, #bfc5cc) 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted:disabled, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted[data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #b21229 20%, #bfc5cc) 10%, transparent); color: color-mix(in srgb, #b21229 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted .sui-AtomTag-closeable { color: #b21229; } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-tinted .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #b21229 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed { background-color: transparent; border-color: #b21229; border-width: 1px; color: #b21229; } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #b21229 10%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline[aria-pressed=true], .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed[aria-pressed=true] { background-color: color-mix(in srgb, #b21229 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #b21229 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline[aria-pressed=true][data-disabled=true], .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #b21229 15%, #bfc5cc) 15%, transparent); border-color: color-mix(in srgb, #b21229 15%, #bfc5cc); color: color-mix(in srgb, #b21229 15%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline:disabled, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline[data-disabled=true], .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed:disabled, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed[data-disabled=true] { border-color: color-mix(in srgb, #b21229 20%, #bfc5cc); color: color-mix(in srgb, #b21229 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline .sui-AtomTag-closeable, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed .sui-AtomTag-closeable { color: #b21229; } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline .sui-AtomTag-closeable:hover, .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #b21229 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-outline { border-style: solid; } .sui-AtomTag.sui-AtomTag--color-error.sui-AtomTag--design-dashed { border-style: dashed; } .sui-AtomTag.sui-AtomTag--color-error .sui-AtomTag-closeable { cursor: pointer; } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid { background-color: #000e23; color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 90%, #000000); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid[aria-pressed=true] { background-color: color-mix(in srgb, #000e23 80%, #000000); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 70%, #000000); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #000e23 80%, #000000) 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid:disabled, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid[data-disabled=true] { background-color: color-mix(in srgb, #000e23 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid .sui-AtomTag-closeable { color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #ffffff 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-solid .sui-AtomTag-closeable:focus-visible .sui-AtomTag-closeableIcon { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted { background-color: color-mix(in srgb, #000e23 10%, transparent); color: #000e23; } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { color: #000e23; background-color: color-mix(in srgb, #000e23 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted[aria-pressed=true] { background-color: color-mix(in srgb, #000e23 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 25%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #000e23 20%, #bfc5cc) 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted:disabled, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted[data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #000e23 20%, #bfc5cc) 10%, transparent); color: color-mix(in srgb, #000e23 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted .sui-AtomTag-closeable { color: #000e23; } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-tinted .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #000e23 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed { background-color: transparent; border-color: #000e23; border-width: 1px; color: #000e23; } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 10%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline[aria-pressed=true], .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed[aria-pressed=true] { background-color: color-mix(in srgb, #000e23 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #000e23 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline[aria-pressed=true][data-disabled=true], .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #000e23 15%, #bfc5cc) 15%, transparent); border-color: color-mix(in srgb, #000e23 15%, #bfc5cc); color: color-mix(in srgb, #000e23 15%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline:disabled, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline[data-disabled=true], .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed:disabled, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed[data-disabled=true] { border-color: color-mix(in srgb, #000e23 20%, #bfc5cc); color: color-mix(in srgb, #000e23 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline .sui-AtomTag-closeable, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed .sui-AtomTag-closeable { color: #000e23; } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline .sui-AtomTag-closeable:hover, .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #000e23 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-outline { border-style: solid; } .sui-AtomTag.sui-AtomTag--color-neutral.sui-AtomTag--design-dashed { border-style: dashed; } .sui-AtomTag.sui-AtomTag--color-neutral .sui-AtomTag-closeable { cursor: pointer; } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid { background-color: #ffffff; color: #000000; } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { background-color: color-mix(in srgb, #ffffff 90%, #000000); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid[aria-pressed=true] { background-color: color-mix(in srgb, #ffffff 80%, #000000); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #ffffff 70%, #000000); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #ffffff 80%, #000000) 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid:disabled, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid[data-disabled=true] { background-color: color-mix(in srgb, #ffffff 5%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid .sui-AtomTag-closeable { color: #000000; } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #000000 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid .sui-AtomTag-closeable:focus-visible .sui-AtomTag-closeableIcon { outline: 2px solid color-mix(in srgb, #000000 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-solid:focus-visible { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted { background-color: color-mix(in srgb, #ffffff 10%, transparent); color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted.sui-AtomTag-actionable:hover:not([data-disabled=true], :disabled, [data-read-only=true]) { color: #ffffff; background-color: color-mix(in srgb, #ffffff 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted[aria-pressed=true] { background-color: color-mix(in srgb, #ffffff 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #ffffff 25%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #ffffff 20%, #bfc5cc) 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted:disabled, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted[data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #ffffff 20%, #bfc5cc) 10%, transparent); color: color-mix(in srgb, #ffffff 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted .sui-AtomTag-closeable { color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #ffffff 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-tinted:focus-visible { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed { background-color: transparent; border-color: #ffffff; border-width: 1px; color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed.sui-AtomTag-actionable:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #ffffff 10%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline[aria-pressed=true], .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed[aria-pressed=true] { background-color: color-mix(in srgb, #ffffff 15%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]), .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed[aria-pressed=true]:hover:not(:disabled, [data-disabled=true], [data-read-only=true]) { background-color: color-mix(in srgb, #ffffff 20%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline[aria-pressed=true][data-disabled=true], .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed[aria-pressed=true]:disabled, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed[aria-pressed=true][data-disabled=true] { background-color: color-mix(in srgb, color-mix(in srgb, #ffffff 15%, #bfc5cc) 15%, transparent); border-color: color-mix(in srgb, #ffffff 15%, #bfc5cc); color: color-mix(in srgb, #ffffff 15%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline:disabled, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline[data-disabled=true], .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed:disabled, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed[data-disabled=true] { border-color: color-mix(in srgb, #ffffff 20%, #bfc5cc); color: color-mix(in srgb, #ffffff 20%, #bfc5cc); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline .sui-AtomTag-closeable, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed .sui-AtomTag-closeable { color: #ffffff; } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline .sui-AtomTag-closeable:hover, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed .sui-AtomTag-closeable:hover { color: color-mix(in srgb, #ffffff 60%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline:focus-visible, .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed:focus-visible { outline: 2px solid color-mix(in srgb, #ffffff 80%, transparent); } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-outline { border-style: solid; } .sui-AtomTag.sui-AtomTag--color-surface.sui-AtomTag--design-dashed { border-style: dashed; } .sui-AtomTag.sui-AtomTag--color-surface .sui-AtomTag-closeable { cursor: pointer; } .sui-AtomTag * ~ .sui-AtomTag-label { margin: 0 0 0 4px; } .sui-AtomTag .sui-AtomTag-label + * { margin: 0 0 0 4px; } .sui-AtomTag .sui-AtomTag-label { display: inline-block; line-height: 32px; max-width: 208px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; } .sui-AtomTag-hasIcon .sui-AtomTag .sui-AtomTag-label, .sui-AtomTag-hasClose .sui-AtomTag .sui-AtomTag-label { max-width: 188px; } .sui-AtomTag-hasIcon.sui-AtomTag-hasClose .sui-AtomTag .sui-AtomTag-label { max-width: 168px; } .sui-AtomTag-closeable { padding: 0; display: flex; height: 100%; justify-content: center; align-items: center; background: transparent; border: none; border-radius: 16px; } .sui-AtomTag-closeable:focus-visible { box-shadow: none; outline: none; } .sui-AtomTag-closeable:focus-visible .sui-AtomTag-closeableIcon { box-shadow: none; outline: 2px solid color-mix(in srgb, #000e23 80%, transparent); outline-offset: 1px; } .sui-AtomTag-closeableIcon { cursor: pointer; line-height: initial; position: relative; border-radius: 50%; background-color: transparent; fill: inherit; color: inherit; } .sui-AtomTag-icon { align-items: center; height: 16px; width: 16px; display: flex; justify-content: center; line-height: initial; vertical-align: middle; margin-left: 0; } .sui-AtomTag-secondary-icon { align-items: center; height: 16px; width: 16px; display: flex; justify-content: center; line-height: initial; vertical-align: middle; margin-right: 0; } .sui-AtomTag-actionable:not(:disabled, [data-disabled=true], [data-read-only=true]) { cursor: pointer; } .sui-AtomTag:disabled, .sui-AtomTag[data-disabled=true], .sui-AtomTag[data-read-only=true] { cursor: default; } .sui-AtomTag--size-xs { border-radius: 8px; height: 16px; padding: 0 4px; } .sui-AtomTag--size-xs.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--size-xs .sui-AtomTag-closeable { padding: 0 4px 0 0; } .sui-AtomTag--size-xs .sui-AtomTag-label { line-height: 16px; } .sui-AtomTag--size-s { border-radius: 12px; height: 24px; padding: 0 8px; } .sui-AtomTag--size-s.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--size-s .sui-AtomTag-closeable { padding: 0 8px 0 0; } .sui-AtomTag--size-s .sui-AtomTag-label { line-height: 24px; } .sui-AtomTag--size-m { border-radius: 16px; height: 32px; padding: 0 16px; } .sui-AtomTag--size-m.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--size-m .sui-AtomTag-closeable { padding: 0 16px 0 0; } .sui-AtomTag--size-m .sui-AtomTag-label { line-height: 32px; } .sui-AtomTag--size-l { border-radius: 20px; height: 40px; padding: 0 24px; } .sui-AtomTag--size-l.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--size-l .sui-AtomTag-closeable { padding: 0 24px 0 0; } .sui-AtomTag--size-l .sui-AtomTag-label { line-height: 40px; } .sui-AtomTag--size-xl { border-radius: 24px; height: 48px; padding: 0 32px; } .sui-AtomTag--size-xl.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--size-xl .sui-AtomTag-closeable { padding: 0 32px 0 0; } .sui-AtomTag--size-xl .sui-AtomTag-label { line-height: 48px; } .sui-AtomTag--responsive { border-radius: 20px; height: 40px; } .sui-AtomTag--responsive:has(.sui-AtomTag-closeable) { padding-right: 0; } .sui-AtomTag--responsive.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--responsive .sui-AtomTag-label { line-height: 40px; } @media (min-width: 600px) { .sui-AtomTag--responsive.sui-AtomTag--size-xs { border-radius: 8px; height: 16px; padding: 0 4px; } .sui-AtomTag--responsive.sui-AtomTag--size-xs .sui-AtomTag-label { line-height: 16px; } .sui-AtomTag--responsive.sui-AtomTag--size-xs.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--responsive.sui-AtomTag--size-xs .sui-AtomTag-closeable { padding: 0 4px 0 0; } .sui-AtomTag--responsive.sui-AtomTag--size-s { border-radius: 12px; height: 24px; padding: 0 8px; } .sui-AtomTag--responsive.sui-AtomTag--size-s .sui-AtomTag-label { line-height: 24px; } .sui-AtomTag--responsive.sui-AtomTag--size-s.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--responsive.sui-AtomTag--size-s .sui-AtomTag-closeable { padding: 0 8px 0 0; } .sui-AtomTag--responsive.sui-AtomTag--size-m { border-radius: 16px; height: 32px; padding: 0 16px; } .sui-AtomTag--responsive.sui-AtomTag--size-m .sui-AtomTag-label { line-height: 32px; } .sui-AtomTag--responsive.sui-AtomTag--size-m.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--responsive.sui-AtomTag--size-m .sui-AtomTag-closeable { padding: 0 16px 0 0; } .sui-AtomTag--responsive.sui-AtomTag--size-l { border-radius: 20px; height: 40px; padding: 0 24px; } .sui-AtomTag--responsive.sui-AtomTag--size-l .sui-AtomTag-label { line-height: 40px; } .sui-AtomTag--responsive.sui-AtomTag--size-l.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--responsive.sui-AtomTag--size-l .sui-AtomTag-closeable { padding: 0 24px 0 0; } .sui-AtomTag--responsive.sui-AtomTag--size-xl { border-radius: 24px; height: 48px; padding: 0 32px; } .sui-AtomTag--responsive.sui-AtomTag--size-xl .sui-AtomTag-label { line-height: 48px; } .sui-AtomTag--responsive.sui-AtomTag--size-xl.sui-AtomTag-hasClose { padding-right: 0; } .sui-AtomTag--responsive.sui-AtomTag--size-xl .sui-AtomTag-closeable { padding: 0 32px 0 0; } } @media print { .sui-AtomTag { border-color: color-mix(in srgb, var(--c-base, white) 60%, #bfc5cc); border-style: solid; border-width: 1px; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .sui-PrimitiveLoadingIcon { display: inline-block; border-width: 2px; border-color: currentcolor currentcolor transparent transparent; border-style: solid; border-radius: 9999px; animation: spin 1s linear infinite; width: 100%; height: 100%; box-sizing: border-box; } .sui-AtomButton { background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; border-radius: 4px; border: 1px solid; box-sizing: border-box; display: inline-block; position: relative; font-family: "PoppinsMotor", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; height: 40px; line-height: normal; min-width: 40px; outline: 0; padding: 0 16px; text-decoration: none; text-transform: none; white-space: nowrap; } .sui-AtomButton:focus { outline: 0; } .sui-AtomButton .sui-AtomButton-leftIcon:not(.sui-AtomButton .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton .sui-AtomButton-centerIcon [class*=Icon]), .sui-AtomButton .sui-AtomButton-rightIcon:not(.sui-AtomButton .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton .sui-AtomButton-centerIcon [class*=Icon]), .sui-AtomButton .sui-AtomButton-centerIcon:not(.sui-AtomButton .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton .sui-AtomButton-centerIcon [class*=Icon]) { height: 16px; width: 16px; display: flex; align-content: center; justify-content: center; align-items: center; } .sui-AtomButton .sui-AtomButton-leftIcon { margin-right: 8px; } .sui-AtomButton .sui-AtomButton-rightIcon { margin-left: 8px; } .sui-AtomButton + .sui-AtomButton:not(.sui-AtomButton--fitted):not(.sui-AtomButton-group) { margin-left: 8px; } .sui-AtomButton-inner, .sui-AtomButton-content { display: inline-flex; align-items: center; height: 100%; pointer-events: none; text-decoration: inherit; } .sui-AtomButton--loading .sui-AtomButton-inner { justify-content: center; } .sui-AtomButton--loading .sui-AtomButton-content { opacity: 0; } .sui-AtomButton-leftIcon, .sui-AtomButton-rightIcon, .sui-AtomButton-centerIcon { display: inline-flex; } .sui-AtomButton-leftIcon .sui-AtomIcon, .sui-AtomButton-rightIcon .sui-AtomIcon, .sui-AtomButton-centerIcon .sui-AtomIcon { display: inline-flex; } .sui-AtomButton-leftIcon svg, .sui-AtomButton-rightIcon svg, .sui-AtomButton-centerIcon svg { fill: currentColor; stroke: currentColor; } .sui-AtomButton-centerIcon { align-items: center; justify-content: center; position: absolute; } .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat) { background: transparent; -webkit-user-select: text; -moz-user-select: text; user-select: text; border: none; color: #000e23; font-family: "PoppinsMotor", Helvetica, Arial, sans-serif; font-stretch: normal; font-style: normal; font-weight: 600; letter-spacing: normal; line-height: 1.875; text-align: left; padding: 0; justify-content: center; text-align: center; text-decoration: underline; } .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):hover, .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):active { color: #242f44; text-decoration: underline; } .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--focused, .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):active { background: transparent; } @media (hover: hover) { .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):hover { background: transparent; } } .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative { background: transparent; } .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:active { background: transparent; } @media (hover: hover) { .sui-AtomButton.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:hover { background: transparent; } } .sui-AtomButton--primary.sui-AtomButton--solid { background: #000e23; border-color: #000e23; color: #ffffff; -webkit-text-decoration-line: none; text-decoration-line: none; } .sui-AtomButton--primary.sui-AtomButton--solid.sui-AtomButton--focused, .sui-AtomButton--primary.sui-AtomButton--solid:active { background: #242f44; border-color: #242f44; } @media (hover: hover) { .sui-AtomButton--primary.sui-AtomButton--solid:hover { background: #242f44; border-color: #242f44; } } .sui-AtomButton--primary.sui-AtomButton--solid.sui-AtomButton--negative { background: var(--c-base, #ffffff); border-color: #ffffff; color: #000e23; } .sui-AtomButton--primary.sui-AtomButton--solid.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--primary.sui-AtomButton--solid.sui-AtomButton--negative:active { background: color-mix(in srgb, var(--c-base, white) 80%, #000e23); border-color: color-mix(in srgb, var(--c-base, white) 80%, #000e23); } @media (hover: hover) { .sui-AtomButton--primary.sui-AtomButton--solid.sui-AtomButton--negative:hover { background: color-mix(in srgb, var(--c-base, white) 80%, #000e23); border-color: color-mix(in srgb, var(--c-base, white) 80%, #000e23); } } .sui-AtomButton--primary.sui-AtomButton--outline, .sui-AtomButton--primary.sui-AtomButton--flat { border-color: #000e23; color: #000e23; -webkit-text-decoration-line: none; text-decoration-line: none; } .sui-AtomButton--primary.sui-AtomButton--outline.sui-AtomButton--focused, .sui-AtomButton--primary.sui-AtomButton--outline:active, .sui-AtomButton--primary.sui-AtomButton--flat.sui-AtomButton--focused, .sui-AtomButton--primary.sui-AtomButton--flat:active { background: rgba(0, 14, 35, 0.1607843137); } @media (hover: hover) { .sui-AtomButton--primary.sui-AtomButton--outline:hover, .sui-AtomButton--primary.sui-AtomButton--flat:hover { background: rgba(0, 14, 35, 0.1607843137); } } .sui-AtomButton--primary.sui-AtomButton--outline.sui-AtomButton--negative, .sui-AtomButton--primary.sui-AtomButton--flat.sui-AtomButton--negative { border-color: #ffffff; color: #ffffff; } .sui-AtomButton--primary.sui-AtomButton--outline.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--primary.sui-AtomButton--outline.sui-AtomButton--negative:active, .sui-AtomButton--primary.sui-AtomButton--flat.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--primary.sui-AtomButton--flat.sui-AtomButton--negative:active { background: #242f44; } @media (hover: hover) { .sui-AtomButton--primary.sui-AtomButton--outline.sui-AtomButton--negative:hover, .sui-AtomButton--primary.sui-AtomButton--flat.sui-AtomButton--negative:hover { background: #242f44; } } .sui-AtomButton--primary.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat) { color: #000e23; } .sui-AtomButton--primary.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--focused, .sui-AtomButton--primary.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):active { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #000e23); } @media (hover: hover) { .sui-AtomButton--primary.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):hover { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #000e23); } } .sui-AtomButton--primary.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative { color: #ffffff; } .sui-AtomButton--primary.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--primary.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:active { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #ffffff); } @media (hover: hover) { .sui-AtomButton--primary.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:hover { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #ffffff); } } .sui-AtomButton--accent.sui-AtomButton--solid { background: #e60e27; border-color: #e60e27; color: #ffffff; -webkit-text-decoration-line: none; text-decoration-line: none; } .sui-AtomButton--accent.sui-AtomButton--solid.sui-AtomButton--focused, .sui-AtomButton--accent.sui-AtomButton--solid:active { background: #b21229; border-color: #b21229; } @media (hover: hover) { .sui-AtomButton--accent.sui-AtomButton--solid:hover { background: #b21229; border-color: #b21229; } } .sui-AtomButton--accent.sui-AtomButton--solid.sui-AtomButton--negative { background: var(--c-base, #ffffff); border-color: #ffffff; color: #e60e27; } .sui-AtomButton--accent.sui-AtomButton--solid.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--accent.sui-AtomButton--solid.sui-AtomButton--negative:active { background: color-mix(in srgb, var(--c-base, white) 80%, #e60e27); border-color: color-mix(in srgb, var(--c-base, white) 80%, #e60e27); } @media (hover: hover) { .sui-AtomButton--accent.sui-AtomButton--solid.sui-AtomButton--negative:hover { background: color-mix(in srgb, var(--c-base, white) 80%, #e60e27); border-color: color-mix(in srgb, var(--c-base, white) 80%, #e60e27); } } .sui-AtomButton--accent.sui-AtomButton--outline, .sui-AtomButton--accent.sui-AtomButton--flat { border-color: #e60e27; color: #e60e27; -webkit-text-decoration-line: none; text-decoration-line: none; } .sui-AtomButton--accent.sui-AtomButton--outline.sui-AtomButton--focused, .sui-AtomButton--accent.sui-AtomButton--outline:active, .sui-AtomButton--accent.sui-AtomButton--flat.sui-AtomButton--focused, .sui-AtomButton--accent.sui-AtomButton--flat:active { background: #f7cbcb; } @media (hover: hover) { .sui-AtomButton--accent.sui-AtomButton--outline:hover, .sui-AtomButton--accent.sui-AtomButton--flat:hover { background: #f7cbcb; } } .sui-AtomButton--accent.sui-AtomButton--outline.sui-AtomButton--negative, .sui-AtomButton--accent.sui-AtomButton--flat.sui-AtomButton--negative { border-color: #ffffff; color: #ffffff; } .sui-AtomButton--accent.sui-AtomButton--outline.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--accent.sui-AtomButton--outline.sui-AtomButton--negative:active, .sui-AtomButton--accent.sui-AtomButton--flat.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--accent.sui-AtomButton--flat.sui-AtomButton--negative:active { background: #242f44; } @media (hover: hover) { .sui-AtomButton--accent.sui-AtomButton--outline.sui-AtomButton--negative:hover, .sui-AtomButton--accent.sui-AtomButton--flat.sui-AtomButton--negative:hover { background: #242f44; } } .sui-AtomButton--accent.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat) { color: #e60e27; } .sui-AtomButton--accent.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--focused, .sui-AtomButton--accent.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):active { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #e60e27); } @media (hover: hover) { .sui-AtomButton--accent.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):hover { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #e60e27); } } .sui-AtomButton--accent.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative { color: #ffffff; } .sui-AtomButton--accent.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--accent.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:active { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #ffffff); } @media (hover: hover) { .sui-AtomButton--accent.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:hover { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #ffffff); } } .sui-AtomButton--neutral.sui-AtomButton--solid { background: #000e23; border-color: #000e23; color: #ffffff; -webkit-text-decoration-line: none; text-decoration-line: none; } .sui-AtomButton--neutral.sui-AtomButton--solid.sui-AtomButton--focused, .sui-AtomButton--neutral.sui-AtomButton--solid:active { background: color-mix(in srgb, var(--c-base-inverse, black) 20%, #000e23); border-color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #000e23); } @media (hover: hover) { .sui-AtomButton--neutral.sui-AtomButton--solid:hover { background: color-mix(in srgb, var(--c-base-inverse, black) 20%, #000e23); border-color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #000e23); } } .sui-AtomButton--neutral.sui-AtomButton--solid.sui-AtomButton--negative { background: var(--c-base, #ffffff); border-color: #ffffff; color: #000e23; } .sui-AtomButton--neutral.sui-AtomButton--solid.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--neutral.sui-AtomButton--solid.sui-AtomButton--negative:active { background: color-mix(in srgb, var(--c-base, white) 80%, #000e23); border-color: color-mix(in srgb, var(--c-base, white) 80%, #000e23); } @media (hover: hover) { .sui-AtomButton--neutral.sui-AtomButton--solid.sui-AtomButton--negative:hover { background: color-mix(in srgb, var(--c-base, white) 80%, #000e23); border-color: color-mix(in srgb, var(--c-base, white) 80%, #000e23); } } .sui-AtomButton--neutral.sui-AtomButton--outline, .sui-AtomButton--neutral.sui-AtomButton--flat { border-color: #000e23; color: #000e23; -webkit-text-decoration-line: none; text-decoration-line: none; } .sui-AtomButton--neutral.sui-AtomButton--outline.sui-AtomButton--focused, .sui-AtomButton--neutral.sui-AtomButton--outline:active, .sui-AtomButton--neutral.sui-AtomButton--flat.sui-AtomButton--focused, .sui-AtomButton--neutral.sui-AtomButton--flat:active { background: color-mix(in srgb, var(--c-base, white) 80%, #000e23); } @media (hover: hover) { .sui-AtomButton--neutral.sui-AtomButton--outline:hover, .sui-AtomButton--neutral.sui-AtomButton--flat:hover { background: color-mix(in srgb, var(--c-base, white) 80%, #000e23); } } .sui-AtomButton--neutral.sui-AtomButton--outline.sui-AtomButton--negative, .sui-AtomButton--neutral.sui-AtomButton--flat.sui-AtomButton--negative { border-color: #ffffff; color: #ffffff; } .sui-AtomButton--neutral.sui-AtomButton--outline.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--neutral.sui-AtomButton--outline.sui-AtomButton--negative:active, .sui-AtomButton--neutral.sui-AtomButton--flat.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--neutral.sui-AtomButton--flat.sui-AtomButton--negative:active { background: #242f44; } @media (hover: hover) { .sui-AtomButton--neutral.sui-AtomButton--outline.sui-AtomButton--negative:hover, .sui-AtomButton--neutral.sui-AtomButton--flat.sui-AtomButton--negative:hover { background: #242f44; } } .sui-AtomButton--neutral.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat) { color: #000e23; } .sui-AtomButton--neutral.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--focused, .sui-AtomButton--neutral.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):active { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #000e23); } @media (hover: hover) { .sui-AtomButton--neutral.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):hover { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #000e23); } } .sui-AtomButton--neutral.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative { color: #ffffff; } .sui-AtomButton--neutral.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--neutral.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:active { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #ffffff); } @media (hover: hover) { .sui-AtomButton--neutral.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:hover { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #ffffff); } } .sui-AtomButton--success.sui-AtomButton--solid { background: #017943; border-color: #017943; color: #ffffff; -webkit-text-decoration-line: none; text-decoration-line: none; } .sui-AtomButton--success.sui-AtomButton--solid.sui-AtomButton--focused, .sui-AtomButton--success.sui-AtomButton--solid:active { background: color-mix(in srgb, var(--c-base-inverse, black) 20%, #017943); border-color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #017943); } @media (hover: hover) { .sui-AtomButton--success.sui-AtomButton--solid:hover { background: color-mix(in srgb, var(--c-base-inverse, black) 20%, #017943); border-color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #017943); } } .sui-AtomButton--success.sui-AtomButton--solid.sui-AtomButton--negative { background: var(--c-base, #ffffff); border-color: #ffffff; color: #017943; } .sui-AtomButton--success.sui-AtomButton--solid.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--success.sui-AtomButton--solid.sui-AtomButton--negative:active { background: color-mix(in srgb, var(--c-base, white) 80%, #017943); border-color: color-mix(in srgb, var(--c-base, white) 80%, #017943); } @media (hover: hover) { .sui-AtomButton--success.sui-AtomButton--solid.sui-AtomButton--negative:hover { background: color-mix(in srgb, var(--c-base, white) 80%, #017943); border-color: color-mix(in srgb, var(--c-base, white) 80%, #017943); } } .sui-AtomButton--success.sui-AtomButton--outline, .sui-AtomButton--success.sui-AtomButton--flat { border-color: #017943; color: #017943; -webkit-text-decoration-line: none; text-decoration-line: none; } .sui-AtomButton--success.sui-AtomButton--outline.sui-AtomButton--focused, .sui-AtomButton--success.sui-AtomButton--outline:active, .sui-AtomButton--success.sui-AtomButton--flat.sui-AtomButton--focused, .sui-AtomButton--success.sui-AtomButton--flat:active { background: color-mix(in srgb, var(--c-base, white) 80%, #017943); } @media (hover: hover) { .sui-AtomButton--success.sui-AtomButton--outline:hover, .sui-AtomButton--success.sui-AtomButton--flat:hover { background: color-mix(in srgb, var(--c-base, white) 80%, #017943); } } .sui-AtomButton--success.sui-AtomButton--outline.sui-AtomButton--negative, .sui-AtomButton--success.sui-AtomButton--flat.sui-AtomButton--negative { border-color: #ffffff; color: #ffffff; } .sui-AtomButton--success.sui-AtomButton--outline.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--success.sui-AtomButton--outline.sui-AtomButton--negative:active, .sui-AtomButton--success.sui-AtomButton--flat.sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--success.sui-AtomButton--flat.sui-AtomButton--negative:active { background: #242f44; } @media (hover: hover) { .sui-AtomButton--success.sui-AtomButton--outline.sui-AtomButton--negative:hover, .sui-AtomButton--success.sui-AtomButton--flat.sui-AtomButton--negative:hover { background: #242f44; } } .sui-AtomButton--success.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat) { color: #017943; } .sui-AtomButton--success.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--focused, .sui-AtomButton--success.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):active { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #017943); } @media (hover: hover) { .sui-AtomButton--success.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat):hover { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #017943); } } .sui-AtomButton--success.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative { color: #ffffff; } .sui-AtomButton--success.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative.sui-AtomButton--focused, .sui-AtomButton--success.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:active { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #ffffff); } @media (hover: hover) { .sui-AtomButton--success.sui-AtomButton--link:not(.sui-AtomButton--solid):not(.sui-AtomButton--outline):not(.sui-AtomButton--flat).sui-AtomButton--negative:hover { color: color-mix(in srgb, var(--c-base-inverse, black) 20%, #ffffff); } } .sui-AtomButton--outline, .sui-AtomButton--negative { background: none; } .sui-AtomButton--flat { border: 0; } .sui-AtomButton--solid.sui-AtomButton--primary { box-shadow: none; } .sui-AtomButton--solid.sui-AtomButton--primary.sui-AtomButton--negative { box-shadow: none; } .sui-AtomButton--elevation-large { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16); } .sui-AtomButton--elevation-large.sui-AtomButton--primary { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16); } .sui-AtomButton--elevation-large.sui-AtomButton--primary.sui-AtomButton--negative { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16); } .sui-AtomButton--elevation-medium { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.24); } .sui-AtomButton--elevation-medium.sui-AtomButton--primary { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.24); } .sui-AtomButton--elevation-medium.sui-AtomButton--primary.sui-AtomButton--negative { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.24); } .sui-AtomButton:focus-visible { box-shadow: none; outline: 2px solid color-mix(in srgb, #000e23 80%, transparent); outline-offset: 2px; } .sui-AtomButton--squared { border-radius: 0; } .sui-AtomButton--circular { border-radius: 20px; } .sui-AtomButton--center { text-align: center; } .sui-AtomButton--left { text-align: left; } .sui-AtomButton--right { text-align: right; } .sui-AtomButton--disabled { cursor: default; opacity: 0.3; pointer-events: none; } .sui-AtomButton--small { font-size: 14px; font-weight: 600; height: 32px; min-width: 32px; padding: 0 16px; } .sui-AtomButton--small .sui-AtomButton-leftIcon:not(.sui-AtomButton--small .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton--small .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton--small .sui-AtomButton-centerIcon [class*=Icon]), .sui-AtomButton--small .sui-AtomButton-rightIcon:not(.sui-AtomButton--small .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton--small .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton--small .sui-AtomButton-centerIcon [class*=Icon]), .sui-AtomButton--small .sui-AtomButton-centerIcon:not(.sui-AtomButton--small .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton--small .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton--small .sui-AtomButton-centerIcon [class*=Icon]) { height: 16px; width: 16px; display: flex; align-content: center; justify-content: center; align-items: center; } .sui-AtomButton--small .sui-AtomButton-leftIcon { margin-right: 4px; } .sui-AtomButton--small .sui-AtomButton-rightIcon { margin-left: 4px; } .sui-AtomButton--small.sui-AtomButton--squared { border-radius: 0; } .sui-AtomButton--small.sui-AtomButton--circular { border-radius: 16px; } .sui-AtomButton--large { border-radius: 2px; font-size: 14px; font-weight: 600; height: 48px; min-width: 48px; padding: 0 16px; } .sui-AtomButton--large .sui-AtomButton-leftIcon:not(.sui-AtomButton--large .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton--large .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton--large .sui-AtomButton-centerIcon [class*=Icon]), .sui-AtomButton--large .sui-AtomButton-rightIcon:not(.sui-AtomButton--large .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton--large .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton--large .sui-AtomButton-centerIcon [class*=Icon]), .sui-AtomButton--large .sui-AtomButton-centerIcon:not(.sui-AtomButton--large .sui-AtomButton-leftIcon [class*=Icon], .sui-AtomButton--large .sui-AtomButton-rightIcon [class*=Icon], .sui-AtomButton--large .sui-AtomButton-centerIcon [class*=Icon]) { height: 24px; width: 24px; display: flex; align-content: center; justify-content: center; align-items: center; } .sui-AtomButton--large .sui-AtomButton-leftIcon { margin-right: 8px; } .sui-AtomButton--large .sui-AtomButton-rightIcon { margin-left: 8px; } .sui-AtomButton--large.sui-AtomButton--squared { border-radius: 0; } .sui-AtomButton--large.sui-AtomButton--circular { border-radius: 24px; } .sui-AtomButton--fullWidth { justify-content: center; width: 100%; } .sui-AtomButton--empty { padding: 0; } .sui-AtomButton--empty .sui-AtomButton-leftIcon, .sui-AtomButton--empty .sui-AtomButton-rightIcon { margin: 0; } .sui-AtomButton-group { margin-left: -1px; margin-right: 0; padding: 0 16px; } .sui-AtomButton-group + .sui-AtomButton-group { margin-left: -1px; margin-right: 0; } .sui-AtomButton-group--middle.sui-AtomButton { border-radius: 0; } .sui-AtomButton-group--first.sui-AtomButton { border-bottom-right-radius: 0; border-top-right-radius: 0; } .sui-AtomButton-group--last.sui-AtomButton { border-bottom-left-radius: 0; border-top-left-radius: 0; } .sui-AtomButton-group--selected.sui-AtomButton { border-radius: none; box-shadow: none; } .sui-AtomButton-group--focused { border: 1px solid; } #didomi-host { font-family: "PoppinsMotor", Helvetica, Arial, sans-serif !important; } #didomi-host .didomi-popup-notice-logo { min-height: 37px !important; } #didomi-host .didomi-popup-container.didomi-popup__dialog.didomi-popup-notice.didomi-popup-notice-info-type.didomi-popup-notice-with-data-processing { max-width: 448px !important; padding: 24px !important; } #didomi-host .didomi-popup-notice.didomi-popup-notice-with-data-processing { max-width: 448px !important; } #didomi-host .didomi-popup-notice .didomi-popup-notice-buttons { gap: 16px !important; } #didomi-host .didomi-popup-notice .didomi-popup-notice-buttons button { width: 100% !important; } #didomi-host .didomi-popup-notice-buttons { flex-direction: column !important; margin-top: 24px !important; } #didomi-host .didomi-popup-notice-buttons .didomi-components-button:nth-child(1) { order: 3 !important; } #didomi-host .didomi-popup-notice-buttons .didomi-components-button:nth-child(2) { order: 2 !important; } #didomi-host .didomi-popup-notice-buttons .didomi-components-button:nth-child(3) { order: 1 !important; } #didomi-host .didomi-popup-container, #didomi-host .didomi-exterior-border { border-radius: 4px !important; border: 0 !important; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.24) !important; } #didomi-host .multiple.didomi-buttons.didomi-popup-notice-buttons button { margin-top: 0px !important; } #didomi-host .didomi-components-button { background-color: #000e23 !important; color: white !important; min-width: auto !important; height: 40px !important; border-radius: 20px !important; font-size: 14px !important; margin-right: 0px !important; border-color: transparent !important; } #didomi-host .didomi-components-button:hover { background-color: #242f44 !important; } #didomi-host .didomi-components-button:disabled { background-color: #000e23 !important; border: none !important; } #didomi-host .didomi-components-button:disabled span { color: #000e23 !important; } #didomi-host .didomi-components-button.didomi-components-button.didomi-button.didomi-learn-more-button.didomi-button-standard.standard-button { background-color: #000e23 !important; color: #ffffff !important; padding: 8px 16px !important; text-align: center !important; font-weight: 700 !important; font-size: 14px !important; text-decoration: none !important; } #didomi-host .didomi-components-button.didomi-components-button.didomi-button.didomi-learn-more-button.didomi-button-standard.standard-button:hover { background-color: #242f44 !important; } #didomi-host .didomi-consent-popup-view-vendors-list-link { border-radius: 20px !important; background-color: #ffffff !important; border: 2px solid #000e23 !important; color: #000e23 !important; padding: 8px 16px !important; height: auto !important; } #didomi-host .didomi-consent-popup-view-vendors-list-link:hover { background-color: #ffffff !important; } #didomi-host .didomi-consent-popup-view-vendors-list-link span { color: #000e23 !important; font-size: 14px !important; } #didomi-host .didomi-popup-footer { padding: 24px; } #didomi-host .didomi-notice-view-partners-link-in-text { font-weight: 600; } #didomi-host .didomi-consent-popup-footer.didomi-popup-footer { padding: 24px !important; } #didomi-host .didomi-consent-popup-body.didomi-popup-body { padding: 24px !important; } #didomi-host .didomi-components-radio__option { border: 1px solid #eef0f4 !important; height: 24px !important; padding: 0 8px !important; border-radius: 20px !important; } #didomi-host .didomi-components-radio__option span { color: #000e23 !important; } #didomi-host .didomi-components-radio__option--selected { border-color: transparent !important; } #didomi-host .didomi-components-radio__option--selected span { color: #ffffff !important; } #didomi-host .didomi-notice-data-processing-container.didomi-popup-notice-data-processing-list { text-align: left !important; } #didomi-host .didomi-notice-data-processing-title { margin-bottom: 4px !important; } #didomi-host .didomi-notice-data-processing-list span { font-weight: 400 !important; font-size: 12px !important; color: #000e23 !important; } #didomi-host .didomi-popup-notice-text p { font-size: 12px !important; } #didomi-host .didomi-popup-notice-text a { font-weight: 600 !important; } /* latin-ext */ @font-face { font-family: "PoppinsMotor"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://s.ccdn.es/fonts/PoppinsMotor-400.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: "PoppinsMotor"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://s.ccdn.es/fonts/PoppinsMotor-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: "PoppinsMotor"; font-style: normal; font-weight: 600; font-display: swap; src: url(https://s.ccdn.es/fonts/PoppinsMotor-600.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: "PoppinsMotor"; font-style: normal; font-weight: 600; font-display: swap; src: url(https://s.ccdn.es/fonts/PoppinsMotor-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* stylelint-disable */ /* stylelint-enable */ html { font-family: "PoppinsMotor", Helvetica, Arial, sans-serif; height: 100%; } *, :after, :before { box-sizing: border-box; margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; background-color: #eef0f4; color: #000e23; display: flex; flex-direction: column; height: 100vh; } button, input, optgroup, select, textarea { font-family: "PoppinsMotor", Helvetica, Arial, sans-serif; } a { color: #000e23; font-weight: 400; text-decoration: underline; font-size: 14px; } a:focus, a:hover { color: #242f44; text-decoration: underline; } label { font-size: 14px; } div, p { flex-shrink: 1; } form .headline, form h1, .form h1 { flex-shrink: 0; font-size: 20px; font-weight: bold; margin: 0; } h3 { font-size: 14px; letter-spacing: 0; line-height: 1.875; } #casMfaChoosePhone .headline { display: block; font-size: 14px; margin: 16px 0 8px; } input[type=email], input[type=password], input[type=text] { background-color: #ffffff; border-radius: 8px; padding: 0 16px; font-size: 16px; border: none; outline: none; height: 40px; } a.btn-social, a.btn-social:hover { cursor: pointer; display: block; text-decoration: none; width: auto; height: 40px; outline: 0; margin: 4px 0; } #login { border-bottom: 1px solid #f1f1f1; } .input-wrapper { align-items: center; background: #ffffff; border: 1px solid #bbbbbb; border-radius: 8px; cursor: text; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; position: relative; } .show-icon { background: url("data:image/svg+xml;utf8,") no-repeat 0.5rem !important; border-radius: 8px; height: 40px; width: 40px; } .hide-icon { background: url("data:image/svg+xml;utf8,") no-repeat 0.5rem !important; border-radius: 8px; height: 40px; width: 40px; } .view-password { align-items: center; cursor: pointer; display: flex; height: 24px; position: absolute; right: 8px; } .hide-indicator, .view-indicator { display: none; } .hide-indicator { display: none; } .input-label, .password-label-wrapper a { display: inline-block; font-size: 14px; font-weight: 400; margin-bottom: 4px; } a.button, button { background-color: #000e23; border: 1px solid #000e23; border-radius: 24px; color: #ffffff; cursor: pointer; font-size: 16px; font-weight: 600; height: 48px; line-height: 1.7142857143; min-width: 48px; touch-action: manipulation; } a.button:focus, a.button:hover, button:focus, button:hover { background-color: #242f44; border-color: #242f44; text-decoration: none; } select::-ms-expand { display: none; } .container { align-items: center; display: flex; flex: 1; flex-direction: column; padding: 120px 16px 0 16px; } @media (min-width: 800px) { .container { align-items: start; flex-direction: row; max-width: 1280px; margin: 0 auto; width: 100%; } } .main { display: flex; flex: 1; flex-direction: column; max-width: 460px; } @media (min-width: 970px) { .main { align-items: center; flex-basis: 33.33%; max-width: 33.33%; } } .sidebar { order: -1; } @media (min-width: 600px) { .sidebar { width: 460px; } } @media (min-width: 970px) { .sidebar { flex-basis: 33.33%; max-width: 33.33%; } } .dummyElement { display: none; } @media (min-width: 800px) { .dummyElement { display: block; flex-basis: 33.33%; max-width: 33.33%; } } .logo > img { width: 100%; } .main .logo, .sidebar .logo { display: none; } .sidebar-content { margin: 0 16px 24px 16px; max-width: 400px; min-width: 300px; } .copy-wrapper div { display: inline-flex; align-items: flex-start; padding: 8px 0; } .copy-wrapper img .icon { max-width: 24px; max-height: 24px; } .copy p { font-size: 14px; line-height: 1.7142857143; } .copy h2 { padding-bottom: 8px; } .form { background-color: #ffffff; border: none; border-radius: 8px; box-shadow: none; display: flex; flex-flow: column; max-width: 420px; padding: 24px 16px; } @media (min-width: 480px) { .form { min-width: 420px; padding: 32px; } } .form, .form button, .form input { width: 100%; } .form select { font-size: 12px; } .password-label-wrapper { display: flex; justify-content: space-between; } .form-element { margin: 24px 0; } #casMfaChoosePhone .form-element { margin: 0 0 24px 0; } #casMfaChoosePhone .form-element:last-of-type, #casSimpleMfaLoginView .form-element:last-of-type { margin: 0; } input::-ms-reveal { display: none; } #list-providers { margin-bottom: 24px; } .switch-language { display: flex; justify-content: flex-end; margin-top: 32px; } .drop-language-container { display: none; } .drop-language-wrapper { align-items: center; display: inline-flex; justify-content: flex-end; margin: 16px 0; z-index: 2; } .drop-language-wrapper svg { margin-left: 8px; z-index: 1; } .drop-language-wrapper img { z-index: 2; } .drop-language { border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; padding: 4px 16px 4px 32px; margin: -28px; font-size: 12px; } .errors { color: #b21229; } .error-message { font-size: 12px; font-weight: 400; margin-top:4px; } .hidden { display: none; } .error-container { height: 100%; min-height: 100vh; flex-grow: 1; justify-content: space-around; margin: auto; display: flex; flex-direction: column; align-items: center; } .error-container .switch-language { margin-bottom: 3rem; } .error { margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px; max-width: 360px; line-height: 1.6; } .error h2 { font-size: 20px; margin-bottom: 16px; } .error .subline { font-size: 16px; } .error .button, .error .subline, .img-err { margin-bottom: 32px; } @media (min-width: 600px) { .sidebar .logo { margin-top: 32px; } } .form .logo, .main .copy { display: none; } @media (min-width: 600px) { .main { padding: 0 16px; width: 100%; } .form { display: flex; flex-direction: column; justify-content: center; margin-bottom: 16px; } .form .copy { display: none; } .form .copy-wrapper { margin: 24px auto; } } .subline { color: #bfc5cc; } div.errors { border: 1px solid color-mix(in srgb, var(--c-base, white) 20%, #b21229); } .error-message p { line-height: 1.3333333333; } .error-container .drop-language-container { margin-bottom: 64px; } .hide-indicator, .show-icon, .view-indicator, .view-password { color: #000e23; } .sign-up { margin-top: 24px; } .sign-up span { font-size: 14px; font-weight: normal; } .sign-up span:not(.text-normal), .sign-up a { font-weight: bold; } .sidebar .copy-wrapper { display: none; } #passwordRecoveryLink { color: #000e23; cursor: pointer; display: inline-block; font-size: 12px; font-weight: bold; line-height: normal; min-width: 40px; margin-top: 16px; } input.input-wrapper-number { border-radius: 8px; border: 1px solid #dcdcdc; cursor: pointer; font-size: 12px; font-weight: 400; height: 40px; line-height: 1.7142857143; margin: 0 1px; outline: none; padding: 0; text-align: center; width: 40px; } .input-wrapper-number:focus, .input-wrapper-number.error:focus { caret-color: transparent; cursor: text; border: 1px solid #000e23; outline: 0 none; } .input-wrapper-number.error { border: 1px solid #b21229; caret-color: transparent; cursor: text; } #otpSubmitForm .form-element:last-of-type { margin-top: 24px; padding-top: 24px; border-top: 1px solid #f1f1f1; } #otp-resend { display: none; } .alert { display: none; } .adaptive-label-wrapper { align-items: center; display: flex; } .adaptive-checkbox[name=rememberMe] { /* Add if not using autoprefixer */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* For iOS < 15 to remove gradient background */ background-color: #ffffff; /* Not removed via appearance */ margin: 0; box-sizing: border-box; border: 1px solid #bbb; border-radius: 4px; cursor: pointer; height: 18px; margin-right: 4px; min-width: 18px; width: 18px; display: grid; place-content: center; } .adaptive-checkbox::before { content: ""; height: 24px; transform: scale(0); width: 24px; /* Windows High Contrast Mode */ background-color: CanvasText; } .adaptive-checkbox:checked::before { background-color: #ffffff; background-image: url("data:image/svg+xml,"); border-radius: 4px; transform: scale(1); } .adaptive-label { font-weight: 400; line-height: 16px; } #login-submit:disabled { align-content: center; align-items: center; cursor: pointer; display: flex; justify-content: center; opacity: 0.3; position: relative; } #login-submit:disabled .spinner { animation: spin 1s linear infinite; border-color: currentcolor currentcolor transparent transparent; border-radius: 50%; border-style: solid; border-width: 2px; display: inline-block; height: 24px; position: absolute; width: 24px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #mfaChoosePhoneLink { font-size: 12px; } .sui-MoleculeDropdownList { background: #ffffff; border-radius: 8px; box-sizing: border-box; margin: 0; overflow-y: auto; padding: 4px; width: 100%; } .sui-MoleculeDropdownList.is-hidden { display: none; } .sui-MoleculeDropdownList--design-solid { border: 1px solid #bbb; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16); } .sui-MoleculeDropdownList--small { max-height: 145px; } .sui-MoleculeDropdownList--medium { max-height: 220px; } .sui-MoleculeDropdownList--large { max-height: 300px; } .sui-MoleculeDropdownList:focus { outline: none; } .sui-MoleculeSelect .sui-MoleculeDropdownList { z-index: 800; position: absolute; } .sui-MoleculeSelect-inputSelect-container { align-items: center; border: 1px solid transparent; border-radius: 8px; cursor: pointer; display: flex; } .sui-MoleculeSelect-inputSelect-container .sui-AtomInput-input { background: #ffffff; caret-color: transparent; color: initial; } .is-disabled .sui-MoleculeSelect-inputSelect-container { cursor: default; } .is-disabled .sui-MoleculeSelect-inputSelect-container .sui-AtomInput-input { -webkit-text-fill-color: inherit; background: #f1f1f1; border: 1px solid #bbb; color: inherit; } .is-disabled .sui-MoleculeSelect-inputSelect-container .sui-MoleculeSelect-inputSelect-arrow svg { fill: initial !important; } .sui-MoleculeSelect-inputSelect-container .sui-AtomInput-input:disabled { -webkit-appearance: none; opacity: 1; } .sui-MoleculeSelect-inputSelect-container .sui-AtomInput--withTags, .sui-MoleculeSelect-inputSelect-container .sui-AtomInput-input:first-child { padding-right: 32px; } .sui-MoleculeSelect-inputSelect-arrow { height: 16px; margin-left: -32px; width: 16px; } .sui-MoleculeSelect-inputSelect-arrow--down { transform: rotate(0deg); } .sui-MoleculeSelect-inputSelect-arrow--down.is-open { transform: rotate(180deg); } .sui-MoleculeSelect-inputSelect-arrow svg { fill: initial !important; height: 16px; width: 16px; } .sui-MoleculeSelect--focus .sui-MoleculeSelect-inputSelect-container { border: 1px solid #000e23; box-shadow: 0 0 3px 0 #000e23; outline: 0 none; } .sui-MoleculeSelect--focus .sui-MoleculeSelect-inputSelect-container .sui-AtomInput--withTags, .sui-MoleculeSelect--focus .sui-MoleculeSelect-inputSelect-container .sui-AtomInput-input { border-color: transparent; } .sui-MoleculeSelect.sui-MoleculeSelect--success .sui-MoleculeSelect-inputSelect-container { border-color: #017943; } .sui-MoleculeSelect.sui-MoleculeSelect--success .sui-MoleculeSelect-inputSelect-container .sui-AtomInput--withTags, .sui-MoleculeSelect.sui-MoleculeSelect--success .sui-MoleculeSelect-inputSelect-container .sui-AtomInput-input, .sui-MoleculeSelect.sui-MoleculeSelect--success.sui-MoleculeSelect--focus .sui-MoleculeSelect-inputSelect-container .sui-AtomInput--withTags, .sui-MoleculeSelect.sui-MoleculeSelect--success.sui-MoleculeSelect--focus .sui-MoleculeSelect-inputSelect-container .sui-AtomInput-input { border-color: transparent; } .sui-MoleculeSelect.sui-MoleculeSelect--error .sui-MoleculeSelect-inputSelect-container { border-color: #b21229; } .sui-MoleculeSelect.sui-MoleculeSelect--error .sui-MoleculeSelect-inputSelect-container .sui-AtomInput--withTags, .sui-MoleculeSelect.sui-MoleculeSelect--error .sui-MoleculeSelect-inputSelect-container .sui-AtomInput-input, .sui-MoleculeSelect.sui-MoleculeSelect--error.sui-MoleculeSelect--focus .sui-MoleculeSelect-inputSelect-container .sui-AtomInput--withTags, .sui-MoleculeSelect.sui-MoleculeSelect--error.sui-MoleculeSelect--focus .sui-MoleculeSelect-inputSelect-container .sui-AtomInput-input { border-color: transparent; } .sui-MoleculeSelect.sui-MoleculeSelect--alert .sui-MoleculeSelect-inputSelect-container { border-color: #d97703; } .sui-MoleculeSelect.sui-MoleculeSelect--alert .sui-MoleculeSelect-inputSelect-container .sui-AtomInput--withTags, .sui-MoleculeSelect.sui-MoleculeSelect--alert .sui-MoleculeSelect-inputSelect-container .sui-AtomInput-input, .sui-MoleculeSelect.sui-MoleculeSelect--alert.sui-MoleculeSelect--focus .sui-MoleculeSelect-inputSelect-container .sui-AtomInput--withTags, .sui-MoleculeSelect.sui-MoleculeSelect--alert.sui-MoleculeSelect--focus .sui-MoleculeSelect-inputSelect-container .sui-AtomInput-input { border-color: transparent; } .sui-MoleculeDropdownOption { align-items: center; border-radius: 0; color: inherit; display: flex; margin: 0; min-height: 40px; padding: 0 16px; } .sui-MoleculeDropdownOption.is-selected { font-weight: bold; } .cc-Footer { border-top: 1px solid #cbceec; font-size: 12px; padding: 16px; z-index: 800; } @media (min-width: 600px) { .cc-Footer { display: flex; flex-wrap: wrap; justify-content: flex-start; } } .cc-Footer-logo { -webkit-text-size-adjust: 100%; color: #353535; width: 82px; box-sizing: inherit; margin-right: 24px; padding: 8px 0; } .cc-Footer.is-compressed, .cc-Footer.is-compressed .cc-Footer-list, .cc-Footer.is-compressed .cc-Footer-main { display: block; } .cc-Footer-list { list-style: none; margin: 0; padding: 0; } @media (min-width: 600px) { .cc-Footer-list { align-items: center; display: flex; flex-grow: 1; flex-shrink: 0; } } .cc-Footer-listItem { margin: 0; padding-bottom: 16px; } @media (min-width: 600px) { .cc-Footer-listItem { margin-right: 8px; padding-bottom: 0; } } .cc-Footer-listAnchor { -webkit-text-size-adjust: 100%; box-sizing: inherit; color: #000e23; cursor: pointer; font-size: 12px; line-height: 1.5; text-decoration: none; } .cc-Footer-copyright { color: #777; flex-shrink: 0; font-size: 14px; padding: 8px 0; } @media (min-width: 600px) { .cc-Footer-copyright { text-align: right; } } .cc-LayoutLayoutBasic-header { -webkit-text-size-adjust: 100%; line-height: 1.5; color: #353535; font-size: 14px; box-sizing: inherit; align-items: center; background-color: #000e23; display: flex; justify-content: space-between; padding: 16px 24px; position: absolute; width: 100%; } .cc-LayoutLayoutBasic-header_logo { height: 23px; } .cc-SharedDoubts { align-items: center; background-color: #ffffff; border-radius: 8px; border: 1px solid #f1f1f1; color: #1d1d1d; display: flex; margin: 16px 0; max-width: 420px; padding: 16px; } @media (min-width: 600px) { .cc-SharedDoubts { min-width: 420px; } } .cc-SharedDoubts-icon { width: 24px; vertical-align: bottom; } .cc-SharedDoubts-image { height: 48px; margin-right: 16px; width: 48px; } .cc-SharedDoubts-title { font-size: 16px; font-weight: 600; margin: 0 0 4px; } .cc-SharedDoubts-text { font-size: 14px; font-weight: 400; margin: 0; } .cc-SharedDoubts-textPhone { display: inline-block; } .cc-SharedDoubts-text a { font-weight: 700; line-height: 20.8px; } .cc-SharedDoubts-info { color: #000e23; display: inline; position: relative; } .sui-AtomButton { -webkit-text-size-adjust: 100%; border-radius: 8px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 600; height: 40px; line-height: normal; min-width: 40px; outline: 0; padding: 0 16px; position: relative; text-decoration: none; text-transform: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; white-space: nowrap; background: none; border: 0; text-align: center; -webkit-text-decoration-line: none; text-decoration-line: none; border-color: #ffffff; color: #ffffff; } .sui-AtomButton:hover { background-color: #000e23; } .sui-AtomButton-inner { -webkit-text-size-adjust: 100%; cursor: pointer; line-height: normal; text-transform: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; white-space: nowrap; text-align: center; box-sizing: inherit; align-items: center; display: inline-flex; height: 100%; pointer-events: none; } .sui-AtomInput-input { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: #ffffff; border: 1px solid #bbb; border-radius: 8px; box-sizing: border-box; color: initial; font-size: 14px; min-height: auto; padding-left: 16px; padding-right: 16px; text-overflow: ellipsis; width: 100%; } .sui-AtomInput-input--size { width: inherit; } .sui-AtomInput-input-size-m { height: 40px; min-height: 40px; } .sui-AtomHelpText { color: #5f5f5f; display: block; font-size: 10px; margin: 4px 0 0; } .cc-AuthSmsValidation-alternatives { color: #1d1d1d; } .cc-AuthSmsValidation-alternatives, .cc-AuthSmsValidation-alternatives a { font-size: 12px; line-height: 20px; } .sui-AtomValidationText { display: block; font-size: 8px; margin: 4px 0 0; } .sui-AtomValidationText--error { color: #b21229; font-size: 10px; margin-left: 0; width: 100%; } @media (min-width: 600px) { .cc-AuthSmsValidation-separator { margin: -8px; } } .sui-MoleculeStepper { align-items: stretch; box-sizing: content-box; display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; } .sui-MoleculeStepper--alignment-vertical { flex-direction: column; height: 100%; } .sui-MoleculeStepper--alignment-horizontal { flex-direction: row; width: 100%; } .sui-MoleculeStepper--justifyContent-legacy { justify-content: space-between; } .sui-MoleculeStepper--justifyContent-flex-start { justify-content: flex-start; } .sui-MoleculeStepper--justifyContent-center { justify-content: center; } .sui-MoleculeStepper--justifyContent-flex-end { justify-content: flex-end; } .sui-MoleculeStepper--justifyContent-space-between { justify-content: space-between; } .sui-MoleculeStepper--justifyContent-space-around { justify-content: space-around; } .sui-MoleculeStepper--justifyContent-space-evenly { justify-content: space-evenly; } .sui-MoleculeStepper--design-compressed.sui-MoleculeStepper--alignment-vertical { row-gap: 8px; } .sui-MoleculeStepper--design-compressed.sui-MoleculeStepper--alignment-horizontal { gap: 8px; position: relative; } .sui-MoleculeStepper--design-basic.sui-MoleculeStepper--alignment-vertical { row-gap: 8px; } .sui-MoleculeStepper--design-basic.sui-MoleculeStepper--alignment-horizontal { gap: 8px; position: relative; } .sui-MoleculeStepperStep { align-items: center; box-sizing: content-box; display: flex; flex-direction: column; list-style: none; } .sui-MoleculeStepperStep + .sui-MoleculeStepperStepConnector { list-style: none; } .sui-MoleculeStepperStep .sui-MoleculeStepperStepIcon > * { color: #ffffff; } .sui-MoleculeStepperStep .sui-MoleculeStepperStepLabel { color: #000e23; } .sui-MoleculeStepperStep--design-default .sui-MoleculeStepperStepLabel { align-items: center; display: flex; font-size: inherit; width: 100px; } .sui-MoleculeStepperStep--design-default .sui-MoleculeStepperStepIcon { align-items: center; display: flex; font-size: 24px; height: 40px; justify-content: center; padding: 8px; width: 40px; } .sui-MoleculeStepperStep--design-default + .sui-MoleculeStepperStepConnector { flex-basis: 24px; flex-shrink: 0; } .sui-MoleculeStepperStep--design-default + .sui-MoleculeStepperStepConnector .sui-MoleculeStepperStepConnectorLine { background-color: #bbb; border: 2px solid #bbb; border-radius: 2px; } .sui-MoleculeStepperStep--design-default + .sui-MoleculeStepperStepConnector:last-of-type { display: none; } .sui-MoleculeStepperStep--design-default.sui-MoleculeStepperStep--justifyContent-legacy { flex-grow: 0; } .sui-MoleculeStepperStep--design-default.sui-MoleculeStepperStep--justifyContent-legacy + .sui-MoleculeStepperStepConnector { flex-grow: 1; } .sui-MoleculeStepperStep--design-default.sui-MoleculeStepperStep--alignment-vertical { max-height: 48px; } .sui-MoleculeStepperStep--design-default.sui-MoleculeStepperStep--alignment-vertical .sui-MoleculeStepperStepLabel { justify-content: flex-start; text-align: start; } .sui-MoleculeStepperStep--design-default.sui-MoleculeStepperStep--alignment-horizontal { max-width: 48px; } .sui-MoleculeStepperStep--design-default.sui-MoleculeStepperStep--alignment-horizontal .sui-MoleculeStepperStepLabel { justify-content: center; text-align: center; } .sui-MoleculeStepperStep--design-compressed { flex-basis: 24px; flex-shrink: 0; } .sui-MoleculeStepperStep--design-compressed .sui-MoleculeStepperStepIcon { background-color: #bbb; border-radius: 4px; } .sui-MoleculeStepperStep--design-compressed + .sui-MoleculeStepperStepConnector { display: none; } .sui-MoleculeStepperStep--design-compressed.sui-MoleculeStepperStep--current .sui-MoleculeStepperStepIcon { background-color: #000e23; } .sui-MoleculeStepperStep--design-compressed.sui-MoleculeStepperStep--visited .sui-MoleculeStepperStepIcon { background-color: #000e23; } .sui-MoleculeStepperStep--design-compressed.sui-MoleculeStepperStep--alignment-vertical { align-items: flex-end; flex-direction: row-reverse; gap: 8px; width: 50px; } .sui-MoleculeStepperStep--design-compressed.sui-MoleculeStepperStep--alignment-vertical .sui-MoleculeStepperStepIcon { height: 100%; width: 8px; } .sui-MoleculeStepperStep--design-compressed.sui-MoleculeStepperStep--alignment-vertical .sui-MoleculeStepperStepLabel { align-items: flex-end; display: flex; max-height: 100px; text-orientation: mixed; transform: rotate(180deg); width: 34px; writing-mode: vertical-rl; } .sui-MoleculeStepperStep--design-compressed.sui-MoleculeStepperStep--alignment-horizontal { align-items: flex-start; flex-direction: column-reverse; gap: 8px; width: 50px; } .sui-MoleculeStepperStep--design-compressed.sui-MoleculeStepperStep--alignment-horizontal .sui-MoleculeStepperStepLabel { align-items: flex-end; display: flex; height: 34px; } .sui-MoleculeStepperStep--design-compressed.sui-MoleculeStepperStep--alignment-horizontal .sui-MoleculeStepperStepIcon { height: 8px; width: 100%; } .sui-MoleculeStepperStep--design-compressed.sui-MoleculeStepperStep--justifyContent-legacy { flex-grow: 1; } .sui-MoleculeStepperStep--design-basic { flex-basis: 24px; flex-shrink: 0; } .sui-MoleculeStepperStep--design-basic .sui-MoleculeStepperStepIcon { background-color: #ffffff; border-radius: 4px; } .sui-MoleculeStepperStep--design-basic + .sui-MoleculeStepperStepConnector { display: none; } .sui-MoleculeStepperStep--design-basic.sui-MoleculeStepperStep--current .sui-MoleculeStepperStepIcon { background-color: #000e23; } .sui-MoleculeStepperStep--design-basic.sui-MoleculeStepperStep--current .sui-MoleculeStepperStepLabel { color: #000e23; } .sui-MoleculeStepperStep--design-basic.sui-MoleculeStepperStep--visited .sui-MoleculeStepperStepIcon { background-color: #000e23; } .sui-MoleculeStepperStep--design-basic.sui-MoleculeStepperStep--visited .sui-MoleculeStepperStepLabel { color: #000e23; } .sui-MoleculeStepperStep--design-basic.sui-MoleculeStepperStep--alignment-vertical { flex-direction: row-reverse; gap: 8px; width: 50px; } .sui-MoleculeStepperStep--design-basic.sui-MoleculeStepperStep--alignment-vertical .sui-MoleculeStepperStepIcon { height: 100%; width: 8px; } .sui-MoleculeStepperStep--design-basic.sui-MoleculeStepperStep--alignment-vertical .sui-MoleculeStepperStepLabel { align-items: flex-end; display: flex; text-orientation: mixed; transform: rotate(180deg); width: 34px; writing-mode: vertical-rl; } .sui-MoleculeStepperStep--design-basic.sui-MoleculeStepperStep--alignment-horizontal { flex-direction: column-reverse; gap: 8px; width: 50px; } .sui-MoleculeStepperStep--design-basic.sui-MoleculeStepperStep--alignment-horizontal .sui-MoleculeStepperStepLabel { align-items: flex-end; display: flex; height: 34px; } .sui-MoleculeStepperStep--design-basic.sui-MoleculeStepperStep--alignment-horizontal .sui-MoleculeStepperStepIcon { height: 8px; width: 100%; } .sui-MoleculeStepperStep--design-basic.sui-MoleculeStepperStep--justifyContent-legacy { flex-grow: 1; } .sui-MoleculeStepperStep--alignment-vertical { flex-direction: row; justify-content: flex-start; } .sui-MoleculeStepperStep--alignment-vertical + .sui-MoleculeStepperStepConnector .sui-MoleculeStepperStepConnectorLine { height: calc(100% - 12px); margin: 4px 0 4px 24px; width: 4px; } .sui-MoleculeStepperStep--alignment-horizontal { flex-direction: column; height: 100%; } .sui-MoleculeStepperStep--alignment-horizontal + .sui-MoleculeStepperStepConnector { height: 100%; } .sui-MoleculeStepperStep--alignment-horizontal + .sui-MoleculeStepperStepConnector .sui-MoleculeStepperStepConnectorLine { height: 4px; margin: 24px 4px 0; width: calc(100% - 12px); } .sui-MoleculeStepperStep--current, .sui-MoleculeStepperStep--current .sui-MoleculeStepperStepIcon > * { color: #000e23; } .sui-MoleculeStepperStep--visited { color: #000e23; } .sui-MoleculeStepperStep--visited + .sui-MoleculeStepperStepConnector .sui-MoleculeStepperStepConnectorLine { background-color: #000e23; border-color: #000e23; } .sui-MoleculeStepperStep--visited .sui-MoleculeStepperStepIcon > * { color: #000e23; } .sui-MoleculeProgressSteps { display: flex; flex-direction: column; gap: 8px; } .sui-MoleculeProgressSteps .sui-MoleculeStepper { max-width: 100%; } .sui-MoleculeProgressSteps .sui-MoleculeStepper .sui-MoleculeStepperStepConnector { flex-basis: 24px; } .sui-MoleculeProgressSteps .sui-MoleculeStepper .sui-MoleculeStepperStepConnector .sui-MoleculeStepperStepConnectorLine { background: #ffffff; border-color: #ffffff; border-width: 2px; height: 4px; margin: 29px 4px 0; width: calc(100% - 12px); } .sui-MoleculeProgressSteps .sui-MoleculeStepper:not(.sui-MoleculeStepper--design-compressed) .sui-MoleculeStepperStep { max-width: 56px; } .sui-MoleculeProgressSteps .sui-MoleculeStepper:not(.sui-MoleculeStepper--design-compressed) .sui-MoleculeStepperStep .sui-MoleculeStepperStepIcon { flex-basis: 40px; height: 40px; margin: 4px; padding: 8px; width: 40px; } .sui-MoleculeProgressSteps .sui-MoleculeStepper .sui-MoleculeStepperStep { color: #000e23; flex-basis: 40px; } .sui-MoleculeProgressSteps .sui-MoleculeStepper .sui-MoleculeStepperStep svg { fill: #ffffff; } .sui-MoleculeProgressSteps .sui-MoleculeStepper .sui-MoleculeStepperStep .sui-MoleculeStepperStepLabel { font-size: 10px; width: 100px; white-space: nowrap; } .sui-MoleculeProgressSteps .sui-MoleculeStepper .sui-MoleculeStepperStep.sui-MoleculeStepperStep--current .sui-MoleculeStepperStepIcon, .sui-MoleculeProgressSteps .sui-MoleculeStepper .sui-MoleculeStepperStep.sui-MoleculeStepperStep--visited .sui-MoleculeStepperStepIcon { color: #000e23; } .sui-MoleculeProgressSteps .sui-MoleculeStepper .sui-MoleculeStepperStep.sui-MoleculeStepperStep--current .sui-MoleculeStepperStepIcon svg, .sui-MoleculeProgressSteps .sui-MoleculeStepper .sui-MoleculeStepperStep.sui-MoleculeStepperStep--visited .sui-MoleculeStepperStepIcon svg { fill: #000e23; } .sui-MoleculeProgressSteps .sui-MoleculeStepper .sui-MoleculeStepperStep.sui-MoleculeStepperStep--current .sui-MoleculeStepperStepLabel, .sui-MoleculeProgressSteps .sui-MoleculeStepper .sui-MoleculeStepperStep.sui-MoleculeStepperStep--visited .sui-MoleculeStepperStepLabel { color: #000e23; } .sui-MoleculeProgressSteps .sui-MoleculeStepper .sui-MoleculeStepperStep.sui-MoleculeStepperStep--visited + .sui-MoleculeStepperStepConnector .sui-MoleculeStepperStepConnectorLine { background: #000e23; border-color: #000e23; } .sui-MoleculeProgressSteps .sui-MoleculeStepper .sui-MoleculeStepperStep.sui-MoleculeStepperStep--visited + .sui-MoleculeStepperStepConnector .sui-MoleculeStepperStepConnectorLine svg { fill: #000e23; } .sui-MoleculeProgressSteps .sui-MoleculeProgressSteps-content { display: flex; overflow: hidden; } .sui-MoleculeProgressSteps .sui-MoleculeProgressSteps-content-item { flex-basis: 100%; flex-shrink: 0; margin-right: -100%; } .sui-MoleculeProgressSteps .sui-MoleculeProgressSteps-content-item--active { margin-right: 0; } .sui-MoleculeProgressSteps .sui-MoleculeProgressSteps-content--fixed .sui-MoleculeProgressSteps-content-item { visibility: hidden; } .sui-MoleculeProgressSteps .sui-MoleculeProgressSteps-content--fixed .sui-MoleculeProgressSteps-content-item--active { visibility: inherit; } .sui-MoleculeProgressSteps .sui-MoleculeProgressSteps-content--fluid { display: inherit; overflow: inherit; } .sui-MoleculeProgressSteps .sui-MoleculeProgressSteps-content--fluid .sui-MoleculeProgressSteps-content-item { display: none; } .sui-MoleculeProgressSteps .sui-MoleculeProgressSteps-content--fluid .sui-MoleculeProgressSteps-content-item--active { display: inherit; } .sui-MoleculeProgressSteps--vertical { flex-direction: row; height: 100%; } .sui-MoleculeProgressSteps--vertical .sui-MoleculeStepper:not(.sui-MoleculeStepper--design-compressed) .sui-MoleculeStepperStep { max-width: none; } .sui-MoleculeProgressSteps--vertical .sui-MoleculeStepper.sui-MoleculeStepper--design-compressed .sui-MoleculeStepperStepLabel { width: 34px; } #bbb .sui-MoleculeProgressSteps--vertical .sui-MoleculeStepper .sui-MoleculeStepperStepConnector { flex-basis: 24px; } .sui-MoleculeProgressSteps--vertical .sui-MoleculeStepper .sui-MoleculeStepperStepConnector .sui-MoleculeStepperStepConnectorLine { border-width: 2px; height: calc(100% - 12px); margin: 4px 0 4px 29px; width: 4px; } .sui-MoleculeSelect { outline: none; position: relative; } .cc-TwoStepsOne { display: flex; flex: 1; flex-direction: column; justify-content: space-between; margin: 0 auto; max-width: 1280px; padding: 24px 16px; } @media (min-width: 600px) { .cc-TwoStepsOne { flex-direction: row; padding: 80px 16px; } .cc-TwoStepsOne-item { flex-basis: 50%; } } @media (min-width: 800px) { .cc-TwoStepsOne-item { flex-basis: 33.33%; } } .cc-TwoStepsOne-itemFalse { display: none; } @media (min-width: 800px) { .cc-TwoStepsOne-itemFalse { display: block; } } .cc-TwoStepsOne-main { color: #4d4d4d; margin-bottom: 24px; } @media (min-width: 600px) { .cc-TwoStepsOne-main { margin-right: 60px; width: 380px; } } .cc-TwoStepsOne-mainProgress { margin-bottom: 16px; max-width: 165px; } .cc-TwoStepsOne-mainTitle { letter-spacing: -1px; margin: 0; font-weight: 600; } .cc-TwoStepsOne-mainMessage { margin: 16px 0 0; } @media (min-width: 600px) { .cc-TwoStepsOne-form { width: 416px; } } .cc-TwoStepsOne-formDoubts { margin: 16px 0; } .cc-Login-welcome { color: #4d4d4d; margin-bottom: 24px; } @media (min-width: 600px) { .cc-Login-welcome { width: 308px; } } .cc-Login-welcomeTitle { color: #4d4d4d; letter-spacing: -1px; margin: 0; font-weight: bold; font-size: 28px; } .cc-Login-welcomeMessage { color: #4d4d4d; font-size: 14px; margin: 16px 0 0; }