/* * Amplify UI Basic Theme */ :root, [data-amplify-theme] { --amplify-components-accordion-background-color: var(--amplify-colors-background-primary); --amplify-components-accordion-item-border-color: var(--amplify-colors-border-secondary); --amplify-components-accordion-item-border-width: var(--amplify-border-widths-small); --amplify-components-accordion-item-border-style: solid; --amplify-components-accordion-item-border-radius: var(--amplify-radii-small); --amplify-components-accordion-item-trigger-align-items: center; --amplify-components-accordion-item-trigger-background-color: var(--amplify-colors-background-primary); --amplify-components-accordion-item-trigger-color: inherit; --amplify-components-accordion-item-trigger-gap: var(--amplify-space-small); --amplify-components-accordion-item-trigger-justify-content: space-between; --amplify-components-accordion-item-trigger-padding-block: var(--amplify-space-xs); --amplify-components-accordion-item-trigger-padding-inline: var(--amplify-space-small); --amplify-components-accordion-item-trigger-hover-color: inherit; --amplify-components-accordion-item-trigger-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-accordion-item-trigger-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-accordion-item-trigger-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus); --amplify-components-accordion-item-content-color: inherit; --amplify-components-accordion-item-content-padding-inline: var(--amplify-space-small); --amplify-components-accordion-item-content-padding-block-end: var(--amplify-space-small); --amplify-components-accordion-item-content-padding-block-start: var(--amplify-space-xxxs); --amplify-components-accordion-item-icon-color: var(--amplify-colors-font-tertiary); --amplify-components-accordion-item-icon-transition-duration: var(--amplify-time-medium); --amplify-components-accordion-item-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1); --amplify-components-ai-conversation-message-background-color: var(--amplify-colors-background-secondary); --amplify-components-ai-conversation-message-border-radius: var(--amplify-radii-large); --amplify-components-ai-conversation-message-gap: var(--amplify-space-small); --amplify-components-ai-conversation-message-padding-block: var(--amplify-space-small); --amplify-components-ai-conversation-message-padding-inline: var(--amplify-space-small); --amplify-components-ai-conversation-message-user-background-color: var(--amplify-colors-background-secondary); --amplify-components-ai-conversation-message-assistant-background-color: var(--amplify-colors-primary-10); --amplify-components-ai-conversation-message-sender-gap: var(--amplify-space-small); --amplify-components-ai-conversation-message-sender-username-color: var(--amplify-colors-font-primary); --amplify-components-ai-conversation-message-sender-username-font-size: inherit; --amplify-components-ai-conversation-message-sender-username-font-weight: var(--amplify-font-weights-bold); --amplify-components-ai-conversation-message-sender-timestamp-color: var(--amplify-colors-font-tertiary); --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit; --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit; --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs); --amplify-components-ai-conversation-message-actions-gap: var(--amplify-space-xs); --amplify-components-ai-conversation-form-gap: var(--amplify-space-small); --amplify-components-ai-conversation-form-padding: var(--amplify-space-small); --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary); --amplify-components-ai-conversation-attachment-border-width: var(--amplify-border-widths-small); --amplify-components-ai-conversation-attachment-border-radius: var(--amplify-radii-small); --amplify-components-ai-conversation-attachment-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs); --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-gap: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-list-padding: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-list-padding-block-start: 0; --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs); --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary); --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-name-font-weight: var(--amplify-font-weights-normal); --amplify-components-ai-conversation-attachment-size-color: var(--amplify-colors-font-tertiary); --amplify-components-ai-conversation-attachment-size-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-ai-conversation-attachment-remove-padding: var(--amplify-space-xxs); --amplify-components-ai-conversation-attachment-image-width: var(--amplify-font-sizes-medium); --amplify-components-ai-conversation-attachment-image-height: var(--amplify-font-sizes-medium); --amplify-components-alert-align-items: center; --amplify-components-alert-justify-content: space-between; --amplify-components-alert-color: var(--amplify-colors-font-primary); --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary); --amplify-components-alert-padding-block: var(--amplify-space-small); --amplify-components-alert-padding-inline: var(--amplify-space-medium); --amplify-components-alert-icon-size: var(--amplify-font-sizes-xl); --amplify-components-alert-heading-font-size: var(--amplify-font-sizes-medium); --amplify-components-alert-heading-font-weight: var(--amplify-font-weights-bold); --amplify-components-alert-info-color: var(--amplify-colors-font-info); --amplify-components-alert-info-background-color: var(--amplify-colors-background-info); --amplify-components-alert-error-color: var(--amplify-colors-font-error); --amplify-components-alert-error-background-color: var(--amplify-colors-background-error); --amplify-components-alert-warning-color: var(--amplify-colors-font-warning); --amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-alert-success-color: var(--amplify-colors-font-success); --amplify-components-alert-success-background-color: var(--amplify-colors-background-success); --amplify-components-authenticator-max-width: 60rem; --amplify-components-authenticator-modal-width: var(--amplify-space-relative-full); --amplify-components-authenticator-modal-height: var(--amplify-space-relative-full); --amplify-components-authenticator-modal-background-color: var(--amplify-colors-overlay-50); --amplify-components-authenticator-modal-top: var(--amplify-space-zero); --amplify-components-authenticator-modal-left: var(--amplify-space-zero); --amplify-components-authenticator-container-width-max: 30rem; --amplify-components-authenticator-router-border-width: var(--amplify-border-widths-small); --amplify-components-authenticator-router-border-style: solid; --amplify-components-authenticator-router-border-color: var(--amplify-colors-border-primary); --amplify-components-authenticator-router-background-color: var(--amplify-colors-background-primary); --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium); --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium); --amplify-components-authenticator-form-padding: var(--amplify-space-xl); --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary); --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80); --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-width: 100%; --amplify-components-autocomplete-menu-margin-block-start: var(--amplify-space-xxxs); --amplify-components-autocomplete-menu-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-border-color: var(--amplify-colors-border-primary); --amplify-components-autocomplete-menu-border-width: var(--amplify-border-widths-small); --amplify-components-autocomplete-menu-border-style: solid; --amplify-components-autocomplete-menu-border-radius: var(--amplify-radii-small); --amplify-components-autocomplete-menu-options-display: flex; --amplify-components-autocomplete-menu-options-flex-direction: column; --amplify-components-autocomplete-menu-options-max-height: 300px; --amplify-components-autocomplete-menu-option-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-option-color: currentcolor; --amplify-components-autocomplete-menu-option-cursor: pointer; --amplify-components-autocomplete-menu-option-transition-duration: var(--amplify-time-short); --amplify-components-autocomplete-menu-option-transition-property: background-color, color; --amplify-components-autocomplete-menu-option-transition-timing-function: ease; --amplify-components-autocomplete-menu-option-active-background-color: var(--amplify-colors-primary-80); --amplify-components-autocomplete-menu-option-active-color: var(--amplify-colors-white); --amplify-components-autocomplete-menu-empty-display: flex; --amplify-components-autocomplete-menu-loading-align-items: center; --amplify-components-autocomplete-menu-loading-display: flex; --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs); --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs); --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small); --amplify-components-avatar-color: var(--amplify-colors-font-tertiary); --amplify-components-avatar-line-height: 1; --amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold); --amplify-components-avatar-font-size: var(--amplify-font-sizes-small); --amplify-components-avatar-text-align: center; --amplify-components-avatar-width: var(--amplify-font-sizes-xxl); --amplify-components-avatar-height: var(--amplify-font-sizes-xxl); --amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary); --amplify-components-avatar-border-radius: 100%; --amplify-components-avatar-border-color: var(--amplify-colors-border-primary); --amplify-components-avatar-border-width: var(--amplify-border-widths-medium); --amplify-components-avatar-info-color: var(--amplify-colors-font-info); --amplify-components-avatar-info-background-color: var(--amplify-colors-background-info); --amplify-components-avatar-info-border-color: var(--amplify-colors-border-info); --amplify-components-avatar-warning-color: var(--amplify-colors-font-warning); --amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning); --amplify-components-avatar-success-color: var(--amplify-colors-font-success); --amplify-components-avatar-success-background-color: var(--amplify-colors-background-success); --amplify-components-avatar-success-border-color: var(--amplify-colors-border-success); --amplify-components-avatar-error-color: var(--amplify-colors-font-error); --amplify-components-avatar-error-background-color: var(--amplify-colors-background-error); --amplify-components-avatar-error-border-color: var(--amplify-colors-border-error); --amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs); --amplify-components-avatar-small-width: var(--amplify-font-sizes-xl); --amplify-components-avatar-small-height: var(--amplify-font-sizes-xl); --amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium); --amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl); --amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl); --amplify-components-badge-color: var(--amplify-colors-font-primary); --amplify-components-badge-line-height: 1; --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold); --amplify-components-badge-font-size: var(--amplify-font-sizes-small); --amplify-components-badge-text-align: center; --amplify-components-badge-padding-vertical: var(--amplify-space-xs); --amplify-components-badge-padding-horizontal: var(--amplify-space-small); --amplify-components-badge-background-color: var(--amplify-colors-background-tertiary); --amplify-components-badge-border-radius: var(--amplify-radii-xl); --amplify-components-badge-info-color: var(--amplify-colors-font-info); --amplify-components-badge-info-background-color: var(--amplify-colors-background-info); --amplify-components-badge-warning-color: var(--amplify-colors-font-warning); --amplify-components-badge-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-badge-success-color: var(--amplify-colors-font-success); --amplify-components-badge-success-background-color: var(--amplify-colors-background-success); --amplify-components-badge-error-color: var(--amplify-colors-font-error); --amplify-components-badge-error-background-color: var(--amplify-colors-background-error); --amplify-components-badge-small-font-size: var(--amplify-font-sizes-xs); --amplify-components-badge-small-padding-vertical: var(--amplify-space-xxs); --amplify-components-badge-small-padding-horizontal: var(--amplify-space-xs); --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium); --amplify-components-badge-large-padding-vertical: var(--amplify-space-small); --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium); --amplify-components-breadcrumbs-flex-direction: row; --amplify-components-breadcrumbs-flex-wrap: wrap; --amplify-components-breadcrumbs-gap: 0; --amplify-components-breadcrumbs-color: var(--amplify-colors-font-tertiary); --amplify-components-breadcrumbs-item-flex-direction: row; --amplify-components-breadcrumbs-item-color: inherit; --amplify-components-breadcrumbs-item-font-size: inherit; --amplify-components-breadcrumbs-item-align-items: center; --amplify-components-breadcrumbs-item-line-height: 1; --amplify-components-breadcrumbs-separator-color: inherit; --amplify-components-breadcrumbs-separator-font-size: inherit; --amplify-components-breadcrumbs-separator-padding-inline: var(--amplify-space-xxs); --amplify-components-breadcrumbs-link-color: var(--amplify-components-link-color); --amplify-components-breadcrumbs-link-font-size: inherit; --amplify-components-breadcrumbs-link-font-weight: normal; --amplify-components-breadcrumbs-link-text-decoration: none; --amplify-components-breadcrumbs-link-padding-inline: var(--amplify-space-xs); --amplify-components-breadcrumbs-link-padding-block: var(--amplify-space-xxs); --amplify-components-breadcrumbs-link-current-color: inherit; --amplify-components-breadcrumbs-link-current-font-size: inherit; --amplify-components-breadcrumbs-link-current-font-weight: normal; --amplify-components-breadcrumbs-link-current-text-decoration: none; --amplify-components-button-font-weight: var(--amplify-font-weights-bold); --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration); --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-button-line-height: var(--amplify-components-fieldcontrol-line-height); --amplify-components-button-padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start); --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end); --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start); --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end); --amplify-components-button-background-color: transparent; --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width); --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style); --amplify-components-button-border-radius: var(--amplify-components-fieldcontrol-border-radius); --amplify-components-button-color: var(--amplify-colors-font-primary); --amplify-components-button-hover-color: var(--amplify-colors-font-focus); --amplify-components-button-hover-background-color: var(--amplify-colors-primary-10); --amplify-components-button-hover-border-color: var(--amplify-colors-primary-60); --amplify-components-button-focus-color: var(--amplify-colors-font-focus); --amplify-components-button-focus-background-color: var(--amplify-colors-primary-10); --amplify-components-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-button-active-color: var(--amplify-colors-font-active); --amplify-components-button-active-background-color: var(--amplify-colors-primary-20); --amplify-components-button-active-border-color: var(--amplify-colors-primary-100); --amplify-components-button-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-loading-background-color: transparent; --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-disabled-background-color: transparent; --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-outlined-info-border-color: var(--amplify-colors-blue-60); --amplify-components-button-outlined-info-background-color: transparent; --amplify-components-button-outlined-info-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-hover-border-color: var(--amplify-colors-blue-60); --amplify-components-button-outlined-info-hover-background-color: var(--amplify-colors-blue-10); --amplify-components-button-outlined-info-hover-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10); --amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20); --amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-warning-border-color: var(--amplify-colors-orange-60); --amplify-components-button-outlined-warning-background-color: transparent; --amplify-components-button-outlined-warning-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-hover-border-color: var(--amplify-colors-orange-60); --amplify-components-button-outlined-warning-hover-background-color: var(--amplify-colors-orange-10); --amplify-components-button-outlined-warning-hover-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10); --amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow); --amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20); --amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-success-border-color: var(--amplify-colors-green-60); --amplify-components-button-outlined-success-background-color: transparent; --amplify-components-button-outlined-success-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-hover-border-color: var(--amplify-colors-green-60); --amplify-components-button-outlined-success-hover-background-color: var(--amplify-colors-green-10); --amplify-components-button-outlined-success-hover-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10); --amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20); --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80); --amplify-components-button-outlined-error-background-color: transparent; --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80); --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-overlay-border-color: var(--amplify-colors-overlay-60); --amplify-components-button-outlined-overlay-background-color: transparent; --amplify-components-button-outlined-overlay-color: var(--amplify-colors-font-primary); --amplify-components-button-outlined-overlay-hover-border-color: var(--amplify-colors-overlay-60); --amplify-components-button-outlined-overlay-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-outlined-overlay-hover-color: var(--amplify-colors-neutral-90); --amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90); --amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90); --amplify-components-button-outlined-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90); --amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10); --amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100); --amplify-components-button-primary-border-color: transparent; --amplify-components-button-primary-border-width: var(--amplify-border-widths-small); --amplify-components-button-primary-border-style: solid; --amplify-components-button-primary-background-color: var(--amplify-colors-primary-80); --amplify-components-button-primary-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-disabled-border-color: transparent; --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-primary-loading-border-color: transparent; --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-primary-hover-border-color: transparent; --amplify-components-button-primary-hover-background-color: var(--amplify-colors-primary-90); --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-focus-border-color: transparent; --amplify-components-button-primary-focus-background-color: var(--amplify-colors-primary-90); --amplify-components-button-primary-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-button-primary-active-border-color: transparent; --amplify-components-button-primary-active-background-color: var(--amplify-colors-primary-100); --amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-border-color: transparent; --amplify-components-button-primary-info-background-color: var(--amplify-colors-blue-80); --amplify-components-button-primary-info-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-hover-border-color: transparent; --amplify-components-button-primary-info-hover-background-color: var(--amplify-colors-blue-90); --amplify-components-button-primary-info-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-focus-border-color: transparent; --amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90); --amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-primary-info-active-border-color: transparent; --amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100); --amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-border-color: transparent; --amplify-components-button-primary-warning-background-color: var(--amplify-colors-orange-80); --amplify-components-button-primary-warning-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-hover-border-color: transparent; --amplify-components-button-primary-warning-hover-background-color: var(--amplify-colors-orange-90); --amplify-components-button-primary-warning-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-focus-border-color: transparent; --amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90); --amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-primary-warning-active-border-color: transparent; --amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100); --amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-border-color: transparent; --amplify-components-button-primary-error-background-color: var(--amplify-colors-red-80); --amplify-components-button-primary-error-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-hover-border-color: transparent; --amplify-components-button-primary-error-hover-background-color: var(--amplify-colors-red-90); --amplify-components-button-primary-error-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-focus-border-color: transparent; --amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90); --amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-primary-error-active-border-color: transparent; --amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100); --amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-border-color: transparent; --amplify-components-button-primary-success-background-color: var(--amplify-colors-green-80); --amplify-components-button-primary-success-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-hover-border-color: transparent; --amplify-components-button-primary-success-hover-background-color: var(--amplify-colors-green-90); --amplify-components-button-primary-success-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-focus-border-color: transparent; --amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90); --amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-primary-success-active-border-color: transparent; --amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100); --amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-border-color: transparent; --amplify-components-button-primary-overlay-background-color: var(--amplify-colors-overlay-70); --amplify-components-button-primary-overlay-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-hover-border-color: transparent; --amplify-components-button-primary-overlay-hover-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-focus-border-color: transparent; --amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-primary-overlay-active-border-color: transparent; --amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-border-width: var(--amplify-space-zero); --amplify-components-button-menu-background-color: transparent; --amplify-components-button-menu-justify-content: start; --amplify-components-button-menu-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-hover-background-color: var(--amplify-colors-primary-80); --amplify-components-button-menu-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-focus-background-color: var(--amplify-colors-primary-80); --amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-active-background-color: var(--amplify-colors-primary-90); --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-background-color: transparent; --amplify-components-button-link-border-color: transparent; --amplify-components-button-link-border-width: var(--amplify-border-widths-small); --amplify-components-button-link-color: var(--amplify-colors-font-interactive); --amplify-components-button-link-hover-border-color: transparent; --amplify-components-button-link-hover-background-color: var(--amplify-colors-primary-10); --amplify-components-button-link-hover-color: var(--amplify-colors-font-hover); --amplify-components-button-link-focus-border-color: transparent; --amplify-components-button-link-focus-background-color: var(--amplify-colors-primary-10); --amplify-components-button-link-focus-color: var(--amplify-colors-font-focus); --amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-button-link-active-border-color: transparent; --amplify-components-button-link-active-background-color: var(--amplify-colors-primary-20); --amplify-components-button-link-active-color: var(--amplify-colors-font-active); --amplify-components-button-link-disabled-border-color: transparent; --amplify-components-button-link-disabled-background-color: transparent; --amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-loading-border-color: transparent; --amplify-components-button-link-loading-background-color: transparent; --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-info-border-color: transparent; --amplify-components-button-link-info-background-color: transparent; --amplify-components-button-link-info-color: var(--amplify-colors-blue-100); --amplify-components-button-link-info-hover-border-color: transparent; --amplify-components-button-link-info-hover-background-color: var(--amplify-colors-blue-10); --amplify-components-button-link-info-hover-color: var(--amplify-colors-blue-90); --amplify-components-button-link-info-focus-border-color: transparent; --amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10); --amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100); --amplify-components-button-link-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-link-info-active-border-color: transparent; --amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20); --amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100); --amplify-components-button-link-warning-border-color: transparent; --amplify-components-button-link-warning-background-color: transparent; --amplify-components-button-link-warning-color: var(--amplify-colors-orange-100); --amplify-components-button-link-warning-hover-border-color: transparent; --amplify-components-button-link-warning-hover-background-color: var(--amplify-colors-orange-10); --amplify-components-button-link-warning-hover-color: var(--amplify-colors-orange-90); --amplify-components-button-link-warning-focus-border-color: transparent; --amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10); --amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100); --amplify-components-button-link-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow); --amplify-components-button-link-warning-active-border-color: transparent; --amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20); --amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100); --amplify-components-button-link-success-border-color: transparent; --amplify-components-button-link-success-background-color: transparent; --amplify-components-button-link-success-color: var(--amplify-colors-green-100); --amplify-components-button-link-success-hover-border-color: transparent; --amplify-components-button-link-success-hover-background-color: var(--amplify-colors-green-10); --amplify-components-button-link-success-hover-color: var(--amplify-colors-green-90); --amplify-components-button-link-success-focus-border-color: transparent; --amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10); --amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100); --amplify-components-button-link-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-link-success-active-border-color: transparent; --amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20); --amplify-components-button-link-success-active-color: var(--amplify-colors-green-100); --amplify-components-button-link-error-border-color: transparent; --amplify-components-button-link-error-background-color: transparent; --amplify-components-button-link-error-color: var(--amplify-colors-red-100); --amplify-components-button-link-error-hover-border-color: transparent; --amplify-components-button-link-error-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-link-error-hover-color: var(--amplify-colors-red-90); --amplify-components-button-link-error-focus-border-color: transparent; --amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100); --amplify-components-button-link-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-link-error-active-border-color: transparent; --amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-link-error-active-color: var(--amplify-colors-red-100); --amplify-components-button-link-overlay-border-color: transparent; --amplify-components-button-link-overlay-background-color: transparent; --amplify-components-button-link-overlay-color: var(--amplify-colors-neutral-100); --amplify-components-button-link-overlay-hover-border-color: transparent; --amplify-components-button-link-overlay-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-link-overlay-hover-color: var(--amplify-colors-overlay-80); --amplify-components-button-link-overlay-focus-border-color: transparent; --amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90); --amplify-components-button-link-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-link-overlay-active-border-color: transparent; --amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10); --amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90); --amplify-components-button-warning-background-color: transparent; --amplify-components-button-warning-border-color: var(--amplify-colors-red-60); --amplify-components-button-warning-border-width: var(--amplify-border-widths-small); --amplify-components-button-warning-color: var(--amplify-colors-red-60); --amplify-components-button-warning-hover-border-color: var(--amplify-colors-red-80); --amplify-components-button-warning-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-warning-hover-color: var(--amplify-colors-font-error); --amplify-components-button-warning-focus-border-color: var(--amplify-colors-red-80); --amplify-components-button-warning-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-warning-focus-color: var(--amplify-colors-red-80); --amplify-components-button-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-warning-active-border-color: var(--amplify-colors-red-100); --amplify-components-button-warning-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-warning-active-color: var(--amplify-colors-red-100); --amplify-components-button-warning-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-warning-disabled-background-color: transparent; --amplify-components-button-warning-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-warning-loading-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-warning-loading-background-color: transparent; --amplify-components-button-warning-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-border-color: transparent; --amplify-components-button-destructive-border-width: var(--amplify-border-widths-small); --amplify-components-button-destructive-border-style: solid; --amplify-components-button-destructive-background-color: var(--amplify-colors-red-60); --amplify-components-button-destructive-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-disabled-border-color: transparent; --amplify-components-button-destructive-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-destructive-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-loading-border-color: transparent; --amplify-components-button-destructive-loading-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-destructive-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-hover-border-color: transparent; --amplify-components-button-destructive-hover-background-color: var(--amplify-colors-red-80); --amplify-components-button-destructive-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-focus-border-color: transparent; --amplify-components-button-destructive-focus-background-color: var(--amplify-colors-red-80); --amplify-components-button-destructive-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-destructive-active-border-color: transparent; --amplify-components-button-destructive-active-background-color: var(--amplify-colors-red-100); --amplify-components-button-destructive-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size); --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start); --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end); --amplify-components-button-small-padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start); --amplify-components-button-small-padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end); --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size); --amplify-components-button-large-padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start); --amplify-components-button-large-padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end); --amplify-components-button-large-padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start); --amplify-components-button-large-padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end); --amplify-components-button-loader-wrapper-align-items: center; --amplify-components-button-loader-wrapper-gap: var(--amplify-space-xs); --amplify-components-card-background-color: var(--amplify-colors-background-primary); --amplify-components-card-border-radius: var(--amplify-radii-xs); --amplify-components-card-border-width: 0; --amplify-components-card-border-style: solid; --amplify-components-card-border-color: transparent; --amplify-components-card-box-shadow: none; --amplify-components-card-padding: var(--amplify-space-medium); --amplify-components-card-outlined-background-color: var(--amplify-components-card-background-color); --amplify-components-card-outlined-border-radius: var(--amplify-radii-xs); --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small); --amplify-components-card-outlined-border-style: solid; --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary); --amplify-components-card-outlined-box-shadow: var(--amplify-components-card-box-shadow); --amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color); --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs); --amplify-components-card-elevated-border-width: 0; --amplify-components-card-elevated-border-style: solid; --amplify-components-card-elevated-border-color: transparent; --amplify-components-card-elevated-box-shadow: var(--amplify-shadows-medium); --amplify-components-checkbox-cursor: pointer; --amplify-components-checkbox-align-items: center; --amplify-components-checkbox-disabled-cursor: not-allowed; --amplify-components-checkbox-button-position: relative; --amplify-components-checkbox-button-align-items: center; --amplify-components-checkbox-button-justify-content: center; --amplify-components-checkbox-button-color: var(--amplify-colors-font-inverse); --amplify-components-checkbox-button-before-width: 100%; --amplify-components-checkbox-button-before-height: 100%; --amplify-components-checkbox-button-before-border-width: var(--amplify-border-widths-medium); --amplify-components-checkbox-button-before-border-radius: 20%; --amplify-components-checkbox-button-before-border-style: solid; --amplify-components-checkbox-button-before-border-color: var(--amplify-colors-border-primary); --amplify-components-checkbox-button-focus-outline-color: var(--amplify-colors-transparent); --amplify-components-checkbox-button-focus-outline-style: solid; --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium); --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-checkbox-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error); --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-border-error); --amplify-components-checkbox-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-checkbox-icon-background-color: var(--amplify-colors-primary-80); --amplify-components-checkbox-icon-border-radius: 20%; --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0); --amplify-components-checkbox-icon-transform: scale(0); --amplify-components-checkbox-icon-transition-property: all; --amplify-components-checkbox-icon-transition-duration: var(--amplify-time-short); --amplify-components-checkbox-icon-transition-timing-function: ease-in-out; --amplify-components-checkbox-icon-checked-opacity: var(--amplify-opacities-100); --amplify-components-checkbox-icon-checked-transform: scale(1); --amplify-components-checkbox-icon-checked-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-checkbox-icon-indeterminate-opacity: var(--amplify-opacities-100); --amplify-components-checkbox-icon-indeterminate-transform: scale(1); --amplify-components-checkbox-icon-indeterminate-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-checkbox-label-color: var(--amplify-components-text-color); --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-checkboxfield-align-items: flex-start; --amplify-components-checkboxfield-align-content: center; --amplify-components-checkboxfield-flex-direction: column; --amplify-components-checkboxfield-justify-content: center; --amplify-components-collection-pagination-current-color: var(--amplify-components-pagination-current-color); --amplify-components-collection-pagination-current-background-color: var(--amplify-components-pagination-current-background-color); --amplify-components-collection-pagination-button-color: var(--amplify-components-pagination-button-color); --amplify-components-collection-pagination-button-hover-background-color: var(--amplify-components-pagination-button-hover-background-color); --amplify-components-collection-pagination-button-hover-color: var(--amplify-components-pagination-button-hover-color); --amplify-components-collection-pagination-button-disabled-color: var(--amplify-components-pagination-button-disabled-color); --amplify-components-collection-search-input-color: var(--amplify-components-searchfield-color); --amplify-components-collection-search-button-color: var(--amplify-components-searchfield-button-color); --amplify-components-collection-search-button-active-background-color: var(--amplify-components-searchfield-button-active-background-color); --amplify-components-collection-search-button-active-border-color: var(--amplify-components-searchfield-button-active-border-color); --amplify-components-collection-search-button-active-color: var(--amplify-components-searchfield-button-active-color); --amplify-components-collection-search-button-disabled-background-color: var(--amplify-components-searchfield-button-disabled-background-color); --amplify-components-collection-search-button-disabled-border-color: var(--amplify-components-searchfield-button-disabled-border-color); --amplify-components-collection-search-button-disabled-color: var(--amplify-components-searchfield-button-disabled-color); --amplify-components-collection-search-button-focus-background-color: var(--amplify-components-searchfield-button-focus-background-color); --amplify-components-collection-search-button-focus-border-color: var(--amplify-components-searchfield-button-focus-border-color); --amplify-components-collection-search-button-focus-color: var(--amplify-components-searchfield-button-focus-color); --amplify-components-collection-search-button-hover-background-color: var(--amplify-components-searchfield-button-hover-background-color); --amplify-components-collection-search-button-hover-border-color: var(--amplify-components-searchfield-button-hover-border-color); --amplify-components-collection-search-button-hover-color: var(--amplify-components-searchfield-button-hover-color); --amplify-components-copy-font-size: var(--amplify-font-sizes-xs); --amplify-components-copy-gap: var(--amplify-space-relative-medium); --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary); --amplify-components-copy-tool-tip-bottom: var(--amplify-space-large); --amplify-components-copy-tool-tip-color: var(--amplify-colors-teal-100); --amplify-components-copy-tool-tip-font-size: var(--amplify-font-sizes-xxs); --amplify-components-countrycodeselect-height: var(--amplify-space-relative-full); --amplify-components-divider-border-style: solid; --amplify-components-divider-border-color: var(--amplify-colors-border-primary); --amplify-components-divider-border-width: var(--amplify-border-widths-medium); --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary); --amplify-components-divider-label-padding-inline: var(--amplify-space-medium); --amplify-components-divider-label-font-size: var(--amplify-font-sizes-small); --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary); --amplify-components-divider-small-border-width: var(--amplify-border-widths-small); --amplify-components-divider-large-border-width: var(--amplify-border-widths-large); --amplify-components-divider-opacity: var(--amplify-opacities-60); --amplify-components-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-dropzone-border-style: dashed; --amplify-components-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-dropzone-color: var(--amplify-colors-font-primary); --amplify-components-dropzone-gap: var(--amplify-space-small); --amplify-components-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-dropzone-text-align: center; --amplify-components-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-dropzone-active-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-dropzone-active-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-active-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-active-color: var(--amplify-colors-font-primary); --amplify-components-dropzone-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-dropzone-disabled-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-dropzone-disabled-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-disabled-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-dropzone-accepted-background-color: var(--amplify-colors-background-success); --amplify-components-dropzone-accepted-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-accepted-border-color: var(--amplify-colors-border-success); --amplify-components-dropzone-accepted-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-accepted-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-accepted-color: var(--amplify-colors-font-success); --amplify-components-dropzone-rejected-background-color: var(--amplify-colors-background-error); --amplify-components-dropzone-rejected-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-rejected-border-color: var(--amplify-colors-border-pressed); --amplify-components-dropzone-rejected-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-rejected-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-rejected-color: var(--amplify-colors-font-error); --amplify-components-field-gap: var(--amplify-space-xs); --amplify-components-field-font-size: var(--amplify-font-sizes-medium); --amplify-components-field-flex-direction: column; --amplify-components-field-small-gap: var(--amplify-space-xxxs); --amplify-components-field-small-font-size: var(--amplify-font-sizes-small); --amplify-components-field-large-gap: var(--amplify-space-small); --amplify-components-field-large-font-size: var(--amplify-font-sizes-large); --amplify-components-field-label-color: var(--amplify-colors-font-secondary); --amplify-components-fieldcontrol-border-style: solid; --amplify-components-fieldcontrol-border-color: var(--amplify-colors-border-primary); --amplify-components-fieldcontrol-border-width: var(--amplify-border-widths-small); --amplify-components-fieldcontrol-border-radius: var(--amplify-radii-small); --amplify-components-fieldcontrol-color: var(--amplify-colors-font-primary); --amplify-components-fieldcontrol-padding-block-start: var(--amplify-space-xs); --amplify-components-fieldcontrol-padding-block-end: var(--amplify-space-xs); --amplify-components-fieldcontrol-padding-inline-start: var(--amplify-space-medium); --amplify-components-fieldcontrol-padding-inline-end: var(--amplify-space-medium); --amplify-components-fieldcontrol-font-size: var(--amplify-components-field-font-size); --amplify-components-fieldcontrol-line-height: var(--amplify-line-heights-medium); --amplify-components-fieldcontrol-transition-duration: var(--amplify-time-medium); --amplify-components-fieldcontrol-outline-color: var(--amplify-colors-transparent); --amplify-components-fieldcontrol-outline-style: solid; --amplify-components-fieldcontrol-outline-width: var(--amplify-outline-widths-medium); --amplify-components-fieldcontrol-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size); --amplify-components-fieldcontrol-small-padding-block-start: var(--amplify-space-xxs); --amplify-components-fieldcontrol-small-padding-block-end: var(--amplify-space-xxs); --amplify-components-fieldcontrol-small-padding-inline-start: var(--amplify-space-small); --amplify-components-fieldcontrol-small-padding-inline-end: var(--amplify-space-small); --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size); --amplify-components-fieldcontrol-large-padding-block-start: var(--amplify-space-xs); --amplify-components-fieldcontrol-large-padding-block-end: var(--amplify-space-xs); --amplify-components-fieldcontrol-large-padding-inline-start: var(--amplify-space-medium); --amplify-components-fieldcontrol-large-padding-inline-end: var(--amplify-space-medium); --amplify-components-fieldcontrol-quiet-border-style: none; --amplify-components-fieldcontrol-quiet-border-inline-start: none; --amplify-components-fieldcontrol-quiet-border-inline-end: none; --amplify-components-fieldcontrol-quiet-border-block-start: none; --amplify-components-fieldcontrol-quiet-border-radius: 0; --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: transparent; --amplify-components-fieldcontrol-quiet-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error); --amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color: transparent; --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-fieldcontrol-disabled-cursor: not-allowed; --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent); --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error); --amplify-components-fieldcontrol-error-color: var(--amplify-colors-font-error); --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error); --amplify-components-fieldcontrol-info-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-blue-100); --amplify-components-fieldcontrol-warning-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-orange-100); --amplify-components-fieldcontrol-success-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-green-100); --amplify-components-fieldcontrol-overlay-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-overlay-90); --amplify-components-fieldgroup-gap: var(--amplify-space-zero); --amplify-components-fieldgroup-vertical-align-items: center; --amplify-components-fieldgroup-outer-align-items: center; --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error); --amplify-components-fieldmessages-error-font-size: var(--amplify-font-sizes-small); --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary); --amplify-components-fieldmessages-description-font-style: italic; --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small); --amplify-components-fieldset-background-color: transparent; --amplify-components-fieldset-border-radius: var(--amplify-radii-xs); --amplify-components-fieldset-flex-direction: column; --amplify-components-fieldset-gap: var(--amplify-components-field-gap); --amplify-components-fieldset-legend-color: var(--amplify-colors-font-primary); --amplify-components-fieldset-legend-font-size: var(--amplify-components-field-font-size); --amplify-components-fieldset-legend-font-weight: var(--amplify-font-weights-bold); --amplify-components-fieldset-legend-line-height: var(--amplify-line-heights-medium); --amplify-components-fieldset-legend-small-font-size: var(--amplify-components-field-small-font-size); --amplify-components-fieldset-legend-large-font-size: var(--amplify-components-field-large-font-size); --amplify-components-fieldset-outlined-padding: var(--amplify-space-medium); --amplify-components-fieldset-outlined-border-color: var(--amplify-colors-neutral-40); --amplify-components-fieldset-outlined-border-width: var(--amplify-border-widths-small); --amplify-components-fieldset-outlined-border-style: solid; --amplify-components-fieldset-outlined-small-padding: var(--amplify-space-small); --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large); --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap); --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap); --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-dropzone-border-style: dashed; --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small); --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-fileuploader-dropzone-text-align: center; --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius); --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style); --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium); --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl); --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-file-border-style: solid; --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs); --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small); --amplify-components-fileuploader-file-gap: var(--amplify-space-small); --amplify-components-fileuploader-file-align-items: baseline; --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary); --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small); --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl); --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl); --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary); --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-filelist-flex-direction: column; --amplify-components-fileuploader-filelist-gap: var(--amplify-space-small); --amplify-components-fileuploader-loader-stroke-linecap: round; --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary); --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled); --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large); --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-previewer-border-style: solid; --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero); --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero); --amplify-components-fileuploader-previewer-max-height: 40rem; --amplify-components-fileuploader-previewer-max-width: auto; --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary); --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium); --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium); --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small); --amplify-components-fileuploader-previewer-footer-justify-content: flex-end; --amplify-components-flex-gap: var(--amplify-space-medium); --amplify-components-flex-justify-content: normal; --amplify-components-flex-align-items: stretch; --amplify-components-flex-align-content: normal; --amplify-components-flex-flex-wrap: nowrap; --amplify-components-heading-1-font-size: var(--amplify-font-sizes-xxxxl); --amplify-components-heading-1-font-weight: var(--amplify-font-weights-light); --amplify-components-heading-2-font-size: var(--amplify-font-sizes-xxxl); --amplify-components-heading-2-font-weight: var(--amplify-font-weights-normal); --amplify-components-heading-3-font-size: var(--amplify-font-sizes-xxl); --amplify-components-heading-3-font-weight: var(--amplify-font-weights-medium); --amplify-components-heading-4-font-size: var(--amplify-font-sizes-xl); --amplify-components-heading-4-font-weight: var(--amplify-font-weights-semibold); --amplify-components-heading-5-font-size: var(--amplify-font-sizes-large); --amplify-components-heading-5-font-weight: var(--amplify-font-weights-bold); --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium); --amplify-components-heading-6-font-weight: var(--amplify-font-weights-extrabold); --amplify-components-heading-color: var(--amplify-colors-font-primary); --amplify-components-heading-line-height: var(--amplify-line-heights-small); --amplify-components-icon-line-height: 1; --amplify-components-icon-height: 1em; --amplify-components-highlightmatch-highlighted-font-weight: var(--amplify-font-weights-bold); --amplify-components-image-max-width: 100%; --amplify-components-image-height: auto; --amplify-components-image-object-fit: initial; --amplify-components-image-object-position: initial; --amplify-components-inappmessaging-banner-height: 150px ; --amplify-components-inappmessaging-banner-width: 400px ; --amplify-components-inappmessaging-button-background-color: #e8e8e8; --amplify-components-inappmessaging-button-border-radius: 5px; --amplify-components-inappmessaging-button-color: black; --amplify-components-inappmessaging-dialog-height: 50vh; --amplify-components-inappmessaging-dialog-min-height: 400px; --amplify-components-inappmessaging-dialog-min-width: 400px; --amplify-components-inappmessaging-dialog-width: 30vw; --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium); --amplify-components-inappmessaging-header-font-weight: var(--amplify-font-weights-extrabold); --amplify-components-input-color: var(--amplify-components-fieldcontrol-color); --amplify-components-input-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-input-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-input-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-link-active-color: var(--amplify-colors-font-active); --amplify-components-link-color: var(--amplify-colors-font-interactive); --amplify-components-link-focus-color: var(--amplify-colors-font-focus); --amplify-components-link-hover-color: var(--amplify-colors-font-hover); --amplify-components-link-visited-color: var(--amplify-colors-font-interactive); --amplify-components-liveness-camera-module-background-color: var(--amplify-colors-background-primary); --amplify-components-loader-width: var(--amplify-font-sizes-medium); --amplify-components-loader-height: var(--amplify-font-sizes-medium); --amplify-components-loader-font-size: var(--amplify-font-sizes-xs); --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20); --amplify-components-loader-stroke-filled: var(--amplify-colors-primary-80); --amplify-components-loader-stroke-linecap: round; --amplify-components-loader-animation-duration: 1s; --amplify-components-loader-small-width: var(--amplify-font-sizes-small); --amplify-components-loader-small-height: var(--amplify-font-sizes-small); --amplify-components-loader-small-font-size: var(--amplify-font-sizes-xxs); --amplify-components-loader-large-width: var(--amplify-font-sizes-large); --amplify-components-loader-large-height: var(--amplify-font-sizes-large); --amplify-components-loader-large-font-size: var(--amplify-font-sizes-small); --amplify-components-loader-linear-width: 100%; --amplify-components-loader-linear-min-width: 5rem; --amplify-components-loader-linear-font-size: var(--amplify-font-sizes-xxs); --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs); --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-primary-80); --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20); --amplify-components-loader-linear-stroke-linecap: round; --amplify-components-loader-linear-animation-duration: 1s; --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-xxxs); --amplify-components-loader-linear-small-font-size: var(--amplify-font-sizes-xxxs); --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-xs); --amplify-components-loader-linear-large-font-size: var(--amplify-font-sizes-xs); --amplify-components-loader-text-fill: var(--amplify-colors-font-primary); --amplify-components-menu-background-color: var(--amplify-colors-background-primary); --amplify-components-menu-border-radius: var(--amplify-radii-medium); --amplify-components-menu-border-width: var(--amplify-border-widths-small); --amplify-components-menu-border-style: solid; --amplify-components-menu-border-color: var(--amplify-colors-border-primary); --amplify-components-menu-box-shadow: var(--amplify-shadows-large); --amplify-components-menu-flex-direction: column; --amplify-components-menu-gap: var(--amplify-space-zero); --amplify-components-menu-max-width: 30rem; --amplify-components-menu-min-width: 14rem; --amplify-components-menu-small-width: var(--amplify-font-sizes-medium); --amplify-components-menu-small-height: var(--amplify-font-sizes-medium); --amplify-components-menu-large-width: var(--amplify-font-sizes-xxxl); --amplify-components-menu-large-height: var(--amplify-font-sizes-xxxl); --amplify-components-menu-item-min-height: 2.5rem; --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium); --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium); --amplify-components-message-align-items: center; --amplify-components-message-background-color: var(--amplify-colors-background-tertiary); --amplify-components-message-border-color: transparent; --amplify-components-message-border-style: solid; --amplify-components-message-border-width: var(--amplify-border-widths-small); --amplify-components-message-border-radius: var(--amplify-radii-xs); --amplify-components-message-color: var(--amplify-colors-font-primary); --amplify-components-message-justify-content: flex-start; --amplify-components-message-padding-block: var(--amplify-space-small); --amplify-components-message-padding-inline: var(--amplify-space-medium); --amplify-components-message-line-height: var(--amplify-line-heights-small); --amplify-components-message-icon-size: var(--amplify-font-sizes-xl); --amplify-components-message-heading-font-size: var(--amplify-font-sizes-medium); --amplify-components-message-heading-font-weight: var(--amplify-font-weights-bold); --amplify-components-message-dismiss-gap: var(--amplify-space-xxs); --amplify-components-message-plain-color: var(--amplify-colors-font-primary); --amplify-components-message-plain-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-border-color: transparent; --amplify-components-message-plain-info-color: var(--amplify-colors-font-info); --amplify-components-message-plain-info-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-info-border-color: transparent; --amplify-components-message-plain-error-color: var(--amplify-colors-font-error); --amplify-components-message-plain-error-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-error-border-color: transparent; --amplify-components-message-plain-success-color: var(--amplify-colors-font-success); --amplify-components-message-plain-success-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-success-border-color: transparent; --amplify-components-message-plain-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-plain-warning-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-warning-border-color: transparent; --amplify-components-message-outlined-color: var(--amplify-colors-font-primary); --amplify-components-message-outlined-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-border-color: var(--amplify-colors-border-primary); --amplify-components-message-outlined-info-color: var(--amplify-colors-font-info); --amplify-components-message-outlined-info-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-info-border-color: var(--amplify-colors-border-info); --amplify-components-message-outlined-error-color: var(--amplify-colors-font-error); --amplify-components-message-outlined-error-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-error-border-color: var(--amplify-colors-border-error); --amplify-components-message-outlined-success-color: var(--amplify-colors-font-success); --amplify-components-message-outlined-success-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-success-border-color: var(--amplify-colors-border-success); --amplify-components-message-outlined-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-outlined-warning-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-warning-border-color: var(--amplify-colors-border-warning); --amplify-components-message-filled-color: var(--amplify-colors-font-primary); --amplify-components-message-filled-background-color: var(--amplify-colors-background-secondary); --amplify-components-message-filled-border-color: transparent; --amplify-components-message-filled-info-color: var(--amplify-colors-font-info); --amplify-components-message-filled-info-background-color: var(--amplify-colors-background-info); --amplify-components-message-filled-info-border-color: transparent; --amplify-components-message-filled-error-color: var(--amplify-colors-font-error); --amplify-components-message-filled-error-background-color: var(--amplify-colors-background-error); --amplify-components-message-filled-error-border-color: transparent; --amplify-components-message-filled-success-color: var(--amplify-colors-font-success); --amplify-components-message-filled-success-background-color: var(--amplify-colors-background-success); --amplify-components-message-filled-success-border-color: transparent; --amplify-components-message-filled-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-filled-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-message-filled-warning-border-color: transparent; --amplify-components-pagination-current-align-items: center; --amplify-components-pagination-current-justify-content: center; --amplify-components-pagination-current-color: var(--amplify-colors-font-inverse); --amplify-components-pagination-current-font-size: var(--amplify-font-sizes-small); --amplify-components-pagination-current-background-color: var(--amplify-colors-overlay-40); --amplify-components-pagination-button-color: var(--amplify-colors-font-primary); --amplify-components-pagination-button-padding-inline-start: var(--amplify-space-xxs); --amplify-components-pagination-button-padding-inline-end: var(--amplify-space-xxs); --amplify-components-pagination-button-transition-property: background-color; --amplify-components-pagination-button-transition-duration: var(--amplify-time-medium); --amplify-components-pagination-button-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-pagination-button-hover-color: var(--amplify-colors-font-primary); --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-pagination-ellipsis-align-items: baseline; --amplify-components-pagination-ellipsis-justify-content: center; --amplify-components-pagination-ellipsis-padding-inline-start: var(--amplify-space-xs); --amplify-components-pagination-ellipsis-padding-inline-end: var(--amplify-space-xs); --amplify-components-pagination-item-container-margin-left: var(--amplify-space-xxxs); --amplify-components-pagination-item-container-margin-right: var(--amplify-space-xxxs); --amplify-components-pagination-item-shared-height: var(--amplify-font-sizes-xxl); --amplify-components-pagination-item-shared-min-width: var(--amplify-font-sizes-xxl); --amplify-components-pagination-item-shared-border-radius: var(--amplify-font-sizes-medium); --amplify-components-passwordfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-passwordfield-button-color: var(--amplify-components-button-color); --amplify-components-passwordfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-passwordfield-button-active-border-color: var(--amplify-components-button-active-border-color); --amplify-components-passwordfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color); --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color); --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color); --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color); --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color); --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color); --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color); --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color); --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color); --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color); --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color); --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow); --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color); --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color); --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color); --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color); --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-passwordfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-passwordfield-button-hover-border-color: var(--amplify-components-button-hover-border-color); --amplify-components-passwordfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-phonenumberfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-phonenumberfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-phonenumberfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-phonenumberfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-placeholder-border-radius: var(--amplify-radii-small); --amplify-components-placeholder-transition-duration: var(--amplify-time-long); --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary); --amplify-components-placeholder-end-color: var(--amplify-colors-background-tertiary); --amplify-components-placeholder-small-height: var(--amplify-space-small); --amplify-components-placeholder-default-height: var(--amplify-space-medium); --amplify-components-placeholder-large-height: var(--amplify-space-large); --amplify-components-radio-align-items: center; --amplify-components-radio-justify-content: flex-start; --amplify-components-radio-gap: inherit; --amplify-components-radio-disabled-cursor: not-allowed; --amplify-components-radio-button-align-items: center; --amplify-components-radio-button-justify-content: center; --amplify-components-radio-button-width: var(--amplify-font-sizes-medium); --amplify-components-radio-button-height: var(--amplify-font-sizes-medium); --amplify-components-radio-button-box-sizing: border-box; --amplify-components-radio-button-border-width: var(--amplify-border-widths-medium); --amplify-components-radio-button-border-style: solid; --amplify-components-radio-button-border-radius: 50%; --amplify-components-radio-button-border-color: var(--amplify-colors-border-primary); --amplify-components-radio-button-color: var(--amplify-colors-background-primary); --amplify-components-radio-button-background-color: var(--amplify-colors-background-primary); --amplify-components-radio-button-transition-property: all; --amplify-components-radio-button-transition-duration: var(--amplify-time-medium); --amplify-components-radio-button-outline-color: var(--amplify-colors-transparent); --amplify-components-radio-button-outline-style: solid; --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium); --amplify-components-radio-button-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-radio-button-padding: var(--amplify-border-widths-medium); --amplify-components-radio-button-small-width: var(--amplify-font-sizes-small); --amplify-components-radio-button-small-height: var(--amplify-font-sizes-small); --amplify-components-radio-button-large-width: var(--amplify-font-sizes-large); --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large); --amplify-components-radio-button-checked-color: var(--amplify-colors-primary-80); --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled); --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error); --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary); --amplify-components-radio-label-color: var(--amplify-components-text-color); --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-radiogroup-radio-border-width: var(--amplify-components-radio-button-border-width); --amplify-components-radiogroup-radio-border-color: var(--amplify-components-radio-button-border-color); --amplify-components-radiogroup-radio-background-color: var(--amplify-components-radio-button-background-color); --amplify-components-radiogroup-radio-checked-color: var(--amplify-components-radio-button-checked-color); --amplify-components-radiogroup-radio-label-color: var(--amplify-components-radio-label-color); --amplify-components-radiogroup-legend-color: var(--amplify-components-fieldset-legend-color); --amplify-components-radiogroup-legend-font-weight: var(--amplify-font-weights-normal); --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl); --amplify-components-rating-default-size: var(--amplify-font-sizes-xl); --amplify-components-rating-small-size: var(--amplify-font-sizes-small); --amplify-components-rating-filled-color: var(--amplify-colors-secondary-80); --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary); --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-searchfield-button-color: var(--amplify-components-button-color); --amplify-components-searchfield-button-background-color: var(--amplify-colors-background-primary); --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-searchfield-button-active-border-color: var(--amplify-components-button-active-border-color); --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-searchfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color); --amplify-components-searchfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color); --amplify-components-searchfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-searchfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-searchfield-button-focus-border-color: var(--amplify-components-button-focus-border-color); --amplify-components-searchfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color); --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-select-color: var(--amplify-components-fieldcontrol-color); --amplify-components-select-background-color: var(--amplify-colors-background-primary); --amplify-components-select-padding-inline-end: var(--amplify-space-xxl); --amplify-components-select-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-select-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-select-wrapper-flex: 1; --amplify-components-select-wrapper-display: block; --amplify-components-select-wrapper-position: relative; --amplify-components-select-wrapper-cursor: pointer; --amplify-components-select-icon-wrapper-align-items: center; --amplify-components-select-icon-wrapper-position: absolute; --amplify-components-select-icon-wrapper-top: 50%; --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium); --amplify-components-select-icon-wrapper-transform: translateY(-50%); --amplify-components-select-icon-wrapper-pointer-events: none; --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs); --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium); --amplify-components-select-option-background-color: transparent; --amplify-components-select-option-color: var(--amplify-colors-font-primary); --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-select-option-disabled-background-color: transparent; --amplify-components-select-white-space: nowrap; --amplify-components-select-min-width: 6.5rem; --amplify-components-select-small-min-width: 5.5rem; --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl); --amplify-components-select-large-min-width: 7.5rem; --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl); --amplify-components-select-expanded-padding-block: var(--amplify-space-xs); --amplify-components-select-expanded-padding-inline: var(--amplify-space-small); --amplify-components-select-expanded-option-padding-block: var(--amplify-space-xs); --amplify-components-select-expanded-option-padding-inline: var(--amplify-space-small); --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-selectfield-flex-direction: column; --amplify-components-selectfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-selectfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-selectfield-label-color: var(--amplify-components-field-label-color); --amplify-components-sliderfield-padding-block: var(--amplify-space-xs); --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-quaternary); --amplify-components-sliderfield-track-border-radius: 9999px; --amplify-components-sliderfield-track-height: 0.375rem; --amplify-components-sliderfield-track-min-width: 10rem; --amplify-components-sliderfield-range-background-color: var(--amplify-colors-primary-80); --amplify-components-sliderfield-range-border-radius: 9999px; --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-sliderfield-thumb-width: 1.25rem; --amplify-components-sliderfield-thumb-height: 1.25rem; --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary); --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-small); --amplify-components-sliderfield-thumb-border-radius: 50%; --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium); --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary); --amplify-components-sliderfield-thumb-border-style: solid; --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-sliderfield-thumb-disabled-border-color: transparent; --amplify-components-sliderfield-thumb-disabled-box-shadow: none; --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary); --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus); --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-sliderfield-thumb-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-sliderfield-small-track-height: 0.25rem; --amplify-components-sliderfield-small-thumb-width: 1rem; --amplify-components-sliderfield-small-thumb-height: 1rem; --amplify-components-sliderfield-large-track-height: 0.625rem; --amplify-components-sliderfield-large-thumb-width: 1.5rem; --amplify-components-sliderfield-large-thumb-height: 1.5rem; --amplify-components-stepperfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-stepperfield-flex-direction: column; --amplify-components-stepperfield-input-color: var(--amplify-components-fieldcontrol-color); --amplify-components-stepperfield-input-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-stepperfield-input-text-align: center; --amplify-components-stepperfield-button-color: var(--amplify-components-button-color); --amplify-components-stepperfield-button-background-color: var(--amplify-colors-transparent); --amplify-components-stepperfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-stepperfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-stepperfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-stepperfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-stepperfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-fieldcontrol-disabled-background-color); --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-storagemanager-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-dropzone-border-style: dashed; --amplify-components-storagemanager-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-dropzone-gap: var(--amplify-space-small); --amplify-components-storagemanager-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-storagemanager-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-storagemanager-dropzone-text-align: center; --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-storagemanager-dropzone-border-radius); --amplify-components-storagemanager-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-storagemanager-dropzone-border-style); --amplify-components-storagemanager-dropzone-active-border-width: var(--amplify-border-widths-medium); --amplify-components-storagemanager-dropzone-icon-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-dropzone-icon-font-size: var(--amplify-font-sizes-xxl); --amplify-components-storagemanager-dropzone-text-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-dropzone-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-dropzone-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-file-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-file-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-file-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-file-border-style: solid; --amplify-components-storagemanager-file-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-file-padding-block: var(--amplify-space-xs); --amplify-components-storagemanager-file-padding-inline: var(--amplify-space-small); --amplify-components-storagemanager-file-gap: var(--amplify-space-small); --amplify-components-storagemanager-file-align-items: baseline; --amplify-components-storagemanager-file-name-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-file-name-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-file-name-color: var(--amplify-colors-font-primary); --amplify-components-storagemanager-file-size-font-size: var(--amplify-font-sizes-small); --amplify-components-storagemanager-file-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-storagemanager-file-size-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-file-image-width: var(--amplify-space-xxl); --amplify-components-storagemanager-file-image-height: var(--amplify-space-xxl); --amplify-components-storagemanager-file-image-background-color: var(--amplify-colors-background-secondary); --amplify-components-storagemanager-file-image-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-file-image-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-filelist-flex-direction: column; --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small); --amplify-components-storagemanager-loader-stroke-linecap: round; --amplify-components-storagemanager-loader-stroke-empty: var(--amplify-colors-border-secondary); --amplify-components-storagemanager-loader-stroke-filled: var(--amplify-components-loader-stroke-filled); --amplify-components-storagemanager-loader-stroke-width: var(--amplify-border-widths-large); --amplify-components-storagemanager-previewer-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-previewer-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-previewer-border-style: solid; --amplify-components-storagemanager-previewer-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-previewer-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-previewer-padding-block: var(--amplify-space-zero); --amplify-components-storagemanager-previewer-padding-inline: var(--amplify-space-zero); --amplify-components-storagemanager-previewer-max-height: 40rem; --amplify-components-storagemanager-previewer-max-width: auto; --amplify-components-storagemanager-previewer-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-previewer-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-previewer-text-color: var(--amplify-colors-font-primary); --amplify-components-storagemanager-previewer-body-padding-block: var(--amplify-space-medium); --amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium); --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small); --amplify-components-storagemanager-previewer-footer-justify-content: flex-end; --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60); --amplify-components-switchfield-focused-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium); --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large); --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small); --amplify-components-switchfield-label-padding: var(--amplify-space-xs); --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary); --amplify-components-switchfield-thumb-border-color: transparent; --amplify-components-switchfield-thumb-border-width: var(--amplify-border-widths-small); --amplify-components-switchfield-thumb-border-style: solid; --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl); --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium); --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium); --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium); --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-quaternary); --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl); --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-primary-80); --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium); --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium); --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short); --amplify-components-switchfield-track-width: var(--amplify-space-relative-xl); --amplify-components-switchfield-track-error-background-color: var(--amplify-colors-background-error); --amplify-components-table-border-collapse: collapse; --amplify-components-table-display: table; --amplify-components-table-width: 100%; --amplify-components-table-head-display: table-header-group; --amplify-components-table-head-vertical-align: middle; --amplify-components-table-body-display: table-row-group; --amplify-components-table-body-vertical-align: middle; --amplify-components-table-foot-display: table-footer-group; --amplify-components-table-foot-vertical-align: middle; --amplify-components-table-row-display: table-row; --amplify-components-table-row-vertical-align: middle; --amplify-components-table-row-hover-background-color: var(--amplify-colors-background-tertiary); --amplify-components-table-row-striped-background-color: var(--amplify-colors-background-secondary); --amplify-components-table-header-border-color: var(--amplify-colors-border-tertiary); --amplify-components-table-header-border-style: solid; --amplify-components-table-header-border-width: var(--amplify-border-widths-small); --amplify-components-table-header-color: var(--amplify-colors-font-primary); --amplify-components-table-header-display: table-cell; --amplify-components-table-header-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-header-font-weight: var(--amplify-font-weights-bold); --amplify-components-table-header-padding: var(--amplify-space-medium); --amplify-components-table-header-vertical-align: middle; --amplify-components-table-header-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-header-large-padding: var(--amplify-space-large); --amplify-components-table-header-small-font-size: var(--amplify-font-sizes-small); --amplify-components-table-header-small-padding: var(--amplify-space-xs); --amplify-components-table-data-border-color: var(--amplify-colors-border-tertiary); --amplify-components-table-data-border-style: solid; --amplify-components-table-data-border-width: var(--amplify-border-widths-small); --amplify-components-table-data-color: var(--amplify-colors-font-primary); --amplify-components-table-data-display: table-cell; --amplify-components-table-data-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-data-font-weight: var(--amplify-font-weights-normal); --amplify-components-table-data-padding: var(--amplify-space-medium); --amplify-components-table-data-vertical-align: middle; --amplify-components-table-data-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-data-large-padding: var(--amplify-space-large); --amplify-components-table-data-small-font-size: var(--amplify-font-sizes-small); --amplify-components-table-data-small-padding: var(--amplify-space-xs); --amplify-components-table-caption-caption-side: bottom; --amplify-components-table-caption-color: var(--amplify-colors-font-primary); --amplify-components-table-caption-display: table-caption; --amplify-components-table-caption-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-caption-text-align: center; --amplify-components-table-caption-word-break: break-all; --amplify-components-table-caption-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-caption-small-font-size: var(--amplify-font-sizes-small); --amplify-components-tabs-background-color: transparent; --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary); --amplify-components-tabs-border-style: solid; --amplify-components-tabs-border-width: var(--amplify-border-widths-medium); --amplify-components-tabs-gap: 0; --amplify-components-tabs-item-background-color: transparent; --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary); --amplify-components-tabs-item-border-style: solid; --amplify-components-tabs-item-border-width: var(--amplify-border-widths-medium); --amplify-components-tabs-item-color: var(--amplify-colors-font-secondary); --amplify-components-tabs-item-font-size: var(--amplify-font-sizes-medium); --amplify-components-tabs-item-font-weight: var(--amplify-font-weights-bold); --amplify-components-tabs-item-padding-vertical: var(--amplify-space-small); --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium); --amplify-components-tabs-item-text-align: center; --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium); --amplify-components-tabs-item-hover-background-color: transparent; --amplify-components-tabs-item-hover-border-color: var(--amplify-colors-border-focus); --amplify-components-tabs-item-hover-box-shadow: none; --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover); --amplify-components-tabs-item-focus-background-color: transparent; --amplify-components-tabs-item-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-tabs-item-focus-box-shadow: 0px 0px 0px var(--amplify-border-widths-medium) var(--amplify-colors-border-focus); --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus); --amplify-components-tabs-item-active-background-color: transparent; --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive); --amplify-components-tabs-item-active-box-shadow: none; --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive); --amplify-components-tabs-item-disabled-background-color: transparent; --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-tabs-item-disabled-box-shadow: none; --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-tabs-panel-background-color: transparent; --amplify-components-tabs-panel-padding-inline: 0; --amplify-components-tabs-panel-padding-block: var(--amplify-space-small); --amplify-components-text-color: var(--amplify-colors-font-primary); --amplify-components-text-primary-color: var(--amplify-colors-font-primary); --amplify-components-text-secondary-color: var(--amplify-colors-font-secondary); --amplify-components-text-tertiary-color: var(--amplify-colors-font-tertiary); --amplify-components-text-error-color: var(--amplify-colors-font-error); --amplify-components-text-warning-color: var(--amplify-colors-font-warning); --amplify-components-text-success-color: var(--amplify-colors-font-success); --amplify-components-text-info-color: var(--amplify-colors-font-info); --amplify-components-textareafield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-textareafield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-textareafield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-textfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-textfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-textfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-textfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary); --amplify-components-togglebutton-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed); --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20); --amplify-components-togglebutton-pressed-hover-background-color: var(--amplify-colors-overlay-30); --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small); --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-primary-80); --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-primary-80); --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-disabled-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-pressed-focus-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-hover-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent); --amplify-components-togglebuttongroup-align-items: center; --amplify-components-togglebuttongroup-align-content: center; --amplify-components-togglebuttongroup-justify-content: flex-start; --amplify-border-widths-small: 1px; --amplify-border-widths-medium: 2px; --amplify-border-widths-large: 3px; --amplify-colors-red-10: hsl(0, 75%, 95%); --amplify-colors-red-20: hsl(0, 75%, 85%); --amplify-colors-red-40: hsl(0, 75%, 75%); --amplify-colors-red-60: hsl(0, 50%, 50%); --amplify-colors-red-80: hsl(0, 95%, 30%); --amplify-colors-red-90: hsl(0, 100%, 20%); --amplify-colors-red-100: hsl(0, 100%, 15%); --amplify-colors-orange-10: hsl(30, 75%, 95%); --amplify-colors-orange-20: hsl(30, 75%, 85%); --amplify-colors-orange-40: hsl(30, 75%, 75%); --amplify-colors-orange-60: hsl(30, 50%, 50%); --amplify-colors-orange-80: hsl(30, 95%, 30%); --amplify-colors-orange-90: hsl(30, 100%, 20%); --amplify-colors-orange-100: hsl(30, 100%, 15%); --amplify-colors-yellow-10: hsl(60, 75%, 95%); --amplify-colors-yellow-20: hsl(60, 75%, 85%); --amplify-colors-yellow-40: hsl(60, 75%, 75%); --amplify-colors-yellow-60: hsl(60, 50%, 50%); --amplify-colors-yellow-80: hsl(60, 95%, 30%); --amplify-colors-yellow-90: hsl(60, 100%, 20%); --amplify-colors-yellow-100: hsl(60, 100%, 15%); --amplify-colors-green-10: hsl(130, 60%, 95%); --amplify-colors-green-20: hsl(130, 60%, 90%); --amplify-colors-green-40: hsl(130, 44%, 63%); --amplify-colors-green-60: hsl(130, 43%, 46%); --amplify-colors-green-80: hsl(130, 33%, 37%); --amplify-colors-green-90: hsl(130, 27%, 29%); --amplify-colors-green-100: hsl(130, 22%, 23%); --amplify-colors-teal-10: hsl(190, 75%, 95%); --amplify-colors-teal-20: hsl(190, 75%, 85%); --amplify-colors-teal-40: hsl(190, 70%, 70%); --amplify-colors-teal-60: hsl(190, 50%, 50%); --amplify-colors-teal-80: hsl(190, 95%, 30%); --amplify-colors-teal-90: hsl(190, 100%, 20%); --amplify-colors-teal-100: hsl(190, 100%, 15%); --amplify-colors-blue-10: hsl(220, 95%, 95%); --amplify-colors-blue-20: hsl(220, 85%, 85%); --amplify-colors-blue-40: hsl(220, 70%, 70%); --amplify-colors-blue-60: hsl(220, 50%, 50%); --amplify-colors-blue-80: hsl(220, 95%, 30%); --amplify-colors-blue-90: hsl(220, 100%, 20%); --amplify-colors-blue-100: hsl(220, 100%, 15%); --amplify-colors-purple-10: hsl(300, 95%, 95%); --amplify-colors-purple-20: hsl(300, 85%, 85%); --amplify-colors-purple-40: hsl(300, 70%, 70%); --amplify-colors-purple-60: hsl(300, 50%, 50%); --amplify-colors-purple-80: hsl(300, 95%, 30%); --amplify-colors-purple-90: hsl(300, 100%, 20%); --amplify-colors-purple-100: hsl(300, 100%, 15%); --amplify-colors-pink-10: hsl(340, 95%, 95%); --amplify-colors-pink-20: hsl(340, 90%, 85%); --amplify-colors-pink-40: hsl(340, 70%, 70%); --amplify-colors-pink-60: hsl(340, 50%, 50%); --amplify-colors-pink-80: hsl(340, 95%, 30%); --amplify-colors-pink-90: hsl(340, 100%, 20%); --amplify-colors-pink-100: hsl(340, 100%, 15%); --amplify-colors-neutral-10: hsl(210, 5%, 98%); --amplify-colors-neutral-20: hsl(210, 5%, 94%); --amplify-colors-neutral-40: hsl(210, 5%, 87%); --amplify-colors-neutral-60: hsl(210, 10%, 58%); --amplify-colors-neutral-80: hsl(210, 10%, 40%); --amplify-colors-neutral-90: hsl(210, 25%, 25%); --amplify-colors-neutral-100: hsl(210, 50%, 10%); --amplify-colors-primary-10: var(--amplify-colors-teal-10); --amplify-colors-primary-20: var(--amplify-colors-teal-20); --amplify-colors-primary-40: var(--amplify-colors-teal-40); --amplify-colors-primary-60: var(--amplify-colors-teal-60); --amplify-colors-primary-80: var(--amplify-colors-teal-80); --amplify-colors-primary-90: var(--amplify-colors-teal-90); --amplify-colors-primary-100: var(--amplify-colors-teal-100); --amplify-colors-secondary-10: var(--amplify-colors-purple-10); --amplify-colors-secondary-20: var(--amplify-colors-purple-20); --amplify-colors-secondary-40: var(--amplify-colors-purple-40); --amplify-colors-secondary-60: var(--amplify-colors-purple-60); --amplify-colors-secondary-80: var(--amplify-colors-purple-80); --amplify-colors-secondary-90: var(--amplify-colors-purple-90); --amplify-colors-secondary-100: var(--amplify-colors-purple-100); --amplify-colors-font-primary: var(--amplify-colors-neutral-100); --amplify-colors-font-secondary: var(--amplify-colors-neutral-90); --amplify-colors-font-tertiary: var(--amplify-colors-neutral-80); --amplify-colors-font-disabled: var(--amplify-colors-neutral-60); --amplify-colors-font-inverse: var(--amplify-colors-white); --amplify-colors-font-interactive: var(--amplify-colors-primary-80); --amplify-colors-font-hover: var(--amplify-colors-primary-90); --amplify-colors-font-focus: var(--amplify-colors-primary-100); --amplify-colors-font-active: var(--amplify-colors-primary-100); --amplify-colors-font-info: var(--amplify-colors-blue-90); --amplify-colors-font-warning: var(--amplify-colors-orange-90); --amplify-colors-font-error: var(--amplify-colors-red-90); --amplify-colors-font-success: var(--amplify-colors-green-90); --amplify-colors-background-primary: var(--amplify-colors-white); --amplify-colors-background-secondary: var(--amplify-colors-neutral-10); --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-background-quaternary: var(--amplify-colors-neutral-60); --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary); --amplify-colors-background-info: var(--amplify-colors-blue-10); --amplify-colors-background-warning: var(--amplify-colors-orange-10); --amplify-colors-background-error: var(--amplify-colors-red-10); --amplify-colors-background-success: var(--amplify-colors-green-10); --amplify-colors-border-primary: var(--amplify-colors-neutral-60); --amplify-colors-border-secondary: var(--amplify-colors-neutral-40); --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary); --amplify-colors-border-pressed: var(--amplify-colors-primary-100); --amplify-colors-border-focus: var(--amplify-colors-primary-100); --amplify-colors-border-error: var(--amplify-colors-red-80); --amplify-colors-border-info: var(--amplify-colors-blue-80); --amplify-colors-border-success: var(--amplify-colors-green-80); --amplify-colors-border-warning: var(--amplify-colors-orange-80); --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25); --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15); --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05); --amplify-colors-overlay-5: hsla(0, 0%, 0%, 0.05); --amplify-colors-overlay-10: hsla(0, 0%, 0%, 0.1); --amplify-colors-overlay-20: hsla(0, 0%, 0%, 0.2); --amplify-colors-overlay-30: hsla(0, 0%, 0%, 0.3); --amplify-colors-overlay-40: hsla(0, 0%, 0%, 0.4); --amplify-colors-overlay-50: hsla(0, 0%, 0%, 0.5); --amplify-colors-overlay-60: hsla(0, 0%, 0%, 0.6); --amplify-colors-overlay-70: hsla(0, 0%, 0%, 0.7); --amplify-colors-overlay-80: hsla(0, 0%, 0%, 0.8); --amplify-colors-overlay-90: hsla(0, 0%, 0%, 0.9); --amplify-colors-black: hsl(0, 0%, 0%); --amplify-colors-white: hsl(0, 0%, 100%); --amplify-colors-transparent: transparent; --amplify-fonts-default-variable: "InterVariable", "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif; --amplify-fonts-default-static: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif; --amplify-font-sizes-xxxs: 0.375rem; --amplify-font-sizes-xxs: 0.5rem; --amplify-font-sizes-xs: 0.75rem; --amplify-font-sizes-small: 0.875rem; --amplify-font-sizes-medium: 1rem; --amplify-font-sizes-large: 1.25rem; --amplify-font-sizes-xl: 1.5rem; --amplify-font-sizes-xxl: 2rem; --amplify-font-sizes-xxxl: 2.5rem; --amplify-font-sizes-xxxxl: 3rem; --amplify-font-weights-hairline: 100; --amplify-font-weights-thin: 200; --amplify-font-weights-light: 300; --amplify-font-weights-normal: 400; --amplify-font-weights-medium: 500; --amplify-font-weights-semibold: 600; --amplify-font-weights-bold: 700; --amplify-font-weights-extrabold: 800; --amplify-font-weights-black: 900; --amplify-line-heights-small: 1.25; --amplify-line-heights-medium: 1.5; --amplify-line-heights-large: 2; --amplify-opacities-0: 0; --amplify-opacities-10: 0.1; --amplify-opacities-20: 0.2; --amplify-opacities-30: 0.3; --amplify-opacities-40: 0.4; --amplify-opacities-50: 0.5; --amplify-opacities-60: 0.6; --amplify-opacities-70: 0.7; --amplify-opacities-80: 0.8; --amplify-opacities-90: 0.9; --amplify-opacities-100: 1; --amplify-outline-offsets-small: 1px; --amplify-outline-offsets-medium: 2px; --amplify-outline-offsets-large: 3px; --amplify-outline-widths-small: 1px; --amplify-outline-widths-medium: 2px; --amplify-outline-widths-large: 3px; --amplify-radii-xs: 0.125rem; --amplify-radii-small: 0.25rem; --amplify-radii-medium: 0.5rem; --amplify-radii-large: 1rem; --amplify-radii-xl: 2rem; --amplify-radii-xxl: 4rem; --amplify-radii-xxxl: 8rem; --amplify-shadows-small: 0px 2px 4px var(--amplify-colors-shadow-tertiary); --amplify-shadows-medium: 0px 2px 6px var(--amplify-colors-shadow-secondary); --amplify-shadows-large: 0px 4px 12px var(--amplify-colors-shadow-primary); --amplify-space-zero: 0; --amplify-space-xxxs: 0.25rem; --amplify-space-xxs: 0.375rem; --amplify-space-xs: 0.5rem; --amplify-space-small: 0.75rem; --amplify-space-medium: 1rem; --amplify-space-large: 1.5rem; --amplify-space-xl: 2.0rem; --amplify-space-xxl: 3.0rem; --amplify-space-xxxl: 4.5rem; --amplify-space-relative-xxxs: 0.25em; --amplify-space-relative-xxs: 0.375em; --amplify-space-relative-xs: 0.5em; --amplify-space-relative-small: 0.75em; --amplify-space-relative-medium: 1em; --amplify-space-relative-large: 1.5em; --amplify-space-relative-xl: 2.0em; --amplify-space-relative-xxl: 3.0em; --amplify-space-relative-xxxl: 4.5em; --amplify-space-relative-full: 100%; --amplify-time-short: 100ms; --amplify-time-medium: 250ms; --amplify-time-long: 500ms; --amplify-transforms-slide-x-small: translateX(0.5em); --amplify-transforms-slide-x-medium: translateX(1em); --amplify-transforms-slide-x-large: translateX(2em); } html, [data-amplify-theme] { font-family: var(--amplify-fonts-default-static); } @supports (font-variation-settings: normal) { html, [data-amplify-theme] { font-family: var(--amplify-fonts-default-variable); } } html:focus-within { scroll-behavior: smooth; } body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: var(--amplify-line-heights-medium); } * { box-sizing: border-box; } input, button, textarea, select { font: inherit; } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } } [class*=amplify] { all: unset; /* protect against external styles */ box-sizing: border-box; /* set box-sizing after unset above */ } .amplify-flex { align-content: var(--amplify-components-flex-align-content); align-items: var(--amplify-components-flex-align-items); display: flex; flex-wrap: var(--amplify-components-flex-flex-wrap); gap: var(--amplify-components-flex-gap); justify-content: var(--amplify-components-flex-justify-content); } .amplify-grid { display: grid; } .amplify-scrollview { display: block; overflow: auto; } .amplify-text { display: block; color: var(--amplify-components-text-color); } b.amplify-text, em.amplify-text, i.amplify-text, span.amplify-text, strong.amplify-text { display: inline; } .amplify-text--truncated { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .amplify-text--primary { color: var(--amplify-components-text-primary-color); } .amplify-text--secondary { color: var(--amplify-components-text-secondary-color); } .amplify-text--tertiary { color: var(--amplify-components-text-tertiary-color); } .amplify-text--error { color: var(--amplify-components-text-error-color); } .amplify-text--info { color: var(--amplify-components-text-info-color); } .amplify-text--success { color: var(--amplify-components-text-success-color); } .amplify-text--warning { color: var(--amplify-components-text-warning-color); } .amplify-badge { background-color: var(--amplify-components-badge-background-color); border-radius: var(--amplify-components-badge-border-radius); color: var(--amplify-components-badge-color); display: inline-flex; font-size: var(--amplify-components-badge-font-size); font-weight: var(--amplify-components-badge-font-weight); line-height: var(--amplify-components-badge-line-height); padding: var(--amplify-components-badge-padding-vertical) var(--amplify-components-badge-padding-horizontal); text-align: var(--amplify-components-badge-text-align); } .amplify-badge--info { color: var(--amplify-components-badge-info-color); background-color: var(--amplify-components-badge-info-background-color); } .amplify-badge--error { color: var(--amplify-components-badge-error-color); background-color: var(--amplify-components-badge-error-background-color); } .amplify-badge--warning { color: var(--amplify-components-badge-warning-color); background-color: var(--amplify-components-badge-warning-background-color); } .amplify-badge--success { color: var(--amplify-components-badge-success-color); background-color: var(--amplify-components-badge-success-background-color); } .amplify-badge--small { font-size: var(--amplify-components-badge-small-font-size); padding: var(--amplify-components-badge-small-padding-vertical) var(--amplify-components-badge-small-padding-horizontal); } .amplify-badge--large { font-size: var(--amplify-components-badge-large-font-size); padding: var(--amplify-components-badge-large-padding-vertical) var(--amplify-components-badge-large-padding-horizontal); } /* * Button base styles */ .amplify-button { --amplify-internal-button-background-color: var( --amplify-components-button-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-border-color ); --amplify-internal-button-color: var(--amplify-components-button-color); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-focus-box-shadow ); --amplify-internal-button-border-width: var( --amplify-components-button-border-width ); align-items: center; background-color: var(--amplify-internal-button-background-color); border-color: var(--amplify-internal-button-border-color); border-radius: var(--amplify-components-button-border-radius); border-style: var(--amplify-components-button-border-style); border-width: var(--amplify-internal-button-border-width); box-sizing: border-box; color: var(--amplify-internal-button-color); cursor: pointer; display: inline-flex; font-size: var(--amplify-components-button-font-size); font-weight: var(--amplify-components-button-font-weight); justify-content: center; line-height: var(--amplify-components-button-line-height); padding-block-start: var(--amplify-components-button-padding-block-start); padding-block-end: var(--amplify-components-button-padding-block-end); padding-inline-start: var(--amplify-components-button-padding-inline-start); padding-inline-end: var(--amplify-components-button-padding-inline-end); transition: all var(--amplify-components-button-transition-duration); -webkit-user-select: none; -moz-user-select: none; user-select: none; --amplify-internal-button-disabled-color: var( --amplify-components-button-disabled-color ); --amplify-internal-button-disabled-background-color: var( --amplify-components-button-disabled-background-color ); --amplify-internal-button-disabled-border-color: var( --amplify-components-button-disabled-border-color ); --amplify-internal-button-disabled-text-decoration: initial; --amplify-internal-button-loading-background-color: var( --amplify-components-button-loading-background-color ); --amplify-internal-button-loading-border-color: var( --amplify-components-button-loading-border-color ); --amplify-internal-button-loading-color: var( --amplify-components-button-loading-color ); --amplify-internal-button-loading-text-decoration: initial; } .amplify-button:hover { --amplify-internal-button-background-color: var( --amplify-components-button-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-hover-color ); } .amplify-button:focus { --amplify-internal-button-background-color: var( --amplify-components-button-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-focus-color ); box-shadow: var(--amplify-internal-button-focus-box-shadow); } .amplify-button:active { --amplify-internal-button-background-color: var( --amplify-components-button-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-active-color ); } .amplify-button--fullwidth { width: 100%; } .amplify-button--outlined--info { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-info-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-info-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-info-color ); } .amplify-button--outlined--info:hover { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-info-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-info-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-info-hover-color ); } .amplify-button--outlined--info:focus { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-info-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-info-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-info-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-outlined-info-focus-box-shadow ); } .amplify-button--outlined--info:active { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-info-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-info-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-info-active-color ); } .amplify-button--outlined--warning { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-warning-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-warning-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-warning-color ); } .amplify-button--outlined--warning:hover { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-warning-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-warning-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-warning-hover-color ); } .amplify-button--outlined--warning:focus { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-warning-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-warning-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-warning-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-outlined-warning-focus-box-shadow ); } .amplify-button--outlined--warning:active { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-warning-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-warning-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-warning-active-color ); } .amplify-button--outlined--error { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-error-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-error-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-error-color ); } .amplify-button--outlined--error:hover { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-error-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-error-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-error-hover-color ); } .amplify-button--outlined--error:focus { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-error-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-error-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-error-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-outlined-error-focus-box-shadow ); } .amplify-button--outlined--error:active { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-error-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-error-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-error-active-color ); } .amplify-button--outlined--success { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-success-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-success-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-success-color ); } .amplify-button--outlined--success:hover { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-success-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-success-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-success-hover-color ); } .amplify-button--outlined--success:focus { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-success-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-success-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-success-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-outlined-success-focus-box-shadow ); } .amplify-button--outlined--success:active { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-success-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-success-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-success-active-color ); } .amplify-button--outlined--overlay { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-overlay-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-overlay-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-overlay-color ); } .amplify-button--outlined--overlay:hover { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-overlay-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-overlay-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-overlay-hover-color ); } .amplify-button--outlined--overlay:focus { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-overlay-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-overlay-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-overlay-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-outlined-overlay-focus-box-shadow ); } .amplify-button--outlined--overlay:active { --amplify-internal-button-background-color: var( --amplify-components-button-outlined-overlay-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-outlined-overlay-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-outlined-overlay-active-color ); } .amplify-button--menu { border-width: var(--amplify-components-button-menu-border-width); background-color: var(--amplify-components-button-menu-background-color); justify-content: var(--amplify-components-button-menu-justify-content); --amplify-internal-button-disabled-color: var( --amplify-components-button-menu-disabled-color ); } .amplify-button--menu:hover { color: var(--amplify-components-button-menu-hover-color); background-color: var(--amplify-components-button-menu-hover-background-color); } .amplify-button--menu:focus { box-shadow: none; color: var(--amplify-components-button-menu-focus-color); background-color: var(--amplify-components-button-menu-focus-background-color); } .amplify-button--menu:active { color: var(--amplify-components-button-menu-active-color); background-color: var(--amplify-components-button-menu-active-background-color); } .amplify-button--primary { --amplify-internal-button-border-width: var( --amplify-components-button-primary-border-width ); --amplify-internal-button-background-color: var( --amplify-components-button-primary-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-color ); --amplify-internal-button-disabled-border-color: var( --amplify-components-button-primary-disabled-border-color ); --amplify-internal-button-disabled-background-color: var( --amplify-components-button-primary-disabled-background-color ); --amplify-internal-button-disabled-color: var( --amplify-components-button-primary-disabled-color ); --amplify-internal-button-loading-background-color: var( --amplify-components-button-primary-loading-background-color ); --amplify-internal-button-loading-border-color: var( --amplify-components-button-primary-loading-border-color ); --amplify-internal-button-loading-color: var( --amplify-components-button-primary-loading-color ); } .amplify-button--primary:hover { --amplify-internal-button-background-color: var( --amplify-components-button-primary-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-hover-color ); } .amplify-button--primary:focus { --amplify-internal-button-background-color: var( --amplify-components-button-primary-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-primary-focus-box-shadow ); } .amplify-button--primary:active { --amplify-internal-button-background-color: var( --amplify-components-button-primary-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-active-color ); } .amplify-button--primary--info { --amplify-internal-button-background-color: var( --amplify-components-button-primary-info-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-info-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-info-color ); } .amplify-button--primary--info:hover { --amplify-internal-button-background-color: var( --amplify-components-button-primary-info-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-info-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-info-hover-color ); } .amplify-button--primary--info:focus { --amplify-internal-button-background-color: var( --amplify-components-button-primary-info-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-info-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-info-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-primary-info-focus-box-shadow ); } .amplify-button--primary--info:active { --amplify-internal-button-background-color: var( --amplify-components-button-primary-info-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-info-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-info-active-color ); } .amplify-button--primary--warning { --amplify-internal-button-background-color: var( --amplify-components-button-primary-warning-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-warning-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-warning-color ); } .amplify-button--primary--warning:hover { --amplify-internal-button-background-color: var( --amplify-components-button-primary-warning-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-warning-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-warning-hover-color ); } .amplify-button--primary--warning:focus { --amplify-internal-button-background-color: var( --amplify-components-button-primary-warning-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-warning-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-warning-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-primary-warning-focus-box-shadow ); } .amplify-button--primary--warning:active { --amplify-internal-button-background-color: var( --amplify-components-button-primary-warning-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-warning-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-warning-active-color ); } .amplify-button--primary--error { --amplify-internal-button-background-color: var( --amplify-components-button-primary-error-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-error-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-error-color ); } .amplify-button--primary--error:hover { --amplify-internal-button-background-color: var( --amplify-components-button-primary-error-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-error-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-error-hover-color ); } .amplify-button--primary--error:focus { --amplify-internal-button-background-color: var( --amplify-components-button-primary-error-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-error-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-error-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-primary-error-focus-box-shadow ); } .amplify-button--primary--error:active { --amplify-internal-button-background-color: var( --amplify-components-button-primary-error-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-error-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-error-active-color ); } .amplify-button--primary--success { --amplify-internal-button-background-color: var( --amplify-components-button-primary-success-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-success-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-success-color ); } .amplify-button--primary--success:hover { --amplify-internal-button-background-color: var( --amplify-components-button-primary-success-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-success-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-success-hover-color ); } .amplify-button--primary--success:focus { --amplify-internal-button-background-color: var( --amplify-components-button-primary-success-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-success-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-success-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-primary-success-focus-box-shadow ); } .amplify-button--primary--success:active { --amplify-internal-button-background-color: var( --amplify-components-button-primary-success-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-success-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-success-active-color ); } .amplify-button--primary--overlay { --amplify-internal-button-background-color: var( --amplify-components-button-primary-overlay-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-overlay-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-overlay-color ); } .amplify-button--primary--overlay:hover { --amplify-internal-button-background-color: var( --amplify-components-button-primary-overlay-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-overlay-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-overlay-hover-color ); } .amplify-button--primary--overlay:focus { --amplify-internal-button-background-color: var( --amplify-components-button-primary-overlay-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-overlay-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-overlay-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-primary-overlay-focus-box-shadow ); } .amplify-button--primary--overlay:active { --amplify-internal-button-background-color: var( --amplify-components-button-primary-overlay-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-primary-overlay-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-primary-overlay-active-color ); } .amplify-button--link { --amplify-internal-button-border-width: var( --amplify-components-button-link-border-width ); --amplify-internal-button-background-color: var( --amplify-components-button-link-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-color ); --amplify-internal-button-disabled-border-color: var( --amplify-components-button-link-disabled-border-color ); --amplify-internal-button-disabled-background-color: var( --amplify-components-button-link-disabled-background-color ); --amplify-internal-button-disabled-color: var( --amplify-components-button-link-disabled-color ); --amplify-internal-button-loading-background-color: var( --amplify-components-button-link-loading-background-color ); --amplify-internal-button-loading-border-color: var( --amplify-components-button-link-loading-border-color ); --amplify-internal-button-loading-color: var( --amplify-components-button-link-loading-color ); } .amplify-button--link:hover { --amplify-internal-button-background-color: var( --amplify-components-button-link-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-hover-color ); } .amplify-button--link:focus { --amplify-internal-button-background-color: var( --amplify-components-button-link-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-link-focus-box-shadow ); } .amplify-button--link:active { --amplify-internal-button-background-color: var( --amplify-components-button-link-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-active-color ); } .amplify-button--link--info { --amplify-internal-button-background-color: var( --amplify-components-button-link-info-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-info-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-info-color ); } .amplify-button--link--info:hover { --amplify-internal-button-background-color: var( --amplify-components-button-link-info-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-info-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-info-hover-color ); } .amplify-button--link--info:focus { --amplify-internal-button-background-color: var( --amplify-components-button-link-info-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-info-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-info-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-link-info-focus-box-shadow ); } .amplify-button--link--info:active { --amplify-internal-button-background-color: var( --amplify-components-button-link-info-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-info-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-info-active-color ); } .amplify-button--link--warning { --amplify-internal-button-background-color: var( --amplify-components-button-link-warning-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-warning-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-warning-color ); } .amplify-button--link--warning:hover { --amplify-internal-button-background-color: var( --amplify-components-button-link-warning-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-warning-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-warning-hover-color ); } .amplify-button--link--warning:focus { --amplify-internal-button-background-color: var( --amplify-components-button-link-warning-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-warning-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-warning-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-link-warning-focus-box-shadow ); } .amplify-button--link--warning:active { --amplify-internal-button-background-color: var( --amplify-components-button-link-warning-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-warning-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-warning-active-color ); } .amplify-button--link--error { --amplify-internal-button-background-color: var( --amplify-components-button-link-error-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-error-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-error-color ); } .amplify-button--link--error:hover { --amplify-internal-button-background-color: var( --amplify-components-button-link-error-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-error-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-error-hover-color ); } .amplify-button--link--error:focus { --amplify-internal-button-background-color: var( --amplify-components-button-link-error-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-error-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-error-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-link-error-focus-box-shadow ); } .amplify-button--link--error:active { --amplify-internal-button-background-color: var( --amplify-components-button-link-error-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-error-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-error-active-color ); } .amplify-button--link--success { --amplify-internal-button-background-color: var( --amplify-components-button-link-success-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-success-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-success-color ); } .amplify-button--link--success:hover { --amplify-internal-button-background-color: var( --amplify-components-button-link-success-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-success-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-success-hover-color ); } .amplify-button--link--success:focus { --amplify-internal-button-background-color: var( --amplify-components-button-link-success-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-success-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-success-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-link-success-focus-box-shadow ); } .amplify-button--link--success:active { --amplify-internal-button-background-color: var( --amplify-components-button-link-success-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-success-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-success-active-color ); } .amplify-button--link--overlay { --amplify-internal-button-background-color: var( --amplify-components-button-link-overlay-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-overlay-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-overlay-color ); } .amplify-button--link--overlay:hover { --amplify-internal-button-background-color: var( --amplify-components-button-link-overlay-hover-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-overlay-hover-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-overlay-hover-color ); } .amplify-button--link--overlay:focus { --amplify-internal-button-background-color: var( --amplify-components-button-link-overlay-focus-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-overlay-focus-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-overlay-focus-color ); --amplify-internal-button-focus-box-shadow: var( --amplify-components-button-link-overlay-focus-box-shadow ); } .amplify-button--link--overlay:active { --amplify-internal-button-background-color: var( --amplify-components-button-link-overlay-active-background-color ); --amplify-internal-button-border-color: var( --amplify-components-button-link-overlay-active-border-color ); --amplify-internal-button-color: var( --amplify-components-button-link-overlay-active-color ); } .amplify-button--destructive { border-width: var(--amplify-components-button-destructive-border-width); background-color: var(--amplify-components-button-destructive-background-color); border-color: var(--amplify-components-button-destructive-border-color); color: var(--amplify-components-button-destructive-color); --amplify-internal-button-disabled-border-color: var( --amplify-components-button-destructive-disabled-border-color ); --amplify-internal-button-disabled-background-color: var( --amplify-components-button-destructive-disabled-background-color ); --amplify-internal-button-disabled-color: var( --amplify-components-button-destructive-disabled-color ); --amplify-internal-button-loading-background-color: var( --amplify-components-button-destructive-loading-background-color ); --amplify-internal-button-loading-border-color: var( --amplify-components-button-destructive-loading-border-color ); --amplify-internal-button-loading-color: var( --amplify-components-button-destructive-loading-color ); } .amplify-button--destructive:hover { background-color: var(--amplify-components-button-destructive-hover-background-color); border-color: var(--amplify-components-button-destructive-hover-border-color); color: var(--amplify-components-button-destructive-hover-color); } .amplify-button--destructive:focus { background-color: var(--amplify-components-button-destructive-focus-background-color); border-color: var(--amplify-components-button-destructive-focus-border-color); color: var(--amplify-components-button-destructive-focus-color); box-shadow: var(--amplify-components-button-destructive-focus-box-shadow); } .amplify-button--destructive:active { background-color: var(--amplify-components-button-destructive-active-background-color); border-color: var(--amplify-components-button-destructive-active-border-color); color: var(--amplify-components-button-destructive-active-color); } .amplify-button--warning { background-color: var(--amplify-components-button-warning-background-color); border-color: var(--amplify-components-button-warning-border-color); border-width: var(--amplify-components-button-warning-border-width); color: var(--amplify-components-button-warning-color); --amplify-internal-button-disabled-text-decoration: none; --amplify-internal-button-disabled-border-color: var( --amplify-components-button-warning-disabled-border-color ); --amplify-internal-button-disabled-background-color: var( --amplify-components-button-warning-disabled-background-color ); --amplify-internal-button-disabled-color: var( --amplify-components-button-warning-disabled-color ); --amplify-internal-button-loading-background-color: var( --amplify-components-button-warning-loading-background-color ); --amplify-internal-button-loading-border-color: var( --amplify-components-button-warning-loading-border-color ); --amplify-internal-button-loading-color: var( --amplify-components-button-warning-loading-color ); --amplify-internal-button-loading-text-decoration: none; } .amplify-button--warning:hover { background-color: var(--amplify-components-button-warning-hover-background-color); border-color: var(--amplify-components-button-warning-hover-border-color); color: var(--amplify-components-button-warning-hover-color); } .amplify-button--warning:focus { background-color: var(--amplify-components-button-warning-focus-background-color); border-color: var(--amplify-components-button-warning-focus-border-color); color: var(--amplify-components-button-warning-focus-color); box-shadow: var(--amplify-components-button-warning-focus-box-shadow); } .amplify-button--warning:active { background-color: var(--amplify-components-button-warning-active-background-color); border-color: var(--amplify-components-button-warning-active-border-color); color: var(--amplify-components-button-warning-active-color); } .amplify-button--small { font-size: var(--amplify-components-button-small-font-size); padding-block-start: var(--amplify-components-button-small-padding-block-start); padding-block-end: var(--amplify-components-button-small-padding-block-end); padding-inline-start: var(--amplify-components-button-small-padding-inline-start); padding-inline-end: var(--amplify-components-button-small-padding-inline-end); } .amplify-button--large { font-size: var(--amplify-components-button-large-font-size); padding-block-start: var(--amplify-components-button-large-padding-block-start); padding-block-end: var(--amplify-components-button-large-padding-block-end); padding-inline-start: var(--amplify-components-button-large-padding-inline-start); padding-inline-end: var(--amplify-components-button-large-padding-inline-end); } .amplify-button--disabled { background-color: var(--amplify-internal-button-disabled-background-color); border-color: var(--amplify-internal-button-disabled-border-color); color: var(--amplify-internal-button-disabled-color); -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration); text-decoration: var(--amplify-internal-button-disabled-text-decoration); cursor: not-allowed; } .amplify-button--disabled:hover { background-color: var(--amplify-internal-button-disabled-background-color); border-color: var(--amplify-internal-button-disabled-border-color); color: var(--amplify-internal-button-disabled-color); -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration); text-decoration: var(--amplify-internal-button-disabled-text-decoration); } .amplify-button--disabled :focus { background-color: var(--amplify-internal-button-disabled-background-color); border-color: var(--amplify-internal-button-disabled-border-color); color: var(--amplify-internal-button-disabled-color); -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration); text-decoration: var(--amplify-internal-button-disabled-text-decoration); } .amplify-button--disabled:active { background-color: var(--amplify-internal-button-disabled-background-color); border-color: var(--amplify-internal-button-disabled-border-color); color: var(--amplify-internal-button-disabled-color); -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration); text-decoration: var(--amplify-internal-button-disabled-text-decoration); } .amplify-button--loading { background-color: var(--amplify-internal-button-loading-background-color); border-color: var(--amplify-internal-button-loading-border-color); color: var(--amplify-components-button-loading-color); -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration); text-decoration: var(--amplify-internal-button-loading-text-decoration); } .amplify-button--loading:hover { background-color: var(--amplify-internal-button-loading-background-color); border-color: var(--amplify-internal-button-loading-border-color); color: var(--amplify-components-button-loading-color); -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration); text-decoration: var(--amplify-internal-button-loading-text-decoration); } .amplify-button--loading:focus { background-color: var(--amplify-internal-button-loading-background-color); border-color: var(--amplify-internal-button-loading-border-color); color: var(--amplify-components-button-loading-color); -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration); text-decoration: var(--amplify-internal-button-loading-text-decoration); } .amplify-button--loading:active { background-color: var(--amplify-internal-button-loading-background-color); border-color: var(--amplify-internal-button-loading-border-color); color: var(--amplify-components-button-loading-color); -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration); text-decoration: var(--amplify-internal-button-loading-text-decoration); } .amplify-button__loader-wrapper { align-items: var(--amplify-components-button-loader-wrapper-align-items); gap: var(--amplify-components-button-loader-wrapper-gap); } @media (prefers-reduced-motion: reduce) { .amplify-button { transition: none; } } .amplify-dropzone { display: block; background-color: var(--amplify-components-dropzone-background-color); border-color: var(--amplify-components-dropzone-border-color); border-width: var(--amplify-components-dropzone-border-width); border-style: var(--amplify-components-dropzone-border-style); border-radius: var(--amplify-components-dropzone-border-radius); color: var(--amplify-components-dropzone-color); padding-block: var(--amplify-components-dropzone-padding-block); padding-inline: var(--amplify-components-dropzone-padding-inline); text-align: var(--amplify-components-dropzone-text-align); } .amplify-dropzone--disabled { cursor: not-allowed; background-color: var(--amplify-components-dropzone-disabled-background-color); border-color: var(--amplify-components-dropzone-disabled-border-color); border-width: var(--amplify-components-dropzone-disabled-border-width); border-style: var(--amplify-components-dropzone-disabled-border-style); border-radius: var(--amplify-components-dropzone-disabled-border-radius); color: var(--amplify-components-dropzone-disabled-color); } .amplify-dropzone--active { background-color: var(--amplify-components-dropzone-active-background-color); border-color: var(--amplify-components-dropzone-active-border-color); border-width: var(--amplify-components-dropzone-active-border-width); border-style: var(--amplify-components-dropzone-active-border-style); border-radius: var(--amplify-components-dropzone-active-border-radius); color: var(--amplify-components-dropzone-active-color); } .amplify-dropzone--rejected { background-color: var(--amplify-components-dropzone-rejected-background-color); border-color: var(--amplify-components-dropzone-rejected-border-color); border-width: var(--amplify-components-dropzone-rejected-border-width); border-style: var(--amplify-components-dropzone-rejected-border-style); border-radius: var(--amplify-components-dropzone-rejected-border-radius); color: var(--amplify-components-dropzone-rejected-color); } .amplify-dropzone--accepted { background-color: var(--amplify-components-dropzone-accepted-background-color); border-color: var(--amplify-components-dropzone-accepted-border-color); border-width: var(--amplify-components-dropzone-accepted-border-width); border-style: var(--amplify-components-dropzone-accepted-border-style); border-radius: var(--amplify-components-dropzone-accepted-border-radius); color: var(--amplify-components-dropzone-accepted-color); } .amplify-field__description { color: var(--amplify-components-fieldmessages-description-color); font-style: var(--amplify-components-fieldmessages-description-font-style); font-size: var(--amplify-components-fieldmessages-description-font-size); } .amplify-field__error-message { color: var(--amplify-components-fieldmessages-error-color); font-size: var(--amplify-components-fieldmessages-error-font-size); } .amplify-heading { color: var(--amplify-components-heading-color); line-height: var(--amplify-components-heading-line-height); display: block; } .amplify-heading--truncated { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .amplify-heading--1 { font-size: var(--amplify-components-heading-1-font-size); font-weight: var(--amplify-components-heading-1-font-weight); } .amplify-heading--2 { font-size: var(--amplify-components-heading-2-font-size); font-weight: var(--amplify-components-heading-2-font-weight); } .amplify-heading--3 { font-size: var(--amplify-components-heading-3-font-size); font-weight: var(--amplify-components-heading-3-font-weight); } .amplify-heading--4 { font-size: var(--amplify-components-heading-4-font-size); font-weight: var(--amplify-components-heading-4-font-weight); } .amplify-heading--5 { font-size: var(--amplify-components-heading-5-font-size); font-weight: var(--amplify-components-heading-5-font-weight); } .amplify-heading--6 { font-size: var(--amplify-components-heading-6-font-size); font-weight: var(--amplify-components-heading-6-font-weight); } /* * Icon base styles */ .amplify-icon { display: inline-block; vertical-align: middle; fill: currentColor; height: var(--amplify-components-icon-height); line-height: var(--amplify-components-icon-line-height); } .amplify-icon > svg { height: var(--amplify-components-icon-height); width: var(--amplify-components-icon-height); } .amplify-highlightmatch__highlighted { font-weight: var(--amplify-components-highlightmatch-highlighted-font-weight); } .amplify-input { box-sizing: border-box; color: var(--amplify-components-fieldcontrol-color); font-size: var(--amplify-components-fieldcontrol-font-size); line-height: var(--amplify-components-fieldcontrol-line-height); padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start); padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end); padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start); padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end); transition: all var(--amplify-components-fieldcontrol-transition-duration); width: 100%; border-color: var(--amplify-components-fieldcontrol-border-color); border-radius: var(--amplify-components-fieldcontrol-border-radius); border-style: var(--amplify-components-fieldcontrol-border-style); border-width: var(--amplify-components-fieldcontrol-border-width); outline-color: var(--amplify-components-fieldcontrol-outline-color); outline-style: var(--amplify-components-fieldcontrol-outline-style); outline-width: var(--amplify-components-fieldcontrol-outline-width); outline-offset: var(--amplify-components-fieldcontrol-outline-offset); -webkit-user-select: text; -moz-user-select: text; user-select: text; display: inline-block; --amplify-components-fieldcontrol-color: var( --amplify-components-input-color ); --amplify-components-fieldcontrol-border-color: var( --amplify-components-input-border-color ); --amplify-components-fieldcontrol-font-size: var( --amplify-components-input-font-size ); --amplify-components-fieldcontrol-focus-border-color: var( --amplify-components-input-focus-border-color ); } .amplify-input:focus { border-color: var(--amplify-components-fieldcontrol-focus-border-color); box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); } .amplify-input--small { font-size: var(--amplify-components-fieldcontrol-small-font-size); padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start); padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end); padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start); padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end); } .amplify-input--large { font-size: var(--amplify-components-fieldcontrol-large-font-size); padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start); padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end); padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start); padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end); } .amplify-input--error { border-color: var(--amplify-components-fieldcontrol-error-border-color); } .amplify-input--error:focus { border-color: var(--amplify-components-fieldcontrol-error-border-color); box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); } .amplify-input--quiet { border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start); border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start); border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end); border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius); } .amplify-input--quiet:focus { border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color); box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow); } .amplify-input--quiet[aria-invalid=true] { border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color); } .amplify-input--quiet[aria-invalid=true]:focus { border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color); box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow); } .amplify-input[disabled] { color: var(--amplify-components-fieldcontrol-disabled-color); cursor: var(--amplify-components-fieldcontrol-disabled-cursor); border-color: var(--amplify-components-fieldcontrol-disabled-border-color); background-color: var(--amplify-components-fieldcontrol-disabled-background-color); } .amplify-textarea { box-sizing: border-box; color: var(--amplify-components-fieldcontrol-color); font-size: var(--amplify-components-fieldcontrol-font-size); line-height: var(--amplify-components-fieldcontrol-line-height); padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start); padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end); padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start); padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end); transition: all var(--amplify-components-fieldcontrol-transition-duration); width: 100%; border-color: var(--amplify-components-fieldcontrol-border-color); border-radius: var(--amplify-components-fieldcontrol-border-radius); border-style: var(--amplify-components-fieldcontrol-border-style); border-width: var(--amplify-components-fieldcontrol-border-width); outline-color: var(--amplify-components-fieldcontrol-outline-color); outline-style: var(--amplify-components-fieldcontrol-outline-style); outline-width: var(--amplify-components-fieldcontrol-outline-width); outline-offset: var(--amplify-components-fieldcontrol-outline-offset); -webkit-user-select: text; -moz-user-select: text; user-select: text; white-space: pre-wrap; max-height: 100%; } .amplify-textarea:focus { border-color: var(--amplify-components-fieldcontrol-focus-border-color); box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); } .amplify-textarea--small { font-size: var(--amplify-components-fieldcontrol-small-font-size); padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start); padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end); padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start); padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end); } .amplify-textarea--large { font-size: var(--amplify-components-fieldcontrol-large-font-size); padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start); padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end); padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start); padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end); } .amplify-textarea--error { border-color: var(--amplify-components-fieldcontrol-error-border-color); } .amplify-textarea--error:focus { border-color: var(--amplify-components-fieldcontrol-error-border-color); box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); } .amplify-textarea--quiet { border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start); border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start); border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end); border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius); } .amplify-textarea--quiet:focus { border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color); box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow); } .amplify-textarea--quiet[aria-invalid=true] { border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color); } .amplify-textarea--quiet[aria-invalid=true]:focus { border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color); box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow); } .amplify-textarea[disabled] { color: var(--amplify-components-fieldcontrol-disabled-color); cursor: var(--amplify-components-fieldcontrol-disabled-cursor); border-color: var(--amplify-components-fieldcontrol-disabled-border-color); background-color: var(--amplify-components-fieldcontrol-disabled-background-color); } .amplify-image { height: var(--amplify-components-image-height); max-width: var(--amplify-components-image-max-width); -o-object-fit: var(--amplify-components-image-object-fit); object-fit: var(--amplify-components-image-object-fit); -o-object-position: var(--amplify-components-image-object-position); object-position: var(--amplify-components-image-object-position); overflow: clip; } .amplify-link { color: var(--amplify-components-link-color); -webkit-text-decoration: var(--amplify-components-link-text-decoration); text-decoration: var(--amplify-components-link-text-decoration); cursor: pointer; } .amplify-link:visited { color: var(--amplify-components-link-visited-color); -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration); text-decoration: var(--amplify-components-link-visited-text-decoration); } .amplify-link:active { color: var(--amplify-components-link-active-color); -webkit-text-decoration: var(--amplify-components-link-active-text-decoration); text-decoration: var(--amplify-components-link-active-text-decoration); } .amplify-link:focus { color: var(--amplify-components-link-focus-color); -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration); text-decoration: var(--amplify-components-link-focus-text-decoration); } .amplify-link:hover { color: var(--amplify-components-link-hover-color); -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration); text-decoration: var(--amplify-components-link-hover-text-decoration); } .amplify-loader { width: var(--amplify-components-loader-width); height: var(--amplify-components-loader-height); font-size: var(--amplify-components-loader-font-size); fill: none; stroke: var(--amplify-components-loader-stroke-empty); --amplify-internal-loader-linear-font-size: var( --amplify-components-loader-linear-font-size ); --amplify-internal-loader-linear-stroke-width: var( --amplify-components-loader-linear-stroke-width ); } .amplify-loader circle:last-of-type { transform-origin: center center; animation-name: amplify-loader-circular; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: var(--amplify-components-loader-animation-duration); stroke: var(--amplify-components-loader-stroke-filled); stroke-linecap: var(--amplify-components-loader-stroke-linecap); } @media (prefers-reduced-motion) { .amplify-loader circle:last-of-type { animation: none; stroke-dasharray: 100% 200%; stroke-dashoffset: 50%; } } .amplify-loader line:last-of-type { stroke: var(--amplify-components-loader-linear-stroke-filled); stroke-dasharray: 50% 200%; animation-name: amplify-loader-linear; animation-duration: var(--amplify-components-loader-linear-animation-duration); animation-timing-function: linear; animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .amplify-loader line:last-of-type { animation: none; stroke-dashoffset: -50%; } } .amplify-loader--small { width: var(--amplify-components-loader-small-width); height: var(--amplify-components-loader-small-height); font-size: var(--amplify-components-loader-small-font-size); --amplify-internal-loader-linear-stroke-width: var( --amplify-components-loader-linear-small-stroke-width ); --amplify-internal-loader-linear-font-size: var( --amplify-components-loader-linear-small-font-size ); } .amplify-loader--large { width: var(--amplify-components-loader-large-width); height: var(--amplify-components-loader-large-height); font-size: var(--amplify-components-loader-large-font-size); --amplify-internal-loader-linear-stroke-width: var( --amplify-components-loader-linear-large-stroke-width ); --amplify-internal-loader-linear-font-size: var( --amplify-components-loader-linear-large-font-size ); } .amplify-loader--linear { width: var(--amplify-components-loader-linear-width); min-width: var(--amplify-components-loader-linear-min-width); stroke: var(--amplify-components-loader-linear-stroke-empty); stroke-linecap: var(--amplify-components-loader-linear-stroke-linecap); stroke-width: var(--amplify-internal-loader-linear-stroke-width); font-size: var(--amplify-internal-loader-linear-font-size); } .amplify-loader--determinate circle:last-of-type { animation: none; transform: rotate(-90deg); } .amplify-loader--determinate line:last-of-type { animation: none; stroke-dashoffset: 0%; stroke-dasharray: none; } .amplify-loader__label { fill: var(--amplify-components-loader-text-fill); stroke: none; } @keyframes amplify-loader-circular { 0% { stroke-dasharray: 100% 200%; transform: rotate(120deg); } 50% { stroke-dasharray: 20% 400%; } 100% { stroke-dasharray: 100% 200%; transform: rotate(480deg); } } @keyframes amplify-loader-linear { 0% { stroke-dashoffset: 200%; } 100% { stroke-dashoffset: -50%; } } .amplify-placeholder { animation-direction: alternate; animation-duration: var(--amplify-components-placeholder-transition-duration); animation-iteration-count: infinite; animation-name: amplify-placeholder-loading; border-radius: var(--amplify-components-placeholder-border-radius); height: var(--amplify-components-placeholder-default-height); width: 100%; display: block; } .amplify-placeholder--small { height: var(--amplify-components-placeholder-small-height); } .amplify-placeholder--large { height: var(--amplify-components-placeholder-large-height); } @keyframes amplify-placeholder-loading { 0% { background-color: var(--amplify-components-placeholder-start-color); } 100% { background-color: var(--amplify-components-placeholder-end-color); } } @media (prefers-reduced-motion: reduce) { .amplify-placeholder { animation: none; background-color: var(--amplify-components-placeholder-end-color); } } [data-amplify-copy] { display: flex; font-size: var(--amplify-components-copy-font-size); gap: var(--amplify-components-copy-gap); justify-content: center; align-items: center; word-break: break-all; } [data-amplify-copy-svg] { cursor: pointer; position: relative; } [data-amplify-copy-svg] path { fill: var(--amplify-components-copy-svg-path-fill); } [data-amplify-copy-svg]:hover [data-amplify-copy-tooltip] { visibility: visible; font-size: var(--amplify-components-copy-tool-tip-font-size); } [data-amplify-copy-tooltip] { visibility: hidden; position: absolute; bottom: var(--amplify-components-copy-tool-tip-bottom); color: var(--amplify-components-copy-tool-tip-color); } .amplify-accordion { display: block; background-color: var(--amplify-components-accordion-background-color); border-radius: var(--amplify-components-accordion-item-border-radius); } .amplify-accordion__item { display: block; position: relative; border-width: var(--amplify-components-accordion-item-border-width); border-style: var(--amplify-components-accordion-item-border-style); border-color: var(--amplify-components-accordion-item-border-color); } .amplify-accordion__item + .amplify-accordion__item { margin-block-start: calc(-1 * var(--amplify-components-accordion-item-border-width)); } .amplify-accordion__item:where(:first-of-type) { border-start-end-radius: var(--amplify-components-accordion-item-border-radius); border-start-start-radius: var(--amplify-components-accordion-item-border-radius); } .amplify-accordion__item:where(:last-of-type) { border-end-end-radius: var(--amplify-components-accordion-item-border-radius); border-end-start-radius: var(--amplify-components-accordion-item-border-radius); } .amplify-accordion__item__trigger { cursor: pointer; display: flex; position: relative; color: var(--amplify-components-accordion-item-trigger-color); border-radius: var(--amplify-components-accordion-item-border-radius); padding-inline: var(--amplify-components-accordion-item-trigger-padding-inline); padding-block: var(--amplify-components-accordion-item-trigger-padding-block); gap: var(--amplify-components-accordion-item-trigger-gap); align-items: var(--amplify-components-accordion-item-trigger-align-items); justify-content: var(--amplify-components-accordion-item-trigger-justify-content); } .amplify-accordion__item__trigger:hover { background-color: var(--amplify-components-accordion-item-trigger-hover-background-color); color: var(--amplify-components-accordion-item-trigger-hover-color); } .amplify-accordion__item__trigger:focus { box-shadow: var(--amplify-components-accordion-item-trigger-focus-box-shadow); border-color: var(--amplify-components-accordion-item-trigger-focus-border-color); z-index: 2; } .amplify-accordion__item__trigger::-webkit-details-marker { display: none; } .amplify-accordion__item__content { display: block; color: var(--amplify-components-accordion-item-content-color); padding-block-end: var(--amplify-components-accordion-item-content-padding-block-end); padding-block-start: var(--amplify-components-accordion-item-content-padding-block-start); padding-inline: var(--amplify-components-accordion-item-content-padding-inline); } .amplify-accordion__item__icon { color: var(--amplify-components-accordion-item-icon-color); transition-property: transform; transition-duration: var(--amplify-components-accordion-item-icon-transition-duration); transition-timing-function: var(--amplify-components-accordion-item-icon-transition-timing-function); } [open] .amplify-accordion__item__icon { transform: rotate(180deg); } .amplify-alert { align-items: var(--amplify-components-alert-align-items); background-color: var(--amplify-components-alert-background-color); color: var(--amplify-components-alert-color); justify-content: var(--amplify-components-alert-justify-content); padding-block: var(--amplify-components-alert-padding-block); padding-inline: var(--amplify-components-alert-padding-inline); } .amplify-alert--info { color: var(--amplify-components-alert-info-color); background-color: var(--amplify-components-alert-info-background-color); } .amplify-alert--error { color: var(--amplify-components-alert-error-color); background-color: var(--amplify-components-alert-error-background-color); } .amplify-alert--warning { color: var(--amplify-components-alert-warning-color); background-color: var(--amplify-components-alert-warning-background-color); } .amplify-alert--success { color: var(--amplify-components-alert-success-color); background-color: var(--amplify-components-alert-success-background-color); } .amplify-alert__icon { font-size: var(--amplify-components-alert-icon-size); line-height: 1; } .amplify-alert__heading { display: block; font-weight: var(--amplify-components-alert-heading-font-weight); font-size: var(--amplify-components-alert-heading-font-size); } .amplify-alert__body { color: inherit; display: block; } .amplify-alert__dismiss { color: inherit; } .amplify-autocomplete__menu__option, .amplify-autocomplete__menu--loading, .amplify-autocomplete__menu--empty { padding-block: var(--amplify-components-autocomplete-menu-space-shared-padding-block); padding-inline: var(--amplify-components-autocomplete-menu-space-shared-padding-inline); } .amplify-autocomplete { position: relative; display: block; } .amplify-autocomplete__menu { position: absolute; z-index: 999999; width: var(--amplify-components-autocomplete-menu-width); margin-block-start: var(--amplify-components-autocomplete-menu-margin-block-start); background-color: var(--amplify-components-autocomplete-menu-background-color); border-color: var(--amplify-components-autocomplete-menu-border-color); border-width: var(--amplify-components-autocomplete-menu-border-width); border-style: var(--amplify-components-autocomplete-menu-border-style); border-radius: var(--amplify-components-autocomplete-menu-border-radius); } .amplify-autocomplete__menu--empty { display: var(--amplify-components-autocomplete-menu-empty-display); } .amplify-autocomplete__menu--loading { display: var(--amplify-components-autocomplete-menu-loading-display); align-items: var(--amplify-components-autocomplete-menu-loading-align-items); gap: var(--amplify-components-autocomplete-menu-loading-gap); } .amplify-autocomplete__menu__options { position: relative; overscroll-behavior: contain; display: var(--amplify-components-autocomplete-menu-options-display); flex-direction: var(--amplify-components-autocomplete-menu-options-flex-direction); max-height: var(--amplify-components-autocomplete-menu-options-max-height); } .amplify-autocomplete__menu__option { background-color: var(--amplify-components-autocomplete-menu-option-background-color); color: var(--amplify-components-autocomplete-menu-option-color); cursor: var(--amplify-components-autocomplete-menu-option-cursor); transition-duration: var(--amplify-components-autocomplete-menu-option-transition-duration); transition-property: var(--amplify-components-autocomplete-menu-option-transition-property); transition-timing-function: var(--amplify-components-autocomplete-menu-option-transition-timing-function); } .amplify-autocomplete__menu__option--active { background-color: var(--amplify-components-autocomplete-menu-option-active-background-color); color: var(--amplify-components-autocomplete-menu-option-active-color); } /* Center by default */ [data-amplify-authenticator] { display: grid; } [data-amplify-authenticator][data-variation=modal] { overflow-y: auto; width: var(--amplify-components-authenticator-modal-width); height: var(--amplify-components-authenticator-modal-height); background-color: var(--amplify-components-authenticator-modal-background-color); position: fixed; top: var(--amplify-components-authenticator-modal-top); left: var(--amplify-components-authenticator-modal-left); /* Having a z-index at least "wins" by default */ z-index: 1; } [data-amplify-authenticator] [data-amplify-container] { place-self: center; } @media (min-width: 30rem) { [data-amplify-authenticator] [data-amplify-container] { width: var(--amplify-components-authenticator-container-width-max); } } [data-amplify-authenticator] [data-amplify-router] { background-color: var(--amplify-components-authenticator-router-background-color); box-shadow: var(--amplify-components-authenticator-router-box-shadow); border-color: var(--amplify-components-authenticator-router-border-color); border-width: var(--amplify-components-authenticator-router-border-width); border-style: var(--amplify-components-authenticator-router-border-style); } [data-amplify-authenticator] [data-amplify-footer] { padding-bottom: var(--amplify-components-authenticator-footer-padding-bottom); text-align: center; } [data-amplify-authenticator] [data-amplify-form] { padding: var(--amplify-components-authenticator-form-padding); } [data-amplify-authenticator] [data-state=inactive] { background-color: var(--amplify-components-authenticator-state-inactive-background-color); } @media (max-width: 26rem) { [data-amplify-authenticator] [data-amplify-sign-up-errors] { font-size: 0.688rem; } } .amplify-authenticator__column { display: flex; flex-direction: column; } .amplify-authenticator__subtitle { margin-bottom: var(--amplify-space-medium); } .amplify-authenticator__heading { font-size: var(--amplify-font-sizes-xl); } .amplify-authenticator__federated-text { align-self: center; } .amplify-authenticator__federated-buttons { flex-direction: column; padding-block-end: var(--amplify-space-medium); } .amplify-authenticator__federated-button { font-weight: normal; gap: var(--amplify-space-medium); } .amplify-avatar { --avatar-color: var(--amplify-components-avatar-color); --avatar-background-color: var(--amplify-components-avatar-background-color); --avatar-filled-background-color: var(--amplify-components-avatar-color); --avatar-filled-color: var(--amplify-components-avatar-background-color); --avatar-border-color: var(--amplify-components-avatar-border-color); --avatar-size: var(--amplify-components-avatar-width); --amplify-components-icon-height: 100%; position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--avatar-color); background-color: var(--avatar-background-color); font-weight: var(--amplify-components-avatar-font-weight); font-size: var(--amplify-components-avatar-font-size); width: var(--amplify-components-avatar-width); height: var(--amplify-components-avatar-height); overflow: hidden; border-radius: var(--amplify-components-avatar-border-radius); } .amplify-avatar--filled { background-color: var(--avatar-filled-background-color); color: var(--avatar-filled-color); } .amplify-avatar--outlined { border-width: var(--amplify-components-avatar-border-width); border-style: solid; padding: var(--amplify-components-avatar-border-width); border-color: var(--avatar-border-color); background-color: transparent; color: var(--avatar-color); } .amplify-avatar--small { --avatar-size: var(--amplify-components-avatar-small-width); width: var(--amplify-components-avatar-small-width); height: var(--amplify-components-avatar-small-height); font-size: var(--amplify-components-avatar-small-font-size); } .amplify-avatar--large { --avatar-size: var(--amplify-components-avatar-large-width); width: var(--amplify-components-avatar-large-width); height: var(--amplify-components-avatar-large-height); font-size: var(--amplify-components-avatar-large-font-size); } .amplify-avatar--warning { --avatar-border-color: var( --amplify-components-avatar-warning-border-color ); --avatar-background-color: var( --amplify-components-avatar-warning-background-color ); --avatar-color: var(--amplify-components-avatar-warning-color); --avatar-filled-background-color: var( --amplify-components-avatar-warning-color ); --avatar-filled-color: var( --amplify-components-avatar-warning-background-color ); --amplify-components-loader-stroke-filled: var( --amplify-components-avatar-warning-color ); } .amplify-avatar--error { --avatar-border-color: var(--amplify-components-avatar-error-border-color); --avatar-background-color: var( --amplify-components-avatar-error-background-color ); --avatar-color: var(--amplify-components-avatar-error-color); --avatar-filled-background-color: var( --amplify-components-avatar-error-color ); --avatar-filled-color: var( --amplify-components-avatar-error-background-color ); --amplify-components-loader-stroke-filled: var( --amplify-components-avatar-error-color ); } .amplify-avatar--info { --avatar-border-color: var(--amplify-components-avatar-info-border-color); --avatar-background-color: var( --amplify-components-avatar-info-background-color ); --avatar-color: var(--amplify-components-avatar-info-color); --avatar-filled-background-color: var( --amplify-components-avatar-info-color ); --avatar-filled-color: var( --amplify-components-avatar-info-background-color ); --amplify-components-loader-stroke-filled: var( --amplify-components-avatar-info-color ); } .amplify-avatar--success { --avatar-border-color: var( --amplify-components-avatar-success-border-color ); --avatar-background-color: var( --amplify-components-avatar-success-background-color ); --avatar-color: var(--amplify-components-avatar-success-color); --avatar-filled-background-color: var( --amplify-components-avatar-success-color ); --avatar-filled-color: var( --amplify-components-avatar-success-background-color ); --amplify-components-loader-stroke-filled: var( --amplify-components-avatar-success-color ); } .amplify-avatar__icon { display: flex; font-size: calc(var(--avatar-size) * 0.6); } .amplify-avatar__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } .amplify-avatar__loader { position: absolute; inset: 0; width: 100%; height: 100%; stroke: transparent; } .amplify-breadcrumbs__list { display: flex; flex-wrap: var(--amplify-components-breadcrumbs-flex-wrap); flex-direction: var(--amplify-components-breadcrumbs-flex-direction); gap: var(--amplify-components-breadcrumbs-gap); color: var(--amplify-components-breadcrumbs-color); } .amplify-breadcrumbs__item { display: inline-flex; flex-direction: var(--amplify-components-breadcrumbs-item-flex-direction); align-items: var(--amplify-components-breadcrumbs-item-align-items); line-height: var(--amplify-components-breadcrumbs-item-line-height); color: var(--amplify-components-breadcrumbs-item-color); font-size: var(--amplify-components-breadcrumbs-item-font-size); } .amplify-breadcrumbs__separator { color: var(--amplify-components-breadcrumbs-separator-color); font-size: var(--amplify-components-breadcrumbs-separator-font-size); padding-inline: var(--amplify-components-breadcrumbs-separator-padding-inline); } .amplify-breadcrumbs__link { color: var(--amplify-components-breadcrumbs-link-color); font-size: var(--amplify-components-breadcrumbs-link-font-size); font-weight: var(--amplify-components-breadcrumbs-link-font-weight); padding-inline: var(--amplify-components-breadcrumbs-link-padding-inline); padding-block: var(--amplify-components-breadcrumbs-link-padding-block); -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration); text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration); } .amplify-breadcrumbs__link--current { color: var(--amplify-components-breadcrumbs-link-current-color); font-size: var(--amplify-components-breadcrumbs-link-current-font-size); font-weight: var(--amplify-components-breadcrumbs-link-current-font-weight); -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration); text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration); } .amplify-card { background-color: var(--amplify-components-card-background-color); border-radius: var(--amplify-components-card-border-radius); border-width: var(--amplify-components-card-border-width); border-style: var(--amplify-components-card-border-style); border-color: var(--amplify-components-card-border-color); box-shadow: var(--amplify-components-card-box-shadow); display: block; padding: var(--amplify-components-card-padding); } .amplify-card--outlined { background-color: var(--amplify-components-card-outlined-background-color); border-radius: var(--amplify-components-card-outlined-border-radius); border-width: var(--amplify-components-card-outlined-border-width); border-style: var(--amplify-components-card-outlined-border-style); border-color: var(--amplify-components-card-outlined-border-color); box-shadow: var(--amplify-components-card-outlined-box-shadow); } .amplify-card--elevated { background-color: var(--amplify-components-card-elevated-background-color); border-radius: var(--amplify-components-card-elevated-border-radius); border-width: var(--amplify-components-card-elevated-border-width); border-style: var(--amplify-components-card-elevated-border-style); border-color: var(--amplify-components-card-elevated-border-color); box-shadow: var(--amplify-components-card-elevated-box-shadow); } .amplify-collection { flex-direction: column; } .amplify-collection__pagination { justify-content: center; --amplify-components-pagination-current-color: var( --amplify-components-collection-pagination-current-color ); --amplify-components-pagination-current-background-color: var( --amplify-components-collection-pagination-current-background-color ); --amplify-components-pagination-button-color: var( --amplify-components-collection-pagination-button-color ); --amplify-components-pagination-button-hover-color: var( --amplify-components-collection-pagination-button-hover-color ); --amplify-components-pagination-button-hover-background-color: var( --amplify-components-collection-pagination-button-hover-background-color ); --amplify-components-pagination-button-disabled-color: var( --amplify-components-collection-pagination-button-disabled-color ); } .amplify-collection__search { flex-direction: row; justify-content: center; --amplify-components-searchfield-input-color: var( --amplify-components-collection-search-input-color ); --amplify-components-searchfield-button-color: var( --amplify-components-collection-search-button-color ); --amplify-components-searchfield-button-active-background-color: var( --amplify-components-collection-search-button-active-background-color ); --amplify-components-searchfield-button-active-border-color: var( --amplify-components-collection-search-button-active-border-color ); --amplify-components-searchfield-button-active-color: var( --amplify-components-collection-search-button-active-color ); --amplify-components-searchfield-button-disabled-background-color: var( --amplify-components-collection-search-button-disabled-background-color ); --amplify-components-searchfield-button-disabled-border-color: var( --amplify-components-collection-search-button-disabled-border-color ); --amplify-components-searchfield-button-disabled-color: var( --amplify-components-collection-search-button-disabled-color ); --amplify-components-searchfield-button-focus-background-color: var( --amplify-components-collection-search-button-focus-background-color ); --amplify-components-searchfield-button-focus-border-color: var( --amplify-components-collection-search-button-focus-border-color ); --amplify-components-searchfield-button-focus-color: var( --amplify-components-collection-search-button-focus-color ); --amplify-components-searchfield-button-hover-background-color: var( --amplify-components-collection-search-button-hover-background-color ); --amplify-components-searchfield-button-hover-border-color: var( --amplify-components-collection-search-button-hover-border-color ); --amplify-components-searchfield-button-hover-color: var( --amplify-components-collection-search-button-hover-color ); } .amplify-checkbox { cursor: var(--amplify-components-checkbox-cursor); align-items: var(--amplify-components-checkbox-align-items); flex-direction: row-reverse; gap: inherit; position: relative; } .amplify-checkbox--disabled { cursor: var(--amplify-components-checkbox-disabled-cursor); color: var(--amplify-components-checkbox-label-disabled-color); } .amplify-checkbox__button { position: var(--amplify-components-checkbox-button-position); align-items: var(--amplify-components-checkbox-button-align-items); justify-content: var(--amplify-components-checkbox-button-justify-content); color: var(--amplify-components-checkbox-button-color); --amplify-internal-checkbox_button-focused-before-border-color: var( --amplify-components-checkbox-button-focus-border-color ); --amplify-internal-checkbox_button-focused-before-box-shadow: var( --amplify-components-checkbox-button-focus-box-shadow ); } .amplify-checkbox__button::before { content: ""; display: inline-block; position: absolute; box-sizing: border-box; width: var(--amplify-components-checkbox-button-before-width); height: var(--amplify-components-checkbox-button-before-height); border-width: var(--amplify-components-checkbox-button-before-border-width); border-radius: var(--amplify-components-checkbox-button-before-border-radius); border-style: var(--amplify-components-checkbox-button-before-border-style); border-color: var(--amplify-components-checkbox-button-before-border-color); } .amplify-checkbox__button--focused::before { outline-color: var(--amplify-components-checkbox-button-focus-outline-color); outline-style: var(--amplify-components-checkbox-button-focus-outline-style); outline-width: var(--amplify-components-checkbox-button-focus-outline-width); outline-offset: var(--amplify-components-checkbox-button-focus-outline-offset); border-color: var(--amplify-internal-checkbox_button-focused-before-border-color); box-shadow: var(--amplify-internal-checkbox_button-focused-before-box-shadow); } .amplify-checkbox__button--error { --amplify-internal-checkbox_button-focused-before-border-color: var( --amplify-components-checkbox-button-error-focus-border-color ); --amplify-internal-checkbox_button-focused-before-box-shadow: var( --amplify-components-checkbox-button-error-focus-box-shadow ); } .amplify-checkbox__button--error::before { border-color: var(--amplify-components-checkbox-button-error-border-color); } .amplify-checkbox__button--disabled::before { border-color: var(--amplify-components-checkbox-button-disabled-border-color); } .amplify-checkbox__icon { line-height: 1; width: 1em; height: 1em; background-color: var(--amplify-components-checkbox-icon-background-color); opacity: var(--amplify-components-checkbox-icon-opacity); transform: var(--amplify-components-checkbox-icon-transform); border-radius: var(--amplify-components-checkbox-icon-border-radius); transition-property: var(--amplify-components-checkbox-icon-transition-property); transition-duration: var(--amplify-components-checkbox-icon-transition-duration); transition-timing-function: var(--amplify-components-checkbox-icon-transition-timing-function); --amplify-internal-checkbox-icon-disabled-background-color: var( --amplify-components-checkbox-icon-background-color ); } .amplify-checkbox__icon--checked { opacity: var(--amplify-components-checkbox-icon-checked-opacity); transform: var(--amplify-components-checkbox-icon-checked-transform); --amplify-internal-checkbox-icon-disabled-background-color: var( --amplify-components-checkbox-icon-checked-disabled-background-color ); } .amplify-checkbox__icon--indeterminate { opacity: var(--amplify-components-checkbox-icon-indeterminate-opacity); transform: var(--amplify-components-checkbox-icon-indeterminate-transform); --amplify-internal-checkbox-icon-disabled-background-color: var( --amplify-components-checkbox-icon-indeterminate-disabled-background-color ); } .amplify-checkbox__icon--disabled { background-color: var(--amplify-internal-checkbox-icon-disabled-background-color); } .amplify-checkbox__label { color: var(--amplify-components-checkbox-label-color); } .amplify-checkbox__label--disabled { color: var(--amplify-components-checkbox-label-disabled-color); } .amplify-checkboxfield { align-content: var(--amplify-components-checkboxfield-align-content); align-items: var(--amplify-components-checkboxfield-align-items); flex-direction: var(--amplify-components-checkboxfield-flex-direction); justify-content: var(--amplify-components-checkboxfield-justify-content); } .amplify-dialcodeselect { height: var(--amplify-components-countrycodeselect-height); } .amplify-divider { --amplify-internal-divider-size: var( --amplify-components-divider-border-width ); border-color: var(--amplify-components-divider-border-color); border-style: var(--amplify-components-divider-border-style); border-width: 0; opacity: var(--amplify-components-divider-opacity); padding: 0; display: flex; position: relative; text-align: center; justify-content: center; } .amplify-divider::after { content: attr(data-label); position: absolute; transform: translateY(-50%); font-size: var(--amplify-components-divider-label-font-size); padding-inline: var(--amplify-components-divider-label-padding-inline); background-color: var(--amplify-components-divider-label-background-color); color: var(--amplify-components-divider-label-color); } .amplify-divider--small { --amplify-internal-divider-size: var( --amplify-components-divider-small-border-width ); } .amplify-divider--large { --amplify-internal-divider-size: var( --amplify-components-divider-large-border-width ); } .amplify-divider--horizontal { width: 100%; border-bottom-width: var(--amplify-internal-divider-size); } .amplify-divider--vertical { border-left-width: var(--amplify-internal-divider-size); flex-direction: column; } .amplify-divider--vertical::after { top: auto; transform: translateX(-50%); padding-block: 0; padding-inline: 0; } .amplify-field { font-size: var(--amplify-components-field-font-size); gap: var(--amplify-components-field-gap); flex-direction: var(--amplify-components-field-flex-direction); } .amplify-field--small { font-size: var(--amplify-components-field-small-font-size); gap: var(--amplify-components-field-small-gap); } .amplify-field--large { font-size: var(--amplify-components-field-large-font-size); gap: var(--amplify-components-field-large-gap); } .amplify-label { color: var(--amplify-components-field-label-color); } .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start--quiet .amplify-field-group__control, .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input { border-start-start-radius: 0; border-end-start-radius: 0; } @supports not (border-start-start-radius: 0) { .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start--quiet .amplify-field-group__control, .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input { border-top-left-radius: 0; border-bottom-left-radius: 0; } } .amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end--quiet .amplify-field-group__control, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input { border-end-end-radius: 0; border-start-end-radius: 0; } @supports not (border-end-end-radius: 0) { .amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end--quiet .amplify-field-group__control, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input { border-bottom-right-radius: 0; border-top-right-radius: 0; } } .amplify-field-group { gap: var(--amplify-components-fieldgroup-gap); align-self: stretch; } .amplify-field-group--horizontal { flex-direction: row; } .amplify-field-group--vertical { flex-direction: column; align-items: var(--amplify-components-fieldgroup-vertical-align-items); } .amplify-field-group__outer-start, .amplify-field-group__outer-end { display: flex; flex-shrink: 0; align-items: var(--amplify-components-fieldgroup-outer-align-items); } .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group__outer-end .amplify-field-group__control { height: 100%; } /** * Outer field group components */ .amplify-field-group__outer-start .amplify-field-group__control:not(:focus) { border-inline-end-color: transparent; } .amplify-field-group__outer-start .amplify-field-group__control:focus { z-index: 1; } .amplify-field-group__outer-start--quiet .amplify-field-group__control:not(:focus) { border-block-start-color: transparent; border-inline-start-color: transparent; } .amplify-field-group__outer-end .amplify-field-group__control:not(:focus) { border-inline-start-color: transparent; } .amplify-field-group__outer-end .amplify-field-group__control:focus { z-index: 1; } .amplify-field-group__outer-end--quiet .amplify-field-group__control:not(:focus) { border-block-start-color: transparent; border-inline-end-color: transparent; } /** * Inner field group components */ .amplify-field-group__field-wrapper { position: relative; width: 100%; } .amplify-field-group__field-wrapper--vertical { width: -moz-fit-content; width: fit-content; } .amplify-field-group__inner-end, .amplify-field-group__inner-start { position: absolute; top: 0; height: 100%; pointer-events: none; } .amplify-field-group__inner-end .amplify-button, .amplify-field-group__inner-start .amplify-button { pointer-events: all; height: 100%; } .amplify-field-group__inner-end { right: 0; left: auto; } .amplify-field-group__inner-start { right: auto; left: 0; } html[dir=rtl] .amplify-field-group__inner-end { right: auto; left: 0; } html[dir=rtl] .amplify-field-group__inner-start { left: auto; right: 0; } .amplify-field-group--has-inner-end .amplify-input { padding-inline-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3); } .amplify-field-group--has-inner-start .amplify-input { padding-inline-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3); } /** * Inner icon (non-button) component styling requires additional styling */ .amplify-field-group__icon:not(.amplify-field-group__icon-button) { display: flex; padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start); padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-start); flex-direction: column; justify-content: center; height: 100%; } .amplify-fieldset { background-color: var(--amplify-components-fieldset-background-color); border-radius: var(--amplify-components-fieldset-border-radius); flex-direction: var(--amplify-components-fieldset-flex-direction); gap: var(--amplify-components-fieldset-gap); /* Sizes */ /* Variations */ } .amplify-fieldset--small { gap: var(--amplify-components-fieldset-small-gap); } .amplify-fieldset--large { gap: var(--amplify-components-fieldset-large-gap); } .amplify-fieldset--outlined { border: var(--amplify-components-fieldset-outlined-border-width) var(--amplify-components-fieldset-outlined-border-style) var(--amplify-components-fieldset-outlined-border-color); padding: var(--amplify-components-fieldset-outlined-padding); } .amplify-fieldset--outlined.amplify-fieldset--small { padding: var(--amplify-components-fieldset-outlined-small-padding); } .amplify-fieldset--outlined.amplify-fieldset--large { padding: var(--amplify-components-fieldset-outlined-large-padding); } .amplify-fieldset__legend { color: var(--amplify-components-fieldset-legend-color); font-weight: var(--amplify-components-fieldset-legend-font-weight); line-height: var(--amplify-components-fieldset-legend-line-height); font-size: var(--amplify-components-fieldset-legend-font-size); } .amplify-fieldset__legend--small { font-size: var(--amplify-components-fieldset-legend-small-font-size); } .amplify-fieldset__legend--large { font-size: var(--amplify-components-fieldset-legend-large-font-size); } .amplify-liveness-cancel-container { z-index: 2; position: absolute; top: var(--amplify-space-medium); right: var(--amplify-space-medium); } .liveness-detector .amplify-button--primary:focus { box-shadow: unset; outline: var(--amplify-components-button-focus-color) solid 2px; outline-offset: 2px; } .amplify-liveness-cancel-button { background-color: #fff; color: hsl(190, 95%, 30%); } .amplify-liveness-fade-out { animation-name: amplify-liveness-animation-fadeout; animation-duration: 1s; animation-fill-mode: forwards; } @keyframes amplify-liveness-animation-fadeout { from { opacity: 1; } to { opacity: 0; } } .amplify-liveness-camera-module { flex-direction: column; align-items: center; justify-content: center; background-color: var(--amplify-components-liveness-camera-module-background-color); border: 1px solid var(--amplify-colors-neutral-40); position: relative; } .amplify-liveness-camera-module--mobile { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; } .amplify-liveness-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleX(-1); } .amplify-liveness-freshness-canvas { height: 100%; width: 100%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 1; } .amplify-liveness-loader { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .amplify-liveness-oval-canvas { flex-direction: column; position: absolute; top: 0; left: 0; width: 100%; height: 100%; align-items: center; justify-content: center; } .amplify-liveness-oval-canvas--mobile { position: fixed; } .amplify-liveness-video-anchor { position: relative; width: 100%; } .amplify-liveness-recording-icon-container { z-index: 1; position: absolute; top: var(--amplify-space-medium); left: var(--amplify-space-medium); } .amplify-liveness-recording-icon { flex-direction: column; align-items: center; background-color: #fff; padding: var(--amplify-space-xxs); gap: var(--amplify-space-xxs); border-radius: var(--amplify-radii-small); } .amplify-liveness-recording-icon .amplify-text { color: var(--amplify-colors-black); } .amplify-liveness-instruction-overlay { z-index: 2; } .amplify-liveness-countdown-container { background-color: var(--amplify-colors-background-primary); border-radius: 100%; padding: var(--amplify-space-xs); } .amplify-liveness-instruction-list { flex-direction: column; } .amplify-liveness-instruction-list li { display: flex; } .amplify-liveness-toast { background-color: var(--amplify-colors-background-primary); padding: var(--amplify-space-small); max-width: 100%; } .amplify-liveness-toast__message { color: var(--amplify-colors-font-primary); text-align: center; flex-direction: column; } .amplify-liveness-toast--medium { border-radius: var(--amplify-radii-medium); } .amplify-liveness-toast--large { font-size: var(--amplify-font-sizes-xxl); padding: 0 var(--amplify-space-xs); } .amplify-liveness-toast--primary { background-color: var(--amplify-colors-primary-80); } .amplify-liveness-toast--primary .amplify-liveness-toast__message { color: var(--amplify-colors-font-inverse); text-align: center; flex-direction: column; } .amplify-liveness-toast__container { gap: var(--amplify-space-xs); flex-direction: column; align-items: center; } .amplify-liveness-toast--error { background-color: var(--amplify-colors-red-80); } .amplify-liveness-toast--error .amplify-liveness-toast__message { color: var(--amplify-colors-font-inverse); } .amplify-liveness-match-indicator { display: block; width: min(70%, 200px); position: relative; --amplify-liveness-match-indicator-transition: transform 0.2s linear; } .amplify-liveness-match-indicator__bar { --percentage: 0; display: block; width: 100%; height: var(--amplify-space-medium); border-radius: var(--amplify-radii-medium); background: var(--amplify-colors-white); position: relative; overflow: hidden; /* This translateZ transform fixes in issue in Safari where the bar::after element doesn't appear clipped from overflow: hidden here */ transform: translateZ(0); border: 1px solid var(--amplify-colors-border-tertiary); } .amplify-liveness-match-indicator__pin { --percentage: 0; display: block; width: 100%; position: absolute; top: 50%; left: 0; transform: translate(var(--percentage), 0); transition: var(--amplify-liveness-match-indicator-transition); } .amplify-liveness-match-indicator__bar:after { position: absolute; content: ""; width: 100%; height: 100%; background: var(--amplify-colors-primary-80); left: -100%; transform: translate(var(--percentage), 0); transition: var(--amplify-liveness-match-indicator-transition); } .amplify-liveness-match-indicator__pin:after { --height: var(--amplify-space-xl); position: absolute; content: ""; width: var(--amplify-space-small); height: var(--height); border-radius: var(--amplify-radii-medium); background: var(--amplify-colors-primary-80); left: 0; top: 0; transform: translate(-50%, calc(var(--height) / 2 * -1)); } .amplify-liveness-figures { flex-wrap: wrap; } .amplify-liveness-figure { flex-direction: column; gap: 0; } .amplify-liveness-figure__caption { padding: var(--amplify-space-xxs); } .amplify-liveness-figure__caption--success { background-color: var(--amplify-colors-background-success); color: var(--amplify-colors-font-success); } .amplify-liveness-figure__caption--error { background-color: var(--amplify-colors-background-error); color: var(--amplify-colors-font-error); } .amplify-liveness-figure__image { background-color: #fff; border: 1px solid var(--amplify-colors-border-primary); position: relative; display: flex; justify-content: center; } .amplify-liveness-figure__image svg { display: block; } .amplify-liveness-figure__image--success { border-color: var(--amplify-colors-green-90); } .amplify-liveness-figure__image--error { border-color: var(--amplify-colors-border-error); } .amplify-liveness-figure__icon { position: absolute; left: 0; top: 0; } .amplify-liveness-landscape-error-modal { background-color: var(--amplify-colors-background-primary); flex-direction: column; text-align: center; align-items: center; justify-content: center; width: 100%; } .amplify-liveness-landscape-error-modal__header { font-size: large; font-weight: var(--amplify-font-weights-bold); } .amplify-liveness-landscape-error-modal__button { justify-content: center; } .amplify-liveness-start-screen-header { display: flex; flex-direction: column; } .amplify-liveness-start-screen-header__heading { color: var(--amplify-colors-font-primary); font-weight: var(--amplify-font-weights-bold); } .amplify-liveness-start-screen-header__body { color: var(--amplify-colors-font-primary); } .amplify-liveness-start-screen-warning { color: var(--amplify-colors-blue-90); background-color: var(--amplify-colors-blue-10); align-items: center; z-index: 3; } .amplify-liveness-start-screen-instructions__heading { color: var(--amplify-colors-font-primary); font-weight: var(--amplify-font-weights-bold); } .amplify-liveness-overlay-opaque { background-color: var(--amplify-colors-overlay-40); } .amplify-liveness-overlay { flex-direction: column; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: var(--amplify-space-large); } .amplify-liveness-error-modal { gap: var(--amplify-space-xs); align-items: center; justify-content: center; color: var(--amplify-colors-font-error); } .amplify-liveness-error-modal__heading { font-weight: var(--amplify-font-weights-bold); } .amplify-liveness-hint--mobile { margin-top: var(--amplify-space-xxxl); } .amplify-liveness-hint__text { align-items: center; gap: var(--amplify-space-xs); } .amplify-liveness-popover { position: relative; } .amplify-liveness-popover__anchor { position: absolute; top: 26px; left: 20px; z-index: 3; border-style: solid; border-width: 0 9px 9px 9px; border-color: transparent transparent var(--amplify-colors-background-primary) transparent; } .amplify-liveness-popover__anchor-secondary { position: absolute; top: 24px; left: 19px; z-index: 2; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent var(--amplify-colors-border-secondary) transparent; } .amplify-liveness-popover__container { position: absolute; background-color: var(--amplify-colors-background-primary); color: var(--amplify-colors-font-primary); flex-direction: row; font-size: var(--amplify-font-sizes-xs); font-weight: var(--amplify-font-weights-normal); padding: var(--amplify-space-small); top: 33px; width: 240px; border: 1px solid var(--amplify-colors-border-secondary); border-radius: 2px; z-index: 4; } .amplify-liveness-start-screen-camera-select { flex-direction: column; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: var(--amplify-space-xl); align-items: center; justify-content: flex-end; display: flex; z-index: 2; } .amplify-liveness-start-screen-camera-select__container { display: flex; justify-content: space-between; align-items: inherit; gap: var(--amplify-space-xs); } .amplify-liveness-start-screen-camera-select__label, .amplify-liveness-start-screen-camera-select .amplify-select, .amplify-liveness-start-screen-camera-select .amplify-select__wrapper, .amplify-liveness-start-screen-camera-select .amplify-select__icon-wrapper { background-color: var(--amplify-colors-background-primary); color: var(--amplify-colors-font-primary); } .amplify-liveness-start-screen-camera-waiting { flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 480px; } .amplify-menu__wrapper { z-index: 999999; } .amplify-menu__trigger { display: flex; justify-content: center; align-items: center; } .amplify-menu__content { background-color: var(--amplify-components-menu-background-color); border-radius: var(--amplify-components-menu-border-radius); box-shadow: var(--amplify-components-menu-box-shadow); flex-direction: var(--amplify-components-menu-flex-direction); gap: var(--amplify-components-menu-gap); min-width: var(--amplify-components-menu-min-width); max-width: var(--amplify-components-menu-max-width); border-color: var(--amplify-components-menu-border-color); border-width: var(--amplify-components-menu-border-width); border-style: var(--amplify-components-menu-border-style); } .amplify-menu__content__item { min-height: var(--amplify-components-menu-item-min-height); padding-inline-start: var(--amplify-components-menu-item-padding-inline-start); padding-inline-end: var(--amplify-components-menu-item-padding-inline-end); } .amplify-menu__content__item:not(:first-child):not(:last-child) { border-radius: 0; } .amplify-menu__content__item:first-child { border-end-end-radius: 0; border-end-start-radius: 0; } @supports not (border-end-end-radius: 0) { .amplify-menu__content__item:first-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } } .amplify-menu__content__item:last-child { border-start-end-radius: 0; border-start-start-radius: 0; } @supports not (border-end-end-radius: 0) { .amplify-menu__content__item:last-child { border-top-right-radius: 0; border-top-left-radius: 0; } } .amplify-message { align-items: var(--amplify-components-message-align-items); background-color: var(--amplify-components-message-background-color); color: var(--amplify-components-message-color); justify-content: var(--amplify-components-message-justify-content); padding-block: var(--amplify-components-message-padding-block); padding-inline: var(--amplify-components-message-padding-inline); border-color: var(--amplify-components-message-border-color); border-radius: var(--amplify-components-message-border-radius); border-style: var(--amplify-components-message-border-style); border-width: var(--amplify-components-message-border-width); line-height: var(--amplify-components-message-line-height); } .amplify-message--plain { background-color: var(--amplify-components-message-plain-background-color); border-color: var(--amplify-components-message-plain-border-color); color: var(--amplify-components-message-plain-color); } .amplify-message--plain.amplify-message--info { background-color: var(--amplify-components-message-plain-info-background-color); border-color: var(--amplify-components-message-plain-info-border-color); color: var(--amplify-components-message-plain-info-color); } .amplify-message--plain.amplify-message--error { background-color: var(--amplify-components-message-plain-error-background-color); border-color: var(--amplify-components-message-plain-error-border-color); color: var(--amplify-components-message-plain-error-color); } .amplify-message--plain.amplify-message--warning { background-color: var(--amplify-components-message-plain-warning-background-color); border-color: var(--amplify-components-message-plain-warning-border-color); color: var(--amplify-components-message-plain-warning-color); } .amplify-message--plain.amplify-message--success { background-color: var(--amplify-components-message-plain-success-background-color); border-color: var(--amplify-components-message-plain-success-border-color); color: var(--amplify-components-message-plain-success-color); } .amplify-message--outlined { background-color: var(--amplify-components-message-outlined-background-color); border-color: var(--amplify-components-message-outlined-border-color); color: var(--amplify-components-message-outlined-color); } .amplify-message--outlined.amplify-message--info { background-color: var(--amplify-components-message-outlined-info-background-color); border-color: var(--amplify-components-message-outlined-info-border-color); color: var(--amplify-components-message-outlined-info-color); } .amplify-message--outlined.amplify-message--error { background-color: var(--amplify-components-message-outlined-error-background-color); border-color: var(--amplify-components-message-outlined-error-border-color); color: var(--amplify-components-message-outlined-error-color); } .amplify-message--outlined.amplify-message--warning { background-color: var(--amplify-components-message-outlined-warning-background-color); border-color: var(--amplify-components-message-outlined-warning-border-color); color: var(--amplify-components-message-outlined-warning-color); } .amplify-message--outlined.amplify-message--success { background-color: var(--amplify-components-message-outlined-success-background-color); border-color: var(--amplify-components-message-outlined-success-border-color); color: var(--amplify-components-message-outlined-success-color); } .amplify-message--filled { background-color: var(--amplify-components-message-filled-background-color); border-color: var(--amplify-components-message-filled-border-color); color: var(--amplify-components-message-filled-color); } .amplify-message--filled.amplify-message--info { background-color: var(--amplify-components-message-filled-info-background-color); border-color: var(--amplify-components-message-filled-info-border-color); color: var(--amplify-components-message-filled-info-color); } .amplify-message--filled.amplify-message--error { background-color: var(--amplify-components-message-filled-error-background-color); border-color: var(--amplify-components-message-filled-error-border-color); color: var(--amplify-components-message-filled-error-color); } .amplify-message--filled.amplify-message--warning { background-color: var(--amplify-components-message-filled-warning-background-color); border-color: var(--amplify-components-message-filled-warning-border-color); color: var(--amplify-components-message-filled-warning-color); } .amplify-message--filled.amplify-message--success { background-color: var(--amplify-components-message-filled-success-background-color); border-color: var(--amplify-components-message-filled-success-border-color); color: var(--amplify-components-message-filled-success-color); } .amplify-message__icon { font-size: var(--amplify-components-message-icon-size); } .amplify-message__icon > * { display: block; } .amplify-message__heading { font-weight: var(--amplify-components-message-heading-font-weight); font-size: var(--amplify-components-message-heading-font-size); } .amplify-message__content { flex: 1; flex-direction: column; gap: var(--amplify-space-xxxs); } .amplify-message__dismiss { margin-inline-start: auto; gap: var(--amplify-components-message-dismiss-gap); } .amplify-pagination { list-style-type: none; } .amplify-pagination__item { height: var(--amplify-components-pagination-item-shared-height); min-width: var(--amplify-components-pagination-item-shared-min-width); border-radius: var(--amplify-components-pagination-item-shared-border-radius); display: flex; align-items: center; justify-content: center; font-weight: initial; color: var(--amplify-components-pagination-button-color); margin-inline-start: var(--amplify-components-pagination-item-container-margin-left); margin-inline-end: var(--amplify-components-pagination-item-container-margin-right); padding-inline-start: var(--amplify-components-pagination-button-padding-inline-start); padding-inline-end: var(--amplify-components-pagination-button-padding-inline-end); transition-property: var(--amplify-components-pagination-button-transition-property); transition-duration: var(--amplify-components-pagination-button-transition-duration); } .amplify-pagination__item:hover { text-decoration: none; color: var(--amplify-components-pagination-button-hover-color); background-color: var(--amplify-components-pagination-button-hover-background-color); } .amplify-pagination__item--disabled { color: var(--amplify-components-pagination-button-disabled-color); pointer-events: none; } .amplify-pagination__item--current { align-items: var(--amplify-components-pagination-current-align-items); justify-content: var(--amplify-components-pagination-current-justify-content); color: var(--amplify-components-pagination-current-color); font-size: var(--amplify-components-pagination-current-font-size); background-color: var(--amplify-components-pagination-current-background-color); } .amplify-pagination__item--ellipsis { align-items: var(--amplify-components-pagination-ellipsis-align-items); justify-content: var(--amplify-components-pagination-ellipsis-justify-content); padding-inline-start: var(--amplify-components-pagination-ellipsis-padding-inline-start); padding-inline-end: var(--amplify-components-pagination-ellipsis-padding-inline-end); } .amplify-passwordfield { --amplify-components-fieldcontrol-color: var( --amplify-components-passwordfield-color ); --amplify-components-button-color: var( --amplify-components-passwordfield-button-color ); --amplify-components-button-active-background-color: var( --amplify-components-passwordfield-button-active-background-color ); --amplify-components-button-active-border-color: var( --amplify-components-passwordfield-button-active-border-color ); --amplify-components-button-active-color: var( --amplify-components-passwordfield-button-active-color ); --amplify-components-button-disabled-background-color: var( --amplify-components-passwordfield-button-disabled-background-color ); --amplify-components-button-disabled-border-color: var( --amplify-components-passwordfield-button-disabled-border-color ); --amplify-components-button-disabled-color: var( --amplify-components-passwordfield-button-disabled-color ); --amplify-components-button-focus-background-color: var( --amplify-components-passwordfield-button-focus-background-color ); --amplify-components-button-focus-border-color: var( --amplify-components-passwordfield-button-focus-border-color ); --amplify-components-button-focus-color: var( --amplify-components-passwordfield-button-focus-color ); --amplify-components-button-hover-background-color: var( --amplify-components-passwordfield-button-hover-background-color ); --amplify-components-button-hover-border-color: var( --amplify-components-passwordfield-button-hover-border-color ); --amplify-components-button-hover-color: var( --amplify-components-passwordfield-button-hover-color ); --amplify-components-button-outlined-error-color: var( --amplify-components-passwordfield-button-error-color ); --amplify-components-button-outlined-error-border-color: var( --amplify-components-passwordfield-button-error-border-color ); --amplify-components-button-outlined-error-background-color: var( --amplify-components-passwordfield-button-error-background-color ); --amplify-components-button-outlined-error-active-color: var( --amplify-components-passwordfield-button-error-active-color ); --amplify-components-button-outlined-error-active-border-color: var( --amplify-components-passwordfield-button-error-active-border-color ); --amplify-components-button-outlined-error-active-background-color: var( --amplify-components-passwordfield-button-error-active-background-color ); --amplify-components-button-outlined-error-hover-color: var( --amplify-components-passwordfield-button-error-hover-color ); --amplify-components-button-outlined-error-hover-border-color: var( --amplify-components-passwordfield-button-error-hover-border-color ); --amplify-components-button-outlined-error-hover-background-color: var( --amplify-components-passwordfield-button-error-hover-background-color ); --amplify-components-button-outlined-error-focus-color: var( --amplify-components-passwordfield-button-error-focus-color ); --amplify-components-button-outlined-error-focus-box-shadow: var( --amplify-components-passwordfield-button-error-focus-box-shadow ); --amplify-components-button-outlined-error-focus-border-color: var( --amplify-components-passwordfield-button-error-focus-border-color ); --amplify-components-button-outlined-error-focus-background-color: var( --amplify-components-passwordfield-button-error-focus-background-color ); } .amplify-phonenumberfield select:not(:focus) { border-right: none; } .amplify-phonenumberfield { --amplify-components-selectfield-color: var( --amplify-components-phonenumberfield-color ); --amplify-components-selectfield-border-color: var( --amplify-components-phonenumberfield-border-color ); --amplify-components-selectfield-font-size: var( --amplify-components-phonenumberfield-font-size ); --amplify-components-selectfield-focus-border-color: var( --amplify-components-phonenumberfield-focus-border-color ); --amplify-components-textfield-color: var( --amplify-components-phonenumberfield-color ); --amplify-components-textfield-border-color: var( --amplify-components-phonenumberfield-border-color ); --amplify-components-textfield-font-size: var( --amplify-components-phonenumberfield-font-size ); --amplify-components-textfield-focus-border-color: var( --amplify-components-phonenumberfield-focus-border-color ); } .amplify-rating { display: flex; position: relative; text-align: left; font-size: var(--amplify-components-rating-default-size); line-height: var(--amplify-components-rating-default-size); } .amplify-rating--small { font-size: var(--amplify-components-rating-small-size); line-height: var(--amplify-components-rating-small-size); } .amplify-rating--large { font-size: var(--amplify-components-rating-large-size); line-height: var(--amplify-components-rating-large-size); } .amplify-rating__item { position: relative; height: 1em; width: 1em; } .amplify-rating__icon { width: 1em; height: 1em; display: block; position: absolute; overflow: hidden; } .amplify-rating__icon--filled { color: var(--amplify-components-rating-filled-color); } .amplify-rating__icon--empty { color: var(--amplify-components-rating-empty-color); } .amplify-radio { align-items: var(--amplify-components-radio-align-items); justify-content: var(--amplify-components-radio-justify-content); gap: inherit; flex-direction: row-reverse; position: relative; } .amplify-radio--disabled { cursor: var(--amplify-components-radio-disabled-cursor); } .amplify-radio__button { flex-shrink: 0; align-items: var(--amplify-components-radio-button-align-items); justify-content: var(--amplify-components-radio-button-justify-content); padding: var(--amplify-components-radio-button-padding); box-sizing: var(--amplify-components-radio-button-box-sizing); border-width: var(--amplify-components-radio-button-border-width); border-style: var(--amplify-components-radio-button-border-style); border-radius: var(--amplify-components-radio-button-border-radius); border-color: var(--amplify-components-radio-button-border-color); color: var(--amplify-components-radio-button-color); background-color: var(--amplify-components-radio-button-background-color); transition-property: var(--amplify-components-radio-button-transition-property); transition-duration: var(--amplify-components-radio-button-transition-duration); width: var(--amplify-components-radio-button-width); height: var(--amplify-components-radio-button-height); outline-color: var(--amplify-components-radio-button-outline-color); outline-style: var(--amplify-components-radio-button-outline-style); outline-width: var(--amplify-components-radio-button-outline-width); outline-offset: var(--amplify-components-radio-button-outline-offset); } .amplify-radio__button::before { content: ""; display: inline-block; width: 100%; height: 100%; border-radius: var(--amplify-components-radio-button-before-border-radius); background-color: currentColor; border-radius: 50%; } .amplify-radio__button--small { width: var(--amplify-components-radio-button-small-width); height: var(--amplify-components-radio-button-small-height); } .amplify-radio__button--large { width: var(--amplify-components-radio-button-large-width); height: var(--amplify-components-radio-button-large-height); } .amplify-radio__input:checked + .amplify-radio__button { color: var(--amplify-components-radio-button-checked-color); } .amplify-radio__input:checked:disabled + .amplify-radio__button { color: var(--amplify-components-radio-button-checked-disabled-color); } .amplify-radio__input:focus + .amplify-radio__button { border-color: var(--amplify-components-radio-button-focus-border-color); box-shadow: var(--amplify-components-radio-button-focus-box-shadow); } .amplify-radio__input[aria-invalid=true] + .amplify-radio__button { border-color: var(--amplify-components-radio-button-error-border-color); } .amplify-radio__input[aria-invalid=true]:focus + .amplify-radio__button { box-shadow: var(--amplify-components-radio-button-error-focus-box-shadow); } .amplify-radio__input:disabled + .amplify-radio__button { border-color: var(--amplify-components-radio-button-disabled-border-color); background-color: var(--amplify-components-radio-button-disabled-background-color); } .amplify-radio__label { color: var(--amplify-components-radio-label-color); } .amplify-radio__label--disabled { color: var(--amplify-components-radio-label-disabled-color); } .amplify-radiogroup { gap: inherit; flex-direction: inherit; align-items: inherit; } .amplify-radiogroupfield { flex-direction: column; align-items: flex-start; --amplify-components-fieldset-legend-color: var( --amplify-components-radiogroup-legend-color ); --amplify-components-fieldset-legend-font-weight: var( --amplify-components-radiogroup-legend-font-weight ); --amplify-components-radio-button-border-width: var( --amplify-components-radiogroup-radio-border-width ); --amplify-components-radio-button-border-color: var( --amplify-components-radiogroup-radio-border-color ); --amplify-components-radio-button-background-color: var( --amplify-components-radiogroup-radio-background-color ); --amplify-components-radio-label-color: var( --amplify-components-radiogroup-radio-label-color ); --amplify-components-radio-button-checked-color: var( --amplify-components-radiogroup-radio-checked-color ); } .amplify-searchfield { --amplify-components-fieldcontrol-color: var( --amplify-components-searchfield-input-color ); } .amplify-searchfield__search { color: var(--amplify-components-searchfield-button-color); background-color: var(--amplify-components-searchfield-button-background-color); } .amplify-searchfield__search:active { background-color: var(--amplify-components-button-active-background-color); border-color: var(--amplify-components-button-active-border-color); color: var(--amplify-components-button-active-color); } .amplify-searchfield__search:focus { background-color: var(--amplify-components-searchfield-button-focus-background-color); border-color: var(--amplify-components-searchfield-button-focus-border-color); color: var(--amplify-components-searchfield-button-focus-color); } .amplify-searchfield__search:hover { background-color: var(--amplify-components-searchfield-button-hover-background-color); border-color: var(--amplify-components-searchfield-button-hover-border-color); color: var(--amplify-components-searchfield-button-hover-color); } .amplify-searchfield__search:disabled { background-color: var(--amplify-components-searchfield-button-disabled-background-color); border-color: var(--amplify-components-searchfield-button-disabled-border-color); color: var(--amplify-components-searchfield-button-disabled-color); } .amplify-select__wrapper { flex: var(--amplify-components-select-wrapper-flex); display: var(--amplify-components-select-wrapper-display); position: var(--amplify-components-select-wrapper-position); cursor: var(--amplify-components-select-wrapper-cursor); align-self: stretch; } .amplify-select__icon { color: var(--amplify-components-fieldcontrol-color); align-items: var(--amplify-components-select-icon-wrapper-align-items); position: var(--amplify-components-select-icon-wrapper-position); top: var(--amplify-components-select-icon-wrapper-top); right: var(--amplify-components-select-icon-wrapper-right); transform: var(--amplify-components-select-icon-wrapper-transform); pointer-events: var(--amplify-components-select-icon-wrapper-pointer-events); } .amplify-select__icon--small { right: var(--amplify-components-select-icon-wrapper-small-right); } .amplify-select__icon--large { right: var(--amplify-components-select-icon-wrapper-large-right); } .amplify-select { box-sizing: border-box; color: var(--amplify-components-fieldcontrol-color); font-size: var(--amplify-components-fieldcontrol-font-size); line-height: var(--amplify-components-fieldcontrol-line-height); padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start); padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end); padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start); padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end); transition: all var(--amplify-components-fieldcontrol-transition-duration); width: 100%; border-color: var(--amplify-components-fieldcontrol-border-color); border-radius: var(--amplify-components-fieldcontrol-border-radius); border-style: var(--amplify-components-fieldcontrol-border-style); border-width: var(--amplify-components-fieldcontrol-border-width); outline-color: var(--amplify-components-fieldcontrol-outline-color); outline-style: var(--amplify-components-fieldcontrol-outline-style); outline-width: var(--amplify-components-fieldcontrol-outline-width); outline-offset: var(--amplify-components-fieldcontrol-outline-offset); background-color: var(--amplify-components-select-background-color); color: var(--amplify-components-select-color); min-width: var(--amplify-components-select-min-width); padding-inline-end: var(--amplify-components-select-padding-inline-end); white-space: var(--amplify-components-select-white-space); } .amplify-select:focus { border-color: var(--amplify-components-fieldcontrol-focus-border-color); box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); } .amplify-select--small { font-size: var(--amplify-components-fieldcontrol-small-font-size); padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start); padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end); padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start); padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end); } .amplify-select--large { font-size: var(--amplify-components-fieldcontrol-large-font-size); padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start); padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end); padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start); padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end); } .amplify-select--error { border-color: var(--amplify-components-fieldcontrol-error-border-color); } .amplify-select--error:focus { border-color: var(--amplify-components-fieldcontrol-error-border-color); box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); } .amplify-select--quiet { border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start); border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start); border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end); border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius); } .amplify-select--quiet:focus { border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color); box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow); } .amplify-select--quiet[aria-invalid=true] { border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color); } .amplify-select--quiet[aria-invalid=true]:focus { border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color); box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow); } .amplify-select[disabled] { color: var(--amplify-components-fieldcontrol-disabled-color); cursor: var(--amplify-components-fieldcontrol-disabled-cursor); border-color: var(--amplify-components-fieldcontrol-disabled-border-color); background-color: var(--amplify-components-fieldcontrol-disabled-background-color); } .amplify-select option { background-color: var(--amplify-components-select-option-background-color); color: var(--amplify-components-select-option-color); } .amplify-select option[disabled=""] { background-color: var(--amplify-components-select-option-disabled-background-color); color: var(--amplify-components-select-option-disabled-color); cursor: var(--amplify-components-fieldcontrol-disabled-cursor); } .amplify-select[disabled] { background-color: var(--amplify-components-select-disabled-background-color); color: var(--amplify-components-select-disabled-color); } .amplify-select[disabled] option { color: inherit; background-color: inherit; } .amplify-select--small { min-width: var(--amplify-components-select-small-min-width); padding-inline-end: var(--amplify-components-select-small-padding-inline-end); } .amplify-select--large { min-width: var(--amplify-components-select-large-min-width); padding-inline-end: var(--amplify-components-select-large-padding-inline-end); } .amplify-select--expanded { overflow: auto; padding: var(--amplify-components-select-expanded-padding-block) var(--amplify-components-select-expanded-padding-inline); } .amplify-select--expanded option { padding: var(--amplify-components-select-expanded-option-padding-block) var(--amplify-components-select-expanded-option-padding-inline); } .amplify-selectfield { flex-direction: var(--amplify-components-selectfield-flex-direction); --amplify-components-fieldcontrol-border-color: var( --amplify-components-selectfield-border-color ); --amplify-components-fieldcontrol-color: var( --amplify-components-selectfield-color ); --amplify-components-fieldcontrol-font-size: var( --amplify-components-selectfield-font-size ); --amplify-components-fieldcontrol-focus-border-color: var( --amplify-components-selectfield-focus-border-color ); --amplify-components-field-label-color: var( --amplify-components-selectfield-label-color ); } .amplify-sliderfield { flex-direction: column; } .amplify-sliderfield__label { display: flex; justify-content: space-between; } .amplify-sliderfield__root { align-items: center; box-sizing: content-box; display: flex; padding-block: var(--amplify-components-sliderfield-padding-block); position: relative; touch-action: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; --amplify-internal-sliderfield-root-height: var( --amplify-components-sliderfield-thumb-height ); --amplify-internal-sliderfield-root-width: var( --amplify-components-sliderfield-thumb-height ); } .amplify-sliderfield__root--disabled { cursor: not-allowed; } .amplify-sliderfield__root--horizontal { height: var(--amplify-internal-sliderfield-root-height); } .amplify-sliderfield__root--vertical { flex-direction: column; width: var(--amplify-internal-sliderfield-root-width); } .amplify-sliderfield__root--large { --amplify-internal-sliderfield-root-height: var( --amplify-components-sliderfield-large-thumb-height ); --amplify-internal-sliderfield-root-width: var( --amplify-components-sliderfield-large-thumb-height ); } .amplify-sliderfield__root--small { --amplify-internal-sliderfield-root-height: var( --amplify-components-sliderfield-small-thumb-height ); --amplify-internal-sliderfield-root-width: var( --amplify-components-sliderfield-small-thumb-height ); } .amplify-sliderfield__track { position: relative; flex-grow: 1; border-radius: var(--amplify-components-sliderfield-track-border-radius); background-color: var(--amplify-components-sliderfield-track-background-color); --amplify-internal-sliderfield-track-height: var( --amplify-components-sliderfield-track-height ); --amplify-internal-sliderfield-track-min-width: var( --amplify-components-sliderfield-track-min-width ); --amplify-internal-sliderfield-track-width: var( --amplify-components-sliderfield-track-height ); --amplify-internal-sliderfield-track-min-height: var( --amplify-components-sliderfield-track-min-width ); } .amplify-sliderfield__track--horizontal { height: var(--amplify-internal-sliderfield-track-height); min-width: var(--amplify-internal-sliderfield-track-min-width); } .amplify-sliderfield__track--vertical { width: var(--amplify-internal-sliderfield-track-width); min-height: var(--amplify-internal-sliderfield-track-min-height); } .amplify-sliderfield__track--large { --amplify-internal-sliderfield-track-height: var( --amplify-components-sliderfield-large-track-height ); --amplify-internal-sliderfield-track-width: var( --amplify-components-sliderfield-large-track-height ); } .amplify-sliderfield__track--small { --amplify-internal-sliderfield-track-height: var( --amplify-components-sliderfield-small-track-height ); --amplify-internal-sliderfield-track-width: var( --amplify-components-sliderfield-small-track-height ); } .amplify-sliderfield__range { position: absolute; border-radius: var(--amplify-components-sliderfield-range-border-radius); background-color: var(--amplify-components-sliderfield-range-background-color); } .amplify-sliderfield__range--disabled { background-color: var(--amplify-components-sliderfield-range-disabled-background-color); } .amplify-sliderfield__range--horizontal { height: 100%; } .amplify-sliderfield__range--vertical { width: 100%; } .amplify-sliderfield__thumb { display: block; width: var(--amplify-components-sliderfield-thumb-width); height: var(--amplify-components-sliderfield-thumb-height); background-color: var(--amplify-components-sliderfield-thumb-background-color); box-shadow: var(--amplify-components-sliderfield-thumb-box-shadow); border-radius: var(--amplify-components-sliderfield-thumb-border-radius); border-width: var(--amplify-components-sliderfield-thumb-border-width); border-color: var(--amplify-components-sliderfield-thumb-border-color); border-style: var(--amplify-components-sliderfield-thumb-border-style); } .amplify-sliderfield__thumb:hover { background-color: var(--amplify-components-sliderfield-thumb-hover-background-color); border-color: var(--amplify-components-sliderfield-thumb-hover-border-color); } .amplify-sliderfield__thumb:focus { border-color: var(--amplify-components-sliderfield-thumb-focus-border-color); box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow); } .amplify-sliderfield__thumb--disabled { background-color: var(--amplify-components-sliderfield-thumb-disabled-background-color); border-color: var(--amplify-components-sliderfield-thumb-disabled-border-color); box-shadow: var(--amplify-components-sliderfield-thumb-disabled-box-shadow); } .amplify-sliderfield__thumb--large { width: var(--amplify-components-sliderfield-large-thumb-width); height: var(--amplify-components-sliderfield-large-thumb-height); } .amplify-sliderfield__thumb--small { width: var(--amplify-components-sliderfield-small-thumb-width); height: var(--amplify-components-sliderfield-small-thumb-height); } .amplify-stepperfield { flex-direction: var(--amplify-components-stepperfield-flex-direction); --amplify-components-fieldcontrol-border-color: var( --amplify-components-stepperfield-border-color ); --amplify-components-button-border-color: var( --amplify-components-stepperfield-border-color ); --amplify-components-fieldcontrol-color: var( --amplify-components-stepperfield-input-color ); --amplify-components-fieldcontrol-font-size: var( --amplify-components-stepperfield-input-font-size ); --amplify-components-button-color: var( --amplify-components-stepperfield-button-color ); --amplify-components-button-active-color: var( --amplify-components-stepperfield-button-active-color ); --amplify-components-button-active-background-color: var( --amplify-components-stepperfield-button-active-background-color ); --amplify-components-button-focus-color: var( --amplify-components-stepperfield-button-focus-color ); --amplify-components-button-focus-background-color: var( --amplify-components-stepperfield-button-focus-background-color ); --amplify-components-button-disabled-color: var( --amplify-components-stepperfield-button-disabled-color ); --amplify-components-button-disabled-background-color: var( --amplify-components-stepperfield-button-disabled-background-color ); --amplify-components-button-hover-color: var( --amplify-components-stepperfield-button-hover-color ); --amplify-components-button-hover-background-color: var( --amplify-components-stepperfield-button-hover-background-color ); } .amplify-stepperfield__button--decrease, .amplify-stepperfield__button--increase { background-color: var(--amplify-components-stepperfield-button-background-color); } .amplify-stepperfield__button--decrease--disabled, .amplify-stepperfield__button--increase--disabled { background-color: var(--amplify-components-stepperfield-button-disabled-background-color); } .amplify-stepperfield__button--decrease--quiet, .amplify-stepperfield__button--increase--quiet { border-width: 0 0 var(--amplify-components-button-border-width) 0; border-radius: 0; } .amplify-stepperfield__button--decrease[data-invalid=true] { border-inline-end: none; } .amplify-stepperfield__button--increase[data-invalid=true] { border-inline-start: none; } .amplify-stepperfield__input { -moz-appearance: textfield; text-align: var(--amplify-components-stepperfield-input-text-align); } .amplify-stepperfield__input::-webkit-outer-spin-button, .amplify-stepperfield__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .amplify-stepperfield__input:not(:focus, [aria-invalid=true]) { border-inline-start: none; border-inline-end: none; } .amplify-switchfield { display: inline-block; font-size: var(--amplify-components-switchfield-font-size); cursor: pointer; } .amplify-switchfield--small { font-size: var(--amplify-components-switchfield-small-font-size); } .amplify-switchfield--large { font-size: var(--amplify-components-switchfield-large-font-size); } .amplify-switch__wrapper { display: inline-flex; align-items: center; } .amplify-switch__wrapper--start { flex-direction: row; } .amplify-switch__wrapper--end { flex-direction: row-reverse; } .amplify-switch__wrapper--top { flex-direction: column; } .amplify-switch__wrapper--bottom { flex-direction: column-reverse; } .amplify-switch__track { display: inline-flex; justify-content: flex-start; box-sizing: content-box; border-radius: var(--amplify-components-switchfield-track-border-radius); padding: var(--amplify-components-switchfield-track-padding); width: var(--amplify-components-switchfield-track-width); height: var(--amplify-components-switchfield-track-height); transition-duration: var(--amplify-components-switchfield-track-transition-duration); background-color: var(--amplify-components-switchfield-track-background-color); } .amplify-switch__track--checked { background-color: var(--amplify-components-switchfield-track-checked-background-color); } .amplify-switch__track--disabled { opacity: var(--amplify-components-switchfield-disabled-opacity); cursor: not-allowed; } .amplify-switch__track--focused { box-shadow: var(--amplify-components-switchfield-focused-shadow); } .amplify-switch__track--error { background-color: var(--amplify-components-switchfield-track-error-background-color); } .amplify-switch__thumb { background-color: var(--amplify-components-switchfield-thumb-background-color); transition-duration: var(--amplify-components-switchfield-thumb-transition-duration); border-radius: var(--amplify-components-switchfield-thumb-border-radius); width: var(--amplify-components-switchfield-thumb-width); height: var(--amplify-components-switchfield-thumb-width); border-width: var(--amplify-components-switchfield-thumb-border-width); border-style: var(--amplify-components-switchfield-thumb-border-style); border-color: var(--amplify-components-switchfield-thumb-border-color); overflow-wrap: break-word; } .amplify-switch__thumb--checked { transform: var(--amplify-components-switchfield-thumb-checked-transform); } .amplify-switch__thumb--disabled { cursor: not-allowed; } .amplify-switch__label { padding: var(--amplify-components-switchfield-label-padding); cursor: pointer; } .amplify-table { /** * Default Table primitive stylings */ border-collapse: var(--amplify-components-table-border-collapse); display: var(--amplify-components-table-display); width: var(--amplify-components-table-width); --amplify-internal-table-caption-font-size: var( --amplify-components-table-caption-font-size ); --amplify-internal-table-th-font-size: var( --amplify-components-table-header-font-size ); --amplify-internal-table-th-padding: var( --amplify-components-table-header-padding ); --amplify-internal-table-td-font-size: var( --amplify-components-table-data-font-size ); --amplify-internal-table-td-padding: var( --amplify-components-table-data-padding ); --amplify-internal-table-td-border-width: var( --amplify-components-table-data-border-width ) 0px var(--amplify-components-table-data-border-width) 0px; --amplify-internal-table-th-border-width: var( --amplify-components-table-header-border-width ) 0px var(--amplify-components-table-header-border-width) 0px; /** * Data attribute stylings */ } .amplify-table--small { --amplify-internal-table-caption-font-size: var( --amplify-components-table-caption-small-font-size ); --amplify-internal-table-th-font-size: var( --amplify-components-table-header-small-font-size ); --amplify-internal-table-th-padding: var( --amplify-components-table-header-small-padding ); --amplify-internal-table-td-font-size: var( --amplify-components-table-data-small-font-size ); --amplify-internal-table-td-padding: var( --amplify-components-table-data-small-padding ); } .amplify-table--large { --amplify-internal-table-caption-font-size: var( --amplify-components-table-caption-large-font-size ); --amplify-internal-table-th-font-size: var( --amplify-components-table-header-large-font-size ); --amplify-internal-table-th-padding: var( --amplify-components-table-header-large-padding ); --amplify-internal-table-td-font-size: var( --amplify-components-table-data-large-font-size ); --amplify-internal-table-td-padding: var( --amplify-components-table-data-large-padding ); } .amplify-table--bordered { --amplify-internal-table-td-border-width: var( --amplify-components-table-data-border-width ) var(--amplify-components-table-data-border-width) var(--amplify-components-table-data-border-width) var(--amplify-components-table-data-border-width); --amplify-internal-table-th-border-width: var( --amplify-components-table-header-border-width ) var(--amplify-components-table-header-border-width) var(--amplify-components-table-header-border-width) var(--amplify-components-table-header-border-width); } .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) { background-color: var(--amplify-components-table-row-striped-background-color); } .amplify-table__caption { caption-side: var(--amplify-components-table-caption-caption-side); color: var(--amplify-components-table-caption-color); display: var(--amplify-components-table-caption-display); font-size: var(--amplify-internal-table-caption-font-size); text-align: var(--amplify-components-table-caption-text-align); word-break: var(--amplify-components-table-caption-word-break); } .amplify-table__head { display: var(--amplify-components-table-head-display); vertical-align: var(--amplify-components-table-head-vertical-align); } .amplify-table__body { display: var(--amplify-components-table-body-display); vertical-align: var(--amplify-components-table-body-vertical-align); } .amplify-table__foot { display: var(--amplify-components-table-foot-display); vertical-align: var(--amplify-components-table-foot-vertical-align); } .amplify-table__row { display: var(--amplify-components-table-row-display); vertical-align: var(--amplify-components-table-row-vertical-align); } .amplify-table__th { border-color: var(--amplify-components-table-header-border-color); border-style: var(--amplify-components-table-header-border-style); border-width: var(--amplify-internal-table-th-border-width); color: var(--amplify-components-table-header-color); display: var(--amplify-components-table-header-display); font-size: var(--amplify-internal-table-th-font-size); font-weight: var(--amplify-components-table-header-font-weight); padding: var(--amplify-internal-table-th-padding); vertical-align: var(--amplify-components-table-header-vertical-align); } .amplify-table__th:first-child { border-left-width: var(--amplify-components-table-header-border-width); } .amplify-table__th:last-child { border-right-width: var(--amplify-components-table-header-border-width); } .amplify-table__td { border-color: var(--amplify-components-table-data-border-color); border-style: var(--amplify-components-table-data-border-style); border-width: var(--amplify-internal-table-td-border-width); color: var(--amplify-components-table-data-color); display: var(--amplify-components-table-data-display); font-size: var(--amplify-internal-table-td-font-size); font-weight: var(--amplify-components-table-data-font-weight); padding: var(--amplify-internal-table-td-padding); vertical-align: var(--amplify-components-table-data-vertical-align); } .amplify-table__td:first-child { border-left-width: var(--amplify-components-table-data-border-width); } .amplify-table__td:last-child { border-right-width: var(--amplify-components-table-data-border-width); } .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover { background-color: var(--amplify-components-table-row-hover-background-color); } .amplify-tabs__list { --internal-item-margin-start: 0; --internal-item-margin-end: calc( -1 * var(--amplify-components-tabs-item-border-width) ); --internal-item-border-width: 0 0 var(--amplify-components-tabs-border-width) 0; --internal-item-flex: initial; display: flex; flex-direction: row; background-color: var(--amplify-components-tabs-background-color); box-shadow: var(--amplify-components-tabs-box-shadow); border-width: var(--internal-item-border-width); border-style: var(--amplify-components-tabs-border-style); border-color: var(--amplify-components-tabs-border-color); gap: var(--amplify-components-tabs-gap); } .amplify-tabs__list--top { --internal-item-border-width: var(--amplify-components-tabs-border-width) 0 0 0; --internal-item-margin-start: calc( -1 * var(--amplify-components-tabs-item-border-width) ); --internal-item-margin-end: 0; } .amplify-tabs__list--equal { --internal-item-flex: 1 1 0; } .amplify-tabs__list--relative { --internal-item-flex: 1 1 auto; } .amplify-tabs__panel { display: none; background-color: var(--amplify-components-tabs-panel-background-color); padding-inline: var(--amplify-components-tabs-panel-padding-inline); padding-block: var(--amplify-components-tabs-panel-padding-block); } .amplify-tabs__panel--active { display: block; } .amplify-tabs__item { position: relative; background-color: var(--amplify-components-tabs-item-background-color); box-sizing: border-box; color: var(--amplify-components-tabs-item-color); font-size: var(--amplify-components-tabs-item-font-size); font-weight: var(--amplify-components-tabs-item-font-weight); padding: var(--amplify-components-tabs-item-padding-vertical) var(--amplify-components-tabs-item-padding-horizontal); text-align: var(--amplify-components-tabs-item-text-align); transition: all var(--amplify-components-tabs-item-transition-duration); border-width: var(--internal-item-border-width); border-style: var(--amplify-components-tabs-item-border-style); border-color: var(--amplify-components-tabs-item-border-color); flex: var(--internal-item-flex); margin-block-start: var(--internal-item-margin-start); margin-block-end: var(--internal-item-margin-end); } .amplify-tabs__item--active { color: var(--amplify-components-tabs-item-active-color); border-color: var(--amplify-components-tabs-item-active-border-color); background-color: var(--amplify-components-tabs-item-active-background-color); transition-property: none; } .amplify-tabs__item:hover { color: var(--amplify-components-tabs-item-hover-color); cursor: pointer; } .amplify-tabs__item:focus-visible { z-index: 2; color: var(--amplify-components-tabs-item-focus-color); background-color: var(--amplify-components-tabs-item-focus-background-color); border-color: var(--amplify-components-tabs-item-focus-border-color); box-shadow: var(--amplify-components-tabs-item-focus-box-shadow); } .amplify-tabs__item:active { background-color: var(--amplify-components-tabs-item-active-background-color); border-color: var(--amplify-components-tabs-item-active-border-color); box-shadow: var(--amplify-components-tabs-item-active-box-shadow); color: var(--amplify-components-tabs-item-active-color); } .amplify-tabs__item[disabled] { background-color: var(--amplify-components-tabs-item-disabled-background-color); border-color: var(--amplify-components-tabs-item-disabled-border-color); box-shadow: var(--amplify-components-tabs-item-disabled-box-shadow); color: var(--amplify-components-tabs-item-disabled-color); cursor: not-allowed; } .amplify-textareafield { max-height: 100%; flex-direction: column; --amplify-components-fieldcontrol-color: var( --amplify-components-textareafield-color ); --amplify-components-fieldcontrol-border-color: var( --amplify-components-textareafield-border-color ); --amplify-components-fieldcontrol-focus-border-color: var( --amplify-components-textareafield-focus-border-color ); } .amplify-textfield { --amplify-components-fieldcontrol-color: var( --amplify-components-textfield-color ); --amplify-components-fieldcontrol-border-color: var( --amplify-components-textfield-border-color ); --amplify-components-fieldcontrol-font-size: var( --amplify-components-textfield-font-size ); --amplify-components-fieldcontrol-focus-border-color: var( --amplify-components-textfield-focus-border-color ); } .amplify-togglebutton { --amplify-internal-togglebutton-background-color: initial; --amplify-internal-togglebutton-border-color: var( --amplify-components-togglebutton-border-color ); --amplify-internal-togglebutton-color: var( --amplify-components-togglebutton-color ); background-color: var(--amplify-internal-togglebutton-background-color); border-color: var(--amplify-internal-togglebutton-border-color); color: var(--amplify-internal-togglebutton-color); --amplify-internal-togglebutton-focus-background-color: var( --amplify-internal-togglebutton-background-color ); --amplify-internal-togglebutton-focus-border-color: var( --amplify-components-togglebutton-focus-border-color ); --amplify-internal-togglebutton-focus-color: var( --amplify-components-togglebutton-focus-color ); --amplify-internal-togglebutton-hover-background-color: var( --amplify-components-togglebutton-hover-background-color ); --amplify-internal-togglebutton-hover-border-color: var( --amplify-internal-togglebutton-border-color ); --amplify-internal-togglebutton-hover-color: var( --amplify-internal-togglebutton-color ); --amplify-internal-togglebutton-active-background-color: var( --amplify-components-togglebutton-active-background-color ); --amplify-internal-togglebutton-disabled-background-color: var( --amplify-components-togglebutton-disabled-background-color ); --amplify-internal-togglebutton-disabled-border-color: var( --amplify-components-togglebutton-disabled-border-color ); --amplify-internal-togglebutton-disabled-color: var( --amplify-components-togglebutton-disabled-color ); } .amplify-togglebutton:focus { background-color: var(--amplify-internal-togglebutton-focus-background-color); border-color: var(--amplify-internal-togglebutton-focus-border-color); color: var(--amplify-internal-togglebutton-focus-color); } .amplify-togglebutton:hover { background-color: var(--amplify-internal-togglebutton-hover-background-color); border-color: var(--amplify-internal-togglebutton-hover-border-color); color: var(--amplify-internal-togglebutton-hover-color); } .amplify-togglebutton:active { background-color: var(--amplify-internal-togglebutton-active-background-color); } .amplify-togglebutton:disabled { background-color: var(--amplify-internal-togglebutton-disabled-background-color); border-color: var(--amplify-internal-togglebutton-disabled-border-color); color: var(--amplify-internal-togglebutton-disabled-color); } .amplify-togglebutton--pressed { --amplify-internal-togglebutton-border-color: var( --amplify-components-togglebutton-pressed-border-color ); --amplify-internal-togglebutton-background-color: var( --amplify-components-togglebutton-pressed-background-color ); --amplify-internal-togglebutton-color: var( --amplify-components-togglebutton-pressed-color ); --amplify-internal-togglebutton-hover-background-color: var( --amplify-components-togglebutton-pressed-hover-background-color ); --amplify-internal-togglebutton-disabled-background-color: var( --amplify-components-togglebutton-pressed-background-color ); --amplify-internal-togglebutton-disabled-border-color: var( --amplify-components-togglebutton-pressed-border-color ); --amplify-internal-togglebutton-disabled-color: var( --amplify-components-togglebutton-pressed-color ); } .amplify-togglebutton--primary { --amplify-internal-togglebutton-primary-background-color: var( --amplify-components-togglebutton-primary-background-color ); --amplify-internal-togglebutton-background-color: var( --amplify-internal-togglebutton-primary-background-color ); --amplify-internal-togglebutton-primary-border-color: var( --amplify-components-togglebutton-border-color ); --amplify-internal-togglebutton-border-color: var( --amplify-internal-togglebutton-primary-border-color ); --amplify-internal-togglebutton-primary-color: var( --amplify-components-togglebutton-color ); --amplify-internal-togglebutton-color: var( --amplify-internal-togglebutton-primary-color ); border-width: var(--amplify-components-togglebutton-primary-border-width); --amplify-internal-togglebutton-primary-focus-background-color: var( --amplify-components-togglebutton-primary-focus-background-color ); --amplify-internal-togglebutton-primary-focus-border-color: var( --amplify-components-togglebutton-primary-focus-border-color ); --amplify-internal-togglebutton-primary-focus-color: var( --amplify-components-togglebutton-primary-focus-color ); --amplify-internal-togglebutton-primary-focus-box-shadow: var( --amplify-components-togglebutton-primary-focus-box-shadow ); --amplify-internal-togglebutton-focus-background-color: var( --amplify-internal-togglebutton-primary-focus-background-color ); --amplify-internal-togglebutton-focus-border-color: var( --amplify-internal-togglebutton-primary-focus-border-color ); --amplify-internal-togglebutton-focus-color: var( --amplify-internal-togglebutton-primary-focus-color ); --amplify-internal-togglebutton-primary-hover-background-color: var( --amplify-components-togglebutton-primary-hover-background-color ); --amplify-internal-togglebutton-primary-hover-border-color: var( --amplify-internal-togglebutton-primary-border-color ); --amplify-internal-togglebutton-primary-hover-color: var( --amplify-components-togglebutton-primary-hover-color ); --amplify-internal-togglebutton-hover-background-color: var( --amplify-internal-togglebutton-primary-hover-background-color ); --amplify-internal-togglebutton-hover-border-color: var( --amplify-internal-togglebutton-primary-hover-border-color ); --amplify-internal-togglebutton-hover-color: var( --amplify-internal-togglebutton-primary-hover-color ); --amplify-internal-togglebutton-primary-disabled-background-color: var( --amplify-components-togglebutton-primary-disabled-background-color ); --amplify-internal-togglebutton-primary-disabled-border-color: var( --amplify-components-togglebutton-primary-disabled-border-color ); --amplify-internal-togglebutton-primary-disabled-color: var( --amplify-components-togglebutton-primary-disabled-color ); --amplify-internal-togglebutton-disabled-background-color: var( --amplify-internal-togglebutton-primary-disabled-background-color ); --amplify-internal-togglebutton-disabled-border-color: var( --amplify-internal-togglebutton-primary-disabled-border-color ); --amplify-internal-togglebutton-disabled-color: var( --amplify-internal-togglebutton-primary-disabled-color ); } .amplify-togglebutton--primary:focus { box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow); } .amplify-togglebutton--pressed { --amplify-internal-togglebutton-primary-background-color: var( --amplify-components-togglebutton-primary-pressed-background-color ); --amplify-internal-togglebutton-primary-border-color: var( --amplify-components-togglebutton-primary-pressed-border-color ); --amplify-internal-togglebutton-primary-color: var( --amplify-components-togglebutton-primary-pressed-color ); --amplify-internal-togglebutton-primary-focus-background-color: var( --amplify-components-togglebutton-primary-pressed-focus-background-color ); --amplify-internal-togglebutton-primary-focus-border-color: var( --amplify-components-togglebutton-primary-pressed-focus-border-color ); --amplify-internal-togglebutton-primary-focus-color: var( --amplify-components-togglebutton-primary-pressed-focus-color ); --amplify-internal-togglebutton-primary-hover-background-color: var( --amplify-components-togglebutton-primary-pressed-hover-background-color ); --amplify-internal-togglebutton-primary-hover-border-color: var( --amplify-components-togglebutton-primary-pressed-hover-border-color ); --amplify-internal-togglebutton-primary-hover-color: var( --amplify-components-togglebutton-primary-pressed-hover-color ); --amplify-internal-togglebutton-primary-disabled-background-color: var( --amplify-components-togglebutton-primary-pressed-background-color ); --amplify-internal-togglebutton-primary-disabled-border-color: var( --amplify-components-togglebutton-primary-pressed-border-color ); --amplify-internal-togglebutton-primary-disabled-color: var( --amplify-components-togglebutton-primary-pressed-color ); } .amplify-togglebutton--pressed:hover { --amplify-internal-togglebutton-primary-focus-box-shadow: var( --amplify-components-togglebutton-primary-pressed-hover-box-shadow ); } .amplify-togglebutton--link { --amplify-internal-togglebutton-link-background-color: var( --amplify-components-togglebutton-link-background-color ); --amplify-internal-togglebutton-link-color: var( --amplify-components-togglebutton-link-color ); --amplify-internal-togglebutton-background-color: var( --amplify-internal-togglebutton-link-background-color ); --amplify-internal-togglebutton-color: var( --amplify-internal-togglebutton-link-color ); --amplify-internal-togglebutton-link-focus-background-color: var( --amplify-components-togglebutton-link-focus-background-color ); --amplify-internal-togglebutton-link-focus-color: var( --amplify-components-togglebutton-link-focus-color ); --amplify-internal-togglebutton-focus-background-color: var( --amplify-internal-togglebutton-link-focus-background-color ); --amplify-internal-togglebutton-focus-color: var( --amplify-internal-togglebutton-link-focus-color ); --amplify-internal-togglebutton-link-hover-background-color: var( --amplify-components-togglebutton-link-hover-background-color ); --amplify-internal-togglebutton-link-hover-color: var( --amplify-components-togglebutton-link-hover-color ); --amplify-internal-togglebutton-hover-background-color: var( --amplify-internal-togglebutton-link-hover-background-color ); --amplify-internal-togglebutton-hover-color: var( --amplify-internal-togglebutton-link-hover-color ); --amplify-internal-togglebutton-link-disabled-color: var( --amplify-components-togglebutton-link-disabled-color ); --amplify-internal-togglebutton-link-disabled-background-color: var( --amplify-components-togglebutton-link-disabled-background-color ); --amplify-internal-togglebutton-disabled-color: var( --amplify-internal-togglebutton-link-disabled-color ); --amplify-internal-togglebutton-disabled-background-color: var( --amplify-internal-togglebutton-link-disabled-background-color ); } .amplify-togglebutton--pressed { --amplify-internal-togglebutton-link-color: var( --amplify-components-togglebutton-link-pressed-color ); --amplify-internal-togglebutton-link-background-color: var( --amplify-components-togglebutton-link-pressed-background-color ); --amplify-internal-togglebutton-link-focus-background-color: var( --amplify-components-togglebutton-link-pressed-focus-background-color ); --amplify-internal-togglebutton-link-focus-color: var( --amplify-components-togglebutton-link-pressed-focus-color ); --amplify-internal-togglebutton-link-hover-background-color: var( --amplify-components-togglebutton-link-pressed-hover-background-color ); --amplify-internal-togglebutton-link-hover-color: var( --amplify-components-togglebutton-link-pressed-hover-color ); --amplify-internal-togglebutton-link-disabled-color: var( --amplify-components-togglebutton-link-pressed-color ); } .amplify-togglebuttongroup { align-items: var(--amplify-components-togglebuttongroup-align-items); align-content: var(--amplify-components-togglebuttongroup-align-content); justify-content: var(--amplify-components-togglebuttongroup-justify-content); gap: 0; } .amplify-togglebuttongroup .amplify-togglebutton:focus, .amplify-togglebuttongroup .amplify-togglebutton.amplify-togglebutton--pressed { z-index: 2; } .amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type) { margin-inline-start: calc(-1 * var(--amplify-components-button-border-width)); border-start-start-radius: 0; border-end-start-radius: 0; } @supports not (border-start-start-radius: 0) { .amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type) { border-top-left-radius: 0; border-bottom-left-radius: 0; } } .amplify-togglebuttongroup .amplify-togglebutton:not(:last-of-type) { border-start-end-radius: 0; border-end-end-radius: 0; } @supports not (border-end-end-radius: 0) { .amplify-togglebuttongroup .amplify-togglebutton:not(:last-of-type) { border-bottom-right-radius: 0; border-top-right-radius: 0; } } .amplify-fileuploader__dropzone { background-color: var(--amplify-components-fileuploader-dropzone-background-color); border-color: var(--amplify-components-fileuploader-dropzone-border-color); border-radius: var(--amplify-components-fileuploader-dropzone-border-radius); border-style: var(--amplify-components-fileuploader-dropzone-border-style); border-width: var(--amplify-components-fileuploader-dropzone-border-width); text-align: var(--amplify-components-fileuploader-dropzone-text-align); padding-block: var(--amplify-components-fileuploader-dropzone-padding-block); padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline); display: flex; flex-direction: column; align-items: center; gap: var(--amplify-components-fileuploader-dropzone-gap); } .amplify-fileuploader__dropzone--small { flex-direction: row; justify-content: center; } .amplify-fileuploader__dropzone--active { border-color: var(--amplify-components-fileuploader-dropzone-active-border-color); border-width: var(--amplify-components-fileuploader-dropzone-active-border-width); background-color: var(--amplify-components-fileuploader-dropzone-active-background-color); } .amplify-fileuploader__dropzone__icon { font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size); color: var(--amplify-components-fileuploader-dropzone-icon-color); } .amplify-fileuploader__dropzone__text { color: var(--amplify-components-fileuploader-dropzone-text-color); font-size: var(--amplify-components-fileuploader-dropzone-text-font-size); font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight); } .amplify-fileuploader__file__list { display: flex; flex-direction: var(--amplify-components-fileuploader-filelist-flex-direction); gap: var(--amplify-components-fileuploader-filelist-gap); } .amplify-fileuploader__file { position: relative; border-width: var(--amplify-components-fileuploader-file-border-width); border-style: var(--amplify-components-fileuploader-file-border-style); border-color: var(--amplify-components-fileuploader-file-border-color); border-radius: var(--amplify-components-fileuploader-file-border-radius); display: flex; flex-direction: column; padding-inline: var(--amplify-components-fileuploader-file-padding-inline); padding-block: var(--amplify-components-fileuploader-file-padding-block); align-items: var(--amplify-components-fileuploader-file-align-items); } .amplify-fileuploader__file__wrapper { width: 100%; display: flex; flex-direction: row; align-items: center; gap: var(--amplify-components-fileuploader-file-gap); } .amplify-fileuploader__file__name { text-overflow: ellipsis; overflow: hidden; font-weight: var(--amplify-components-fileuploader-file-name-font-weight); font-size: var(--amplify-components-fileuploader-file-name-font-size); color: var(--amplify-components-fileuploader-file-name-color); } .amplify-fileuploader__file__size { font-weight: var(--amplify-components-fileuploader-file-size-font-weight); font-size: var(--amplify-components-fileuploader-file-size-font-size); color: var(--amplify-components-fileuploader-file-size-color); } .amplify-fileuploader__file__main { flex: 1; white-space: nowrap; overflow: hidden; } .amplify-fileuploader__file__image { position: relative; display: flex; align-items: center; justify-content: center; width: var(--amplify-components-fileuploader-file-image-width); height: var(--amplify-components-fileuploader-file-image-height); background-color: var(--amplify-components-fileuploader-file-image-background-color); border-radius: var(--amplify-components-fileuploader-file-image-border-radius); color: var(--amplify-components-fileuploader-file-image-color); } .amplify-fileuploader__file__image img { max-height: 100%; } .amplify-fileuploader__file__status--error { color: var(--amplify-colors-font-error); font-size: var(--amplify-components-fileuploader-file-size-font-size); } .amplify-fileuploader__file__status--success { color: var(--amplify-colors-font-success); } .amplify-fileuploader__loader { stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap); stroke: var(--amplify-components-fileuploader-loader-stroke-empty); stroke-width: var(--amplify-components-fileuploader-loader-stroke-width); height: var(--amplify-components-fileuploader-loader-stroke-width); --amplify-components-loader-linear-stroke-filled: var( --amplify-components-fileuploader-loader-stroke-filled ); overflow: hidden; position: absolute; bottom: 0; left: 0; width: 100%; } .amplify-fileuploader__previewer { display: flex; flex-direction: column; max-width: var(--amplify-components-fileuploader-previewer-max-width); max-height: var(--amplify-components-fileuploader-previewer-max-height); overflow: auto; gap: var(--amplify-components-fileuploader-previewer-body-gap); padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline); padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block); background-color: var(--amplify-components-fileuploader-previewer-background-color); border-width: var(--amplify-components-fileuploader-previewer-border-width); border-style: var(--amplify-components-fileuploader-previewer-border-style); border-color: var(--amplify-components-fileuploader-previewer-border-color); border-radius: var(--amplify-components-fileuploader-previewer-border-radius); } .amplify-fileuploader__previewer__text { font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight); font-size: var(--amplify-components-fileuploader-previewer-text-font-size); color: var(--amplify-components-fileuploader-previewer-text-color); } .amplify-fileuploader__previewer__footer { display: flex; flex-direction: row; justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content); } .amplify-fileuploader__previewer__actions { display: flex; flex-direction: row; gap: var(--amplify-space-small); } .amplify-inappmessaging-backdrop { background-color: var(--amplify-colors-overlay-50); inset: 0; position: fixed; z-index: 1000; } .amplify-inappmessaging-backdrop-content-container { align-items: center; inset: 0; justify-content: center; pointer-events: none; position: fixed; z-index: 1001; } .amplify-inappmessaging-backdrop-content { pointer-events: auto; } .amplify-inappmessaging-bannermessage { box-shadow: var(--amplify-shadows-medium); height: var(--amplify-components-inappmessaging-banner-height); margin: var(--amplify-space-small); max-width: 50%; position: fixed; width: var(--amplify-components-inappmessaging-banner-width); } .amplify-inappmessaging-bannermessage--top { top: 0; } .amplify-inappmessaging-bannermessage--middle { bottom: 0; margin: auto var(--amplify-space-small); top: 0; } .amplify-inappmessaging-bannermessage--bottom { bottom: 0; } .amplify-inappmessaging-bannermessage--left { left: 0; } .amplify-inappmessaging-bannermessage--center { left: 0; margin: var(--amplify-space-small) auto; right: 0; } .amplify-inappmessaging-bannermessage--right { right: 0; } .amplify-inappmessaging-bannermessage--center-middle { inset: 0; margin: auto; } .amplify-inappmessaging-bannermessage--full-width { max-width: initial; width: calc(100% - 2 * var(--amplify-space-small)); } .amplify-inappmessaging-fullscreenmessage { height: var(--amplify-components-inappmessaging-dialog-height); min-height: var(--amplify-components-inappmessaging-dialog-min-height); min-width: var(--amplify-components-inappmessaging-dialog-min-width); width: var(--amplify-components-inappmessaging-dialog-width); } .amplify-inappmessaging-fullscreenmessage--fullscreen { height: auto; inset: 0; position: fixed; width: auto; z-index: 1000; } .amplify-inappmessaging-messagelayout { background-color: var(--amplify-colors-background-primary); flex-direction: column; flex-grow: 1; gap: var(--amplify-space-xxxs); max-width: 100%; padding: var(--amplify-space-medium); } .amplify-inappmessaging-messagelayout__button { border-width: 0; width: 100%; } .amplify-inappmessaging-messagelayout__button, .amplify-inappmessaging-messagelayout__button:active, .amplify-inappmessaging-messagelayout__button:visited, .amplify-inappmessaging-messagelayout__button:hover, .amplify-inappmessaging-messagelayout__button:focus { background-color: var(--amplify-components-inappmessaging-button-background-color); border-radius: var(--amplify-components-inappmessaging-button-border-radius); color: var(--amplify-components-inappmessaging-button-color); } .amplify-inappmessaging-messagelayout__button--dark:active, .amplify-inappmessaging-messagelayout__button--dark:visited, .amplify-inappmessaging-messagelayout__button--light:active, .amplify-inappmessaging-messagelayout__button--light:visited { filter: brightness(100%); } .amplify-inappmessaging-messagelayout__button--dark:hover, .amplify-inappmessaging-messagelayout__button--dark:focus { filter: brightness(120%); } .amplify-inappmessaging-messagelayout__button--light:hover, .amplify-inappmessaging-messagelayout__button--light:focus { filter: brightness(80%); } .amplify-inappmessaging-messagelayout__close-button { color: var(--amplify-colors-neutral-80); } .amplify-inappmessaging-messagelayout__close-button:active, .amplify-inappmessaging-messagelayout__close-button:visited { color: var(--amplify-colors-neutral-80); } .amplify-inappmessaging-messagelayout__close-button:hover, .amplify-inappmessaging-messagelayout__close-button:focus { color: var(--amplify-colors-neutral-100); } .amplify-inappmessaging-messagelayout__content { flex-grow: 1; overflow: hidden; } .amplify-inappmessaging-messagelayout__content--horizontal { flex-direction: row; } .amplify-inappmessaging-messagelayout__content--vertical { flex-direction: column; justify-content: center; } .amplify-inappmessaging-messagelayout__header { flex-shrink: 0; font-size: var(--amplify-components-inappmessaging-header-font-size); font-weight: var(--amplify-components-inappmessaging-header-font-weight); } .amplify-inappmessaging-messagelayout__image-container { align-items: center; display: flex; justify-content: center; position: relative; } .amplify-inappmessaging-messagelayout__image-container img { max-height: 100%; max-width: 100%; -o-object-fit: contain; object-fit: contain; position: absolute; } .amplify-inappmessaging-messagelayout__image-container--horizontal { max-width: 15%; min-width: 15%; } .amplify-inappmessaging-messagelayout__image-container--vertical { max-height: 40%; min-height: 40%; } .amplify-inappmessaging-messagelayout__text-container { flex-direction: column; overflow-y: auto; gap: var(--amplify-space-xxxs); } .amplify-inappmessaging-messagelayout__text-container--horizontal { flex-grow: 1; } .amplify-inappmessaging-messagelayout__text-container--vertical { flex-grow: 0; } .amplify-inappmessaging-modalmessage { align-items: center; height: initial; inset: 0; justify-content: center; pointer-events: none; position: fixed; width: initial; z-index: 1000; } .amplify-inappmessaging-modalmessage__dialog { box-shadow: var(--amplify-shadows-medium); height: var(--amplify-components-inappmessaging-dialog-height); min-height: var(--amplify-components-inappmessaging-dialog-min-height); min-width: var(--amplify-components-inappmessaging-dialog-min-width); pointer-events: auto; width: var(--amplify-components-inappmessaging-dialog-width); } .amplify-inappmessaging-modalmessage__dialog--full-width { width: 100%; margin: var(--amplify-space-small); } .amplify-storagemanager__dropzone { background-color: var(--amplify-components-storagemanager-dropzone-background-color); border-color: var(--amplify-components-storagemanager-dropzone-border-color); border-radius: var(--amplify-components-storagemanager-dropzone-border-radius); border-style: var(--amplify-components-storagemanager-dropzone-border-style); border-width: var(--amplify-components-storagemanager-dropzone-border-width); text-align: var(--amplify-components-storagemanager-dropzone-text-align); padding-block: var(--amplify-components-storagemanager-dropzone-padding-block); padding-inline: var(--amplify-components-storagemanager-dropzone-padding-inline); display: flex; flex-direction: column; align-items: center; gap: var(--amplify-components-storagemanager-dropzone-gap); } .amplify-storagemanager__dropzone--small { flex-direction: row; justify-content: center; } .amplify-storagemanager__dropzone--active { border-color: var(--amplify-components-storagemanager-dropzone-active-border-color); border-width: var(--amplify-components-storagemanager-dropzone-active-border-width); background-color: var(--amplify-components-storagemanager-dropzone-active-background-color); } .amplify-storagemanager__dropzone__icon { font-size: var(--amplify-components-storagemanager-dropzone-icon-font-size); color: var(--amplify-components-storagemanager-dropzone-icon-color); } .amplify-storagemanager__dropzone__text { color: var(--amplify-components-storagemanager-dropzone-text-color); font-size: var(--amplify-components-storagemanager-dropzone-text-font-size); font-weight: var(--amplify-components-storagemanager-dropzone-text-font-weight); } .amplify-storagemanager__file__list { display: flex; flex-direction: var(--amplify-components-storagemanager-filelist-flex-direction); gap: var(--amplify-components-storagemanager-filelist-gap); } .amplify-storagemanager__file { position: relative; border-width: var(--amplify-components-storagemanager-file-border-width); border-style: var(--amplify-components-storagemanager-file-border-style); border-color: var(--amplify-components-storagemanager-file-border-color); border-radius: var(--amplify-components-storagemanager-file-border-radius); display: flex; flex-direction: column; padding-inline: var(--amplify-components-storagemanager-file-padding-inline); padding-block: var(--amplify-components-storagemanager-file-padding-block); align-items: var(--amplify-components-storagemanager-file-align-items); } .amplify-storagemanager__file__wrapper { width: 100%; display: flex; flex-direction: row; align-items: center; gap: var(--amplify-components-storagemanager-file-gap); } .amplify-storagemanager__file__name { text-overflow: ellipsis; overflow: hidden; font-weight: var(--amplify-components-storagemanager-file-name-font-weight); font-size: var(--amplify-components-storagemanager-file-name-font-size); color: var(--amplify-components-storagemanager-file-name-color); } .amplify-storagemanager__file__size { font-weight: var(--amplify-components-storagemanager-file-size-font-weight); font-size: var(--amplify-components-storagemanager-file-size-font-size); color: var(--amplify-components-storagemanager-file-size-color); } .amplify-storagemanager__file__main { flex: 1; white-space: nowrap; overflow: hidden; } .amplify-storagemanager__file__image { position: relative; display: flex; align-items: center; justify-content: center; width: var(--amplify-components-storagemanager-file-image-width); height: var(--amplify-components-storagemanager-file-image-height); background-color: var(--amplify-components-storagemanager-file-image-background-color); border-radius: var(--amplify-components-storagemanager-file-image-border-radius); color: var(--amplify-components-storagemanager-file-image-color); } .amplify-storagemanager__file__image img { max-height: 100%; } .amplify-storagemanager__file__status--error { color: var(--amplify-colors-font-error); font-size: var(--amplify-components-storagemanager-file-size-font-size); } .amplify-storagemanager__file__status--success { color: var(--amplify-colors-font-success); } .amplify-storagemanager__loader { stroke-linecap: var(--amplify-components-storagemanager-loader-stroke-linecap); stroke: var(--amplify-components-storagemanager-loader-stroke-empty); stroke-width: var(--amplify-components-storagemanager-loader-stroke-width); height: var(--amplify-components-storagemanager-loader-stroke-width); --amplify-components-loader-linear-stroke-filled: var( --amplify-components-storagemanager-loader-stroke-filled ); overflow: hidden; position: absolute; bottom: 0; left: 0; width: 100%; } .amplify-storagemanager__previewer { display: flex; flex-direction: column; max-width: var(--amplify-components-storagemanager-previewer-max-width); max-height: var(--amplify-components-storagemanager-previewer-max-height); overflow: auto; gap: var(--amplify-components-storagemanager-previewer-body-gap); padding-inline: var(--amplify-components-storagemanager-previewer-body-padding-inline); padding-block: var(--amplify-components-storagemanager-previewer-body-padding-block); background-color: var(--amplify-components-storagemanager-previewer-background-color); border-width: var(--amplify-components-storagemanager-previewer-border-width); border-style: var(--amplify-components-storagemanager-previewer-border-style); border-color: var(--amplify-components-storagemanager-previewer-border-color); border-radius: var(--amplify-components-storagemanager-previewer-border-radius); } .amplify-storagemanager__previewer__text { font-weight: var(--amplify-components-storagemanager-previewer-text-font-weight); font-size: var(--amplify-components-storagemanager-previewer-text-font-size); color: var(--amplify-components-storagemanager-previewer-text-color); } .amplify-storagemanager__previewer__footer { display: flex; flex-direction: row; justify-content: var(--amplify-components-storagemanager-previewer-footer-justify-content); } .amplify-storagemanager__previewer__actions { display: flex; flex-direction: row; gap: var(--amplify-space-small); } .amplify-storage-browser { display: flex; flex-direction: column; align-items: stretch; height: 100%; position: relative; padding: var(--amplify-space-small); gap: var(--amplify-space-small); /* Error boundary */ } .amplify-storage-browser__error { background-color: var(--amplify-colors-background-error); color: var(--amplify-colors-font-error); padding: var(--amplify-space-medium); } .amplify-storage-browser__navigation, .amplify-storage-browser__exit { align-self: flex-start; } .amplify-storage-browser__title { font-weight: var(--amplify-font-weights-bold); font-size: var(--amplify-font-sizes-large); } .amplify-storage-browser__controls, .amplify-storage-browser__summary, .amplify-storage-browser__footer { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: var(--amplify-space-medium); } .amplify-storage-browser__footer { justify-content: flex-end; } .amplify-storage-browser__search { display: flex; flex-direction: row; flex: 1; gap: var(--amplify-space-small); } .amplify-storage-browser__drop-zone { flex: 1; overflow: hidden; position: relative; width: 100%; display: block; } .amplify-storage-browser__data-table { overflow: auto; position: relative; border-width: var(--amplify-border-widths-small); border-style: solid; border-color: var(--amplify-colors-border-primary); border-radius: var(--amplify-radii-small); width: 100%; height: 100%; display: block; } .amplify-storage-browser__table { width: 100%; position: relative; } .amplify-storage-browser__table-head { position: sticky; top: 0; background: var(--amplify-colors-background-primary); box-shadow: var(--amplify-shadows-small); z-index: 2; } .amplify-storage-browser__table-header { border: none; padding: var(--amplify-space-xxxs); } .amplify-storage-browser__table-data-cell { padding: var(--amplify-space-xxxs); } .amplify-storage-browser__table-data-cell:first-child, .amplify-storage-browser__table-data-cell:last-child { border-inline-start-width: 0; border-inline-end-width: 0; } .amplify-storage-browser__table-data-cell-icon { vertical-align: middle; margin-inline-end: var(--amplify-space-xs); } .amplify-storage-browser__table-header--select, .amplify-storage-browser__table-data--select, .amplify-storage-browser__table-header--download, .amplify-storage-browser__table-data--download, .amplify-storage-browser__table-data--cancel { text-align: center; } .amplify-storage-browser__table-data--size, .amplify-storage-browser__table-header--size { text-align: end; } .amplify-storage-browser__table-button-data-cell, .amplify-storage-browser__table-date-data-cell, .amplify-storage-browser__table-number-data-cell, .amplify-storage-browser__table-text-data-cell, .amplify-storage-browser__table-sort-header { display: flex; width: 100%; gap: var(--amplify-space-xxs); padding: var(--amplify-space-xxs); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; align-items: center; justify-content: flex-start; } .amplify-storage-browser__table-button-data-cell-icon--action-progress, .amplify-storage-browser__table-date-data-cell-icon--action-progress, .amplify-storage-browser__table-number-data-cell-icon--action-progress, .amplify-storage-browser__table-text-data-cell-icon--action-progress, .amplify-storage-browser__table-sort-header-icon--action-progress { animation-name: amplify-loader-circular; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: var(--amplify-components-loader-animation-duration); } .amplify-storage-browser__status { display: flex; flex-direction: row; gap: var(--amplify-space-xs); align-items: center; } .amplify-storage-browser__status-display { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: var(--amplify-space-small); flex: 1; } .amplify-storage-browser__status-label { font-weight: var(--amplify-font-weights-bold); } .amplify-storage-browser__status-value { color: var(--amplify-colors-font-secondary); } .amplify-storage-browser__destination { display: flex; flex-direction: row; gap: var(--amplify-space-xs); align-items: center; } .amplify-storage-browser__destination-label { font-weight: var(--amplify-font-weights-bold); } .amplify-storage-browser__message { flex: 1; } .amplify-storage-browser__buttons { justify-content: flex-end; display: flex; gap: var(--amplify-space-small); } .amplify-storage-browser__loader { position: absolute; stroke-width: var(--amplify-border-widths-large); height: var(--amplify-border-widths-large); top: 0; z-index: 3; } .amplify-ai-conversation { display: flex; flex-direction: column; height: 100%; flex: 1; } .amplify-ai-conversation__message { --internal-content-bg: ; --internal-flex-direction: ; --internal-content-padding: ; --internal-body-align-items: ; display: flex; flex-direction: var(--internal-flex-direction); gap: var(--amplify-components-ai-conversation-message-gap); padding-inline: var(--amplify-components-ai-conversation-message-padding-inline); padding-block: var(--amplify-components-ai-conversation-message-padding-block); } .amplify-ai-conversation__message__list { display: flex; flex-direction: column; } .amplify-ai-conversation__message__avatar { flex-shrink: 0; } .amplify-ai-conversation__message__sender { display: flex; flex-direction: var(--internal-flex-direction); align-items: center; min-height: var(--amplify-components-avatar-height); gap: var(--amplify-components-ai-conversation-message-sender-gap); } .amplify-ai-conversation__message__sender__username { color: var(--amplify-components-ai-conversation-message-sender-username-color); font-size: var(--amplify-components-ai-conversation-message-sender-username-font-size); font-weight: var(--amplify-components-ai-conversation-message-sender-username-font-weight); } .amplify-ai-conversation__message__sender__timestamp { color: var(--amplify-components-ai-conversation-message-sender-timestamp-color); font-size: var(--amplify-components-ai-conversation-message-sender-timestamp-font-size); font-weight: var(--amplify-components-ai-conversation-message-sender-timestamp-font-weight); } .amplify-ai-conversation__message__body { display: flex; flex: 1; flex-direction: column; align-items: var(--internal-body-align-items); gap: var(--amplify-components-ai-conversation-message-body-gap); } .amplify-ai-conversation__message__content { background-color: var(--internal-content-bg); border-radius: var(--amplify-radii-medium); padding: var(--internal-content-padding); display: flex; flex-direction: column; gap: var(--amplify-space-small); } .amplify-ai-conversation__message__text { display: block; } .amplify-ai-conversation__message__image { max-width: 25%; } .amplify-ai-conversation__message__actions { display: flex; flex-direction: row; gap: var(--amplify-components-ai-conversation-message-actions-gap); } .amplify-ai-conversation__message--bubble { --internal-content-bg: var(--internal-bg-color); --internal-content-padding: var(--amplify-space-xxs) var(--amplify-space-xs); --internal-flex-direction: row-reverse; --internal-body-align-items: flex-end; } .amplify-ai-conversation__message--user { --internal-bg-color: var( --amplify-components-ai-conversation-message-user-background-color ); } .amplify-ai-conversation__message--assistant { --internal-bg-color: var( --amplify-components-ai-conversation-message-assistant-background-color ); --internal-flex-direction: row; --internal-body-align-items: flex-start; } .amplify-ai-conversation__scrollview { flex: 1 0 50%; } .amplify-ai-conversation__form { display: flex; flex-direction: row; align-items: flex-start; padding: var(--amplify-components-ai-conversation-form-padding); gap: var(--amplify-components-ai-conversation-form-gap); max-height: 100%; overflow: hidden; } .amplify-ai-conversation__form__dropzone { text-align: initial; border: none; padding: 0; display: grid; overflow: hidden; } .amplify-ai-conversation__form__error { padding: 0; padding-block-start: var(--amplify-components-ai-conversation-attachment-list-padding-block-start); gap: var(--amplify-components-ai-conversation-attachment-gap); } .amplify-ai-conversation__attachment { display: flex; flex-direction: row; align-items: center; padding-block: var(--amplify-components-ai-conversation-attachment-padding-block); padding-inline: var(--amplify-components-ai-conversation-attachment-padding-inline); border-width: var(--amplify-components-ai-conversation-attachment-border-width); border-style: solid; border-color: var(--amplify-components-ai-conversation-attachment-border-color); border-radius: var(--amplify-components-ai-conversation-attachment-border-radius); gap: var(--amplify-components-ai-conversation-attachment-gap); font-size: var(--amplify-components-ai-conversation-attachment-font-size); } .amplify-ai-conversation__attachment__list { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--amplify-components-ai-conversation-attachment-list-gap); padding: var(--amplify-components-ai-conversation-attachment-list-padding); padding-block-start: var(--amplify-components-ai-conversation-attachment-list-padding-block-start); } .amplify-ai-conversation__attachment__image { width: var(--amplify-components-ai-conversation-attachment-image-width); height: var(--amplify-components-ai-conversation-attachment-image-height); -o-object-fit: cover; object-fit: cover; } .amplify-ai-conversation__attachment__name { color: var(--amplify-components-ai-conversation-attachment-name-color); font-size: var(--amplify-components-ai-conversation-attachment-name-font-size); font-weight: var(--amplify-components-ai-conversation-attachment-name-font-weight); } .amplify-ai-conversation__attachment__size { color: var(--amplify-components-ai-conversation-attachment-size-color); font-size: var(--amplify-components-ai-conversation-attachment-size-font-size); font-weight: var(--amplify-components-ai-conversation-attachment-size-font-weight); } .amplify-ai-conversation__attachment__remove { padding: var(--amplify-components-ai-conversation-attachment-remove-padding); } .amplify-ai-conversation__prompt { font-weight: normal; } .amplify-label-start { flex-direction: row; } .amplify-label-end { flex-direction: row-reverse; } .amplify-label-top { flex-direction: column; } .amplify-label-bottom { flex-direction: column-reverse; } .amplify-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; fill: transparent; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }.custom-sign-in-container { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } .custom-sign-in-container .google-logo { width: 2rem; height: 2rem; margin-right: 1rem; } .custom-sign-in-container .custom-sign-in-card { background: transparent; border-radius: var(--round-small); padding: 1rem; width: 35rem; text-align: center; transition: all 120ms linear; } .custom-sign-in-container .custom-sign-in-card .logo-container { margin-bottom: 24px; display: flex; align-items: center; justify-content: space-around; gap: 1rem; } .custom-sign-in-container .custom-sign-in-card .logo-container .logo-wrapper { position: relative; height: 60px; aspect-ratio: 1; } .custom-sign-in-container .custom-sign-in-card .logo-container .logo-wrapper .logo-fc { opacity: 1; } .custom-sign-in-container .custom-sign-in-card .logo-container .logo-wrapper .logo-mono { opacity: 0; } .custom-sign-in-container .custom-sign-in-card .logo-container .auth-logo { position: absolute; inset: 0; height: 60px; transition: opacity 120ms linear; } .custom-sign-in-container .custom-sign-in-card .logo-container .auth-logo .st0 { fill: var(--clr-secondary); } .custom-sign-in-container .custom-sign-in-card h1 { font-size: 1.5rem; font-weight: 500; color: var(--clr-primary); transition: color 120ms linear; } .custom-sign-in-container .custom-sign-in-card .sign-in-options { display: flex; flex-direction: column; gap: 16px; } .custom-sign-in-container .custom-sign-in-card .sign-in-options .google-sign-in-button { display: flex; align-items: center; justify-content: center; padding: 0.85rem 1rem; background-color: var(--clr-smoke); border: 2px solid var(--clr-primary); color: var(--clr-dark-gray); font-size: 1rem; font-weight: 500; border-radius: var(--round-tiny); cursor: pointer; transition: all 300ms ease-out; } .custom-sign-in-container .custom-sign-in-card .sign-in-options .google-sign-in-button:hover, .custom-sign-in-container .custom-sign-in-card .sign-in-options .google-sign-in-button:focus-visible { box-shadow: var(--box-shadow-light); border-radius: var(--round-tiny) 2rem 2rem var(--round-tiny); background-color: var(--clr-light); } .custom-sign-in-container .custom-sign-in-card.hovering, .custom-sign-in-container .custom-sign-in-card:hover, .custom-sign-in-container .custom-sign-in-card:focus-visible { background-color: var(--clr-primary); box-shadow: var(--box-shadow); } .custom-sign-in-container .custom-sign-in-card.hovering h1, .custom-sign-in-container .custom-sign-in-card:hover h1, .custom-sign-in-container .custom-sign-in-card:focus-visible h1 { color: var(--clr-light); } .custom-sign-in-container .custom-sign-in-card.hovering .logo-wrapper .logo-fc, .custom-sign-in-container .custom-sign-in-card:hover .logo-wrapper .logo-fc, .custom-sign-in-container .custom-sign-in-card:focus-visible .logo-wrapper .logo-fc { opacity: 0; } .custom-sign-in-container .custom-sign-in-card.hovering .logo-wrapper .logo-mono, .custom-sign-in-container .custom-sign-in-card:hover .logo-wrapper .logo-mono, .custom-sign-in-container .custom-sign-in-card:focus-visible .logo-wrapper .logo-mono { opacity: 1; } .custom-sign-in-container .auth-error { margin: 12px 0; padding: 10px 15px; background-color: var(--clr-light); border: 1px solid var(--clr-red-l1); border-left: 0.25rem solid var(--clr-red-d2); border-radius: var(--round-tiny); border-radius: 2px; font-size: 0.8rem; font-style: italic; } .custom-sign-in-container .auth-error p { color: var(--clr-red-d2); margin: 0; line-height: 1.4; } .custom-sign-in-container .warnings div { display: none; margin-top: 1rem; } @media screen and (min-width: 1400px) and (max-width: 1919px) { .custom-sign-in-container .warnings div.less1920 { display: block; animation: fadeOut 500ms 4s linear forwards; } } @media screen and (min-width: 1366px) and (max-width: 1399px) { .custom-sign-in-container .warnings div.less1400 { display: block; animation: fadeOut 500ms 4s linear forwards; } } @media screen and (min-width: 1078px) and (max-width: 1365px) { .custom-sign-in-container .warnings div.less1366 { display: block; animation: fadeOut 500ms 4s linear forwards; } } @media screen and (max-width: 1077px) { .custom-sign-in-container .warnings div.less1078 { display: block; } .custom-sign-in-container .warnings div.less1078 p { color: var(--clr-red); } } .custom-sign-in-container .warnings p { text-align: center; color: var(--clr-dark-gray); text-shadow: var(--text-shadow-med); } .animated-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--clr-light) 0%, var(--clr-smoke) 50%, var(--clr-smoke-light) 100%); overflow: hidden; z-index: -1; } .bg-circle { position: absolute; border-radius: 50%; } .bg-circle--1 { width: 300px; height: 300px; background: radial-gradient(circle, var(--clr-secondary) 0%, var(--clr-secondary-d1) 70%, var(--clr-secondary-d2) 100%); box-shadow: var(--text-shadow); animation: float1 20s ease-in-out infinite; top: 10%; left: 10%; } .bg-circle--2 { width: 200px; height: 200px; background: radial-gradient(circle, var(--clr-secondary-l1) 0%, var(--clr-secondary) 70%, var(--clr-secondary-d1) 100%); box-shadow: var(--text-shadow); animation: float2 15s ease-in-out infinite; top: 60%; right: 15%; } .bg-circle--3 { width: 150px; height: 150px; background: radial-gradient(circle, var(--clr-secondary-l2) 0%, var(--clr-secondary-l1) 70%, var(--clr-secondary) 100%); box-shadow: var(--text-shadow); animation: float3 18s ease-in-out infinite; bottom: 20%; left: 20%; } .bg-circle--4 { width: 40px; height: 40px; background: radial-gradient(circle, var(--clr-violet-l1) 0%, var(--clr-violet) 70%, var(--clr-violet-d1) 100%); box-shadow: var(--text-shadow); animation: float1 22s ease-in-out infinite; top: 25%; right: 20%; opacity: 0.08; } .bg-circle--5 { width: 250px; height: 250px; background: radial-gradient(circle, var(--clr-brown-l1) 0%, var(--clr-brown) 70%, var(--clr-brown-d1) 100%); box-shadow: var(--text-shadow); animation: float2 28s ease-in-out infinite; bottom: 35%; right: 52%; opacity: 0.08; } .bg-square { position: absolute; transform: rotate(45deg); } .bg-square--1 { width: 100px; height: 100px; background: linear-gradient(135deg, var(--clr-tertiary-l1) 0%, var(--clr-tertiary-l3) 50%, var(--clr-tertiary-l2) 100%); box-shadow: var(--text-shadow); animation: rotate 25s linear infinite; top: 30%; right: 20%; } @media screen and (min-width: 1400px) { .bg-square--1 { right: 24%; } } @media screen and (min-width: 1600px) { .bg-square--1 { right: 30%; } } .bg-square--2 { width: 80px; height: 80px; background: linear-gradient(135deg, var(--clr-tertiary-l3) 0%, var(--clr-tertiary-l4) 50%, var(--clr-tertiary-l2) 100%); box-shadow: var(--text-shadow); animation: rotate 30s linear infinite reverse; bottom: 40%; right: 10%; } .bg-square--3 { width: 150px; height: 150px; background: linear-gradient(135deg, var(--clr-pink-l2) 0%, var(--clr-pink) 50%, var(--clr-pink-l1) 100%); box-shadow: var(--text-shadow); animation: rotate 20s linear infinite; top: 60%; left: 5%; opacity: 0.08; } .bg-square--4 { width: 90px; height: 90px; background: linear-gradient(135deg, var(--clr-green-l2) 0%, var(--clr-green) 50%, var(--clr-green-l1) 100%); box-shadow: var(--text-shadow); animation: rotate 35s linear infinite reverse; bottom: 5%; right: 45%; opacity: 0.08; } .bg-square--5 { width: 40px; height: 40px; background: linear-gradient(135deg, var(--clr-orange-d2) 0%, var(--clr-orange) 50%, var(--clr-orange-d1) 100%); box-shadow: var(--text-shadow); animation: rotate 35s linear infinite reverse; top: 12%; left: 49%; opacity: 0.08; }/* Toast.css */ .toast-container { position: fixed; bottom: 1.5rem; right: 1rem; z-index: 1201; display: flex; flex-direction: column; gap: 0.85rem; } .toast { background-color: var(--clr-smoke-darker); color: var(--clr-light); display: grid; grid-template-columns: 3rem auto; gap: 0; border-radius: var(--round-tiny); overflow: hidden; align-items: center; height: 3rem; box-shadow: var(--box-shadow-light); animation: slideIn 0.3s ease-out; position: relative; } .toast::before { content: ""; position: absolute; left: 3rem; width: 100%; top: 0; bottom: 0; background-color: var(--clr-tertiary-l4); transform-origin: left; animation: burningFuse 9.5s linear forwards; z-index: 1200; } .toast p { margin: 0; flex-grow: 1; line-height: 1; } .toast .close-button { background: transparent; border: none; color: var(--clr-dark-gray50); margin-left: 10px; display: block; transition: fill 300ms, transform 250ms; } .toast .close-button svg { font-size: 18px; cursor: pointer; transition: fill 300ms, transform 250ms; color: var(--clr-light-gray); } .toast .close-button:hover svg, .toast .close-button:focus-visible svg { color: var(--clr-red); transform: rotate(180deg); } .toast .close-button:active svg { color: var(--clr-red-d2); transform: scale(1.15); } .toast .toast-main-area { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; padding: 0 1rem; background: var(--clr-smoke); z-index: 1202; height: calc(100% - 2px); width: calc(100% - 1px); margin-right: 1px; border-radius: 0 var(--round-tiny) var(--round-tiny) 0; } .toast .toast-main-area p { font-size: 0.85rem; white-space: nowrap; } .toast .toast-badge-area { display: grid; width: 100%; height: 100%; color: var(--clr-light); font-size: 1.25rem; background: var(--clr-tertiary-l4); position: relative; place-content: center; } .toast .toast-badge-area::after { content: "\e937"; width: 80%; height: 80%; color: var(--clr-light); font-family: icomoon; opacity: 0.85; } .toast.queued:before { background-color: var(--clr-secondary); } .toast.queued .toast-badge-area { background-color: var(--clr-secondary); } .toast.queued .toast-badge-area::after { content: "\e933"; } .toast.started:before { background-color: var(--clr-tertiary-l4); } .toast.started .toast-badge-area { background-color: var(--clr-tertiary-l4); } .toast.started .toast-badge-area::after { content: "\e938"; } .toast.completed:before, .toast.good:before { background-color: var(--clr-green); } .toast.completed .toast-badge-area, .toast.good .toast-badge-area { background-color: var(--clr-green); } .toast.completed .toast-badge-area::after, .toast.good .toast-badge-area::after { content: "\e935"; } .toast.sent:before { background-color: var(--clr-primary); } .toast.sent .toast-badge-area { background-color: var(--clr-primary); } .toast.sent .toast-badge-area::after { content: "\e936"; } .toast.failed:before, .toast.bad:before { background-color: var(--clr-red); } .toast.failed .toast-badge-area, .toast.bad .toast-badge-area { background-color: var(--clr-red); } .toast.failed .toast-badge-area::after, .toast.bad .toast-badge-area::after { content: "\e934"; }.tile { background: var(--clr-light); border-radius: var(--round-small); border: 1px solid var(--clr-smoke-light); padding: 1rem 1.15rem; transition: box-shadow 200ms ease, border-color 500ms ease, outline-color 600ms ease; position: relative; display: flex; flex-direction: column; isolation: isolate; height: 100%; overflow: hidden; outline: 1px solid transparent; } .tile h3 { font-size: 0.85rem; } .tile:hover, .tile:focus-visible { box-shadow: var(--box-shadow-light); outline-offset: -4px; } .tile:hover .metric-icon .icon, .tile:focus-visible .metric-icon .icon { filter: brightness(1); text-shadow: var(--text-shadow-light); } .tile:hover .metric-value, .tile:focus-visible .metric-value { text-shadow: var(--text-shadow-med); } .tile:hover .metric-label, .tile:focus-visible .metric-label { opacity: 1; } .tile:hover .noDataMsg p, .tile:focus-visible .noDataMsg p { opacity: 1; } .tile.tile-type-value .tile-titlebar { border-bottom: transparent; padding-bottom: 0; margin-bottom: 0; display: none; } .tile.tile-type-chart .metric-label.add-margin { margin-bottom: 1rem; } .tile.tile-type-chart .metric-container { height: 100%; } .tile.side-layout .metric-container { display: grid; column-gap: 2rem; align-items: center; } .tile.side-layout .metric-container.side-choropleth { grid-template-columns: 30rem auto; } .tile.side-layout .metric-container.side-scatterplot { grid-template-columns: 70% auto; } .tile.side-layout .metric-left-side { height: 100%; } .tile.side-layout .metric-right-side { height: 100%; } .tile.special { background: var(--clr-primary); color: var(--clr-light); transition: background 300ms linear; } .tile.special .tile-titlebar h3 { transition: color 300ms linear; } .tile.special .metric-icon .icon[class*=icon-] { color: var(--clr-light); filter: brightness(1); } .tile.special .help-link .icon, .tile.special .encircle, .tile.special .pipe, .tile.special .filter-btn .icon, .tile.special .maximize-btn .icon, .tile.special .minimize-btn .icon { color: var(--clr-primary-l2); border-color: var(--clr-primary-l2); } .tile.special .spx-bg { display: block; } .tile.special .noDataMsg p { color: var(--clr-light); opacity: 1; } .tile.special .chart-container div[class*=-container] { padding: 0.5rem !important; } .tile.special:hover, .tile.special:focus-visible { background: var(--clr-secondary); color: var(--clr-secondary-contrast); } .tile.special:hover .metric-icon .icon, .tile.special:focus-visible .metric-icon .icon { color: var(--clr-secondary-contrast); } .tile.special:hover .help-link .icon, .tile.special:hover .encircle, .tile.special:hover .pipe, .tile.special:hover .filter-btn .icon, .tile.special:hover .maximize-btn .icon, .tile.special:hover .minimize-btn .icon, .tile.special:focus-visible .help-link .icon, .tile.special:focus-visible .encircle, .tile.special:focus-visible .pipe, .tile.special:focus-visible .filter-btn .icon, .tile.special:focus-visible .maximize-btn .icon, .tile.special:focus-visible .minimize-btn .icon { color: var(--clr-light); border-color: var(--clr-light); } .tile.special:hover .tracker-fill, .tile.special:focus-visible .tracker-fill { background: var(--clr-tertiary-l2) !important; } .tile.special:hover .location-combobox.locbox-sidechoro, .tile.special:focus-visible .location-combobox.locbox-sidechoro { border-color: var(--clr-secondary-contrast); } .tile.special:hover .spx-bg, .tile.special:focus-visible .spx-bg { opacity: 0.3; } .tile.special:hover .spx-bg path, .tile.special:focus-visible .spx-bg path { fill: var(--clr-secondary-l2); } .tile.special:hover .partner-link, .tile.special:focus-visible .partner-link { border-color: var(--clr-dark-gray); color: var(--clr-dark-gray); } .tile .spx-bg { display: none; position: absolute; bottom: 0; left: 0; width: 50%; z-index: 0; opacity: 0.15; } .tile .spx-bg path { transition: fill 120ms ease; fill: var(--clr-primary-l1); } .tile .spinner-container { margin-inline: auto; } .tile .spinner-container .spinning-ball { transition: background-color 300ms ease; } .tile:hover .spinner-container .spinning-ball.ball-1, .tile:hover .spinner-container .spinning-ball.ball-6, .tile:focus-visible .spinner-container .spinning-ball.ball-1, .tile:focus-visible .spinner-container .spinning-ball.ball-6 { background-color: var(--clr-secondary-l2) !important; } .tile:hover .spinner-container .spinning-ball.ball-2, .tile:hover .spinner-container .spinning-ball.ball-7, .tile:focus-visible .spinner-container .spinning-ball.ball-2, .tile:focus-visible .spinner-container .spinning-ball.ball-7 { background-color: var(--clr-secondary-l1) !important; } .tile:hover .spinner-container .spinning-ball.ball-3, .tile:hover .spinner-container .spinning-ball.ball-8, .tile:focus-visible .spinner-container .spinning-ball.ball-3, .tile:focus-visible .spinner-container .spinning-ball.ball-8 { background-color: var(--clr-secondary) !important; } .tile:hover .spinner-container .spinning-ball.ball-4, .tile:focus-visible .spinner-container .spinning-ball.ball-4 { background-color: var(--clr-secondary-d1) !important; } .tile:hover .spinner-container .spinning-ball.ball-5, .tile:focus-visible .spinner-container .spinning-ball.ball-5 { background-color: var(--clr-secondary-d2) !important; } .tile-titlebar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.5rem; margin-bottom: 0.5rem; margin-right: 1.85rem; } .top-icons { display: flex; column-gap: 0.5rem; position: absolute; top: 1rem; right: 1.15rem; z-index: 150; align-items: center; } .top-icons .stat-icons { display: flex; column-gap: 0.25rem; align-items: center; } .top-icons .maximize-btn, .top-icons .minimize-btn, .top-icons .filter-btn { background: none; border: none; cursor: pointer; transition: scale 200ms ease; } .top-icons .maximize-btn .icon, .top-icons .minimize-btn .icon, .top-icons .filter-btn .icon { color: var(--clr-dark-gray); opacity: 0.6; transition: all 120ms; font-size: 0.85rem; } .top-icons .maximize-btn:hover, .top-icons .maximize-btn:focus-visible, .top-icons .minimize-btn:hover, .top-icons .minimize-btn:focus-visible, .top-icons .filter-btn:hover, .top-icons .filter-btn:focus-visible { scale: 1.45; } .top-icons .maximize-btn:hover .icon, .top-icons .maximize-btn:focus-visible .icon, .top-icons .minimize-btn:hover .icon, .top-icons .minimize-btn:focus-visible .icon, .top-icons .filter-btn:hover .icon, .top-icons .filter-btn:focus-visible .icon { color: var(--clr-tertiary-l4); opacity: 1; } .top-icons button.filter-btn:hover, .top-icons button.filter-btn:focus-visible { scale: 1.45; } .top-icons button.filter-btn:hover .icon, .top-icons button.filter-btn:focus-visible .icon { color: var(--clr-red); opacity: 1; } .top-icons button.filter-btn:hover .icon.unknown-filtered, .top-icons button.filter-btn:focus-visible .icon.unknown-filtered { color: var(--clr-orange-d2); opacity: 1; } .top-icons button.filter-btn .unknown-filtered { color: var(--clr-red-d2); opacity: 1; } .top-icons button.filter-btn:hover, .top-icons button.filter-btn:focus-visible { scale: 1.45; } .top-icons button.filter-btn:hover .icon, .top-icons button.filter-btn:focus-visible .icon { color: var(--clr-red); opacity: 1; } .top-icons button.filter-btn:hover .icon.normalized-active, .top-icons button.filter-btn:focus-visible .icon.normalized-active { color: var(--clr-orange-d2); } .top-icons button.filter-btn .normalized-active { color: var(--clr-red-d2); } .top-icons .encircle { color: var(--clr-dark-gray); opacity: 0.6; transition: all 120ms; font-size: 0.8rem; width: 0.9rem; height: 0.9rem; display: flex; place-content: center; cursor: help; } .top-icons .encircle .icon { display: flex; } .top-icons .encircle .icon::before { margin: auto; } .top-icons .encircle:hover, .top-icons .encircle:focus-visible { color: var(--clr-primary); opacity: 1; scale: 1.45; } .top-icons .pipe { color: var(--clr-dark-gray50); opacity: 0.6; font-size: 0.8rem; width: 0.9rem; height: 0.9rem; display: flex; place-content: center; } .help-link { transition: scale 200ms ease; } .help-link .icon { color: var(--clr-dark-gray); opacity: 0.6; transition: all 120ms; font-size: 0.85rem; } .help-link:hover, .help-link:focus-visible { scale: 1.45; } .help-link:hover .icon, .help-link:focus-visible .icon { color: var(--clr-secondary); opacity: 1; } .help-link:hover .icon::before, .help-link:focus-visible .icon::before { content: "\e90a"; } .metric-container, .profile-card-content { margin-block: auto; margin-left: 0; z-index: 10; position: relative; } .tile-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 1200; } .tile-modal { width: 85dvw; height: 85dvh; background: inherit; border-radius: var(--round-small); box-shadow: var(--box-shadow); } .tile-modal .tile-modal-content { width: 100%; height: 100%; margin: 0; border-radius: inherit; } .tile-modal .metric-container { overflow-y: auto; } .tile-modal .chart-container { padding: 0 1.5rem 1.5rem 1.5rem; } .tile-modal .metric-icon, .tile-modal .metric-value, .tile-modal .metric-label { display: none; } .profile-card-content .metric-value { margin-block: 0.25rem; display: flex; flex-direction: row; align-items: baseline; } .profile-card-content .metric-value .unit { display: inline-block; margin-left: 0.25rem; } .metric-left-side { display: flex; flex-direction: column; height: 100%; } .metric-icon .icon { font-size: 1.75rem; filter: brightness(0.85); } .metric-icon .icon.icon-churn { color: var(--clr-red); } .metric-icon .icon.icon-customers { color: var(--clr-primary); } .metric-icon .icon.icon-growth { color: var(--clr-green); } .metric-icon .icon.icon-retention { color: var(--clr-secondary); } .metric-icon .icon.icon-rider { color: var(--clr-red); } .metric-icon .icon.icon-eload { color: var(--clr-green); } .metric-icon .icon.icon-ewallet { color: var(--clr-brown); } .metric-icon .icon.icon-govt { color: var(--clr-purple); } .metric-icon .icon.icon-utility { color: var(--clr-orange); } .metric-icon .icon.icon-gaming { color: var(--clr-violet); } @media screen and (min-width: 1600px) { .metric-icon .icon { font-size: 2rem; } } .metric-icon.add-margin { margin-bottom: 1rem; } .metric-top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .metric-label { font-size: 0.725rem; font-weight: 500; opacity: 0.5; transition: opacity 200ms ease; } .metric-caption { font-size: 0.685rem; font-weight: 500; opacity: 0.45; transition: opacity 200ms ease; } .metric-value { font-size: 2.2rem; font-weight: 500; transition: text-shadow 200ms ease; } .metric-value .unit, .metric-value .abbrevUnit { font-weight: 600; } .metric-value .unit { font-size: 1rem; } .metric-value.segment-label { display: flex; align-items: center; gap: 0.5rem; } .noDataMsg { position: absolute; inset: 0; place-content: center; padding: 1rem 1.25rem; display: none; } .noDataMsg p { margin: auto; width: fit-content; font-weight: 500; opacity: 0.5; transition: opacity 120ms ease; } .tile.noData { min-height: 7rem; } .tile.noData .tile-titlebar { display: block; } .tile.noData .metric-container { display: none; } .tile.noData .noDataMsg { display: flex; } .helpbox { background: var(--clr-primary-d1); padding: 0.5rem 1rem; border-radius: var(--round-tiny); box-shadow: var(--box-shadow); z-index: 9999; max-width: 70ch; width: fit-content; min-width: 25ch; animation: fadeIn 350ms ease-in; } .helpbox p { font-size: 0.8rem; font-weight: 300; color: var(--clr-light); } .helpbox .tail { position: absolute; width: 0.5rem; height: 0.5rem; background: var(--clr-primary-d1); transform: rotate(45deg); } .clickHelpLink { color: var(--clr-secondary-l2); font-weight: 500; font-size: 0.8em; text-decoration: none; } .helpBold { font-weight: 600; } .chart-container { height: 100%; flex-grow: 1; display: grid; } .chart-container div[class*=-container] { margin-block: auto; display: flex; flex-direction: column; gap: 1.25rem; } .chart-container div[class*=-container].flex-bottom, .chart-container div[class*=-container].flex-top, .chart-container div[class*=-container].grid-bottom, .chart-container div[class*=-container].grid-top { display: flex; flex-direction: column; } .chart-container div[class*=-container].flex-left, .chart-container div[class*=-container].flex-right, .chart-container div[class*=-container].grid-left, .chart-container div[class*=-container].grid-right { display: grid; } .chart-container div[class*=-container].flex-left, .chart-container div[class*=-container].grid-left { grid-template-columns: auto 1fr; } .chart-container div[class*=-container].flex-right, .chart-container div[class*=-container].grid-right { grid-template-columns: 1fr auto; } .chart-container div[class*=-container].grid-none, .chart-container div[class*=-container].flex-none { display: flex; } .chart-container .preloading-box { display: flex; place-content: center; } .tile-primary { background: var(--clr-primary); border-color: var(--clr-primary); } .tile-primary:hover, .tile-primary:focus-visible { border-color: var(--clr-primary-d1); } .tile.segment-tile { color: var(--clr-light); border: none; background: var(--clr-dark); } .tile.segment-tile .metric-icon .icon[class*=icon-] { color: var(--clr-light); filter: brightness(1); } .tile.segment-tile .help-link .icon, .tile.segment-tile .encircle, .tile.segment-tile .pipe { color: var(--clr-light); border-color: var(--clr-light); } .tile.segment-tile .rfm-caption { display: none; } .tile.segment-tile:hover, .tile.segment-tile:focus-visible { border-color: var(--clr-light-50); outline: 1px solid var(--clr-light-50); } .tile.segment-tile:hover .metric-caption, .tile.segment-tile:focus-visible .metric-caption { opacity: 0.9; } .tile.stage-new, .tile.stage-New { background: linear-gradient(45deg, var(--clr-green), var(--clr-green-d2)); } .tile.stage-top, .tile.stage-Top { background: linear-gradient(45deg, var(--clr-primary), var(--clr-primary-d2)); } .tile.stage-consistent, .tile.stage-Consistent { background: linear-gradient(45deg, var(--clr-secondary), var(--clr-secondary-d2)); } .tile.stage-active, .tile.stage-Active { background: linear-gradient(45deg, var(--clr-tertiary-l2), var(--clr-tertiary-d1)); } .tile.stage-inactive, .tile.stage-Inactive { background: linear-gradient(45deg, var(--clr-violet-d1), var(--clr-violet-d2)); } .tile.stage-churned, .tile.stage-Churned { background: linear-gradient(45deg, var(--clr-red-d1), var(--clr-red-d2)); } .tile.freq-daily, .tile.freq-Daily { background: linear-gradient(45deg, var(--clr-green-l1), var(--clr-green-d2)); } .tile.freq-weekly, .tile.freq-Weekly { background: linear-gradient(45deg, var(--clr-pink-l1), var(--clr-pink-d2)); } .tile.freq-monthly, .tile.freq-Monthly { background: linear-gradient(45deg, var(--clr-tertiary-l3), var(--clr-tertiary-l1)); } .tile.freq-infrequent, .tile.freq-Infrequent { background: linear-gradient(45deg, var(--clr-brown), var(--clr-brown-d2)); } .tile.rfm-champions, .tile.rfm-loyalcustomers, .tile.rfm-bigspenders, .tile.rfm-recentcustomers, .tile.rfm-powerusers { background: linear-gradient(45deg, var(--clr-primary), var(--clr-primary-d2)); } .tile.rfm-potentialloyalists, .tile.rfm-promising, .tile.rfm-occasionalwhale, .tile.rfm-highpotential { background: linear-gradient(45deg, var(--clr-tertiary-l2), var(--clr-tertiary-d1)); } .tile.rfm-needattention, .tile.rfm-abouttosleep, .tile.rfm-atrisk, .tile.rfm-cantlose_them { background: linear-gradient(45deg, var(--clr-orange), var(--clr-orange-d2)); } .tile.rfm-hibernating, .tile.rfm-lost, .tile.rfm-slippingaway { background: linear-gradient(45deg, var(--clr-red), var(--clr-red-d2)); } .tile.rfm-lowsignal { background: linear-gradient(45deg, var(--clr-dark-gray80), var(--clr-dark-gray)); } .tile.rfm-lowsignal .caption-low_signal { display: block; } .tile.rfm-champions .caption-champions { display: block; } .tile.rfm-loyalcustomers .caption-loyal_customers { display: block; } .tile.rfm-bigspenders .caption-big_spenders { display: block; } .tile.rfm-occasionalwhale .caption-occasional_whale { display: block; } .tile.rfm-potentialloyalists .caption-potential_loyalists { display: block; } .tile.rfm-recentcustomers .caption-recent_customers { display: block; } .tile.rfm-promising .caption-promising { display: block; } .tile.rfm-highpotential .caption-high_potential { display: block; } .tile.rfm-needattention .caption-need_attention { display: block; } .tile.rfm-atrisk .caption-at_risk { display: block; } .tile.rfm-cantlose_them .caption-cant_lose_them { display: block; } .tile.rfm-slippingaway .caption-slipping_away { display: block; } .tile.rfm-abouttosleep .caption-about_to_sleep { display: block; } .tile.rfm-hibernating .caption-hibernating { display: block; } .tile.rfm-powerusers .caption-power_users { display: block; } .tile.rfm-lost .caption-lost { display: block; }.sunburst-container svg.animation-complete .bar, .sunburst-container svg.animation-complete .circle, .sunburst-container svg.animation-complete .segment, .sunburst-container svg.animation-complete .center-icon, .sunburst-container svg.animation-complete .array-icon { cursor: pointer; } .sunburst-container svg .segment { transition: filter 300ms ease; } .sunburst-container svg .segment:hover, .sunburst-container svg .segment:focus-visible { filter: brightness(0.85) saturate(3) !important; } .sunburst-container svg .center-icon svg { transition: all 200ms ease; } .sunburst-container svg .center-icon:hover svg, .sunburst-container svg .center-icon:focus-visible svg { opacity: 1 !important; } .sunburst-container svg .legend-item circle, .sunburst-container svg .legend-item rect { transition: all 300ms ease; } .sunburst-container svg .legend-item.segment-hover circle, .sunburst-container svg .legend-item.segment-hover rect, .sunburst-container svg .legend-item.icon-hover circle, .sunburst-container svg .legend-item.icon-hover rect { r: 7px; height: 14px; width: 14px; translate: -1px -1px; filter: brightness(0.85) saturate(3) !important; } .sunburst-container svg .array-icon { transition: all 300ms ease; } .sunburst-container svg .array-icon.icon-hover { scale: 1.1; } .sunburst-container svg .array-icon.icon-hover .colorswap { filter: brightness(0.85) saturate(3) !important; } .sunburst-container svg .array-icon.zero-icon { filter: saturate(0.15); } .sunburst-container svg .array-icon.zero-icon:hover, .sunburst-container svg .array-icon.zero-icon:focus-visible { filter: saturate(1); } .pie-container .value-label { text-shadow: var(--text-shadow-med); } .sunburst-with-radial { display: flex; gap: 20px; align-items: flex-start; } .sunburst-with-radial-active { display: flex; flex-direction: column; gap: 20px; } .charts-row { display: flex; gap: 20px; align-items: flex-start; } .radial-segment-chart { padding: 10px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9; } .radial-container text { cursor: default !important; } .radial-ring { cursor: default !important; transition: filter 300ms ease; } .radial-ring.hover-ring { filter: brightness(0.85) saturate(3) !important; } .radial-segment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .radial-segment-title { margin: 0; font-size: 14px; } .radial-segment-close { padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer; font-size: 12px; } .charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: flex-start; } .sunburst-with-radial-active .chart-legend.radial-legend { display: flex; flex-wrap: wrap; width: 100%; justify-content: center; gap: 1.25rem; }.chart-legend { width: fit-content; display: grid; } .chart-legend .legend-item { font-family: var(--font-basic); display: grid; grid-template-columns: 1rem auto; align-items: center; cursor: pointer; column-gap: 0.25rem; row-gap: 0.25rem; padding: 0.3rem 0.4rem; border-radius: var(--round-small); transition: border-color 300ms linear, background-color 300ms linear; border: 1px solid transparent; color: var(--clr-dark-gray80); } .chart-legend .legend-item.legend-item-hidden .legend-symbol { opacity: 0.3; } .chart-legend .legend-item.legend-item-hidden .legend-label { opacity: 0.5; text-decoration: line-through; } .chart-legend .legend-item.legend-item-hidden .legend-info { opacity: 0.2; } .chart-legend .legend-item.legend-item-dim { filter: saturate(0.5); opacity: 0.5; } .chart-legend .legend-item.no-symbol { grid-template-columns: 1fr; } .chart-legend .legend-item.no-symbol .legend-label, .chart-legend .legend-item.no-symbol .legend-info { grid-column: 1/2; } .chart-legend .legend-item[data-category=outliers] { margin-top: 2rem; } .chart-legend .legend-item[data-category=outliers] .legend-label { font-style: italic; } .chart-legend .legend-item:hover, .chart-legend .legend-item:focus-visible { background: var(--clr-smoke); border-color: var(--clr-smoke-light); } .chart-legend .legend-item:hover .legend-label, .chart-legend .legend-item:hover .legend-info, .chart-legend .legend-item:focus-visible .legend-label, .chart-legend .legend-item:focus-visible .legend-info { color: var(--clr-dark-gray); } .chart-legend .legend-unit { font-size: 0.6rem; color: var(--clr-dark-gray); opacity: 0.5; font-weight: 500; } .chart-legend .legend-label { font-size: 0.75rem; grid-column: 2/3; grid-row: 1/2; } .chart-legend .legend-symbol { grid-column: 1/2; grid-row: 1/2; display: block; margin: auto; width: 0.75rem; transition: scale 180ms ease, filter 180ms ease; } .chart-legend .legend-symbol.legend-line { height: 0.75rem; border-radius: 50%; } .chart-legend .legend-symbol.legend-segment, .chart-legend .legend-symbol.legend-bar { height: 0.75rem; border-radius: var(--round-tiny); } .chart-legend .legend-info { grid-row: 2/3; grid-column: 2/3; font-size: 1.75rem; font-weight: 300; min-width: 6rem; } .chart-legend .legend-item-link .legend-info { position: relative; } .chart-legend .legend-item-link .legend-info::after { content: "\e939"; position: absolute; font-size: 0.75rem; right: 0.15rem; top: 50%; color: var(--clr-dark-gray); font-family: "icomoon"; transform: translateY(-50%) translateX(-50%); animation: slideToRight 200ms ease-out forwards; display: none; } .chart-legend .legend-item-link:hover .legend-info::after, .chart-legend .legend-item-link:focus-visible .legend-info::after { display: block; } .chart-legend.legend-top { order: -1; } .chart-legend.legend-left { float: left; order: -1; } .chart-legend.legend-right { float: right; } .chart-legend.legend-right, .chart-legend.legend-left { grid-auto-flow: row; gap: 0.25rem; margin-block: auto; grid-template-rows: repeat(6, auto); } .chart-legend.legend-right .legend-item, .chart-legend.legend-left .legend-item { width: 100%; min-width: 9rem; max-width: 20ch; } .chart-legend.legend-right .legend-item.peso-width, .chart-legend.legend-left .legend-item.peso-width { min-width: 11rem; max-width: unset; } .chart-legend.legend-bottom, .chart-legend.legend-top { grid-auto-flow: column; grid-template-columns: 1fr; width: max-content; margin-inline: auto; gap: 1.25rem; } .chart-legend.legend-bottom.legend-flex-true { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; gap: 0.5rem; } .chart-legend.legend-bottom.legend-flex-true .legend-item { margin-inline: auto; } .chart-legend.multicol.legend-right, .chart-legend.multicol.legend-left { grid-template-columns: repeat(6, auto); } .chart-legend.multicol.legend-right.multicol-2, .chart-legend.multicol.legend-left.multicol-2 { grid-template-columns: repeat(2, auto); } .chart-legend.multicol.legend-right.multicol-3, .chart-legend.multicol.legend-left.multicol-3 { grid-template-columns: repeat(3, auto); } .chart-legend.multicol.legend-right.multicol-4, .chart-legend.multicol.legend-left.multicol-4 { grid-template-columns: repeat(4, auto); } .chart-legend.multicol.legend-right.multicol-5, .chart-legend.multicol.legend-left.multicol-5 { grid-template-columns: repeat(5, auto); } .chart-legend.multicol.legend-right.multicol-6, .chart-legend.multicol.legend-left.multicol-6 { grid-template-columns: repeat(6, auto); } .chart-legend.multicol.legend-right.multicol-7, .chart-legend.multicol.legend-right.multicol-8, .chart-legend.multicol.legend-right.multicol-9, .chart-legend.multicol.legend-right.multicol-10, .chart-legend.multicol.legend-right.multicol-11, .chart-legend.multicol.legend-right.multicol-12, .chart-legend.multicol.legend-right.multicol-13, .chart-legend.multicol.legend-right.multicol-14, .chart-legend.multicol.legend-right.multicol-15, .chart-legend.multicol.legend-right.multicol-16, .chart-legend.multicol.legend-right.multicol-17, .chart-legend.multicol.legend-right.multicol-18, .chart-legend.multicol.legend-right.multicol-19, .chart-legend.multicol.legend-right.multicol-20, .chart-legend.multicol.legend-right.multicol-21, .chart-legend.multicol.legend-right.multicol-22, .chart-legend.multicol.legend-right.multicol-23, .chart-legend.multicol.legend-right.multicol-24, .chart-legend.multicol.legend-left.multicol-7, .chart-legend.multicol.legend-left.multicol-8, .chart-legend.multicol.legend-left.multicol-9, .chart-legend.multicol.legend-left.multicol-10, .chart-legend.multicol.legend-left.multicol-11, .chart-legend.multicol.legend-left.multicol-12, .chart-legend.multicol.legend-left.multicol-13, .chart-legend.multicol.legend-left.multicol-14, .chart-legend.multicol.legend-left.multicol-15, .chart-legend.multicol.legend-left.multicol-16, .chart-legend.multicol.legend-left.multicol-17, .chart-legend.multicol.legend-left.multicol-18, .chart-legend.multicol.legend-left.multicol-19, .chart-legend.multicol.legend-left.multicol-20, .chart-legend.multicol.legend-left.multicol-21, .chart-legend.multicol.legend-left.multicol-22, .chart-legend.multicol.legend-left.multicol-23, .chart-legend.multicol.legend-left.multicol-24 { display: none; } .chart-legend.multicol.legend-right.noInfo, .chart-legend.multicol.legend-left.noInfo { min-height: 20rem; } .chart-legend .legend-hover .legend-symbol { scale: 1.1; filter: brightness(0.85) saturate(3) !important; } .chart-legend .legend-hover .legend-label, .chart-legend .legend-hover .legend-info { color: var(--clr-dark-gray); }/* required styles */ .leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-pane > svg, .leaflet-pane > canvas, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer { position: absolute; left: 0; top: 0; } .leaflet-container { overflow: hidden; } .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none; } /* Prevents IE11 from highlighting tiles in blue */ .leaflet-tile::selection { background: transparent; } /* Safari renders non-retina tile on retina better with this, but Chrome is worse */ .leaflet-safari .leaflet-tile { image-rendering: -webkit-optimize-contrast; } /* hack that prevents hw layers "stretching" when loading new tiles */ .leaflet-safari .leaflet-tile-container { width: 1600px; height: 1600px; -webkit-transform-origin: 0 0; } .leaflet-marker-icon, .leaflet-marker-shadow { display: block; } /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */ /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */ .leaflet-container .leaflet-overlay-pane svg { max-width: none !important; max-height: none !important; } .leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile-pane img, .leaflet-container img.leaflet-image-layer, .leaflet-container .leaflet-tile { max-width: none !important; max-height: none !important; width: auto; padding: 0; } .leaflet-container img.leaflet-tile { /* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */ mix-blend-mode: plus-lighter; } .leaflet-container.leaflet-touch-zoom { -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; } .leaflet-container.leaflet-touch-drag { -ms-touch-action: pinch-zoom; /* Fallback for FF which doesn't support pinch-zoom */ touch-action: none; touch-action: pinch-zoom; } .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom { -ms-touch-action: none; touch-action: none; } .leaflet-container { -webkit-tap-highlight-color: transparent; } .leaflet-container a { -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4); } .leaflet-tile { filter: inherit; visibility: hidden; } .leaflet-tile-loaded { visibility: inherit; } .leaflet-zoom-box { width: 0; height: 0; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 800; } /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ .leaflet-overlay-pane svg { -moz-user-select: none; } .leaflet-pane { z-index: 400; } .leaflet-tile-pane { z-index: 200; } .leaflet-overlay-pane { z-index: 400; } .leaflet-shadow-pane { z-index: 500; } .leaflet-marker-pane { z-index: 600; } .leaflet-tooltip-pane { z-index: 650; } .leaflet-popup-pane { z-index: 700; } .leaflet-map-pane canvas { z-index: 100; } .leaflet-map-pane svg { z-index: 200; } .leaflet-vml-shape { width: 1px; height: 1px; } .lvml { behavior: url(#default#VML); display: inline-block; position: absolute; } /* control positioning */ .leaflet-control { position: relative; z-index: 800; pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ pointer-events: auto; } .leaflet-top, .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; } .leaflet-top { top: 0; } .leaflet-right { right: 0; } .leaflet-bottom { bottom: 0; } .leaflet-left { left: 0; } .leaflet-control { float: left; clear: both; } .leaflet-right .leaflet-control { float: right; } .leaflet-top .leaflet-control { margin-top: 10px; } .leaflet-bottom .leaflet-control { margin-bottom: 10px; } .leaflet-left .leaflet-control { margin-left: 10px; } .leaflet-right .leaflet-control { margin-right: 10px; } /* zoom and fade animations */ .leaflet-fade-anim .leaflet-popup { opacity: 0; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .leaflet-fade-anim .leaflet-map-pane .leaflet-popup { opacity: 1; } .leaflet-zoom-animated { -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } svg.leaflet-zoom-animated { will-change: transform; } .leaflet-zoom-anim .leaflet-zoom-animated { -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); transition: transform 0.25s cubic-bezier(0,0,0.25,1); } .leaflet-zoom-anim .leaflet-tile, .leaflet-pan-anim .leaflet-tile { -webkit-transition: none; -moz-transition: none; transition: none; } .leaflet-zoom-anim .leaflet-zoom-hide { visibility: hidden; } /* cursors */ .leaflet-interactive { cursor: pointer; } .leaflet-grab { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .leaflet-crosshair, .leaflet-crosshair .leaflet-interactive { cursor: crosshair; } .leaflet-popup-pane, .leaflet-control { cursor: auto; } .leaflet-dragging .leaflet-grab, .leaflet-dragging .leaflet-grab .leaflet-interactive, .leaflet-dragging .leaflet-marker-draggable { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } /* marker & overlays interactivity */ .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-image-layer, .leaflet-pane > svg path, .leaflet-tile-container { pointer-events: none; } .leaflet-marker-icon.leaflet-interactive, .leaflet-image-layer.leaflet-interactive, .leaflet-pane > svg path.leaflet-interactive, svg.leaflet-image-layer.leaflet-interactive path { pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ pointer-events: auto; } /* visual tweaks */ .leaflet-container { background: #ddd; outline-offset: 1px; } .leaflet-container a { color: #0078A8; } .leaflet-zoom-box { border: 2px dotted #38f; background: rgba(255,255,255,0.5); } /* general typography */ .leaflet-container { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 12px; font-size: 0.75rem; line-height: 1.5; } /* general toolbar styles */ .leaflet-bar { box-shadow: 0 1px 5px rgba(0,0,0,0.65); border-radius: 4px; } .leaflet-bar a { background-color: #fff; border-bottom: 1px solid #ccc; width: 26px; height: 26px; line-height: 26px; display: block; text-align: center; text-decoration: none; color: black; } .leaflet-bar a, .leaflet-control-layers-toggle { background-position: 50% 50%; background-repeat: no-repeat; display: block; } .leaflet-bar a:hover, .leaflet-bar a:focus { background-color: #f4f4f4; } .leaflet-bar a:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .leaflet-bar a:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: none; } .leaflet-bar a.leaflet-disabled { cursor: default; background-color: #f4f4f4; color: #bbb; } .leaflet-touch .leaflet-bar a { width: 30px; height: 30px; line-height: 30px; } .leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: 2px; border-top-right-radius: 2px; } .leaflet-touch .leaflet-bar a:last-child { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } /* zoom control */ .leaflet-control-zoom-in, .leaflet-control-zoom-out { font: bold 18px 'Lucida Console', Monaco, monospace; text-indent: 1px; } .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out { font-size: 22px; } /* layers control */ .leaflet-control-layers { box-shadow: 0 1px 5px rgba(0,0,0,0.4); background: #fff; border-radius: 5px; } .leaflet-control-layers-toggle { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC); width: 36px; height: 36px; } .leaflet-retina .leaflet-control-layers-toggle { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=); background-size: 26px 26px; } .leaflet-touch .leaflet-control-layers-toggle { width: 44px; height: 44px; } .leaflet-control-layers .leaflet-control-layers-list, .leaflet-control-layers-expanded .leaflet-control-layers-toggle { display: none; } .leaflet-control-layers-expanded .leaflet-control-layers-list { display: block; position: relative; } .leaflet-control-layers-expanded { padding: 6px 10px 6px 6px; color: #333; background: #fff; } .leaflet-control-layers-scrollbar { overflow-y: scroll; overflow-x: hidden; padding-right: 5px; } .leaflet-control-layers-selector { margin-top: 2px; position: relative; top: 1px; } .leaflet-control-layers label { display: block; font-size: 13px; font-size: 1.08333em; } .leaflet-control-layers-separator { height: 0; border-top: 1px solid #ddd; margin: 5px -10px 5px -6px; } /* Default icon URLs */ .leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=); } /* attribution and scale controls */ .leaflet-container .leaflet-control-attribution { background: #fff; background: rgba(255, 255, 255, 0.8); margin: 0; } .leaflet-control-attribution, .leaflet-control-scale-line { padding: 0 5px; color: #333; line-height: 1.4; } .leaflet-control-attribution a { text-decoration: none; } .leaflet-control-attribution a:hover, .leaflet-control-attribution a:focus { text-decoration: underline; } .leaflet-attribution-flag { display: inline !important; vertical-align: baseline !important; width: 1em; height: 0.6669em; } .leaflet-left .leaflet-control-scale { margin-left: 5px; } .leaflet-bottom .leaflet-control-scale { margin-bottom: 5px; } .leaflet-control-scale-line { border: 2px solid #777; border-top: none; line-height: 1.1; padding: 2px 5px 1px; white-space: nowrap; -moz-box-sizing: border-box; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); text-shadow: 1px 1px #fff; } .leaflet-control-scale-line:not(:first-child) { border-top: 2px solid #777; border-bottom: none; margin-top: -2px; } .leaflet-control-scale-line:not(:first-child):not(:last-child) { border-bottom: 2px solid #777; } .leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { box-shadow: none; } .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { border: 2px solid rgba(0,0,0,0.2); background-clip: padding-box; } /* popup */ .leaflet-popup { position: absolute; text-align: center; margin-bottom: 20px; } .leaflet-popup-content-wrapper { padding: 1px; text-align: left; border-radius: 12px; } .leaflet-popup-content { margin: 13px 24px 13px 20px; line-height: 1.3; font-size: 13px; font-size: 1.08333em; min-height: 1px; } .leaflet-popup-content p { margin: 17px 0; margin: 1.3em 0; } .leaflet-popup-tip-container { width: 40px; height: 20px; position: absolute; left: 50%; margin-top: -1px; margin-left: -20px; overflow: hidden; pointer-events: none; } .leaflet-popup-tip { width: 17px; height: 17px; padding: 1px; margin: -10px auto 0; pointer-events: auto; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: white; color: #333; box-shadow: 0 3px 14px rgba(0,0,0,0.4); } .leaflet-container a.leaflet-popup-close-button { position: absolute; top: 0; right: 0; border: none; text-align: center; width: 24px; height: 24px; font: 16px/24px Tahoma, Verdana, sans-serif; color: #757575; text-decoration: none; background: transparent; } .leaflet-container a.leaflet-popup-close-button:hover, .leaflet-container a.leaflet-popup-close-button:focus { color: #585858; } .leaflet-popup-scrolled { overflow: auto; } .leaflet-oldie .leaflet-popup-content-wrapper { -ms-zoom: 1; } .leaflet-oldie .leaflet-popup-tip { width: 24px; margin: 0 auto; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); } .leaflet-oldie .leaflet-control-zoom, .leaflet-oldie .leaflet-control-layers, .leaflet-oldie .leaflet-popup-content-wrapper, .leaflet-oldie .leaflet-popup-tip { border: 1px solid #999; } /* div icon */ .leaflet-div-icon { background: #fff; border: 1px solid #666; } /* Tooltip */ /* Base styles for the element that has a tooltip */ .leaflet-tooltip { position: absolute; padding: 6px; background-color: #fff; border: 1px solid #fff; border-radius: 3px; color: #222; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,0.4); } .leaflet-tooltip.leaflet-interactive { cursor: pointer; pointer-events: auto; } .leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before, .leaflet-tooltip-left:before, .leaflet-tooltip-right:before { position: absolute; pointer-events: none; border: 6px solid transparent; background: transparent; content: ""; } /* Directions */ .leaflet-tooltip-bottom { margin-top: 6px; } .leaflet-tooltip-top { margin-top: -6px; } .leaflet-tooltip-bottom:before, .leaflet-tooltip-top:before { left: 50%; margin-left: -6px; } .leaflet-tooltip-top:before { bottom: 0; margin-bottom: -12px; border-top-color: #fff; } .leaflet-tooltip-bottom:before { top: 0; margin-top: -12px; margin-left: -6px; border-bottom-color: #fff; } .leaflet-tooltip-left { margin-left: -6px; } .leaflet-tooltip-right { margin-left: 6px; } .leaflet-tooltip-left:before, .leaflet-tooltip-right:before { top: 50%; margin-top: -6px; } .leaflet-tooltip-left:before { right: 0; margin-right: -12px; border-left-color: #fff; } .leaflet-tooltip-right:before { left: 0; margin-left: -12px; border-right-color: #fff; } /* Printing */ @media print { /* Prevent printers from removing background-images of controls. */ .leaflet-control { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } .leaflet-control-zoom.leaflet-bar.leaflet-control { border: 1px solid var(--clr-smoke-dark); border-radius: var(--round-small); overflow: hidden; } .leaflet-control-zoom.leaflet-bar.leaflet-control a { background: var(--clr-light); transition: 200ms ease; } .leaflet-control-zoom.leaflet-bar.leaflet-control a:hover, .leaflet-control-zoom.leaflet-bar.leaflet-control a:focus-visible { color: var(--clr-light); background: var(--clr-primary-d2); } .legend { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 1000; padding: 10px; background: var(--clr-light); border: 1px solid var(--clr-smoke-dark); border-radius: var(--round-small); font-size: 0.85rem; font-family: var(--font-basic); color: var(--clr-dark); } .legend h5 { font-size: 0.9rem; font-weight: 500; margin-bottom: 0.5rem; } .legend .legend-item { display: flex; align-items: center; line-height: 2; } .legend .legend-item.legend-item-zero .legend-swatch { background-color: var(--clr-smoke-darker); } .legend .legend-item.legend-item-one .legend-swatch { background-color: var(--clr-primary-l2); } .legend .legend-item.legend-item-two .legend-swatch { background-color: var(--clr-primary-l1); } .legend .legend-item.legend-item-three .legend-swatch { background-color: var(--clr-primary); } .legend .legend-item.legend-item-four .legend-swatch { background-color: var(--clr-primary-d1); } .legend .legend-item.legend-item-five .legend-swatch { background-color: var(--clr-primary-d2); } .legend .legend-item .legend-swatch { width: 1rem; height: 1rem; margin-right: 0.3rem; } .choropleth { position: relative; width: 30rem; } .leaflet-container { width: 100% !important; height: 100% !important; } .leaflet-container .selected-area { fill: var(--clr-tertiary); } .leaflet-container .highlight-area { fill: var(--clr-tertiary-l3); }.pyramid-container { margin-bottom: 2rem; } .pyramid-container .bar-male, .pyramid-container .bar-female, .pyramid-container .bar-unknown, .pyramid-container .age-focus-column { cursor: pointer; transition: filter 300ms ease; } .pyramid-container .bar-male:hover, .pyramid-container .bar-male:focus-visible, .pyramid-container .bar-female:hover, .pyramid-container .bar-female:focus-visible, .pyramid-container .bar-unknown:hover, .pyramid-container .bar-unknown:focus-visible, .pyramid-container .age-focus-column:hover, .pyramid-container .age-focus-column:focus-visible { filter: brightness(0.85) saturate(3) !important; } .pyramid-container .y-axis text { text-transform: capitalize; transition: fill 200ms; } .pyramid-container .y-axis text:hover, .pyramid-container .y-axis text:focus-visible { fill: var(--clr-primary); }.linebar-container, .hbar-container, .boxplot-container, .ribbon-container, .scatter-container { position: relative; width: 100%; height: 100%; display: flex; } .linebar-container svg.animation-complete .bar, .linebar-container svg.animation-complete .circle, .hbar-container svg.animation-complete .bar, .hbar-container svg.animation-complete .circle, .boxplot-container svg.animation-complete .bar, .boxplot-container svg.animation-complete .circle, .ribbon-container svg.animation-complete .bar, .ribbon-container svg.animation-complete .circle, .scatter-container svg.animation-complete .bar, .scatter-container svg.animation-complete .circle { cursor: pointer; } .linebar-container svg .single-category .circle, .linebar-container svg .single-category .line, .linebar-container svg .single-category .bar, .hbar-container svg .single-category .circle, .hbar-container svg .single-category .line, .hbar-container svg .single-category .bar, .boxplot-container svg .single-category .circle, .boxplot-container svg .single-category .line, .boxplot-container svg .single-category .bar, .ribbon-container svg .single-category .circle, .ribbon-container svg .single-category .line, .ribbon-container svg .single-category .bar, .scatter-container svg .single-category .circle, .scatter-container svg .single-category .line, .scatter-container svg .single-category .bar { cursor: default; } .linebar-container svg .single-category .circle:active, .linebar-container svg .single-category .circle:focus, .linebar-container svg .single-category .line:active, .linebar-container svg .single-category .line:focus, .linebar-container svg .single-category .bar:active, .linebar-container svg .single-category .bar:focus, .hbar-container svg .single-category .circle:active, .hbar-container svg .single-category .circle:focus, .hbar-container svg .single-category .line:active, .hbar-container svg .single-category .line:focus, .hbar-container svg .single-category .bar:active, .hbar-container svg .single-category .bar:focus, .boxplot-container svg .single-category .circle:active, .boxplot-container svg .single-category .circle:focus, .boxplot-container svg .single-category .line:active, .boxplot-container svg .single-category .line:focus, .boxplot-container svg .single-category .bar:active, .boxplot-container svg .single-category .bar:focus, .ribbon-container svg .single-category .circle:active, .ribbon-container svg .single-category .circle:focus, .ribbon-container svg .single-category .line:active, .ribbon-container svg .single-category .line:focus, .ribbon-container svg .single-category .bar:active, .ribbon-container svg .single-category .bar:focus, .scatter-container svg .single-category .circle:active, .scatter-container svg .single-category .circle:focus, .scatter-container svg .single-category .line:active, .scatter-container svg .single-category .line:focus, .scatter-container svg .single-category .bar:active, .scatter-container svg .single-category .bar:focus { pointer-events: none; /* Disables clicking */ } .linebar-container svg .circle, .hbar-container svg .circle, .boxplot-container svg .circle, .ribbon-container svg .circle, .scatter-container svg .circle { transition: all 300ms ease; } .linebar-container svg .circle.line-hover, .hbar-container svg .circle.line-hover, .boxplot-container svg .circle.line-hover, .ribbon-container svg .circle.line-hover, .scatter-container svg .circle.line-hover { filter: brightness(0.85) saturate(3) !important; z-index: 6; } .linebar-container svg .circle:hover, .linebar-container svg .circle:focus-visible, .hbar-container svg .circle:hover, .hbar-container svg .circle:focus-visible, .boxplot-container svg .circle:hover, .boxplot-container svg .circle:focus-visible, .ribbon-container svg .circle:hover, .ribbon-container svg .circle:focus-visible, .scatter-container svg .circle:hover, .scatter-container svg .circle:focus-visible { r: 6px; } .linebar-container svg .point-embiggen, .hbar-container svg .point-embiggen, .boxplot-container svg .point-embiggen, .ribbon-container svg .point-embiggen, .scatter-container svg .point-embiggen { r: 4px !important; } .linebar-container svg .line.line-hover, .hbar-container svg .line.line-hover, .boxplot-container svg .line.line-hover, .ribbon-container svg .line.line-hover, .scatter-container svg .line.line-hover { filter: brightness(0.85) saturate(3) !important; z-index: 5; } .linebar-container svg .bar, .hbar-container svg .bar, .boxplot-container svg .bar, .ribbon-container svg .bar, .scatter-container svg .bar { transition: filter 300ms ease; } .linebar-container svg .bar:hover, .linebar-container svg .bar:focus-visible, .hbar-container svg .bar:hover, .hbar-container svg .bar:focus-visible, .boxplot-container svg .bar:hover, .boxplot-container svg .bar:focus-visible, .ribbon-container svg .bar:hover, .ribbon-container svg .bar:focus-visible, .scatter-container svg .bar:hover, .scatter-container svg .bar:focus-visible { filter: brightness(0.85) saturate(3) !important; } .linebar-container svg .legend-item circle, .linebar-container svg .legend-item rect, .hbar-container svg .legend-item circle, .hbar-container svg .legend-item rect, .boxplot-container svg .legend-item circle, .boxplot-container svg .legend-item rect, .ribbon-container svg .legend-item circle, .ribbon-container svg .legend-item rect, .scatter-container svg .legend-item circle, .scatter-container svg .legend-item rect { transition: all 300ms ease; } .linebar-container svg .legend-item.legend-hover circle, .linebar-container svg .legend-item.legend-hover rect, .hbar-container svg .legend-item.legend-hover circle, .hbar-container svg .legend-item.legend-hover rect, .boxplot-container svg .legend-item.legend-hover circle, .boxplot-container svg .legend-item.legend-hover rect, .ribbon-container svg .legend-item.legend-hover circle, .ribbon-container svg .legend-item.legend-hover rect, .scatter-container svg .legend-item.legend-hover circle, .scatter-container svg .legend-item.legend-hover rect { r: 7px; height: 14px; width: 14px; translate: -1px -1px; filter: brightness(0.85) saturate(3) !important; } .linebar-container svg .chart-elements, .hbar-container svg .chart-elements, .boxplot-container svg .chart-elements, .ribbon-container svg .chart-elements, .scatter-container svg .chart-elements { opacity: 0; } .linebar-container .x-axis .tick-text { cursor: default; } .linebar-container .x-axis .tick-text:hover, .linebar-container .x-axis .tick-text:focus-visible, .linebar-container .x-axis .tick-text.tick-hover { fill: var(--clr-primary-d1); } .linebar-container .x-axis .tick text { cursor: default; } .linebar-container .x-axis .tick text:hover, .linebar-container .x-axis .tick text:focus-visible, .linebar-container .x-axis .tick text.tick-hover { fill: var(--clr-primary-d1); } .hbar-container svg.animation-complete .bar { cursor: default; } .boxplot-container svg.animation-complete .bar-retained, .boxplot-container svg.animation-complete .bar-new, .boxplot-container svg.animation-complete .bar-churned, .boxplot-container svg.animation-complete circle, .boxplot-container svg.animation-complete line { cursor: default; } .boxplot-container svg.animation-complete .mean-point, .boxplot-container svg.animation-complete .median, .boxplot-container svg.animation-complete .box-half { transition: filter 300ms ease; } .boxplot-container svg.animation-complete .mean-point:hover, .boxplot-container svg.animation-complete .mean-point:focus-visible, .boxplot-container svg.animation-complete .median:hover, .boxplot-container svg.animation-complete .median:focus-visible, .boxplot-container svg.animation-complete .box-half:hover, .boxplot-container svg.animation-complete .box-half:focus-visible { filter: brightness(0.85) saturate(3) !important; } .ribbon-container svg .ribbon-value { pointer-events: none; } .ribbon-container svg.animation-complete .ribbon-segment { cursor: pointer; } .scatter-container svg.animation-complete .scatter-point { cursor: default; transition: opacity 300ms ease, filter 300ms ease; } .scatter-container svg.animation-complete .scatter-point:hover, .scatter-container svg.animation-complete .scatter-point:focus-visible { filter: brightness(0.85) saturate(3) !important; opacity: 0.85 !important; } /* Animation transitions */.treemap-container svg.animation-in-progress .node, .treemap-container svg.animation-in-progress .node rect, .treemap-container svg.animation-in-progress .node text, .treemap-container svg.animation-in-progress .cell, .heatmap-container svg.animation-in-progress .node, .heatmap-container svg.animation-in-progress .node rect, .heatmap-container svg.animation-in-progress .node text, .heatmap-container svg.animation-in-progress .cell { pointer-events: none !important; } .treemap-container svg.animation-complete .node, .treemap-container svg.animation-complete .node rect, .treemap-container svg.animation-complete .node text, .treemap-container svg.animation-complete .cell, .heatmap-container svg.animation-complete .node, .heatmap-container svg.animation-complete .node rect, .heatmap-container svg.animation-complete .node text, .heatmap-container svg.animation-complete .cell { pointer-events: all; cursor: default !important; } .treemap-container svg .node, .heatmap-container svg .node { transition: all 200ms ease; } .treemap-container svg .node.node-hover rect, .heatmap-container svg .node.node-hover rect { filter: hue-rotate(-128deg) saturate(1.515) brightness(1) !important; } .treemap-container svg .cell, .heatmap-container svg .cell { transition: all 300ms ease; } .treemap-container svg .cell.cell-hover, .heatmap-container svg .cell.cell-hover { fill: var(--clr-secondary-l1); opacity: 1 !important; } .treemap-container svg .cell.cell-crosshair, .heatmap-container svg .cell.cell-crosshair { opacity: 0.25 !important; } .treemap-container svg .node-label, .heatmap-container svg .node-label { font-size: 11px; } .treemap-container svg .value-label, .heatmap-container svg .value-label { font-size: 9px; } .treemap-container .stat-list-view, .heatmap-container .stat-list-view { overflow: auto; padding: 0.725rem; display: grid; gap: 0.85rem; }.stat-list-item { display: grid; grid-template-columns: 1.75rem auto; flex-direction: row; gap: 0.5rem; align-items: center; width: 100%; cursor: default; padding: 0.3rem 0.4rem; border-radius: var(--round-small); transition: border-color 300ms linear, background-color 300ms linear; border: 1px solid transparent; } .stat-list-item:hover, .stat-list-item:focus-visible { background: var(--clr-smoke); border-color: var(--clr-smoke-light); } .stat-list-item:hover .stat-list-item-count.tracker-bar, .stat-list-item:focus-visible .stat-list-item-count.tracker-bar { background: var(--clr-smoke-darkish); } .stat-list-item:hover .stat-list-item-count .tracker-fill, .stat-list-item:focus-visible .stat-list-item-count .tracker-fill { filter: hue-rotate(-128deg) saturate(1.515) brightness(1); } .stat-list-item:hover .stat-list-item-rank, .stat-list-item:hover .icon, .stat-list-item:focus-visible .stat-list-item-rank, .stat-list-item:focus-visible .icon { opacity: 1 !important; } .stat-list-item.stat-list-item-link { cursor: pointer !important; grid-template-columns: 1.75rem auto 1rem; } .stat-list-item.stat-list-item-link .icon { font-size: 0.85rem; opacity: 0.5; transition: opacity 300ms linear; } .stat-list-item-stats { width: 100%; } .stat-list-item-rank { margin: auto; opacity: 0.5; transition: opacity 300ms linear; } .stat-list-item-count.tracker-bar { height: 0.15rem; width: 100%; background: var(--clr-smoke-light); overflow: hidden; transition: background 150ms linear; } .stat-list-item-count .tracker-fill { height: 2rem; transform: scaleX(0); transform-origin: left; animation: fill-in 1s ease-out forwards; } .stat-list-item-text { display: flex; flex-direction: row; justify-content: space-between; align-items: center; column-gap: 1.85rem; margin-bottom: 0.15rem; } .stat-list-item-text.merchant-stat-list-item-name, .stat-list-item-text.biller-stat-list-item-name { display: none; } .stat-list-item-text .stat-list-item-pop { font-size: 0.85rem; } .stat-list-item.sidebar-top-region-unit, .stat-list-item.sidebar-top-sp-unit { grid-template-columns: 1rem auto; } .stat-list-item.sidebar-top-region-unit .stat-list-item-count.tracker-bar, .stat-list-item.sidebar-top-sp-unit .stat-list-item-count.tracker-bar { background: var(--clr-smoke-o50); } .stat-list-item.sidebar-top-region-unit:hover, .stat-list-item.sidebar-top-region-unit:focus-visible, .stat-list-item.sidebar-top-sp-unit:hover, .stat-list-item.sidebar-top-sp-unit:focus-visible { background: var(--clr-secondary-l1); border-color: var(--clr-secondary-l2); } .stat-list-item.sidebar-top-region-unit:hover .stat-list-item-count .tracker-fill, .stat-list-item.sidebar-top-region-unit:focus-visible .stat-list-item-count .tracker-fill, .stat-list-item.sidebar-top-sp-unit:hover .stat-list-item-count .tracker-fill, .stat-list-item.sidebar-top-sp-unit:focus-visible .stat-list-item-count .tracker-fill { filter: none; } .stat-list-item.sidebar-top-region-unit .stat-list-item-rank, .stat-list-item.sidebar-top-sp-unit .stat-list-item-rank { margin: unset; } .stat-list-item.sidebar-top-region-unit .tracker-fill, .stat-list-item.sidebar-top-sp-unit .tracker-fill { background: var(--clr-secondary); filter: none; } .stat-list-item.sidebar-top-transaction-unit { grid-template-columns: 1rem auto; } .stat-list-item.sidebar-top-transaction-unit .stat-list-item-rank { margin: unset; } .stat-list-item.sidebar-top-transaction-unit .tracker-fill { background: var(--clr-primary); filter: none; } .nested-stat-item-more { margin-left: 1.5rem; font-size: 0.85rem; font-style: italic; color: var(--clr-dark-gray80); margin-bottom: 0.25rem; } .nested-transactions { margin-left: 2.25rem; } .nested-transactions .nested-stat-item { grid-template-columns: 1fr; font-size: 0.9rem; color: var(--clr-dark-gray80); } .nested-transactions .nested-stat-item .stat-list-item-rank { display: none; }.radar-container .radar-axis-label { font-size: 13px; }.gauge-container { width: fit-content; } .gauge-container .gauge-track, .gauge-container .gauge-value { transition: filter 200ms ease; } .gauge-container:hover .gauge-track, .gauge-container:focus-visible .gauge-track { filter: drop-shadow(var(--text-shadow-med)); } .gauge-container:hover .gauge-value, .gauge-container:focus-visible .gauge-value { filter: brightness(1.1); } .gauge-tick-label { font-size: 10px; color: var(--clr-dark-gray50); } .gauge-label { font-size: 0.725rem; font-weight: 500; opacity: 0.5; transition: opacity 200ms ease; } .gauge-value-wrapper span { font-size: 2.2rem; font-weight: 500; transition: text-shadow 200ms ease; }.location-combobox { width: 100%; } .cx-combobox, .searchbar { width: 35rem; } .cx__control { cursor: text !important; } .location__menu-portal { z-index: 999999; } .cx__menu-portal { z-index: 1001 !important; } .location-combobox.locbox-sidechoro { border: 2px solid transparent; border-radius: var(--round-small); margin-left: -0.5rem; width: calc(100% + 1rem); /* Dropdown container */ /* Options list */ /* Individual option */ /* Selected state */ } .location-combobox.locbox-sidechoro .location__control { border: none; border-radius: 5px; box-shadow: none !important; } .location-combobox.locbox-sidechoro .location__value-container { border-radius: var(--round-small); height: 100%; width: 100%; padding: 0.15rem 0.5rem; margin: 0; height: 3.375rem; } .location-combobox.locbox-sidechoro .location__input { color: var(--clr-dark-gray); } .location-combobox.locbox-sidechoro .location__placeholder { color: var(--clr-light-gray); } .location-combobox.locbox-sidechoro .location__clear-indicator { cursor: pointer; } .location-combobox.locbox-sidechoro .location__clear-indicator svg path { fill: var(--clr-light-gray); transition: fill 300ms; } .location-combobox.locbox-sidechoro .location__clear-indicator:hover svg path, .location-combobox.locbox-sidechoro .location__clear-indicator:focus-visible svg path { fill: var(--clr-red); } .location-combobox.locbox-sidechoro .location__clear-indicator:active svg path { fill: var(--clr-red-d2); } .location-combobox.locbox-sidechoro .location__dropdown-indicator { cursor: pointer; } .location-combobox.locbox-sidechoro .location__dropdown-indicator svg path { fill: var(--clr-light-gray); transition: fill 300ms; } .location-combobox.locbox-sidechoro .location__dropdown-indicator:hover svg path, .location-combobox.locbox-sidechoro .location__dropdown-indicator:focus-visible svg path { fill: var(--clr-primary); } .location-combobox.locbox-sidechoro .location__dropdown-indicator:active svg path { fill: var(--clr-primary-d2); } body .location__menu-portal .location__option--is-selected { background: var(--clr-secondary-l2); color: var(--clr-secondary-contrast); } body .location__menu-portal .location__option--is-focused { background: var(--clr-primary-translucent); color: var(--clr-dark-gray); } .cx-combobox { border: 2px solid var(--clr-smoke-dark); border-radius: var(--round-small); /* Selected state */ /* Options list */ /* Individual option */ } .cx-combobox .cx__control { border: none; border-radius: var(--round-tiny); box-shadow: none !important; } .cx-combobox .cx__value-container { border-radius: var(--round-small); height: 100%; width: 100%; padding: 0.15rem 0.5rem; margin: 0; height: 3rem; } .cx-combobox .cx__input { color: var(--clr-dark-gray); } .cx-combobox .cx__placeholder { color: var(--clr-light-gray); } .cx-combobox .cx__clear-indicator { cursor: pointer; } .cx-combobox .cx__clear-indicator svg path { fill: var(--clr-light-gray); transition: fill 300ms; } .cx-combobox .cx__clear-indicator:hover svg path, .cx-combobox .cx__clear-indicator:focus-visible svg path { fill: var(--clr-red); } .cx-combobox .cx__clear-indicator:active svg path { fill: var(--clr-red-d2); } .cx-combobox .cx__menu { z-index: 9999999; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .cx-combobox .cx__menu-list { padding: 4px 0; background: red; } .cx-combobox .cx__option { padding: 8px 12px; } .cx-combobox:hover .cx-search-icon, .cx-combobox:focus-visible .cx-search-icon { opacity: 1; } .cx__option { border-left: 0.25rem solid transparent; cursor: pointer; } .cx-option { display: flex; align-items: center; justify-content: space-between; } .cx-option .full-name { display: block; width: 100%; margin-bottom: 0.25rem; font-size: 0.85rem; } .cx-option .cx-option-lower { display: flex; flex-direction: row; column-gap: 0.5rem; align-items: center; } .cx-option .cx-option-lower > * { font-size: 0.7rem; color: var(--clr-light-gray); font-weight: 600; letter-spacing: 0.5px; } .cx-option .current-profile-indicator { display: none; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.125px; } .cx__option--is-focused { background: var(--clr-primary-d1) !important; border-color: var(--clr-primary-d2) !important; } .cx__option--is-focused .full-name { color: var(--clr-light) !important; } .cx__option--is-focused .cx-option-lower > * { color: var(--clr-light) !important; } .cx-_menu-list { max-height: 300px; overflow-y: auto; position: relative; padding-bottom: 4px; padding-top: 4px; box-sizing: border-box; } .cx__menu-notice { color: var(--clr-light-gray); opacity: 0.7; font-weight: 400; font-size: 0.9rem; font-style: italic; } .cx__menu-notice.cx__menu-notice--no-options { text-align: center; color: hsl(0, 0%, 60%); padding: 8px 12px; box-sizing: border-box; } .cx-search-icon { padding-right: 0.5rem; opacity: 0.25; transition: opacity 300ms ease-out; } .currently-viewing { pointer-events: none; cursor: default; } .currently-viewing .cx__option { background-color: var(--clr-secondary-l2); border-color: var(--clr-secondary-d2); color: var(--clr-secondary-d2); } .currently-viewing .current-profile-indicator { display: inline; } .currently-viewing .cx-option-lower > * { color: var(--clr-secondary-d2); } .input-container { border-radius: var(--round-small); height: 100%; width: 100%; padding: 0.15rem 0.5rem; margin: 0; height: 3rem; } .cx-clear-icon { display: flex; align-items: center; height: 1.25rem; padding-right: 0.4rem; margin-right: 0.5rem; border-right: 1px solid var(--clr-light-gray); } .cx-clear-icon .icon { cursor: pointer; transition: fill 300ms, transform 250ms; color: var(--clr-light-gray); animation: spin 300ms ease-out forwards; } .cx-clear-icon:hover .icon, .cx-clear-icon:focus-visible .icon { color: var(--clr-red); transform: rotate(180deg); } .cx-clear-icon:active .icon { color: var(--clr-red-d2); transform: scale(1.15); } .municity-selector { display: flex; gap: 0.75rem; align-items: center; } .municity-selector .municity-select { max-width: 20rem; } .municity-selector .municity-select .muni__control { width: 19.5rem; } .municity-selector .province-select { max-width: 18.5rem; } .municity-selector .province-select .prov__control { width: 18rem; } .municity-selector .region-select { max-width: 22rem; } .municity-selector .region-select .reg__control { width: 21.5rem; } .municity-selector .municity-select, .municity-selector .province-select, .municity-selector .region-select { border: 2px solid var(--clr-smoke-dark); border-radius: var(--round-small); } .municity-selector .muni__control, .municity-selector .prov__control, .municity-selector .reg__control { border: none; border-radius: 5px; box-shadow: none !important; } .municity-selector .muni__menu, .municity-selector .prov__menu, .municity-selector .reg__menu { z-index: 998; } .municity-selector .muni__clear-indicator, .municity-selector .prov__clear-indicator, .municity-selector .reg__clear-indicator { cursor: pointer; } .municity-selector .muni__clear-indicator svg path, .municity-selector .prov__clear-indicator svg path, .municity-selector .reg__clear-indicator svg path { fill: var(--clr-light-gray); transition: fill 300ms; } .municity-selector .muni__clear-indicator:hover svg path, .municity-selector .muni__clear-indicator:focus-visible svg path, .municity-selector .prov__clear-indicator:hover svg path, .municity-selector .prov__clear-indicator:focus-visible svg path, .municity-selector .reg__clear-indicator:hover svg path, .municity-selector .reg__clear-indicator:focus-visible svg path { fill: var(--clr-red); } .municity-selector .muni__clear-indicator:active svg path, .municity-selector .prov__clear-indicator:active svg path, .municity-selector .reg__clear-indicator:active svg path { fill: var(--clr-red-d2); } .municity-selector .muni-_menu-list, .municity-selector .prov-_menu-list, .municity-selector .reg-_menu-list { max-height: 300px; overflow-y: auto; position: relative; padding-bottom: 4px; padding-top: 4px; box-sizing: border-box; } .municity-selector .muni__menu-notice, .municity-selector .prov__menu-notice, .municity-selector .reg__menu-notice { color: var(--clr-light-gray); opacity: 0.7; font-weight: 400; font-size: 0.9rem; font-style: italic; } .municity-selector .muni__menu-notice.muni__menu-notice--no-options, .municity-selector .muni__menu-notice.prov__menu-notice, .municity-selector .muni__menu-notice.reg__menu-notice, .municity-selector .prov__menu-notice.muni__menu-notice--no-options, .municity-selector .prov__menu-notice.prov__menu-notice, .municity-selector .prov__menu-notice.reg__menu-notice, .municity-selector .reg__menu-notice.muni__menu-notice--no-options, .municity-selector .reg__menu-notice.prov__menu-notice, .municity-selector .reg__menu-notice.reg__menu-notice { text-align: center; color: hsl(0, 0%, 60%); padding: 8px 12px; box-sizing: border-box; } .municity-selector .muni__option--is-selected { background: var(--clr-secondary) !important; border-color: var(--clr-secondary) !important; } .municity-selector .prov__option--is-selected { background: var(--clr-tertiary-l3) !important; border-color: var(--clr-tertiary-l3) !important; } .municity-selector .reg__option--is-selected { background: var(--clr-primary-l2) !important; border-color: var(--clr-primary-l2) !important; } .municity-selector .muni__option--is-focused { background: var(--clr-secondary-d1) !important; border-color: var(--clr-secondary-d1) !important; color: var(--clr-light); } .municity-selector .prov__option--is-focused { background: var(--clr-tertiary-l4) !important; border-color: var(--clr-tertiary-l4) !important; color: var(--clr-light); } .municity-selector .reg__option--is-focused { background: var(--clr-primary-l1) !important; border-color: var(--clr-primary-l1) !important; color: var(--clr-light); } .search-highlight { background-color: var(--clr-secondary-l3); color: var(--clr-secondary-d2); padding: 1px 2px; border-radius: var(--round-tiny); font-weight: 500; box-decoration-break: clone; -webkit-box-decoration-break: clone; }.scatterplot-sidebar { font-size: 0.85rem; display: flex; flex-direction: column; gap: 1rem; justify-content: space-evenly; height: 100%; } .scatterplot-sidebar .sidebar-legend-row { display: flex; flex-direction: column; gap: 1rem; } .scatterplot-sidebar .sidebar-legend-row.row-color { display: grid; grid-template-columns: repeat(2, 1fr); } .scatterplot-sidebar .sidebar-legend-row-header { font-size: 0.85rem; font-weight: 500; grid-column: 1/-1; padding: 0 0.4rem; transition: color 300ms linear; } .scatterplot-sidebar .chart-name, .scatterplot-sidebar .chart-element { transition: color 300ms linear, scale 300ms linear; } .scatterplot-sidebar .sidebar-legend-row-item { display: flex; gap: 0.5rem; align-items: center; cursor: default; padding: 0.3rem 0.4rem; border-radius: var(--round-small); transition: border-color 300ms linear, background-color 300ms linear; border: 1px solid transparent; } .scatterplot-sidebar .sidebar-legend-row-item.legend-axis .chart-element { font-weight: 600; } .scatterplot-sidebar .sidebar-legend-row-item.legend-axis:hover, .scatterplot-sidebar .sidebar-legend-row-item.legend-axis:focus-visible { background: var(--clr-secondary-l1); border-color: var(--clr-secondary-l2); } .scatterplot-sidebar .sidebar-legend-row-item.legend-axis:hover .chart-element, .scatterplot-sidebar .sidebar-legend-row-item.legend-axis:hover .chart-name, .scatterplot-sidebar .sidebar-legend-row-item.legend-axis:focus-visible .chart-element, .scatterplot-sidebar .sidebar-legend-row-item.legend-axis:focus-visible .chart-name { color: var(--clr-dark-gray); } .scatterplot-sidebar .sidebar-legend-row-item.legend-color { display: grid; grid-template-columns: 1rem auto; gap: 0.5rem; } .scatterplot-sidebar .sidebar-legend-row-item.legend-color .chart-element { display: block; height: 0.85rem; width: 0.85rem; border-radius: 50%; background: var(--clr-light); border: 2px solid var(--clr-light); margin: auto; } .scatterplot-sidebar .sidebar-legend-row-item#sideScatterColorLegend1 .chart-element { background: var(--clr-primary); } .scatterplot-sidebar .sidebar-legend-row-item#sideScatterColorLegend2 .chart-element { background: var(--clr-secondary); } .scatterplot-sidebar .sidebar-legend-row-item#sideScatterColorLegend3 .chart-element { background: var(--clr-tertiary-l3); } .scatterplot-sidebar .sidebar-legend-row-item#sideScatterColorLegend4 .chart-element { background: var(--clr-violet); } .scatterplot-sidebar .sidebar-legend-row-item#sideScatterColorLegend5 .chart-element { background: var(--clr-purple); } .scatterplot-sidebar .sidebar-legend-row-item#sideScatterColorLegend6 .chart-element { background: var(--clr-pink); } .scatterplot-sidebar .sidebar-legend-row-item#sideScatterColorLegend7 .chart-element { background: var(--clr-red); } .scatterplot-sidebar .sidebar-legend-row-item#sideScatterColorLegend8 .chart-element { background: var(--clr-tertiary); } .scatterplot-sidebar .sidebar-legend-bubble-spectrum { display: flex; flex-direction: row; gap: 0.5rem; align-items: center; padding: 0 0.4rem; justify-content: space-between; transition: color 300ms linear; } .scatterplot-sidebar .sidebar-legend-bubble-spectrum .legend-bubble { border-radius: 50%; background: var(--clr-light); padding: 0; aspect-ratio: 1/1; transition: box-shadow 300ms ease-out; } .scatterplot-sidebar .sidebar-legend-bubble-spectrum .legend-bubble:nth-of-type(1) { height: 2px; } .scatterplot-sidebar .sidebar-legend-bubble-spectrum .legend-bubble:nth-of-type(2) { height: 8px; } .scatterplot-sidebar .sidebar-legend-bubble-spectrum .legend-bubble:nth-of-type(3) { height: 14px; } .scatterplot-sidebar .sidebar-legend-bubble-spectrum .legend-bubble:nth-of-type(4) { height: 20px; } .scatterplot-sidebar .sidebar-legend-bubble-spectrum .legend-bubble:nth-of-type(5) { height: 26px; } .scatterplot-sidebar .sidebar-legend-bubble-spectrum .legend-bubble:nth-of-type(6) { height: 32px; } .scatterplot-sidebar .sidebar-legend-bubble-spectrum .legend-bubble:hover, .scatterplot-sidebar .sidebar-legend-bubble-spectrum .legend-bubble:focus-visible { box-shadow: var(--box-shadow); } .choropleth-sidebar { display: flex; flex-direction: column; row-gap: 1rem; justify-content: space-around; height: 100%; } .choropleth-sidebar .sidebar-column-layout { display: grid; grid-template-columns: 1fr auto; column-gap: 2rem; } .choropleth-sidebar .sidebar-column-layout.no-split { grid-template-columns: 1fr; } .choropleth-sidebar .sidebar-column-layout.no-split .sidebar-leftcol { gap: 2rem; } .choropleth-sidebar .sidebar-column-layout.no-split .sidebar-population-section { grid-template-columns: 1fr 1fr 1fr 1fr; } .choropleth-sidebar .sidebar-column-layout.no-split .sidebar-population-section .sidebar-atv-unit { grid-column: unset; } .choropleth-sidebar .sidebar-links-section { display: flex; justify-content: space-between; gap: 1rem; } .choropleth-sidebar .sidebar-links-section .partner-link { flex-grow: 1; cursor: pointer; width: 100%; padding: 0.5rem 1rem; border: 1px solid var(--clr-light); color: var(--clr-light); border-radius: var(--round-tiny); transition: all 250ms linear; position: relative; } .choropleth-sidebar .sidebar-links-section .partner-link:hover, .choropleth-sidebar .sidebar-links-section .partner-link:focus-visible { border-color: var(--clr-dark-gray); background: var(--clr-dark-gray); color: var(--clr-light); } .choropleth-sidebar .sidebar-links-section .partner-link:hover .icon, .choropleth-sidebar .sidebar-links-section .partner-link:focus-visible .icon { display: block; } .choropleth-sidebar .sidebar-links-section .partner-link .icon { right: 1rem; top: 50%; transform: translateY(-50%) translateX(-50%); position: absolute; color: var(--clr-light); opacity: 0; animation: slideRight 200ms ease-out forwards; display: none; } .choropleth-sidebar .sidebar-placename { grid-column: 1/-1; height: 58px; } .choropleth-sidebar .placename-flexcontainer { display: flex; flex-direction: row; align-items: center; justify-content: space-between; border: 2px solid transparent; border-radius: var(--round-small); transition: border-color 300ms linear, background-color 300ms linear; padding: 0.15rem 0.5rem; margin: -0.15rem -0.5rem; height: 100%; cursor: pointer; } .choropleth-sidebar .placename-flexcontainer .icon { opacity: 0; transition: opacity 300ms linear; color: var(--clr-secondary-l2); margin-right: 0.25rem; } .choropleth-sidebar .placename-flexcontainer:hover, .choropleth-sidebar .placename-flexcontainer:focus-visible { border-color: var(--clr-secondary-l2); } .choropleth-sidebar .placename-flexcontainer:hover .icon, .choropleth-sidebar .placename-flexcontainer:focus-visible .icon { opacity: 1; } .choropleth-sidebar .placename { display: flex; flex-direction: row; align-items: baseline; gap: 0.5rem; } .choropleth-sidebar .sidebar-leftcol { display: flex; flex-direction: column; row-gap: 1.25rem; } .choropleth-sidebar .sidebar-population-section { column-gap: 1.5rem; row-gap: 0.5rem; align-items: center; display: grid; grid-template-columns: 1fr 1fr; } @media screen and (min-width: 1600px) { .choropleth-sidebar .sidebar-population-section { row-gap: 1.5rem; grid-template-columns: 1fr 1fr 1fr; } .choropleth-sidebar .sidebar-population-section .sidebar-atv-unit { grid-column: 1/-1; } } .choropleth-sidebar .sidebar-presence-section { display: flex; flex-direction: column; } .choropleth-sidebar .sidebar-presence-section h3 { grid-column: 1/-1; margin-bottom: 0.25rem; } .choropleth-sidebar .presence-ratio { display: flex; flex-direction: row; align-items: baseline; column-gap: 0.75rem; margin-bottom: 1.25rem; margin-left: -0.4rem; cursor: default; padding: 0.3rem 0.4rem; border-radius: var(--round-small); transition: border-color 300ms linear, background-color 300ms linear; border: 1px solid transparent; } .choropleth-sidebar .presence-ratio:nth-last-child(1) { margin-bottom: 0; } .choropleth-sidebar .presence-ratio:hover, .choropleth-sidebar .presence-ratio:focus-visible { background: var(--clr-secondary-l1); border-color: var(--clr-secondary-l2); } .choropleth-sidebar .presence-label { font-size: 1.25rem; font-weight: 500; } .choropleth-sidebar .sidebar-barangay-section { min-height: 10rem; } .choropleth-sidebar .sidebar-barangay-section .metric-label { margin-bottom: 0.85rem; } .choropleth-sidebar .barangay-list { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } @media screen and (min-width: 1600px) { .choropleth-sidebar .barangay-list { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } } .choropleth-sidebar .barangay-list .barangay-name { font-weight: 500; opacity: 0; animation: fadeIn 300ms ease-out forwards; } .choropleth-sidebar .barangay-list .barangay-name:nth-child(1) { animation-delay: 0.1s; } .choropleth-sidebar .barangay-list .barangay-name:nth-child(2) { animation-delay: 0.2s; } .choropleth-sidebar .barangay-list .barangay-name:nth-child(3) { animation-delay: 0.3s; } .choropleth-sidebar .barangay-list .barangay-name:nth-child(4) { animation-delay: 0.4s; } .choropleth-sidebar .barangay-list .barangay-name:nth-child(5) { animation-delay: 0.5s; } .choropleth-sidebar .barangay-list .barangay-name:nth-child(6) { animation-delay: 0.6s; } .choropleth-sidebar .barangay-list .barangay-name:nth-child(7) { animation-delay: 0.7s; } .choropleth-sidebar .barangay-list .barangay-name:nth-child(8) { animation-delay: 0.8s; } .choropleth-sidebar .barangay-list .barangay-name:nth-child(9) { animation-delay: 0.9s; } .choropleth-sidebar .barangay-list .barangay-name:nth-child(10) { animation-delay: 1s; } .choropleth-sidebar .barangay-list .barangay-name:nth-child(11) { animation-delay: 1.1s; } .choropleth-sidebar .barangay-list .barangay-name:nth-child(12) { animation-delay: 1.2s; } .choropleth-sidebar .barangay-list .truncator { font-style: italic; opacity: 0; animation: fadeIn 300ms 1.5s ease-out forwards; } .choropleth-sidebar .sidebar-ranking-header { margin-bottom: 0.5rem; } .choropleth-sidebar .sidebar-top-list-section { display: grid; row-gap: 0.25rem; column-gap: 0.25rem; grid-template-columns: 1fr 1fr; min-width: 18rem; max-width: 28rem; } .choropleth-sidebar .sidebar-top-list-section.single-column { grid-template-columns: 1fr; }.day-cell:hover, .day-cell:focus-visible { filter: hue-rotate(-128deg) saturate(1.515) brightness(1) !important; } .month-label { cursor: default; }.partner-modal-overlay { position: fixed; inset: 0; background-color: var(--clr-dark-gray50); display: flex; align-items: center; justify-content: center; z-index: 999; } .partner-modal-overlay .pagination-controls { display: flex; width: 100%; margin-block: 1rem 1rem; font-size: 0.85rem; justify-content: space-between; align-items: center; } .partner-modal-overlay .pagination-controls button { padding: 0.25rem 0.5rem; border: 1px solid var(--clr-smoke-dark); border-radius: var(--round-tiny); background: var(--clr-smoke-light); transition: all 200ms ease; } .partner-modal-overlay .pagination-controls button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .partner-modal-overlay .pagination-controls button.pagination-back, .partner-modal-overlay .pagination-controls button.pagination-first { padding-left: 1rem; border-radius: 1rem var(--round-tiny) var(--round-tiny) 1rem; } .partner-modal-overlay .pagination-controls button.pagination-next, .partner-modal-overlay .pagination-controls button.pagination-last { padding-right: 1rem; border-radius: var(--round-tiny) 1rem 1rem var(--round-tiny); } .partner-modal-overlay .pagination-controls button:hover, .partner-modal-overlay .pagination-controls button:focus-visible { color: var(--clr-light); } .partner-modal-overlay .pagination-controls button.pagination-back:hover, .partner-modal-overlay .pagination-controls button.pagination-back:focus-visible, .partner-modal-overlay .pagination-controls button.pagination-next:hover, .partner-modal-overlay .pagination-controls button.pagination-next:focus-visible { background-color: var(--clr-tertiary-l3); border-color: var(--clr-tertiary-l1); } .partner-modal-overlay .pagination-controls button.pagination-first:hover, .partner-modal-overlay .pagination-controls button.pagination-first:focus-visible, .partner-modal-overlay .pagination-controls button.pagination-last:hover, .partner-modal-overlay .pagination-controls button.pagination-last:focus-visible { background-color: var(--clr-tertiary-l2); border-color: var(--clr-tertiary); } .partner-modal-content { background-color: var(--clr-light); border-radius: var(--round-small); width: clamp(50rem, 55%, 60dvw); max-width: 55dvw; max-height: 95dvh; overflow: hidden; position: relative; } .partner-modal-header { display: block; background: var(--clr-primary); color: var(--clr-light); padding: 1rem 1rem 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center; } .partner-modal-header h2 { font-size: 1rem; font-weight: 600; } .partner-modal-header .modal-close { cursor: pointer; transition: all 300ms; } .partner-modal-header .modal-close svg { transition: all 300ms; } .partner-modal-header .modal-close:hover, .partner-modal-header .modal-close:focus-visible { rotate: 180deg; } .partner-modal-header .modal-close:hover svg, .partner-modal-header .modal-close:focus-visible svg { fill: var(--clr-primary-d2); } .partner-details .partner-names { margin: 1rem; } .partner-details .partner-names h2 { font-size: 1.75rem; font-weight: 500; } .partner-details .partner-names .partner-name-raw { opacity: 0.8; font-size: 1rem; font-weight: 800; letter-spacing: 1.25px; text-transform: uppercase; } .metrics-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin: 1rem; } .metric { background: var(--clr-light); border-radius: var(--round-small); border: 1px solid var(--clr-smoke-light); padding: 1rem 1.15rem; transition: box-shadow 200ms ease, border-color 500ms ease, outline-color 600ms ease, background-color 400ms ease; position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; outline: 1px solid transparent; outline-offset: -4px; } .metric:hover, .metric:focus-visible { box-shadow: var(--box-shadow-light); } .metric:hover .metric-label, .metric:focus-visible .metric-label { opacity: 1; } .metric .metric-label { font-size: 0.725rem; font-weight: 500; opacity: 0.5; transition: opacity 200ms ease; } .metric .metric-value { font-size: 2rem; font-weight: 500; transition: text-shadow 200ms ease; margin-block: 0.25rem 0; align-items: baseline; white-space: no-wrap; line-height: 1; } .metric .metric-value .metric-unit { font-weight: 600; font-size: 1rem; display: inline-block; margin-left: 0.25rem; } .metric.directory-link { background: var(--clr-primary); border: none; cursor: pointer; position: relative; } .metric.directory-link .metric-label { color: var(--clr-light); } .metric.directory-link .metric-value { color: var(--clr-light); } .metric.directory-link:hover, .metric.directory-link:focus-visible { outline: 1px solid var(--clr-light); background: var(--clr-primary-d1); } .metric.directory-link:hover .icon-right, .metric.directory-link:focus-visible .icon-right { display: block; } .metric.directory-link:hover .help-link .icon, .metric.directory-link:focus-visible .help-link .icon { color: var(--clr-light); border-color: var(--clr-light); } .metric.directory-link .icon-right { right: 1rem; top: 60%; transform: translateY(-50%) translateX(-50%); position: absolute; color: var(--clr-light); opacity: 0; animation: slideToRight 200ms ease-out forwards; display: none; } .metric.directory-link .help-link .icon { color: var(--clr-primary-l2); border-color: var(--clr-primary-l2); } .transaction-table-container { margin: 1rem; } .transaction-table-container .transaction-table { width: 100%; border-collapse: collapse; } .transaction-table-container .flex-table-body { max-height: 260px; overflow-y: auto; } .transaction-table-container .flex-table { display: flex; flex-direction: column; width: 100%; border-top: none; border-bottom: none; } .transaction-table-container .flex-table-header, .transaction-table-container .flex-table-body { display: flex; flex-direction: column; width: 100%; } .transaction-table-container .flex-table-body { border: 1px solid var(--clr-smoke-dark); border-top: none; border-bottom: none; } .transaction-table-container .flex-table-header .flex-table-row::before { display: none !important; } .transaction-table-container .flex-table-row { display: flex; width: 100%; border-bottom: 1px solid var(--clr-smoke-dark); position: relative; } .transaction-table-container .flex-table-row:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 0.5rem; transform-origin: left; transform: scaleX(0); transition: width 200ms ease-out, scale 200ms ease-out, transform 500ms ease-out; } .transaction-table-container .flex-table-row:hover::before, .transaction-table-container .flex-table-row:focus-visible::before { transform: scaleX(1); } .transaction-table-container .flex-table-row:nth-child(odd):hover::before, .transaction-table-container .flex-table-row:nth-child(odd):focus-visible::before { transform: scaleX(1); background: var(--clr-secondary); } .transaction-table-container .flex-table-row:nth-child(even):hover::before, .transaction-table-container .flex-table-row:nth-child(even):focus-visible::before { transform: scaleX(1); background: var(--clr-tertiary-l3); } .transaction-table-container .flex-table-cell { flex: 1; padding: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .transaction-table-container .flex-table-cell:nth-child(1) { padding-left: calc(12px + 1rem); } .transaction-table-container .flex-table-header { background: var(--clr-primary); border-radius: var(--round-tiny) var(--round-tiny) 0 0; } .transaction-table-container .flex-table-header-cell { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; font-weight: 700; color: var(--clr-light); text-transform: uppercase; font-family: var(--font-basic); letter-spacing: 0.6px; }.tableau-partner-table .controls { display: flex; align-items: center; gap: 3rem; justify-content: space-between; width: 100%; grid-column: 1/-1; height: 100%; } .tableau-partner-table .toggler { display: flex; gap: 0.75rem; align-items: center; height: 100%; } .tableau-partner-table .toggler .toggler-button { height: 100%; border: 1px solid var(--clr-dark-gray80); color: var(--clr-dark-gray80); background-color: var(--clr-light-50); border-radius: var(--round-tiny); padding: 0.5rem 1rem; transition: background-color 250ms linear, border-color 250ms linear, color 250ms linear; display: flex; place-content: center; cursor: pointer; position: relative; isolation: isolate; align-items: center; } .tableau-partner-table .toggler .toggler-button span { text-transform: uppercase; font-weight: 500; letter-spacing: 0.125px; font-size: 0.9rem; text-align: center; } .tableau-partner-table .toggler .toggler-button::after { content: ""; border-radius: 1px; height: 0.5rem; width: 0.5rem; rotate: 45deg; background: var(--clr-primary-d1); position: absolute; left: 50%; bottom: -0.25rem; translate: -50% 0; display: none; z-index: -1; transition: background-color 300ms ease; } .tableau-partner-table .toggler .toggler-button:hover, .tableau-partner-table .toggler .toggler-button:focus-visible { background-color: var(--clr-primary); border-color: var(--clr-primary); color: var(--clr-light); } .tableau-partner-table .toggler .toggler-button:active { background-color: var(--clr-primary-d1); } .tableau-partner-table .toggler .toggler-button:active::after { background-color: var(--clr-primary-d1); } .tableau-partner-table .toggler .toggler-button.currently-toggled { background-color: var(--clr-primary-d1); border-color: var(--clr-primary-d1); color: var(--clr-light); } .tableau-partner-table .toggler .toggler-button.currently-toggled.data-ready::after { display: block; } .tableau-partner-table .toggler .toggler-button.currently-toggled:hover, .tableau-partner-table .toggler .toggler-button.currently-toggled:focus-visible { background-color: var(--clr-primary-d2); border-color: var(--clr-primary-d2); } .tableau-partner-table .toggler .toggler-button.currently-toggled:hover::after, .tableau-partner-table .toggler .toggler-button.currently-toggled:focus-visible::after { background-color: var(--clr-primary-d2); } .tableau-partner-table .partner-table { grid-column: 1/-1; width: 100%; border-radius: var(--round-small); overflow: hidden; } .tableau-partner-table .partner-table .emptyTableau { width: 100% !important; } .tableau-partner-table .partner-table .show-all-container { display: flex; width: 100%; padding: 1.5rem 2rem; place-content: center; } .tableau-partner-table .partner-table .show-all-container .show-all-button { background-color: var(--clr-smoke-light); border: 1px solid var(--clr-smoke-dark); padding: 0.5rem 1.5rem; border-radius: var(--round-tiny); transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, border-radius 300ms ease-out; cursor: pointer; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.25px; } .tableau-partner-table .partner-table .show-all-container .show-all-button:hover, .tableau-partner-table .partner-table .show-all-container .show-all-button:focus-visible { color: var(--clr-light); background-color: var(--clr-tertiary); border-color: var(--clr-tertiary-d1); border-radius: 1rem; } .partner-table .partner-data-table { width: 100%; border-collapse: collapse; } .partner-table .partner-data-table thead { background: var(--clr-primary-d1); z-index: 10; align-items: center; } .partner-table .partner-data-table thead th { padding: 0.85rem 0.75rem; text-align: left; cursor: pointer; position: relative; background-color: var(--clr-primary-d1); transition: background-color 250ms ease; place-content: center; } .partner-table .partner-data-table thead th:nth-child(1) { padding-left: 1.5rem !important; } .partner-table .partner-data-table thead th .table-header-cell { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; font-weight: 700; color: var(--clr-light); text-transform: uppercase; font-family: var(--font-basic); letter-spacing: 0.6px; } .partner-table .partner-data-table thead th .table-header-cell .icon { opacity: 0; transition: opacity 250ms ease; } .partner-table .partner-data-table thead th.active-sort { background-color: var(--clr-primary-d2); } .partner-table .partner-data-table thead th.active-sort .icon { opacity: 1; } .partner-table .partner-data-table thead th:hover, .partner-table .partner-data-table thead th:focus-visible { background-color: var(--clr-secondary-d1); } .partner-table .partner-data-table thead th:hover .icon, .partner-table .partner-data-table thead th:focus-visible .icon { opacity: 1; } .partner-table .partner-data-table tbody { border: none; } .partner-table .partner-data-table tbody td .table-cell { padding: 0.85rem 0.75rem; text-align: left; border-bottom: 1px solid var(--clr-smoke-darker); font-size: 0.9rem; font-weight: 500; color: var(--clr-dark-gray80); place-content: center; } .partner-table .partner-data-table tbody tr { cursor: pointer; transition: background-color 500ms ease; position: relative; background: var(--clr-smoke); } .partner-table .partner-data-table tbody tr:hover, .partner-table .partner-data-table tbody tr:focus-visible { background-color: var(--clr-light); } .partner-table .partner-data-table tbody tr td { padding: 0; } .partner-table .partner-data-table tbody tr td:nth-child(1) .table-cell { padding-left: 1.5rem; border-left: 1px solid var(--clr-smoke-darker); white-space: nowrap; } .partner-table .partner-data-table tbody tr td:nth-child(1):before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 0.5rem; transform-origin: left; transform: scaleX(0); transition: width 200ms ease-out, scale 200ms ease-out, transform 500ms ease-out; } .partner-table .partner-data-table tbody tr td:last-child .table-cell { border-right: 1px solid var(--clr-smoke-darker); } .partner-table .partner-data-table tbody tr:nth-child(odd):hover td::before, .partner-table .partner-data-table tbody tr:nth-child(odd):focus-visible td::before { transform: scaleX(1); background: var(--clr-secondary); } .partner-table .partner-data-table tbody tr:nth-child(even):hover td::before, .partner-table .partner-data-table tbody tr:nth-child(even):focus-visible td::before { transform: scaleX(1); background: var(--clr-tertiary-l3); } .partner-table .partner-data-table tbody tr:last-child td:nth-child(1) .table-cell { border-bottom-left-radius: var(--round-small); } .partner-table .partner-data-table tbody tr:last-child td:nth-child(1)::before { border-bottom-left-radius: var(--round-small); } .partner-table .partner-data-table tbody tr:last-child td:last-child .table-cell { border-bottom-right-radius: var(--round-small); }.customer-table-container { width: 100%; grid-column: 1/-1; } .data-grid-container { width: 100%; border: 1px solid var(--clr-smoke-dark); border-radius: var(--round-tiny); overflow: hidden; grid-template-columns: 2.25fr 2fr 2.25fr 3fr 2fr 2.5fr 2fr; grid-template-columns: calc((100dvw - 4.5rem - 30px) * 2.25 / 17) calc((100dvw - 4.5rem - 30px) * 2.25 / 17) calc((100dvw - 4.5rem - 30px) * 2.3 / 17) calc((100dvw - 4.5rem - 30px) * 3.25 / 17) calc((100dvw - 4.5rem - 30px) * 2.1 / 17) calc((100dvw - 4.5rem - 30px) * 2.3 / 17) calc((100dvw - 4.5rem - 30px) * 2.5 / 17); display: grid; position: relative; } @media screen and (min-width: 1440px) { .data-grid-container { grid-template-columns: calc((100dvw - 4.5rem - 34px) * 2.25 / 16.5) calc((100dvw - 4.5rem - 34px) * 2 / 16.5) calc((100dvw - 4.5rem - 34px) * 2.25 / 16.5) calc((100dvw - 4.5rem - 34px) * 3.25 / 16.5) calc((100dvw - 4.5rem - 34px) * 2.25 / 16.5) calc((100dvw - 4.5rem - 34px) * 2.15 / 16.5) calc((100dvw - 4.5rem - 34px) * 2.35 / 16.5); } } .data-grid-container .grid-header { display: flex; grid-column: 1/-1; display: grid; grid-template-columns: subgrid; background: var(--clr-primary-d1); z-index: 10; align-items: center; } .data-grid-container .grid-header .header-cell { flex: 1; padding: 0.85rem 0.5rem; font-size: 0.75rem; font-weight: 700; color: var(--clr-light); text-transform: uppercase; text-align: left; } .data-grid-container .grid-body { grid-column: 1/-1; display: grid; grid-template-columns: subgrid; box-shadow: var(--box-shadow-light); } .data-grid-container .grid-body .grid-row { grid-column: 1/-1; display: grid; grid-template-columns: subgrid; border-bottom: 1px solid var(--clr-smoke-darker); border-left: 1px solid var(--clr-smoke-darker); border-right: 1px solid var(--clr-smoke-darker); cursor: pointer; transition: background-color 500ms ease; position: relative; background: var(--clr-smoke); } .data-grid-container .grid-body .grid-row:hover, .data-grid-container .grid-body .grid-row:focus-visible { background-color: var(--clr-light); } .data-grid-container .grid-body .grid-row:last-child { border-radius: 0 0 var(--round-small) var(--round-small); overflow: hidden; } .data-grid-container .grid-body .grid-row:nth-child(even)::before { background: var(--clr-tertiary-l3); } .data-grid-container .grid-body .grid-row .grid-cell { flex: 1; padding: 0.9rem 0.5rem; } .data-grid-container .grid-body .grid-row .grid-cell .field-unit { margin-bottom: 0.85rem; } .data-grid-container .grid-body .grid-row .grid-cell .field-unit:last-child { margin-bottom: 0; } .data-grid-container .grid-body .grid-row .grid-cell .field-unit .field-name { font-size: 0.685rem; font-weight: 500; color: var(--clr-dark-gray50); line-height: 1.25; } .data-grid-container .grid-body .grid-row .grid-cell .field-unit .field-value { font-size: 0.9rem; font-weight: 500; color: var(--clr-dark-gray80); } .data-grid-container .grid-body .grid-row .grid-cell:nth-child(2) .field-unit:nth-child(1) .field-value { white-space: nowrap; } .data-grid-container .grid-body .grid-row .grid-cell:nth-child(4) { display: flex; flex-wrap: wrap; column-gap: 1rem; row-gap: 0; justify-content: space-between; align-content: space-between; } .data-grid-container .grid-body .grid-row .grid-cell:nth-child(4) .field-unit { flex-grow: 0; flex-shrink: 0; } .data-grid-container .grid-body .grid-row .grid-cell:nth-child(4) .field-unit:nth-child(odd) { min-width: 50%; } @media screen and (min-width: 1440px) { .data-grid-container .grid-body .grid-row .grid-cell:nth-child(4) .field-unit:nth-child(odd) { min-width: 60%; } } .data-grid-container .grid-body .grid-row .grid-cell:nth-child(4) .field-unit:nth-child(even) { min-width: 35%; } .data-grid-container .grid-body .grid-row .grid-cell:nth-child(4) .field-unit:last-child { grid-column: 1/-1; flex-basis: 100%; } .data-grid-container .grid-body .grid-row:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 0.5rem; transform-origin: left; transform: scaleX(0); transition: width 200ms ease-out, scale 200ms ease-out, transform 500ms ease-out; background: var(--clr-secondary); } .data-grid-container .grid-body .grid-row:hover:before, .data-grid-container .grid-body .grid-row:focus-visible:before { transform: scaleX(1); } .data-grid-container .bottom-bar { display: flex; justify-content: center; align-items: center; padding: 0.5rem 0; background: var(--clr-smoke); border-top: 1px solid var(--clr-smoke-dark); position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; } .data-grid-container .bottom-bar button { padding: 0.5rem 1rem; background-color: var(--clr-smoke-light); border: 1px solid var(--clr-smoke-dark); border-radius: var(--round-tiny); transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease; cursor: pointer; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.25px; } .data-grid-container .bottom-bar button:hover:not(:disabled), .data-grid-container .bottom-bar button:focus-visible:not(:disabled) { color: var(--clr-light); background-color: var(--clr-tertiary); border-color: var(--clr-tertiary-d1); } .data-grid-container .bottom-bar button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .data-grid-container .bottom-bar button.back { padding-left: 1.5rem; border-radius: 1rem var(--round-tiny) var(--round-tiny) 1rem; } .data-grid-container .bottom-bar button.next { padding-right: 1.5rem; border-radius: var(--round-tiny) 1rem 1rem var(--round-tiny); } .data-grid-container .bottom-bar .pagination-info { margin: 0 1rem; font-size: 0.9rem; display: inline; } .data-grid-container .bottom-bar .pagination-section { justify-self: center; } .data-grid-container .bottom-bar .bottom-bar-left { justify-self: left; } .data-grid-container .bottom-bar .bottom-bar-right { justify-self: right; } .data-grid-container .bottom-bar .bottom-bar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: relative; width: 100%; margin-inline: 4.5rem 1rem; } .no-data-message { height: calc(100dvh - 140px); padding: 2rem; display: flex; flex-direction: column; gap: 0.85rem; place-content: center; text-align: center; align-items: center; } .no-data-message h2 { margin-bottom: 0.75rem; color: var(--clr-dark-gray80); } .no-data-message button { padding: 0.5rem 1rem; background-color: var(--clr-smoke-light); border: 1px solid var(--clr-smoke-dark); border-radius: var(--round-tiny); transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease; cursor: pointer; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.25px; padding-right: 1.5rem; border-radius: var(--round-tiny) 1rem 1rem var(--round-tiny); } .no-data-message button:hover, .no-data-message button:focus-visible { color: var(--clr-light); background-color: var(--clr-primary); border-color: var(--clr-primary-d1); } .fixed-header-container { position: fixed; top: 80px; left: 0; right: 0; z-index: 10; background: transparent; } .fixed-header-container .fixed-header-background { content: ""; inset: 0; position: absolute; background: var(--clr-primary-d1); transform-origin: center; scale: 0 1; animation: expand 250ms ease forwards; z-index: -1; } .fixed-inner { background: var(--clr-primary-d1); display: flex !important; } .header-cell:nth-child(1), .grid-cell:nth-child(1) { padding-left: 1.5rem !important; } .header-cell:last-child, .grid-cell:last-child { padding-right: 1rem !important; } .editable-limit, .editable-page { border: 1px solid var(--clr-smoke-dark); border-radius: var(--round-tiny); padding: 2px 4px; font-weight: 600; margin: 0 0.125rem; transition: all 200ms; } .editable-limit:before, .editable-page:before { content: "("; transition: opacity 200ms; } .editable-limit:after, .editable-page:after { content: ")"; transition: opacity 200ms; } .editable-limit:hover, .editable-limit:focus-visible, .editable-page:hover, .editable-page:focus-visible { border-color: var(--clr-primary-d1); background: var(--clr-primary-d1); color: var(--clr-light); } .editable-limit:hover:before, .editable-limit:hover:after, .editable-limit:focus-visible:before, .editable-limit:focus-visible:after, .editable-page:hover:before, .editable-page:hover:after, .editable-page:focus-visible:before, .editable-page:focus-visible:after { opacity: 0; } .editable-page:before, .editable-page:after { content: none; } .sorter { font-size: 0.75rem; font-weight: 700; color: var(--clr-dark-gray50); text-transform: uppercase; text-align: left; position: relative; height: 100%; } .sorter button.sorter-trigger { padding: 2px 4px !important; border-radius: var(--round-tiny); background-color: unset; border: 1px solid var(--clr-smoke-dark); transition: background-color 300ms ease; position: relative; cursor: pointer; font-size: unset; text-transform: unset; letter-spacing: unset; } .sorter button.sorter-trigger .icon { font-size: 0.75rem; } .sorter button.sorter-trigger::after { content: ""; border-radius: 1px; height: 0.5rem; width: 0.5rem; rotate: 45deg; background: var(--clr-secondary); position: absolute; left: 50%; top: -0.25rem; translate: -50% 0; display: none; z-index: -1; transition: background-color 300ms ease; } .sorter button.sorter-trigger:hover, .sorter button.sorter-trigger:focus-visible { border-color: var(--clr-secondary-d1) !important; background: var(--clr-secondary-d1) !important; color: var(--clr-light); } .sorter button.sorter-trigger:hover span, .sorter button.sorter-trigger:focus-visible span { color: var(--clr-light); } .sorter button.sorter-trigger:hover::after, .sorter button.sorter-trigger:focus-visible::after { background: var(--clr-secondary-d1) !important; } .sorter button.sorter-trigger.sort-menu-open { border-color: var(--clr-secondary); background: var(--clr-secondary); } .sorter button.sorter-trigger.sort-menu-open::after { display: block; } .sorter span { text-transform: capitalize; font-weight: 500; font-size: 0.9rem; color: var(--clr-dark-gray80); } .sort-menu { position: absolute; bottom: calc(100% + 1.25rem); left: 0; z-index: 1000; animation: shadowIn 200ms 600ms linear forwards; overflow-y: hidden; } .sort-menu .sort-menu-inner { background: var(--clr-slate); border-radius: var(--round-small); padding: 0.8rem 0.85rem; display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: 0.5rem; transform: translateY(100%); animation: slideUp 500ms ease-out forwards; width: 78.5rem; } @media screen and (min-width: 1440px) { .sort-menu .sort-menu-inner { row-gap: 0.5rem; column-gap: 0.95rem; grid-template-columns: 1fr 1fr; width: 60rem; } } .sort-menu .sort-option { display: flex; justify-content: space-between; padding: 0.35rem 0.5rem; align-items: center; border-radius: var(--round-tiny); transition: background-color 300ms ease; } .sort-menu .sort-option .sort-field-name { font-size: 0.75rem; color: var(--clr-light-50); } .sort-menu .sort-option .sort-field-name.selectedSortition { font-weight: 800; color: var(--clr-light); } @media screen and (min-width: 1440px) { .sort-menu .sort-option .sort-field-name { font-size: 0.775rem; } } .sort-menu .sort-option .sort-direction { text-transform: capitalize; font-weight: 500; font-size: 0.75rem; padding: 0.35rem; border-radius: var(--round-tiny); border: 1px solid var(--clr-smoke-o25); background: transparent; color: var(--clr-light); transition: all 200ms linear; } .sort-menu .sort-option .sort-direction:nth-of-type(1) { border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; padding-left: 0.65rem; } .sort-menu .sort-option .sort-direction:nth-of-type(2) { border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; padding-right: 0.65rem; } .sort-menu .sort-option .sort-direction:hover:not(:disabled), .sort-menu .sort-option .sort-direction:focus-visible:not(:disabled) { border-color: var(--clr-secondary); background-color: transparent; } .sort-menu .sort-option .sort-direction.selectedSortition { cursor: not-allowed !important; pointer-events: none; background: var(--clr-secondary); color: var(--clr-dark-gray); } .sort-menu .sort-option:hover, .sort-menu .sort-option:focus-visible { background-color: var(--clr-smoke-o25); } .bottom-bar-right { display: flex; gap: 0.5rem; } .bottom-bar-right .export-button:not(:disabled), .bottom-bar-right .blast-button:not(:disabled), .bottom-bar-right .reset-button:not(:disabled), .bottom-bar-right .tool-button:not(:disabled) { padding: 0.5rem 0.75rem !important; border-radius: var(--round-tiny) !important; } .bottom-bar-right .tool-button:not(:disabled):hover:not(:disabled), .bottom-bar-right .tool-button:not(:disabled):focus-visible:not(:disabled) { background-color: var(--clr-tertiary-l2); border-color: var(--clr-tertiary); } .bottom-bar-right .reset-button:not(:disabled):hover:not(:disabled), .bottom-bar-right .reset-button:not(:disabled):focus-visible:not(:disabled) { background-color: var(--clr-red); border-color: var(--clr-red-d1); } .bottom-bar-right .audience-button:not(:disabled):hover:not(:disabled), .bottom-bar-right .audience-button:not(:disabled):focus-visible:not(:disabled) { background-color: var(--clr-tertiary-l3); border-color: var(--clr-tertiary-l1); } .blaster { height: 100%; } .blaster button.tool-button { position: relative; } .blaster button.tool-button::after { content: ""; border-radius: 1px; height: 0.5rem; width: 0.5rem; rotate: 45deg; background: var(--clr-tertiary); position: absolute; left: 25%; top: -0.25rem; translate: -50% 0; display: none; z-index: -1; transition: background-color 300ms ease; } .blaster button.tool-button.blast-modal-open { color: var(--clr-light) !important; border-color: var(--clr-tertiary) !important; background: var(--clr-tertiary-l1) !important; } .blaster button.tool-button.blast-modal-open::after { display: block; } .blast-modal { position: absolute; bottom: calc(100% + 1.25rem); right: 4rem; z-index: 1200; overflow-y: hidden; width: calc(100% - 8rem); } .blast-modal .blast-modal-inner { background: var(--clr-slate); border-radius: var(--round-small); padding: 1rem 1.25rem; display: flex; justify-content: space-between; flex-direction: column; transform: translateY(100%); animation: slideUp 500ms ease-out forwards; height: clamp(525px, 80dvh, 90dvh); } .blast-modal .blast-modal-header { display: flex; align-items: center; justify-content: space-between; padding-block: 0.5rem 1rem; } .blast-modal .blast-modal-header h3 { font-size: 1rem; color: var(--clr-light-50); text-transform: uppercase; } .blast-modal .blast-modal-header .close-button { background: transparent; border: none; color: var(--clr-dark-gray50); margin-left: 10px; display: block; transition: fill 300ms, transform 250ms; } .blast-modal .blast-modal-header .close-button svg { cursor: pointer; transition: fill 300ms, transform 250ms, color 200ms; color: var(--clr-dark-gray80); } .blast-modal .blast-modal-header .close-button:hover svg, .blast-modal .blast-modal-header .close-button:focus-visible svg { color: var(--clr-red) !important; transform: rotate(180deg); } .blast-modal .blast-modal-header .close-button:active svg { color: var(--clr-red-d2); transform: scale(1.15); } .blast-modal .blast-modal-header:hover .close-button svg, .blast-modal .blast-modal-header:focus-visible .close-button svg { color: var(--clr-light); } .blast-modal .blast-modal-body { display: grid; grid-template-columns: 1fr 360px; column-gap: 0rem; height: 100%; padding-block: 1rem; border-top: 1px solid var(--clr-smoke-o25); border-bottom: 1px solid var(--clr-smoke-o25); } .blast-modal .blast-modal-body .label { padding: 0.25rem 0; margin-bottom: 0.25rem; font-weight: 500; letter-spacing: 0.25px; text-transform: uppercase; font-size: 0.85rem; color: var(--clr-light-50); flex-shrink: 0; } .blast-modal .blast-modal-body .blast-modal-main { padding-right: 1rem; margin-right: 1rem; border-right: 1px solid var(--clr-smoke-o25); display: flex; flex-direction: column; gap: 1rem; justify-content: space-evenly; } .blast-modal .blast-modal-body .composer { display: grid; grid-template-columns: 1fr 10rem; gap: 1rem; justify-content: flex-start; } .blast-modal .blast-modal-body .textarea-container { grid-column: 1/2; } .blast-modal .blast-modal-body .textarea-container textarea { width: 100%; height: calc(100% - 4rem); margin-block: 0 0.5rem; font-family: inherit; resize: none; padding: 0.5rem; border: 1px solid var(--clr-smoke-o25); border-radius: var(--round-tiny); font-size: 0.85rem; color: var(--clr-light); transition: border-color 250ms linear; background: transparent; line-height: 1.85; } .blast-modal .blast-modal-body .textarea-container textarea:focus-visible { outline: none; border-color: var(--clr-secondary); box-shadow: var(--box-shadow-focus); } .blast-modal .blast-modal-body .char-counter { display: flex; justify-content: space-between; } .blast-modal .blast-modal-body .char-counter strong { font-weight: 600; } .blast-modal .blast-modal-body .char-counter .char-count-actual { font-weight: 400; font-size: 1rem; color: var(--clr-light-50); } .blast-modal .blast-modal-body .char-counter .char-count-actual strong { color: var(--clr-secondary-l2); } .blast-modal .blast-modal-body .char-counter .char-count-warning { padding: 4px 8px; border-radius: 0 var(--round-tiny) var(--round-tiny) 0; border: var(--clr-secondary-d2); background: var(--clr-secondary-l3); color: var(--clr-secondary-d2); font-size: 0.75rem; font-weight: 400; opacity: 0; transition: opacity 200ms ease; } .blast-modal .blast-modal-body .char-counter .char-count-warning::after { content: ""; position: absolute; top: 0; left: -0.5rem; bottom: 0; width: 0.5rem; background: var(--clr-secondary); border-radius: var(--round-tiny) 0 0 var(--round-tiny); } .blast-modal .blast-modal-body .char-counter.warning .char-count-actual strong { color: var(--clr-secondary); } .blast-modal .blast-modal-body .char-counter.warning .char-count-warning { display: block; opacity: 1; text-align: right; width: fit-content; } .blast-modal .blast-modal-body .char-counter.warning .char-count-warning span { display: none; } @media screen and (min-width: 1440px) { .blast-modal .blast-modal-body .char-counter.warning .char-count-warning span { display: inline; } } .blast-modal .blast-modal-body .variable-button-flex { display: flex; flex-direction: column; gap: 1rem; } .blast-modal .blast-modal-body .variable-button-flex button { width: 100%; text-transform: unset; position: relative; } .blast-modal .blast-modal-body .variable-button-flex button::after { content: ""; border-radius: 1px; height: 0.5rem; width: 0.5rem; rotate: 45deg; position: absolute; left: -0.15rem; top: calc(50% - 0.25rem); translate: -50% 0; display: block; opacity: 0; z-index: -1; transition: opacity 300ms ease; background: var(--clr-tertiary-d1); } .blast-modal .blast-modal-body .variable-button-flex button:hover::after, .blast-modal .blast-modal-body .variable-button-flex button:focus-visible::after { opacity: 1; } .blast-modal .blast-modal-body .blast-details h5 { font-size: 0.85rem; font-weight: 300; color: var(--clr-light-50); display: none; } @media screen and (min-width: 1600px) { .blast-modal .blast-modal-body .blast-details h5 { display: inline; } } .blast-modal .blast-modal-body .blast-details .total-count { display: flex; align-items: flex-end; gap: 1rem; font-size: 1rem; font-weight: 700; color: var(--clr-secondary-d1); margin-top: 0.5rem; } .blast-modal .blast-modal-body .blast-details .sampler-section { margin-top: 1rem; } @media screen and (min-width: 1440px) { .blast-modal .blast-modal-body .blast-details .sampler-section { margin-bottom: 1rem; } } .blast-modal .blast-modal-body .blast-details .sampler-section .sample-customer-flex { gap: 1rem; display: flex; margin-top: 1rem; padding-bottom: 0.25rem; overflow-x: auto; max-width: 50dvw; scrollbar-color: var(--clr-smoke-o25) var(--clr-dark-gray80); scrollbar-width: thin; } @media screen and (min-width: 1440px) { .blast-modal .blast-modal-body .blast-details .sampler-section .sample-customer-flex { flex-wrap: wrap; max-width: unset; } } .blast-modal .blast-modal-body .blast-details .sampler-section .sample-customer { width: max-content; display: flex; flex-direction: column; gap: 0.25rem; padding: 4px 8px; border-radius: var(--round-tiny); border: 1px solid var(--clr-secondary-d2); color: var(--clr-secondary-d2); cursor: pointer; transition: all 180ms linear; } .blast-modal .blast-modal-body .blast-details .sampler-section .sample-customer:hover, .blast-modal .blast-modal-body .blast-details .sampler-section .sample-customer:focus-visible { background: var(--clr-secondary-l3); } .blast-modal .blast-modal-body .blast-details .sampler-section .sample-customer.active-sample-customer { background: var(--clr-secondary); border-color: var(--clr-secondary); color: var(--clr-dark-gray); } .blast-modal .blast-modal-body .blast-details .sampler-section .sample-customer-name { font-size: 0.9rem; font-weight: 600; width: max-content; } .blast-modal .blast-modal-body .blast-details .sampler-section .sample-customer-bottom { font-size: 0.85rem; gap: 1rem; display: flex; justify-content: space-between; } .blast-modal .blast-modal-body .blast-details .sampler-section .sample-customer-bottom .interpunct, .blast-modal .blast-modal-body .blast-details .sampler-section .sample-customer-bottom .sample-customer-cx { display: none; display: none; } @media screen and (min-width: 1440px) { .blast-modal .blast-modal-body .blast-details .sampler-section .sample-customer-bottom .interpunct, .blast-modal .blast-modal-body .blast-details .sampler-section .sample-customer-bottom .sample-customer-cx { display: inline-block; } } .blast-modal .blast-modal-body .blast-details .sampler-section .and-more { color: var(--clr-light-50); display: grid; place-content: center; font-size: 0.85rem; font-style: italic; } .blast-modal .blast-modal-footer { display: flex; justify-content: space-between; align-items: center; padding-block: 1rem 0.5rem; } .blast-modal .blast-modal-footer .button-group { display: flex; gap: 0.5rem; } .blast-modal .blast-modal-footer button { padding: 0.75rem 1.5rem; border-radius: var(--round-small); background: transparent; font-size: 1rem; cursor: pointer; transition: background-color 300ms linear, border-color 300ms linear, color 200ms linear; } .blast-modal .blast-modal-footer button[disabled] { color: var(--clr-light-50); border-color: var(--clr-light-50); } .blast-modal .blast-modal-footer .button-group.send-buttons { position: relative; } .blast-modal .blast-modal-footer .confirm-blast-btn { border: 1px solid transparent; cursor: pointer; width: max-content; height: 100%; font-weight: 500; position: relative; } .blast-modal .blast-modal-footer .confirm-blast-btn::after { content: ""; border-radius: 1px; height: 0.5rem; width: 0.5rem; rotate: 45deg; background: var(--clr-red-d2); position: absolute; left: 50%; top: -0.25rem; translate: -50% 0; display: none; } .blast-modal .blast-modal-footer .confirm-blast-btn.active-confirmation { pointer-events: none; opacity: 0.8; } .blast-modal .blast-modal-footer .confirm-blast-btn.active-confirmation::after { display: block; } .blast-modal .blast-modal-footer .confirm-blast-btn.send-button { border-color: var(--clr-secondary); color: var(--clr-secondary); } .blast-modal .blast-modal-footer .confirm-blast-btn.send-button:hover, .blast-modal .blast-modal-footer .confirm-blast-btn.send-button:focus-visible { color: var(--clr-dark-gray); background: var(--clr-secondary-d1); border-color: var(--clr-secondary-d1); } .blast-modal .blast-modal-footer .confirm-blast-btn.send-button:active { background: var(--clr-secondary-d2); border-color: var(--clr-secondary-d2); } .blast-modal .blast-modal-footer .confirm-blast-btn.send-button.active-confirmation { color: var(--clr-dark-gray); background: var(--clr-secondary-d1); border-color: var(--clr-secondary-d1); } .blast-modal .blast-modal-footer .confirm-blast-btn.send-button.active-confirmation::after { display: block; background: var(--clr-secondary-d1); } .blast-modal .blast-modal-footer .confirm-blast-btn.send-and-close-button { border-color: var(--clr-tertiary-l4); color: var(--clr-tertiary-l4); } .blast-modal .blast-modal-footer .confirm-blast-btn.send-and-close-button:hover, .blast-modal .blast-modal-footer .confirm-blast-btn.send-and-close-button:focus-visible { background: var(--clr-tertiary-l2); border-color: var(--clr-tertiary-l2); } .blast-modal .blast-modal-footer .confirm-blast-btn.send-and-close-button:active { background: var(--clr-tertiary-l1); border-color: var(--clr-tertiary-l1); } .blast-modal .blast-modal-footer .confirm-blast-btn.send-and-close-button.active-confirmation { color: var(--clr-light); background: var(--clr-tertiary-l2); border-color: var(--clr-tertiary-l2); } .blast-modal .blast-modal-footer .confirm-blast-btn.send-and-close-button.active-confirmation::after { display: block; background: var(--clr-tertiary-l2); } .blast-modal .blast-modal-footer:not([disabled]) .clear-button { border: 1px solid var(--clr-light-gray); color: var(--clr-light-gray); } .blast-modal .blast-modal-footer:not([disabled]) .clear-button:hover, .blast-modal .blast-modal-footer:not([disabled]) .clear-button:focus-visible { color: var(--clr-light); background: var(--clr-red); border-color: var(--clr-red); } .blast-modal .blast-modal-footer:not([disabled]) .clear-button:active { background: var(--clr-red-d1); border-color: var(--clr-red-d1); } .blast-modal .blast-modal-footer:not([disabled]) .cancel-button { border: 1px solid var(--clr-light-gray); color: var(--clr-light-gray); } .blast-modal .blast-modal-footer:not([disabled]) .cancel-button:hover, .blast-modal .blast-modal-footer:not([disabled]) .cancel-button:focus-visible { color: var(--clr-dark-gray); background: var(--clr-smoke); border-color: var(--clr-smoke); } .blast-modal .blast-modal-footer:not([disabled]) .cancel-button:active { background: var(--clr-light); border-color: var(--clr-light); } .blast-confirm-popup { position: absolute; bottom: calc(100% + 1rem); right: 0; z-index: 10; background: var(--clr-light); box-shadow: var(--box-shadow-light); border-radius: var(--round-tiny); overflow: hidden; width: 23rem; } .blast-confirm-popup h2 { font-size: 1rem; font-weight: 600; display: block; background: var(--clr-orange); color: var(--clr-light); padding: 0.5rem 0.85rem; } .blast-confirm-popup p { font-size: 0.8rem; font-style: italic; padding: 0.25rem 0.85rem 0.5rem 0.85rem; } .blast-confirm-popup div { display: flex; gap: 0.5rem; justify-content: space-between; padding: 0.25rem 0.85rem 0.5rem 0.85rem; } .blast-confirm-popup button.blast-confirm:not(:disabled) { padding: 0.5rem 0.75rem; background-color: var(--clr-smoke-light); border: 1px solid var(--clr-smoke-dark); border-radius: var(--round-tiny); transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease; cursor: pointer; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.25px; padding-inline: 2.25rem; } .blast-confirm-popup button.blast-confirm:not(:disabled):hover, .blast-confirm-popup button.blast-confirm:not(:disabled):focus-visible { color: var(--clr-light); background-color: var(--clr-primary); border-color: var(--clr-primary-d1); } .blast-confirm-popup button.blast-confirm:not(:disabled).blast-confirm-button-confirm { background-color: var(--clr-orange); border-color: var(--clr-orange); color: var(--clr-light); } .blast-confirm-popup button.blast-confirm:not(:disabled).blast-confirm-button-confirm:hover, .blast-confirm-popup button.blast-confirm:not(:disabled).blast-confirm-button-confirm:focus-visible { background-color: var(--clr-orange-l2); border-color: var(--clr-orange-l1); }/* --- General Layout --- */ .presentation-container { display: flex; justify-content: center; align-items: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* --- Phone Shell (Generic) --- */ .phone-mockup { width: 320px; height: calc(525px - 13.5rem); background-color: #1c1c1e; border-radius: 30px; box-shadow: 0 20px 40px var(--clr-dark-gray80), 0 0 0 2px var(--clr-smoke-o25) inset; position: relative; padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; } @media screen and (min-width: 1440px) { .phone-mockup { height: 480px; } } /* --- Power/Volume Buttons (Generic) --- */ .phone-mockup::before { content: ""; position: absolute; top: 100px; right: -3px; /* Power on right */ width: 3px; height: 40px; background: #2c2c2e; border-radius: 0 2px 2px 0; } .phone-mockup::after { content: ""; position: absolute; top: 100px; left: -3px; /* Volume on left */ width: 3px; height: 60px; background: #2c2c2e; border-radius: 2px 0 0 2px; } /* --- Screen Area --- */ .screen { background-color: #ffffff; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; position: relative; display: flex; flex-direction: column; } /* --- Status Bar & Camera --- */ .status-bar { height: 30px; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; font-size: 13px; font-weight: 600; color: #000; z-index: 10; background-color: #f5f5f5; } .camera-hole { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background-color: #000; border-radius: 50%; z-index: 20; } .status-icons { display: flex; gap: 6px; align-items: center; } /* --- App Header --- */ .app-header { display: flex; align-items: center; padding: 10px 15px; background-color: #f5f5f5; border-bottom: 1px solid #e0e0e0; } .back-arrow { color: var(--clr-primary); margin-right: 10px; display: flex; align-items: center; } .avatar { width: 4.5dvh; aspect-ratio: 1; background: var(--clr-primary); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--clr-light); font-weight: bold; font-size: 14px; margin-right: 10px; } .contact-info { flex: 1; } .contact-name { font-size: 16px; font-weight: 600; color: #000; margin: 0; } .contact-status { font-size: 12px; color: #8e8e93; margin: 0; } .header-icons { display: flex; gap: 15px; color: var(--clr-primary); } /* --- Chat Area --- */ .chat-area { flex: 1; background-color: #fff; padding: 20px; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; max-height: 25dvh; max-width: 100%; overflow-x: clip; } @media screen and (min-width: 1440px) { .chat-area { max-height: 22rem; } } .message-bubble { max-width: 85%; padding: 10px 14px; font-size: 16px; line-height: 1.4; position: relative; } .message-actual { overflow: clip; } /* Receied Message styles */ .message-bubble.received { background-color: #e5e5ea; color: var(--clr-dark-gray); align-self: flex-start; border-radius: 18px 18px 18px 4px; } .message-bubble.received .timestamp { font-size: 10px; color: var(--clr-dark-gray50); margin-top: 4px; text-align: right; } .message-bubble.received::before { content: ""; position: absolute; bottom: 0; left: -6px; width: 20px; height: 20px; background-color: #e5e5ea; border-radius: 50%; z-index: 0; } .message-bubble.received::after { content: ""; position: absolute; bottom: 6px; left: -10px; width: 10px; height: 20px; background-color: #fff; border-radius: 50% 0 50% 50%; z-index: 1; } /* Sent Message Styles */ .message-bubble.sent { background-color: var(--clr-primary); color: #fff; align-self: flex-end; /* Moves to right */ border-radius: 18px 18px 4px 18px; } .message-bubble.sent .timestamp { font-size: 10px; color: rgba(255, 255, 255, 0.7); /* Lighter text on blue bg */ margin-top: 4px; text-align: right; } .message-bubble.sent::before { content: ""; position: absolute; bottom: 0; right: -6px; width: 20px; height: 20px; background-color: var(--clr-primary); border-radius: 50%; z-index: 0; } .message-bubble.sent::after { content: ""; position: absolute; bottom: 6px; right: -10px; width: 10px; height: 20px; background-color: #fff; border-radius: 0 50% 50% 50%; z-index: 1; } /* --- Input Area --- */ .input-area { padding: 10px 15px 15px 15px; background-color: #f5f5f5; border-top: 1px solid #e0e0e0; display: flex; align-items: center; gap: 10px; } .plus-icon { color: var(--clr-primary); display: flex; } .message-input { flex: 1; border: 1px solid #d1d1d6; border-radius: 20px; padding: 7px 15px; font-size: 16px; outline: none; background-color: #fff; color: #3a3a3c; font-size: 0.85rem; } .send-button { width: 32px; height: 32px; background-color: var(--clr-primary); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; }.profile-canvas-main { grid-column: span 12; border-radius: var(--round-small); overflow: hidden; box-shadow: var(--box-shadow-light); } .profile-canvas-top { background: linear-gradient(45deg, var(--clr-light-gray), var(--clr-smoke-dark)); height: 10rem; } .profile-canvas-top.stage-new, .profile-canvas-top.stage-New { background: linear-gradient(45deg, var(--clr-green), var(--clr-green-d2)); } .profile-canvas-top.stage-top, .profile-canvas-top.stage-Top { background: linear-gradient(45deg, var(--clr-primary), var(--clr-primary-d2)); } .profile-canvas-top.stage-consistent, .profile-canvas-top.stage-Consistent { background: linear-gradient(45deg, var(--clr-secondary), var(--clr-secondary-d2)); } .profile-canvas-top.stage-active, .profile-canvas-top.stage-Active { background: linear-gradient(45deg, var(--clr-tertiary-l2), var(--clr-tertiary-d1)); } .profile-canvas-top.stage-inactive, .profile-canvas-top.stage-Inactive { background: linear-gradient(45deg, var(--clr-violet-d1), var(--clr-violet-d2)); } .profile-canvas-top.stage-churned, .profile-canvas-top.stage-Churned { background: linear-gradient(45deg, var(--clr-red-d1), var(--clr-red-d2)); } .profile-canvas-bottom { padding: 1.5rem 2rem; background: var(--clr-light-off); display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; } .profile-card { gap: 1rem; background: var(--clr-light); border-radius: var(--round-small); border: 1px solid var(--clr-smoke-light); padding: 1rem 1.15rem; transition: box-shadow 200ms ease; } .profile-card:hover, .profile-card:focus-visible { box-shadow: var(--box-shadow-light); } .profile-card.card-2 { grid-column: span 2; } .profile-card.card-4 { grid-column: span 4; } .profile-card.card-12 { grid-column: 1/-1; } .profile-card-profile { position: relative; height: 6rem; width: 6rem; } .score-badge { position: absolute; bottom: 0; right: 0; padding: 0.15rem 0.2rem; background: var(--clr-red); border-radius: var(--round-tiny); display: flex; place-content: center; color: var(--clr-light); box-shadow: var(--box-shadow-light); } .score-badge.hiscore { background: var(--clr-primary); } .score-badge.midscore { background: var(--clr-secondary); } .score-badge.lowscore { background: var(--clr-orange); } .score-badge:hover, .score-badge:focus-visible { color: var(--clr-light); } .score-badge span { font-size: 0.8rem; font-weight: 600; line-height: 1; letter-spacing: 0.5px; } .profile-card-avatar { overflow: hidden; border-radius: 50%; border: 0.25rem solid var(--clr-light); box-shadow: var(--box-shadow-light); height: 6rem; width: 6rem; position: relative; background: var(--clr-primary-translucent); margin-bottom: 0.75rem; } .profile-card-avatar img { width: 100%; height: auto; } .profile-card-avatar img.random-avatar { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 210%; width: auto; object-fit: cover; object-position: top center; } .profile-card-name { margin-bottom: 0.5rem; } .profile-card-name h1 { font-size: 1.5rem; font-weight: 500; } .profile-card-cxclass { display: flex; gap: 0.5rem; } .profile-card-cxclass .segment-badge { font-size: 0.75rem; letter-spacing: 1px; font-weight: 500; color: var(--clr-dark); text-transform: uppercase; padding: 0.25rem 0.35rem; border-radius: 0 var(--round-big) var(--round-big) 0; border: 2px solid var(--clr-dark); padding-right: 0.65rem; align-items: center; place-content: center; transition: background 200ms ease, border 200ms ease, color 200ms ease; } .profile-card-cxclass .segment-badge:hover, .profile-card-cxclass .segment-badge:focus-visible { color: var(--clr-light) !important; background: var(--clr-dark); } .profile-card-cxclass .lifecycle-badge { color: var(--clr-light); } .profile-card-cxclass.class-daily .frequency-badge, .profile-card-cxclass.class-Daily .frequency-badge { border-color: var(--clr-green-d2); color: var(--clr-green-d2); } .profile-card-cxclass.class-daily .frequency-badge:hover, .profile-card-cxclass.class-daily .frequency-badge:focus-visible, .profile-card-cxclass.class-Daily .frequency-badge:hover, .profile-card-cxclass.class-Daily .frequency-badge:focus-visible { background-color: var(--clr-green-d2); } .profile-card-cxclass.class-weekly .frequency-badge, .profile-card-cxclass.class-Weekly .frequency-badge { border-color: var(--clr-pink-d2); color: var(--clr-pink-d2); } .profile-card-cxclass.class-weekly .frequency-badge:hover, .profile-card-cxclass.class-weekly .frequency-badge:focus-visible, .profile-card-cxclass.class-Weekly .frequency-badge:hover, .profile-card-cxclass.class-Weekly .frequency-badge:focus-visible { background-color: var(--clr-pink-d2); } .profile-card-cxclass.class-monthly .frequency-badge, .profile-card-cxclass.class-Monthly .frequency-badge { border-color: var(--clr-tertiary-l3); color: var(--clr-tertiary-l3); } .profile-card-cxclass.class-monthly .frequency-badge:hover, .profile-card-cxclass.class-monthly .frequency-badge:focus-visible, .profile-card-cxclass.class-Monthly .frequency-badge:hover, .profile-card-cxclass.class-Monthly .frequency-badge:focus-visible { background-color: var(--clr-tertiary-l3); } .profile-card-cxclass.class-infrequent .frequency-badge, .profile-card-cxclass.class-Infrequent .frequency-badge { border-color: var(--clr-brown); color: var(--clr-brown); } .profile-card-cxclass.class-infrequent .frequency-badge:hover, .profile-card-cxclass.class-infrequent .frequency-badge:focus-visible, .profile-card-cxclass.class-Infrequent .frequency-badge:hover, .profile-card-cxclass.class-Infrequent .frequency-badge:focus-visible { background-color: var(--clr-brown); } .profile-card-cxclass.stage-nan .lifecycle-badge, .profile-card-cxclass.stage-NaN .lifecycle-badge { color: var(--clr-dark); } .profile-card-cxclass.stage-nan .lifecycle-badge:hover, .profile-card-cxclass.stage-nan .lifecycle-badge:focus-visible, .profile-card-cxclass.stage-NaN .lifecycle-badge:hover, .profile-card-cxclass.stage-NaN .lifecycle-badge:focus-visible { color: var(--clr-light); } .profile-card-cxclass.stage-new .lifecycle-badge, .profile-card-cxclass.stage-New .lifecycle-badge { border-color: var(--clr-green-d1); background-color: var(--clr-green-d1); } .profile-card-cxclass.stage-new .lifecycle-badge:hover, .profile-card-cxclass.stage-new .lifecycle-badge:focus-visible, .profile-card-cxclass.stage-New .lifecycle-badge:hover, .profile-card-cxclass.stage-New .lifecycle-badge:focus-visible { border-color: var(--clr-green-d2); background-color: var(--clr-green-d2); } .profile-card-cxclass.stage-top .lifecycle-badge, .profile-card-cxclass.stage-Top .lifecycle-badge { border-color: var(--clr-primary); background-color: var(--clr-primary); } .profile-card-cxclass.stage-top .lifecycle-badge:hover, .profile-card-cxclass.stage-top .lifecycle-badge:focus-visible, .profile-card-cxclass.stage-Top .lifecycle-badge:hover, .profile-card-cxclass.stage-Top .lifecycle-badge:focus-visible { border-color: var(--clr-primary-d2); background-color: var(--clr-primary-d2); } .profile-card-cxclass.stage-consistent .lifecycle-badge, .profile-card-cxclass.stage-Consistent .lifecycle-badge { border-color: var(--clr-secondary-d1); background-color: var(--clr-secondary-d1); } .profile-card-cxclass.stage-consistent .lifecycle-badge:hover, .profile-card-cxclass.stage-consistent .lifecycle-badge:focus-visible, .profile-card-cxclass.stage-Consistent .lifecycle-badge:hover, .profile-card-cxclass.stage-Consistent .lifecycle-badge:focus-visible { border-color: var(--clr-secondary-d2); background-color: var(--clr-secondary-d2); } .profile-card-cxclass.stage-active .lifecycle-badge, .profile-card-cxclass.stage-Active .lifecycle-badge { border-color: var(--clr-tertiary-l1); background-color: var(--clr-tertiary-l1); } .profile-card-cxclass.stage-active .lifecycle-badge:hover, .profile-card-cxclass.stage-active .lifecycle-badge:focus-visible, .profile-card-cxclass.stage-Active .lifecycle-badge:hover, .profile-card-cxclass.stage-Active .lifecycle-badge:focus-visible { border-color: var(--clr-tertiary); background-color: var(--clr-tertiary); } .profile-card-cxclass.stage-inactive .lifecycle-badge, .profile-card-cxclass.stage-Inactive .lifecycle-badge { border-color: var(--clr-violet-d1); background-color: var(--clr-violet-d1); } .profile-card-cxclass.stage-inactive .lifecycle-badge:hover, .profile-card-cxclass.stage-inactive .lifecycle-badge:focus-visible, .profile-card-cxclass.stage-Inactive .lifecycle-badge:hover, .profile-card-cxclass.stage-Inactive .lifecycle-badge:focus-visible { border-color: var(--clr-violet-d2); background-color: var(--clr-violet-d2); } .profile-card-cxclass.stage-churned .lifecycle-badge, .profile-card-cxclass.stage-Churned .lifecycle-badge { border-color: var(--clr-red-d1); background-color: var(--clr-red-d1); } .profile-card-cxclass.stage-churned .lifecycle-badge:hover, .profile-card-cxclass.stage-churned .lifecycle-badge:focus-visible, .profile-card-cxclass.stage-Churned .lifecycle-badge:hover, .profile-card-cxclass.stage-Churned .lifecycle-badge:focus-visible { border-color: var(--clr-red-d2); background-color: var(--clr-red-d2); } .profile-card-cxclass.stage-churned .frequency-badge, .profile-card-cxclass.stage-Churned .frequency-badge { display: none; } .profile-head { grid-column: 1/-1; margin-top: -8rem; display: flex; flex-direction: row; justify-content: space-between; gap: 1.5rem; } .profile-head-column-group { display: flex; flex-direction: row; column-gap: clamp(1.75rem, 5vw, 4rem); } .profile-column-header { font-size: 0.75rem; font-weight: 700; color: var(--clr-dark-gray50); text-transform: uppercase; margin-bottom: 1rem; } .profile-head-list { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: 0.85rem; } .profile-head-infobite { display: grid; grid-template-columns: subgrid; grid-column: span 2; } .infobite-label { font-size: 0.75rem; font-weight: 600; color: var(--clr-dark); text-transform: uppercase; } .infobite-value { font-size: 0.75rem; font-weight: 500; color: var(--clr-dark-gray80); text-wrap: wrap; max-width: 28ch; } .infobite-value.infobite-null { opacity: 0.5; } .infobite-value.infobite-location { max-width: 20ch; text-wrap: wrap; line-height: 1.6; } .dupe-message { font-size: 0.75rem; font-weight: 500; color: var(--clr-dark-gray50); text-wrap: wrap; max-width: 50ch; margin-top: 0.8rem; } .dupe-message a { font-weight: 700; transition: 300ms ease; } .dupe-message a:hover, .dupe-message a:focus-visible { color: var(--clr-primary-d1); } a.infobite-value { position: relative; width: fit-content; } a.infobite-value:after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--clr-secondary-d1); transition: width 200ms ease; } a.infobite-value:hover, a.infobite-value:focus-visible { color: var(--clr-secondary-d1); } a.infobite-value:hover:after, a.infobite-value:focus-visible:after { width: 100%; } .no-cxid-card { grid-column: 2/12; margin-top: 5rem; background-color: var(--clr-primary); transition: background-color 300ms ease; padding: 1rem; } .no-cxid-card .no-cxid-card-actual { background: var(--clr-light); padding: 1rem 1.5rem; border-radius: var(--round-small); } .no-cxid-card .no-cxid-card-actual h2 { font-size: 1.75rem; font-weight: 600; } .no-cxid-card .no-cxid-card-actual p { margin-block: 1.75rem 1rem; font-style: italic; } .no-cxid-card .no-cxid-card-actual p .emphasize { font-weight: 600; color: var(--clr-primary); } .no-cxid-card .no-cxid-card-actual .invalid-cxid-header p { margin-block: 0.5rem 0.75rem; font-size: 0.8rem; color: var(--clr-red-d2); } .no-cxid-card .past-viewed-list { display: flex; flex-wrap: wrap; gap: 1rem; } .no-cxid-card .past-viewed-list a { display: inline-block; padding: 0.25rem 0.5rem; border-radius: var(--round-tiny); border: 1px solid var(--clr-primary); font-size: 0.8rem; color: var(--clr-primary-d2); transition: all 250ms ease; } .no-cxid-card .past-viewed-list a:hover, .no-cxid-card .past-viewed-list a:focus-visible { background: var(--clr-primary-d1); border-color: var(--clr-primary-d1); color: var(--clr-light); } .no-cxid-card .cx-combobox { width: 100%; } .no-cxid-card:hover, .no-cxid-card:focus-visible { background-color: var(--clr-primary-d1); }.transaction-table table { width: 100%; border-collapse: collapse; font-size: 14px; } .transaction-table th { padding: 10px; text-align: left; cursor: pointer; position: relative; background-color: var(--clr-primary-d1); transition: background-color 250ms ease; } .transaction-table th .table-header-cell { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; font-weight: 700; color: var(--clr-light); text-transform: uppercase; font-family: var(--font-basic); letter-spacing: 0.6px; } .transaction-table th .table-header-cell .icon { opacity: 0; transition: opacity 250ms ease; } .transaction-table th.active-sort { background-color: var(--clr-primary-d2); } .transaction-table th.active-sort .icon { opacity: 1; } .transaction-table th:hover, .transaction-table th:focus-visible { background-color: var(--clr-secondary-d1); } .transaction-table th:hover .icon, .transaction-table th:focus-visible .icon { opacity: 1; } .transaction-table td { padding: 10px; text-align: left; border-bottom: 1px solid #e0e0e0; } .transaction-table tr:last-of-type { padding-bottom: 0.5rem; } .transaction-table tr:last-of-type td { border-bottom: transparent; } .transaction-table .col-reference-no { width: 18%; } .transaction-table .col-merchant { width: 21%; } .transaction-table .col-biller-tag { width: 21%; } .transaction-table .col-amount { width: 10%; } .transaction-table .col-percentage { min-width: 8rem; width: 10%; } .transaction-table .col-date { width: 8rem; width: 20%; } .transaction-table .pagination-controls { margin-inline: auto; display: block; width: fit-content; margin-block: 1rem 0.5rem; font-size: 0.85rem; } .transaction-table .pagination-controls .pagination-navigation { gap: 1rem; display: flex; align-items: center; } .transaction-table .pagination-controls button { padding: 0.25rem 0.5rem; border: 1px solid var(--clr-smoke-dark); border-radius: var(--round-tiny); background: var(--clr-smoke-light); transition: all 200ms ease; } .transaction-table .pagination-controls button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .transaction-table .pagination-controls button.pagination-back, .transaction-table .pagination-controls button.pagination-first { padding-left: 1rem; border-radius: 1rem var(--round-tiny) var(--round-tiny) 1rem; } .transaction-table .pagination-controls button.pagination-next, .transaction-table .pagination-controls button.pagination-last { padding-right: 1rem; border-radius: var(--round-tiny) 1rem 1rem var(--round-tiny); } .transaction-table .pagination-controls button:hover, .transaction-table .pagination-controls button:focus-visible { color: var(--clr-light); } .transaction-table .pagination-controls button.pagination-back:hover, .transaction-table .pagination-controls button.pagination-back:focus-visible, .transaction-table .pagination-controls button.pagination-next:hover, .transaction-table .pagination-controls button.pagination-next:focus-visible { background-color: var(--clr-tertiary-l3); border-color: var(--clr-tertiary-l1); } .transaction-table .pagination-controls button.pagination-first:hover, .transaction-table .pagination-controls button.pagination-first:focus-visible, .transaction-table .pagination-controls button.pagination-last:hover, .transaction-table .pagination-controls button.pagination-last:focus-visible { background-color: var(--clr-tertiary-l2); border-color: var(--clr-tertiary); }.sidebar { background: linear-gradient(to bottom, var(--clr-dark-gray), var(--clr-dark)); color: white; display: flex; flex-direction: column; row-gap: 1rem; isolation: isolate; height: calc(100dvh - 5rem); position: fixed; top: 5rem; left: 0; transition: all 250ms ease-out; padding: 0.75rem 0; z-index: 1200; } .sidebar h2 { text-align: center; } .sidebar .sidebar-groups { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; } @media screen and (min-width: 1600px) { .sidebar { row-gap: 2rem; } } .sidebar-link-group, .utility-link-group { display: flex; flex-direction: column; row-gap: 0.05rem; } @media screen and (min-width: 1400px) { .sidebar-link-group, .utility-link-group { row-gap: 0.25rem; } } @media screen and (min-width: 1600px) { .sidebar-link-group, .utility-link-group { row-gap: 0.5rem; } } .sidebar-link, .utility-link { display: flex; flex-direction: row; align-items: center; gap: 0.75rem; color: white; text-decoration: none; position: relative; transition: all 180ms ease-out; padding: 0.5rem; } .sidebar-link .icon, .sidebar-link .sidebar-text, .utility-link .icon, .utility-link .sidebar-text { z-index: 2; } .sidebar-link::after, .utility-link::after { content: ""; position: absolute; inset: 0; opacity: 0; z-index: 1; transition: all 180ms ease-out; } .sidebar-link:hover::after, .sidebar-link:focus-visible::after, .utility-link:hover::after, .utility-link:focus-visible::after { opacity: 0.3; } @media screen and (min-width: 1600px) { .sidebar-link, .utility-link { padding: 0.75rem; } } .sidebar-link { margin-inline: 1rem; } .sidebar-link .sidebar-text { font-size: 0.6rem; } @media screen and (min-width: 1600px) { .sidebar-link .sidebar-text { font-size: 0.65rem; } } .sidebar-link .icon { font-size: 1.5rem; } @media screen and (min-width: 1400px) { .sidebar-link .icon { font-size: 1.75rem; } } @media screen and (min-width: 1600px) { .sidebar-link .icon { font-size: 2.125rem; } } .sidebar-link::after { border-radius: var(--round-small); background: var(--clr-light); } .sidebar-link[page-active=true] { background: var(--clr-smoke); border-radius: var(--round-small); color: var(--clr-dark-gray); pointer-events: none; cursor: normal; } @media screen and (min-width: 1600px) { .sidebar-link[page-active=true] { margin-right: 0; border-radius: var(--round-small) 0 0 var(--round-small); } } @media screen and (min-width: 1600px) { .sidebar-link { margin-inline: 1.25rem; } } .utility-link-group { align-items: center; } .utility-link { height: 2rem; width: 2rem; display: flex; justify-content: center; align-items: center; cursor: pointer; } .utility-link .sidebar-text { display: none; font-size: 0.6rem; } @media screen and (min-width: 1600px) { .utility-link .sidebar-text { font-size: 0.7rem; } } .utility-link .icon { font-size: 0.85rem; animation: scaleBounce 0.2s ease-in-out forwards; } @media screen and (min-width: 1600px) { .utility-link .icon { font-size: 1.25rem; } } .utility-link::after { inset: 0.25rem; border-radius: 50%; background: var(--clr-light); scale: 0; } .utility-link:hover::after, .utility-link:focus-visible::after { scale: 1; } @media screen and (min-width: 1600px) { .utility-link { width: 3rem; height: 3rem; } } .sidebar.collapsed .sidebar-link { margin-inline: 0.25rem; padding: 0.5rem 0.25rem; } .sidebar.collapsed .sidebar-link .sidebar-text { display: none; } .sidebar.collapsed .sidebar-link[page-active=true] { margin-right: 0; padding-right: 0.5rem; border-radius: var(--round-small) 0 0 var(--round-small); } @media screen and (min-width: 1600px) { .sidebar.collapsed .sidebar-link { padding: 0.75rem 0.25rem; } }.performance-toggle, .sidebar-export-button { display: grid; place-items: center; color: white; position: relative; transition: all 180ms ease-out; height: 2rem; width: 2rem; } .performance-toggle .icon, .sidebar-export-button .icon { font-size: 0.85rem; transition: all 150ms ease; } @media screen and (min-width: 1600px) { .performance-toggle .icon, .sidebar-export-button .icon { font-size: 1.25rem; } } .performance-toggle::after, .sidebar-export-button::after { content: ""; position: absolute; inset: 0; opacity: 0; z-index: -1; transition: all 180ms ease-out; inset: 0.25rem; border-radius: 50%; background: var(--clr-light); scale: 0; } .performance-toggle:hover::after, .performance-toggle:focus-visible::after, .sidebar-export-button:hover::after, .sidebar-export-button:focus-visible::after { opacity: 0.3; scale: 1; } .performance-toggle:active::after, .sidebar-export-button:active::after { animation: pulse-quick 500ms ease-in-out forwards; } @media screen and (min-width: 1600px) { .performance-toggle, .sidebar-export-button { width: 3rem; height: 3rem; } } .toggle { display: block; position: relative; width: 100%; height: 100%; cursor: pointer; } .toggle-input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-input:checked + .toggle-face .icon-animate { display: block; } .toggle-input:checked + .toggle-face .icon-quick { display: none; } .toggle-face { position: absolute; inset: 0; margin: auto; width: 1.25rem; height: 1.25rem; display: flex; } .toggle-face .icon { animation: scaleBounce 0.2s ease-in-out forwards; width: min-content; margin: auto; } .toggle-face .icon-animate { display: none; } .toggle-face .icon-quick { display: block; } .sidebar-export-button { cursor: pointer; opacity: 0; animation: fadeIn 400ms ease-out forwards; } .sidebar-export-button.export-status-queued { cursor: not-allowed; } .sidebar-export-button.export-status-queued .icon { color: var(--clr-secondary); animation: subtle-pulse 1.5s infinite alternate; } .sidebar-export-button.export-status-queued::after { opacity: 0.1; scale: 1; background: var(--clr-secondary); opacity: 0.15; } .sidebar-export-button.export-status-started { cursor: not-allowed; } .sidebar-export-button.export-status-started .icon { color: var(--clr-tertiary-l4); } .sidebar-export-button.export-status-started::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 50%; background: transparent; border: 2px solid transparent; border-top-color: var(--clr-tertiary-l4); border-right-color: var(--clr-tertiary-l4); scale: 0.85; opacity: 0.7; animation: spinner 1s linear infinite; transition: none; } .sidebar-export-button.export-status-completed { cursor: not-allowed; } .sidebar-export-button.export-status-completed .icon { color: var(--clr-green); animation: success-bounce 0.5s forwards; } .sidebar-export-button.export-status-completed::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 50%; background: transparent; border: 2px solid transparent; border-top-color: var(--clr-green); border-right-color: var(--clr-green); scale: 0.85; opacity: 0.7; animation: spinner 1s linear infinite; transition: none; } .sidebar-export-button.export-status-sent { cursor: not-allowed; } .sidebar-export-button.export-status-sent .icon { color: var(--clr-light); animation: success-burst 0.5s forwards; } .sidebar-export-button.export-status-sent::after { background: var(--clr-primary); opacity: 1; scale: 1; } .sidebar-export-button.export-status-failed { cursor: not-allowed; } .sidebar-export-button.export-status-failed .icon { color: var(--clr-red); animation: shake 0.5s forwards; } .sidebar-export-button.export-status-failed::after { background: var(--clr-red); opacity: 0; scale: 1; animation: error-fade 0.5s forwards; }.topbar { position: fixed; top: 0; left: 0; right: 0; display: flex; border-bottom: 1px solid var(--clr-smoke-dark); padding: 1rem; justify-content: space-between; align-items: center; height: 5rem; z-index: 999; background: var(--clr-smoke); color: var(--clr-dark-gray); } .topbar .topbar-content { display: flex; flex-direction: row; gap: 0.85rem; color: var(--clr-dark-gray); align-items: center; } .topbar .topbar-content h1 { font-size: 2.5rem; color: var(--clr-primary); transition: color 300ms ease; } .topbar .topbar-content h2 { font-weight: 500; font-size: 1.5rem; } .topbar .topbar-content .topbar-content-text { display: flex; flex-direction: row; gap: 0.65rem; align-items: baseline; } .topbar .topbar-content .separator { width: 1px; height: 1.5rem; display: block; background: var(--clr-smoke-dark); } .topbar .topbar-content img { height: 3rem; } .topbar .topbar-content:hover h1, .topbar .topbar-content:focus-visible h1 { color: var(--clr-secondary); } .topbar .topbar-controls { display: flex; flex-direction: row; gap: 1rem; align-items: center; } .topbar .topbar-controls .user-auth-section { display: flex; align-items: center; gap: 0.75rem; margin-left: 0.5rem; padding-left: 0.75rem; border-left: 1px solid var(--clr-smoke-dark); } .topbar .topbar-controls .user-auth-section .user-greeting { font-size: 0.9rem; color: var(--clr-dark-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .topbar .topbar-controls .user-auth-section .sign-out-btn { background-color: var(--clr-primary); color: var(--clr-light); border: none; border-radius: var(--round-tiny); padding: 0.35rem 0.75rem; font-size: 0.8rem; cursor: pointer; transition: background-color 250ms ease; } .topbar .topbar-controls .user-auth-section .sign-out-btn:hover, .topbar .topbar-controls .user-auth-section .sign-out-btn:focus-visible { background-color: var(--clr-secondary); } .date-selector-trigger { display: flex; flex-direction: row; column-gap: 0.75rem; align-items: center; border-radius: var(--round-tiny); padding: 0.5rem 0.75rem; border: 1px solid var(--clr-smoke-dark); color: var(--clr-dark-gray); transition: all 150ms ease; position: relative; } .date-selector-trigger > span { font-size: 0.9rem; } .date-selector-trigger .active-date-label { font-size: 0.8rem; background: var(--clr-primary-translucent); line-height: 1; color: var(--clr-light); border-radius: var(--round-tiny) 1rem 1rem var(--round-tiny); border: 1px solid transparent; padding: 0.15rem 0.5rem 0.15rem 0.25rem; text-transform: uppercase; letter-spacing: 0.15px; font-weight: 500; transition: background-color 150ms ease-out, border-radius 500ms ease-out; } .date-selector-trigger .active-date { line-height: 1; } .date-selector-trigger .icon { font-size: 0.5rem; opacity: 0.5; transition: all 300ms ease-out; } .date-selector-trigger::after { content: ""; border-radius: 1px; height: 0.5rem; width: 0.5rem; rotate: 45deg; background: var(--clr-primary); position: absolute; left: 50%; bottom: -0.25rem; translate: -50% 0; display: none; z-index: -1; transition: background-color 300ms ease; } .date-selector-trigger:hover, .date-selector-trigger:focus-visible { border-color: var(--clr-primary-d1); background: var(--clr-primary-d1); } .date-selector-trigger:hover .active-date-label, .date-selector-trigger:focus-visible .active-date-label { background: var(--clr-secondary); } .date-selector-trigger:hover .active-date, .date-selector-trigger:focus-visible .active-date { color: var(--clr-light); } .date-selector-trigger.active { border-color: var(--clr-primary); background: var(--clr-primary); } .date-selector-trigger.active .active-date-label { background: var(--clr-secondary); } .date-selector-trigger.active .active-date { color: var(--clr-light); } .date-selector-trigger.active::after { display: block; } .searchbar input { display: flex; flex-direction: row; column-gap: 0.75rem; align-items: center; border-radius: var(--round-tiny); padding: 0.25rem 0.45rem; border: 1px solid var(--clr-smoke-dark); color: var(--clr-dark-gray); transition: all 150ms ease; } .topbar-controls { height: 100%; } .topbar-controls .topbar-button { align-self: stretch; align-items: center; height: 100%; border: 1px solid var(--clr-smoke-dark); background-color: var(--clr-light-50); border-radius: var(--round-tiny); padding: 0.5rem 1rem; transition: background-color 250ms, border-color 250ms, color 250ms; font-size: 0.9rem; display: flex; place-content: center; } .topbar-controls .topbar-button .icon { font-size: 1rem; } .topbar-controls .reset-button { position: relative; } .topbar-controls .reset-button::after { content: ""; border-radius: 1px; height: 0.5rem; width: 0.5rem; rotate: 45deg; background: var(--clr-red-d2); position: absolute; left: 50%; bottom: -0.25rem; translate: -50% 0; display: none; } .topbar-controls .reset-button:hover, .topbar-controls .reset-button:focus-visible, .topbar-controls .reset-button.confirm-open { background-color: var(--clr-red-d2); border-color: var(--clr-red-d2); color: var(--clr-light); } .topbar-controls .reset-button:hover .icon, .topbar-controls .reset-button:focus-visible .icon, .topbar-controls .reset-button.confirm-open .icon { animation: counterClockwise 1s linear infinite; } .topbar-controls .reset-button.confirm-open:after { display: block; } .footerbar { text-align: center; display: flex; place-content: center; margin: 1rem; } .footerbar p { color: var(--clr-smoke-dark); font-size: 0.8rem; font-weight: 500; transition: all 800ms ease; display: flex; flex-direction: row; align-items: center; gap: 1rem; text-align: center; text-wrap: unset; max-width: unset; cursor: pointer; } .footerbar p .icon { transition: all 200ms ease; } .footerbar p.shown .reveal { width: 100%; } .footerbar .reveal { display: inline-block; vertical-align: middle; width: 0; overflow: hidden; white-space: nowrap; transition: width 0.85s ease-out; } .footerbar:hover p, .footerbar:focus-visible p { color: var(--clr-light-gray); } .footerbar:hover p .icon, .footerbar:focus-visible p .icon { color: var(--clr-primary); } .reset-container { display: flex; height: 100%; position: relative; } .confirm-popup { position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 10; background: var(--clr-light); box-shadow: var(--box-shadow-light); border-radius: var(--round-tiny); overflow: hidden; margin-top: 5px; width: 20rem; } .confirm-popup h2 { font-size: 1rem; font-weight: 600; display: block; background: var(--clr-red-d2); color: var(--clr-light); padding: 0.5rem 0.85rem; } .confirm-popup p { font-size: 0.8rem; font-style: italic; padding: 0.25rem 0.85rem 0.5rem 0.85rem; } .confirm-popup div { display: flex; gap: 0.5rem; justify-content: space-between; padding: 0.25rem 0.85rem 0.5rem 0.85rem; } .confirm-popup button { padding: 0.5rem 0.75rem; background-color: var(--clr-smoke-light); border: 1px solid var(--clr-smoke-dark); border-radius: var(--round-tiny); transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease; cursor: pointer; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.25px; } .confirm-popup button:hover, .confirm-popup button:focus-visible { color: var(--clr-light); background-color: var(--clr-primary); border-color: var(--clr-primary-d1); } .confirm-popup button.reset-button-confirm { background-color: var(--clr-red-d2); border-color: var(--clr-red-d2); color: var(--clr-light); } .confirm-popup button.reset-button-confirm:hover, .confirm-popup button.reset-button-confirm:focus-visible { background-color: var(--clr-red); border-color: var(--clr-red-d1); }/* Variables declaration */ /* prettier-ignore */ .rdp-root { --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */ --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */ --rdp-day-height: 44px; /* The height of the day cells. */ --rdp-day-width: 44px; /* The width of the day cells. */ --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */ --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */ --rdp-day_button-height: 42px; /* The height of the day cells. */ --rdp-day_button-width: 42px; /* The width of the day cells. */ --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */ --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */ --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */ --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */ --rdp-dropdown-gap: 0.5rem;/* The gap between the dropdowns used in the month captons. */ --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */ --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */ --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */ --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */ --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */ --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */ --rdp-range_middle-color: inherit;/* The color of the range text. */ --rdp-range_start-color: white; /* The color of the range text. */ --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */ --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */ --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */ --rdp-range_end-color: white;/* The color of the range text. */ --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */ --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */ --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */ --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */ --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */ --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */ --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */ --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */ --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */ --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */ --rdp-gradient-direction: 90deg; } .rdp-root[dir="rtl"] { --rdp-gradient-direction: -90deg; } .rdp-root[data-broadcast-calendar="true"] { --rdp-outside-opacity: unset; } /* Root of the component. */ .rdp-root { position: relative; /* Required to position the navigation toolbar. */ box-sizing: border-box; } .rdp-root * { box-sizing: border-box; } .rdp-day { width: var(--rdp-day-width); height: var(--rdp-day-height); text-align: center; } .rdp-day_button { background: none; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; justify-content: center; align-items: center; display: flex; width: var(--rdp-day_button-width); height: var(--rdp-day_button-height); border: var(--rdp-day_button-border); border-radius: var(--rdp-day_button-border-radius); } .rdp-day_button:disabled { cursor: revert; } .rdp-caption_label { z-index: 1; position: relative; display: inline-flex; align-items: center; white-space: nowrap; border: 0; } .rdp-dropdown:focus-visible ~ .rdp-caption_label { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .rdp-button_next, .rdp-button_previous { border: none; background: none; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; -moz-appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; position: relative; appearance: none; width: var(--rdp-nav_button-width); height: var(--rdp-nav_button-height); } .rdp-button_next:disabled, .rdp-button_previous:disabled { cursor: revert; opacity: var(--rdp-nav_button-disabled-opacity); } .rdp-chevron { display: inline-block; fill: var(--rdp-accent-color); } .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron { transform: rotate(180deg); } .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron { transform: rotate(180deg); transform-origin: 50%; } .rdp-dropdowns { position: relative; display: inline-flex; align-items: center; gap: var(--rdp-dropdown-gap); } .rdp-dropdown { z-index: 2; /* Reset */ opacity: 0; appearance: none; position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; width: 100%; margin: 0; padding: 0; cursor: inherit; border: none; line-height: inherit; } .rdp-dropdown_root { position: relative; display: inline-flex; align-items: center; } .rdp-dropdown_root[data-disabled="true"] .rdp-chevron { opacity: var(--rdp-disabled-opacity); } .rdp-month_caption { display: flex; align-content: center; height: var(--rdp-nav-height); font-weight: bold; font-size: large; } .rdp-months { position: relative; display: flex; flex-wrap: wrap; gap: var(--rdp-months-gap); max-width: fit-content; } .rdp-month_grid { border-collapse: collapse; } .rdp-nav { position: absolute; inset-block-start: 0; inset-inline-end: 0; display: flex; align-items: center; height: var(--rdp-nav-height); } .rdp-weekday { opacity: var(--rdp-weekday-opacity); padding: var(--rdp-weekday-padding); font-weight: 500; font-size: smaller; text-align: var(--rdp-weekday-text-align); text-transform: var(--rdp-weekday-text-transform); } .rdp-week_number { opacity: var(--rdp-week_number-opacity); font-weight: 400; font-size: small; height: var(--rdp-week_number-height); width: var(--rdp-week_number-width); border: var(--rdp-week_number-border); border-radius: var(--rdp-week_number-border-radius); text-align: var(--rdp-weeknumber-text-align); } /* DAY MODIFIERS */ .rdp-today:not(.rdp-outside) { color: var(--rdp-today-color); } .rdp-selected { font-weight: bold; font-size: large; } .rdp-selected .rdp-day_button { border: var(--rdp-selected-border); } .rdp-outside { opacity: var(--rdp-outside-opacity); } .rdp-disabled { opacity: var(--rdp-disabled-opacity); } .rdp-hidden { visibility: hidden; color: var(--rdp-range_start-color); } .rdp-range_start { background: var(--rdp-range_start-background); } .rdp-range_start .rdp-day_button { background-color: var(--rdp-range_start-date-background-color); color: var(--rdp-range_start-color); } .rdp-range_middle { background-color: var(--rdp-range_middle-background-color); } .rdp-range_middle .rdp-day_button { border-color: transparent; border: unset; border-radius: unset; color: var(--rdp-range_middle-color); } .rdp-range_end { background: var(--rdp-range_end-background); color: var(--rdp-range_end-color); } .rdp-range_end .rdp-day_button { color: var(--rdp-range_start-color); background-color: var(--rdp-range_end-date-background-color); } .rdp-range_start.rdp-range_end { background: revert; } .rdp-focusable { cursor: pointer; } .rdp-month_grid { border-spacing: 0 0.125rem; border-collapse: separate; } .rdp-day_range_middle { background-color: var(--clr-primary-d1); color: var(--clr-light); } .rdp-day_range_start, .rdp-day_range_end { color: var(--clr-light); } .rdp-day_range_start:hover, .rdp-day_range_start:focus-visible, .rdp-day_range_end:hover, .rdp-day_range_end:focus-visible { background-color: var(--clr-secondary-d1); } .rdp-hidden { visibility: hidden; color: var(--clr-light); } .rdp-chevron { fill: var(--clr-primary); } .rdp-today:not(.rdp-outside) { color: var(--clr-brown); font-weight: 500; } .rdp-month_caption { font-weight: 500; color: var(--clr-dark-gray); } .rdp-day { transition: background-color 250ms ease, border-radius 250ms ease-out, border 250ms linear; } .rdp-nav { left: 0; justify-content: space-between; } .rdp-nav button svg polygon { transition: fill 200ms ease; } .rdp-nav button:hover svg polygon, .rdp-nav button:focus-visible svg polygon { fill: var(--clr-secondary); } .rdp-month_caption { place-content: center; } .rdp-day:not(.rdp-selected):hover, .rdp-day:not(.rdp-selected):focus-visible { background-color: var(--clr-secondary-l2); color: var(--clr-dark-gray); } .rdp-day:not(.rdp-selected).rdp-day_range_start, .rdp-day:not(.rdp-selected).rdp-day_range_end { color: var(--clr-light); } .rdp-day:not(.rdp-selected).rdp-day_range_start:hover, .rdp-day:not(.rdp-selected).rdp-day_range_start:focus-visible, .rdp-day:not(.rdp-selected).rdp-day_range_end:hover, .rdp-day:not(.rdp-selected).rdp-day_range_end:focus-visible { background-color: var(--clr-secondary); } .rdp-selected .rdp-day_button { border: none; } .rdp-selected.rdp-day_range_start .rdp-day_button, .rdp-selected.rdp-day_range_end .rdp-day_button { border: none; } .rdp-selected.single-day { border-radius: var(--round-small); } .rdp-selected:not(.rdp-day_range_start):not(.rdp-day_range_end) { border-radius: var(--round-small) 0 0 var(--round-small); background: var(--clr-primary); color: var(--clr-light); } .rdp-selected:not(.rdp-day_range_start):not(.rdp-day_range_end) .rdp-day_button { border: none; } .rdp-day_range_start { border-radius: var(--round-small) 0 0 var(--round-small); background: var(--clr-primary); } .rdp-day_range_end { border-radius: 0 var(--round-small) var(--round-small) 0; background: var(--clr-primary); } .date-range-picker, .single-date-picker { display: flex; flex-direction: column; gap: 1rem; background-color: var(--clr-light); border-radius: var(--round-small); box-shadow: var(--box-shadow); width: fit-content; animation: fadeIn 500ms forwards; overflow: hidden; } .date-range-picker .date-ranger-picker-header, .date-range-picker .date-picker-header, .single-date-picker .date-ranger-picker-header, .single-date-picker .date-picker-header { padding: 1rem 1.5rem; background: var(--clr-primary); font-size: 1rem; font-weight: 600; display: block; color: var(--clr-light); } .date-range-picker .calendars-and-buttons-row, .single-date-picker .calendars-and-buttons-row { display: flex; gap: 2rem; padding: 0 1.5rem; } .date-range-picker .calendars-container, .single-date-picker .calendars-container { display: flex; gap: 1rem; position: relative; } .date-range-picker .calendars-container::after, .single-date-picker .calendars-container::after { content: "-"; font-size: 0.8rem; position: absolute; color: var(--clr-dark-gray); opacity: 0.35; top: 25px; left: 50%; translate: -50% 0; } .date-range-picker .calendar-wrapper, .single-date-picker .calendar-wrapper { display: flex; flex-direction: column; } .date-range-picker .calendar-wrapper.calendar-from .calendar-header, .single-date-picker .calendar-wrapper.calendar-from .calendar-header { text-align: right; } .date-range-picker .calendar-wrapper.calendar-from .selected-date-container, .single-date-picker .calendar-wrapper.calendar-from .selected-date-container { margin-left: auto; } .date-range-picker .calendar-wrapper.calendar-to .calendar-header, .single-date-picker .calendar-wrapper.calendar-to .calendar-header { text-align: left; } .date-range-picker .calendar-wrapper.calendar-to .selected-date-container, .single-date-picker .calendar-wrapper.calendar-to .selected-date-container { margin-right: auto; } .date-range-picker .calendar-header, .single-date-picker .calendar-header { font-size: 0.8rem; font-weight: 600; color: var(--clr-dark-gray); opacity: 0.35; margin-bottom: 0.25rem; } .date-range-picker .selected-date-container, .single-date-picker .selected-date-container { margin-bottom: 0.75rem; min-height: 2rem; display: flex; justify-content: center; } .date-range-picker .selectedDate, .single-date-picker .selectedDate { font-size: 1rem; font-weight: 500; color: var(--clr-dark-gray); cursor: pointer; padding: 0.125rem 0; transition: color 200ms ease; } .date-range-picker .selectedDate:hover, .date-range-picker .selectedDate:focus-visible, .single-date-picker .selectedDate:hover, .single-date-picker .selectedDate:focus-visible { color: var(--clr-tertiary-l1); } .date-range-picker .dateInput, .single-date-picker .dateInput { font-size: 0.875rem; width: 100px; padding: 0.125rem 0.25rem; border: 1px solid var(--clr-tertiary); border-radius: var(--round-tiny); text-align: center; line-height: 2; height: 1.75rem; color: var(--clr-tertiary-d1); } .date-range-picker .calendar, .single-date-picker .calendar { border: 1px solid var(--clr-smoke-light); border-radius: 0.5rem; padding: 0.5rem; transition: border-color 200ms ease; } .date-range-picker .calendar:hover, .date-range-picker .calendar:focus-visible, .single-date-picker .calendar:hover, .single-date-picker .calendar:focus-visible { border-color: var(--clr-smoke-dark); } .date-range-picker .buttonColumn, .single-date-picker .buttonColumn { display: grid; flex-direction: column; gap: 0.5rem; } .date-range-picker .date-preset-button, .single-date-picker .date-preset-button { padding: 0.5rem 1rem; border-radius: var(--round-small); border: 1px solid var(--clr-light-gray); cursor: pointer; background-color: transparent; transition: all 0.2s; font-size: 0.875rem; } .date-range-picker .date-preset-button:hover, .date-range-picker .date-preset-button:focus-visible, .single-date-picker .date-preset-button:hover, .single-date-picker .date-preset-button:focus-visible { border-color: var(--clr-primary-d1); color: var(--clr-primary-d1); } .date-range-picker .date-preset-button.selected, .date-range-picker .date-preset-button:active, .single-date-picker .date-preset-button.selected, .single-date-picker .date-preset-button:active { background-color: var(--clr-primary); color: var(--clr-light); border-color: var(--clr-primary); } .date-range-picker .bottom-buttons, .single-date-picker .bottom-buttons { display: flex; justify-content: flex-end; gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid var(--clr-smoke-light); } .date-range-picker .bottom-buttons button, .single-date-picker .bottom-buttons button { padding: 0.75rem 1.5rem; border-radius: var(--round-small); cursor: pointer; transition: all 200ms ease; } .date-range-picker .cancel-button, .single-date-picker .cancel-button { border: 1px solid var(--clr-dark-gray); color: var(--clr-dark-gray); transition: all 300ms ease; } .date-range-picker .cancel-button:hover, .date-range-picker .cancel-button:focus-visible, .single-date-picker .cancel-button:hover, .single-date-picker .cancel-button:focus-visible { color: var(--clr-dark-gray); border-color: var(--clr-dark-gray); background-color: var(--clr-smoke-light); } .date-range-picker .apply-button, .single-date-picker .apply-button { border: 1px solid transparent; cursor: pointer; background-color: var(--clr-primary); color: var(--clr-light); width: 8rem; transition: all 300ms ease; } .date-range-picker .apply-button:hover, .date-range-picker .apply-button:focus-visible, .single-date-picker .apply-button:hover, .single-date-picker .apply-button:focus-visible { color: var(--clr-light); background: var(--clr-secondary); border-color: var(--clr-secondary-d2); } .date-range-picker .apply-button:active, .single-date-picker .apply-button:active { color: var(--clr-light); background: var(--clr-secondary-d1); border-color: var(--clr-secondary-d1); } .rdp-day.outside-range button { cursor: default; pointer-events: none; color: var(--clr-dark-gray50); } .single-date-calendar .rdp-root.calendar { padding-inline: 1.5rem; border: none; } .single-date-calendar .rdp-selected { border-radius: var(--round-small) !important; } .single-date-picker { gap: 0; } .single-date-picker .bottom-buttons { margin-inline: 1.5rem; padding: 1rem 1.5rem; display: flex; justify-content: space-between; }.filter-toggle { display: inline-flex; align-items: center; gap: 0.5rem; background-color: var(--clr-smoke); border-color: var(--clr-smoke-dark); position: relative; } .filter-toggle:hover, .filter-toggle:focus-visible, .filter-toggle.filter-open { background-color: var(--clr-primary); border-color: var(--clr-primary-d1); color: var(--clr-light); } .filter-toggle:hover.has-filters .filter-count, .filter-toggle:focus-visible.has-filters .filter-count, .filter-toggle.filter-open.has-filters .filter-count { background-color: var(--clr-secondary); } .filter-toggle:active { background-color: var(--clr-primary-d1); } .filter-toggle:active::after { background-color: var(--clr-primary-d1); } .filter-toggle.filter-open { background-color: var(--clr-primary); border-color: var(--clr-primary); } .filter-toggle.filter-open::after { display: block; } .filter-toggle.filter-open:hover, .filter-toggle.filter-open:focus-visible { background-color: var(--clr-primary-d1); border-color: var(--clr-primary-d1); } .filter-toggle.filter-open:hover::after, .filter-toggle.filter-open:focus-visible::after { background-color: var(--clr-primary-d1); } .filter-toggle.has-filters .filter-count { background-color: var(--clr-primary); color: var(--clr-light); border-radius: var(--round-tiny); width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--box-shadow-light); } .filter-toggle.has-filters .filter-count .filter-count-actual { line-height: 1; font-weight: 600; font-size: 0.75rem; } .filter-toggle::after { content: ""; border-radius: 1px; height: 0.5rem; width: 0.5rem; rotate: 45deg; background: var(--clr-primary); position: absolute; left: 50%; bottom: -0.25rem; translate: -50% 0; display: none; z-index: -1; transition: background-color 300ms ease; } .filter-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 1000; } .filter-popup.popup-canvas { top: 0; bottom: 0; right: 0; justify-content: flex-end; align-items: flex-start; top: 80px; opacity: 0; animation: fadeIn 80ms linear forwards; } .filter-popup .filter-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; color: var(--clr-light); border-bottom: 1px solid var(--clr-light-50); } .filter-field { border-radius: var(--round-tiny); transition: background-color 0.2s ease; place-content: start; grid-column: span 4; } .filter-field .filter-label { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; gap: 2rem; } .filter-field .filter-label .filter-label-actual { padding: 0.25rem 0; font-weight: 500; letter-spacing: 0.25px; text-transform: uppercase; font-size: 0.85rem; color: var(--clr-light-50); flex-shrink: 0; } .filter-field .filter-inputs { display: flex; align-items: center; gap: 0.5rem; } .filter-field .filter-inputs .filter-input { width: 100%; border: 1px solid var(--clr-smoke-o25); border-radius: var(--round-tiny); font-size: 0.85rem; display: flex; flex-direction: row; gap: 0; align-items: center; transition: border-color 250ms linear; background: transparent; } .filter-field .filter-inputs .filter-input:hover, .filter-field .filter-inputs .filter-input:focus-visible, .filter-field .filter-inputs .filter-input:focus-within { border-color: var(--clr-secondary); } .filter-field .filter-inputs .filter-input .filter-input-prefix, .filter-field .filter-inputs .filter-input .filter-input-suffix { font-size: 0.85rem; padding: 0 0.5rem; display: none; } .filter-field .filter-inputs .filter-input .filter-input-prefix.visible-affix, .filter-field .filter-inputs .filter-input .filter-input-suffix.visible-affix { display: block; } .filter-field .filter-inputs input { width: 100%; padding: 0.5rem; background: transparent; border: none; outline: none; color: var(--clr-light); } .filter-field .filter-inputs input::placeholder { color: var(--clr-light-gray); } .filter-field .filter-inputs input[type=date] { min-width: 120px; } .filter-field .filter-inputs input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); } .filter-field .filter-inputs span { color: var(--clr-smoke-o25); text-transform: uppercase; font-size: 0.5rem; } .filter-field.cxid-filter { width: 100%; } .filter-field.location-filter { grid-column: span 10; } .filter-field.self_reported_location-filter { grid-column: span 2; } .filter-field.latest_biller-filter, .filter-field.latest_sp-filter { grid-column: span 6; } .filter-field.birthdate-filter { grid-column: span 4; } .filter-field.gender-filter { grid-column: span 3; } .filter-field.civil_status-filter { grid-column: span 7; } @media screen and (min-width: 1600px) { .filter-field.civil_status-filter { grid-column: span 5; } } .filter-field.dependents-filter { grid-column: span 5; } @media screen and (min-width: 1600px) { .filter-field.dependents-filter { grid-column: span 4; } } .filter-field.occupation-filter { grid-column: span 8; } .filter-field.sec_level-filter { grid-column: span 6; } .filter-field.rfm_category-filter, .filter-field.rfm_segment-filter { grid-column: span 12; } @media screen and (min-width: 1600px) { .filter-field.rfm_category-filter .filter-options, .filter-field.rfm_segment-filter .filter-options { max-width: 90rem; } } @media screen and (min-width: 1600px) { .filter-field.frequency_class-filter { grid-column: span 3; } } .filter-field.enriched-filter, .filter-field.dupe-filter { grid-column: span 2; } .filter-field .filter-options { display: flex; flex-wrap: wrap; gap: 0.4rem; } .filter-field .filter-options .option-button { width: fit-content; border: 1px solid var(--clr-smoke-o25); font-size: 0.85rem; color: var(--clr-light); transition: border-color 150ms linear, background-color 150ms linear; background: transparent; padding-block: 0.5rem; padding-inline: 1rem; border-radius: 1rem; } .filter-field .filter-options .option-button:hover, .filter-field .filter-options .option-button:focus-visible { border-color: var(--clr-secondary); } .filter-field .filter-options .option-button.selected { background-color: var(--clr-secondary-d1); color: var(--clr-light); border-color: var(--clr-secondary-d1); } @media screen and (min-width: 1600px) { .filter-field .filter-options .option-button { padding: 0.5rem; border-radius: var(--round-tiny); } .filter-field .filter-options .option-button:nth-child(1) { padding-left: 1rem; border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; } .filter-field .filter-options .option-button:last-child { padding-right: 1rem; border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; } } .filter-field.invalid-field .filter-label-actual { color: var(--clr-red-d2); } .filter-field.invalid-field .invalid-field-actual { border-color: var(--clr-red) !important; background-color: var(--clr-red-l2); } .filter-field .invalid-field-message, .filter-field .bdate-field-message { font-size: 0.75rem; color: var(--clr-red-d2); padding: 0.25rem 0.5rem 0.25rem 1rem; border-radius: var(--round-tiny); background: var(--clr-light); border: 1px solid var(--clr-red-d2); display: block; position: relative; transform: scaleX(100%); animation: slideLeft 300ms ease-out forwards; } .filter-field .invalid-field-message::before, .filter-field .bdate-field-message::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 0.5rem; background: var(--clr-red-d2); } .filter-field .bdate-field-message { color: var(--clr-violet-d1); border-color: var(--clr-violet); } .filter-field .bdate-field-message::before { background: var(--clr-violet); } .filter-popup .filter-content { background: var(--clr-slate); border-right: none; border-radius: var(--round-small) 0 0 var(--round-small); width: 100%; max-width: calc(100dvw - 110px); max-height: calc(100dvh - 80px); height: 100%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transform: translateX(100%); animation: slideLeft 500ms 100ms ease-out forwards; position: relative; } @media screen and (min-width: 1600px) { .filter-popup .filter-content { max-width: calc(100dvw - 180px); } } .filter-popup .filter-content h2 { font-size: 1rem; font-weight: 500; margin: 0; } .filter-popup .filter-content .filter-scroller { height: calc(100% - 80px) !important; overflow-x: hidden; margin-block: 1rem; } @media screen and (min-width: 1440px) { .filter-popup .filter-content .filter-scroller { margin-block: 0; height: 100%; } } .filter-popup .filter-content .ScrollbarsCustom-Content { padding: 0 !important; } @media screen and (min-width: 1440px) { .filter-popup .filter-content .ScrollbarsCustom-Content { height: 100%; } } .filter-popup .filter-content .filter-container { display: block; row-gap: 0.85rem; column-gap: 1rem; height: 100%; padding: 0 1.75rem 0 2rem; } @media screen and (min-width: 1440px) { .filter-popup .filter-content .filter-container { padding: 1rem 1rem 1rem 2rem; } } .filter-popup .filter-content::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 1rem; background: var(--clr-dark-gray); } .filter-popup .bottom-buttons { display: flex; justify-content: space-between; gap: 0.85rem; padding: 1rem 0; margin-inline: 2rem 1rem; border-top: 1px solid var(--clr-smoke-o25); } .filter-popup .bottom-buttons .bottom-buttons-left { display: flex; gap: 0.85rem; } .filter-popup .bottom-buttons button { padding: 0.75rem 1.5rem; border-radius: var(--round-small); cursor: pointer; transition: background-color 300ms linear, border-color 300ms linear, color 200ms linear; } .filter-popup .bottom-buttons .apply-button { border: 1px solid transparent; cursor: pointer; border-color: var(--clr-secondary); color: var(--clr-secondary); width: 8rem; font-weight: 500; } .filter-popup .bottom-buttons .apply-button:hover, .filter-popup .bottom-buttons .apply-button:focus-visible { color: var(--clr-dark-gray); background: var(--clr-secondary); border-color: var(--clr-secondary); } .filter-popup .bottom-buttons .apply-button:active { background: var(--clr-secondary-d2); border-color: var(--clr-secondary-d2); } .filter-popup .bottom-buttons .clear-button { border: 1px solid var(--clr-light-gray); color: var(--clr-light-gray); } .filter-popup .bottom-buttons .clear-button:hover, .filter-popup .bottom-buttons .clear-button:focus-visible { color: var(--clr-light); background: var(--clr-red); border-color: var(--clr-red); } .filter-popup .bottom-buttons .clear-button:active { background: var(--clr-red-d1); border-color: var(--clr-red-d1); } .filter-popup .bottom-buttons .cancel-button { border: 1px solid var(--clr-light-gray); color: var(--clr-light-gray); } .filter-popup .bottom-buttons .cancel-button:hover, .filter-popup .bottom-buttons .cancel-button:focus-visible { color: var(--clr-dark-gray); background: var(--clr-smoke); border-color: var(--clr-smoke); } .filter-popup .bottom-buttons .cancel-button:active { background: var(--clr-light); border-color: var(--clr-light); } .filter-list-container { display: flex; flex-direction: column; width: 100%; } .filter-selected-ids { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.35rem; flex-direction: row; } .filter-cxid { flex-shrink: 0; display: flex; flex-direction: row; gap: 0.25rem; align-items: center; cursor: pointer; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: var(--round-tiny); background: var(--clr-primary); color: var(--clr-light); border: 1px solid var(--clr-primary-d2); transition: all 250ms linear; } .filter-cxid:hover, .filter-cxid:focus-visible { background-color: var(--clr-red); border-color: var(--clr-red-d2); } .filter-cxid:hover .remove-icon, .filter-cxid:focus-visible .remove-icon { display: block; animation: spin 300ms ease-out forwards; } .filter-cxid .remove-icon { display: none; font-size: 0.9rem; font-weight: 600; } .more-indicator { border-radius: var(--round-tiny); color: var(--clr-smoke); background: none; border: none; pointer-events: none; } .more-indicator:hover, .more-indicator:focus-visible { background: none; border: none; } .more-indicator:hover .remove-icon, .more-indicator:focus-visible .remove-icon { display: none; } .list-filter-container { position: relative; width: 100%; } .list-filter-input { width: 100%; padding: 0.5rem; border: 1px solid var(--clr-smoke-o25); border-radius: var(--round-tiny); font-size: 0.85rem; color: var(--clr-light); transition: border-color 250ms linear; background: transparent; } .list-filter-input:hover, .list-filter-input:focus-visible { border-color: var(--clr-secondary); } .list-filter-input::placeholder { color: var(--clr-light-gray); } .list-filter-dropdown { position: absolute; top: calc(100% + 0.25rem); left: 0; width: 100%; max-height: 200px; overflow-y: auto; background-color: var(--clr-dark-gray); border-radius: var(--round-tiny); z-index: 1000; } .list-filter-dropdown::-webkit-scrollbar { width: 6px; } .list-filter-dropdown::-webkit-scrollbar-thumb { background-color: var(--clr-smoke); border-radius: 3px; } .list-filter-loading, .list-filter-no-results { padding: 10px; text-align: center; color: var(--clr-smoke); font-style: italic; } .list-filter-suggestions { list-style: none; margin: 0; padding: 0; } .list-filter-suggestion-item { padding: 0.45rem 0.5rem 0.45rem 1rem; cursor: pointer; border-bottom: 1px solid var(--clr-smoke-o25); display: flex; justify-content: space-between; gap: 4rem; align-items: center; color: var(--clr-light); font-size: 0.8rem; } .list-filter-suggestion-item .list-filter-suggestion-item-right { display: grid; grid-template-columns: 5rem auto 8rem; gap: 0.5rem; align-items: center; } .list-filter-suggestion-item .list-filter-suggestion-item-right .cxid { text-align: left; } .list-filter-suggestion-item .list-filter-suggestion-item-right .mobile-no { text-align: right; } .list-filter-suggestion-item .list-filter-suggestion-item-right .interpunct { text-align: center; display: block; margin-inline: auto; } .list-filter-suggestion-item:last-child { border-bottom: none; } .list-filter-suggestion-item:hover, .list-filter-suggestion-item:focus-visible, .list-filter-suggestion-item.highlighted { color: var(--clr-dark-gray); background-color: var(--clr-secondary-l1); } .filter-accordion { width: 100%; grid-column: span 12; display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; } .filter-section { width: 100%; } .filter-section .section-header { position: relative; align-items: center; padding: 0.5rem 1.25rem; background: var(--clr-dark-gray80); transition: background 300ms linear; border-radius: var(--round-tiny); cursor: pointer; overflow: hidden; } .filter-section .section-header .section-title-wrap { color: var(--clr-secondary-d2); font-size: 0.85rem; display: flex; gap: 1rem; align-items: center; line-height: 1.5; width: 100%; justify-content: space-between; } .filter-section .section-header .badge-group { display: flex; gap: 0.5rem; align-items: center; } .filter-section .section-header .badge-group .section-active-badge { display: block; background-color: var(--clr-primary); color: var(--clr-light); border-radius: var(--round-big); height: 0.85rem; width: 0.85rem; } .filter-section .section-header .badge-group .section-active-badge:nth-child(2) { background-color: var(--clr-pink); } .filter-section .section-header .badge-group .section-active-badge:nth-child(3) { background-color: var(--clr-violet); } .filter-section .section-header .badge-group .section-active-badge:nth-child(4) { background-color: var(--clr-brown-l1); } .filter-section .section-header .badge-group .section-active-badge:nth-child(5) { background-color: var(--clr-orange-l2); } .filter-section .section-header .badge-group .section-active-badge:nth-child(6) { background-color: var(--clr-tertiary-l4); } .filter-section .section-header .section-toggle-icon { position: absolute; left: 0; top: 0; bottom: 0; width: 0.5rem; background-color: var(--clr-secondary); scale: 0 100%; transform-origin: left; transition: scale 200ms ease-out, transform 200ms ease-out; } .filter-section .section-header .section-toggle-icon.expanded { scale: 100%; } .filter-section .section-header:hover, .filter-section .section-header:focus-visible { background: var(--clr-dark-gray50); } .filter-section .section-header:hover .section-toggle-icon, .filter-section .section-header:focus-visible .section-toggle-icon { scale: 5% 100%; } .filter-section .section-header:hover .section-toggle-icon.expanded, .filter-section .section-header:focus-visible .section-toggle-icon.expanded { scale: 100%; } .filter-section .section-content { animation: fadeIn 250ms ease-out forwards; padding: 0.75rem 1.25rem; position: relative; z-index: 800; display: grid; grid-template-columns: repeat(12, 1fr); row-gap: 0.85rem; column-gap: 2rem; } .filter-field.location-filter .municity-selector { display: flex; flex-direction: row; gap: 0.85rem; width: 100%; position: relative; } .filter-field.location-filter .municity-select, .filter-field.location-filter .province-select, .filter-field.location-filter .region-select { border: none; } .filter-field.location-filter .municity-select div[class*=__control], .filter-field.location-filter .province-select div[class*=__control], .filter-field.location-filter .region-select div[class*=__control] { background-color: transparent; border: 1px solid var(--clr-smoke-o25); border-radius: var(--round-tiny); box-shadow: none; cursor: pointer; transition: border-color 250ms linear; } .filter-field.location-filter .municity-select div[class*=__control]:hover, .filter-field.location-filter .municity-select div[class*=__control][class*="--is-focused"], .filter-field.location-filter .province-select div[class*=__control]:hover, .filter-field.location-filter .province-select div[class*=__control][class*="--is-focused"], .filter-field.location-filter .region-select div[class*=__control]:hover, .filter-field.location-filter .region-select div[class*=__control][class*="--is-focused"] { border-color: var(--clr-secondary); } .filter-field.location-filter .municity-select div[class*=__value-container], .filter-field.location-filter .province-select div[class*=__value-container], .filter-field.location-filter .region-select div[class*=__value-container] { padding: 0.25rem 0.5rem; } .filter-field.location-filter .municity-select div[class*=__input-container], .filter-field.location-filter .municity-select input, .filter-field.location-filter .province-select div[class*=__input-container], .filter-field.location-filter .province-select input, .filter-field.location-filter .region-select div[class*=__input-container], .filter-field.location-filter .region-select input { color: var(--clr-light) !important; font-size: 0.85rem; } .filter-field.location-filter .municity-select div[class*=__placeholder], .filter-field.location-filter .province-select div[class*=__placeholder], .filter-field.location-filter .region-select div[class*=__placeholder] { color: var(--clr-light-gray); font-size: 0.85rem; } .filter-field.location-filter .municity-select div[class*=__single-value], .filter-field.location-filter .province-select div[class*=__single-value], .filter-field.location-filter .region-select div[class*=__single-value] { color: var(--clr-light); font-size: 0.85rem; } .filter-field.location-filter .municity-select div[class*=__indicator], .filter-field.location-filter .province-select div[class*=__indicator], .filter-field.location-filter .region-select div[class*=__indicator] { color: var(--clr-smoke-o25); padding: 0.25rem 0.5rem; } .filter-field.location-filter .municity-select div[class*=__indicator]:hover, .filter-field.location-filter .province-select div[class*=__indicator]:hover, .filter-field.location-filter .region-select div[class*=__indicator]:hover { color: var(--clr-secondary); } .filter-field.location-filter .municity-select div[class*=__indicator-separator], .filter-field.location-filter .province-select div[class*=__indicator-separator], .filter-field.location-filter .region-select div[class*=__indicator-separator] { background-color: var(--clr-smoke-o25); } .filter-field.location-filter .municity-select div[class*=__menu], .filter-field.location-filter .province-select div[class*=__menu], .filter-field.location-filter .region-select div[class*=__menu] { background-color: var(--clr-dark-gray); border-radius: var(--round-tiny); background-color: var(--clr-dark-gray); z-index: 1005; } .filter-field.location-filter .municity-select div[class*=__menu-list], .filter-field.location-filter .province-select div[class*=__menu-list], .filter-field.location-filter .region-select div[class*=__menu-list] { padding: 0; } .filter-field.location-filter .municity-select div[class*=__menu-list]::-webkit-scrollbar, .filter-field.location-filter .province-select div[class*=__menu-list]::-webkit-scrollbar, .filter-field.location-filter .region-select div[class*=__menu-list]::-webkit-scrollbar { width: 6px; } .filter-field.location-filter .municity-select div[class*=__menu-list]::-webkit-scrollbar-thumb, .filter-field.location-filter .province-select div[class*=__menu-list]::-webkit-scrollbar-thumb, .filter-field.location-filter .region-select div[class*=__menu-list]::-webkit-scrollbar-thumb { background-color: var(--clr-smoke); border-radius: 3px; } .filter-field.location-filter .municity-select div[class*=__option], .filter-field.location-filter .province-select div[class*=__option], .filter-field.location-filter .region-select div[class*=__option] { font-size: 0.8rem; color: var(--clr-light); cursor: pointer; padding: 0.5rem 1rem; background-color: transparent; border-bottom: 1px solid var(--clr-smoke-o10); } .filter-field.location-filter .municity-select div[class*=__option]:active, .filter-field.location-filter .province-select div[class*=__option]:active, .filter-field.location-filter .region-select div[class*=__option]:active { background-color: var(--clr-secondary-d1); } .filter-field.location-filter .municity-select div[class*=__option][class*="--is-focused"], .filter-field.location-filter .province-select div[class*=__option][class*="--is-focused"], .filter-field.location-filter .region-select div[class*=__option][class*="--is-focused"] { background-color: var(--clr-secondary-l3); color: var(--clr-dark-gray); } .filter-field.location-filter .municity-select div[class*=__option][class*="--is-selected"], .filter-field.location-filter .province-select div[class*=__option][class*="--is-selected"], .filter-field.location-filter .region-select div[class*=__option][class*="--is-selected"] { background-color: var(--clr-secondary); color: var(--clr-dark-gray); } .filter-field.location-filter .municity-select div[class*=__menu-notice], .filter-field.location-filter .province-select div[class*=__menu-notice], .filter-field.location-filter .region-select div[class*=__menu-notice] { color: var(--clr-smoke); font-style: italic; font-size: 0.8rem; text-align: center; } @media screen and (min-width: 1440px) { .filter-field.location-filter .reg__control { width: 29rem; } .filter-field.location-filter .reg__menu-list { width: 29rem; } } .checkbox-filter label.checkbox-label { height: 2.25rem; aspect-ratio: 1; border-radius: var(--round-tiny); border: 1px solid var(--clr-smoke-o25); display: block; transition: border-color 200ms ease, background-color 250ms ease; position: relative; cursor: pointer; } .checkbox-filter label.checkbox-label:hover, .checkbox-filter label.checkbox-label:focus-visible { border-color: var(--clr-secondary); } .checkbox-filter label.checkbox-label::after { content: ""; position: absolute; inset: 3px; border-radius: 100%; background: var(--clr-secondary-d1); opacity: 0; transition: opacity 250ms ease; } .checkbox-filter .checkbox-input { appearance: none; -webkit-appearance: none; margin: 0; display: none; } .checkbox-filter .checkbox-input:checked ~ label { border-color: var(--clr-secondary-d2); } .checkbox-filter .checkbox-input:checked ~ label::after { opacity: 1; } .combobox-container { position: relative; width: 100%; } .combobox-input-wrapper { position: relative; border: 1px solid var(--clr-smoke-o25); border-radius: var(--round-tiny); display: flex; align-items: center; transition: border-color 250ms linear; background: transparent; } .combobox-input-wrapper:hover, .combobox-input-wrapper:focus-within { border-color: var(--clr-secondary); } .combobox-input-wrapper .combobox-input { width: 100%; padding: 0.5rem; background: transparent; border: none; outline: none; color: var(--clr-light); font-size: 0.85rem; } .combobox-input-wrapper .combobox-input::placeholder { color: var(--clr-light-gray); } .combobox-input-wrapper .combobox-clear { padding: 0 0.75rem; background: none; border: none; color: var(--clr-light-gray); font-size: 1.25rem; cursor: pointer; transition: color 150ms linear; } .combobox-input-wrapper .combobox-clear:hover { color: var(--clr-secondary); } .combobox-dropdown { position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; max-height: 300px; overflow-y: auto; background-color: var(--clr-dark-gray); border-radius: var(--round-tiny); z-index: 1000; box-shadow: var(--box-shadow-light); } .combobox-dropdown::-webkit-scrollbar { width: 6px; } .combobox-dropdown::-webkit-scrollbar-thumb { background-color: var(--clr-smoke); border-radius: 3px; } .combobox-option { padding: 0.5rem 1rem; font-size: 0.8rem; color: var(--clr-light); cursor: pointer; border-bottom: 1px solid var(--clr-smoke-o10); transition: background-color 150ms linear, color 150ms linear; } .combobox-option:last-child { border-bottom: none; } .combobox-option:hover, .combobox-option.focus-visible, .combobox-option.highlighted { background-color: var(--clr-secondary-l1); color: var(--clr-dark-gray); } .combobox-option.selected { background-color: var(--clr-secondary); color: var(--clr-dark-gray); } .combobox-no-results { padding: 1rem; text-align: center; color: var(--clr-smoke); font-style: italic; font-size: 0.8rem; }:root { --clr-primary-l2: hsl(171, 66%, 58%); --clr-primary-l1: hsl(171, 66%, 48%); --clr-primary: hsl(171, 66%, 38%); --clr-primary-d1: hsl(171, 66%, 28%); --clr-primary-d2: hsl(171, 66%, 18%); --clr-primary-translucent: hsla(171, 66%, 18%, 0.5); --clr-secondary-l3: hsl(43, 100%, 81%); --clr-secondary-l2: hsl(43, 100%, 71%); --clr-secondary-l1: hsl(43, 100%, 61%); --clr-secondary: hsl(43, 100%, 51%); --clr-secondary-d1: hsl(43, 100%, 41%); --clr-secondary-d2: hsl(43, 100%, 31%); --clr-secondary-contrast: hsl(223, 100%, 10%); --clr-tertiary-l4: hsl(200, 95%, 54%); --clr-tertiary-l3: hsl(200, 95%, 44%); --clr-tertiary-l2: hsl(200, 95%, 34%); --clr-tertiary-l1: hsl(200, 95%, 24%); --clr-tertiary: hsl(200, 95%, 14%); --clr-tertiary-d1: hsl(200, 95%, 04%); --clr-tertiary-d2: hsl(200, 95%, 0%); --clr-light: #fff; --clr-dark: #000; --clr-dark-gray: #151515; --clr-dark-gray50: hsla(0, 0.00%, 8.20%, 0.50); --clr-dark-gray80: hsla(0, 0.00%, 8.20%, 0.80); --clr-light-gray: hsl(0, 0%, 75%); --clr-light-off: hsl(0, 0%, 99%); --clr-light-50: hsla(0, 0%, 99%, 0.50); --clr-slate: hsla(0, 0%, 15%, 1); --clr-smoke: hsl(0, 0%, 96%); --clr-smoke-o25: hsla(0, 0%, 96%, 0.25); --clr-smoke-o50: hsla(0, 0%, 96%, 0.50); --clr-smoke-dark: hsl(0, 0%, 86%); --clr-smoke-light: hsl(0, 0%, 90%); --clr-smoke-darkish: hsl(0, 0%, 91%); --clr-smoke-darker: hsl(0, 0%, 81%); --clr-red: #CC2936; --clr-red-l1: hsl(354, 64%, 60%); --clr-red-l2: hsl(354, 64%, 70%); --clr-red-d1: hsl(354, 64%, 50%); --clr-red-d2: hsl(354, 64%, 40%); --clr-green: #04724D; --clr-green-l1: hsl(162, 94%, 45%); --clr-green-l2: hsl(162, 94%, 55%); --clr-green-d1: hsl(162, 94%, 35%); --clr-green-d2: hsl(162, 94%, 25%); --clr-brown: #694a38; --clr-brown-l1: hsl(24, 31%, 35%); --clr-brown-l2: hsl(24, 31%, 45%); --clr-brown-d1: hsl(24, 31%, 25%); --clr-brown-d2: hsl(24, 31%, 15%); --clr-orange: #af3800; --clr-orange-l1: hsl(18, 100%, 40%); --clr-orange-l2: hsl(18, 100%, 50%); --clr-orange-d1: hsl(18, 100%, 30%); --clr-orange-d2: hsl(18, 100%, 20%); --clr-violet: #9792e3; --clr-violet-l1: hsl(244, 60%, 75%); --clr-violet-l2: hsl(244, 60%, 85%); --clr-violet-d1: hsl(244, 60%, 65%); --clr-violet-d2: hsl(244, 60%, 55%); --clr-pink: #E56399; --clr-pink-l1: hsl(336, 72%, 70%); --clr-pink-l2: hsl(336, 72%, 80%); --clr-pink-d1: hsl(336, 72%, 60%); --clr-pink-d2: hsl(336, 72%, 50%); --clr-purple: #571F4E; --clr-purple-l1: hsl(311, 49%, 40%); --clr-purple-l2: hsl(311, 49%, 50%); --clr-purple-d1: hsl(311, 49%, 30%); --clr-purple-d2: hsl(311, 49%, 20%); --clr-red-o50: rgba(204, 41, 54, 0.5); --clr-green-o50: rgba(4, 114, 77, 0.5); --clr-brown-o50: rgba(105, 74, 56, 0.5); --clr-orange-o50: rgba(175, 56, 0, 0.5); --clr-violet-o50: rgba(151, 146, 227, 0.5); --clr-pink-o50: rgba(229, 99, 153, 0.5); --clr-purple-o50: rgba(87, 31, 78, 0.5); } .color-primary-l2 { color: var(--clr-primary-l2); } .edge-color-primary-l2:hover, .edge-color-primary-l2:focus-visible { outline: 1px solid var(--clr-primary-l2); border-color: var(--clr-primary-l2); } .color-primary-l1 { color: var(--clr-primary-l1); } .edge-color-primary-l1:hover, .edge-color-primary-l1:focus-visible { outline: 1px solid var(--clr-primary-l1); border-color: var(--clr-primary-l1); } .color-primary { color: var(--clr-primary); } .edge-color-primary:hover, .edge-color-primary:focus-visible { outline: 1px solid var(--clr-primary); border-color: var(--clr-primary); } .color-primary-d1 { color: var(--clr-primary-d1); } .edge-color-primary-d1:hover, .edge-color-primary-d1:focus-visible { outline: 1px solid var(--clr-primary-d1); border-color: var(--clr-primary-d1); } .color-primary-d2 { color: var(--clr-primary-d2); } .edge-color-primary-d2:hover, .edge-color-primary-d2:focus-visible { outline: 1px solid var(--clr-primary-d2); border-color: var(--clr-primary-d2); } .color-primary-translucent { color: var(--clr-primary-translucent); } .edge-color-primary-translucent:hover, .edge-color-primary-translucent:focus-visible { outline: 1px solid var(--clr-primary-translucent); border-color: var(--clr-primary-translucent); } .color-secondary-l3 { color: var(--clr-secondary-l3); } .edge-color-secondary-l3:hover, .edge-color-secondary-l3:focus-visible { outline: 1px solid var(--clr-secondary-l3); border-color: var(--clr-secondary-l3); } .color-secondary-l2 { color: var(--clr-secondary-l2); } .edge-color-secondary-l2:hover, .edge-color-secondary-l2:focus-visible { outline: 1px solid var(--clr-secondary-l2); border-color: var(--clr-secondary-l2); } .color-secondary-l1 { color: var(--clr-secondary-l1); } .edge-color-secondary-l1:hover, .edge-color-secondary-l1:focus-visible { outline: 1px solid var(--clr-secondary-l1); border-color: var(--clr-secondary-l1); } .color-secondary { color: var(--clr-secondary); } .edge-color-secondary:hover, .edge-color-secondary:focus-visible { outline: 1px solid var(--clr-secondary); border-color: var(--clr-secondary); } .color-secondary-d1 { color: var(--clr-secondary-d1); } .edge-color-secondary-d1:hover, .edge-color-secondary-d1:focus-visible { outline: 1px solid var(--clr-secondary-d1); border-color: var(--clr-secondary-d1); } .color-secondary-d2 { color: var(--clr-secondary-d2); } .edge-color-secondary-d2:hover, .edge-color-secondary-d2:focus-visible { outline: 1px solid var(--clr-secondary-d2); border-color: var(--clr-secondary-d2); } .color-secondary-contrast { color: var(--clr-secondary-contrast); } .edge-color-secondary-contrast:hover, .edge-color-secondary-contrast:focus-visible { outline: 1px solid var(--clr-secondary-contrast); border-color: var(--clr-secondary-contrast); } .color-tertiary-l4 { color: var(--clr-tertiary-l4); } .edge-color-tertiary-l4:hover, .edge-color-tertiary-l4:focus-visible { outline: 1px solid var(--clr-tertiary-l4); border-color: var(--clr-tertiary-l4); } .color-tertiary-l3 { color: var(--clr-tertiary-l3); } .edge-color-tertiary-l3:hover, .edge-color-tertiary-l3:focus-visible { outline: 1px solid var(--clr-tertiary-l3); border-color: var(--clr-tertiary-l3); } .color-tertiary-l2 { color: var(--clr-tertiary-l2); } .edge-color-tertiary-l2:hover, .edge-color-tertiary-l2:focus-visible { outline: 1px solid var(--clr-tertiary-l2); border-color: var(--clr-tertiary-l2); } .color-tertiary-l1 { color: var(--clr-tertiary-l1); } .edge-color-tertiary-l1:hover, .edge-color-tertiary-l1:focus-visible { outline: 1px solid var(--clr-tertiary-l1); border-color: var(--clr-tertiary-l1); } .color-tertiary { color: var(--clr-tertiary); } .edge-color-tertiary:hover, .edge-color-tertiary:focus-visible { outline: 1px solid var(--clr-tertiary); border-color: var(--clr-tertiary); } .color-tertiary-d1 { color: var(--clr-tertiary-d1); } .edge-color-tertiary-d1:hover, .edge-color-tertiary-d1:focus-visible { outline: 1px solid var(--clr-tertiary-d1); border-color: var(--clr-tertiary-d1); } .color-tertiary-d2 { color: var(--clr-tertiary-d2); } .edge-color-tertiary-d2:hover, .edge-color-tertiary-d2:focus-visible { outline: 1px solid var(--clr-tertiary-d2); border-color: var(--clr-tertiary-d2); } .color-light { color: var(--clr-light); } .edge-color-light:hover, .edge-color-light:focus-visible { outline: 1px solid var(--clr-light); border-color: var(--clr-light); } .color-dark { color: var(--clr-dark); } .edge-color-dark:hover, .edge-color-dark:focus-visible { outline: 1px solid var(--clr-dark); border-color: var(--clr-dark); } .color-dark-gray { color: var(--clr-dark-gray); } .edge-color-dark-gray:hover, .edge-color-dark-gray:focus-visible { outline: 1px solid var(--clr-dark-gray); border-color: var(--clr-dark-gray); } .color-dark-gray50 { color: var(--clr-dark-gray50); } .edge-color-dark-gray50:hover, .edge-color-dark-gray50:focus-visible { outline: 1px solid var(--clr-dark-gray50); border-color: var(--clr-dark-gray50); } .color-dark-gray80 { color: var(--clr-dark-gray80); } .edge-color-dark-gray80:hover, .edge-color-dark-gray80:focus-visible { outline: 1px solid var(--clr-dark-gray80); border-color: var(--clr-dark-gray80); } .color-light-gray { color: var(--clr-light-gray); } .edge-color-light-gray:hover, .edge-color-light-gray:focus-visible { outline: 1px solid var(--clr-light-gray); border-color: var(--clr-light-gray); } .color-light-off { color: var(--clr-light-off); } .edge-color-light-off:hover, .edge-color-light-off:focus-visible { outline: 1px solid var(--clr-light-off); border-color: var(--clr-light-off); } .color-light-50 { color: var(--clr-light-50); } .edge-color-light-50:hover, .edge-color-light-50:focus-visible { outline: 1px solid var(--clr-light-50); border-color: var(--clr-light-50); } .color-slate { color: var(--clr-slate); } .edge-color-slate:hover, .edge-color-slate:focus-visible { outline: 1px solid var(--clr-slate); border-color: var(--clr-slate); } .color-smoke { color: var(--clr-smoke); } .edge-color-smoke:hover, .edge-color-smoke:focus-visible { outline: 1px solid var(--clr-smoke); border-color: var(--clr-smoke); } .color-smoke-o25 { color: var(--clr-smoke-o25); } .edge-color-smoke-o25:hover, .edge-color-smoke-o25:focus-visible { outline: 1px solid var(--clr-smoke-o25); border-color: var(--clr-smoke-o25); } .color-smoke-o50 { color: var(--clr-smoke-o50); } .edge-color-smoke-o50:hover, .edge-color-smoke-o50:focus-visible { outline: 1px solid var(--clr-smoke-o50); border-color: var(--clr-smoke-o50); } .color-smoke-dark { color: var(--clr-smoke-dark); } .edge-color-smoke-dark:hover, .edge-color-smoke-dark:focus-visible { outline: 1px solid var(--clr-smoke-dark); border-color: var(--clr-smoke-dark); } .color-smoke-light { color: var(--clr-smoke-light); } .edge-color-smoke-light:hover, .edge-color-smoke-light:focus-visible { outline: 1px solid var(--clr-smoke-light); border-color: var(--clr-smoke-light); } .color-smoke-darkish { color: var(--clr-smoke-darkish); } .edge-color-smoke-darkish:hover, .edge-color-smoke-darkish:focus-visible { outline: 1px solid var(--clr-smoke-darkish); border-color: var(--clr-smoke-darkish); } .color-smoke-darker { color: var(--clr-smoke-darker); } .edge-color-smoke-darker:hover, .edge-color-smoke-darker:focus-visible { outline: 1px solid var(--clr-smoke-darker); border-color: var(--clr-smoke-darker); } .color-red { color: var(--clr-red); } .edge-color-red:hover, .edge-color-red:focus-visible { outline: 1px solid var(--clr-red); border-color: var(--clr-red); } .color-red-l1 { color: var(--clr-red-l1); } .edge-color-red-l1:hover, .edge-color-red-l1:focus-visible { outline: 1px solid var(--clr-red-l1); border-color: var(--clr-red-l1); } .color-red-l2 { color: var(--clr-red-l2); } .edge-color-red-l2:hover, .edge-color-red-l2:focus-visible { outline: 1px solid var(--clr-red-l2); border-color: var(--clr-red-l2); } .color-red-d1 { color: var(--clr-red-d1); } .edge-color-red-d1:hover, .edge-color-red-d1:focus-visible { outline: 1px solid var(--clr-red-d1); border-color: var(--clr-red-d1); } .color-red-d2 { color: var(--clr-red-d2); } .edge-color-red-d2:hover, .edge-color-red-d2:focus-visible { outline: 1px solid var(--clr-red-d2); border-color: var(--clr-red-d2); } .color-green { color: var(--clr-green); } .edge-color-green:hover, .edge-color-green:focus-visible { outline: 1px solid var(--clr-green); border-color: var(--clr-green); } .color-green-l1 { color: var(--clr-green-l1); } .edge-color-green-l1:hover, .edge-color-green-l1:focus-visible { outline: 1px solid var(--clr-green-l1); border-color: var(--clr-green-l1); } .color-green-l2 { color: var(--clr-green-l2); } .edge-color-green-l2:hover, .edge-color-green-l2:focus-visible { outline: 1px solid var(--clr-green-l2); border-color: var(--clr-green-l2); } .color-green-d1 { color: var(--clr-green-d1); } .edge-color-green-d1:hover, .edge-color-green-d1:focus-visible { outline: 1px solid var(--clr-green-d1); border-color: var(--clr-green-d1); } .color-green-d2 { color: var(--clr-green-d2); } .edge-color-green-d2:hover, .edge-color-green-d2:focus-visible { outline: 1px solid var(--clr-green-d2); border-color: var(--clr-green-d2); } .color-brown { color: var(--clr-brown); } .edge-color-brown:hover, .edge-color-brown:focus-visible { outline: 1px solid var(--clr-brown); border-color: var(--clr-brown); } .color-brown-l1 { color: var(--clr-brown-l1); } .edge-color-brown-l1:hover, .edge-color-brown-l1:focus-visible { outline: 1px solid var(--clr-brown-l1); border-color: var(--clr-brown-l1); } .color-brown-l2 { color: var(--clr-brown-l2); } .edge-color-brown-l2:hover, .edge-color-brown-l2:focus-visible { outline: 1px solid var(--clr-brown-l2); border-color: var(--clr-brown-l2); } .color-brown-d1 { color: var(--clr-brown-d1); } .edge-color-brown-d1:hover, .edge-color-brown-d1:focus-visible { outline: 1px solid var(--clr-brown-d1); border-color: var(--clr-brown-d1); } .color-brown-d2 { color: var(--clr-brown-d2); } .edge-color-brown-d2:hover, .edge-color-brown-d2:focus-visible { outline: 1px solid var(--clr-brown-d2); border-color: var(--clr-brown-d2); } .color-orange { color: var(--clr-orange); } .edge-color-orange:hover, .edge-color-orange:focus-visible { outline: 1px solid var(--clr-orange); border-color: var(--clr-orange); } .color-orange-l1 { color: var(--clr-orange-l1); } .edge-color-orange-l1:hover, .edge-color-orange-l1:focus-visible { outline: 1px solid var(--clr-orange-l1); border-color: var(--clr-orange-l1); } .color-orange-l2 { color: var(--clr-orange-l2); } .edge-color-orange-l2:hover, .edge-color-orange-l2:focus-visible { outline: 1px solid var(--clr-orange-l2); border-color: var(--clr-orange-l2); } .color-orange-d1 { color: var(--clr-orange-d1); } .edge-color-orange-d1:hover, .edge-color-orange-d1:focus-visible { outline: 1px solid var(--clr-orange-d1); border-color: var(--clr-orange-d1); } .color-orange-d2 { color: var(--clr-orange-d2); } .edge-color-orange-d2:hover, .edge-color-orange-d2:focus-visible { outline: 1px solid var(--clr-orange-d2); border-color: var(--clr-orange-d2); } .color-violet { color: var(--clr-violet); } .edge-color-violet:hover, .edge-color-violet:focus-visible { outline: 1px solid var(--clr-violet); border-color: var(--clr-violet); } .color-violet-l1 { color: var(--clr-violet-l1); } .edge-color-violet-l1:hover, .edge-color-violet-l1:focus-visible { outline: 1px solid var(--clr-violet-l1); border-color: var(--clr-violet-l1); } .color-violet-l2 { color: var(--clr-violet-l2); } .edge-color-violet-l2:hover, .edge-color-violet-l2:focus-visible { outline: 1px solid var(--clr-violet-l2); border-color: var(--clr-violet-l2); } .color-violet-d1 { color: var(--clr-violet-d1); } .edge-color-violet-d1:hover, .edge-color-violet-d1:focus-visible { outline: 1px solid var(--clr-violet-d1); border-color: var(--clr-violet-d1); } .color-violet-d2 { color: var(--clr-violet-d2); } .edge-color-violet-d2:hover, .edge-color-violet-d2:focus-visible { outline: 1px solid var(--clr-violet-d2); border-color: var(--clr-violet-d2); } .color-pink { color: var(--clr-pink); } .edge-color-pink:hover, .edge-color-pink:focus-visible { outline: 1px solid var(--clr-pink); border-color: var(--clr-pink); } .color-pink-l1 { color: var(--clr-pink-l1); } .edge-color-pink-l1:hover, .edge-color-pink-l1:focus-visible { outline: 1px solid var(--clr-pink-l1); border-color: var(--clr-pink-l1); } .color-pink-l2 { color: var(--clr-pink-l2); } .edge-color-pink-l2:hover, .edge-color-pink-l2:focus-visible { outline: 1px solid var(--clr-pink-l2); border-color: var(--clr-pink-l2); } .color-pink-d1 { color: var(--clr-pink-d1); } .edge-color-pink-d1:hover, .edge-color-pink-d1:focus-visible { outline: 1px solid var(--clr-pink-d1); border-color: var(--clr-pink-d1); } .color-pink-d2 { color: var(--clr-pink-d2); } .edge-color-pink-d2:hover, .edge-color-pink-d2:focus-visible { outline: 1px solid var(--clr-pink-d2); border-color: var(--clr-pink-d2); } .color-purple { color: var(--clr-purple); } .edge-color-purple:hover, .edge-color-purple:focus-visible { outline: 1px solid var(--clr-purple); border-color: var(--clr-purple); } .color-purple-l1 { color: var(--clr-purple-l1); } .edge-color-purple-l1:hover, .edge-color-purple-l1:focus-visible { outline: 1px solid var(--clr-purple-l1); border-color: var(--clr-purple-l1); } .color-purple-l2 { color: var(--clr-purple-l2); } .edge-color-purple-l2:hover, .edge-color-purple-l2:focus-visible { outline: 1px solid var(--clr-purple-l2); border-color: var(--clr-purple-l2); } .color-purple-d1 { color: var(--clr-purple-d1); } .edge-color-purple-d1:hover, .edge-color-purple-d1:focus-visible { outline: 1px solid var(--clr-purple-d1); border-color: var(--clr-purple-d1); } .color-purple-d2 { color: var(--clr-purple-d2); } .edge-color-purple-d2:hover, .edge-color-purple-d2:focus-visible { outline: 1px solid var(--clr-purple-d2); border-color: var(--clr-purple-d2); } .color-red-o50 { color: var(--clr-red-o50); } .edge-color-red-o50:hover, .edge-color-red-o50:focus-visible { outline: 1px solid var(--clr-red-o50); border-color: var(--clr-red-o50); } .color-green-o50 { color: var(--clr-green-o50); } .edge-color-green-o50:hover, .edge-color-green-o50:focus-visible { outline: 1px solid var(--clr-green-o50); border-color: var(--clr-green-o50); } .color-brown-o50 { color: var(--clr-brown-o50); } .edge-color-brown-o50:hover, .edge-color-brown-o50:focus-visible { outline: 1px solid var(--clr-brown-o50); border-color: var(--clr-brown-o50); } .color-orange-o50 { color: var(--clr-orange-o50); } .edge-color-orange-o50:hover, .edge-color-orange-o50:focus-visible { outline: 1px solid var(--clr-orange-o50); border-color: var(--clr-orange-o50); } .color-violet-o50 { color: var(--clr-violet-o50); } .edge-color-violet-o50:hover, .edge-color-violet-o50:focus-visible { outline: 1px solid var(--clr-violet-o50); border-color: var(--clr-violet-o50); } .color-pink-o50 { color: var(--clr-pink-o50); } .edge-color-pink-o50:hover, .edge-color-pink-o50:focus-visible { outline: 1px solid var(--clr-pink-o50); border-color: var(--clr-pink-o50); } .color-purple-o50 { color: var(--clr-purple-o50); } .edge-color-purple-o50:hover, .edge-color-purple-o50:focus-visible { outline: 1px solid var(--clr-purple-o50); border-color: var(--clr-purple-o50); } :root { --fontsize-modifier: 0px; --text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.45); --text-shadow-med: 2px 2px 3px rgba(0, 0, 0, 0.25); --text-shadow-light: 1px 1px 0px rgba(255, 255, 255, 0.45); --box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); --box-shadow-light: 0 4px 8px rgba(70, 70, 70, 0.05), 0 3px 3px rgba(88, 88, 88, 0.1), 0 -3px 3px rgba(88, 88, 88, 0.1); --round-tiny: 4px; --round-small: 8px; --round-big: 25px; --space-padblock: clamp(5vh, 8.5rem, calc(10vh + 1rem)); --font-basic: "Poppins", system-ui, sans-serif; --font-ornamental: "Gilroy", "Poppins", system-ui, sans-serif; --font-boring: "Helvetica Neue", "Helvetica", "Arial", sans-serif; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; font: inherit; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; } html { color-scheme: light; hanging-punctuation: first last; scroll-behavior: smooth; font-size: 100%; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; min-height: 100svh; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; color: inherit; cursor: pointer; } a:hover { color: inherit; } button { background-color: transparent; color: inherit; border-width: 0; padding: 0; font-size: inherit; font-family: inherit; cursor: pointer; } figure { margin: 0; } input::-moz-focus-inner { border: 0; padding: 0; margin: 0; } ul, ol, dd { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; text-wrap: balance; } h1 { text-wrap: unset; } p { margin: 0; } p, li { max-width: var(--p-max-width, 65ch); max-width: 65ch; text-wrap: pretty; } @media (min-width: breakpoint(fat)) { p, li { max-width: unset; } } p .full-width, li .full-width { max-width: unset; } cite { font-style: normal; } fieldset { border-width: 0; padding: 0; margin: 0; } sup, sub { font-size: 60%; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; vertical-align: middle; font-style: italic; background-repeat: no-repeat; background-size: cover; shape-margin: 0.75rem; } svg { overflow: visible; } /* General styles */ html { scroll-padding-top: 5.25rem; } body { overflow-x: hidden; scrollbar-gutter: stable; position: relative; isolation: isolate; background-color: var(--clr-smoke); } body *::selection { background-color: var(--clr-secondary); color: var(--clr-light); opacity: 1; } .main { display: flex; overflow-x: hidden; } .contentbox { margin-top: 5rem; flex: 1; background-color: var(--clr-smoke); } @media screen and (min-width: 1600px) { .contentbox { padding-inline: 3.5rem; } } .tableau { padding: 1rem; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: auto; gap: 1rem; max-width: 1250px; margin-inline: auto; padding-bottom: 2rem; } .tableau .tile { min-height: 13rem; } .tableau .tile.tile-span-2 { grid-column: span 2; } .tableau .tile.tile-span-3 { grid-column: span 3; } .tableau .tile.tile-span-4 { grid-column: span 4; } .tableau .tile.tile-span-5 { grid-column: span 5; } .tableau .tile.tile-span-6 { grid-column: span 6; } .tableau .tile.tile-span-7 { grid-column: span 7; } .tableau .tile.tile-span-8 { grid-column: span 8; } .tableau .tile.tile-span-9 { grid-column: span 9; } .tableau .tile.tile-span-10 { grid-column: span 10; } .tableau .tile.tile-span-11 { grid-column: span 11; } .tableau .tile.tile-span-12 { grid-column: span 12; } .tableau .tile.tile-height-2 { grid-row: span 2; max-height: unset; } .tableau .tile.tile-height-3 { grid-row: span 3; max-height: unset; } .tableau .tile.tile-height-4 { grid-row: span 4; max-height: unset; } .tableau .tile.tile-height-5 { grid-row: span 5; max-height: unset; } @media screen and (min-width: 1440px) { .tableau { max-width: 1300px; } } @media screen and (min-width: 1600px) { .tableau { max-width: 1500px; } } .tableau.emptyTableau, .tableau.loading { grid-template-columns: 1fr; grid-template-rows: 1fr; place-content: center; grid-column: 1/-1; } .tableau.emptyTableau .no-cxid-card, .tableau.emptyTableau .profile-canvas-main, .tableau.loading .no-cxid-card, .tableau.loading .profile-canvas-main { display: none; } .tableau.emptyTableau .loading-container, .tableau.emptyTableau .empty-bg, .tableau.loading .loading-container, .tableau.loading .empty-bg { display: flex; } .tableau.emptyTableau.empty-compressed .text-wrapper, .tableau.loading.empty-compressed .text-wrapper { gap: 1rem; } .tableau.tableau-directory { width: calc(100dvw - 120px); max-width: unset; position: relative; width: calc(100dvw - 4.5rem); margin-inline: auto 0; } .popup-canvas { z-index: 1000; position: fixed; top: 3.3rem; right: 1rem; background-color: transparent; } .popup-canvas.datePicker-canvas { top: 4.35rem; } .chart-container { background: var(--clr-light); border-radius: var(--round-small); } .chart-container > div { animation: fadeIn 500ms ease-out forwards; } .hidden, [hidden=true] { display: none !important; } .visually-hidden:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .fixed { position: fixed; } .nowrapper { white-space: nowrap; } ul { grid-column: span 12; } ul li { list-style-type: disc; margin-block: 0.5rem; } .chart-tooltip { position: absolute; pointer-events: none; background-color: rgba(0, 0, 0, 0.95); color: var(--clr-light); opacity: 1; padding: 8px; border-radius: var(--round-tiny); z-index: 1220; font-family: var(--font-boring); border: none; pointer-events: none; box-shadow: none; } .chart-tooltip.leaflet-tooltip-top::before { border-top-color: rgba(0, 0, 0, 0.95); } .chart-tooltip-name { font-size: 0.8rem; display: block; font-weight: 600; margin-bottom: 5px; } .chart-tooltip-name.calendar-tooltip { margin-bottom: 0.75rem; } .chart-tooltip-swatch { border: 1px solid #fff; display: inline-block; margin-right: 1rem; width: 8px; height: 8px; } .chart-tooltip-swatch.chart-tooltip-swatch-bar { border-radius: 2px; } .chart-tooltip-swatch.chart-tooltip-swatch-line { border-radius: 100%; } .chart-tooltip-content { font-size: 0.75rem; text-wrap: wrap; display: inline-block; } .chart-tooltip-content:not(:nth-last-child(1)) { margin-bottom: 0.25rem; } .map-wrapper .chart-tooltip-content { text-wrap: nowrap; } .chart-container svg { flex: 1; overflow: visible; } .chart-container svg.animation-in-progress > * { cursor: wait; } .chart-container svg.animation-in-progress > * .segment, .chart-container svg.animation-in-progress > * .center-icon, .chart-container svg.animation-in-progress > * .array-icon { pointer-events: none; } .chart-container svg.animation-complete .legend-item { cursor: pointer; } .chart-container svg.animation-complete .segment, .chart-container svg.animation-complete .center-icon, .chart-container svg.animation-complete .array-icon { pointer-events: unset; } /* Animation transitions */ .legend-item { transition: all 200ms ease; outline: 1px solid transparent; outline-offset: 0; } .legend-item:hover, .legend-item:focus-visible { outline: 1px solid var(--clr-smoke); outline-offset: 0.2rem; } g.back-button { cursor: pointer; transition: all 200ms ease; } g.back-button circle { transition: all 200ms ease; stroke: var(--clr-light-gray); } g.back-button text { transition: all 200ms ease; fill: var(--clr-light-gray); } g.back-button:hover { transform: scale(1.1); } g.back-button:hover circle { stroke: var(--clr-dark-gray); } g.back-button:hover text { fill: var(--clr-dark-gray); } .empty-bg { display: none; flex-direction: column; gap: 1.5rem; align-items: center; justify-content: space-between; padding: 2rem; } .empty-bg p { color: var(--clr-primary-d2); text-align: center; } .text-wrapper { align-items: center; display: flex; flex-direction: column; gap: 2.5rem; } .phrase-container { height: 4rem; padding: 1.5rem 0 0 0; flex-grow: 1; margin: 1em auto; display: grid; place-content: center; } .loading-message .humble-brag { display: block; } .loading-message .humble-brag.actual-brag { animation: fadeIn 800ms linear; } .loading-quote { width: 100%; text-align: center; opacity: 1; transition: opacity 0.4s ease-in-out; pointer-events: none; text-wrap: unset; display: block; margin: auto; max-width: calc(100dvw - 140px); } .loading-quote.changing-quotes { opacity: 0; animation: fadeIn 500ms ease; } .fullscreen { padding: 2rem 4rem; background: linear-gradient(45deg, var(--clr-primary-l1), var(--clr-primary-d1)); width: 100%; height: 100dvh; grid-column: 1/-1; grid-row: 1/-1; align-items: center; display: flex; flex-direction: column; } .fullscreen .fullscreen-inner { margin: auto; align-items: center; display: flex; flex-direction: column; } .fullscreen .fullscreen-inner .phrase-container p, .fullscreen .fullscreen-inner .loading-message { color: var(--clr-light); } .fullscreen .loading-quote { text-shadow: var(--text-shadow-med); } .fullscreen .loading-message { text-align: center; text-shadow: var(--text-shadow-med); } .spinning-ball { box-shadow: var(--box-shadow-light); } .tooltipper { position: relative; } .tooltipper:hover::before, .tooltipper:focus-visible::before { content: attr(data-tooltip); position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 0.5rem; padding: 0.25rem 0.5rem; background: var(--clr-dark-gray); border: 1px solid var(--clr-dark-gray50); box-shadow: var(--box-shadow); color: var(--clr-light); border-radius: 3px; white-space: pre; text-align: left; font-size: 0.8rem; pointer-events: none; z-index: 99999; } @font-face { font-family: "Poppins"; font-weight: 100; font-style: normal; font-display: swap; src: local("Poppins Thin"), url("/fonts/poppins-100.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 100; font-style: italic; font-display: swap; src: local("Poppins Thin Italic"), url("/fonts/poppins-100-italic.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 200; font-style: normal; font-display: swap; src: local("Poppins Extralight"), url("/fonts/poppins-200.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 200; font-style: italic; font-display: swap; src: local("Poppins Extralight Italic"), url("/fonts/poppins-200-italic.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 300; font-style: normal; font-display: swap; src: local("Poppins Light"), url("/fonts/poppins-300.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 300; font-style: italic; font-display: swap; src: local("Poppins Light Italic"), url("/fonts/poppins-300-italic.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: local("Poppins Regular"), url("/fonts/poppins-400.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 400; font-style: italic; font-display: swap; src: local("Poppins Italic"), url("/fonts/poppins-400-italic.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: local("Poppins Medium"), url("/fonts/poppins-500.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 500; font-style: italic; font-display: swap; src: local("Poppins Medium Italic"), url("/fonts/poppins-500-italic.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: local("Poppins SemiBold"), url("/fonts/poppins-600.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 600; font-style: italic; font-display: swap; src: local("Poppins SemiBold Italic"), url("/fonts/poppins-600-italic.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: local("Poppins Bold"), url("/fonts/poppins-700.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 700; font-style: italic; font-display: swap; src: local("Poppins Bold Italic"), url("/fonts/poppins-700-italic.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 800; font-style: normal; font-display: swap; src: local("Poppins ExtraBold"), url("/fonts/poppins-800.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 800; font-style: italic; font-display: swap; src: local("Poppins ExtraBold Italic"), url("/fonts/poppins-800-italic.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 900; font-style: normal; font-display: swap; src: local("Poppins Black"), url("/fonts/poppins-900.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 900; font-style: italic; font-display: swap; src: local("Poppins Black Italic"), url("/fonts/poppins-900-italic.woff2") format("woff2"); } @font-face { font-family: "Gilroy"; font-weight: 800; font-style: normal; font-display: swap; src: local("Gilroy ExtraBold"), url("/fonts/gilroy.woff2") format("woff2"); } :root { font-size: calc(16px + var(--fontsize-modifier)); } body, p { font-family: var(--font-basic); line-height: 1.2; letter-spacing: 0.01rem; font-size: 1rem; color: var(--clr-dark); } p { line-height: 1.85; text-wrap: pretty; } h1, h2, h3, h4, h5, .headline { font-family: var(--font-basic); line-height: 1.3; letter-spacing: 0.6px; font-variation-settings: "wght" 600; font-weight: 600; } h1, .headline-1 { font-size: 2.49rem; line-height: 1.3; } @media (min-width: breakpoint(large)) { h1, .headline-1 { font-size: 6rem; } } h2, .headline-2 { font-size: 2.07rem; } @media (min-width: breakpoint(large)) { h2, .headline-2 { font-size: 4rem; } } h3, .headline-3 { font-size: 1.73rem; } @media (min-width: breakpoint(large)) { h3, .headline-3 { font-size: 2.37rem; } } h4, .headline-4 { font-size: 1.44rem; } @media (min-width: breakpoint(large)) { h4, .headline-4 { font-size: 1.78rem; } } h5, .headline-5 { font-size: 1.2rem; } @media (min-width: breakpoint(large)) { h5, .headline-5 { font-size: 1.33rem; } } sub { vertical-align: -2px; font-size: 0.8em; font-style: italic; } .italic { font-style: italic; } small, .text_small { font-size: 0.75rem; } .thin { font-variation-settings: "wght" 100; font-weight: 100; } .extralight { font-variation-settings: "wght" 200; font-weight: 200; } .light { font-variation-settings: "wght" 300; font-weight: 300; } .regular { font-variation-settings: "wght" 400; font-weight: 400; } .medium { font-variation-settings: "wght" 500; font-weight: 500; } .semibold { font-variation-settings: "wght" 600; font-weight: 600; } .bold { font-variation-settings: "wght" 700; font-weight: 700; } .extrabold { font-variation-settings: "wght" 800; font-weight: 800; } .black { font-variation-settings: "wght" 900; font-weight: 900; } .color-primary { color: var(--clr-primary); } .color-primary::selection { color: var(--clr-light) !important; } .base-size { font-size: 1rem; } .basic { font-family: var(--font-basic) !important; } .boring { font-family: var(--font-boring) !important; } .decorative { font-family: var(--font-ornamental) !important; font-weight: 800; font-variation-settings: "wght" 800; } .fallback { font-family: Arial, Helvetica, sans-serif; font-size: 0.7em; } /* Non-scaling text for SVG elements */ .non-scaling-text { vector-effect: non-scaling-stroke; font-size: 10px; } .non-scaling-text.scaling-allowed { font-size: inherit !important; } .non-scaling-text.node-label { font-size: 12px; } /* Non-scaling tooltips */ .non-scaling-tooltip { font-size: 10px !important; /* Use !important to override inline styles */ transform-origin: top left; white-space: nowrap; } /* Optional: Apply to legends and other text elements */ .legend text, .axis-label, .chart-title { vector-effect: non-scaling-stroke; font-size: 10px; } /* For text that needs to be inserted as HTML content */ foreignObject { overflow: visible; } foreignObject div { font-size: 10px; white-space: nowrap; } .unit, .abbrevUnit { font-size: 1.5rem; font-weight: inherit; text-transform: uppercase; } sup { vertical-align: top; text-transform: uppercase; font-size: 0.65rem; animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { to { opacity: 0; margin-top: 0; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } } @keyframes fill-in { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes scaleBounce { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes pulse-quick { 0% { opacity: 0.3; } 50% { opacity: 0.6; scale: 2; } 100% { opacity: 0.3; } } @keyframes expand { 100% { scale: 1 1; box-shadow: var(--box-shadow-light); } } @keyframes shadowIn { 100% { box-shadow: var(--box-shadow-light); } } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideUp { 100% { transform: translateY(0); } } @keyframes slideDown { 100% { transform: translateY(0%); } } @keyframes slideLeft { 100% { transform: translateX(0); } } @keyframes counterClockwise { 100% { rotate: -360deg; } } @keyframes slideRight { 100% { transform: translateX(0) translateY(-50%); opacity: 1; } } @keyframes slideToRight { 100% { transform: translateY(-50%) translateX(0); opacity: 1; } } @keyframes subtle-pulse { 0% { transform: scale(1); } 100% { transform: scale(1.15); } } @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spinner-reverse { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } @keyframes success-burst { 0% { transform: scale(0.8); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } @keyframes success-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 60% { transform: scale(0.9); } 80% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes error-fade { 0% { opacity: 0; } 25% { opacity: 0.5; } 50% { opacity: 0.1; } 100% { opacity: 0.2; } } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } @keyframes burningFuse { 100% { transform: scaleX(0); } } @keyframes float1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -30px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } } @keyframes float2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, -25px) scale(1.2); } } @keyframes float3 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(25px, -15px) scale(0.8); } 75% { transform: translate(-15px, 25px) scale(1.1); } } @keyframes rotate { from { transform: rotate(45deg); } to { transform: rotate(405deg); } } @font-face { font-family: "icomoon"; src: url("/fonts/icomoon.eot"); src: url("/fonts/icomoon.eot#iefix") format("embedded-opentype"), url("/fonts/icomoon.ttf") format("truetype"), url("/fonts/icomoon.woff") format("woff"), url("/fonts/icomoon.svg#icomoon") format("svg"); font-weight: normal; font-style: normal; font-display: block; } [class^=icon-], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "icomoon" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-outlier:before { content: "\e93c"; } .icon-maximize:before { content: "\e93a"; } .icon-minimize:before { content: "\e93b"; } .icon-info-add:before { content: "\e933"; } .icon-info-bad:before { content: "\e934"; } .icon-info-good:before { content: "\e935"; } .icon-info-better:before { content: "\e936"; } .icon-info:before { content: "\e937"; } .icon-info-start:before { content: "\e938"; } .icon-noun-sort:before { content: "\e932"; } .icon-sort-asc:before { content: "\e929"; } .icon-sort-desc:before { content: "\e92c"; } .icon-stage-active:before { content: "\e92d"; } .icon-stage-new:before { content: "\e92a"; } .icon-cycle:before { content: "\e92b"; } .icon-filter:before { content: "\e92e"; } .icon-stage-top:before { content: "\e92f"; } .icon-stage-consistent:before { content: "\e930"; } .icon-stage-inactive:before { content: "\e931"; } .icon-partner:before { content: "\e928"; } .icon-blast:before { content: "\e926"; } .icon-segment:before { content: "\e927"; } .icon-export:before { content: "\e925"; } .icon-trends:before { content: "\e920"; } .icon-trfm:before { content: "\e91e"; } .icon-sum:before { content: "\e916"; } .icon-downsampled:before { content: "\e917"; } .icon-last:before { content: "\e918"; } .icon-rebased:before { content: "\e919"; } .icon-mean:before { content: "\e91a"; } .icon-infinity:before { content: "\e91b"; } .icon-alltime:before { content: "\e91b"; } .icon-normalized:before { content: "\e91c"; } .icon-cutoff:before { content: "\e91d"; } .icon-map:before { content: "\e915"; } .icon-animate:before { content: "\e921"; } .icon-lightning:before { content: "\e922"; } .icon-quick:before { content: "\e922"; } .icon-search:before { content: "\e923"; } .icon-find:before { content: "\e923"; } .icon-unknown:before { content: "\e91f"; } .icon-gaming:before { content: "\e90f"; } .icon-govt:before { content: "\e910"; } .icon-rider:before { content: "\e911"; } .icon-utility:before { content: "\e912"; } .icon-eload:before { content: "\e913"; } .icon-ewallet:before { content: "\e914"; } .icon-churn:before { content: "\e90b"; } .icon-retention:before { content: "\e90c"; } .icon-growth:before { content: "\e90d"; } .icon-customers:before { content: "\e90e"; } .icon-dark:before { content: "\e904"; } .icon-settings:before { content: "\e905"; } .icon-logout:before { content: "\e906"; } .icon-light:before { content: "\e907"; } .icon-profile:before { content: "\e900"; } .icon-overview:before { content: "\e901"; } .icon-breakdown:before { content: "\e902"; } .icon-directory:before { content: "\e903"; } .icon-right:before { content: "\e939"; } .icon-close:before { content: "\e924"; } .icon-help-outline:before { content: "\e909"; } .icon-help-filled:before { content: "\e90a"; } .icon-caret-down:before { content: "\e908"; }