/* src/styles.scss */
html,
body {
height: 100%;
}
body {
margin: 0;
}
h1,
h2,
h3,
h4 {
font-family: "SBB Web", sans-serif;
}
h1 {
font-family: "SBB Web", sans-serif !important;
font-weight: 100 !important;
font-size: 28px !important;
line-height: 33.6px !important;
margin: 0 !important;
}
h3 {
font-family: "SBB Web", sans-serif !important;
font-weight: 400 !important;
font-size: 16px !important;
line-height: 20px !important;
}
p {
font-family: "SBB Web", sans-serif !important;
font-weight: 300;
font-size: 14px;
line-height: 20px;
}
span.toolbar-title {
font-family: "SBB Web", sans-serif !important;
font-weight: 300 !important;
font-size: 22px !important;
line-height: 48px !important;
}
.no-select {
-webkit-user-select: none;
user-select: none;
}
.app-container {
height: 100%;
display: flex;
flex-direction: column;
}
.app-container .app-content {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: auto;
}
.app-container .app-content .app-scanner {
height: 240px;
position: sticky;
top: 0;
z-index: 10;
}
.sbb-sidebar {
width: 201px !important;
}
.sbb-sidebar-mobile-menu-bar {
background-color: var(--sbb-color-red);
background-image: url("./media/Default.svg");
background-repeat: no-repeat;
background-position: top 50% right 15px;
border-bottom: 0 !important;
}
.sbb-sidebar-mobile-menu-bar sbb-icon {
color: white;
}
.sbb-sidebar-container-mobile .sbb-sidebar-content {
margin-top: 0 !important;
}
.sbb-lightbox-content {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.sbb-lightbox-content sbb-radio-group > sbb-radio-button-panel label.sbb-selection-item-label {
align-items: center;
}
.sbb-lightbox-content sbb-radio-group > sbb-radio-button-panel label.sbb-selection-item-label .sbb-selection-container {
margin-top: 0;
}
.sbb-lightbox-content sbb-radio-group > sbb-radio-button-panel label.sbb-selection-item-label .sbb-selection-inner-content {
margin-bottom: 0;
}
.sbb-menu-item.cdk-focused {
color: inherit !important;
}
.mat-drawer-backdrop.mat-drawer-shown {
background-color: rgba(0, 0, 0, 0) !important;
}
.link-button {
background: none;
border: none;
padding: 0;
text-decoration: underline;
cursor: pointer;
outline: none;
}
.h-full {
height: 100%;
display: flex;
}
.hidden {
display: none;
}
.footer {
padding: 24px;
position: sticky;
bottom: 0;
}
.footer::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: var(--sbb-color-background);
border-top: var(--sbb-color-silver) 1px solid;
}
.footer .action-button {
width: 100%;
}
/* node_modules/@sbb-esta/angular/typography.css */
@font-face {
font-family: "SBBWeb Bold";
src: url(https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Bold.woff2) format("woff2"), url(https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Bold.woff) format("woff");
font-display: swap;
}
@font-face {
font-family: "SBBWeb Light";
src: url(https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Light.woff2) format("woff2"), url(https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Light.woff) format("woff");
font-display: swap;
}
@font-face {
font-family: "SBBWeb Roman";
src: url(https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Roman.woff2) format("woff2"), url(https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Roman.woff) format("woff");
font-display: fallback;
}
@font-face {
font-family: "SBBWeb Thin";
src: url(https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Thin.woff2) format("woff2"), url(https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Thin.woff) format("woff");
font-display: swap;
}
@font-face {
font-family: "SBBWeb Ultralight";
src: url(https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-UltraLight.woff2) format("woff2"), url(https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-UltraLight.woff) format("woff");
font-display: swap;
}
:root {
--sbb-font-roman:
SBBWeb Roman,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
--sbb-font-bold:
SBBWeb Bold,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
--sbb-font-light:
SBBWeb Light,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
--sbb-font-thin:
SBBWeb Thin,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
--sbb-color-red: #eb0000;
--sbb-color-red125: #c60018;
--sbb-color-red150: #a20013;
--sbb-color-white: #ffffff;
--sbb-color-milk: #f6f6f6;
--sbb-color-cloud: #e5e5e5;
--sbb-color-silver: #dcdcdc;
--sbb-color-aluminum: #d2d2d2;
--sbb-color-platinum: #cdcdcd;
--sbb-color-cement: #bdbdbd;
--sbb-color-graphite: #b7b7b7;
--sbb-color-storm: #a8a8a8;
--sbb-color-smoke: #8d8d8d;
--sbb-color-metal: #767676;
--sbb-color-granite: #686868;
--sbb-color-anthracite: #5a5a5a;
--sbb-color-iron: #444444;
--sbb-color-charcoal: #212121;
--sbb-color-midnight: #151515;
--sbb-color-black: #000000;
--sbb-color-blue: #2d327d;
--sbb-color-cloud-alpha10: rgba(229, 229, 229, 0.1);
--sbb-color-granite-alpha40: rgba(104, 104, 104, 0.4);
--sbb-color-red-alpha40: rgba(235, 0, 0, 0.4);
--sbb-color-silver-alpha40: rgba(220, 220, 220, 0.4);
--sbb-color-storm-alpha40: rgba(168, 168, 168, 0.4);
--sbb-color-iron-alpha40: rgba(68, 68, 68, 0.4);
--sbb-color-iron-alpha50: rgba(68, 68, 68, 0.5);
--sbb-color-white-alpha50: rgba(255, 255, 255, 0.5);
--sbb-color-white-alpha70: rgba(255, 255, 255, 0.7);
--sbb-color-sky: #0079c7;
--sbb-color-night: #143a85;
--sbb-color-violet: #6f2282;
--sbb-color-autumn: #e84e10;
--sbb-color-orange: #f27e00;
--sbb-color-peach: #fcbb00;
--sbb-color-lemon: #ffde15;
--sbb-color-green: #00973b;
--sbb-color-grey: #666666;
--sbb-color-grey-medium: #979797;
--sbb-color-background: var(--sbb-color-white);
--sbb-color-call-to-action: var(--sbb-color-red);
--sbb-color-call-to-action-hover: var(--sbb-color-red125);
--sbb-color-error: #eb0000;
--sbb-color-text: var(--sbb-color-black);
--sbb-color-weak-accent: var(--sbb-color-granite);
--sbb-color-red_dark-mode: #ff3838;
--sbb-color-red_dark-mode-alpha40: rgba(255, 56, 56, 0.4);
--sbb-color-milk-alpha40: rgba(246, 246, 246, 0.4);
--sbb-color-white-alpha15: rgba(255, 255, 255, 0.15);
--sbb-color-black-alpha50: rgba(0, 0, 0, 0.5);
--sbb-color-cement-alpha40: rgba(189, 189, 189, 0.4);
--sbb-color-black-alpha70: rgba(0, 0, 0, 0.7);
--sbb-scaling-factor: 1;
--sbb-border-radius: calc(0.1333333333rem * var(--sbb-scaling-factor));
--sbb-border-width: calc(0.1333333333rem * var(--sbb-scaling-factor));
--sbb-border-width-negative: calc(var(--sbb-border-width) * -1);
--sbb-border-width-thin: 0.0666666667rem;
--sbb-border-width-thin-negative: calc(var(--sbb-border-width-thin) * -1);
--sbb-button-gap: calc(0.5333333333rem * var(--sbb-scaling-factor));
--sbb-font-size-constant: 1rem;
--sbb-font-size: var(--sbb-font-size-constant);
--sbb-line-height-constant: 1.7333333333rem;
--sbb-line-height: var(--sbb-line-height-constant);
--sbb-line-height-root: 1.7;
--sbb-font-size-small: 0.8666666667rem;
--sbb-line-height-small: 1.3333333333rem;
--sbb-line-height-medium: 1.5333333333rem;
--sbb-font-size-large: 1.3333333333rem;
--sbb-divider-thin: calc(0.5333333333rem * var(--sbb-scaling-factor));
--sbb-divider-small: calc(1.6rem * var(--sbb-scaling-factor));
--sbb-divider-medium: 2.4rem;
--sbb-divider-big: 3.2rem;
--sbb-transition-duration-fast: 225ms;
--sbb-transition-duration-default: 300ms;
--sbb-transition-duration-slow: 500ms;
--sbb-transition-timing-fast-start: cubic-bezier(0.4, 0, 0.2, 1);
--sbb-transition-timing-default: cubic-bezier(0.785, 0.135, 0.15, 0.86);
--sbb-transition-fast-start: var(--sbb-transition-duration-fast) var(--sbb-transition-timing-fast-start);
--sbb-transition-default: var(--sbb-transition-duration-default) var(--sbb-transition-timing-default);
--sbb-badge-background-color: var(--sbb-color-red);
--sbb-badge-background-color-disabled: var(--sbb-color-metal);
--sbb-badge-color: var(--sbb-color-white);
--sbb-breadcrumb-color-default: var(--sbb-color-granite);
--sbb-breadcrumb-url-icon-chevron-small-down-circle: var( --sbb-url-icon-chevron-small-down-circle-small-granite );
--sbb-breadcrumb-url-icon-chevron-small-down-circle-focused: var( --sbb-url-icon-chevron-small-down-circle-small-red125 );
--sbb-breadcrumb-url-icon-chevron-small-right: var( --sbb-url-icon-chevron-small-right-small-platinum );
--sbb-breadcrumb-trigger-padding-horizontal: calc(2rem * var(--sbb-scaling-factor));
--sbb-breadcrumb-trigger-padding-vertical: calc(0.9333333333rem * var(--sbb-scaling-factor));
--sbb-button-height: calc(3.2rem * var(--sbb-scaling-factor));
--sbb-button-icon-top-margin: calc(-0.8333333333rem * var(--sbb-scaling-factor));
--sbb-primary-button-background-color-default: var(--sbb-color-call-to-action);
--sbb-primary-button-background-color-hover: var(--sbb-color-call-to-action-hover);
--sbb-primary-button-background-color-disabled: transpparent;
--sbb-primary-button-color: var(--sbb-color-white);
--sbb-primary-button-color-disabled: var(--sbb-color-granite);
--sbb-primary-alternative-button-background-color-default: var(--sbb-color-granite);
--sbb-primary-alternative-button-background-color-hover: var(--sbb-color-iron);
--sbb-primary-alternative-button-background-color-disabled: transpparent;
--sbb-primary-alternative-button-color: var(--sbb-color-white);
--sbb-primary-alternative-button-color-disabled: var(--sbb-color-granite);
--sbb-secondary-button-background-color-default: var(--sbb-color-silver);
--sbb-secondary-button-background-color-hover: var(--sbb-color-platinum);
--sbb-secondary-button-background-color-disabled: transpparent;
--sbb-secondary-button-color: var(--sbb-color-iron);
--sbb-secondary-button-color-disabled: var(--sbb-color-granite);
--sbb-ghost-button-border-color-default: var(--sbb-color-storm);
--sbb-ghost-button-border-color-hover: var(--sbb-color-iron);
--sbb-ghost-button-border-color-disabled: var(--sbb-color-storm-alpha40);
--sbb-ghost-button-label-color: var(--sbb-color-granite);
--sbb-ghost-button-label-color-disabled: var(--sbb-color-iron-alpha40);
--sbb-frameless-button-label-color: var(--sbb-color-iron);
--sbb-selection-container-background-color-default: var(--sbb-color-background);
--sbb-selection-container-background-color-disabled: var(--sbb-color-milk);
--sbb-selection-container-border-color-default: var(--sbb-color-graphite);
--sbb-selection-container-border-color-disabled: var(--sbb-color-aluminum);
--sbb-selection-container-icon-color-default: var(--sbb-color-red);
--sbb-selection-container-icon-color-disabled: var(--sbb-color-granite);
--sbb-selection-container-border-color-focused: var(--sbb-color-weak-accent);
--sbb-selection-label-color-checked: var(--sbb-color-text);
--sbb-selection-label-color-unchecked: var(--sbb-color-granite);
--sbb-selection-label-color-disabled: var(--sbb-color-granite);
--sbb-selection-panel-background-color-default: var(--sbb-color-milk);
--sbb-selection-panel-background-color-checked: var(--sbb-color-background);
--sbb-selection-panel-background-color-disabled: var(--sbb-color-background);
--sbb-selection-panel-color: var(--sbb-color-granite);
--sbb-selection-panel-border-color: transparent;
--sbb-selection-panel-border-color-active: var(--sbb-color-black);
--sbb-selection-panel-border-color-disabled: var(--sbb-color-aluminum);
--sbb-selection-panel-subtitle-color: var(--sbb-color-granite);
--sbb-chips-list-height: var(--sbb-form-input-min-height);
--sbb-chips-chip-margin-vertical: calc(2 * var(--sbb-border-width));
--sbb-chips-chip-height: calc( var(--sbb-chips-list-height) - 2 * var(--sbb-chips-chip-margin-vertical) - 2 * var(--sbb-border-width) );
--sbb-chips-chip-padding-horizontal: calc(0.5333333333rem * var(--sbb-scaling-factor));
--sbb-chips-input-width: calc(10rem * var(--sbb-scaling-factor));
--sbb-chips-background-color-active: var(--sbb-color-cloud);
--sbb-chips-background-color-hover: var(--sbb-color-aluminum);
--sbb-chips-background-color-disabled: var(--sbb-color-cloud);
--sbb-chips-opacity: 0.6;
--sbb-datepicker-toggle-or-arrows-padding: calc( 2.9333333333rem * var(--sbb-scaling-factor) - var(--sbb-border-width) );
--sbb-datepicker-toggle-and-arrows-padding: calc( 4.8rem * var(--sbb-scaling-factor) - var(--sbb-border-width) );
--sbb-datepicker-button-offset: calc(0.8rem * var(--sbb-scaling-factor));
--sbb-datepicker-button-gap: calc(0.2666666667rem * var(--sbb-scaling-factor));
--sbb-datepicker-adjacent-button-offset: calc( var(--sbb-datepicker-button-offset) + var(--sbb-icon-size-default) + var(--sbb-datepicker-button-gap) );
--sbb-datepicker-content-offset: calc(1.1333333333rem * var(--sbb-scaling-factor));
--sbb-datepicker-calendar-background-color: var(--sbb-color-background);
--sbb-datepicker-calendar-header-height: calc(4.5333333333rem * var(--sbb-scaling-factor));
--sbb-datepicker-calendar-header-color: var(--sbb-color-metal);
--sbb-datepicker-calendar-header-controls-color: var(--sbb-color-iron);
--sbb-datepicker-calendar-line-color: var(--sbb-color-platinum);
--sbb-datepicker-calendar-table-range-bg-color: var(--sbb-color-milk);
--sbb-datepicker-calendar-table-content-padding-width: 0.7333333333rem;
--sbb-datepicker-calendar-arrow-width: calc(1.3333333333rem * var(--sbb-scaling-factor));
--sbb-datepicker-calendar-arrow-offset: calc( var(--sbb-datepicker-calendar-arrow-width) / -2 + var(--sbb-border-width) );
--sbb-datepicker-calendar-width: 22.6666666667rem;
--sbb-datepicker-calendar-height: calc(28.5333333333rem * var(--sbb-scaling-factor));
--sbb-datepicker-calendar-controls-padding: 0.4rem;
--sbb-datepicker-calendar-body-cell-padding: calc(1.6rem * var(--sbb-scaling-factor));
--sbb-datepicker-calendar-body-cell-disabled-color: var(--sbb-color-cement);
--sbb-datepicker-calendar-body-cell-disabled-offset: 0.8rem;
--sbb-datepicker-calendar-body-cell-size: calc(2.6666666667rem * var(--sbb-scaling-factor));
--sbb-dialog-padding: calc(1.0666666667rem * var(--sbb-scaling-factor));
--sbb-dialog-overlay-backgroud-color: var(--sbb-color-white-alpha70);
--sbb-dialog-container-border-color: var(--sbb-color-weak-accent);
--sbb-dialog-container-background-color: var(--sbb-color-background);
--sbb-expansion-panel-padding-horizontal: 1.6rem;
--sbb-expansion-panel-header-padding-top: 1.5333333333rem;
--sbb-expansion-panel-header-padding-bottom: 1.7333333333rem;
--sbb-expansion-panel-line-height: 1.8666666667rem;
--sbb-expansion-panel-background-color-open: inherit;
--sbb-expansion-panel-background-color-closed: var(--sbb-color-milk);
--sbb-expansion-panel-border-color-open: var(--sbb-color-cloud);
--sbb-expansion-panel-border-color-closed: var(--sbb-color-milk);
--sbb-expansion-panel-header-indicator-color: var(--sbb-color-black);
--sbb-fieldset-legend-font-size: 1.6rem;
--sbb-fieldset-legend-nested-font-size: 1.3333333333rem;
--sbb-file-selector-list-remove-icon-color: var(--sbb-color-granite);
--sbb-form-background-color-readonly: var(--sbb-color-milk);
--sbb-form-border-color-readonly: var(--sbb-color-aluminum);
--sbb-form-field-width: 21.3333333333rem;
--sbb-form-input-color: var(--sbb-color-charcoal);
--sbb-form-input-color-disabled: var(--sbb-color-granite);
--sbb-form-input-color-placeholder: var(--sbb-color-metal);
--sbb-form-input-border-color: var(--sbb-color-smoke);
--sbb-form-input-border-color-disabled: var(--sbb-color-aluminum);
--sbb-form-input-background-color: var(--sbb-color-background);
--sbb-form-input-background-color-disabled: var(--sbb-color-milk);
--sbb-form-input-min-height: calc(3.2rem * var(--sbb-scaling-factor));
--sbb-form-label-line-height: calc(1.0666666667rem * var(--sbb-scaling-factor));
--sbb-form-label-color: var(--sbb-color-granite);
--sbb-form-label-wrapper-margin-bottom: calc(0.3333333333rem * var(--sbb-scaling-factor));
--sbb-form-label-wrapper-padding-left: calc(0.6666666667rem * var(--sbb-scaling-factor));
--sbb-header-lean-height: calc(3.6rem * var(--sbb-scaling-factor));
--sbb-header-lean-base-z-index: 1000;
--sbb-header-lean-side-menu-z-index: 800;
--sbb-header-lean-background-color: var(--sbb-color-background);
--sbb-header-lean-menu-mobile-z-index: 1100;
--sbb-header-lean-menu-tablet-z-index: 700;
--sbb-header-lean-menu-width: calc(20rem * var(--sbb-scaling-factor));
--sbb-header-lean-label-line-height: calc(1.6666666667rem * var(--sbb-scaling-factor));
--sbb-header-lean-subtitle-color: var(--sbb-color-anthracite);
--sbb-header-lean-border-bottom-color: var(--sbb-color-silver);
--sbb-lightbox-background-color: var(--sbb-color-background);
--sbb-lightbox-padding-horizontal: 1.6rem;
--sbb-lightbox-actions-padding-vertical: calc(1.6rem * var(--sbb-scaling-factor));
--sbb-menu-trigger-padding: calc(0.4rem * var(--sbb-scaling-factor));
--sbb-menu-item-label: var(--sbb-color-iron);
--sbb-menu-item-label-active: var(--sbb-color-black);
--sbb-menu-item-background-color-hover: var(--sbb-color-milk);
--sbb-menu-item-background-color-active: var(--sbb-color-cloud);
--sbb-menu-title-color: var(--sbb-color-granite);
--sbb-notification-label-color-success: var(--sbb-color-white);
--sbb-notification-background-color-success: var(--sbb-color-granite);
--sbb-notification-border-color-success: var(--sbb-color-granite);
--sbb-notification-label-color-information: var(--sbb-color-white);
--sbb-notification-background-color-information: var(--sbb-color-granite);
--sbb-notification-border-color-information: var(--sbb-color-granite);
--sbb-notification-label-color-error: var(--sbb-color-white);
--sbb-notification-background-color-error: var(--sbb-color-error);
--sbb-notification-border-color-error: var(--sbb-color-error);
--sbb-notification-label-color-warn: var(--sbb-color-white);
--sbb-notification-background-color-warn: var(--sbb-color-error);
--sbb-notification-border-color-warn: var(--sbb-color-error);
--sbb-notification-message-padding: calc(1.0666666667rem * var(--sbb-scaling-factor));
--sbb-notification-message-padding-horizontal: calc( 1.6rem * var(--sbb-scaling-factor) );
--sbb-pagination-base-color: var(--sbb-color-granite);
--sbb-pagination-disabled-color: var(--sbb-color-silver);
--sbb-pagination-paginator-size: calc(2.6666666667rem * var(--sbb-scaling-factor));
--sbb-pagination-navigation-item-margin: calc(0.2666666667rem * var(--sbb-scaling-factor));
--sbb-panel-background-color: var(--sbb-color-background);
--sbb-panel-divider-color: var(--sbb-color-cloud);
--sbb-processflow-step-label-color: var(--sbb-color-metal);
--sbb-porcessflow-separator-inactive-color: var(--sbb-color-granite);
--sbb-box-shadow-width: calc(var(--sbb-border-width) * 4);
--sbb-box-shadow-arrow-width: calc(var(--sbb-border-width) * 2);
--sbb-box-shadow-arrow-clip-path: polygon( -0.4px 100%, 100% -0.4px, 100% 71%, 150% 21%, 150% 150%, 21% 150%, 71% 100% );
--sbb-box-shadow-color: rgba(0, 0, 0, 0.15);
--sbb-box-shadow-border-color: var(--sbb-color-cloud);
--sbb-box-shadow-below: 0 var(--sbb-box-shadow-width) 0 var(--sbb-box-shadow-color);
--sbb-box-shadow-horizontal-border-top: 0 calc(var(--sbb-border-width) + calc(0.0666666667rem * var(--sbb-scaling-factor))) 0 calc(var(--sbb-border-width) * -1) var(--sbb-box-shadow-border-color);
--sbb-box-shadow-horizontal-border-bottom: 0 calc(var(--sbb-border-width) * -1 - calc(0.0666666667rem * var(--sbb-scaling-factor))) 0 calc(var(--sbb-border-width) * -1) var(--sbb-box-shadow-border-color);
--sbb-box-shadow-horizontal-border-offset-top-above: calc( calc(var(--sbb-border-width) - 0.0666666667rem) * var(--sbb-scaling-factor) );
--sbb-box-shadow-horizontal-border-offset-top-below: calc( var(--sbb-box-shadow-horizontal-border-offset-top-above) * -1 );
--sbb-select-arrow-icon-color: var(--sbb-color-granite);
--sbb-sidebar-mobile-menu-bar-height: calc(2 * var(--sbb-icon-size-default));
--sbb-sidebar-collapsible-menu-bar-height: calc( 2 * var(--sbb-icon-size-default) + 0.5333333333rem * var(--sbb-scaling-factor) );
--sbb-icon-sidebar-item-dimension: calc(2 * var(--sbb-icon-size-default));
--sbb-sidebar-background-color: var(--sbb-color-background);
--sbb-sidebar-background-color-hover: var(--sbb-menu-item-background-color-hover);
--sbb-sidebar-background-color-active: var(--sbb-menu-item-background-color-active);
--sbb-sidebar-border-color: var(--sbb-color-cloud);
--sbb-icon-sidebar-background-color: var(--sbb-color-milk);
--sbb-icon-sidebar-background-color-active: var(--sbb-color-background);
--sbb-status-message-background-color: var(--sbb-color-milk);
--sbb-status-message-color: var(--sbb-color-granite);
--sbb-table-background-color: var(--sbb-color-background);
--sbb-table-thead-background-color: var(--sbb-color-cloud);
--sbb-table-tbody-stripe-background-color: var(--sbb-color-milk);
--sbb-table-thead-color: unset;
--sbb-table-thead-padding: calc(1.0666666667rem * var(--sbb-scaling-factor));
--sbb-table-thead-padding-vertical-top: calc(1.9333333333rem * var(--sbb-scaling-factor));
--sbb-table-thead-padding-vertical-bottom: calc(2rem * var(--sbb-scaling-factor));
--sbb-table-tbody-padding: calc(1.0666666667rem * var(--sbb-scaling-factor));
--sbb-table-cell-padding-horizontal: calc(0.8rem);
--sbb-table-cell-padding-vertical-top: calc(1.2rem * var(--sbb-scaling-factor));
--sbb-table-cell-padding-vertical-bottom: calc(1.2666666667rem * var(--sbb-scaling-factor));
--sbb-table-sticky-shadow-width: 0.5333333333rem;
--sbb-table-sticky-shadow-offset: -0.6rem;
--sbb-table-sort-header-arrow-margin: calc(0.5333333333rem * var(--sbb-scaling-factor));
--sbb-tabs-border-color: var(--sbb-color-graphite);
--sbb-tabs-outline-color: var(--sbb-color-black);
--sbb-tabs-color-disabled: var(--sbb-color-storm);
--sbb-tag-label-color-active: var(--sbb-color-black);
--sbb-tag-border-color-active: var(--sbb-color-black);
--sbb-tag-badge-background-color-default: var(--sbb-color-red);
--sbb-tag-badge-label-color-default: var(--sbb-color-white);
--sbb-tag-background-color-inactive-hover: var(--sbb-color-cloud);
--sbb-tag-label-color-inactive-hover: var(--sbb-color-black);
--sbb-tag-label-color-active-hover: var(--sbb-color-granite);
--sbb-tag-border-color-active-hover: var(--sbb-color-smoke);
--sbb-tag-background-color-inactive: var(--sbb-color-milk);
--sbb-tag-label-color-inactive: var(--sbb-color-granite);
--sbb-tag-badge-background-color-disabled: var(--sbb-color-metal);
--sbb-tag-badge-label-color-disabled: var(--sbb-color-white);
--sbb-tag-badge-background-color-disabled-hover: var(--sbb-color-cement);
--sbb-tag-badge-link-background-color-focused: var(--sbb-color-red125);
--sbb-textarea-remaining-chars-color: var(--sbb-color-text);
--sbb-textexpand-color: var(--sbb-color-metal);
--sbb-tooltip-padding: calc(1.5333333333rem * var(--sbb-scaling-factor));
--sbb-tooltip-arrow-offset: calc(0.48rem * var(--sbb-scaling-factor));
--sbb-tooltip-arrow-horizontal-space: calc(0.5333333333rem * var(--sbb-scaling-factor));
--sbb-tooltip-content-arrow-size: calc( 1.1313708499rem * var(--sbb-scaling-factor) );
--sbb-tooltip-shadow-arrow-size: calc(0.8rem * var(--sbb-scaling-factor));
--sbb-tooltip-background-color: var(--sbb-color-background);
--sbb-tooltip-color: var(--sbb-color-granite);
--sbb-tooltip-border-color: var(--sbb-color-weak-accent);
--sbb-tooltip-close-button-color: var(--sbb-color-weak-accent);
--sbb-toggle-border-color-active: var(--sbb-color-black);
--sbb-toggle-label-color-inactive: var(--sbb-color-granite);
--sbb-toggle-border-color-inactive: var(--sbb-color-aluminum);
--sbb-toggle-background-color-active: var(--sbb-color-white);
--sbb-toggle-label-color-active: var(--sbb-color-black);
--sbb-toggle-background-color-inactive: var(--sbb-color-milk);
--sbb-usermenu-panel-width: calc(19.2rem * var(--sbb-scaling-factor));
--sbb-usermenu-trigger-height: calc(3.2rem * var(--sbb-scaling-factor));
--sbb-usermenu-trigger-padding: calc(0.8rem * var(--sbb-scaling-factor));
--sbb-usermenu-text-color: var(--sbb-color-granite);
--sbb-usermenu-initial-letters-text-color: var(--sbb-color-metal);
--sbb-usermenu-initial-letters-background-color: var(--sbb-color-cloud);
--sbb-icon-size-default: calc(1.6rem * var(--sbb-scaling-factor));
--sbb-icon-size-large: calc(1.5 * var(--sbb-icon-size-default));
--sbb-url-icon-arrow-right-small-black: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBkPSJNNSAxMi40OTFoMTIuNDlNMTMuNSAxNi41bDMuOTktNC4wMDhMMTMuNSA4LjUiLz48L3N2Zz4=);
--sbb-url-icon-arrow-right-small-red125: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzYwMDE4IiBkPSJNNSAxMi40OTFoMTIuNDlNMTMuNSAxNi41bDMuOTktNC4wMDhMMTMuNSA4LjUiLz48L3N2Zz4=);
--sbb-url-icon-chevron-down-small-granite: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBvbHlsaW5lIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjNjg2ODY4IiBzdHJva2Utd2lkdGg9IjEiIHBvaW50cz0iMjAgNy45OTkgMTIgMTUuOTk5IDQgNy45OTkiLz4KPC9zdmc+);
--sbb-url-icon-chevron-small-down-circle-small-granite: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM2ODY4NjgiIGQ9Ik0xMiw0LjQ5OTcgQzE2LjE0Myw0LjQ5OTcgMTkuNSw3Ljg1NzcgMTkuNSwxMS45OTk3IEMxOS41LDE2LjE0MjcgMTYuMTQzLDE5LjQ5OTcgMTIsMTkuNDk5NyBDNy44NTgsMTkuNDk5NyA0LjUsMTYuMTQyNyA0LjUsMTEuOTk5NyBDNC41LDcuODU3NyA3Ljg1OCw0LjQ5OTcgMTIsNC40OTk3IFogTTguMDkyMywxMC4zNDk4IEwxMS45OTYzLDE0LjI5OTggTDE1LjkwMDMsMTAuMzUxOCIvPgo8L3N2Zz4K);
--sbb-url-icon-chevron-small-down-circle-small-aluminium: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNEMkQyRDIiIGQ9Ik0xMiw0LjQ5OTcgQzE2LjE0Myw0LjQ5OTcgMTkuNSw3Ljg1NzcgMTkuNSwxMS45OTk3IEMxOS41LDE2LjE0MjcgMTYuMTQzLDE5LjQ5OTcgMTIsMTkuNDk5NyBDNy44NTgsMTkuNDk5NyA0LjUsMTYuMTQyNyA0LjUsMTEuOTk5NyBDNC41LDcuODU3NyA3Ljg1OCw0LjQ5OTcgMTIsNC40OTk3IFogTTguMDkyMywxMC4zNDk4IEwxMS45OTYzLDE0LjI5OTggTDE1LjkwMDMsMTAuMzUxOCIvPgo8L3N2Zz4K);
--sbb-url-icon-chevron-small-down-circle-small-red125: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNjNjAwMTgiIGQ9Ik0xMiw0LjQ5OTcgQzE2LjE0Myw0LjQ5OTcgMTkuNSw3Ljg1NzcgMTkuNSwxMS45OTk3IEMxOS41LDE2LjE0MjcgMTYuMTQzLDE5LjQ5OTcgMTIsMTkuNDk5NyBDNy44NTgsMTkuNDk5NyA0LjUsMTYuMTQyNyA0LjUsMTEuOTk5NyBDNC41LDcuODU3NyA3Ljg1OCw0LjQ5OTcgMTIsNC40OTk3IFogTTguMDkyMywxMC4zNDk4IEwxMS45OTYzLDE0LjI5OTggTDE1LjkwMDMsMTAuMzUxOCIvPgo8L3N2Zz4K);
--sbb-url-icon-chevron-small-down-circle-small-red_dark-mode: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZjM4MzgiIGQ9Ik0xMiw0LjQ5OTcgQzE2LjE0Myw0LjQ5OTcgMTkuNSw3Ljg1NzcgMTkuNSwxMS45OTk3IEMxOS41LDE2LjE0MjcgMTYuMTQzLDE5LjQ5OTcgMTIsMTkuNDk5NyBDNy44NTgsMTkuNDk5NyA0LjUsMTYuMTQyNyA0LjUsMTEuOTk5NyBDNC41LDcuODU3NyA3Ljg1OCw0LjQ5OTcgMTIsNC40OTk3IFogTTguMDkyMywxMC4zNDk4IEwxMS45OTYzLDE0LjI5OTggTDE1LjkwMDMsMTAuMzUxOCIvPgo8L3N2Zz4=);
--sbb-url-icon-chevron-small-down-small-black: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgcG9pbnRzPSI4LjA5MiAxMC4zNSAxMS45OTYgMTQuMyAxNS45IDEwLjM1MiIvPjwvc3ZnPg==);
--sbb-url-icon-chevron-small-down-small-grey: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cG9seWxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBwb2ludHM9IjguMDkyIDEwLjM1IDExLjk5NiAxNC4zIDE1LjkgMTAuMzUyIi8+Cjwvc3ZnPg==);
--sbb-url-icon-chevron-small-down-small-red125: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2M2MDAxOCIgcG9pbnRzPSI4LjA5MiAxMC4zNSAxMS45OTYgMTQuMyAxNS45IDEwLjM1MiIvPjwvc3ZnPg==);
--sbb-url-icon-chevron-small-right-small-granite: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cG9seWxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjg2ODY4IiBwb2ludHM9IjEwLjMyNSAxNS45MDQgMTQuMjc1IDEyIDEwLjMyNiA4LjA5NiIvPgo8L3N2Zz4K);
--sbb-url-icon-chevron-small-right-small-aluminium: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cG9seWxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDJkMmQyIiBwb2ludHM9IjEwLjMyNSAxNS45MDQgMTQuMjc1IDEyIDEwLjMyNiA4LjA5NiIvPgo8L3N2Zz4K);
--sbb-url-icon-chevron-small-right-small-platinum: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cG9seWxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjY2RjZGNkIiBwb2ludHM9IjEwLjMyNSAxNS45MDQgMTQuMjc1IDEyIDEwLjMyNiA4LjA5NiIvPgo8L3N2Zz4=);
}
@media all and (min-width: 40.1875em) {
:root:where(:not(.sbb-lean)) {
--sbb-divider-medium: calc(3.2rem * var(--sbb-scaling-factor));
--sbb-divider-big: 4.8rem;
--sbb-font-size-large: 1.4rem;
--sbb-datepicker-calendar-table-content-padding-width: calc( 1.2rem * var(--sbb-scaling-factor) );
--sbb-datepicker-calendar-width: calc(28.5333333333rem * var(--sbb-scaling-factor));
--sbb-datepicker-calendar-controls-padding: calc( 0.5333333333rem * var(--sbb-scaling-factor) );
--sbb-datepicker-calendar-body-cell-disabled-color: var(--sbb-color-storm);
--sbb-datepicker-calendar-body-cell-disabled-offset: calc( 1.1333333333rem * var(--sbb-scaling-factor) );
--sbb-expansion-panel-padding-horizontal: 3.2rem;
--sbb-expansion-panel-header-padding-top: 2.2666666667rem;
--sbb-expansion-panel-header-padding-bottom: 2.4rem;
--sbb-expansion-panel-line-height: calc(2rem * var(--sbb-scaling-factor));
--sbb-table-cell-padding-horizontal: calc(1.0666666667rem * var(--sbb-scaling-factor));
}
}
@media all and (min-width: 64.0625em) {
:root:where(:not(.sbb-lean)) {
--sbb-divider-big: calc(6.4rem * var(--sbb-scaling-factor));
--sbb-expansion-panel-padding-horizontal: calc( 2.1333333333rem * var(--sbb-scaling-factor) );
--sbb-fieldset-legend-font-size: calc(2.1333333333rem * var(--sbb-scaling-factor));
--sbb-fieldset-legend-nested-font-size: calc( 1.3333333333rem * var(--sbb-scaling-factor) + 0.1333333333rem );
--sbb-lightbox-padding-horizontal: calc(9.0666666667rem * var(--sbb-scaling-factor));
--sbb-sidebar-mobile-menu-bar-height: calc(3.2rem * var(--sbb-scaling-factor));
}
}
@media all and (min-width: 160.0625em) {
:root:where(:not(.sbb-lean)) {
--sbb-scaling-factor: 1.5;
--sbb-border-width-thin: 0.1333333333rem;
--sbb-font-size: 1.5333333333rem;
--sbb-line-height: 2.6rem;
--sbb-font-size-small: 1.3333333333rem;
--sbb-line-height-small: 2rem;
--sbb-line-height-medium: 2.3333333333rem;
--sbb-font-size-large: 2.1333333333rem;
--sbb-expansion-panel-header-padding-top: 3.4rem;
--sbb-expansion-panel-header-padding-bottom: 3.6rem;
--sbb-form-field-width: 26.6666666667rem;
}
}
@media all and (min-width: 240.0625em) {
:root:where(:not(.sbb-lean)) {
--sbb-scaling-factor: 2;
--sbb-font-size: 2rem;
--sbb-line-height: 3.4666666667rem;
--sbb-font-size-small: 1.7333333333rem;
--sbb-line-height-small: 2.6666666667rem;
--sbb-line-height-medium: 3rem;
--sbb-font-size-large: 2.8rem;
--sbb-expansion-panel-header-padding-top: 4.6666666667rem;
--sbb-expansion-panel-header-padding-bottom: 4.6666666667rem;
}
}
:root:where(.sbb-lean) {
--sbb-color-weak-accent: var(--sbb-color-iron);
--sbb-divider-thin: 0.2666666667rem;
--sbb-divider-small: 0.5333333333rem;
--sbb-divider-medium: 1.0666666667rem;
--sbb-divider-big: 1.6rem;
--sbb-border-width: 0.0666666667rem;
--sbb-line-height: 1.5333333333rem;
--sbb-line-height-root: 1.5333333333;
--sbb-line-height-medium: 1.3333333333rem;
--sbb-font-size-large: 1.4rem;
--sbb-badge-background-color: var(--sbb-color-black);
--sbb-badge-background-color-disabled: var(--sbb-color-granite);
--sbb-breadcrumb-url-icon-chevron-small-right: var( --sbb-url-icon-chevron-small-right-small-granite );
--sbb-button-height: 2.4rem;
--sbb-primary-button-background-color-default: var(--sbb-color-red);
--sbb-primary-button-background-color-hover: var(--sbb-color-red125);
--sbb-primary-button-background-color-disabled: var(--sbb-color-red-alpha40);
--sbb-primary-button-color-disabled: var(--sbb-color-white-alpha50);
--sbb-primary-alternative-button-color-disabled: var(--sbb-color-white-alpha50);
--sbb-primary-alternative-button-background-color-disabled: var(--sbb-color-granite-alpha40);
--sbb-secondary-button-background-color-hover: var(--sbb-color-cement);
--sbb-secondary-button-background-color-disabled: var(--sbb-color-silver-alpha40);
--sbb-secondary-button-color-disabled: var(--sbb-color-iron-alpha50);
--sbb-selection-container-background-color-default: var(--sbb-color-white);
--sbb-selection-container-icon-color-default: var(--sbb-color-iron);
--sbb-selection-container-icon-color-disabled: var(--sbb-color-iron);
--sbb-selection-label-color-checked: var(--sbb-color-iron);
--sbb-selection-label-color-disabled: var(--sbb-color-storm);
--sbb-datepicker-toggle-or-arrows-padding: calc(2.5333333333rem - var(--sbb-border-width));
--sbb-datepicker-toggle-and-arrows-padding: calc(4.1333333333rem - var(--sbb-border-width));
--sbb-datepicker-button-offset: 0.4rem;
--sbb-datepicker-calendar-arrow-width: 0.9333333333rem;
--sbb-datepicker-button-gap: 0rem;
--sbb-datepicker-content-offset: 0.5333333333rem;
--sbb-datepicker-calendar-header-height: 2.4rem;
--sbb-datepicker-calendar-header-color: var(--sbb-color-iron);
--sbb-datepicker-calendar-header-controls-color: var(--sbb-color-text);
--sbb-datepicker-calendar-line-color: var(--sbb-color-cloud);
--sbb-datepicker-calendar-table-content-padding-width: 0.5333333333rem;
--sbb-datepicker-calendar-width: 20.2rem;
--sbb-datepicker-calendar-height: 20.2rem;
--sbb-datepicker-calendar-controls-padding: 0.5333333333rem;
--sbb-datepicker-calendar-body-cell-padding: 1.1rem;
--sbb-datepicker-calendar-body-cell-size: 2rem;
--sbb-dialog-overlay-backgroud-color: var(--sbb-color-white-alpha70);
--sbb-dialog-container-border-color: var(--sbb-color-black);
--sbb-expansion-panel-padding-horizontal: 1.0666666667rem;
--sbb-expansion-panel-header-padding-top: calc( 0.8rem - var(--sbb-border-width-thin) );
--sbb-expansion-panel-header-padding-bottom: var(--sbb-expansion-panel-header-padding-top);
--sbb-expansion-panel-line-height: 1.6666666667rem;
--sbb-fieldset-legend-font-size: 1.4rem;
--sbb-fieldset-legend-nested-font-size: 1.0666666667rem;
--sbb-file-selector-list-remove-icon-color: var(--sbb-color-black);
--sbb-form-background-color-readonly: transparent;
--sbb-form-border-color-readonly: transparent;
--sbb-form-field-width: 15.3333333333rem;
--sbb-form-input-min-height: 2.4rem;
--sbb-form-label-wrapper-margin-bottom: 0.2rem;
--sbb-form-label-wrapper-padding-left: 0rem;
--sbb-notification-label-color-success: var(--sbb-color-green);
--sbb-notification-background-color-success: var(--sbb-color-white);
--sbb-notification-border-color-success: var(--sbb-color-green);
--sbb-notification-label-color-information: var(--sbb-color-granite);
--sbb-notification-background-color-information: var(--sbb-color-white);
--sbb-notification-background-color-warn: var(--sbb-color-peach);
--sbb-notification-border-color-warn: var(--sbb-color-peach);
--sbb-notification-label-color-warn: var(--sbb-color-black);
--sbb-notification-message-padding: 0.7333333333rem;
--sbb-notification-message-padding-horizontal: 1rem;
--sbb-pagination-disabled-color: var(--sbb-color-cement);
--sbb-pagination-paginator-size: 2rem;
--sbb-porcessflow-separator-inactive-color: var(--sbb-color-text);
--sbb-scrollbar-thumb-color-visible: var(--sbb-color-platinum);
--sbb-scrollbar-track-color-visible: var(--sbb-color-milk);
--sbb-box-shadow-arrow-clip-path: polygon( -0.4px 100%, 100% -0.4px, 100% 35%, 150% -15%, 150% 150%, -15% 150%, 35% 100% );
--sbb-table-cell-padding-vertical: 0.4rem;
--sbb-table-cell-background-color-hover: var(--sbb-color-milk);
--sbb-table-cell-actions-background-color-lean: var(--sbb-color-milk);
--sbb-table-thead-color: var(--sbb-color-granite);
--sbb-table-row-selected-background-color: var(--sbb-color-cloud);
--sbb-table-row-selected-border-bottom-color: var(--sbb-color-text);
--sbb-table-border-color: var(--sbb-color-aluminum);
--sbb-table-thead-border-color: var(--sbb-color-graphite);
--sbb-tag-label-color-active: var(--sbb-color-black);
--sbb-tag-border-color-active: var(--sbb-color-black);
--sbb-tag-badge-background-color-default: var(--sbb-color-black);
--sbb-tag-badge-label-color-default: var(--sbb-color-white);
--sbb-tag-background-color-inactive-hover: var(--sbb-color-cloud);
--sbb-tag-label-color-inactive-hover: var(--sbb-color-black);
--sbb-tag-label-color-active-hover: var(--sbb-color-granite);
--sbb-tag-background-color-inactive: var(--sbb-color-milk);
--sbb-tag-label-color-inactive: var(--sbb-color-granite);
--sbb-tag-badge-background-color-disabled: var(--sbb-color-granite);
--sbb-tag-badge-background-color-disabled-hover: var(--sbb-color-cement);
--sbb-tag-badge-link-background-color-focused: var(--sbb-color-red125);
--sbb-textarea-remaining-chars-color: var(--sbb-color-metal);
--sbb-textexpand-color: var(--sbb-color-text);
--sbb-tooltip-padding: 0.5333333333rem;
--sbb-tooltip-color: var(--sbb-color-text);
--sbb-usermenu-trigger-padding: 0.5333333333rem;
}
@media all and (min-width: 64.0625em) {
:root:where(.sbb-lean) {
--sbb-divider-thin: 0.5333333333rem;
--sbb-divider-small: 1.0666666667rem;
--sbb-divider-medium: 1.6rem;
--sbb-divider-big: 2.1333333333rem;
}
}
:root:where(.sbb-lean):where(.sbb-off-brand-colors) {
--sbb-color-red: #06348b;
--sbb-color-red125: #032668;
--sbb-color-red150: #021c4e;
--sbb-color-red-alpha40: rgba(6, 52, 139, 0.4);
}
:root:where(.sbb-lean):where(.sbb-lean.sbb-dark, .sbb-lean.sbb-preferred-color-scheme-dark):not(.sbb-light) {
--sbb-color-text: var(--sbb-color-white);
--sbb-color-background: var(--sbb-color-midnight);
--sbb-color-call-to-action: var(--sbb-color-red_dark-mode);
--sbb-color-call-to-action-hover: var(--sbb-color-red_dark-mode);
--sbb-color-weak-accent: var(--sbb-color-milk);
--sbb-color-error: var(--sbb-color-red_dark-mode);
--sbb-box-shadow-color: var(--sbb-color-white-alpha15);
--sbb-box-shadow-below: 0 var(--sbb-box-shadow-width) 0 var(--sbb-box-shadow-color);
--sbb-box-shadow-border-color: var(--sbb-color-metal);
--sbb-badge-background-color: var(--sbb-color-white);
--sbb-badge-background-color-disabled: var(--sbb-color-anthracite);
--sbb-badge-color: var(--sbb-color-black);
--sbb-breadcrumb-color-default: var(--sbb-color-aluminum);
--sbb-breadcrumb-url-icon-chevron-small-down-circle: var( --sbb-url-icon-chevron-small-down-circle-small-aluminium );
--sbb-breadcrumb-url-icon-chevron-small-right: var( --sbb-url-icon-chevron-small-right-small-aluminium );
--sbb-breadcrumb-url-icon-chevron-small-down-circle-focused: var( --sbb-url-icon-chevron-small-down-circle-small-red_dark-mode );
--sbb-primary-button-background-color-default: var(--sbb-color-red_dark-mode);
--sbb-primary-button-background-color-hover: var(--sbb-color-red125);
--sbb-primary-button-background-color-disabled: var(--sbb-color-red_dark-mode-alpha40);
--sbb-primary-alternative-button-background-color-default: var(--sbb-color-milk);
--sbb-primary-alternative-button-background-color-hover: var(--sbb-color-silver);
--sbb-primary-alternative-button-background-color-disabled: var(--sbb-color-milk-alpha40);
--sbb-primary-alternative-button-color: var(--sbb-color-black);
--sbb-primary-alternative-button-color-disabled: var(--sbb-color-black-alpha50);
--sbb-secondary-button-background-color-default: var(--sbb-color-granite);
--sbb-secondary-button-background-color-hover: var(--sbb-color-iron);
--sbb-secondary-button-background-color-disabled: var(--sbb-color-iron-alpha40);
--sbb-secondary-button-color: var(--sbb-color-white);
--sbb-secondary-button-color-disabled: var(--sbb-color-white-alpha50);
--sbb-ghost-button-border-color-default: var(--sbb-color-iron);
--sbb-ghost-button-border-color-hover: var(--sbb-color-milk);
--sbb-ghost-button-border-color-disabled: var(--sbb-color-iron);
--sbb-ghost-button-label-color: var(--sbb-color-white);
--sbb-ghost-button-label-color-disabled: var(--sbb-color-white-alpha50);
--sbb-frameless-button-label-color: var(--sbb-color-silver);
--sbb-selection-container-background-color-default: var(--sbb-color-black);
--sbb-selection-container-background-color-disabled: var(--sbb-color-charcoal);
--sbb-selection-container-border-color-disabled: var(--sbb-color-smoke);
--sbb-selection-container-border-color-focused: var(--sbb-color-text);
--sbb-selection-container-icon-color-default: var(--sbb-color-text);
--sbb-selection-container-icon-color-disabled: var(--sbb-color-smoke);
--sbb-selection-label-color-checked: var(--sbb-color-text);
--sbb-selection-label-color-unchecked: var(--sbb-color-graphite);
--sbb-selection-label-color-disabled: var(--sbb-color-smoke);
--sbb-selection-panel-background-color-default: var(--sbb-color-charcoal);
--sbb-selection-panel-background-color-checked: var(--sbb-color-black);
--sbb-selection-panel-background-color-disabled: var(--sbb-color-black);
--sbb-selection-panel-color: var(--sbb-color-graphite);
--sbb-selection-panel-border-color: var(--sbb-color-iron);
--sbb-selection-panel-border-color-active: var(--sbb-color-white);
--sbb-selection-panel-border-color-disabled: var(--sbb-color-metal);
--sbb-selection-panel-subtitle-color: var(--sbb-color-smoke);
--sbb-chips-background-color-active: var(--sbb-color-smoke);
--sbb-chips-background-color-hover: var(--sbb-color-metal);
--sbb-chips-background-color-disabled: var(--sbb-color-cloud-alpha10);
--sbb-chips-opacity: 1;
--sbb-datepicker-calendar-header-color: var(--sbb-color-smoke);
--sbb-datepicker-calendar-line-color: var(--sbb-color-smoke);
--sbb-datepicker-calendar-background-color: var(--sbb-color-black);
--sbb-dialog-overlay-backgroud-color: var(--sbb-color-black-alpha70);
--sbb-dialog-container-border-color: var(--sbb-color-silver);
--sbb-dialog-container-background-color: var(--sbb-color-charcoal);
--sbb-expansion-panel-background-color-open: var(--sbb-color-charcoal);
--sbb-expansion-panel-background-color-closed: var(--sbb-color-charcoal);
--sbb-expansion-panel-border-color-open: var(--sbb-color-iron);
--sbb-expansion-panel-border-color-closed: var(--sbb-color-charcoal);
--sbb-expansion-panel-header-indicator-color: var(--sbb-color-white);
--sbb-file-selector-list-remove-icon-color: var(--sbb-color-white);
--sbb-form-input-color: var(--sbb-color-text);
--sbb-form-input-color-disabled: var(--sbb-color-smoke);
--sbb-form-input-color-placeholder: var(--sbb-color-smoke);
--sbb-form-input-border-color: var(--sbb-color-smoke);
--sbb-form-input-border-color-disabled: var(--sbb-color-smoke);
--sbb-form-input-background-color: var(--sbb-color-black);
--sbb-form-input-background-color-disabled: var(--sbb-color-iron);
--sbb-form-label-color: var(--sbb-color-smoke);
--sbb-form-background-color-readonly: var(--sbb-color-iron);
--sbb-header-lean-subtitle-color: var(--sbb-color-graphite);
--sbb-header-lean-border-bottom-color: var(--sbb-color-iron);
--sbb-header-lean-background-color: var(--sbb-color-black);
--sbb-menu-item-label: var(--sbb-color-milk);
--sbb-menu-item-label-active: var(--sbb-color-white);
--sbb-menu-item-background-color-hover: var(--sbb-color-charcoal);
--sbb-menu-item-background-color-active: var(--sbb-color-charcoal);
--sbb-menu-title-color: var(--sbb-color-smoke);
--sbb-notification-label-color-success: var(--sbb-color-white);
--sbb-notification-background-color-success: var(--sbb-color-green);
--sbb-notification-border-color-success: var(--sbb-color-green);
--sbb-notification-label-color-information: var(--sbb-color-cloud);
--sbb-notification-background-color-information: var(--sbb-color-black);
--sbb-notification-border-color-information: var(--sbb-color-cloud);
--sbb-notification-background-color-error: var(--sbb-color-red);
--sbb-notification-border-color-error: var(--sbb-color-red);
--sbb-notification-background-color-warn: var(--sbb-color-peach);
--sbb-notification-border-color-warn: var(--sbb-color-peach);
--sbb-pagination-base-color: var(--sbb-color-silver);
--sbb-pagination-disabled-color: var(--sbb-color-metal);
--sbb-panel-background-color: var(--sbb-color-black);
--sbb-panel-divider-color: var(--sbb-color-smoke);
--sbb-processflow-step-label-color: var(--sbb-color-graphite);
--sbb-scrollbar-thumb-color-visible: var(--sbb-color-metal);
--sbb-scrollbar-track-color-visible: var(--sbb-color-charcoal);
--sbb-select-arrow-icon-color: var(--sbb-color-white);
--sbb-sidebar-background-color: var(--sbb-color-charcoal);
--sbb-icon-sidebar-background-color: var(--sbb-color-black);
--sbb-sidebar-border-color: var(--sbb-color-iron);
--sbb-icon-sidebar-background-color-active: var(--sbb-color-charcoal);
--sbb-sidebar-background-color-hover: var(--sbb-color-midnight);
--sbb-sidebar-background-color-active: var(--sbb-color-midnight);
--sbb-status-message-background-color: var(--sbb-color-iron);
--sbb-status-message-color: var(--sbb-color-white);
--sbb-table-cell-background-color-hover: var(--sbb-color-charcoal);
--sbb-table-cell-actions-background-color-lean: var(--sbb-color-background);
--sbb-table-thead-color: var(--sbb-color-smoke);
--sbb-table-row-selected-background-color: var(--sbb-color-iron);
--sbb-table-row-selected-border-bottom-color: var(--sbb-color-text);
--sbb-table-border-color: var(--sbb-color-anthracite);
--sbb-table-thead-border-color: var(--sbb-color-anthracite);
--sbb-tabs-border-color: var(--sbb-color-smoke);
--sbb-tabs-outline-color: var(--sbb-color-white);
--sbb-tag-label-color-active: var(--sbb-color-white);
--sbb-tag-border-color-active: var(--sbb-color-white);
--sbb-tag-badge-background-color-default: var(--sbb-color-white);
--sbb-tag-badge-label-color-default: var(--sbb-color-black);
--sbb-tag-background-color-inactive-hover: var(--sbb-color-charcoal);
--sbb-tag-label-color-inactive-hover: var(--sbb-color-white);
--sbb-tag-label-color-active-hover: var(--sbb-color-white);
--sbb-tag-background-color-inactive: var(--sbb-color-iron);
--sbb-tag-label-color-inactive: var(--sbb-color-white);
--sbb-tag-badge-background-color-disabled: var(--sbb-color-anthracite);
--sbb-tag-badge-background-color-disabled-hover: var(--sbb-color-white);
--sbb-tag-badge-link-background-color-focused: var(--sbb-color-white);
--sbb-textarea-remaining-chars-color: var(--sbb-color-smoke);
--sbb-toggle-border-color-active: var(--sbb-color-white);
--sbb-toggle-label-color-inactive: var(--sbb-color-milk);
--sbb-toggle-border-color-inactive: var(--sbb-color-iron);
--sbb-toggle-background-color-active: var(--sbb-color-charcoal);
--sbb-toggle-label-color-active: var(--sbb-color-white);
--sbb-toggle-background-color-inactive: var(--sbb-color-midnight);
--sbb-tooltip-border-color: var(--sbb-color-smoke);
--sbb-tooltip-close-button-color: var(--sbb-color-white);
--sbb-usermenu-text-color: var(--sbb-color-cloud);
--sbb-usermenu-initial-letters-text-color: var(--sbb-color-aluminum);
--sbb-usermenu-initial-letters-background-color: var(--sbb-color-iron);
}
:root {
background: var(--sbb-color-background);
color: var(--sbb-color-text);
font-family: var(--sbb-font-roman);
font-size: 93.75%;
line-height: var(--sbb-line-height-root);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media all and (min-width: 160.0625em) {
:root:where(:not(.sbb-lean)) {
line-height: var(--sbb-line-height-4k);
}
}
@media all and (min-width: 240.0625em) {
:root:where(:not(.sbb-lean)) {
line-height: var(--sbb-line-height-5k);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
display: block;
}
body {
margin: 0;
}
[tabindex="-1"]:focus {
outline: 0 !important;
}
b,
strong,
optgroup[label="*"] {
font-family: var(--sbb-font-bold);
font-weight: normal;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
[hidden] {
display: none !important;
}
.cdk-visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
outline: 0;
-webkit-appearance: none;
-moz-appearance: none;
left: 0;
}
[dir=rtl] .cdk-visually-hidden {
left: auto;
right: 0;
}
.cdk-overlay-container,
.cdk-global-overlay-wrapper {
pointer-events: none;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.cdk-overlay-container {
position: fixed;
z-index: 1000;
}
.cdk-overlay-container:empty {
display: none;
}
.cdk-global-overlay-wrapper {
display: flex;
position: absolute;
z-index: 1000;
}
.cdk-overlay-pane {
position: absolute;
pointer-events: auto;
box-sizing: border-box;
z-index: 1000;
display: flex;
max-width: 100%;
max-height: 100%;
}
.cdk-overlay-backdrop {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
pointer-events: auto;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
opacity: 0;
}
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
opacity: 1;
}
.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
opacity: .6;
}
.cdk-overlay-dark-backdrop {
background: rgba(0, 0, 0, .32);
}
.cdk-overlay-transparent-backdrop {
transition: visibility 1ms linear, opacity 1ms linear;
visibility: hidden;
opacity: 1;
}
.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
opacity: 0;
visibility: visible;
}
.cdk-overlay-backdrop-noop-animation {
transition: none;
}
.cdk-overlay-connected-position-bounding-box {
position: absolute;
z-index: 1000;
display: flex;
flex-direction: column;
min-width: 1px;
min-height: 1px;
}
.cdk-global-scrollblock {
position: fixed;
width: 100%;
overflow-y: scroll;
}
textarea.cdk-textarea-autosize {
resize: none;
}
textarea.cdk-textarea-autosize-measuring {
padding: 2px 0 !important;
box-sizing: content-box !important;
height: auto !important;
overflow: hidden !important;
}
textarea.cdk-textarea-autosize-measuring-firefox {
padding: 2px 0 !important;
box-sizing: content-box !important;
height: 0 !important;
}
@keyframes cdk-text-field-autofill-start {
}
@keyframes cdk-text-field-autofill-end {
}
.cdk-text-field-autofill-monitored:-webkit-autofill {
animation: cdk-text-field-autofill-start 0s 1ms;
}
.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
animation: cdk-text-field-autofill-end 0s 1ms;
}
.cdk-overlay-pane.sbb-overlay-panel {
max-height: none;
}
.cdk-global-scrollblock {
overflow-y: auto;
}
:is(h1:where(:not([class*=mod_])), .sbb-headline1) {
font-family: var(--sbb-font-thin);
font-weight: normal;
font-size: 1.8666666667rem;
line-height: 1.2;
margin: var(--sbb-divider-big) 0 var(--sbb-divider-medium);
}
@media all and (min-width: 40.1875em) {
:where(html:not(.sbb-lean)) :is(h1:where(:not([class*=mod_])), .sbb-headline1) {
font-size: 2rem;
}
}
@media all and (min-width: 64.0625em) {
:where(html:not(.sbb-lean)) :is(h1:where(:not([class*=mod_])), .sbb-headline1) {
font-size: calc(2.6666666667rem*var(--sbb-scaling-factor));
}
}
:where(html.sbb-lean) :is(h1:where(:not([class*=mod_])), .sbb-headline1) {
font-family: var(--sbb-font-light);
font-weight: normal;
font-size: 1.4rem;
line-height: 1.6666666667rem;
}
@media all and (min-width: 64.0625em) {
:where(html.sbb-lean) :is(h1:where(:not([class*=mod_])), .sbb-headline1) {
font-size: 1.8666666667rem;
line-height: 2.2666666667rem;
}
}
:is(h2:where(:not([class*=mod_])), .sbb-headline2) {
font-family: var(--sbb-font-light);
font-weight: normal;
font-size: 1.6rem;
line-height: 1.2;
margin: var(--sbb-divider-medium) 0 var(--sbb-divider-small);
}
@media all and (min-width: 64.0625em) {
:where(html:not(.sbb-lean)) :is(h2:where(:not([class*=mod_])), .sbb-headline2) {
font-size: calc(2.1333333333rem*var(--sbb-scaling-factor));
}
}
:where(html.sbb-lean) :is(h2:where(:not([class*=mod_])), .sbb-headline2) {
font-size: 1.2rem;
line-height: 1.2666666667rem;
}
@media all and (min-width: 64.0625em) {
:where(html.sbb-lean) :is(h2:where(:not([class*=mod_])), .sbb-headline2) {
font-size: 1.4rem;
line-height: 1.6666666667rem;
}
}
:is(h3:where(:not([class*=mod_])), .sbb-headline3) {
font-family: var(--sbb-font-light);
font-weight: normal;
font-size: var(--sbb-font-size-large);
line-height: 1.2;
margin: var(--sbb-divider-small) 0 var(--sbb-divider-thin);
}
:where(html.sbb-lean) :is(h3:where(:not([class*=mod_])), .sbb-headline3) {
font-size: 1.0666666667rem;
line-height: 1.1333333333rem;
}
@media all and (min-width: 64.0625em) {
:where(html.sbb-lean) :is(h3:where(:not([class*=mod_])), .sbb-headline3) {
font-size: 1.2rem;
line-height: 1.4666666667rem;
}
}
:is(h4:where(:not([class*=mod_])), .sbb-headline4) {
font-family: var(--sbb-font-bold);
font-weight: normal;
font-size: var(--sbb-font-size);
line-height: 1.5;
margin: var(--sbb-divider-small) 0 var(--sbb-divider-thin);
}
:where(html.sbb-lean) :is(h4:where(:not([class*=mod_])), .sbb-headline4) {
line-height: 1.1333333333rem;
margin: .5333333333rem 0 .2666666667rem;
}
@media all and (min-width: 64.0625em) {
:where(html.sbb-lean) :is(h4:where(:not([class*=mod_])), .sbb-headline4) {
font-size: 1.0666666667rem;
line-height: 1.2666666667rem;
margin: 1.0666666667rem 0 .5333333333rem;
}
}
.sbb-text-scaled {
font-size: var(--sbb-font-size);
line-height: var(--sbb-line-height);
}
.sbb-text-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
:is(p:where(:not([class*=mod_])), .sbb-copy) {
font-size: var(--sbb-font-size);
line-height: var(--sbb-line-height);
margin: var(--sbb-divider-thin) 0;
}
.sbb-text-lead {
font-family: var(--sbb-font-light);
font-weight: normal;
color: var(--sbb-color-text);
font-size: var(--sbb-font-size-large);
line-height: 1.3;
margin: var(--sbb-divider-medium) 0;
}
@media all and (min-width: 64.0625em)and (max-width: 160.0525em) {
:where(html:not(.sbb-lean)) .sbb-text-lead {
line-height: 2.1333333333rem;
}
}
@media all and (min-width: 240.0625em) {
:where(html:not(.sbb-lean)) .sbb-text-lead {
font-size: 2.6666666667rem;
}
}
:is(a:where(:not(.sbb-link-reset):not(.sbb-button-base):not([class*=mod_])), .sbb-link) {
color: var(--sbb-color-text);
text-decoration: underline;
text-decoration-skip-ink: auto;
line-height: var(--sbb-line-height);
vertical-align: bottom;
}
:is(a:where(:not(.sbb-link-reset):not(.sbb-button-base):not([class*=mod_])), .sbb-link):is(:hover, :focus) {
color: var(--sbb-color-call-to-action-hover);
}
@media screen and (-ms-high-contrast: active) {
:is(a:where(:not(.sbb-link-reset):not(.sbb-button-base):not([class*=mod_])), .sbb-link):is(:hover, :focus) {
color: windowText;
}
:is(a:where(:not(.sbb-link-reset):not(.sbb-button-base):not([class*=mod_])), .sbb-link):is(:hover, :focus)::before,
:is(a:where(:not(.sbb-link-reset):not(.sbb-button-base):not([class*=mod_])), .sbb-link):is(:hover, :focus)::after {
border-color: windowText;
}
}
:is(ul:where(:not([class*=mod_])), .sbb-unordered-list, ol:where(:not([class*=mod_])), .sbb-ordered-list) {
font-size: var(--sbb-font-size);
line-height: var(--sbb-line-height);
margin-top: calc(1.1333333333rem*var(--sbb-scaling-factor));
margin-bottom: calc(3.2rem*var(--sbb-scaling-factor));
margin-left: calc(0.6666666667rem*var(--sbb-scaling-factor));
}
@media all and (min-width: 64.0625em) {
:is(ul:where(:not([class*=mod_])), .sbb-unordered-list, ol:where(:not([class*=mod_])), .sbb-ordered-list) {
margin-top: calc(1.6666666667rem*var(--sbb-scaling-factor));
}
}
:is(ul:where(:not([class*=mod_])), .sbb-unordered-list, ol:where(:not([class*=mod_])), .sbb-ordered-list) li {
margin-top: var(--sbb-divider-thin);
}
:is(ul:where(:not([class*=mod_])), .sbb-unordered-list, ol:where(:not([class*=mod_])), .sbb-ordered-list) :is(ol, ul) {
margin: calc(0.4rem*var(--sbb-scaling-factor)) 0 0 calc(0.5333333333rem*var(--sbb-scaling-factor));
}
:is(ul:where(:not([class*=mod_])), .sbb-unordered-list) {
list-style-type: disc;
padding-left: calc(1.0666666667rem*var(--sbb-scaling-factor));
}
:is(ul:where(:not([class*=mod_])), .sbb-unordered-list) li {
padding-left: calc(.6666666667rem*var(--sbb-scaling-factor));
}
:is(ul:where(:not([class*=mod_])), .sbb-unordered-list) li ol > li::before {
content: counter(item) ".";
}
:is(ol:where(:not([class*=mod_])), .sbb-ordered-list) {
list-style-type: none;
counter-reset: item;
padding-left: 0;
}
:is(ol:where(:not([class*=mod_])), .sbb-ordered-list) > li {
display: table;
padding-left: 0;
}
:is(ol:where(:not([class*=mod_])), .sbb-ordered-list) > li::before {
content: counters(item, ".") ".";
counter-increment: item;
display: table-cell;
padding-right: calc(.8666666667rem*var(--sbb-scaling-factor));
}
.sbb-clean-list {
margin: 0;
padding-left: 0;
list-style: none;
}
.sbb-clean-list li {
margin: 0;
padding-left: 0;
}
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type]))) {
outline: none;
background-color: var(--sbb-form-input-background-color);
padding: .6666666667rem .9333333333rem .7333333333rem;
border: var(--sbb-border-width) solid var(--sbb-form-input-border-color);
border-radius: var(--sbb-border-radius);
color: var(--sbb-form-input-color);
font-size: var(--sbb-font-size);
line-height: var(--sbb-line-height-medium);
min-height: var(--sbb-form-input-min-height);
}
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type]))):where(:not(textarea)) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@media all and (min-width: 160.0625em) {
:where(html:not(.sbb-lean)) :is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type]))) {
padding: 1rem 1.4rem 1.0666666667rem;
}
}
@media all and (min-width: 240.0625em) {
:where(html:not(.sbb-lean)) :is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type]))) {
padding: 1.4rem 1.8666666667rem 1.4666666667rem;
}
}
:where(html.sbb-lean) :is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type]))) {
padding: .4rem .4666666667rem .5333333333rem;
}
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type])))::placeholder {
color: var(--sbb-form-input-color-placeholder);
opacity: 1;
}
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type]))):-moz-ui-invalid {
box-shadow: none;
}
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type]))),
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type])))::-webkit-search-cancel-button,
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type])))::-webkit-search-decoration,
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type])))::-webkit-search-results-button,
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type])))::-webkit-search-results-decoration {
-webkit-appearance: none;
}
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type])))::-webkit-contacts-auto-fill-button,
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type])))::-webkit-caps-lock-indicator,
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type])))::-webkit-credentials-auto-fill-button {
visibility: hidden;
}
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type]))):where([type=date], [type=datetime], [type=datetime-local], [type=month], [type=week], [type=time]) {
line-height: 1;
}
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type]))):where([type=date], [type=datetime], [type=datetime-local], [type=month], [type=week], [type=time])::after {
content: " ";
white-space: pre;
width: 1px;
}
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type])))::-webkit-inner-spin-button,
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type])))::-webkit-calendar-picker-indicator,
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type])))::-webkit-clear-button {
font-size: .75em;
}
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type]))):is(:focus, .sbb-focused) {
border-color: var(--sbb-color-weak-accent);
}
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type]))):is(:disabled, [disabled], .sbb-disabled) {
background-color: var(--sbb-form-input-background-color-disabled);
border-color: var(--sbb-form-input-border-color-disabled);
color: var(--sbb-form-input-color-disabled);
-webkit-text-fill-color: var(--sbb-form-input-color-disabled);
opacity: 1;
cursor: default;
pointer-events: none;
}
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type]))):is([readonly], .sbb-readonly),
:is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type]))):is([readonly], .sbb-readonly):focus {
color: var(--sbb-form-input-color);
-webkit-text-fill-color: var(--sbb-form-input-color);
background-color: var(--sbb-form-background-color-readonly);
border-color: var(--sbb-form-border-color-readonly);
}
:is(.sbb-form-field-invalid :is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type]))):not(:where([aria-expanded=true], .sbb-expanded)), :is(.sbb-input-element, input:where([type=email], [type=password], [type=search], [type=text], [type=number], [type=tel], [type=time], [type=datetime], [type=datetime-local], [type=url], :not([type]))).ng-touched.ng-invalid:not(:where([aria-expanded=true], .sbb-expanded))) {
color: var(--sbb-color-error);
border-color: var(--sbb-color-error);
}
:is(input, .sbb-input-element)[placeholder] {
text-overflow: ellipsis;
}
input:where([type=number], [type=time], [type=datetime], [type=datetime-local]) {
-moz-appearance: textfield;
}
input:where([type=number], [type=time], [type=datetime], [type=datetime-local])::-webkit-inner-spin-button,
input:where([type=number], [type=time], [type=datetime], [type=datetime-local])::-webkit-outer-spin-button,
input:where([type=number], [type=time], [type=datetime], [type=datetime-local])::-webkit-clear-button {
appearance: none;
margin: 0;
width: 0;
padding: 0;
background: rgba(0, 0, 0, 0);
}
select {
-moz-appearance: none;
-webkit-appearance: none;
position: relative;
display: inline-flex;
box-sizing: border-box;
padding-right: calc(2.9333333333rem*var(--sbb-scaling-factor)) !important;
align-items: center;
background: rgba(0, 0, 0, 0) var(--sbb-url-icon-chevron-small-down-small-grey) no-repeat center right calc(0.6rem*var(--sbb-scaling-factor));
background-size: var(--sbb-icon-size-default);
}
:where(html.sbb-lean) select {
padding-right: 2.5333333333rem !important;
background-position: center right .4rem;
background-image: var(--sbb-url-icon-chevron-down-small-granite);
}
select::-ms-expand {
display: none;
}
select::-ms-value {
color: inherit;
background: none;
}
.sbb-focused .cdk-high-contrast-active select::-ms-value {
color: inherit;
}
select::-moz-focus-inner {
border: 0;
}
select:not(:disabled) {
cursor: pointer;
}
select:is([readonly], .sbb-readonly) {
background-image: none;
pointer-events: none;
touch-action: none;
}
textarea {
white-space: pre-wrap;
overflow: auto;
}
textarea:disabled {
opacity: 1;
}
.sbb-error {
display: block;
letter-spacing: 0;
outline: none;
resize: none;
opacity: 1;
font-family: var(--sbb-font-roman);
color: var(--sbb-color-error);
font-size: calc(0.9333333333rem*var(--sbb-scaling-factor));
line-height: calc(1.4rem*var(--sbb-scaling-factor));
}
:where(html.sbb-lean) .sbb-error {
font-size: .8666666667rem;
line-height: 1.0666666667rem;
}
:is(fieldset, .sbb-fieldset) {
margin: 0;
min-width: 0;
font-size: var(--sbb-font-size);
line-height: var(--sbb-line-height);
border: var(--sbb-border-width-thin) solid var(--sbb-color-silver);
padding: var(--sbb-divider-medium) calc(var(--sbb-divider-small) - var(--sbb-border-width-thin));
}
:where(html.sbb-lean) :is(fieldset, .sbb-fieldset) {
border-color: var(--sbb-color-graphite);
padding: 1rem;
}
:is(fieldset, .sbb-fieldset) > legend {
display: block;
width: 100%;
max-width: 100%;
padding: 0;
font-family: var(--sbb-font-light);
font-weight: 400;
font-size: var(--sbb-fieldset-legend-font-size);
line-height: 1.2;
margin: 0 0 var(--sbb-divider-small);
float: left;
}
:is(fieldset, .sbb-fieldset) > legend + * {
clear: both;
}
:is(fieldset, .sbb-fieldset) fieldset {
--sbb-fieldset-legend-font-size: var(--sbb-fieldset-legend-nested-font-size);
border-top: none;
border-right: none;
border-left: none;
padding-left: 0;
padding-right: 0;
}
:is(fieldset, .sbb-fieldset) fieldset:last-of-type {
border-bottom: none;
}
:where(html.sbb-lean) :is(fieldset, .sbb-fieldset) fieldset {
border-color: var(--sbb-color-cloud);
}
.sbb-transparent-parent-overlay {
opacity: 0;
position: absolute;
top: 0;
left: 0;
margin: 0;
width: 100%;
height: 100%;
cursor: inherit;
z-index: -1;
}
.sbb-button-reset {
background: none;
max-width: none;
min-width: 0;
padding: 0;
margin: 0;
}
.sbb-button-reset-frameless {
background: none;
max-width: none;
min-width: 0;
padding: 0;
margin: 0;
border: none;
}
.sbb-badge {
position: relative;
}
.sbb-badge.sbb-badge {
overflow: visible;
}
.sbb-badge-content {
position: absolute;
text-align: center;
display: inline-block;
transition: transform var(--sbb-transition-duration-fast) var(--sbb-transition-timing-default);
transform: scale(0.6);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
min-width: calc(1.2rem*var(--sbb-scaling-factor));
border-radius: 1em;
padding: calc(0.2666666667rem*var(--sbb-scaling-factor)) calc(0.3333333333rem*var(--sbb-scaling-factor));
margin-left: calc(0.1333333333rem*var(--sbb-scaling-factor));
background-color: var(--sbb-badge-background-color);
color: var(--sbb-badge-color);
font-family: var(--sbb-font-bold);
line-height: 1;
height: calc(1.2rem*var(--sbb-scaling-factor));
font-size: .7333333333rem;
}
@media all and (min-width: 160.0625em) {
:where(html:not(.sbb-lean)) .sbb-badge-content {
font-size: 1.1333333333rem;
}
}
@media all and (min-width: 240.0625em) {
:where(html:not(.sbb-lean)) .sbb-badge-content {
font-size: 1.4666666667rem;
}
}
.sbb-badge-above .sbb-badge-content {
top: calc(-0.1333333333rem*var(--sbb-scaling-factor));
}
.sbb-badge-after .sbb-badge-content {
right: 0;
}
:where(.sbb-icon):is(.sbb-badge-above, .sbb-badge-after) .sbb-badge-content {
top: calc(-0.1333333333rem*var(--sbb-scaling-factor));
right: 0;
}
.sbb-badge-hidden .sbb-badge-content {
display: none;
}
:is(.sbb-badge-disabled, .sbb-tab-disabled) .sbb-badge-content {
background-color: var(--sbb-badge-background-color-disabled);
color: var(--sbb-color-white);
}
.ng-animate-disabled .sbb-badge-content,
.sbb-badge-content._sbb-animation-noopable {
transition: none;
}
.sbb-badge-content.sbb-badge-active {
transform: none;
}
:is(.sbb-button, .sbb-alt-button, .sbb-secondary-button, .sbb-ghost-button, .sbb-icon-button) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: var(--sbb-button-height);
background: none;
max-width: none;
min-width: 0;
text-decoration: none;
display: inline-block;
position: relative;
text-align: center;
font-size: var(--sbb-font-size);
line-height: var(--sbb-line-height);
border: var(--sbb-border-width-thin) solid rgba(0, 0, 0, 0);
border-radius: var(--sbb-border-radius);
padding: .6rem 2.6rem .7333333333rem;
margin: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
}
:is(.sbb-button, .sbb-alt-button, .sbb-secondary-button, .sbb-ghost-button, .sbb-icon-button):where(:not(.sbb-icon-button)) {
width: 100%;
}
@media all and (min-width: 40.1875em) {
:is(.sbb-button, .sbb-alt-button, .sbb-secondary-button, .sbb-ghost-button, .sbb-icon-button) {
width: auto;
min-width: calc(4rem*var(--sbb-scaling-factor));
max-width: calc(26.6666666667rem*var(--sbb-scaling-factor));
}
}
@media all and (min-width: 160.0625em) {
:where(html:not(.sbb-lean)) :is(.sbb-button, .sbb-alt-button, .sbb-secondary-button, .sbb-ghost-button, .sbb-icon-button) {
padding: .9333333333rem 3.8666666667rem 1rem;
}
}
@media all and (min-width: 240.0625em) {
:where(html:not(.sbb-lean)) :is(.sbb-button, .sbb-alt-button, .sbb-secondary-button, .sbb-ghost-button, .sbb-icon-button) {
padding: 1.2666666667rem 5.2rem 1.4rem;
}
}
:where(html.sbb-lean) :is(.sbb-button, .sbb-alt-button, .sbb-secondary-button, .sbb-ghost-button, .sbb-icon-button) {
padding: .3333333333rem 1rem .4rem;
}
:is(.sbb-button, .sbb-alt-button, .sbb-secondary-button, .sbb-ghost-button, .sbb-icon-button):not(:disabled):not(.sbb-disabled) {
cursor: pointer;
}
:where(html:not(.sbb-lean)) :is(.sbb-button, .sbb-alt-button, .sbb-secondary-button, .sbb-ghost-button, .sbb-icon-button):is(:disabled, .sbb-disabled) {
border-color: var(--sbb-color-storm);
}
:where(html:not(.sbb-lean)) :is(.sbb-button, .sbb-alt-button, .sbb-secondary-button, .sbb-ghost-button, .sbb-icon-button):is(:disabled, .sbb-disabled),
:where(html:not(.sbb-lean)) :is(.sbb-button, .sbb-alt-button, .sbb-secondary-button, .sbb-ghost-button, .sbb-icon-button):is(:disabled, .sbb-disabled) * {
text-decoration: line-through;
}
.sbb-button {
background-color: var(--sbb-primary-button-background-color-default);
color: var(--sbb-primary-button-color);
}
.sbb-button:not(:disabled):not(.sbb-disabled):is(:hover, :focus) {
background-color: var(--sbb-primary-button-background-color-hover);
}
.sbb-button:is(:disabled, .sbb-disabled) {
background-color: var(--sbb-primary-button-background-color-disabled);
color: var(--sbb-primary-button-color-disabled);
}
.sbb-alt-button {
background-color: var(--sbb-primary-alternative-button-background-color-default);
color: var(--sbb-primary-alternative-button-color);
}
.sbb-alt-button:not(:disabled):not(.sbb-disabled):is(:hover, :focus) {
background-color: var(--sbb-primary-alternative-button-background-color-hover);
}
.sbb-alt-button:is(:disabled, .sbb-disabled) {
background-color: var(--sbb-primary-alternative-button-background-color-disabled);
color: var(--sbb-primary-alternative-button-color-disabled);
}
.sbb-secondary-button {
background-color: var(--sbb-secondary-button-background-color-default);
color: var(--sbb-secondary-button-color);
}
.sbb-secondary-button:not(:disabled):not(.sbb-disabled):is(:hover, :focus) {
background-color: var(--sbb-secondary-button-background-color-hover);
}
.sbb-secondary-button:is(:disabled, .sbb-disabled) {
background-color: var(--sbb-secondary-button-background-color-disabled);
color: var(--sbb-secondary-button-color-disabled);
}
:where(html:not(.sbb-lean)) .sbb-button-base:is(.sbb-button, .sbb-secondary-button):not(.sbb-disabled, .sbb-icon-button) {
transition-duration: var(--sbb-transition-duration-default);
transition-timing-function: var(--sbb-transition-timing-default);
transition-property:
transform,
padding-left,
padding-right;
padding-left: calc(2.6rem*var(--sbb-scaling-factor));
padding-right: calc(4.6rem*var(--sbb-scaling-factor));
}
:where(html:not(.sbb-lean)) .sbb-button-base:is(.sbb-button, .sbb-secondary-button):not(.sbb-disabled, .sbb-icon-button) .sbb-button-right-icon {
right: calc(2.6rem*var(--sbb-scaling-factor));
}
:where(html:not(.sbb-lean)) .sbb-button-base:is(.sbb-button, .sbb-secondary-button):not(.sbb-disabled, .sbb-icon-button):hover {
padding-left: calc(4.6rem*var(--sbb-scaling-factor));
padding-right: calc(2.6rem*var(--sbb-scaling-factor));
}
:where(html:not(.sbb-lean)) .sbb-button-base:is(.sbb-button, .sbb-secondary-button):not(.sbb-disabled, .sbb-icon-button):hover .sbb-button-right-icon {
right: 0;
}
.sbb-ghost-button {
background-color: rgba(0, 0, 0, 0);
color: var(--sbb-ghost-button-label-color);
border-color: var(--sbb-ghost-button-border-color-default);
}
.sbb-ghost-button:not(:disabled):not(.sbb-disabled):is(:hover, :focus) {
border-color: var(--sbb-ghost-button-border-color-hover);
}
.sbb-ghost-button:is(:disabled, .sbb-disabled) {
color: var(--sbb-ghost-button-label-color-disabled);
border-color: var(--sbb-ghost-button-border-color-disabled);
}
:where(html:not(.sbb-lean)) .sbb-ghost-button:is(:disabled, .sbb-disabled) {
display: none;
}
.sbb-icon-button {
height: var(--sbb-button-height);
padding: calc(0.7333333333rem*var(--sbb-scaling-factor)) !important;
min-width: auto;
line-height: 0 !important;
}
:where(html:not(.sbb-lean)) .sbb-icon-button:is(:disabled, .sbb-disabled):before {
position: absolute;
top: 50%;
transform: translateY(-50%);
content: "";
width: var(--sbb-icon-size-default);
border-top: var(--sbb-border-width-thin) solid var(--sbb-color-smoke);
}
:where(html.sbb-lean) .sbb-icon-button {
padding: calc(0.3333333333rem*var(--sbb-scaling-factor)) !important;
}
:is(.sbb-frameless-button, .sbb-link:where(.sbb-button-base)) {
background: none;
max-width: none;
min-width: 0;
padding: 0;
margin: 0;
border: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
display: inline-block;
font-size: var(--sbb-font-size);
line-height: var(--sbb-line-height);
text-decoration: none;
text-align: left;
cursor: pointer;
outline: none;
}
:is(.sbb-frameless-button, .sbb-link:where(.sbb-button-base)):not(:disabled):not(.sbb-disabled):is(:hover, :focus) {
color: var(--sbb-color-call-to-action-hover);
}
:where(html:not(.sbb-lean)) :is(.sbb-frameless-button, .sbb-link:where(.sbb-button-base)).sbb-button-base:not(:disabled):not(.sbb-disabled) {
transition-duration: var(--sbb-transition-duration-default);
transition-timing-function: var(--sbb-transition-timing-default);
transition-property:
transform,
padding-left,
padding-right;
padding-left: 0;
padding-right: calc(2rem*var(--sbb-scaling-factor));
}
:where(html:not(.sbb-lean)) :is(.sbb-frameless-button, .sbb-link:where(.sbb-button-base)).sbb-button-base:not(:disabled):not(.sbb-disabled):hover {
padding-left: calc(2rem*var(--sbb-scaling-factor));
padding-right: 0;
}
.sbb-link.sbb-button-base {
white-space: normal;
}
:where(html.sbb-lean) .sbb-link.sbb-button-base {
padding-right: calc(2rem*var(--sbb-scaling-factor));
}
.sbb-link-group .sbb-link.sbb-button-base:not(:disabled):not(.sbb-disabled) {
padding: var(--sbb-divider-thin) calc(1.8666666667rem*var(--sbb-scaling-factor)) var(--sbb-divider-thin) 0;
border-bottom: var(--sbb-border-width-thin) solid var(--sbb-color-silver);
}
:where(html:not(.sbb-lean)) :is(.sbb-link-group .sbb-link.sbb-button-base:not(:disabled):not(.sbb-disabled), .sbb-link-group .sbb-link.sbb-button-base:not(:disabled):not(.sbb-disabled):hover) {
transition: none;
padding-left: 0;
padding-right: 0;
}
.sbb-frameless-button {
color: var(--sbb-frameless-button-label-color);
}
.sbb-frameless-button:is(:disabled, .sbb-disabled) {
display: none;
}
:is(.sbb-button, .sbb-alt-button, .sbb-secondary-button, .sbb-ghost-button, .sbb-icon-button, .sbb-frameless-button, .sbb-link:where(.sbb-button-base)) .sbb-icon {
width: var(--sbb-icon-size-default);
height: var(--sbb-icon-size-default);
}
:is(.sbb-button, .sbb-alt-button, .sbb-secondary-button, .sbb-ghost-button, .sbb-icon-button, .sbb-frameless-button, .sbb-link:where(.sbb-button-base)) .sbb-icon > svg {
width: 100%;
height: 100%;
}
:is(.sbb-button, .sbb-alt-button, .sbb-secondary-button, .sbb-ghost-button, .sbb-frameless-button, .sbb-link:where(.sbb-button-base)):where(:not(.sbb-icon-button)) .sbb-icon {
margin-top: var(--sbb-button-icon-top-margin);
}
:is(.sbb-button, .sbb-alt-button, .sbb-secondary-button, .sbb-ghost-button, .sbb-frameless-button, .sbb-link:where(.sbb-button-base)):where(:not(.sbb-icon-button)) .sbb-icon:not(.sbb-button-indicator-icon) {
transform: translateY(calc(var(--sbb-button-icon-top-margin) / -2));
}
.sbb-button-indicator-icon {
transition-duration: var(--sbb-transition-duration-default);
transition-timing-function: var(--sbb-transition-timing-default);
transition-property:
opacity,
transform,
right;
backface-visibility: hidden;
pointer-events: none;
position: absolute;
top: 50%;
}
:is(.sbb-button-base.sbb-disabled, .sbb-button-base.sbb-disabled:hover) .sbb-button-indicator-icon {
opacity: 0;
}
.sbb-button-base.sbb-link .sbb-button-indicator-icon {
top: unset;
margin-top: unset;
transform: translateY(calc(0.0333333333rem * var(--sbb-scaling-factor))) !important;
}
:where(html.sbb-lean) .sbb-button-base.sbb-link .sbb-button-indicator-icon {
transform: translateY(-0.0666666667rem) !important;
}
:where(html:not(.sbb-lean)) .sbb-button-base.sbb-link .sbb-button-indicator-icon {
color: var(--sbb-color-call-to-action);
}
:where(html:not(.sbb-lean)) .sbb-button-base.sbb-link .sbb-button-indicator-icon:hover {
color: inherit;
}
.sbb-link-group :is(.sbb-button-indicator-icon, .sbb-button-indicator-icon:hover) {
transition: none;
}
.sbb-button-left-icon {
margin-left: calc(-2rem*var(--sbb-scaling-factor));
transform: translateX(calc(-1.7333333333rem * var(--sbb-scaling-factor)));
opacity: 0;
}
.sbb-button-base:hover .sbb-button-left-icon {
transform: translateX(0);
opacity: 1;
}
.sbb-link-group :is(.sbb-button-left-icon, .sbb-button-left-icon:hover) {
display: none;
}
.sbb-button-right-icon {
margin-left: calc(0.4rem*var(--sbb-scaling-factor));
transform: translateX(0);
opacity: 1;
}
:where(html.sbb-lean) .sbb-button-right-icon {
transform: translateX(calc(-1.6rem * var(--sbb-scaling-factor)));
}
:where(html:not(.sbb-lean)) .sbb-button-base:hover .sbb-button-right-icon {
transform: translateX(calc(1.7333333333rem * var(--sbb-scaling-factor)));
opacity: 0;
}
:where(html.sbb-lean) .sbb-button-base.sbb-link .sbb-button-right-icon {
transform: none;
}
.sbb-link-group :is(.sbb-button-right-icon, .sbb-button-right-icon:hover) {
opacity: 1;
right: 0;
}
.sbb-link-group {
display: inline-flex;
width: calc(16.6666666667rem*var(--sbb-scaling-factor));
flex-direction: column;
border-top: var(--sbb-border-width-thin) solid var(--sbb-color-silver);
}
.sbb-selection-item {
display: inline-block;
}
.sbb-selection-item-label {
display: flex;
position: relative;
align-items: flex-start;
font-size: var(--sbb-font-size);
line-height: var(--sbb-line-height);
}
.sbb-selection-container {
display: inline-block;
background-color: var(--sbb-selection-container-background-color-default);
margin-top: calc(0.2rem*var(--sbb-scaling-factor));
width: calc(1.3333333333rem*var(--sbb-scaling-factor));
min-width: calc(1.3333333333rem*var(--sbb-scaling-factor));
height: calc(1.3333333333rem*var(--sbb-scaling-factor));
min-height: calc(1.3333333333rem*var(--sbb-scaling-factor));
border: var(--sbb-border-width) solid var(--sbb-selection-container-border-color-default);
margin-right: calc(0.5333333333rem*var(--sbb-scaling-factor));
}
:where(html.sbb-lean) .sbb-selection-container {
margin-top: 0;
}
.sbb-selection-input:focus + .sbb-selection-container,
.sbb-menu-item.sbb-active .sbb-pseudo-checkbox .sbb-selection-container {
border-color: var(--sbb-selection-container-border-color-focused);
}
:is(.sbb-checkbox, .sbb-pseudo-checkbox) .sbb-selection-container {
border-radius: var(--sbb-border-radius);
}
.sbb-radio-button .sbb-selection-container {
border-radius: 50%;
}
:where(html.sbb-lean) .sbb-radio-button .sbb-selection-container {
margin-top: 0;
}
.sbb-selection-disabled .sbb-selection-container {
border-color: var(--sbb-selection-container-border-color-disabled);
background-color: var(--sbb-selection-container-background-color-disabled);
}
.sbb-selection-indeterminate .sbb-selection-container::before {
content: "";
position: relative;
height: .0666666667rem;
width: .6666666667rem;
left: calc(50% - 0.3333333333rem);
top: calc(50% - 0.0333333333rem);
border: .0666666667rem solid var(--sbb-selection-container-icon-color-default);
display: block;
background-color: var(--sbb-selection-container-icon-color-default);
}
.sbb-selection-container-checked {
color: var(--sbb-selection-container-icon-color-default);
line-height: 0;
height: 100%;
width: 100%;
transition: opacity var(--sbb-transition-default);
position: relative;
}
:is(.sbb-checkbox, .sbb-pseudo-checkbox) .sbb-selection-container-checked {
display: none;
border-radius: var(--sbb-border-radius);
transform: scale(1.3);
}
:is(.sbb-checkbox, .sbb-pseudo-checkbox) .sbb-selection-container-checked > svg {
display: inline-block;
line-height: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
:is(.sbb-checkbox, .sbb-pseudo-checkbox) .sbb-selection-container-checked > svg > polyline {
stroke: currentColor;
}
.sbb-radio-button .sbb-selection-container-checked {
display: none;
border-radius: 50%;
transform: scale(0.65);
background-color: var(--sbb-selection-container-icon-color-default);
}
.cdk-high-contrast-active .sbb-radio-button .sbb-selection-container-checked {
background-color: CanvasText;
}
.sbb-selection-disabled .sbb-selection-container-checked {
color: var(--sbb-selection-container-icon-color-disabled);
}
.sbb-radio-button:is(.sbb-selection-disabled) .sbb-selection-container-checked {
background-color: var(--sbb-selection-container-icon-color-disabled);
}
.sbb-selection-checked .sbb-selection-container-checked {
display: block;
}
.sbb-selection-indeterminate .sbb-selection-container-checked {
display: none;
}
.sbb-selection-content {
-webkit-user-select: auto;
user-select: auto;
color: var(--sbb-selection-label-color-unchecked);
transition: color var(--sbb-transition-default);
}
:where(html.sbb-lean) .sbb-selection-content {
line-height: 1.3333333333rem;
}
:is(.sbb-selection-checked, .sbb-selection-indeterminate) .sbb-selection-content {
color: var(--sbb-selection-label-color-checked);
}
.sbb-selection-disabled .sbb-selection-content {
color: var(--sbb-selection-label-color-disabled);
}
.sbb-selection-disabled {
pointer-events: none;
}
.cdk-high-contrast-active .sbb-selection-disabled {
opacity: .5;
}
:is(.sbb-checkbox-group-vertical, .sbb-radio-group-vertical) {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-start;
row-gap: calc(1.0666666667rem*var(--sbb-scaling-factor));
}
:where(html.sbb-lean) :is(.sbb-checkbox-group-vertical, .sbb-radio-group-vertical) {
row-gap: .2rem;
}
:is(.sbb-checkbox-group-horizontal, .sbb-radio-group-horizontal) {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
column-gap: calc(2.1333333333rem*var(--sbb-scaling-factor));
}
:where(html.sbb-lean) :is(.sbb-checkbox-group-horizontal, .sbb-radio-group-horizontal) {
column-gap: 1rem;
}
.sbb-selection-panel-item {
display: inline-block;
background-color: var(--sbb-selection-panel-background-color-default);
border: var(--sbb-border-width-thin) solid var(--sbb-selection-panel-border-color);
border-radius: var(--sbb-border-radius);
font-size: var(--sbb-font-size);
line-height: var(--sbb-line-height);
color: var(--sbb-selection-panel-color);
width: 100%;
transition: border-color .15s ease-in-out;
position: relative;
}
.sbb-selection-panel-item.sbb-selection-checked {
background-color: var(--sbb-selection-panel-background-color-checked);
border-color: var(--sbb-selection-panel-border-color-active);
color: var(--sbb-color-text);
}
.sbb-selection-panel-item:is(.sbb-selection-error, .ng-touched.ng-invalid),
.sbb-radio-group-base:is(.sbb-selection-error, .ng-touched.ng-invalid) .sbb-selection-panel-item {
border-color: var(--sbb-color-error);
color: var(--sbb-color-error);
}
.sbb-selection-panel-item.sbb-selection-disabled {
background-color: var(--sbb-selection-panel-background-color-disabled);
border-color: var(--sbb-selection-panel-border-color-disabled);
}
.sbb-selection-panel-item :is(.sbb-selection-container, .sbb-selection-panel-icon) {
display: inline-block;
flex: 0 0 auto;
}
.sbb-selection-panel-item .sbb-selection-content {
flex: 1 auto;
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
gap: calc(0.5333333333rem*var(--sbb-scaling-factor));
}
.sbb-selection-panel-item .sbb-selection-item-label {
padding: 1.2rem 1.6rem;
}
@media all and (min-width: 160.0625em) {
:where(html:not(.sbb-lean)) .sbb-selection-panel-item .sbb-selection-item-label {
padding: 1.8rem 2.4rem 1.7333333333rem;
}
}
@media all and (min-width: 240.0625em) {
:where(html:not(.sbb-lean)) .sbb-selection-panel-item .sbb-selection-item-label {
padding: 2.4666666667rem 3.2rem 2.3333333333rem;
}
}
.sbb-selection-inner-content {
flex-direction: column;
display: flex;
flex: 1 1 50%;
padding-right: calc(0.5333333333rem*var(--sbb-scaling-factor));
}
.sbb-selection-inner-content:not(:only-child) {
margin-right: calc(1.0666666667rem*var(--sbb-scaling-factor));
}
.sbb-selection-panel-subtitle {
font-size: var(--sbb-font-size-small);
line-height: var(--sbb-line-height-small);
color: var(--sbb-selection-panel-subtitle-color);
}
.sbb-selection-panel-warning {
flex: 1 100%;
order: 3;
color: var(--sbb-selection-panel-subtitle-color);
}
@media all and (min-width: 40.1875em) {
.sbb-selection-panel-warning {
flex-basis: 0;
order: initial;
margin-top: initial;
}
}
.sbb-selection-panel-note {
margin-left: auto;
margin-bottom: calc(0.5333333333rem*var(--sbb-scaling-factor));
}
@media all and (min-width: 40.1875em) {
.sbb-selection-panel-note {
margin-bottom: 0;
}
}
.sbb-selection-panel-note img {
max-height: calc(1.6rem*var(--sbb-scaling-factor));
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group) {
display: grid;
grid-template-columns: 1fr;
gap: calc(0.5333333333rem*var(--sbb-scaling-factor)) calc(0.4rem*var(--sbb-scaling-factor));
font-size: var(--sbb-font-size);
}
@media all and (min-width: 40.1875em) {
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-tablet-2 {
grid-template-columns: repeat(2, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-tablet-3 {
grid-template-columns: repeat(3, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-tablet-4 {
grid-template-columns: repeat(4, 1fr);
}
}
@media all and (min-width: 64.0625em) {
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop-2 {
grid-template-columns: repeat(2, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop-3 {
grid-template-columns: repeat(3, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop-4 {
grid-template-columns: repeat(4, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop-5 {
grid-template-columns: repeat(5, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop-6 {
grid-template-columns: repeat(6, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop-7 {
grid-template-columns: repeat(7, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop-8 {
grid-template-columns: repeat(8, 1fr);
}
}
@media all and (min-width: 80.0625em) {
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktopLarge-2 {
grid-template-columns: repeat(2, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktopLarge-3 {
grid-template-columns: repeat(3, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktopLarge-4 {
grid-template-columns: repeat(4, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktopLarge-5 {
grid-template-columns: repeat(5, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktopLarge-6 {
grid-template-columns: repeat(6, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktopLarge-7 {
grid-template-columns: repeat(7, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktopLarge-8 {
grid-template-columns: repeat(8, 1fr);
}
}
@media all and (min-width: 90.0625em) {
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop2k-2 {
grid-template-columns: repeat(2, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop2k-3 {
grid-template-columns: repeat(3, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop2k-4 {
grid-template-columns: repeat(4, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop2k-5 {
grid-template-columns: repeat(5, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop2k-6 {
grid-template-columns: repeat(6, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop2k-7 {
grid-template-columns: repeat(7, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop2k-8 {
grid-template-columns: repeat(8, 1fr);
}
}
@media all and (min-width: 160.0625em) {
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop4k-2 {
grid-template-columns: repeat(2, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop4k-3 {
grid-template-columns: repeat(3, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop4k-4 {
grid-template-columns: repeat(4, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop4k-5 {
grid-template-columns: repeat(5, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop4k-6 {
grid-template-columns: repeat(6, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop4k-7 {
grid-template-columns: repeat(7, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop4k-8 {
grid-template-columns: repeat(8, 1fr);
}
}
@media all and (min-width: 240.0625em) {
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop5k-2 {
grid-template-columns: repeat(2, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop5k-3 {
grid-template-columns: repeat(3, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop5k-4 {
grid-template-columns: repeat(4, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop5k-5 {
grid-template-columns: repeat(5, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop5k-6 {
grid-template-columns: repeat(6, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop5k-7 {
grid-template-columns: repeat(7, 1fr);
}
:is(.sbb-checkbox-panel-group, .sbb-radio-panel-group).sbb-col-desktop5k-8 {
grid-template-columns: repeat(8, 1fr);
}
}
.sbb-label {
letter-spacing: 0;
outline: 0;
resize: none;
background-color: rgba(0, 0, 0, 0);
font-family: var(--sbb-font-roman);
font-size: var(--sbb-font-size-small);
line-height: var(--sbb-form-label-line-height);
color: var(--sbb-form-label-color);
display: block;
}
.sbb-table-wrapper {
display: block;
overflow: auto;
}
.sbb-table-wrapper:focus-visible {
outline: var(--sbb-border-width) solid var(--sbb-color-black);
}
.sbb-table {
border-spacing: 0;
width: 100%;
font-size: var(--sbb-font-size);
line-height: var(--sbb-line-height-medium);
padding-bottom: var(--sbb-table-tbody-padding);
}
:where(html.sbb-lean) .sbb-table {
line-height: var(--sbb-line-height);
padding-bottom: 0;
}
.sbb-table :is(th, td) {
color: var(--sbb-color-text);
background-color: var(--sbb-table-background-color);
vertical-align: top;
position: relative;
}
.sbb-table th {
font-family: var(--sbb-font-bold);
font-weight: 400;
color: var(--sbb-table-thead-color);
}
.sbb-table th .sbb-table-header-subtitle {
font-family: var(--sbb-font-roman);
}
.sbb-table th.sbb-header-cell.sbb-table-filter {
font-family: var(--sbb-font-roman);
font-weight: normal;
padding-top: 0;
}
.sbb-table th.sbb-header-cell.sbb-table-filter input {
width: 100%;
}
.sbb-table thead {
text-align: left;
}
:where(html.sbb-lean) .sbb-table thead > tr:last-child :is(th, td) {
border-bottom: var(--sbb-border-width-thin) solid var(--sbb-table-thead-border-color);
}
:where(html.sbb-lean) .sbb-table thead > tr :is(th, td) {
border-right: var(--sbb-border-width-thin) solid var(--sbb-table-thead-border-color);
}
:is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) :where(html.sbb-lean) .sbb-table thead > tr :is(th, td).sbb-table-sticky-border-elem-right {
border-left: var(--sbb-border-width-thin) solid var(--sbb-table-thead-border-color);
}
:where(html:not(.sbb-lean)) .sbb-table :is(thead, tfoot) > tr :is(th, td) {
background-color: var(--sbb-table-thead-background-color);
padding: var(--sbb-table-thead-padding-vertical-top) var(--sbb-table-cell-padding-horizontal) var(--sbb-table-thead-padding-vertical-bottom) var(--sbb-table-cell-padding-horizontal);
}
@media all and (min-width: 40.1875em) {
:where(html:not(.sbb-lean)) .sbb-table :is(thead, tfoot) > tr :is(th, td):first-child {
border-left: var(--sbb-table-thead-padding) solid var(--sbb-table-thead-background-color);
}
:where(html:not(.sbb-lean)) .sbb-table :is(thead, tfoot) > tr :is(th, td):last-child {
border-right: var(--sbb-table-thead-padding) solid var(--sbb-table-thead-background-color);
}
}
:where(html.sbb-lean) :is(.sbb-table tbody, .sbb-table tfoot, .sbb-table) > tr :is(th, td) {
border-right: var(--sbb-border-width-thin) solid var(--sbb-table-border-color);
}
:where(html.sbb-lean) :is(.sbb-table thead, .sbb-table tbody, .sbb-table tfoot, .sbb-table) > tr :is(th, td) {
padding: var(--sbb-table-cell-padding-vertical) var(--sbb-table-tbody-padding);
}
:where(html.sbb-lean) :is(.sbb-table thead, .sbb-table tbody, .sbb-table tfoot, .sbb-table) > tr :is(th, td).sbb-table-group-with-next {
border-right: none;
}
:where(html.sbb-lean) :is(.sbb-table thead, .sbb-table tbody, .sbb-table tfoot, .sbb-table) > tr :is(th, td):first-child {
padding-left: var(--sbb-table-tbody-padding);
border-left: none;
}
:where(html.sbb-lean) :is(.sbb-table thead, .sbb-table tbody, .sbb-table tfoot, .sbb-table) > tr :is(th, td):last-child {
padding-right: var(--sbb-table-tbody-padding);
border-right: none;
}
:where(html:not(.sbb-lean)) :is(.sbb-table tbody, .sbb-table) > tr :is(th, td) {
padding: var(--sbb-table-cell-padding-vertical-top) var(--sbb-table-cell-padding-horizontal) var(--sbb-table-cell-padding-vertical-bottom) var(--sbb-table-cell-padding-horizontal);
}
@media all and (min-width: 40.1875em) {
:where(html:not(.sbb-lean)) :is(.sbb-table tbody, .sbb-table) > tr :is(th, td):first-child {
border-left: var(--sbb-table-thead-padding) solid var(--sbb-table-background-color);
}
:where(html:not(.sbb-lean)) :is(.sbb-table tbody, .sbb-table) > tr :is(th, td):last-child {
border-right: var(--sbb-table-thead-padding) solid var(--sbb-table-background-color);
}
}
:where(html.sbb-lean) :is(.sbb-table tbody, .sbb-table) > tr :is(th, td) {
border-bottom: var(--sbb-border-width-thin) solid var(--sbb-table-border-color);
}
:where(html:not(.sbb-lean)) :is(.sbb-table tbody, .sbb-table) > tr:nth-child(even) :is(th, td) {
background-color: var(--sbb-table-tbody-stripe-background-color);
}
:where(html.sbb-lean) :is(.sbb-table tbody, .sbb-table) > tr.sbb-table-row-selected :is(td, th) {
background-color: var(--sbb-table-row-selected-background-color);
border-bottom: var(--sbb-border-width-thin) solid var(--sbb-table-row-selected-border-bottom-color);
}
:where(html.sbb-lean) :is(.sbb-table tbody, .sbb-table) > tr:is(:hover, :focus, :focus-within) :is(td, th) {
background-color: var(--sbb-table-cell-background-color-hover);
border-bottom: var(--sbb-border-width-thin) solid var(--sbb-color-call-to-action-hover);
}
.sbb-table caption {
font-size: var(--sbb-font-size-small);
line-height: var(--sbb-line-height-small);
color: var(--sbb-color-weak-accent);
}
.sbb-table .sbb-selection-item {
vertical-align: top;
}
.sbb-table .sbb-button-base,
.sbb-table .sbb-menu-trigger-contextmenu {
margin: -100% 0;
}
:where(html.sbb-lean) .sbb-table .sbb-button-base {
padding-top: 0 !important;
padding-bottom: 0 !important;
height: var(--sbb-icon-size-default);
}
:where(html.sbb-lean) .sbb-table .sbb-button-base:not(.sbb-ghost-button) {
border: none;
}
:where(html.sbb-lean) .sbb-table .sbb-icon-button {
padding: 0 !important;
}
.sbb-table .sbb-icon-button,
.sbb-table .sbb-menu-trigger-contextmenu {
transform: translateY(calc(0.4666666667rem * var(--sbb-scaling-factor)));
}
.sbb-table-caption > * {
font-size: var(--sbb-font-size-small);
line-height: var(--sbb-line-height-small);
color: var(--sbb-color-weak-accent);
}
.sbb-table-align-center {
text-align: center;
}
.sbb-table-align-left {
text-align: left;
}
.sbb-table-align-right {
text-align: right;
}
.sbb-table-sticky {
position: sticky !important;
}
:is(.sbb-table-sticky-border-elem-left, .sbb-table-sticky-border-elem-right)::after {
content: "";
transition-timing-function: var(--sbb-transition-timing-fast-start);
transition-duration: var(--sbb-transition-duration-fast);
transition-property: visibility, opacity;
visibility: hidden;
opacity: 0;
position: absolute;
width: var(--sbb-table-sticky-shadow-width);
top: 0;
bottom: 0;
}
:is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-left::after {
visibility: visible;
opacity: 1;
background-image:
linear-gradient(
-270deg,
rgba(0, 0, 0, 0.2) 0%,
transparent 100%);
right: var(--sbb-table-sticky-shadow-offset);
}
:where(html.sbb-lean) :is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-right {
border-left: var(--sbb-border-width-thin) solid var(--sbb-color-aluminum);
}
:is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-right::after {
visibility: visible;
opacity: 1;
background-image:
linear-gradient(
270deg,
rgba(0, 0, 0, 0.2) 0%,
transparent 100%);
left: var(--sbb-table-sticky-shadow-offset);
}
:where(html.sbb-lean) .sbb-table-sticky-border-elem-bottom::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -.0666666667rem;
border-top: .0666666667rem solid var(--sbb-color-aluminum);
}
.sbb-table-fixed-layout {
table-layout: fixed;
}
.sbb-table-divider-title {
font-family: var(--sbb-font-bold);
}
.sbb-table-cell-actions {
--sbb-table-cell-actions-background-color: var(--sbb-table-background-color);
display: none;
align-items: center;
position: absolute;
right: 0;
top: 0;
gap: calc(0.1333333333rem*var(--sbb-scaling-factor));
padding: calc(0.8rem*var(--sbb-scaling-factor)) calc(0.8rem*var(--sbb-scaling-factor)) 0 calc(0.1333333333rem*var(--sbb-scaling-factor));
box-shadow: 0 0 calc(0.5333333333rem*var(--sbb-scaling-factor)) calc(0.5333333333rem*var(--sbb-scaling-factor)) var(--sbb-table-cell-actions-background-color);
background-color: var(--sbb-table-cell-actions-background-color);
clip-path: inset(0 0 -100% -100%);
}
:where(html:not(.sbb-lean)) :is(tbody, .sbb-table) > tr:nth-child(even) .sbb-table-cell-actions {
--sbb-table-cell-actions-background-color: var(--sbb-table-tbody-stripe-background-color);
}
:where(html.sbb-lean) .sbb-table-cell-actions {
--sbb-table-cell-actions-background-color: var(--sbb-table-cell-actions-background-color-lean);
padding: .3333333333rem .3333333333rem 0rem .1333333333rem;
box-shadow: 0 0 .2666666667rem .2666666667rem var(--sbb-table-cell-actions-background-color);
}
.sbb-table-cell-actions .sbb-button-base {
margin: 0;
transform: none;
}
:where(html:not(.sbb-lean)) .sbb-table-cell-actions .sbb-icon-button {
padding: calc(0.3333333333rem*var(--sbb-scaling-factor)) !important;
height: var(--sbb-icon-size-large);
}
tr:is(:hover, :focus, :focus-within) .sbb-table-cell-actions {
display: flex;
}
input.sbb-input-element.sbb-time-input {
width: calc(5.6rem*var(--sbb-scaling-factor));
height: calc(3.2rem*var(--sbb-scaling-factor));
text-align: center;
}
:where(html.sbb-lean) input.sbb-input-element.sbb-time-input {
width: 4.6666666667rem;
height: 2.4rem;
}
:where(html.sbb-lean) input.sbb-input-element.sbb-time-input:is([readonly], .sbb-readonly) {
text-align: left;
}
.sbb-scrollbar {
--sbb-scrollbar-thumb-color: transparent;
--sbb-scrollbar-track-color: transparent;
scrollbar-width: thin;
scrollbar-color: var(--sbb-scrollbar-thumb-color) var(--sbb-scrollbar-track-color);
}
.sbb-scrollbar:is(:hover, .sbb-scrollbar-opaque) {
--sbb-scrollbar-thumb-color: var(--sbb-scrollbar-thumb-color-visible);
--sbb-scrollbar-track-color: var(--sbb-scrollbar-track-color-visible);
}
.sbb-scrollbar::-webkit-scrollbar {
width: .5rem;
height: .5rem;
}
.sbb-scrollbar::-webkit-scrollbar-thumb {
background-color: var(--sbb-scrollbar-thumb-color);
}
.sbb-scrollbar::-webkit-scrollbar-track {
background-color: var(--sbb-scrollbar-track-color);
}
@supports (-webkit-touch-callout: none) {
.sbb-scrollbar::-webkit-scrollbar {
width: 0;
height: 0;
}
}
.sbb-scrollbar:hover::-webkit-scrollbar-thumb:hover {
background-color: var(--sbb-color-storm);
}
.clearfix {
zoom: 1;
}
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.sbb-panel {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: var(--sbb-panel-background-color);
border: var(--sbb-border-width) solid var(--sbb-color-weak-accent);
border-radius: 0 0 var(--sbb-border-radius) var(--sbb-border-radius);
border-top: none;
transition: height var(--sbb-transition-fast-start), opacity var(--sbb-transition-fast-start);
color: var(--sbb-color-weak-accent);
position: relative;
top: var(--sbb-box-shadow-horizontal-border-offset-top-below);
box-shadow: var(--sbb-box-shadow-below), var(--sbb-box-shadow-horizontal-border-bottom);
}
.sbb-panel hr {
margin: .6666666667rem 0;
padding: 0;
border: none;
border-top: var(--sbb-border-width-thin) solid var(--sbb-panel-divider-color);
}
:where(html.sbb-lean) .sbb-panel hr {
margin: .2666666667rem 0;
}
.sbb-panel .sbb-label {
color: var(--sbb-menu-title-color);
padding: calc(0.3333333333rem*var(--sbb-scaling-factor)) calc(0.9333333333rem*var(--sbb-scaling-factor));
}
:where(html.sbb-lean) .sbb-panel .sbb-label {
padding: .2666666667rem .5333333333rem;
}
.sbb-panel-above {
border-radius: var(--sbb-border-radius) var(--sbb-border-radius) 0 0;
border-top-width: var(--sbb-border-width);
border-top-style: solid;
border-bottom: none;
top: var(--sbb-box-shadow-horizontal-border-offset-top-above);
box-shadow: var(--sbb-box-shadow-horizontal-border-top);
}
.sbb-panel-padded {
padding-top: calc(0.6666666667rem*var(--sbb-scaling-factor));
padding-bottom: calc(0.6666666667rem*var(--sbb-scaling-factor));
}
:where(html.sbb-lean) .sbb-panel-padded {
padding-top: .2666666667rem;
padding-bottom: .2666666667rem;
}
.sbb-input-with-open-panel:not(.sbb-input-with-open-panel-above).sbb-input-element,
.sbb-input-with-open-panel:not(.sbb-input-with-open-panel-above) > .sbb-input-element {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.sbb-input-with-open-panel-above.sbb-input-element,
.sbb-input-with-open-panel-above > .sbb-input-element {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
box-shadow: var(--sbb-box-shadow-below);
}
.sbb-menu-item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: none;
max-width: none;
min-width: 0;
padding: 0;
margin: 0;
border: none;
position: relative;
display: block;
text-decoration: none;
padding: calc(0.2666666667rem*var(--sbb-scaling-factor)) calc(0.9333333333rem*var(--sbb-scaling-factor));
text-align: left;
max-width: 100%;
cursor: pointer;
outline: 0;
color: var(--sbb-color-weak-accent);
font-size: var(--sbb-font-size);
line-height: var(--sbb-line-height-medium);
}
:where(html.sbb-lean) .sbb-menu-item {
padding-left: .5333333333rem;
padding-right: .5333333333rem;
}
.sbb-menu-item:not(.sbb-focused) strong {
color: var(--sbb-color-text);
}
.sbb-menu-item:is(.sbb-selected, .sbb-active) {
color: var(--sbb-color-text);
}
:where(html.sbb-lean) .sbb-menu-item:is(.sbb-selected, .sbb-active) {
color: var(--sbb-menu-item-label-active);
background-color: var(--sbb-menu-item-background-color-active);
}
:where(html.sbb-lean) .sbb-menu-item:is(.sbb-selected, .sbb-active)::before {
content: "";
position: absolute;
height: 100%;
width: var(--sbb-border-width-thin);
left: 0;
top: 0;
background-color: var(--sbb-menu-item-label-active);
}
.sbb-menu-item:is(:disabled, [disabled], .sbb-disabled) {
cursor: default;
opacity: .5;
-webkit-user-select: none;
user-select: none;
}
:is(.sbb-menu-item:is(:not(:disabled):not([disabled]):not(.sbb-disabled):is(:hover, .cdk-keyboard-focused), .sbb-focused), .sbb-menu-item:is(:not(:disabled):not([disabled]):not(.sbb-disabled):is(:hover, .cdk-keyboard-focused), .sbb-focused) strong) {
color: var(--sbb-color-red);
}
:where(html.sbb-lean) :is(.sbb-menu-item:is(:not(:disabled):not([disabled]):not(.sbb-disabled):is(:hover, .cdk-keyboard-focused), .sbb-focused), .sbb-menu-item:is(:not(:disabled):not([disabled]):not(.sbb-disabled):is(:hover, .cdk-keyboard-focused), .sbb-focused) strong) {
color: var(--sbb-color-call-to-action-hover);
background-color: var(--sbb-menu-item-background-color-hover);
}
:where(html.sbb-lean) :is(.sbb-menu-item:is(:not(:disabled):not([disabled]):not(.sbb-disabled):is(:hover, .cdk-keyboard-focused), .sbb-focused), .sbb-menu-item:is(:not(:disabled):not([disabled]):not(.sbb-disabled):is(:hover, .cdk-keyboard-focused), .sbb-focused) strong)::before {
content: "";
position: absolute;
height: 100%;
width: var(--sbb-border-width-thin);
left: 0;
top: 0;
background-color: var(--sbb-color-call-to-action-hover);
}
.sbb-menu-item .sbb-icon {
line-height: 0;
margin: -.4666666667rem 0 -.4666666667rem 0;
transform: translateY(calc(0.4666666667rem * var(--sbb-scaling-factor)));
width: var(--sbb-icon-size-default);
height: var(--sbb-icon-size-default);
}
@media all and (min-width: 160.0625em) {
:where(html:not(.sbb-lean)) .sbb-menu-item .sbb-icon {
margin-top: -0.8rem;
margin-bottom: -0.8rem;
}
}
@media all and (min-width: 240.0625em) {
:where(html:not(.sbb-lean)) .sbb-menu-item .sbb-icon {
margin-top: -1rem;
margin-bottom: -1rem;
}
}
:where(html.sbb-lean) .sbb-menu-item .sbb-icon {
margin: -0.6rem 0 -0.6rem 0;
}
.sbb-menu-item > .sbb-icon:first-child {
float: left;
margin-right: calc(0.7333333333rem*var(--sbb-scaling-factor));
margin-left: calc(-0.0666666667rem*var(--sbb-scaling-factor));
}
:where(html.sbb-lean) .sbb-menu-item > .sbb-icon:first-child {
margin-right: .5333333333rem;
margin-left: 0;
}
.sbb-menu-group {
display: block;
}
.sbb-menu-group:first-child > .sbb-label:first-child {
padding-top: calc(1.0666666667rem*var(--sbb-scaling-factor));
}
.sbb-panel-padded > .sbb-menu-group:first-child > .sbb-label:first-child {
padding-top: calc(0.4rem*var(--sbb-scaling-factor));
}
.sbb-menu-group .sbb-label:where(:not(.sbb-option-hint)) {
padding-top: calc(1.4666666667rem*var(--sbb-scaling-factor));
}
:where(html.sbb-lean) .sbb-menu-group .sbb-label:where(:not(.sbb-option-hint)) {
padding-top: .8rem;
}
:is(.sbb-menu-group + .sbb-menu-group, .sbb-menu-item + .sbb-menu-group, .sbb-menu-group + .sbb-menu-item) {
border-top: var(--sbb-border-width-thin) solid var(--sbb-color-cloud);
margin-top: calc(0.5333333333rem*var(--sbb-scaling-factor));
}
:where(html.sbb-lean) :is(.sbb-menu-group + .sbb-menu-group, .sbb-menu-item + .sbb-menu-group, .sbb-menu-group + .sbb-menu-item) {
margin-top: .2666666667rem;
}
:is(.sbb-menu-group + .sbb-menu-group, .sbb-menu-item + .sbb-menu-group, .sbb-menu-group + .sbb-menu-item) .sbb-label:where(:not(.sbb-option-hint)) {
padding-top: calc(1.0666666667rem*var(--sbb-scaling-factor));
}
:where(html.sbb-lean) :is(.sbb-menu-group + .sbb-menu-group, .sbb-menu-item + .sbb-menu-group, .sbb-menu-group + .sbb-menu-item) .sbb-label:where(:not(.sbb-option-hint)) {
padding-top: .5333333333rem;
}
.sbb-menu-group + .sbb-menu-item {
padding-top: calc(0.9333333333rem*var(--sbb-scaling-factor));
}
:where(html.sbb-lean) .sbb-menu-group + .sbb-menu-item {
padding-top: .5333333333rem;
}
.sbb-tooltip-trigger,
.sbb-tooltip-icon {
line-height: 0;
cursor: pointer;
}
.sbb-tooltip-inline .sbb-tooltip-trigger,
.sbb-tooltip-inline .sbb-tooltip-icon {
vertical-align: text-bottom;
margin-bottom: calc(-.2333333333rem*var(--sbb-scaling-factor));
}
.sbb-tooltip-trigger:is(:disabled, .sbb-disabled),
.sbb-tooltip-icon:is(:disabled, .sbb-disabled) {
cursor: default;
color: var(--sbb-ghost-button-label-color-disabled);
border-color: var(--sbb-ghost-button-border-color-disabled);
}
:where(html:not(.sbb-lean)) .sbb-tooltip-trigger:is(:disabled, .sbb-disabled),
:where(html:not(.sbb-lean)) .sbb-tooltip-icon:is(:disabled, .sbb-disabled) {
display: none;
}
:is(.sbb-tooltip-icon, .sbb-tooltip-trigger):is(:active, :hover, :focus):not(:disabled, .sbb-disabled),
.sbb-tooltip-trigger-active {
outline: none;
color: var(--sbb-color-call-to-action-hover);
border-color: var(--sbb-color-call-to-action-hover);
}
.sbb-divider-thin-vertical,
.sbb-divider-thin-top {
margin-top: var(--sbb-divider-thin);
}
.sbb-divider-thin-vertical,
.sbb-divider-thin-bottom {
margin-bottom: var(--sbb-divider-thin);
}
.sbb-divider-small-vertical,
.sbb-divider-small-top {
margin-top: var(--sbb-divider-small);
}
.sbb-divider-small-vertical,
.sbb-divider-small-bottom {
margin-bottom: var(--sbb-divider-small);
}
.sbb-divider-medium-vertical,
.sbb-divider-medium-top {
margin-top: var(--sbb-divider-medium);
}
.sbb-divider-medium-vertical,
.sbb-divider-medium-bottom {
margin-bottom: var(--sbb-divider-medium);
}
.sbb-divider-big-vertical,
.sbb-divider-big-top {
margin-top: var(--sbb-divider-big);
}
.sbb-divider-big-vertical,
.sbb-divider-big-bottom {
margin-bottom: var(--sbb-divider-big);
}
/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */