.email-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .email-modal-content { max-width: 500px; width: 90%; padding: 2rem; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); max-height: 90vh; overflow-y: auto; } .email-verification-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; color: #333; text-align: center; } .email-verification-description { color: #666; margin-bottom: 1.5rem; text-align: center; line-height: 1.5; } .verification-code-input { width: 100%; padding: 0.75rem; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 1rem; margin-bottom: 1rem; transition: border-color 0.2s; } .verification-code-input:focus { outline: none; border-color: #007bff; } .verification-code-input:disabled { background-color: #f8f9fa; opacity: 0.6; } .verification-error { color: #dc3545; font-size: 0.875rem; margin-bottom: 1rem; text-align: center; } .verification-buttons { display: flex; gap: 0.75rem; } .verify-button { flex: 1; background: #007bff; color: white; padding: 0.75rem; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; } .verify-button:hover:not(:disabled) { background: #0056b3; } .verify-button:disabled { opacity: 0.6; cursor: not-allowed; } .cancel-button { padding: 0.75rem 1rem; border: 2px solid #6c757d; background: transparent; color: #6c757d; border-radius: 8px; cursor: pointer; transition: all 0.2s; } .cancel-button:hover:not(:disabled) { background: #f8f9fa; } .error-boundary { display: flex; justify-content: center; align-items: center; min-height: 400px; padding: 20px; } .error-content { text-align: center; max-width: 500px; padding: 30px; border: 1px solid #dc3545; border-radius: 8px; background-color: #f8f9fa; } .error-content h2 { color: #dc3545; margin-bottom: 15px; } .error-content p { margin-bottom: 20px; color: #6c757d; } .error-content button { margin: 0 10px; } /* * 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); } [data-amplify-authenticator-passkeyprompt] .amplify-authenticator__passkey-success-icon { font-size: var(--amplify-font-sizes-xxxl); color: var(--amplify-colors-green-60, #34a853); } [data-amplify-authenticator-passkeyprompt] .amplify-authenticator__passkey-credential-item { padding: var(--amplify-space-medium); background-color: var(--amplify-colors-background-secondary); border-radius: var(--amplify-radii-small); } [data-amplify-authenticator-passkeyprompt] .amplify-authenticator__passkey-error { color: var(--amplify-colors-font-error); margin-top: var(--amplify-space-small); } [data-amplify-authenticator-passkeyprompt] .amplify-authenticator__passkey-icon { font-size: var(--amplify-components-authenticator-passkey-icon-size, 12rem); } .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 .amplify-liveness-centered-loader { transform: translate(-50%, -50%); } .amplify-liveness-centered-loader { position: absolute; left: 50%; top: 50%; } .amplify-liveness-connecting-loader { display: flex; position: absolute; flex-direction: column; justify-content: center; align-items: center; z-index: 3; width: 100%; height: 100%; background-color: var(--amplify-colors-background-primary); } .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); } /* Modal component with highest specificity to override global resets */ .amplify-modal__overlay.amplify-modal__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .amplify-modal__content.amplify-modal__content { background-color: var(--amplify-colors-background-primary); padding: var(--amplify-space-large); border-radius: var(--amplify-radii-medium); box-shadow: var(--amplify-shadows-large); max-width: 500px; width: 90%; box-sizing: border-box; } .amplify-modal__header.amplify-modal__header { margin-bottom: var(--amplify-space-medium); display: flex; justify-content: space-between; align-items: center; } .amplify-modal__title.amplify-modal__title { font-weight: var(--amplify-font-weights-bold); font-size: var(--amplify-font-sizes-large); margin: 0; } .amplify-modal__close-button.amplify-modal__close-button { background: none; border: none; font-size: var(--amplify-font-sizes-large); cursor: pointer; padding: var(--amplify-space-xs); color: var(--amplify-colors-font-secondary); } .amplify-modal__close-button.amplify-modal__close-button:hover { color: var(--amplify-colors-font-primary); } .amplify-modal__body.amplify-modal__body { margin-bottom: var(--amplify-space-medium); color: var(--amplify-colors-font-primary); } .amplify-modal__footer.amplify-modal__footer { display: flex; gap: var(--amplify-space-xs); justify-content: flex-end; } .amplify-modal__list-title.amplify-modal__list-title { margin-bottom: var(--amplify-space-xs); font-weight: var(--amplify-font-weights-bold); box-sizing: border-box; } .amplify-modal__list.amplify-modal__list { margin: var(--amplify-space-xs) 0; padding-left: var(--amplify-space-medium); max-height: 250px; overflow-y: auto; box-sizing: border-box; list-style: disc; display: flex; flex-direction: column; gap: var(--amplify-space-xxs); } .amplify-modal__list-item.amplify-modal__list-item { display: list-item; margin-bottom: var(--amplify-space-xxs); } .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--striped .amplify-table__row.amplify-storage-browser__table-row_active:nth-child(odd) { background-color: var(--amplify-colors-background-info); } .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-row_active { background-color: var(--amplify-colors-background-info); } .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-storage-browser__content-with-preview { display: flex; height: 100%; } .amplify-storage-browser__file-preview { overflow: auto; flex: 1; width: 50%; position: sticky; top: 10px; bottom: 10px; height: -moz-fit-content; height: fit-content; max-height: calc(100svh - 20px); padding: var(--amplify-space-medium); border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-primary); border-radius: var(--amplify-radii-small); margin-inline-start: var(--amplify-space-large); padding-block-end: var(--amplify-space-large); } .amplify-storage-browser__file-preview-header { margin-block-end: var(--amplify-space-medium); display: flex; justify-content: flex-end; } .amplify-storage-browser__file-preview-container { display: flex; flex-direction: column; gap: var(--amplify-space-large); } .amplify-storage-browser__file-preview-content { display: flex; flex-direction: column; gap: var(--amplify-space-large); align-items: center; } .amplify-storage-browser__file-preview-section { display: flex; flex-direction: column; min-height: 400px; flex: 1; } .amplify-storage-browser__file-preview-title { margin-block-end: var(--amplify-space-medium); color: var(--amplify-colors-font-primary); font-size: var(--amplify-font-sizes-large); font-weight: var(--amplify-font-weights-semibold); flex-shrink: 0; } .amplify-storage-browser__file-metadata { display: grid; gap: var(--amplify-space-small); background-color: var(--amplify-colors-background-secondary); padding: var(--amplify-space-medium); border-radius: var(--amplify-radii-small); border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary); } .amplify-storage-browser__file-metadata-item { display: flex; justify-content: space-between; align-items: center; padding-block: var(--amplify-space-xs); border-block-end: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary); } .amplify-storage-browser__file-metadata-item:last-child { border-block-end: none; } .amplify-storage-browser__file-metadata-label { font-weight: var(--amplify-font-weights-medium); color: var(--amplify-colors-font-primary); margin: 0; } .amplify-storage-browser__file-metadata-value { color: var(--amplify-colors-font-secondary); margin: 0; word-break: break-all; text-align: end; max-width: 60%; } .amplify-storage-browser__preview-fallback { width: 100%; height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--amplify-space-medium); background-color: var(--amplify-colors-background-secondary); border: var(--amplify-border-widths-small) dashed var(--amplify-colors-border-secondary); border-radius: var(--amplify-radii-small); padding: var(--amplify-space-large); text-align: center; } .amplify-storage-browser__preview-fallback--error { color: var(--amplify-colors-font-error); background-color: var(--amplify-colors-background-error); border-color: var(--amplify-colors-border-error); } .amplify-storage-browser__preview-fallback--default { color: var(--amplify-colors-font-secondary); background-color: var(--amplify-colors-background-secondary); border-color: var(--amplify-colors-border-secondary); } .amplify-storage-browser__preview-fallback-icon { font-size: var(--amplify-font-sizes-xxxxl); margin-block-end: var(--amplify-space-xs); } .amplify-storage-browser__preview-fallback-title { font-weight: var(--amplify-font-weights-bold); font-size: var(--amplify-font-sizes-large); margin-block-end: var(--amplify-space-xs); } .amplify-storage-browser__preview-fallback-description { font-size: var(--amplify-font-sizes-small); margin-block-end: var(--amplify-space-xs); } .amplify-storage-browser__preview-fallback-filename { font-size: var(--amplify-font-sizes-xs); font-family: var(--amplify-fonts-monospace), monospace; } .amplify-storage-browser__preview-fallback-actions { display: flex; gap: var(--amplify-space-small); flex-wrap: wrap; justify-content: center; } .amplify-storage-browser__preview-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--amplify-space-medium); height: 400px; width: 100%; } .amplify-storage-browser__preview-placeholder-content { display: flex; flex-direction: column; align-items: center; gap: var(--amplify-space-small); width: 100%; } .amplify-storage-browser__preview-placeholder-info { color: var(--amplify-colors-font-secondary); font-size: var(--amplify-font-sizes-small); text-align: center; } .amplify-storage-browser__text-container { display: flex; flex-flow: column nowrap; gap: 8px; align-items: center; } .amplify-storage-browser__text-preview { height: 400px; width: 100%; display: block; background-color: var(--amplify-colors-background-secondary); border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary); border-radius: var(--amplify-radii-small); padding: var(--amplify-space-medium); font-family: var(--amplify-fonts-monospace), monospace; font-size: var(--amplify-font-sizes-small); line-height: 1.5; overflow-y: auto; word-wrap: break-word; white-space: pre-wrap; word-break: break-word; } .amplify-storage-browser__video-container { display: flex; flex-flow: column nowrap; gap: 8px; align-items: center; } .amplify-storage-browser__video-preview { display: flex; align-items: center; justify-content: center; width: 100%; height: 400px; border-radius: var(--amplify-radii-small); background-color: var(--amplify-colors-background-secondary); flex-shrink: 0; } .amplify-storage-browser__video-preview video { max-width: 100%; max-height: 100%; width: auto; height: auto; -o-object-fit: contain; object-fit: contain; } .amplify-storage-browser__image-container { display: flex; flex-flow: column nowrap; gap: 8px; align-items: center; } .amplify-storage-browser__image-preview { display: flex; align-items: center; justify-content: center; height: 400px; width: 100%; background-color: var(--amplify-colors-background-secondary); border-radius: var(--amplify-radii-small); flex-shrink: 0; flex-flow: column nowrap; gap: 8px; } .amplify-storage-browser__image-preview img { max-width: 100%; max-height: 100%; width: auto; height: auto; -o-object-fit: contain; object-fit: contain; border-radius: var(--amplify-radii-small); } .amplify-storage-browser__download-button { display: flex; flex-flow: row nowrap; gap: 8px; } .amplify-storage-browser__download-button_icon { animation-delay: 0s; animation-direction: normal; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; animation-name: spin; } @keyframes spin { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } .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; } /* Authentication page styles */ .auth-page-container { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; } .auth-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; } .clear-session-btn { font-size: 12px; padding: 8px 16px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; margin-top: 10px; } .clear-session-btn:hover { background-color: #e0e0e0; } /* Set default country code to UK (+44) */ [data-amplify-authenticator] [data-amplify-phone-number-field] select { /* This targets the country code dropdown */ } [data-amplify-authenticator] [data-amplify-phone-number-field] input[type="tel"] { /* Ensure UK format is shown */ } .instructions-toggle { margin-bottom: 20px; } .toggle-button { background: none; border: none; color: #007bff; text-decoration: underline; cursor: pointer; font-size: 0.9em; } .toggle-button:hover { color: #0056b3; } .media-preview-container { margin-top: 10px; } .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; } .media-item { position: relative; } .media-image { width: 100%; height: 150px; object-fit: cover; border-radius: 4px; border: 1px solid #ddd; } .remove-button { position: absolute; top: 5px; right: 5px; background: rgba(255, 0, 0, 0.7); color: white; border: none; border-radius: 50%; width: 25px; height: 25px; cursor: pointer; font-size: 12px; } .remove-button:hover { background: rgba(255, 0, 0, 0.9); } /* Mobile Responsive Design */ @media (max-width: 768px) { .media-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .media-image { height: 120px; } .remove-button { width: 30px; height: 30px; font-size: 14px; top: 3px; right: 3px; } } @media (max-width: 480px) { .media-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; } .media-image { height: 100px; } .remove-button { width: 28px; height: 28px; font-size: 12px; } } @media (max-width: 360px) { .media-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 4px; } .media-image { height: 80px; } .remove-button { width: 24px; height: 24px; font-size: 10px; } } .paypal-billing-notice { background-color: #ff0000; padding: 15px; border-radius: 8px; border: 1px solid #cc0000; margin-bottom: 20px; } .paypal-billing-notice strong, .paypal-billing-notice span { color: #000000; } .trial-status { background-color: #e8f5e8; padding: 20px; border-radius: 8px; border: 1px solid #4caf50; margin-bottom: 20px; text-align: center; } .trial-status h2 { color: #2e7d32; margin-bottom: 10px; } .trial-warning { background-color: #fff3cd; padding: 15px; border-radius: 6px; border: 1px solid #ffc107; margin-top: 15px; } .trial-warning p { color: #856404; margin: 0; } .trial-expired { background-color: #f8d7da; padding: 20px; border-radius: 8px; border: 1px solid #dc3545; margin-bottom: 20px; text-align: center; } .trial-expired h2 { color: #721c24; margin-bottom: 10px; } .trial-expired p { color: #721c24; } .epos-addon-section { margin-top: 40px; padding-top: 30px; border-top: 2px solid #e0e0e0; } .epos-addon-section h2 { color: #1976d2; margin-bottom: 10px; } .epos-addon-section > p { color: #666; margin-bottom: 20px; font-size: 16px; } /* Component-specific button disabled styles */ button:disabled, .btn:disabled { background: #cbd5e0; cursor: not-allowed; } /* ── Wrapper ── */ .delete-account-wrapper { color: black; } .delete-account-wrapper h2 { color: black; } /* ── Card ── */ .delete-account-card { max-width: 700px; border: 2px solid #dc3545; background-color: #fff5f5; } /* ── Danger header ── */ .delete-account-danger-header { color: #dc3545; margin-bottom: 20px; } .delete-account-danger-header p { color: black; } /* ── Step heading ── */ .delete-account-step-heading { color: black; } /* ── Option rows (checkbox + text) ── */ .delete-option-box { margin-bottom: 20px; padding: 15px; border: 1px solid #dc3545; border-radius: 6px; background-color: #fff; } .delete-option-row { display: flex; align-items: flex-start; gap: 0; cursor: pointer; } .delete-option-checkbox { width: 20%; min-width: 80px; display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; flex-shrink: 0; } .delete-option-checkbox input[type='checkbox'] { width: 18px; height: 18px; cursor: pointer; } .delete-option-text { flex: 1; min-width: 0; } .delete-option-text strong { color: black; } .delete-option-description { color: #555; margin: 6px 0 0; font-size: 14px; } .delete-option-warning { color: #c0392b; margin: 6px 0 0; font-size: 14px; } .delete-option-list { color: black; font-size: 13px; margin-top: 6px; padding-left: 18px; } /* ── Important notice ── */ .delete-account-notice { color: black; font-size: 13px; margin-bottom: 16px; } /* ── Button row ── */ .delete-account-actions { display: flex; gap: 10px; } /* ── Step 2: SMS ── */ .delete-account-step-text { color: black; } .delete-account-sms-sent { margin-bottom: 16px; } .delete-account-sms-success { color: #28a745; font-weight: bold; } .delete-account-code-input { width: 100%; margin-bottom: 10px; color: black; } .delete-account-resend-btn { font-size: 13px; margin-bottom: 10px; } .delete-account-send-btn-wrap { margin-bottom: 16px; } /* ── Step 3: Confirmation ── */ .delete-account-summary-box { margin-bottom: 16px; padding: 12px; background-color: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; } .delete-account-summary-box p { color: black; margin: 0; font-size: 14px; } .delete-account-summary-box ul { color: black; font-size: 14px; margin: 8px 0 0; padding-left: 18px; } .delete-account-confirm-label { color: black; } .delete-account-confirm-input { width: 100%; margin-bottom: 10px; color: black; } /* ── Responsive ── */ @media (max-width: 480px) { .delete-account-card { max-width: 100%; } .delete-option-row { flex-direction: column; gap: 8px; } .delete-option-checkbox { width: 100%; justify-content: flex-start; padding-top: 0; } } @charset "UTF-8"; .rbc-btn { color: inherit; font: inherit; margin: 0; } button.rbc-btn { overflow: visible; text-transform: none; -webkit-appearance: button; -moz-appearance: button; appearance: button; cursor: pointer; } button[disabled].rbc-btn { cursor: not-allowed; } button.rbc-input::-moz-focus-inner { border: 0; padding: 0; } .rbc-calendar { -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .rbc-m-b-negative-3 { margin-bottom: -3px; } .rbc-h-full { height: 100%; } .rbc-calendar *, .rbc-calendar *:before, .rbc-calendar *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } .rbc-abs-full, .rbc-row-bg { overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .rbc-ellipsis, .rbc-show-more, .rbc-row-segment .rbc-event-content, .rbc-event-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rbc-rtl { direction: rtl; } .rbc-off-range { color: #999999; } .rbc-off-range-bg { background: #e6e6e6; } .rbc-header { overflow: hidden; -webkit-box-flex: 1; -ms-flex: 1 0 0%; flex: 1 0 0%; text-overflow: ellipsis; white-space: nowrap; padding: 0 3px; text-align: center; vertical-align: middle; font-weight: bold; font-size: 90%; min-height: 0; border-bottom: 1px solid #ddd; } .rbc-header + .rbc-header { border-left: 1px solid #ddd; } .rbc-rtl .rbc-header + .rbc-header { border-left-width: 0; border-right: 1px solid #ddd; } .rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited { color: inherit; text-decoration: none; } .rbc-button-link { color: inherit; background: none; margin: 0; padding: 0; border: none; cursor: pointer; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .rbc-row-content { position: relative; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; z-index: 4; } .rbc-row-content-scrollable { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .rbc-row-content-scrollable .rbc-row-content-scroll-container { height: 100%; overflow-y: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ /* Hide scrollbar for Chrome, Safari and Opera */ } .rbc-row-content-scrollable .rbc-row-content-scroll-container::-webkit-scrollbar { display: none; } .rbc-today { background-color: #eaf6ff; } .rbc-toolbar { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 10px; font-size: 16px; } .rbc-toolbar .rbc-toolbar-label { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 0 10px; text-align: center; } .rbc-toolbar button { color: #373a3c; display: inline-block; margin: 0; text-align: center; vertical-align: middle; background: none; background-image: none; border: 1px solid #ccc; padding: 0.375rem 1rem; border-radius: 4px; line-height: normal; white-space: nowrap; } .rbc-toolbar button:active, .rbc-toolbar button.rbc-active { background-image: none; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); background-color: #e6e6e6; border-color: #adadad; } .rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus { color: #373a3c; background-color: #d4d4d4; border-color: #8c8c8c; } .rbc-toolbar button:focus { color: #373a3c; background-color: #e6e6e6; border-color: #adadad; } .rbc-toolbar button:hover { color: #373a3c; cursor: pointer; background-color: #e6e6e6; border-color: #adadad; } .rbc-btn-group { display: inline-block; white-space: nowrap; } .rbc-btn-group > button:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .rbc-btn-group > button:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) { border-radius: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) { border-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; } .rbc-btn-group > button:not(:first-child):not(:last-child) { border-radius: 0; } .rbc-btn-group button + button { margin-left: -1px; } .rbc-rtl .rbc-btn-group button + button { margin-left: 0; margin-right: -1px; } .rbc-btn-group + .rbc-btn-group, .rbc-btn-group + button { margin-left: 10px; } @media (max-width: 767px) { .rbc-toolbar { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .rbc-event, .rbc-day-slot .rbc-background-event { border: none; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: none; box-shadow: none; margin: 0; padding: 2px 5px; background-color: #3174ad; border-radius: 5px; color: #fff; cursor: pointer; width: 100%; text-align: left; } .rbc-slot-selecting .rbc-event, .rbc-slot-selecting .rbc-day-slot .rbc-background-event, .rbc-day-slot .rbc-slot-selecting .rbc-background-event { cursor: inherit; pointer-events: none; } .rbc-event.rbc-selected, .rbc-day-slot .rbc-selected.rbc-background-event { background-color: #265985; } .rbc-event:focus, .rbc-day-slot .rbc-background-event:focus { outline: 5px auto #3b99fc; } .rbc-event-label { font-size: 80%; } .rbc-event-overlaps { -webkit-box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5); box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5); } .rbc-event-continues-prior { border-top-left-radius: 0; border-bottom-left-radius: 0; } .rbc-event-continues-after { border-top-right-radius: 0; border-bottom-right-radius: 0; } .rbc-event-continues-earlier { border-top-left-radius: 0; border-top-right-radius: 0; } .rbc-event-continues-later { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .rbc-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .rbc-row-segment { padding: 0 1px 1px 1px; } .rbc-selected-cell { background-color: rgba(0, 0, 0, 0.1); } .rbc-show-more { background-color: rgba(255, 255, 255, 0.3); z-index: 4; font-weight: bold; font-size: 85%; height: auto; line-height: normal; color: #3174ad; } .rbc-show-more:hover, .rbc-show-more:focus { color: #265985; } .rbc-month-view { position: relative; border: 1px solid #ddd; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; width: 100%; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; height: 100%; } .rbc-month-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .rbc-month-row { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; -ms-flex-preferred-size: 0px; flex-basis: 0px; overflow: hidden; height: 100%; } .rbc-month-row + .rbc-month-row { border-top: 1px solid #ddd; } .rbc-date-cell { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; min-width: 0; padding-right: 5px; text-align: right; } .rbc-date-cell.rbc-now { font-weight: bold; } .rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited { color: inherit; text-decoration: none; } .rbc-row-bg { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; overflow: hidden; right: 1px; } .rbc-day-bg { -webkit-box-flex: 1; -ms-flex: 1 0 0%; flex: 1 0 0%; } .rbc-day-bg + .rbc-day-bg { border-left: 1px solid #ddd; } .rbc-rtl .rbc-day-bg + .rbc-day-bg { border-left-width: 0; border-right: 1px solid #ddd; } .rbc-overlay { position: absolute; z-index: 5; border: 1px solid #e5e5e5; background-color: #fff; -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); padding: 10px; } .rbc-overlay > * + * { margin-top: 1px; } .rbc-overlay-header { border-bottom: 1px solid #e5e5e5; margin: -10px -10px 5px -10px; padding: 2px 10px; } .rbc-agenda-view { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; overflow: auto; } .rbc-agenda-view table.rbc-agenda-table { width: 100%; border: 1px solid #ddd; border-spacing: 0; border-collapse: collapse; } .rbc-agenda-view table.rbc-agenda-table tbody > tr > td { padding: 5px 10px; vertical-align: top; } .rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell { padding-left: 15px; padding-right: 15px; text-transform: lowercase; } .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td { border-left: 1px solid #ddd; } .rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td { border-left-width: 0; border-right: 1px solid #ddd; } .rbc-agenda-view table.rbc-agenda-table tbody > tr + tr { border-top: 1px solid #ddd; } .rbc-agenda-view table.rbc-agenda-table thead > tr > th { padding: 3px 5px; text-align: left; border-bottom: 1px solid #ddd; } .rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th { text-align: right; } .rbc-agenda-time-cell { text-transform: lowercase; } .rbc-agenda-time-cell .rbc-continues-after:after { content: " »"; } .rbc-agenda-time-cell .rbc-continues-prior:before { content: "« "; } .rbc-agenda-date-cell, .rbc-agenda-time-cell { white-space: nowrap; } .rbc-agenda-event-cell { width: 100%; } .rbc-time-column { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100%; } .rbc-time-column .rbc-timeslot-group { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .rbc-timeslot-group { border-bottom: 1px solid #ddd; min-height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .rbc-time-gutter, .rbc-header-gutter { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .rbc-label { padding: 0 5px; } .rbc-day-slot { position: relative; } .rbc-day-slot .rbc-events-container { bottom: 0; left: 0; position: absolute; right: 0; margin-right: 10px; top: 0; } .rbc-day-slot .rbc-events-container.rbc-rtl { left: 10px; right: 0; } .rbc-day-slot .rbc-event, .rbc-day-slot .rbc-background-event { border: 1px solid #265985; display: -webkit-box; display: -ms-flexbox; display: flex; max-height: 100%; min-height: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; overflow: hidden; position: absolute; } .rbc-day-slot .rbc-background-event { opacity: 0.75; } .rbc-day-slot .rbc-event-label { -webkit-box-flex: 0; -ms-flex: none; flex: none; padding-right: 5px; width: auto; } .rbc-day-slot .rbc-event-content { width: 100%; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; word-wrap: break-word; line-height: 1; height: 100%; min-height: 1em; } .rbc-day-slot .rbc-time-slot { border-top: 1px solid #f7f7f7; } .rbc-time-view-resources .rbc-time-gutter, .rbc-time-view-resources .rbc-time-header-gutter { position: sticky; left: 0; background-color: white; border-right: 1px solid #ddd; z-index: 10; margin-right: -1px; } .rbc-time-view-resources .rbc-time-header { overflow: hidden; } .rbc-time-view-resources .rbc-time-header-content { min-width: auto; -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; -ms-flex-preferred-size: 0px; flex-basis: 0px; } .rbc-time-view-resources .rbc-time-header-cell-single-day { display: none; } .rbc-time-view-resources .rbc-day-slot { min-width: 140px; } .rbc-time-view-resources .rbc-header, .rbc-time-view-resources .rbc-day-bg { width: 140px; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; -ms-flex-preferred-size: 0 px; flex-basis: 0 px; } .rbc-time-header-content + .rbc-time-header-content { margin-left: -1px; } .rbc-time-slot { -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; } .rbc-time-slot.rbc-now { font-weight: bold; } .rbc-day-header { text-align: center; } .rbc-slot-selection { z-index: 10; position: absolute; background-color: rgba(0, 0, 0, 0.5); color: white; font-size: 75%; width: 100%; padding: 3px; } .rbc-slot-selecting { cursor: move; } .rbc-time-view { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; border: 1px solid #ddd; min-height: 0; } .rbc-time-view .rbc-time-gutter { white-space: nowrap; text-align: right; } .rbc-time-view .rbc-allday-cell { -webkit-box-sizing: content-box; box-sizing: content-box; width: 100%; height: 100%; position: relative; } .rbc-time-view .rbc-allday-cell + .rbc-allday-cell { border-left: 1px solid #ddd; } .rbc-time-view .rbc-allday-events { position: relative; z-index: 4; } .rbc-time-view .rbc-row { -webkit-box-sizing: border-box; box-sizing: border-box; min-height: 20px; } .rbc-time-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .rbc-time-header.rbc-overflowing { border-right: 1px solid #ddd; } .rbc-rtl .rbc-time-header.rbc-overflowing { border-right-width: 0; border-left: 1px solid #ddd; } .rbc-time-header > .rbc-row:first-child { border-bottom: 1px solid #ddd; } .rbc-time-header > .rbc-row.rbc-row-resource { border-bottom: 1px solid #ddd; } .rbc-time-header-cell-single-day { display: none; } .rbc-time-header-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-left: 1px solid #ddd; } .rbc-rtl .rbc-time-header-content { border-left-width: 0; border-right: 1px solid #ddd; } .rbc-time-header-content > .rbc-row.rbc-row-resource { border-bottom: 1px solid #ddd; -ms-flex-negative: 0; flex-shrink: 0; } .rbc-time-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0 0%; flex: 1 0 0%; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; border-top: 2px solid #ddd; overflow-y: auto; position: relative; } .rbc-time-content > .rbc-time-gutter { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .rbc-time-content > * + * > * { border-left: 1px solid #ddd; } .rbc-rtl .rbc-time-content > * + * > * { border-left-width: 0; border-right: 1px solid #ddd; } .rbc-time-content > .rbc-day-slot { width: 100%; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .rbc-current-time-indicator { position: absolute; z-index: 3; left: 0; right: 0; height: 1px; background-color: #74ad31; pointer-events: none; } .rbc-resource-grouping.rbc-time-header-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .rbc-resource-grouping .rbc-row .rbc-header { width: 141px; } .rbc-addons-dnd .rbc-addons-dnd-row-body { position: relative; } .rbc-addons-dnd .rbc-addons-dnd-drag-row { position: absolute; top: 0; left: 0; right: 0; } .rbc-addons-dnd .rbc-addons-dnd-over { background-color: rgba(0, 0, 0, 0.3); } .rbc-addons-dnd .rbc-event { transition: opacity 150ms; } .rbc-addons-dnd .rbc-event:hover .rbc-addons-dnd-resize-ns-icon, .rbc-addons-dnd .rbc-event:hover .rbc-addons-dnd-resize-ew-icon { display: block; } .rbc-addons-dnd .rbc-addons-dnd-dragged-event { opacity: 0; } .rbc-addons-dnd.rbc-addons-dnd-is-dragging .rbc-event:not(.rbc-addons-dnd-dragged-event):not(.rbc-addons-dnd-drag-preview) { opacity: 0.5; } .rbc-addons-dnd .rbc-addons-dnd-resizable { position: relative; width: 100%; height: 100%; } .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor { width: 100%; text-align: center; position: absolute; } .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor:first-child { top: 0; } .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor:last-child { bottom: 0; } .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor .rbc-addons-dnd-resize-ns-icon { display: none; border-top: 3px double; margin: 0 auto; width: 10px; cursor: ns-resize; } .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor { position: absolute; top: 4px; bottom: 0; } .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor:first-child { left: 0; } .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor:last-child { right: 0; } .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor .rbc-addons-dnd-resize-ew-icon { display: none; border-left: 3px double; margin-top: auto; margin-bottom: auto; height: 10px; cursor: ew-resize; } .booking-form-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; padding: 10px; } .booking-form-container { background: white; padding: 20px; border-radius: 8px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; } /* Mobile responsive for booking form */ @media (max-width: 768px) { .booking-form-container { padding: 15px; max-width: 95%; max-height: 95vh; } .booking-form-container h3 { font-size: 18px; margin-bottom: 15px; } .form-buttons { flex-direction: column; gap: 10px; } .form-buttons button { width: 100%; margin: 0; } } @media (max-width: 480px) { .booking-form-overlay { padding: 5px; } .booking-form-container { padding: 10px; border-radius: 4px; } .booking-form-container h3 { font-size: 16px; } } .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } /* ── Booking Search ── */ .booking-search-section { margin: 20px 0; } .booking-search-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; color: #333; } .booking-search-wrapper { position: relative; display: flex; align-items: center; } .booking-search-input { width: 100%; padding: 10px 40px 10px 14px; font-size: 14px; border: 1px solid #ccc; border-radius: 6px; outline: none; transition: border-color 0.2s; } .booking-search-input:focus { border-color: #3174ad; box-shadow: 0 0 0 2px rgba(49,116,173,0.2); } .booking-search-clear { position: absolute; right: 10px; background: none; border: none; font-size: 16px; color: #999; cursor: pointer; padding: 0; line-height: 1; } .booking-search-clear:hover { color: #333; } .booking-search-results { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; max-height: 420px; overflow-y: auto; } .booking-search-result-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #eee; transition: background 0.15s; } .booking-search-result-item:last-child { border-bottom: none; } .booking-search-result-item:hover { background: #f0f6ff; } .result-future { background: #fff; } .result-past { background: #fafafa; opacity: 0.85; } .result-primary { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; } .result-date { font-weight: 600; font-size: 13px; color: #333; } .result-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; } .result-status-pending { background: #cce0f5; color: #1a5276; } .result-status-handed_in { background: #d4edda; color: #155724; } .result-status-in_progress { background: #fff3cd; color: #856404; } .result-status-notified { background: #d1ecf1; color: #0c5460; } .result-status-completed { background: #e2e3e5; color: #383d41; } .result-status-cancelled { background: #f8d7da; color: #721c24; } .result-status-paid_in_full { background: #e7d6f5; color: #6f42c1; } .result-status-partially_paid { background: #fce4ec; color: #880e4f; } .result-status-invoiced { background: #ffe5cc; color: #7d3c00; } .result-secondary { display: flex; gap: 16px; font-size: 13px; color: #555; } .result-works { font-size: 12px; color: #888; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .booking-search-no-results { margin: 8px 0 0; font-size: 13px; color: #888; font-style: italic; } .booking-instructions { background: #f5f5f5; padding: 15px; border-radius: 5px; margin-top: 20px; } .booking-instructions h3 { margin-top: 0; color: #333; } .booking-instructions ul { margin: 10px 0; padding-left: 20px; } .booking-instructions li { margin: 5px 0; color: #666; } .form-buttons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } /* Calendar customization */ .rbc-calendar { font-family: inherit; } .rbc-event { background-color: #3174ad; border: none; border-radius: 3px; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; font-size: 11px; line-height: 1.2; padding: 2px 4px; min-height: 20px; } .rbc-event-content { white-space: pre-wrap; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; } .rbc-event:focus { outline: 2px solid #3174ad; } .rbc-selected { background-color: #265985; } /* Selected day highlighting */ .rbc-date-cell.rbc-selected { background-color: #2c3e50 !important; } .rbc-month-view .rbc-date-cell.rbc-selected { background-color: #2c3e50 !important; } .rbc-today { background-color: #2c3e50; color: white; } .rbc-off-range-bg { background-color: #f7f7f7; } /* Time format in 24-hour - match month font styling */ .rbc-time-header-gutter, .rbc-time-gutter { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 600; font-size: 14px; } .rbc-time-slot { border-top: 1px solid #ddd; } /* Improve readability of event text */ .rbc-event-label { font-weight: bold; font-size: 10px; } /* Stack overlapping events vertically instead of side by side */ .rbc-addons-dnd .rbc-addons-dnd-drag-preview { z-index: 999; } /* Drag and drop styling */ .rbc-addons-dnd-drag-preview { opacity: 0.8; transform: scale(1.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } .rbc-addons-dnd-dragging { opacity: 0.5; } .rbc-addons-dnd-resizing { opacity: 0.8; } .rbc-event:hover { cursor: move; opacity: 0.9; } .rbc-event .rbc-addons-dnd-resize-ns-anchor { cursor: ns-resize; } .rbc-event .rbc-addons-dnd-resize-ew-anchor { cursor: ew-resize; } /* Booking status colors */ .booking-status-pending { background-color: #3174ad !important; color: white !important; } .booking-status-in_progress { background-color: #ffc107 !important; color: #000 !important; } .booking-status-notified { background-color: #17a2b8 !important; color: white !important; } .booking-status-completed { background-color: #6c757d !important; color: white !important; } .booking-status-cancelled { background-color: #dc3545 !important; color: white !important; } .booking-status-handed_in { background-color: #28a745 !important; color: white !important; } .booking-status-paid_in_full { background-color: #6f42c1 !important; color: white !important; } .booking-status-partially_paid { background-color: #ffc0cb !important; color: #000 !important; } /* Split gradient for partially paid */ .booking-split-partially_paid.booking-work-pending { background: linear-gradient(to right, #3174ad 50%, #ffc0cb 50%) !important; color: white !important; } .booking-split-partially_paid.booking-work-handed_in { background: linear-gradient(to right, #28a745 50%, #ffc0cb 50%) !important; color: white !important; } .booking-split-partially_paid.booking-work-in_progress { background: linear-gradient(to right, #ffc107 50%, #ffc0cb 50%) !important; color: #000 !important; } .booking-split-partially_paid.booking-work-notified { background: linear-gradient(to right, #17a2b8 50%, #ffc0cb 50%) !important; color: white !important; } .booking-split-partially_paid.booking-work-completed { background: linear-gradient(to right, #6c757d 50%, #ffc0cb 50%) !important; color: white !important; } .booking-split-partially_paid.booking-work-cancelled { background: linear-gradient(to right, #dc3545 50%, #ffc0cb 50%) !important; color: white !important; } /* Fallback if workStatus missing */ .booking-split-partially_paid { background-color: #ffc0cb !important; color: #000 !important; } /* Split gradient for paid in full */ .booking-split-paid_in_full.booking-work-pending { background: linear-gradient(to right, #3174ad 50%, #6f42c1 50%) !important; color: white !important; } .booking-split-paid_in_full.booking-work-handed_in { background: linear-gradient(to right, #28a745 50%, #6f42c1 50%) !important; color: white !important; } .booking-split-paid_in_full.booking-work-in_progress { background: linear-gradient(to right, #ffc107 50%, #6f42c1 50%) !important; color: white !important; } .booking-split-paid_in_full.booking-work-notified { background: linear-gradient(to right, #17a2b8 50%, #6f42c1 50%) !important; color: white !important; } .booking-split-paid_in_full.booking-work-completed { background: linear-gradient(to right, #6c757d 50%, #6f42c1 50%) !important; color: white !important; } .booking-split-paid_in_full.booking-work-cancelled { background: linear-gradient(to right, #dc3545 50%, #6f42c1 50%) !important; color: white !important; } /* Fallback if workStatus missing */ .booking-split-paid_in_full { background-color: #6f42c1 !important; color: white !important; } /* Split gradient for invoiced (trade sale — payment outstanding) */ .booking-split-invoiced.booking-work-pending { background: linear-gradient(to right, #3174ad 50%, #fd7e14 50%) !important; color: white !important; } .booking-split-invoiced.booking-work-handed_in { background: linear-gradient(to right, #28a745 50%, #fd7e14 50%) !important; color: white !important; } .booking-split-invoiced.booking-work-in_progress { background: linear-gradient(to right, #ffc107 50%, #fd7e14 50%) !important; color: white !important; } .booking-split-invoiced.booking-work-notified { background: linear-gradient(to right, #17a2b8 50%, #fd7e14 50%) !important; color: white !important; } .booking-split-invoiced.booking-work-completed { background: linear-gradient(to right, #6c757d 50%, #fd7e14 50%) !important; color: white !important; } .booking-split-invoiced.booking-work-cancelled { background: linear-gradient(to right, #dc3545 50%, #fd7e14 50%) !important; color: white !important; } /* Fallback if workStatus missing */ .booking-split-invoiced { background-color: #fd7e14 !important; color: white !important; } /* UK Holiday styling */ .uk-holiday-event { background-color: #dc3545 !important; color: white !important; font-weight: bold !important; border: 2px solid #a71e2a !important; } .uk-holiday-event .rbc-event-content { font-size: 12px !important; text-align: center !important; } /* Responsive Design for Mobile */ @media (max-width: 768px) { .rbc-calendar { font-size: 12px; } .rbc-event { font-size: 10px; padding: 1px 2px; min-height: 15px; } .rbc-time-header { font-size: 11px; } .rbc-time-gutter { font-size: 10px; width: 50px; } .rbc-toolbar { flex-wrap: wrap; gap: 5px; justify-content: center; } .rbc-toolbar button { font-size: 12px; padding: 8px 12px; min-height: 40px; margin: 2px; } .rbc-toolbar-label { font-size: 16px; margin: 8px 0; text-align: center; width: 100%; } .rbc-btn-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; } } /* Calendar container responsive sizing */ .calendar-container { height: 600px; margin: 20px 0; } @media (max-width: 768px) { .calendar-container { height: 500px; margin: 15px 0; } } @media (max-width: 480px) { .calendar-container { height: 450px; margin: 10px 0; } .rbc-calendar { font-size: 11px; } .rbc-event { font-size: 9px; padding: 2px; min-height: 14px; } .rbc-time-gutter { width: 45px; font-size: 10px; } .rbc-toolbar button { font-size: 12px; padding: 6px 10px; min-height: 36px; } .rbc-toolbar-label { font-size: 14px; } .booking-form-container { padding: 12px; max-width: 98%; } .form-buttons { flex-direction: column; gap: 8px; } .form-buttons button { width: 100%; min-height: 44px; font-size: 16px; } } .super-admin-login { min-height: 100vh; background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } .warning-banner { background: #dc3545; color: white; padding: 15px 30px; font-weight: bold; text-align: center; border-radius: 5px; margin-bottom: 30px; font-size: 16px; letter-spacing: 1px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); } .login-container { background: white; padding: 40px; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); width: 100%; max-width: 400px; } .login-container h2 { text-align: center; margin-bottom: 30px; color: #333; font-size: 24px; } .login-container p { text-align: center; margin-bottom: 20px; color: #666; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; } .form-group input { width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 5px; font-size: 16px; box-sizing: border-box; } .form-group input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 5px rgba(0,123,255,0.3); } .error-message { background: #f8d7da; color: #721c24; padding: 10px; border-radius: 5px; margin-bottom: 20px; text-align: center; border: 1px solid #f5c6cb; } .success-message { background: #d4edda; color: #155724; padding: 10px; border-radius: 5px; margin-bottom: 20px; text-align: center; border: 1px solid #c3e6cb; } .forgot-password-btn { width: 100%; padding: 10px; background: transparent; color: #007bff; border: 1px solid #007bff; border-radius: 5px; font-size: 14px; cursor: pointer; margin-top: 15px; transition: all 0.3s; } .forgot-password-btn:hover { background: #007bff; color: white; } .clear-sessions-btn { width: 100%; padding: 10px; background: transparent; color: #dc3545; border: 1px solid #dc3545; border-radius: 5px; font-size: 14px; cursor: pointer; margin-top: 10px; transition: all 0.3s; } .clear-sessions-btn:hover { background: #dc3545; color: white; } button[type="submit"] { width: 100%; padding: 15px; background: #007bff; color: white; border: none; border-radius: 5px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.3s; } button[type="submit"]:hover:not(:disabled) { background: #0056b3; } button[type="submit"]:disabled { background: #6c757d; cursor: not-allowed; } .back-btn { width: 100%; padding: 10px; background: #6c757d; color: white; border: none; border-radius: 5px; font-size: 14px; cursor: pointer; margin-top: 10px; transition: background-color 0.3s; } .back-btn:hover { background: #545b62; } .security-notice { text-align: center; margin-top: 20px; font-size: 12px; color: #666; font-style: italic; } @media (max-width: 480px) { .login-container { padding: 30px 20px; } .warning-banner { padding: 10px 20px; font-size: 14px; } } .super-admin-dashboard { min-height: 100vh; background: #f8f9fa; padding: 0; } .super-admin-loading { display: flex; justify-content: center; align-items: center; height: 100vh; font-size: 18px; color: #666; } .admin-header { background: #1a1a1a; color: white; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .header-left h1 { margin: 0 0 5px 0; font-size: 24px; } .admin-user { font-size: 14px; color: #ccc; } .header-right { display: flex; align-items: center; gap: 20px; } .session-timer { background: #dc3545; padding: 8px 15px; border-radius: 5px; font-size: 14px; font-weight: bold; } .logout-btn { background: #6c757d; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; } .logout-btn:hover { background: #5a6268; } .help-btn { background: #ff9900; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background-color 0.3s; } .help-btn:hover { background: #e68a00; } .warning-banner { background: #dc3545; color: white; padding: 15px; text-align: center; font-weight: bold; font-size: 16px; letter-spacing: 1px; } .organization-search { background: white; margin: 20px 30px; padding: 25px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #ffc107; } .organization-search h2 { margin: 0 0 20px 0; color: #333; font-size: 20px; } .search-container { position: relative; } .org-search-input { width: 100%; padding: 12px 15px; border: 2px solid #ddd; border-radius: 5px; font-size: 16px; outline: none; transition: border-color 0.3s; } .org-search-input:focus { border-color: #007bff; } .search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; border-top: none; border-radius: 0 0 5px 5px; max-height: 300px; overflow-y: auto; z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .dropdown-item { padding: 15px; border-bottom: 1px solid #eee; cursor: pointer; transition: background-color 0.2s; } .dropdown-item:hover { background: #f8f9fa; } .dropdown-item:last-child { border-bottom: none; } .org-name { font-weight: bold; color: #333; margin-bottom: 5px; } .org-email { color: #666; font-size: 14px; margin-bottom: 3px; } .org-status { color: #28a745; font-size: 12px; text-transform: uppercase; font-weight: bold; } .password-reset-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-content { background: white; padding: 30px; border-radius: 10px; width: 90%; max-width: 400px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .modal-content h3 { margin: 0 0 20px 0; color: #333; } .modal-content input { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; } .modal-content button { width: 100%; padding: 10px; margin-bottom: 10px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; } .modal-content button[type="submit"] { background: #007bff; color: white; } .close-btn { background: #6c757d; color: white; } .reset-message { padding: 10px; margin: 10px 0; border-radius: 5px; background: #d4edda; color: #155724; text-align: center; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 30px; max-width: 1200px; margin: 0 auto; } .stat-card { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; border-left: 4px solid #007bff; } .stat-card h3 { margin: 0 0 15px 0; color: #666; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; } .stat-number { font-size: 48px; font-weight: bold; color: #007bff; margin: 0; } .admin-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 0 30px 30px; max-width: 1200px; margin: 0 auto; } .admin-section { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-top: 4px solid #28a745; } .admin-section h2 { margin: 0 0 15px 0; color: #333; font-size: 20px; } .admin-section p { color: #666; margin: 0 0 20px 0; line-height: 1.5; } .admin-btn { background: #007bff; color: white; border: none; padding: 12px 24px; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background-color 0.3s; } .admin-btn:hover { background: #0056b3; } .emergency-btn { background: #dc3545 !important; } .emergency-btn:hover { background: #c82333 !important; } .emergency-btn:disabled { background: #6c757d !important; cursor: not-allowed; } .download-btn { background: #17a2b8 !important; } .download-btn:hover { background: #138496 !important; } .download-btn:disabled { background: #6c757d !important; cursor: not-allowed; } .emergency-buttons { display: flex; gap: 10px; flex-wrap: wrap; } .emergency-warning { background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 5px; padding: 15px; margin-bottom: 20px; color: #856404; font-weight: 500; text-align: center; } /* Audit Table Styles */ .audit-logs-section { background: white; margin: 20px 30px; padding: 25px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #dc3545; } .audit-logs-section h2 { margin: 0 0 20px 0; color: #333; font-size: 20px; } .audit-logs-table { overflow-x: auto; margin-top: 20px; } .audit-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: white; } .audit-table thead tr { background: #f8f9fa; border-bottom: 2px solid #dee2e6; } .audit-table th { padding: 12px 8px; text-align: left; font-weight: 600; font-size: 12px; color: #495057; border-right: 1px solid #dee2e6; white-space: normal; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; } .audit-table td { padding: 10px 8px; border-bottom: 1px solid #dee2e6; border-right: 1px solid #dee2e6; font-size: 11px; color: #495057; white-space: normal; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-width: 200px; } .audit-row { cursor: pointer; transition: background-color 0.2s ease; } .audit-row:hover { background-color: #f8f9fa; } .audit-row:active { background-color: #e9ecef; } /* Column widths */ .col-datetime { width: 12%; } .col-admin { width: 15%; } .col-action { width: 10%; } .col-org { width: 15%; } .col-email { width: 15%; } .col-auth { width: 13%; } .col-authorization { width: 20%; } .action-badge { padding: 2px 6px; background-color: #e3f2fd; border-radius: 3px; font-size: 10px; font-weight: 500; color: #1976d2; display: inline-block; } /* Audit Modal Styles */ .audit-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1001; padding: 20px; } .audit-modal-content { background: white; border-radius: 12px; width: 100%; max-width: 800px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .audit-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #dee2e6; background: #f8f9fa; border-radius: 12px 12px 0 0; } .audit-modal-header h3 { margin: 0; color: #333; font-size: 18px; } .audit-modal-header .close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: #6c757d; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s; } .audit-modal-header .close-btn:hover { background-color: #e9ecef; color: #495057; } .audit-details-grid { padding: 25px; display: grid; gap: 20px; } .audit-detail-item { display: grid; grid-template-columns: 150px 1fr; gap: 15px; align-items: start; } .audit-detail-item.authorization-item { grid-template-columns: 150px 1fr; } .audit-detail-item label { font-weight: 600; color: #495057; font-size: 14px; padding-top: 2px; } .detail-value { background: #f8f9fa; padding: 10px 12px; border-radius: 6px; border: 1px solid #dee2e6; font-size: 13px; color: #495057; word-wrap: break-word; } .authorization-content { min-height: 120px; max-height: 300px; overflow-y: auto; white-space: pre-wrap; line-height: 1.4; font-family: 'Courier New', monospace; font-size: 12px; } /* Subscription Stats Styles */ .subscription-stats { background: white; margin: 20px 30px; padding: 25px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #28a745; } .subscription-stats h2 { margin: 0 0 20px 0; color: #333; font-size: 20px; } .subscription-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; } .subscription-card { background: #f8f9fa; padding: 20px; border-radius: 8px; text-align: center; border: 1px solid #dee2e6; } .subscription-card h4 { margin: 0 0 10px 0; color: #495057; font-size: 14px; font-weight: 600; } .sub-count { font-size: 24px; font-weight: bold; color: #007bff; margin-bottom: 5px; } .sub-price { font-size: 12px; color: #6c757d; font-weight: 500; } .revenue-card { background: linear-gradient(135deg, #28a745, #20c997); color: white; padding: 20px; border-radius: 8px; text-align: center; grid-column: span 2; } .revenue-card h4 { margin: 0 0 10px 0; font-size: 16px; font-weight: 600; } .revenue-amount { font-size: 32px; font-weight: bold; } @media (max-width: 768px) { .admin-header { flex-direction: column; gap: 15px; text-align: center; } .header-right { flex-direction: column; gap: 10px; } .stats-grid, .admin-sections { padding: 20px; grid-template-columns: 1fr; } .stat-card, .admin-section { padding: 20px; } .stat-number { font-size: 36px; } .audit-logs-section { margin: 20px; padding: 20px; } .audit-table th, .audit-table td { padding: 8px 4px; font-size: 10px; } .audit-modal { padding: 10px; } .audit-modal-content { max-height: 95vh; } .audit-details-grid { padding: 20px; } .audit-detail-item { grid-template-columns: 1fr; gap: 8px; } .audit-detail-item.authorization-item { grid-template-columns: 1fr; } .subscription-stats { margin: 20px; padding: 20px; } .subscription-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .revenue-card { grid-column: span 1; } } .email-buttons { display: flex; gap: 10px; flex-wrap: wrap; } .email-preview { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 15px; margin-bottom: 20px; } .email-preview h4 { margin: 0 0 10px 0; color: #495057; } .email-content { background-color: white; border: 1px solid #dee2e6; border-radius: 4px; padding: 15px; } .email-body { line-height: 1.6; } .user-message { background-color: #fff3cd; border: 1px dashed #ffc107; padding: 10px; border-radius: 4px; font-style: italic; min-height: 40px; } /* Embedded Status Section */ .embedded-status-section { background: white; margin: 20px 30px; padding: 25px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #17a2b8; scroll-margin-top: 20px; /* Offset for smooth scrolling */ } .embedded-status-section .status-page { margin: 0; padding: 0; background: transparent; } .embedded-status-section .status-header { margin-bottom: 20px; } .embedded-status-section .status-header h1 { margin: 0 0 15px 0; color: #333; font-size: 24px; } .admin-group { margin-bottom: 32px; } .group-heading { font-size: 1.1rem; font-weight: 700; color: #1e293b; padding: 8px 14px; background: #f1f5f9; border-left: 4px solid #2563eb; border-radius: 4px; margin-bottom: 14px; } .admin-group-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .admin-group-tiles .admin-section h3 { font-size: 0.95rem; margin: 0 0 6px; } .status-page { max-width: 800px; margin: 0 auto; padding: 2rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .back-button { background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 6px; padding: 0.5rem 1rem; font-size: 0.9rem; color: #374151; cursor: pointer; margin-bottom: 1rem; transition: background-color 0.2s; } .back-button:hover { background: #e5e7eb; } .status-header { text-align: center; margin-bottom: 3rem; } .status-header h1 { font-size: 2.5rem; margin-bottom: 1rem; color: #1f2937; } .overall-status { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; } .status-indicator { width: 12px; height: 12px; border-radius: 50%; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 3rem; } .service-card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .service-header { display: flex; justify-content: space-between; align-items: center; } .service-name { font-weight: 600; color: #1f2937; font-size: 1.1rem; } .service-status { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 0.9rem; } .status-dot { width: 8px; height: 8px; border-radius: 50%; } .status-footer { text-align: center; color: #6b7280; font-size: 0.9rem; } @media (max-width: 768px) { .status-page { padding: 1rem; } .status-header h1 { font-size: 2rem; } .services-grid { grid-template-columns: 1fr; } } .create-dsr-modal { max-width: 900px; max-height: 90vh; overflow-y: auto; } .dsr-form { display: flex; flex-direction: column; gap: 24px; } .form-section { background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #e0e0e0; } .form-section h3 { margin: 0 0 16px 0; color: #2c3e50; font-size: 16px; font-weight: 600; } .request-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .request-type-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px; border: 2px solid #e0e0e0; border-radius: 8px; background: white; cursor: pointer; transition: all 0.2s; } .request-type-card:hover { border-color: #3498db; background: #f0f8ff; } .request-type-card.selected { border-color: #2ecc71; background: #e8f8f5; } .request-type-card input[type="radio"] { margin-bottom: 10px; flex-shrink: 0; } .request-type-content { flex: 1; display: flex; flex-direction: column; align-items: center; } .request-type-content strong { display: block; color: #2c3e50; margin-bottom: 4px; font-size: 14px; } .request-type-content p { margin: 0; color: #7f8c8d; font-size: 13px; line-height: 1.4; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-weight: 500; color: #2c3e50; font-size: 14px; } .form-group input, .form-group select, .form-group textarea { padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; font-family: inherit; transition: border-color 0.2s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); } .form-group textarea { resize: vertical; min-height: 80px; } .data-categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .checkbox-label { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: white; border: 1px solid #e0e0e0; border-radius: 6px; cursor: pointer; transition: all 0.2s; } .checkbox-label:hover { background: #f8f9fa; border-color: #3498db; } .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; } .checkbox-label span { font-size: 14px; color: #2c3e50; text-transform: capitalize; } .alert { padding: 12px 16px; border-radius: 6px; font-size: 14px; line-height: 1.5; } .alert-error { background: #fee; color: #c33; border: 1px solid #fcc; } .alert-success { background: #efe; color: #3c3; border: 1px solid #cfc; } .modal-actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid #e0e0e0; } .btn-primary, .btn-secondary { padding: 10px 24px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; } .btn-primary { background: #2ecc71; color: white; } .btn-primary:hover:not(:disabled) { background: #27ae60; } .btn-primary:disabled { background: #95a5a6; cursor: not-allowed; } .btn-secondary { background: #ecf0f1; color: #2c3e50; } .btn-secondary:hover:not(:disabled) { background: #bdc3c7; } .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; } @media (max-width: 768px) { .create-dsr-modal { max-width: 95%; margin: 20px auto; } .form-row { grid-template-columns: 1fr; } .request-type-grid { grid-template-columns: 1fr; } .data-categories-grid { grid-template-columns: 1fr; } } .upload-identity-modal { max-width: 600px; } .upload-content { display: flex; flex-direction: column; gap: 24px; } .info-box { background: #e8f4f8; padding: 16px; border-radius: 8px; border: 1px solid #3498db; } .info-box p { margin: 0 0 8px 0; color: #2c3e50; font-size: 14px; } .info-box ul { margin: 8px 0; padding-left: 24px; color: #2c3e50; font-size: 14px; } .info-box li { margin-bottom: 4px; } .file-requirements { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid #3498db; font-size: 13px !important; color: #555 !important; } .file-upload-area { border: 2px dashed #ddd; border-radius: 8px; padding: 32px; text-align: center; transition: all 0.2s; background: #fafafa; } .file-upload-area:hover { border-color: #3498db; background: #f0f8ff; } .file-upload-label { display: block; cursor: pointer; } .file-upload-prompt { display: flex; flex-direction: column; align-items: center; gap: 8px; } .upload-icon { font-size: 48px; margin-bottom: 8px; } .file-upload-prompt p { margin: 0; color: #2c3e50; font-size: 16px; font-weight: 500; } .upload-hint { font-size: 14px !important; color: #7f8c8d !important; font-weight: 400 !important; } .file-selected { display: flex; align-items: center; gap: 16px; padding: 16px; background: white; border-radius: 8px; border: 1px solid #e0e0e0; } .file-icon { font-size: 48px; } .file-info { flex: 1; text-align: left; } .file-name { font-weight: 600; color: #2c3e50; font-size: 14px; margin-bottom: 4px; word-break: break-word; } .file-size { color: #7f8c8d; font-size: 13px; } .file-preview { background: #f8f9fa; padding: 16px; border-radius: 8px; border: 1px solid #e0e0e0; } .file-preview h4 { margin: 0 0 12px 0; color: #2c3e50; font-size: 14px; font-weight: 600; } .file-preview img { max-width: 100%; max-height: 300px; border-radius: 4px; border: 1px solid #ddd; display: block; margin: 0 auto; } .alert { padding: 12px 16px; border-radius: 6px; font-size: 14px; } .alert-error { background: #fee; color: #c33; border: 1px solid #fcc; } .alert-success { background: #efe; color: #3c3; border: 1px solid #cfc; } @media (max-width: 768px) { .upload-identity-modal { max-width: 95%; margin: 20px auto; } .file-upload-area { padding: 24px 16px; } } .update-dsr-modal { max-width: 700px; max-height: 90vh; overflow-y: auto; } .update-form { display: flex; flex-direction: column; gap: 24px; } .form-section { background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #e0e0e0; } .form-section h3 { margin: 0 0 16px 0; color: #2c3e50; font-size: 16px; font-weight: 600; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-weight: 500; color: #2c3e50; font-size: 14px; } .form-group input, .form-group select, .form-group textarea { padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; font-family: inherit; transition: border-color 0.2s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); } .form-group textarea { resize: vertical; min-height: 60px; } @media (max-width: 768px) { .update-dsr-modal { max-width: 95%; margin: 20px auto; } .form-row { grid-template-columns: 1fr; } } .dsr-detail-modal { max-width: 1000px; max-height: 90vh; overflow-y: auto; } .status-banner { padding: 16px 20px; border-radius: 8px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; } .status-banner.pending { background: #fff3cd; border: 2px solid #ffc107; } .status-banner.in_progress { background: #d1ecf1; border: 2px solid #17a2b8; } .status-banner.completed { background: #d4edda; border: 2px solid #28a745; } .status-banner.rejected { background: #f8d7da; border: 2px solid #dc3545; } .status-banner.overdue { background: #f8d7da; border: 2px solid #dc3545; animation: pulse-border 2s infinite; } @keyframes pulse-border { 0%, 100% { border-color: #dc3545; } 50% { border-color: #ff6b6b; } } .status-info { display: flex; gap: 16px; align-items: center; } .overdue-warning { color: #721c24; font-weight: 600; font-size: 14px; } .days-remaining { color: #155724; font-weight: 600; font-size: 14px; } .days-remaining.warning { color: #856404; } .dsr-detail-content { display: flex; flex-direction: column; gap: 24px; } .detail-section { background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #e0e0e0; } .detail-section h3 { margin: 0 0 16px 0; color: #2c3e50; font-size: 16px; font-weight: 600; padding-bottom: 12px; border-bottom: 2px solid #e0e0e0; } .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; } .detail-item { display: flex; flex-direction: column; gap: 4px; } .detail-item.full-width { grid-column: 1 / -1; } .detail-item label { font-weight: 600; color: #555; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; } .detail-value { color: #2c3e50; font-size: 14px; padding: 8px 12px; background: white; border-radius: 4px; border: 1px solid #e0e0e0; } .detail-value.code { font-family: 'Courier New', monospace; font-size: 12px; background: #f0f0f0; word-break: break-all; } .detail-value.text-block { white-space: pre-wrap; line-height: 1.6; } .detail-value.internal { background: #fff3cd; border-color: #ffc107; } .verification-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; } .verification-badge.verified { background: #d4edda; color: #155724; } .verification-badge.pending { background: #fff3cd; color: #856404; } .verification-badge.failed { background: #f8d7da; color: #721c24; } .category-tags { display: flex; flex-wrap: wrap; gap: 8px; } .category-tag { padding: 6px 12px; background: #e8f4f8; color: #2c3e50; border-radius: 16px; font-size: 13px; text-transform: capitalize; } .communication-timeline { display: flex; flex-direction: column; gap: 16px; position: relative; padding-left: 32px; } .communication-timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: #e0e0e0; } .timeline-item { position: relative; display: flex; gap: 16px; } .timeline-marker { position: absolute; left: -28px; top: 4px; width: 12px; height: 12px; background: #3498db; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 2px #3498db; } .timeline-content { flex: 1; background: white; padding: 12px 16px; border-radius: 8px; border: 1px solid #e0e0e0; } .timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .timeline-type { font-weight: 600; color: #2c3e50; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; } .timeline-date { color: #7f8c8d; font-size: 12px; } .timeline-message { color: #2c3e50; font-size: 14px; line-height: 1.5; margin-bottom: 8px; } .timeline-sender { color: #7f8c8d; font-size: 12px; font-style: italic; } .upload-prompt { margin-top: 16px; padding: 16px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; text-align: center; } .btn-upload { padding: 10px 20px; background: #3498db; color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .btn-upload:hover { background: #2980b9; transform: translateY(-2px); } .proof-uploaded-notice { margin-top: 16px; padding: 12px 16px; background: #d4edda; color: #155724; border: 1px solid #c3e6cb; border-radius: 6px; text-align: center; font-weight: 600; } /* Process DSR Actions */ .process-dsr-actions { margin-bottom: 24px; padding: 20px; background: white; border: 2px solid #3498db; border-radius: 8px; } .process-dsr-actions h4 { margin: 0 0 12px 0; color: #2c3e50; font-size: 16px; font-weight: 600; } .process-warning { margin: 0 0 16px 0; color: #555; font-size: 14px; line-height: 1.5; } .action-buttons { display: flex; gap: 12px; flex-wrap: wrap; } .btn-process-export, .btn-process-delete { padding: 12px 24px; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 8px; } .btn-process-export { background: #28a745; color: white; } .btn-process-export:hover:not(:disabled) { background: #218838; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3); } .btn-process-delete { background: #dc3545; color: white; } .btn-process-delete:hover:not(:disabled) { background: #c82333; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3); } .btn-process-export:disabled, .btn-process-delete:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .alert.alert-warning { padding: 12px 16px; background: #fff3cd; color: #856404; border: 1px solid #ffc107; border-radius: 6px; margin-bottom: 16px; font-size: 14px; } .alert.alert-error { padding: 12px 16px; background: #f8d7da; color: #721c24; border: 1px solid #dc3545; border-radius: 6px; margin-bottom: 16px; font-size: 14px; } @media (max-width: 768px) { .dsr-detail-modal { max-width: 95%; margin: 20px auto; } .detail-grid { grid-template-columns: 1fr; } .status-info { flex-direction: column; align-items: flex-start; gap: 8px; } } .dsr-dashboard { padding: 24px; max-width: 1400px; margin: 0 auto; } .dashboard-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 2px solid #e0e0e0; } .dashboard-header h1 { margin: 0 0 8px 0; color: #2c3e50; font-size: 28px; } .dashboard-header p { margin: 0; color: #7f8c8d; font-size: 16px; } .btn-create-dsr { padding: 12px 24px; background: #2ecc71; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 4px rgba(46, 204, 113, 0.2); } .btn-create-dsr:hover { background: #27ae60; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3); } .dsr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 32px; } .stat-card { display: flex; align-items: center; gap: 16px; padding: 24px; background: white; border-radius: 12px; border: 2px solid #e0e0e0; transition: all 0.2s; } .stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); } .stat-card.pending { border-color: #f39c12; } .stat-card.in-progress { border-color: #3498db; } .stat-card.overdue { border-color: #e74c3c; } .stat-card.completed { border-color: #2ecc71; } .stat-icon { font-size: 48px; line-height: 1; } .stat-content { flex: 1; } .stat-content h3 { margin: 0 0 8px 0; color: #2c3e50; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .stat-number { margin: 0 0 4px 0; color: #2c3e50; font-size: 32px; font-weight: 700; line-height: 1; } .stat-label { margin: 0; color: #7f8c8d; font-size: 13px; } .dsr-info-panel { background: white; padding: 32px; border-radius: 12px; border: 2px solid #e0e0e0; } .dsr-info-panel h2 { margin: 0 0 16px 0; color: #2c3e50; font-size: 24px; } .dsr-info-panel > p { margin: 0 0 32px 0; color: #555; font-size: 16px; line-height: 1.6; } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 32px; } .info-card { padding: 20px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e0e0e0; } .info-card h3 { margin: 0 0 12px 0; color: #2c3e50; font-size: 16px; font-weight: 600; } .info-card p { margin: 0 0 12px 0; color: #555; font-size: 14px; line-height: 1.5; } .info-card ul { margin: 0; padding-left: 20px; color: #555; font-size: 14px; line-height: 1.8; } .info-card li { margin-bottom: 4px; } .next-steps { padding: 24px; background: #e8f8f5; border-radius: 8px; border: 2px solid #2ecc71; } .next-steps h3 { margin: 0 0 12px 0; color: #27ae60; font-size: 18px; font-weight: 600; } .next-steps p { margin: 0 0 12px 0; color: #2c3e50; font-size: 14px; } .next-steps ul { margin: 0; padding-left: 20px; color: #2c3e50; font-size: 14px; line-height: 1.8; } .next-steps li { margin-bottom: 6px; } /* DSR List Section */ .dsr-list-section { background: white; padding: 24px; border-radius: 12px; border: 2px solid #e0e0e0; margin-top: 24px; } .list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid #e0e0e0; } .list-header h2 { margin: 0; color: #2c3e50; font-size: 20px; } .filter-controls { display: flex; gap: 12px; align-items: center; } .status-filter { padding: 8px 16px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; cursor: pointer; background: white; } .btn-refresh { padding: 8px 16px; background: #3498db; color: white; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; transition: all 0.2s; } .btn-refresh:hover:not(:disabled) { background: #2980b9; } .btn-refresh:disabled { background: #95a5a6; cursor: not-allowed; } .loading-state { text-align: center; padding: 60px 20px; } .spinner { width: 50px; height: 50px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .empty-state { text-align: center; padding: 60px 20px; } .empty-icon { font-size: 64px; margin-bottom: 16px; } .empty-state h3 { margin: 0 0 8px 0; color: #2c3e50; font-size: 20px; } .empty-state p { margin: 0 0 20px 0; color: #7f8c8d; } .btn-clear-filter { padding: 10px 20px; background: #3498db; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; } .dsr-table-container { overflow-x: auto; } .dsr-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; } .dsr-table thead { background: #f8f9fa; } .dsr-table th { padding: 12px; text-align: left; font-weight: 600; color: #2c3e50; border-bottom: 2px solid #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dsr-table td { padding: 12px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Allow User and Organization columns to wrap */ .dsr-table th:nth-child(3), .dsr-table td:nth-child(3), .dsr-table th:nth-child(4), .dsr-table td:nth-child(4) { white-space: normal; word-break: break-all; overflow-wrap: break-word; overflow: hidden; } /* Column widths */ .dsr-table th:nth-child(1), .dsr-table td:nth-child(1) { width: 100px; } .dsr-table th:nth-child(2), .dsr-table td:nth-child(2) { width: 110px; } .dsr-table th:nth-child(3), .dsr-table td:nth-child(3) { width: 18%; } .dsr-table th:nth-child(4), .dsr-table td:nth-child(4) { width: 15%; } .dsr-table th:nth-child(5), .dsr-table td:nth-child(5) { width: 90px; } .dsr-table th:nth-child(6), .dsr-table td:nth-child(6) { width: 100px; } .dsr-table th:nth-child(7), .dsr-table td:nth-child(7) { width: 100px; } .dsr-table th:nth-child(8), .dsr-table td:nth-child(8) { width: 80px; } .dsr-table th:nth-child(9), .dsr-table td:nth-child(9) { width: 80px; } .dsr-table tbody tr { transition: background 0.2s; cursor: pointer; } .dsr-table tbody tr:hover { background: #f8f9fa; } .dsr-table tbody tr.row-overdue { background: #fee; } .dsr-table tbody tr.row-overdue:hover { background: #fdd; } .status-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; } .status-badge.pending { background: #fff3cd; color: #856404; } .status-badge.in-progress { background: #d1ecf1; color: #0c5460; } .status-badge.completed { background: #d4edda; color: #155724; } .status-badge.rejected { background: #f8d7da; color: #721c24; } .status-badge.overdue { background: #f8d7da; color: #721c24; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .request-type-badge { display: inline-block; padding: 4px 8px; background: #e8f4f8; color: #2c3e50; border-radius: 4px; font-size: 12px; white-space: nowrap; } .user-cell { display: block; word-break: break-all; overflow-wrap: break-word; white-space: normal; overflow: hidden; } .user-email { font-weight: 500; color: #2c3e50; word-break: break-all; white-space: normal; overflow: hidden; } .user-name { font-size: 12px; color: #7f8c8d; } .days-overdue { color: #e74c3c; font-weight: 600; } .days-warning { color: #f39c12; font-weight: 600; } .days-ok { color: #27ae60; } .priority-badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; } .priority-badge.priority-low { background: #e8f8f5; color: #27ae60; } .priority-badge.priority-normal { background: #e8f4f8; color: #3498db; } .priority-badge.priority-high { background: #fff3cd; color: #f39c12; } .priority-badge.priority-urgent { background: #f8d7da; color: #e74c3c; } .alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; } .alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } @media (max-width: 768px) { .dsr-dashboard { padding: 16px; } .dashboard-header { flex-direction: column; gap: 16px; } .btn-create-dsr { width: 100%; } .dsr-stats { grid-template-columns: 1fr; } .info-grid { grid-template-columns: 1fr; } .dsr-info-panel { padding: 20px; } } .cloudwatch-monitoring { padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .cloudwatch-monitoring h2 { margin-top: 0; color: #333; border-bottom: 2px solid #2196F3; padding-bottom: 10px; } .cost-overview { margin: 20px 0; } .cost-overview h3 { color: #555; margin-bottom: 15px; } .cost-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .cost-amount { font-size: 3em; font-weight: bold; margin-bottom: 10px; } .cost-label { font-size: 1.2em; opacity: 0.9; margin-bottom: 10px; } .cost-info { font-size: 0.9em; opacity: 0.8; margin-top: 10px; } .gdpr-section { margin: 30px 0; padding: 20px; background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 6px; } .gdpr-section h3 { margin-top: 0; color: #856404; } .gdpr-info { background: white; padding: 10px; border-radius: 4px; margin-bottom: 15px; color: #856404; font-weight: 500; } .log-groups-section { margin: 30px 0; } .log-groups-section h3 { color: #555; margin-bottom: 15px; } .log-groups-table { overflow-x: auto; background: #f9f9f9; border-radius: 6px; padding: 15px; } .log-groups-table table { width: 100%; border-collapse: collapse; background: white; } .log-groups-table th { background: #f5f5f5; padding: 12px; text-align: left; font-weight: 600; color: #555; border-bottom: 2px solid #ddd; white-space: normal; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; } .log-groups-table td { padding: 10px 12px; border-bottom: 1px solid #eee; white-space: normal; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-width: 300px; } .log-groups-table tr:hover { background: #f9f9f9; } .log-name { font-family: 'Courier New', monospace; font-size: 0.9em; color: #333; word-break: break-all; max-width: 300px; overflow-wrap: break-word; } .status-ok { color: #4CAF50; font-weight: 600; } .status-warning { color: #ff9800; font-weight: 600; } .retention-select { padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; background: white; cursor: pointer; font-size: 0.9em; } .retention-select:hover { border-color: #2196F3; } .retention-select:disabled { opacity: 0.5; cursor: not-allowed; } .table-note { margin-top: 10px; padding: 10px; background: #e3f2fd; border-radius: 4px; color: #1976D2; font-size: 0.9em; text-align: center; } .monitoring-info { background: #e8f5e9; padding: 15px; border-radius: 6px; border-left: 4px solid #4CAF50; margin-top: 30px; } .monitoring-info h4 { margin-top: 0; color: #2e7d32; } .monitoring-info ul { margin: 10px 0 0 0; padding-left: 20px; } .monitoring-info li { margin: 8px 0; color: #555; } .cloudwatch-loading, .cloudwatch-error { padding: 20px; text-align: center; font-size: 1.1em; } .cloudwatch-error { color: #f44336; } .no-log-groups { text-align: center; padding: 40px 20px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; margin: 20px 0; } .no-log-groups p { margin: 10px 0; color: #856404; font-size: 1.1em; } .no-log-groups-hint { font-size: 0.9em !important; color: #856404 !important; max-width: 600px; margin: 15px auto 0 auto !important; text-align: left; } .no-log-groups-hint ul { margin: 10px 0; padding-left: 20px; } .no-log-groups-hint li { margin: 5px 0; } .load-more-container { margin-top: 15px; text-align: center; } .load-more-button { padding: 10px 20px; background: #2196F3; color: white; border: none; border-radius: 6px; font-size: 0.95em; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .load-more-button:hover { background: #1976D2; box-shadow: 0 4px 8px rgba(0,0,0,0.15); transform: translateY(-1px); } .load-more-button:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* Retention Manager Mode Toggle */ .retention-mode-section { margin: 20px 0 30px 0; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .retention-mode-section h3 { margin-top: 0; color: white; margin-bottom: 15px; } .mode-toggle-container { background: rgba(255, 255, 255, 0.95); padding: 20px; border-radius: 6px; } .mode-status { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; } .mode-label { font-weight: 600; color: #555; font-size: 1.1em; } .mode-badge { padding: 8px 16px; border-radius: 20px; font-weight: 700; font-size: 1em; letter-spacing: 0.5px; } .mode-badge.dry-run { background: #e3f2fd; color: #1976D2; border: 2px solid #1976D2; } .mode-badge.full-active { background: #fff3cd; color: #856404; border: 2px solid #ffc107; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); } 50% { box-shadow: 0 0 0 8px rgba(255, 193, 7, 0); } } .mode-description { margin: 15px 0; padding: 12px; background: #f5f5f5; border-left: 4px solid #2196F3; border-radius: 4px; } .mode-description p { margin: 0; color: #555; font-size: 0.95em; line-height: 1.5; } .mode-toggle-button { width: 100%; padding: 12px 24px; background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%); color: white; border: none; border-radius: 6px; font-size: 1em; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-top: 10px; } .mode-toggle-button:hover { background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%); box-shadow: 0 4px 8px rgba(0,0,0,0.15); transform: translateY(-1px); } .mode-toggle-button:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .mode-toggle-button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .mode-toggle-button.active { background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%); } .mode-toggle-button.active:hover { background: linear-gradient(135deg, #f57c00 0%, #ef6c00 100%); } .canary-monitoring { padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .canary-monitoring h2 { margin-top: 0; color: #333; border-bottom: 2px solid #FF9800; padding-bottom: 10px; } .canary-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin: 20px 0; } .overview-stat { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #000; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .overview-stat.success { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: #000; } .overview-stat.failed { background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%); color: #000; } .stat-value { font-size: 2.5em; font-weight: bold; margin-bottom: 5px; color: #000; } .stat-label { font-size: 0.9em; opacity: 1; color: #000; } .canaries-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; margin: 30px 0; } .canary-card { background: white; border: 2px solid #e0e0e0; border-radius: 8px; padding: 20px; transition: all 0.3s ease; } .canary-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); transform: translateY(-2px); } .canary-card.status-success { border-left: 4px solid #4CAF50; } .canary-card.status-failed { border-left: 4px solid #f44336; } .canary-card.status-running { border-left: 4px solid #2196F3; } .canary-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; } .canary-name { font-size: 1.1em; font-weight: 600; color: #333; } .canary-status { padding: 4px 12px; border-radius: 12px; font-size: 0.85em; font-weight: 600; text-transform: uppercase; } .canary-status.status-running { background: #e3f2fd; color: #1976D2; } .canary-status.status-success { background: #e8f5e9; color: #2e7d32; } .canary-status.status-failed { background: #ffebee; color: #c62828; } .canary-details { margin: 15px 0; } .detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; } .detail-label { font-weight: 600; color: #666; font-size: 0.9em; } .detail-value { color: #333; font-size: 0.9em; } .detail-value.status-success { color: #4CAF50; font-weight: 600; } .detail-value.status-failed { color: #f44336; font-weight: 600; } .canary-schedule { margin: 15px 0; padding: 10px; background: #f9f9f9; border-radius: 4px; font-size: 0.85em; color: #666; } .btn-run-canary { width: 100%; padding: 10px; background: #2196F3; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; transition: background 0.3s ease; margin-top: 10px; } .btn-run-canary:hover:not(:disabled) { background: #1976D2; } .btn-run-canary:disabled { background: #ccc; cursor: not-allowed; } .no-canaries { text-align: center; padding: 40px; color: #999; font-size: 1.1em; } .canary-info { background: #fff3e0; padding: 15px; border-radius: 6px; border-left: 4px solid #FF9800; margin-top: 30px; } .canary-info h4 { margin-top: 0; color: #e65100; } .canary-info ul { margin: 10px 0 0 0; padding-left: 20px; } .canary-info li { margin: 8px 0; color: #555; } .canary-loading, .canary-error { padding: 20px; text-align: center; font-size: 1.1em; } .canary-error { color: #f44336; } .canary-error-container { padding: 20px; background: #fff3cd; border: 2px solid #ffc107; border-radius: 8px; margin: 20px; } .canary-error-help { background: white; padding: 20px; border-radius: 6px; margin-top: 20px; } .canary-error-help h4 { color: #e65100; margin-top: 15px; margin-bottom: 10px; } .canary-error-help p { color: #555; margin: 10px 0; } .canary-error-help ul, .canary-error-help ol { margin: 10px 0; padding-left: 25px; } .canary-error-help li { margin: 8px 0; color: #555; } .canary-error-help strong { color: #333; } .error-note { background: #e3f2fd; padding: 12px; border-left: 4px solid #2196F3; border-radius: 4px; margin-top: 15px; font-size: 0.95em; } .no-canaries-hint { font-size: 0.9em !important; color: #888 !important; max-width: 600px; margin: 15px auto 0 auto !important; } .security-checklist { padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .security-checklist h2 { margin-top: 0; color: #333; border-bottom: 2px solid #f44336; padding-bottom: 10px; } .checklist-overview { margin: 20px 0; } .overview-card { background: #f9f9f9; padding: 20px; border-radius: 6px; } .overview-card h3 { margin-top: 0; color: #555; } .checks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-top: 15px; } .check-item { background: white; padding: 15px; border-radius: 6px; border-left: 4px solid #ccc; transition: all 0.3s ease; } .check-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .check-item.status-ok { border-left-color: #4CAF50; } .check-item.status-warning { border-left-color: #ff9800; } .check-item.status-error { border-left-color: #f44336; } .check-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .check-icon { font-size: 1.5em; } .check-name { font-weight: 600; color: #333; text-transform: capitalize; } .check-message { color: #666; font-size: 0.9em; margin-left: 35px; } .validation-section { margin: 30px 0; padding: 20px; background: #e3f2fd; border-radius: 6px; border-left: 4px solid #2196F3; } .validation-section h3 { margin-top: 0; color: #1976D2; } .validation-section p { color: #555; margin: 10px 0 15px 0; } .btn-validate { padding: 12px 24px; background: #2196F3; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; transition: background 0.3s ease; font-size: 1em; } .btn-validate:hover:not(:disabled) { background: #1976D2; } .btn-validate:disabled { background: #ccc; cursor: not-allowed; } .validation-results { margin: 30px 0; padding: 20px; background: #f9f9f9; border-radius: 6px; } .validation-results h3 { margin-top: 0; color: #555; } .results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-top: 15px; } .result-item { background: white; padding: 15px; border-radius: 6px; border-left: 4px solid #ccc; } .result-item.status-ok { border-left-color: #4CAF50; } .result-item.status-warning { border-left-color: #ff9800; } .result-item.status-error { border-left-color: #f44336; } .result-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .result-icon { font-size: 1.5em; } .result-name { font-weight: 600; color: #333; text-transform: capitalize; } .result-message { color: #666; font-size: 0.9em; margin-left: 35px; } .checklist-info { background: #fff3e0; padding: 15px; border-radius: 6px; border-left: 4px solid #FF9800; margin-top: 30px; } .checklist-info h4 { margin-top: 0; color: #e65100; } .checklist-info ul { margin: 10px 0 0 0; padding-left: 20px; } .checklist-info li { margin: 8px 0; color: #555; } .security-loading, .security-error { padding: 20px; text-align: center; font-size: 1.1em; } .security-error { background: #ffebee; border-radius: 6px; border-left: 4px solid #f44336; padding: 20px; margin: 20px 0; } .security-error h3 { color: #c62828; margin-top: 0; } .security-error p { color: #d32f2f; font-weight: 500; margin: 15px 0; } .error-help { background: white; padding: 15px; border-radius: 4px; margin-top: 15px; text-align: left; } .error-help h4 { color: #555; margin-top: 0; } .error-help ul { margin: 10px 0; padding-left: 20px; } .error-help li { margin: 8px 0; color: #666; } .btn-retry { padding: 10px 20px; background: #2196F3; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; margin-top: 15px; transition: background 0.3s ease; } .btn-retry:hover { background: #1976D2; } .system-health { padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .system-health h2 { margin-top: 0; color: #333; border-bottom: 2px solid #4CAF50; padding-bottom: 10px; } .health-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin: 20px 0; } .overview-stat { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .stat-icon { font-size: 2em; margin-bottom: 10px; } .stat-label { font-size: 0.9em; opacity: 1; margin-bottom: 8px; color: #fff; } .system-health .stat-value { font-size: 0.75em; font-weight: bold; text-transform: capitalize; } .system-health .stat-value.health-ok { color: #c8e6c9; } .system-health .stat-value.health-warning { color: #ffe082; } .system-health .stat-value.health-error { color: #ffcdd2; } .health-tabs { display: flex; gap: 10px; margin: 30px 0 20px 0; border-bottom: 2px solid #e0e0e0; flex-wrap: wrap; } .tab-btn { padding: 12px 24px; background: transparent; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-weight: 600; color: #666; transition: all 0.3s ease; } .tab-btn:hover { color: #333; background: #f5f5f5; } .tab-btn.active { color: #4CAF50; border-bottom-color: #4CAF50; } .health-content { min-height: 300px; padding: 20px 0; } .overview-content { text-align: center; padding: 40px 20px; } .overview-content h3 { color: #4CAF50; margin-bottom: 15px; } .overview-content p { color: #666; font-size: 1.1em; margin-bottom: 20px; } .refresh-info { background: #e8f5e9; padding: 10px; border-radius: 4px; color: #2e7d32; font-size: 0.9em; display: inline-block; } .health-table { overflow-x: auto; background: #f9f9f9; border-radius: 6px; padding: 15px; } .health-table table { width: 100%; border-collapse: collapse; background: white; } .health-table th { background: #f5f5f5; padding: 12px; text-align: left; font-weight: 600; color: #555; border-bottom: 2px solid #ddd; white-space: normal; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; } .health-table td { padding: 10px 12px; border-bottom: 1px solid #eee; white-space: normal; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-width: 300px; } .health-table tr:hover { background: #f9f9f9; } .func-name, .table-name, .bucket-name, .api-name { font-family: 'Courier New', monospace; font-size: 0.9em; color: #333; word-break: break-all; max-width: 300px; } .error-count { color: #f44336; font-weight: 600; } .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 12px; font-size: 0.85em; font-weight: 600; } .status-badge.health-ok { background: #e8f5e9; color: #2e7d32; } .status-badge.health-warning { background: #fff3e0; color: #e65100; } .status-badge.health-error { background: #ffebee; color: #c62828; } .status-badge.health-unknown { background: #f5f5f5; color: #666; } .health-info { background: #e3f2fd; padding: 15px; border-radius: 6px; border-left: 4px solid #2196F3; margin-top: 30px; } .health-info h4 { margin-top: 0; color: #1976D2; } .health-info ul { margin: 10px 0 0 0; padding-left: 20px; } .health-info li { margin: 8px 0; color: #555; } .health-loading { padding: 20px; text-align: center; font-size: 1.1em; } .lambda-content h3, .dynamodb-content h3, .s3-content h3, .api-content h3 { color: #555; margin-bottom: 20px; } .load-more-btn { display: block; margin: 12px auto 0; padding: 8px 24px; background: #2563eb; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 500; } .load-more-btn:hover { background: #1d4ed8; } .all-loaded { text-align: center; margin-top: 10px; font-size: 0.8rem; color: #6b7280; } .backup-management { padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .backup-management h2 { margin-top: 0; color: #333; border-bottom: 2px solid #9C27B0; padding-bottom: 10px; } .backup-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0; } .overview-card { background: #f9f9f9; padding: 20px; border-radius: 6px; } .overview-card h3 { margin-top: 0; color: #555; margin-bottom: 15px; } .backup-details { background: white; padding: 15px; border-radius: 4px; } .detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; } .detail-row:last-child { border-bottom: none; } .detail-label { font-weight: 600; color: #666; font-size: 0.9em; } .detail-value { color: #333; font-size: 0.9em; } .detail-value.status-available { color: #4CAF50; font-weight: 600; } .detail-value.status-creating { color: #2196F3; font-weight: 600; } .no-backup { text-align: center; padding: 20px; color: #999; } .backup-notice { background: #fff9c4; border: 1px solid #fbc02d; border-radius: 4px; padding: 12px; margin-top: 15px; } .backup-notice p { margin: 0; color: #f57f17; font-size: 0.9em; line-height: 1.5; } .backup-types-info { background: #e8f5e9; border: 1px solid #4caf50; border-radius: 4px; padding: 12px; margin-top: 15px; font-size: 0.9em; } .backup-types-info strong { color: #2e7d32; } .backup-types-info ul { color: #1b5e20; } .backup-types-info li { margin: 4px 0; } .backup-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .stat-item { background: white; padding: 15px; border-radius: 4px; text-align: center; } .stat-value { font-size: 2em; font-weight: bold; color: #9C27B0; margin-bottom: 5px; } .stat-label { font-size: 0.85em; color: #666; } .manual-backup-section { margin: 30px 0; padding: 20px; background: #f3e5f5; border-radius: 6px; border-left: 4px solid #9C27B0; } .manual-backup-section h3 { margin-top: 0; color: #6a1b9a; } .manual-backup-section p { color: #555; margin: 10px 0 15px 0; } .backup-controls { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; } .table-select { flex: 1; min-width: 200px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: white; font-size: 1em; cursor: pointer; } .table-select:disabled { opacity: 0.5; cursor: not-allowed; } .btn-backup { padding: 10px 24px; background: #9C27B0; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; transition: background 0.3s ease; font-size: 1em; } .btn-backup:hover:not(:disabled) { background: #7B1FA2; } .btn-backup:disabled { background: #ccc; cursor: not-allowed; } .backup-history-section { margin: 30px 0; } .backup-history-section h3 { color: #555; margin-bottom: 15px; } .backup-table { overflow-x: auto; background: #f9f9f9; border-radius: 6px; padding: 15px; } .backup-table table { width: 100%; border-collapse: collapse; background: white; } .backup-table th { background: #f5f5f5; padding: 12px; text-align: left; font-weight: 600; color: #555; border-bottom: 2px solid #ddd; white-space: normal; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; } .backup-table td { padding: 10px 12px; border-bottom: 1px solid #eee; white-space: normal; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-width: 250px; } .backup-table tr:hover { background: #f9f9f9; } .backup-name { font-family: 'Courier New', monospace; font-size: 0.85em; color: #333; max-width: 300px; word-wrap: break-word; word-break: break-all; } .type-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 0.85em; font-weight: 600; } .type-badge.type-manual { background: #e1bee7; color: #6a1b9a; } .type-badge.type-auto { background: #c5cae9; color: #283593; } .type-badge.type-system { background: #b3e5fc; color: #01579b; } .type-badge.type-aws-backup { background: #ffecb3; color: #ff6f00; } .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 12px; font-size: 0.85em; font-weight: 600; } .status-badge.status-available { background: #e8f5e9; color: #2e7d32; } .status-badge.status-creating { background: #e3f2fd; color: #1976D2; } .status-badge.status-deleted { background: #f5f5f5; color: #666; } .no-history { text-align: center; padding: 40px 20px; color: #999; } .no-history p { margin: 10px 0; font-size: 1.1em; } .no-history-hint { font-size: 0.9em !important; color: #666 !important; max-width: 600px; margin: 15px auto 0 auto !important; line-height: 1.6; } .backup-info { background: #e8eaf6; padding: 15px; border-radius: 6px; border-left: 4px solid #3F51B5; margin-top: 30px; } .backup-info h4 { margin-top: 0; color: #283593; } .backup-info ul { margin: 10px 0 0 0; padding-left: 20px; } .backup-info li { margin: 8px 0; color: #555; } .pitr-info { background: #fff3e0; padding: 15px; border-radius: 6px; border-left: 4px solid #FF9800; margin-top: 20px; } .pitr-info h4 { margin-top: 0; color: #e65100; } .pitr-info p { color: #555; margin: 10px 0 0 0; line-height: 1.6; } .backup-loading, .backup-error { padding: 20px; text-align: center; font-size: 1.1em; } .backup-error { background: #ffebee; border-radius: 6px; border-left: 4px solid #f44336; padding: 20px; margin: 20px 0; } .backup-error h3 { color: #c62828; margin-top: 0; } .backup-error p { color: #d32f2f; font-weight: 500; margin: 15px 0; } .error-help { background: white; padding: 15px; border-radius: 4px; margin-top: 15px; text-align: left; } .error-help h4 { color: #555; margin-top: 0; } .error-help ul { margin: 10px 0; padding-left: 20px; } .error-help li { margin: 8px 0; color: #666; } .btn-retry { padding: 10px 20px; background: #2196F3; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; margin-top: 15px; transition: background 0.3s ease; } .btn-retry:hover { background: #1976D2; } .analytics-dashboard { padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .analytics-dashboard h2 { margin-top: 0; color: #333; border-bottom: 2px solid #3F51B5; padding-bottom: 10px; } .analytics-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin: 20px 0; } .metric-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .metric-card.success { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); } .metric-card.warning { background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%); } .metric-card.info { background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%); } .metric-card.danger { background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%); } .metric-value { font-size: 2.5em; font-weight: bold; margin-bottom: 8px; } .metric-label { font-size: 0.9em; opacity: 0.9; } .analytics-tabs { display: flex; gap: 10px; margin: 30px 0 20px 0; border-bottom: 2px solid #e0e0e0; flex-wrap: wrap; } .tab-btn { padding: 12px 24px; background: transparent; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-weight: 600; color: #666; transition: all 0.3s ease; } .tab-btn:hover { color: #333; background: #f5f5f5; } .tab-btn.active { color: #3F51B5; border-bottom-color: #3F51B5; } .analytics-content { min-height: 400px; padding: 20px 0; } .overview-content h3, .growth-content h3, .usage-content h3, .subscriptions-content h3, .geography-content h3 { color: #555; margin-bottom: 20px; } .overview-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .stat-group { background: #f9f9f9; padding: 20px; border-radius: 6px; } .stat-group h4 { margin-top: 0; color: #3F51B5; margin-bottom: 15px; } .stat-group p { margin: 10px 0; color: #666; } .stat-group strong { color: #333; font-size: 1.1em; } .growth-chart { display: flex; justify-content: space-around; align-items: flex-end; height: 250px; background: #f9f9f9; padding: 20px; border-radius: 6px; margin-bottom: 20px; } .growth-bar { display: flex; flex-direction: column; align-items: center; gap: 10px; } .bar-container { display: flex; gap: 5px; align-items: flex-end; } .bar { width: 30px; display: flex; align-items: flex-end; justify-content: center; color: white; font-weight: bold; font-size: 0.8em; padding: 5px 0; border-radius: 4px 4px 0 0; transition: all 0.3s ease; } .bar:hover { opacity: 0.8; } .orgs-bar { background: linear-gradient(to top, #3F51B5, #5C6BC0); } .users-bar { background: linear-gradient(to top, #4CAF50, #66BB6A); } .bar-label { font-size: 0.85em; color: #666; font-weight: 600; } .chart-legend { display: flex; justify-content: center; gap: 30px; margin-top: 20px; } .legend-item { display: flex; align-items: center; gap: 10px; } .legend-color { width: 20px; height: 20px; border-radius: 4px; } .legend-color.orgs { background: linear-gradient(135deg, #3F51B5, #5C6BC0); } .legend-color.users { background: linear-gradient(135deg, #4CAF50, #66BB6A); } .usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .usage-card { background: #f9f9f9; padding: 30px; border-radius: 8px; text-align: center; transition: all 0.3s ease; } .usage-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); transform: translateY(-2px); } .usage-icon { font-size: 3em; margin-bottom: 15px; } .usage-value { font-size: 2.5em; font-weight: bold; color: #3F51B5; margin-bottom: 10px; } .usage-label { color: #666; font-weight: 600; } .subscription-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 30px; } .sub-card { background: #f9f9f9; padding: 20px; border-radius: 6px; text-align: center; } .sub-card h4 { margin-top: 0; color: #555; font-size: 0.9em; } .sub-count { font-size: 2.5em; font-weight: bold; color: #3F51B5; margin: 10px 0; } .sub-price { color: #666; font-size: 0.9em; } .revenue-summary { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: white; padding: 30px; border-radius: 8px; text-align: center; } .revenue-summary h4 { margin-top: 0; font-size: 1.2em; opacity: 0.9; } .revenue-amount { font-size: 3em; font-weight: bold; margin-top: 10px; } .geo-table { overflow-x: auto; background: #f9f9f9; border-radius: 6px; padding: 15px; } .geo-table table { width: 100%; border-collapse: collapse; background: white; } .geo-table th { background: #f5f5f5; padding: 12px; text-align: left; font-weight: 600; color: #555; border-bottom: 2px solid #ddd; } .geo-table td { padding: 10px 12px; border-bottom: 1px solid #eee; } .geo-table tr:hover { background: #f9f9f9; } .region-name { font-weight: 600; color: #3F51B5; } .percentage-bar { position: relative; width: 100%; height: 30px; background: #e0e0e0; border-radius: 4px; overflow: hidden; } .percentage-fill { height: 100%; background: linear-gradient(90deg, #3F51B5, #5C6BC0); transition: width 0.3s ease; } .percentage-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 600; color: #333; font-size: 0.9em; } .analytics-info { background: #e8eaf6; padding: 15px; border-radius: 6px; border-left: 4px solid #3F51B5; margin-top: 30px; } .analytics-info h4 { margin-top: 0; color: #283593; } .analytics-info ul { margin: 10px 0 0 0; padding-left: 20px; } .analytics-info li { margin: 8px 0; color: #555; } .analytics-loading, .analytics-error { padding: 20px; text-align: center; font-size: 1.1em; } .analytics-error { background: #ffebee; border-radius: 6px; border-left: 4px solid #f44336; padding: 20px; margin: 20px 0; } .analytics-error h3 { color: #c62828; margin-top: 0; } .analytics-error p { color: #d32f2f; font-weight: 500; margin: 15px 0; } .error-help { background: white; padding: 15px; border-radius: 4px; margin-top: 15px; text-align: left; } .error-help h4 { color: #555; margin-top: 0; } .error-help ul { margin: 10px 0; padding-left: 20px; } .error-help li { margin: 8px 0; color: #666; } .btn-retry { padding: 10px 20px; background: #2196F3; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; margin-top: 15px; transition: background 0.3s ease; } .btn-retry:hover { background: #1976D2; } .testing-suite { padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .testing-suite h2 { margin-top: 0; color: #333; border-bottom: 2px solid #00BCD4; padding-bottom: 10px; } .test-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin: 20px 0; } .overview-stat { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .overview-stat.success { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); } .overview-stat.danger { background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%); } .stat-value { font-size: 2.5em; font-weight: bold; margin-bottom: 8px; color: #000; } .stat-label { font-size: 0.9em; opacity: 0.9; color: #000; } .test-categories { margin: 30px 0; } .test-categories h3 { color: #555; margin-bottom: 20px; } .categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .category-card { background: #f9f9f9; border-radius: 8px; padding: 20px; transition: all 0.3s ease; } .category-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); transform: translateY(-2px); } .category-header h4 { margin-top: 0; color: #00BCD4; margin-bottom: 8px; } .category-header p { color: #666; font-size: 0.9em; margin: 0 0 15px 0; } .category-tests { margin: 15px 0; } .test-item { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 5px 0; background: white; border-radius: 4px; border-left: 3px solid #ccc; } .test-item.status-passed { border-left-color: #4CAF50; } .test-item.status-failed { border-left-color: #f44336; } .test-item.status-running { border-left-color: #2196F3; } .test-icon { font-size: 1.2em; } .test-name { font-size: 0.9em; color: #333; } .btn-run-tests { width: 100%; padding: 10px; background: #00BCD4; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; transition: background 0.3s ease; margin-top: 15px; } .btn-run-tests:hover:not(:disabled) { background: #0097A7; } .btn-run-tests:disabled { background: #ccc; cursor: not-allowed; } .test-results { margin: 30px 0; } .test-results h3 { color: #555; margin-bottom: 20px; } .results-table { overflow-x: auto; background: #f9f9f9; border-radius: 6px; padding: 15px; } .results-table table { width: 100%; border-collapse: collapse; background: white; } .results-table th { background: #f5f5f5; padding: 12px; text-align: left; font-weight: 600; color: #555; border-bottom: 2px solid #ddd; white-space: normal; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; } .results-table td { padding: 10px 12px; border-bottom: 1px solid #eee; white-space: normal; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-width: 250px; } .results-table tr:hover { background: #f9f9f9; } .category-name { font-weight: 600; color: #00BCD4; } .passed-count { color: #4CAF50; font-weight: 600; } .failed-count { color: #f44336; font-weight: 600; } .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 12px; font-size: 0.85em; font-weight: 600; } .status-badge.status-passed { background: #e8f5e9; color: #2e7d32; } .status-badge.status-failed { background: #ffebee; color: #c62828; } .status-badge.status-running { background: #e3f2fd; color: #1976D2; } .no-results { text-align: center; padding: 40px; color: #999; font-size: 1.1em; } .testing-info { background: #e0f7fa; padding: 15px; border-radius: 6px; border-left: 4px solid #00BCD4; margin-top: 30px; } .testing-info h4 { margin-top: 0; color: #00838F; } .testing-info ul { margin: 10px 0 0 0; padding-left: 20px; } .testing-info li { margin: 8px 0; color: #555; } .testing-schedule { background: #fff3e0; padding: 15px; border-radius: 6px; border-left: 4px solid #FF9800; margin-top: 20px; } .testing-schedule h4 { margin-top: 0; color: #e65100; } .testing-schedule p { color: #555; margin: 10px 0; } .schedule-options { display: flex; gap: 10px; margin: 15px 0; flex-wrap: wrap; } .schedule-btn { padding: 10px 20px; background: #FF9800; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; transition: background 0.3s ease; } .schedule-btn:hover { background: #F57C00; } .schedule-btn:active { background: #E65100; transform: scale(0.98); } .schedule-note { font-size: 0.85em; color: #666; font-style: italic; margin-top: 10px; } .testing-loading, .testing-error { padding: 20px; text-align: center; font-size: 1.1em; } .testing-error { background: #ffebee; border-radius: 6px; border-left: 4px solid #f44336; padding: 20px; margin: 20px 0; } .testing-error h3 { color: #c62828; margin-top: 0; } .testing-error p { color: #d32f2f; font-weight: 500; margin: 15px 0; } .error-help { background: white; padding: 15px; border-radius: 4px; margin-top: 15px; text-align: left; } .error-help h4 { color: #555; margin-top: 0; } .error-help ul { margin: 10px 0; padding-left: 20px; } .error-help li { margin: 8px 0; color: #666; } .btn-retry { padding: 10px 20px; background: #2196F3; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; margin-top: 15px; transition: background 0.3s ease; } .btn-retry:hover { background: #1976D2; } .user-guide-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 20px; } .user-guide-modal { background: white; border-radius: 12px; width: 100%; max-width: 1200px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .user-guide-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 30px; border-bottom: 2px solid #e0e0e0; } .user-guide-header h2 { margin: 0; font-size: 24px; color: #232f3e; } .close-button { background: none; border: none; font-size: 32px; color: #666; cursor: pointer; padding: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s; } .close-button:hover { background: #f0f0f0; color: #232f3e; } .user-guide-content { display: flex; flex: 1; overflow: hidden; } .user-guide-sidebar { width: 280px; background: #f8f9fa; border-right: 1px solid #e0e0e0; overflow-y: auto; padding: 20px 0; } .user-guide-sidebar nav { display: flex; flex-direction: column; } .user-guide-sidebar button { background: none; border: none; padding: 12px 24px; text-align: left; cursor: pointer; font-size: 14px; color: #232f3e; transition: all 0.2s; border-left: 3px solid transparent; } .user-guide-sidebar button:hover { background: #e8eaed; } .user-guide-sidebar button.active { background: #fff; border-left-color: #ff9900; font-weight: 600; color: #ff9900; } .section-group { margin: 16px 0; } .section-group-title { padding: 8px 24px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #666; letter-spacing: 0.5px; } .user-guide-main { flex: 1; overflow-y: auto; padding: 30px 40px; } .guide-section-content { max-width: 800px; } .guide-section-content h3 { margin: 0 0 20px 0; font-size: 28px; color: #232f3e; border-bottom: 3px solid #ff9900; padding-bottom: 12px; } .guide-section-content h4 { margin: 24px 0 12px 0; font-size: 18px; color: #232f3e; font-weight: 600; } .guide-section-content p { margin: 12px 0; line-height: 1.6; color: #444; font-size: 15px; } .guide-section-content ul, .guide-section-content ol { margin: 12px 0; padding-left: 24px; line-height: 1.8; color: #444; } .guide-section-content li { margin: 8px 0; font-size: 15px; } .guide-section-content strong { color: #232f3e; font-weight: 600; } .guide-section-content code { background: #f4f4f4; padding: 2px 6px; border-radius: 3px; font-family: 'Courier New', monospace; font-size: 14px; color: #d63384; } /* Scrollbar styling */ .user-guide-sidebar::-webkit-scrollbar, .user-guide-main::-webkit-scrollbar { width: 8px; } .user-guide-sidebar::-webkit-scrollbar-track, .user-guide-main::-webkit-scrollbar-track { background: #f1f1f1; } .user-guide-sidebar::-webkit-scrollbar-thumb, .user-guide-main::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; } .user-guide-sidebar::-webkit-scrollbar-thumb:hover, .user-guide-main::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* Responsive design */ @media (max-width: 768px) { .user-guide-modal { max-width: 100%; max-height: 100vh; border-radius: 0; } .user-guide-content { flex-direction: column; } .user-guide-sidebar { width: 100%; max-height: 200px; border-right: none; border-bottom: 1px solid #e0e0e0; } .user-guide-main { padding: 20px; } .guide-section-content h3 { font-size: 22px; } } .superadmin-user-management { padding: 20px; max-width: 1400px; margin: 0 auto; } .superadmin-users-loading { text-align: center; padding: 40px; font-size: 18px; color: #666; } .header-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .header-section h2 { margin: 0; color: #333; } .btn-add-user { background-color: #28a745; color: white; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 600; transition: background-color 0.2s; } .btn-add-user:hover { background-color: #218838; } .error-message { background-color: #f8d7da; color: #721c24; padding: 15px; border-radius: 6px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; } .btn-retry { background-color: #007bff; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; } .users-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 30px; position: relative; } .users-table { background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); min-width: 1300px; width: 100%; } .users-table table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 1300px; } .users-table thead { background-color: #f8f9fa; } .users-table th { padding: 15px 10px; text-align: left; font-weight: 600; color: #495057; border-bottom: 2px solid #dee2e6; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; font-size: 13px; white-space: normal; line-height: 1.3; } .users-table td { padding: 15px 10px; border-bottom: 1px solid #dee2e6; word-wrap: break-word; overflow-wrap: break-word; vertical-align: top; overflow: hidden; text-overflow: ellipsis; } /* Column widths - adjusted for wider table */ .users-table th:nth-child(1), .users-table td:nth-child(1) { width: 180px; } .users-table th:nth-child(2), .users-table td:nth-child(2) { width: 280px; } .users-table th:nth-child(3), .users-table td:nth-child(3) { width: 140px; } .users-table th:nth-child(4), .users-table td:nth-child(4) { width: 150px; } .users-table th:nth-child(5), .users-table td:nth-child(5) { width: 160px; } .users-table th:nth-child(6), .users-table td:nth-child(6) { width: 160px; } .users-table th:nth-child(7), .users-table td:nth-child(7) { width: 120px; } .users-table th:nth-child(8), .users-table td:nth-child(8) { width: 110px; } .users-table tr:hover { background-color: #f8f9fa; } .users-table tr.inactive { opacity: 0.6; background-color: #f5f5f5; } .mono { font-family: 'Courier New', monospace; font-size: 12px; color: #666; word-break: break-all; } .status-badge { padding: 4px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; } .status-badge.active { background-color: #d4edda; color: #155724; } .status-badge.inactive { background-color: #f8d7da; color: #721c24; } .btn-remove { background-color: #dc3545; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; transition: background-color 0.2s; } .btn-remove:hover { background-color: #c82333; } .no-users { text-align: center; padding: 40px; color: #666; font-style: italic; } .info-section { background-color: #e7f3ff; border-left: 4px solid #007bff; padding: 20px; border-radius: 6px; } .info-section h4 { margin-top: 0; color: #004085; } .info-section ol { margin: 15px 0; padding-left: 20px; } .info-section li { margin-bottom: 8px; color: #004085; } .info-section .warning { background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; margin-top: 15px; border-radius: 4px; color: #856404; } /* Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .modal-content { background: white; border-radius: 8px; padding: 30px; max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #dee2e6; } .modal-header h3 { margin: 0; color: #333; } .btn-close { background: none; border: none; font-size: 32px; color: #999; cursor: pointer; padding: 0; width: 32px; height: 32px; line-height: 1; transition: color 0.2s; } .btn-close:hover { color: #333; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #495057; } .form-group input { width: 100%; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px; box-sizing: border-box; } .form-group input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); } .form-group small { display: block; margin-top: 5px; color: #6c757d; font-size: 12px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 30px; padding-top: 20px; border-top: 1px solid #dee2e6; } .btn-cancel { background-color: #6c757d; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color 0.2s; } .btn-cancel:hover { background-color: #5a6268; } .btn-cancel:disabled { opacity: 0.6; cursor: not-allowed; } .btn-submit { background-color: #28a745; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background-color 0.2s; } .btn-submit:hover { background-color: #218838; } .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; } /* Responsive styles */ @media (max-width: 1200px) { .users-table th:nth-child(2), .users-table td:nth-child(2) { min-width: 180px; } } @media (max-width: 768px) { .superadmin-user-management { padding: 10px; } .header-section { flex-direction: column; align-items: flex-start; gap: 15px; } .btn-add-user { width: 100%; } .users-table th, .users-table td { padding: 10px 8px; font-size: 13px; } .users-table th:nth-child(1), .users-table td:nth-child(1) { min-width: 130px; } .users-table th:nth-child(2), .users-table td:nth-child(2) { min-width: 160px; } .mono { font-size: 11px; } .status-badge { font-size: 11px; padding: 3px 8px; } .btn-remove { font-size: 12px; padding: 5px 10px; } .modal-content { padding: 20px; width: 95%; } .info-section { padding: 15px; } .info-section ol { padding-left: 15px; } } .health-alerts-container { padding: 20px; background: #f5f5f5; border-radius: 8px; } .health-alerts-header { margin-bottom: 30px; } .health-alerts-header h2 { margin: 0 0 10px 0; color: #333; } .health-alerts-header p { margin: 0; color: #666; } .alert-config-section { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; } .alert-config-section h3 { margin: 0 0 20px 0; color: #333; } .config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 20px; } .config-item { display: flex; flex-direction: column; } .config-item.full-width { grid-column: 1 / -1; } .config-item label { margin-bottom: 5px; font-weight: 500; color: #555; } .config-item input[type="number"], .config-item input[type="text"] { padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .config-item input[type="checkbox"] { margin-right: 8px; } .save-config-btn { background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; } .save-config-btn:hover { background: #0056b3; } .save-config-btn:disabled { background: #ccc; cursor: not-allowed; } .active-alerts-section, .alert-history-section { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; } .active-alerts-section h3, .alert-history-section h3 { margin: 0 0 20px 0; color: #333; } .no-alerts { padding: 40px; text-align: center; color: #28a745; font-size: 18px; background: #f0f9f4; border-radius: 8px; } .alerts-list { display: flex; flex-direction: column; gap: 15px; } .alert-card { padding: 15px; border-radius: 8px; border-left: 4px solid; } .alert-card.severity-critical { background: #fff5f5; border-left-color: #dc3545; } .alert-card.severity-high { background: #fff8f0; border-left-color: #fd7e14; } .alert-card.severity-medium { background: #fffbf0; border-left-color: #ffc107; } .alert-card.severity-low { background: #f0f9ff; border-left-color: #17a2b8; } .alert-header { display: flex; justify-content: space-between; margin-bottom: 10px; } .alert-severity { font-weight: bold; font-size: 12px; padding: 4px 8px; border-radius: 4px; background: rgba(0,0,0,0.1); } .alert-time { font-size: 12px; color: #666; } .alert-title { font-weight: bold; font-size: 16px; margin-bottom: 8px; color: #333; } .alert-message { color: #555; margin-bottom: 10px; line-height: 1.5; } .alert-metrics { display: flex; gap: 15px; margin-bottom: 10px; flex-wrap: wrap; } .metric { font-size: 13px; color: #666; } .metric strong { color: #333; } .acknowledge-btn { background: #28a745; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 13px; } .acknowledge-btn:hover { background: #218838; } .history-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; } .stat { display: flex; flex-direction: column; padding: 15px; background: #f8f9fa; border-radius: 8px; } .stat-label { font-size: 13px; color: #666; margin-bottom: 5px; } .stat-value { font-size: 24px; font-weight: bold; color: #333; } .stat-value.critical { color: #dc3545; } .stat-value.high { color: #fd7e14; } .stat-value.medium { color: #ffc107; } .health-alerts-loading { padding: 40px; text-align: center; color: #666; } .advanced-analytics-container { padding: 20px; background: #f5f5f5; border-radius: 8px; } .analytics-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .analytics-header h2 { margin: 0; color: #333; } .time-range-selector { display: flex; gap: 10px; } .time-range-selector button { padding: 8px 16px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.2s; } .time-range-selector button:hover { background: #f0f0f0; } .time-range-selector button.active { background: #007bff; color: white; border-color: #007bff; } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .kpi-card { background: white; padding: 20px; border-radius: 8px; display: flex; gap: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .kpi-icon { font-size: 36px; } .kpi-content { flex: 1; } .kpi-label { font-size: 13px; color: #666; margin-bottom: 5px; } .kpi-value { font-size: 28px; font-weight: bold; color: #333; margin-bottom: 5px; } .kpi-trend { font-size: 12px; font-weight: 500; } .kpi-trend.positive { color: #28a745; } .kpi-trend.negative { color: #dc3545; } .analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; margin-bottom: 20px; } .analytics-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .analytics-card h3 { margin: 0 0 20px 0; color: #333; font-size: 18px; } .chart-card { min-height: 300px; } .chart-placeholder { height: 250px; display: flex; align-items: flex-end; padding: 10px 0; } .chart-bars { display: flex; gap: 10px; width: 100%; height: 100%; align-items: flex-end; } .bar { flex: 1; background: linear-gradient(to top, #007bff, #0056b3); border-radius: 4px 4px 0 0; position: relative; min-height: 20px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; transition: all 0.3s; } .bar:hover { opacity: 0.8; } .bar.revenue { background: linear-gradient(to top, #28a745, #1e7e34); } .bar-label { position: absolute; bottom: -25px; font-size: 11px; color: #666; white-space: nowrap; } .bar-value { position: absolute; top: -25px; font-size: 12px; font-weight: bold; color: #333; } .top-orgs-list { display: flex; flex-direction: column; gap: 12px; } .org-item { display: flex; align-items: center; gap: 15px; padding: 12px; background: #f8f9fa; border-radius: 6px; } .org-rank { font-size: 20px; font-weight: bold; color: #007bff; min-width: 40px; } .org-info { flex: 1; } .org-name { font-weight: 500; color: #333; margin-bottom: 3px; } .org-plan { font-size: 12px; color: #666; } .org-revenue { font-size: 18px; font-weight: bold; color: #28a745; } .subscription-breakdown { display: flex; flex-direction: column; gap: 15px; } .sub-item { padding: 12px; background: #f8f9fa; border-radius: 6px; } .sub-header { display: flex; justify-content: space-between; margin-bottom: 8px; } .sub-name { font-weight: 500; color: #333; } .sub-count { font-size: 13px; color: #666; } .sub-bar { height: 8px; background: #e9ecef; border-radius: 4px; overflow: hidden; margin-bottom: 8px; } .sub-fill { height: 100%; background: linear-gradient(to right, #007bff, #0056b3); transition: width 0.3s; } .sub-revenue { font-size: 14px; font-weight: 500; color: #28a745; } .predictions-card { grid-column: 1 / -1; } .predictions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .prediction-item { display: flex; gap: 15px; padding: 15px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; color: white; } .prediction-icon { font-size: 32px; } .prediction-content { flex: 1; } .prediction-label { font-size: 13px; opacity: 0.9; margin-bottom: 8px; } .prediction-value { font-size: 28px; font-weight: bold; margin-bottom: 5px; } .prediction-confidence { font-size: 12px; opacity: 0.8; } .usage-metrics-card { grid-column: 1 / -1; } .usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; } .usage-item { display: flex; justify-content: space-between; padding: 15px; background: #f8f9fa; border-radius: 6px; } .usage-label { font-size: 14px; color: #666; } .usage-value { font-size: 18px; font-weight: bold; color: #333; } .analytics-loading { padding: 40px; text-align: center; color: #666; } @media (max-width: 768px) { .analytics-header { flex-direction: column; align-items: flex-start; gap: 15px; } .analytics-grid { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: 1fr; } } .organization-lifecycle-container { padding: 20px; background: #f5f5f5; border-radius: 8px; } .lifecycle-header { margin-bottom: 30px; } .lifecycle-header h2 { margin: 0 0 10px 0; color: #333; } .lifecycle-header p { margin: 0; color: #666; } .lifecycle-controls { display: flex; gap: 15px; margin-bottom: 20px; } .search-input { flex: 1; padding: 10px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .status-filter { padding: 10px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; background: white; cursor: pointer; } .lifecycle-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; } .stat-card { background: white; padding: 15px; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .stat-label { font-size: 13px; color: #666; margin-bottom: 8px; } .stat-value { font-size: 28px; font-weight: bold; color: #333; } .stat-value.active { color: #28a745; } .stat-value.trial { color: #17a2b8; } .stat-value.suspended { color: #ffc107; } .stat-value.cancelled { color: #dc3545; } .organizations-table { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .organizations-table table { width: 100%; border-collapse: collapse; table-layout: fixed; } .organizations-table thead { background: #f8f9fa; } .organizations-table th { padding: 12px 8px; text-align: left; font-weight: 600; color: #333; border-bottom: 2px solid #dee2e6; font-size: 13px; white-space: normal; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; } .organizations-table td { padding: 12px 8px; border-bottom: 1px solid #dee2e6; font-size: 14px; white-space: normal; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-width: 200px; } .organizations-table tbody tr:hover { background: #f8f9fa; } .org-cell { display: flex; flex-direction: column; gap: 3px; } .org-name { font-weight: 500; color: #333; } .org-id { font-size: 11px; color: #999; font-family: monospace; } .status-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 500; } .status-badge.status-active { background: #d4edda; color: #155724; } .status-badge.status-trial { background: #d1ecf1; color: #0c5460; } .status-badge.status-suspended { background: #fff3cd; color: #856404; } .status-badge.status-cancelled { background: #f8d7da; color: #721c24; } .status-badge.status-expired { background: #e2e3e5; color: #383d41; } .lifecycle-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 500; } .lifecycle-badge.stage-onboarding { background: #cfe2ff; color: #084298; } .lifecycle-badge.stage-early { background: #d1e7dd; color: #0f5132; } .lifecycle-badge.stage-growth { background: #fff3cd; color: #664d03; } .lifecycle-badge.stage-mature { background: #e7d6f5; color: #6f42c1; } .action-buttons { display: flex; gap: 8px; } .action-btn { padding: 6px 10px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: all 0.2s; } .action-btn:hover { transform: scale(1.1); } .suspend-btn { background: #ffc107; } .suspend-btn:hover { background: #e0a800; } .reactivate-btn { background: #28a745; } .reactivate-btn:hover { background: #218838; } .cancel-btn { background: #dc3545; } .cancel-btn:hover { background: #c82333; } .extend-btn { background: #17a2b8; } .extend-btn:hover { background: #138496; } .action-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-content { background: white; border-radius: 8px; width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #dee2e6; } .modal-header h3 { margin: 0; color: #333; } .close-btn { background: none; border: none; font-size: 28px; cursor: pointer; color: #999; line-height: 1; } .close-btn:hover { color: #333; } .modal-body { padding: 20px; } .org-details { background: #f8f9fa; padding: 15px; border-radius: 6px; margin-bottom: 20px; } .org-details p { margin: 8px 0; font-size: 14px; } .action-warning { padding: 15px; border-radius: 6px; margin-bottom: 20px; background: #fff3cd; border-left: 4px solid #ffc107; } .action-warning p { margin: 0; color: #856404; font-size: 14px; line-height: 1.5; } .reason-input { margin-bottom: 20px; } .reason-input label { display: block; margin-bottom: 8px; font-weight: 500; color: #333; } .reason-input textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; font-family: inherit; resize: vertical; } .date-picker-input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; font-family: inherit; } .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 20px; border-top: 1px solid #dee2e6; } .cancel-modal-btn { padding: 10px 20px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; font-size: 14px; } .cancel-modal-btn:hover { background: #f8f9fa; } .confirm-action-btn { padding: 10px 20px; border: none; background: #007bff; color: white; border-radius: 4px; cursor: pointer; font-size: 14px; } .confirm-action-btn:hover { background: #0056b3; } .confirm-action-btn:disabled { background: #ccc; cursor: not-allowed; } .lifecycle-loading { padding: 40px; text-align: center; color: #666; } @media (max-width: 768px) { .lifecycle-controls { flex-direction: column; } .organizations-table { overflow-x: auto; } .action-buttons { flex-direction: column; } } .admin-table-container { padding: 20px; background: #f5f5f5; border-radius: 8px; } .admin-table-header { margin-bottom: 20px; } .admin-table-header h2 { margin: 0 0 8px 0; color: #333; } .admin-table-header p { margin: 0; color: #666; font-size: 14px; } .admin-table-stats { display: flex; gap: 15px; margin-bottom: 20px; } .mini-stat { background: white; padding: 12px 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 10px; } .mini-stat-value { font-size: 22px; font-weight: bold; color: #333; } .mini-stat-value.owner-color { color: #6f42c1; } .mini-stat-value.staff-color { color: #0d6efd; } .mini-stat-label { font-size: 13px; color: #666; } .admin-table-controls { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; } .admin-table-search { width: 50%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .admin-table-filter { width: 50%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; background: white; cursor: pointer; } .admin-table-count { font-size: 13px; color: #888; white-space: nowrap; } .admin-table-wrapper { background: white; border-radius: 8px; overflow-x: auto; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .admin-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .admin-table thead { background: #f8f9fa; } .admin-table th { padding: 12px 8px; text-align: left; font-weight: 600; color: #333; border-bottom: 2px solid #dee2e6; font-size: 13px; white-space: normal; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; } .admin-table td { padding: 12px 8px; border-bottom: 1px solid #dee2e6; font-size: 14px; white-space: normal; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-width: 200px; } .admin-table tbody tr:hover { background: #f8f9fa; } .cell-primary { font-weight: 500; color: #333; } .cell-secondary { font-size: 11px; color: #999; font-family: monospace; } .table-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; } .badge-success { background: #d4edda; color: #155724; } .badge-info { background: #d1ecf1; color: #0c5460; } .badge-warning { background: #fff3cd; color: #856404; } .badge-danger { background: #f8d7da; color: #721c24; } .badge-neutral { background: #e2e3e5; color: #383d41; } .badge-owner { background: #e7d6f5; color: #6f42c1; } .badge-staff { background: #cfe2ff; color: #084298; } .warning-indicators { display: flex; gap: 6px; } .indicator { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; } .indicator-sent { background: #d4edda; color: #155724; } .indicator-not-sent { background: #e2e3e5; color: #999; } .permission-indicator { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; font-weight: bold; } .perm-granted { background: #d4edda; color: #155724; } .perm-denied { background: #f8d7da; color: #721c24; } .admin-table-loading { padding: 40px; text-align: center; color: #666; } @media (max-width: 768px) { .admin-table-controls { flex-direction: column; } .admin-table-stats { flex-wrap: wrap; } .admin-table-wrapper { overflow-x: auto; } } .admin-calendar-container { padding: 20px; background: #f5f5f5; border-radius: 8px; } .calendar-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .calendar-nav { display: flex; align-items: center; gap: 12px; } .cal-nav-btn { background: white; border: 1px solid #ddd; border-radius: 4px; padding: 8px 14px; cursor: pointer; font-size: 14px; } .cal-nav-btn:hover { background: #f0f0f0; } .cal-month-title { margin: 0; font-size: 20px; color: #333; min-width: 200px; text-align: center; } .cal-today-btn { background: #007bff; color: white; border: none; border-radius: 4px; padding: 8px 16px; cursor: pointer; font-size: 13px; } .cal-today-btn:hover { background: #0056b3; } .cal-add-btn { background: #28a745; color: white; border: none; border-radius: 4px; padding: 10px 20px; cursor: pointer; font-size: 14px; font-weight: 500; } .cal-add-btn:hover { background: #218838; } .cal-import-btn { background: #17a2b8; color: white; border: none; border-radius: 4px; padding: 10px 20px; cursor: pointer; font-size: 14px; font-weight: 500; display: inline-block; } .cal-import-btn:hover { background: #138496; } .calendar-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; padding: 10px 14px; background: white; border-radius: 6px; font-size: 12px; } .legend-item { display: flex; align-items: center; gap: 4px; color: #555; } .legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .calendar-grid { background: white; border-radius: 8px; overflow-x: auto; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .cal-header-row { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); background: #f8f9fa; border-bottom: 2px solid #dee2e6; } .cal-header-cell { padding: 10px; text-align: center; font-weight: 600; font-size: 13px; color: #495057; } .cal-body { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); } .cal-cell { min-height: 100px; border-right: 1px solid #eee; border-bottom: 1px solid #eee; padding: 6px; cursor: pointer; transition: background 0.15s; } .cal-cell:hover { background: #f8f9fa; } .cal-cell-empty { background: #fafafa; cursor: default; } .cal-cell-empty:hover { background: #fafafa; } .cal-cell-today { background: #e8f4fd; } .cal-cell-today:hover { background: #d4ecfa; } .cal-cell-has-events { } .cal-day-num { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 4px; } .cal-cell-today .cal-day-num { background: #007bff; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; } .cal-events-preview { display: flex; flex-direction: column; gap: 2px; } .cal-event-dot { border-radius: 3px; padding: 1px 4px; overflow: hidden; } .cal-event-label { font-size: 10px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .cal-event-more { font-size: 10px; color: #888; padding: 1px 4px; } /* Modals */ .cal-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1001; padding: 20px; } .cal-modal { background: white; border-radius: 10px; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.3); } .cal-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid #dee2e6; background: #f8f9fa; border-radius: 10px 10px 0 0; } .cal-modal-header h3 { margin: 0; color: #333; font-size: 18px; } .cal-close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: #999; line-height: 1; } .cal-close-btn:hover { color: #333; } .cal-modal-body { padding: 22px; } .cal-modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } /* Event cards in day modal */ .cal-event-card { background: #f8f9fa; border-radius: 6px; padding: 14px; margin-bottom: 12px; border-left: 4px solid #6c757d; } .cal-event-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .cal-event-card-icon { font-size: 16px; } .cal-event-card-title { font-weight: 600; color: #333; flex: 1; } .cal-event-status { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500; } .cal-status-scheduled { background: #d1ecf1; color: #0c5460; } .cal-status-draft { background: #fff3cd; color: #856404; } .cal-status-posted { background: #d4edda; color: #155724; } .cal-status-cancelled { background: #f8d7da; color: #721c24; } .cal-event-card-time { font-size: 13px; color: #555; margin-bottom: 4px; } .cal-event-card-platform { font-size: 12px; color: #888; margin-bottom: 4px; text-transform: capitalize; } .cal-event-card-notes { font-size: 13px; color: #555; margin: 8px 0; line-height: 1.4; white-space: pre-wrap; } .cal-event-card-meta { font-size: 11px; color: #aaa; margin-top: 8px; } .cal-event-card-actions { display: flex; gap: 8px; margin-top: 10px; } .cal-edit-btn { background: #007bff; color: white; border: none; border-radius: 4px; padding: 5px 14px; cursor: pointer; font-size: 12px; } .cal-edit-btn:hover { background: #0056b3; } .cal-delete-btn { background: #dc3545; color: white; border: none; border-radius: 4px; padding: 5px 14px; cursor: pointer; font-size: 12px; } .cal-delete-btn:hover { background: #c82333; } .cal-add-day-btn { width: 100%; background: #f8f9fa; border: 2px dashed #dee2e6; border-radius: 6px; padding: 12px; cursor: pointer; font-size: 14px; color: #007bff; margin-top: 8px; } .cal-add-day-btn:hover { background: #e9ecef; } .cal-no-events { text-align: center; color: #999; padding: 20px 0; } /* Form */ .cal-form-group { margin-bottom: 14px; } .cal-form-group label { display: block; font-weight: 500; color: #333; margin-bottom: 5px; font-size: 13px; } .cal-form-group input, .cal-form-group select, .cal-form-group textarea { width: 100%; padding: 9px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; font-family: inherit; } .cal-form-group textarea { resize: vertical; } .cal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cal-cancel-btn { background: #6c757d; color: white; border: none; border-radius: 4px; padding: 10px 20px; cursor: pointer; font-size: 14px; } .cal-cancel-btn:hover { background: #5a6268; } .cal-save-btn { background: #28a745; color: white; border: none; border-radius: 4px; padding: 10px 20px; cursor: pointer; font-size: 14px; font-weight: 500; } .cal-save-btn:hover { background: #218838; } .cal-save-btn:disabled { background: #ccc; cursor: not-allowed; } @media (max-width: 768px) { .calendar-toolbar { flex-direction: column; gap: 12px; } .cal-cell { min-height: 60px; } .cal-event-label { display: none; } .cal-event-dot { width: 8px; height: 8px; border-radius: 50%; padding: 0; } .cal-events-preview { flex-direction: row; flex-wrap: wrap; gap: 3px; } .cal-form-row { grid-template-columns: 1fr; } } .dpa-management { padding: 20px; background: #f5f5f5; border-radius: 8px; } .dpa-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .dpa-header h2 { margin: 0; color: #333; } .create-btn { background: #007bff; color: white; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background 0.3s; } .create-btn:hover { background: #0056b3; } .dpa-loading { text-align: center; padding: 40px; color: #666; } .no-dpas { text-align: center; padding: 60px 20px; background: white; border-radius: 8px; color: #666; } .dpa-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: 20px; } .dpa-card { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s, box-shadow 0.2s; } .dpa-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .dpa-card.active { border: 2px solid #28a745; } .dpa-card.inactive { opacity: 0.7; border: 2px solid #ccc; } .dpa-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #f0f0f0; } .dpa-card-header h3 { margin: 0 0 8px 0; color: #333; font-size: 1.2em; } .status-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 0.85em; font-weight: 600; } .status-badge.active { background: #d4edda; color: #155724; } .status-badge.inactive { background: #f8d7da; color: #721c24; } .version-badge { background: #007bff; color: white; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 0.9em; } .dpa-details { margin-bottom: 20px; } .detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f0f0; } .detail-row strong { color: #555; font-size: 0.9em; } .detail-row span { color: #333; text-align: right; max-width: 60%; } .dpa-sections { margin: 20px 0; } .dpa-sections details { margin-bottom: 10px; background: #f8f9fa; border-radius: 6px; padding: 10px; } .dpa-sections summary { cursor: pointer; font-weight: 600; color: #007bff; padding: 5px; } .dpa-sections summary:hover { color: #0056b3; } .dpa-sections p { margin: 10px 0 0 0; padding: 10px; color: #555; line-height: 1.6; background: white; border-radius: 4px; } .dpa-meta { display: flex; justify-content: space-between; margin-top: 15px; padding-top: 15px; border-top: 1px solid #f0f0f0; } .dpa-meta small { color: #999; font-size: 0.85em; } .deactivate-btn { width: 100%; margin-top: 15px; padding: 10px; background: #dc3545; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background 0.3s; } .deactivate-btn:hover { background: #c82333; } .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; overflow-y: auto; padding: 20px; } .dpa-modal { background: white; border-radius: 12px; max-width: 900px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.3); } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 2px solid #f0f0f0; } .modal-header h3 { margin: 0; color: #333; } .close-btn { background: none; border: none; font-size: 28px; cursor: pointer; color: #999; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: background 0.2s; } .close-btn:hover { background: #f0f0f0; color: #333; } .quick-fill { padding: 20px; background: #e7f3ff; border-bottom: 1px solid #b3d9ff; } .quick-fill-btn { background: #17a2b8; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background 0.3s; } .quick-fill-btn:hover { background: #138496; } .dpa-modal form { padding: 20px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-group { display: flex; flex-direction: column; } .form-group.full-width { grid-column: 1 / -1; } .form-group label { margin-bottom: 8px; font-weight: 600; color: #555; font-size: 0.9em; } .form-group input, .form-group select, .form-group textarea { padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; transition: border-color 0.3s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #007bff; } .form-group textarea { resize: vertical; font-family: inherit; } .file-upload-wrapper { position: relative; } .file-upload-wrapper input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; } .file-upload-label { display: block; padding: 12px 20px; background: #f8f9fa; border: 2px dashed #007bff; border-radius: 6px; text-align: center; cursor: pointer; transition: all 0.3s; color: #007bff; font-weight: 600; } .file-upload-label:hover { background: #e7f3ff; border-color: #0056b3; } .file-upload-label span { display: flex; align-items: center; justify-content: center; gap: 8px; } .form-hint { display: block; margin-top: 6px; color: #6c757d; font-size: 0.85em; } .pdf-link { color: #007bff; text-decoration: none; font-weight: 600; transition: color 0.3s; } .pdf-link:hover { color: #0056b3; text-decoration: underline; } .form-actions button:disabled { opacity: 0.6; cursor: not-allowed; } .form-actions button:disabled:hover { background: #6c757d; } .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 2px solid #f0f0f0; } .form-actions button { padding: 10px 24px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background 0.3s; } .form-actions button[type="button"] { background: #6c757d; color: white; } .form-actions button[type="button"]:hover { background: #5a6268; } .form-actions .submit-btn { background: #28a745; color: white; } .form-actions .submit-btn:hover { background: #218838; } @media (max-width: 768px) { .dpa-cards { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .dpa-modal { max-width: 100%; margin: 10px; } } .breach-management { padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .breach-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 2px solid #e0e0e0; } .breach-header h2 { margin: 0; color: #333; } .test-email-btn { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: 500; transition: background 0.3s; } .test-email-btn:hover:not(:disabled) { background: #0056b3; } .test-email-btn:disabled { background: #ccc; cursor: not-allowed; } .breach-loading { text-align: center; padding: 40px; color: #666; font-size: 16px; } .no-breaches { text-align: center; padding: 60px 20px; color: #666; } .no-breaches-icon { font-size: 64px; margin-bottom: 20px; } .no-breaches h3 { color: #28a745; margin-bottom: 10px; } .no-breaches p { color: #666; font-size: 14px; } .breaches-list { display: flex; flex-direction: column; gap: 20px; } .breach-card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; background: #fafafa; transition: box-shadow 0.3s; } .breach-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .breach-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e0e0e0; } .breach-card-header h3 { margin: 0; color: #333; flex: 1; } .breach-badges { display: flex; gap: 10px; } .severity-badge, .status-badge { padding: 5px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; } .severity-critical { background: #dc3545; color: white; } .severity-high { background: #fd7e14; color: white; } .severity-medium { background: #ffc107; color: #333; } .severity-low { background: #17a2b8; color: white; } .status-resolved { background: #28a745; color: white; } .status-contained { background: #ffc107; color: #333; } .status-investigating { background: #dc3545; color: white; } .breach-details { display: flex; flex-direction: column; gap: 12px; } .detail-row { display: flex; gap: 10px; } .detail-label { font-weight: 600; color: #555; min-width: 180px; flex-shrink: 0; } .detail-value { color: #333; flex: 1; } .detail-section { display: flex; flex-direction: column; gap: 8px; } .detail-list { margin: 0; padding-left: 20px; color: #333; } .detail-list li { margin-bottom: 5px; } .ico-reported { background: #e8f5e9; padding: 10px; border-radius: 5px; border-left: 4px solid #28a745; } .breach-actions { margin-top: 20px; padding-top: 20px; border-top: 2px solid #e0e0e0; } .send-notifications-btn { width: 100%; padding: 12px 20px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background 0.3s; } .send-notifications-btn:hover:not(:disabled) { background: #0056b3; } .send-notifications-btn:disabled { background: #ccc; cursor: not-allowed; } .cancel-auto-btn { width: 100%; padding: 12px 20px; background: #ffc107; color: #333; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background 0.3s; margin-top: 10px; } .cancel-auto-btn:hover:not(:disabled) { background: #e0a800; } .cancel-auto-btn:disabled { background: #ccc; cursor: not-allowed; } @media (max-width: 768px) { .breach-header { flex-direction: column; gap: 15px; align-items: flex-start; } .test-email-btn { width: 100%; } .breach-card-header { flex-direction: column; gap: 15px; } .breach-badges { width: 100%; justify-content: flex-start; } .detail-row { flex-direction: column; gap: 5px; } .detail-label { min-width: auto; } } .insights-table th, .insights-table td { min-width: 110px; } .insights-revenue { font-weight: 600; color: #155724; } .insights-cancelled { color: #721c24; font-weight: 500; } .insights-expired { color: #856404; font-weight: 500; } .insights-note { color: #999; font-style: italic; font-size: 12px; } .terms-container { min-height: 100vh; background-color: #f5f5f5; padding: 40px 20px; } .terms-content { max-width: 900px; margin: 0 auto; background-color: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); line-height: 1.8; color: #333; } .terms-content h1 { font-size: 2.5rem; color: #1a1a1a; margin-bottom: 10px; border-bottom: 3px solid #007bff; padding-bottom: 15px; } .terms-content h2 { font-size: 1.8rem; color: #1a1a1a; margin-top: 30px; margin-bottom: 15px; border-left: 4px solid #007bff; padding-left: 15px; } .terms-content p { margin-bottom: 12px; font-size: 1rem; } .terms-content ul { margin-left: 20px; margin-bottom: 15px; padding-left: 40px; } .terms-content li { margin-bottom: 8px; font-size: 1rem; } .terms-content a { color: #007bff; text-decoration: none; transition: color 0.3s ease; } .terms-content a:hover { color: #0056b3; text-decoration: underline; } .terms-content strong { color: #1a1a1a; font-weight: 600; } /* Responsive Design */ @media (max-width: 768px) { .terms-container { padding: 20px 10px; } .terms-content { padding: 20px; } .terms-content h1 { font-size: 2rem; } .terms-content h2 { font-size: 1.5rem; } .terms-content p, .terms-content li { font-size: 0.95rem; } } @media (max-width: 480px) { .terms-container { padding: 15px 5px; } .terms-content { padding: 15px; } .terms-content h1 { font-size: 1.5rem; } .terms-content h2 { font-size: 1.2rem; } .terms-content p, .terms-content li { font-size: 0.9rem; } } .privacy-policy-container { min-height: 100vh; background-color: #f5f5f5; padding: 40px 20px; } .privacy-policy-content { max-width: 900px; margin: 0 auto; background-color: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); line-height: 1.8; color: #333; } .privacy-policy-content h1 { font-size: 2.5rem; color: #1a1a1a; margin-bottom: 10px; border-bottom: 3px solid #007bff; padding-bottom: 15px; } .privacy-policy-content h2 { font-size: 1.8rem; color: #1a1a1a; margin-top: 30px; margin-bottom: 15px; border-left: 4px solid #007bff; padding-left: 15px; } .privacy-policy-content h3 { font-size: 1.3rem; color: #333; margin-top: 20px; margin-bottom: 10px; } .privacy-policy-content h4 { font-size: 1.1rem; color: #555; margin-top: 15px; margin-bottom: 8px; font-weight: 600; } .privacy-policy-content section { margin-bottom: 30px; } .privacy-policy-content p { margin-bottom: 12px; font-size: 1rem; } .privacy-policy-content ul, .privacy-policy-content ol { margin-left: 20px; margin-bottom: 15px; } .privacy-policy-content ul { padding-left: 40px; } .privacy-policy-content ol { padding-left: 0; } .privacy-policy-content li { margin-bottom: 8px; font-size: 1rem; } .privacy-policy-content a { color: #007bff; text-decoration: none; transition: color 0.3s ease; } .privacy-policy-content a:hover { color: #0056b3; text-decoration: underline; } .privacy-policy-content strong { color: #1a1a1a; font-weight: 600; } .policy-meta { background-color: #f0f8ff; padding: 15px; border-radius: 5px; margin-bottom: 30px; border-left: 4px solid #007bff; } .policy-meta p { margin-bottom: 5px; font-size: 0.95rem; } .policy-footer { background-color: #f0f8ff; padding: 20px; border-radius: 5px; margin-top: 40px; border-top: 2px solid #007bff; text-align: center; font-size: 0.9rem; color: #666; } .policy-footer p { margin-bottom: 5px; } /* Responsive Design */ @media (max-width: 768px) { .privacy-policy-container { padding: 20px 10px; } .privacy-policy-content { padding: 20px; } .privacy-policy-content h1 { font-size: 2rem; } .privacy-policy-content h2 { font-size: 1.5rem; } .privacy-policy-content h3 { font-size: 1.1rem; } .privacy-policy-content p, .privacy-policy-content li { font-size: 0.95rem; } } @media (max-width: 480px) { .privacy-policy-container { padding: 15px 5px; } .privacy-policy-content { padding: 15px; } .privacy-policy-content h1 { font-size: 1.5rem; } .privacy-policy-content h2 { font-size: 1.2rem; } .privacy-policy-content h3 { font-size: 1rem; } .privacy-policy-content p, .privacy-policy-content li { font-size: 0.9rem; } } .dpa-container { min-height: 100vh; background-color: #f5f5f5; padding: 40px 20px; } .dpa-content { max-width: 900px; margin: 0 auto; background-color: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); line-height: 1.8; color: #333; } .dpa-content h1 { font-size: 2.5rem; color: #1a1a1a; margin-bottom: 10px; border-bottom: 3px solid #28a745; padding-bottom: 15px; } .dpa-content h2 { font-size: 1.8rem; color: #1a1a1a; margin-top: 30px; margin-bottom: 15px; border-left: 4px solid #28a745; padding-left: 15px; } .dpa-content h3 { font-size: 1.3rem; color: #333; margin-top: 20px; margin-bottom: 10px; } .dpa-content section { margin-bottom: 30px; } .dpa-content p { margin-bottom: 12px; font-size: 1rem; } .dpa-content ul, .dpa-content ol { margin-left: 20px; margin-bottom: 15px; } .dpa-content li { margin-bottom: 8px; font-size: 1rem; } .dpa-content a { color: #28a745; text-decoration: none; transition: color 0.3s ease; } .dpa-content a:hover { color: #1e7e34; text-decoration: underline; } .dpa-content strong { color: #1a1a1a; font-weight: 600; } .dpa-meta { background-color: #f0fff4; padding: 15px; border-radius: 5px; margin-bottom: 30px; border-left: 4px solid #28a745; } .dpa-meta p { margin-bottom: 5px; font-size: 0.95rem; } .processors-table { width: 100%; border-collapse: collapse; margin: 20px 0; background-color: #f9f9f9; } .processors-table thead { background-color: #28a745; color: white; } .processors-table th { padding: 12px; text-align: left; font-weight: 600; border: 1px solid #ddd; } .processors-table td { padding: 12px; border: 1px solid #ddd; } .processors-table tbody tr:hover { background-color: #f5f5f5; } .processors-table tbody tr:nth-child(even) { background-color: #fafafa; } .dpa-footer { background-color: #f0fff4; padding: 20px; border-radius: 5px; margin-top: 40px; border-top: 2px solid #28a745; text-align: center; font-size: 0.9rem; color: #666; } .dpa-footer p { margin-bottom: 5px; } /* Responsive Design */ @media (max-width: 768px) { .dpa-container { padding: 20px 10px; } .dpa-content { padding: 20px; } .dpa-content h1 { font-size: 2rem; } .dpa-content h2 { font-size: 1.5rem; } .dpa-content h3 { font-size: 1.1rem; } .dpa-content p, .dpa-content li { font-size: 0.95rem; } .processors-table { font-size: 0.9rem; } .processors-table th, .processors-table td { padding: 8px; } } @media (max-width: 480px) { .dpa-container { padding: 15px 5px; } .dpa-content { padding: 15px; } .dpa-content h1 { font-size: 1.5rem; } .dpa-content h2 { font-size: 1.2rem; } .dpa-content h3 { font-size: 1rem; } .dpa-content p, .dpa-content li { font-size: 0.9rem; } .processors-table { font-size: 0.8rem; overflow-x: auto; } .processors-table th, .processors-table td { padding: 6px; } } .business-continuity-page { max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.6; color: #2c3e50; } .business-continuity-page h1 { color: #2c3e50; text-align: center; margin-bottom: 30px; font-size: 2.2em; } .continuity-section { background: #f8f9fa; border-radius: 8px; padding: 20px; margin-bottom: 20px; border-left: 4px solid #007bff; } .continuity-section h2 { color: #2c3e50; margin-bottom: 15px; font-size: 1.4em; } .continuity-section ul { margin: 0; padding-left: 20px; } .continuity-section li { margin-bottom: 8px; color: #2c3e50; } .continuity-section strong { color: #007bff; } .status-section { background: #e8f5e8; border-radius: 8px; padding: 20px; margin-bottom: 20px; border-left: 4px solid #28a745; text-align: center; } .status-section h2 { color: #155724; margin-bottom: 15px; } .status-section p { color: #155724; } .status-section a { color: #007bff; text-decoration: none; font-weight: bold; } .status-section a:hover { text-decoration: underline; } .contact-section { background: #fff3cd; border-radius: 8px; padding: 20px; margin-bottom: 20px; border-left: 4px solid #ffc107; text-align: center; } .contact-section h2 { color: #856404; margin-bottom: 15px; } .contact-section p { color: #856404; } .contact-section a { color: #007bff; text-decoration: none; font-weight: bold; } .contact-section a:hover { text-decoration: underline; } .back-link { text-align: center; margin-top: 30px; } .back-link a { color: #007bff; text-decoration: none; font-size: 1.1em; } .back-link a:hover { text-decoration: underline; } @media (max-width: 768px) { .business-continuity-page { padding: 15px; } .business-continuity-page h1 { font-size: 1.8em; } .continuity-section { padding: 15px; } } /* Landing page user roles styling */ .role-card { text-align: center; } .role-card h3 { text-align: center; } .role-card p { text-align: center; } .role-card ul { text-align: center; list-style: none; padding: 0; } .role-card li { text-align: center; } /* Sign in section styling */ .signin-section { text-align: center; margin-top: 40px; padding: 30px; background-color: #e8d5f0; border-radius: 8px; border: 1px solid #d1a7dd; } .signin-section h3 { margin-bottom: 15px; color: #333; } .signin-section p { margin-bottom: 20px; color: #666; } .signin-btn { background-color: #6c757d; color: white; border: none; padding: 12px 24px; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; display: block; margin: 0 auto; } .signin-btn:hover { background-color: #5a6268; } /* Indented list styling */ .indented-list { margin-left: 30px; padding-left: 20px; } /* Center main headings */ .landing-content h1, .landing-content h2 { text-align: center; } /* Public page back to home link */ .public-back-home { display: block; text-align: center; color: #007bff; text-decoration: none; font-size: 14px; font-weight: 500; padding: 16px 0 8px; transition: color 0.15s; } .public-back-home:hover { color: #0056b3; text-decoration: underline; } /* Landing subtitle styling */ .landing-subtitle { text-align: center; font-size: 2rem; font-weight: bold; margin-bottom: 30px; color: #333; } /* Center landing page buttons */ .get-started-btn, .signin-btn { display: block !important; margin: 20px auto !important; } .cta-section { text-align: center; } .signin-section { text-align: center; } /* Contact page styling */ .contact-page-title { text-align: center; margin-bottom: 30px; color: #000; } .contact-info { text-align: center; margin-top: 30px; padding: 20px; background-color: #f8f9fa; border-radius: 8px; } .contact-info-title { color: #000; } .contact-info-text { color: #000; } .contact-info-text a { color: #007bff; text-decoration: underline; } .contact-info-text a:hover { color: #0056b3; } /* Contact form labels */ .contact-form label { color: #000 !important; } .contact-form .form-group label { color: #000 !important; } /* Knowledge base content styling */ .knowledge-base-content { color: #000; } /* Landing page menu button */ .landing-menu-wrapper { position: relative; } .landing-menu-button-container { position: fixed; top: min(40px, 5vw); left: min(60px, 8vw); z-index: 1000; } .landing-menu-button { background: none; border: none; font-size: 24px; cursor: pointer; padding: 6px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .landing-menu-dropdown { position: absolute; top: 100%; left: 0; background-color: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); min-width: min(220px, 85vw); max-width: 90vw; z-index: 1001; } .landing-menu-item { width: 100%; padding: 12px 16px; border: none; background: none; text-align: left; cursor: pointer; border-bottom: 1px solid #eee; text-decoration: none; color: inherit; display: block; } .landing-menu-item:hover { background-color: #f8f9fa; } /* Landing page logo container */ .landing-logo-container { text-align: center; } .landing-logo-wrapper { background: white; border-radius: 12px; padding: 20px; border: 2px solid black; display: inline-block; margin-bottom: 40px; } .landing-logo { height: 400px; display: block; max-width: 90vw; object-fit: contain; } /* Landing page content sections */ .landing-section { padding: 20px; border-radius: 12px; margin: 20px 0; } .landing-section-light { background-color: #f8f9fa; } .landing-section-yellow { background-color: #fffacd; } .landing-section-blue { background-color: #e7f3ff; } .landing-section-dark { background-color: #1a1a2e; border-radius: 12px; padding: 32px 24px; } .landing-section-center { text-align: center; margin: 30px 0; padding: 20px; } /* Business types grid */ .business-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 20px; margin: 20px 0; } .business-type-card { padding: 15px; background-color: white; border-radius: 8px; } .business-type-card h4 { margin-top: 0; } .business-type-card p { margin-bottom: 0; } /* Sign up section */ .signup-section { padding: 20px; background-color: #f8f9fa; border-radius: 12px; margin: 40px 0 20px 0; } /* FAQ section */ .landing-faq-section h2 { margin-bottom: 20px; } .landing-faq-list { max-width: 700px; margin: 0 auto; } .landing-faq-item { border-bottom: 1px solid #e0e0e0; padding: 0; } .landing-faq-item summary { padding: 16px 0; font-size: 16px; font-weight: 600; color: #1a1a2e; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } .landing-faq-item summary::-webkit-details-marker { display: none; } .landing-faq-item summary::after { content: '+'; font-size: 20px; font-weight: 400; color: #888; flex-shrink: 0; margin-left: 16px; transition: transform 0.2s; } .landing-faq-item[open] summary::after { content: '−'; } .landing-faq-item p { padding: 0 0 16px; font-size: 15px; line-height: 1.6; color: #555; margin: 0; } .landing-faq-item a { color: #007bff; text-decoration: none; } .landing-faq-item a:hover { text-decoration: underline; } /* Responsive adjustments */ @media (max-width: 768px) { .landing-logo { height: 300px; } .landing-menu-button-container { top: 20px; left: 20px; } .landing-section { padding: 15px; } .business-types-grid { gap: 15px; } .business-type-card { padding: 12px; } } @media (max-width: 480px) { .landing-logo { height: 250px; } .landing-logo-wrapper { padding: 15px; } .landing-section { padding: 12px; } .business-types-grid { gap: 12px; } .business-type-card { padding: 10px; } } /* WhatsApp floating button */ .whatsapp-float { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; background-color: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); z-index: 9998; transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; } .whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } @media (max-width: 600px) { .whatsapp-float { bottom: 80px; right: 16px; width: 50px; height: 50px; } } /* Responsive Design for All Viewports */ /* Base responsive styles */ * { box-sizing: border-box; } /* Landing page content responsive */ .landing-content { padding: 0 20px; max-width: 1200px; margin: 0 auto; } /* Responsive typography */ @media (max-width: 768px) { .landing-content { padding: 0 15px; } h1 { font-size: 1.8rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.3rem; } h4 { font-size: 1.1rem; } p, li { font-size: 0.95rem; line-height: 1.5; } } @media (max-width: 480px) { .landing-content { padding: 0 10px; } h1 { font-size: 1.6rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.2rem; } h4 { font-size: 1rem; } p, li { font-size: 0.9rem; } } /* Responsive buttons */ .btn { min-height: 44px; padding: 10px 15px; font-size: 16px; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; } @media (max-width: 768px) { .btn { width: 100%; max-width: 300px; margin: 0 auto; display: block; } } /* Responsive grids */ .responsive-grid { display: grid; gap: 20px; margin: 20px 0; } .responsive-grid-2 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .responsive-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } @media (max-width: 768px) { .responsive-grid { gap: 15px; margin: 15px 0; } .responsive-grid-2, .responsive-grid-4 { grid-template-columns: 1fr; } } /* Responsive cards */ .card { padding: 20px; border-radius: 8px; background-color: #f8f9fa; } @media (max-width: 768px) { .card { padding: 15px; } } @media (max-width: 480px) { .card { padding: 12px; } } /* Responsive images */ img { max-width: 100%; height: auto; } /* Responsive tables */ table { width: 100%; overflow-x: auto; display: block; white-space: nowrap; } @media (max-width: 768px) { table { font-size: 0.9rem; } th, td { padding: 6px 4px; } } /* Responsive navigation */ @media (max-width: 768px) { .hamburger-menu { position: fixed; top: 10px; left: 10px; z-index: 1000; } } /* Responsive footer */ .app-footer { padding: 20px; text-align: center; } @media (max-width: 768px) { .app-footer { padding: 15px 10px; } .footer-content { flex-direction: column; gap: 15px; } .footer-links { flex-direction: column; gap: 10px; } } /* Responsive spacing */ @media (max-width: 768px) { .section { margin-bottom: 30px; } } @media (max-width: 480px) { .section { margin-bottom: 20px; } } /* Responsive text alignment */ @media (max-width: 768px) { .text-center-mobile { text-align: center; } } /* Responsive containers - padding only, max-width handled in App.css */ @media (max-width: 768px) { .container { padding: 0 15px; } } @media (max-width: 480px) { .container { padding: 0 10px; } } .sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); z-index: 9999; padding: 14px 20px; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2); animation: slideUp 0.4s ease-out; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .sticky-cta-content { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .sticky-cta-text { color: #fff; font-size: 15px; margin: 0; line-height: 1.4; } .sticky-cta-text strong { color: #4caf50; } .sticky-cta-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .sticky-cta-btn { display: inline-block; background-color: #28a745; color: #fff; padding: 10px 24px; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color 0.15s, transform 0.1s; } .sticky-cta-btn:hover { background-color: #218838; transform: translateY(-1px); } .sticky-cta-link { color: #aaa; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; transition: color 0.15s; } .sticky-cta-link:hover { color: #fff; text-decoration: underline; } .sticky-cta-dismiss { background: none; border: none; color: #888; font-size: 18px; cursor: pointer; padding: 4px 8px; line-height: 1; transition: color 0.15s; } .sticky-cta-dismiss:hover { color: #fff; } @media (max-width: 600px) { .sticky-cta { padding: 12px 14px; } .sticky-cta-content { flex-direction: column; text-align: center; gap: 10px; } .sticky-cta-text { font-size: 13px; } .sticky-cta-actions { width: 100%; justify-content: center; } .sticky-cta-btn { padding: 10px 20px; font-size: 13px; } } .gdpr-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 16px; } .gdpr-card { background-color: #fff; border-radius: 12px; padding: 24px; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); } .gdpr-title { font-size: 20px; font-weight: 700; color: #1a1a2e; margin: 0 0 4px; } .gdpr-subtitle { font-size: 13px; color: #666; margin: 0 0 16px; line-height: 1.4; } .gdpr-section-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #999; margin: 0 0 6px; padding-left: 2px; } .gdpr-checkbox-row { display: flex; flex-direction: column; gap: 6px; background-color: #f8f9fa; border-radius: 6px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; border: 1px solid transparent; } .gdpr-checkbox-row:hover { background-color: #eef2f7; } .gdpr-checkbox-row.checked { background-color: #e8f5e9; border-color: #4caf50; } .gdpr-checkbox-row input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: #007bff; cursor: pointer; align-self: flex-start; } .gdpr-checkbox-content { display: flex; flex-direction: column; gap: 2px; font-size: 13px; width: 100%; } .gdpr-checkbox-content strong { color: #1a1a2e; font-size: 13px; } .gdpr-desc { font-size: 11px; color: #666; line-height: 1.3; word-break: break-word; } .gdpr-link { color: #007bff; font-weight: 600; font-size: 11px; text-decoration: underline; } .gdpr-link:hover { color: #0056b3; } .gdpr-info-box { background-color: #e7f3ff; border-radius: 6px; padding: 10px 12px; border-left: 3px solid #007bff; margin: 14px 0; } .gdpr-info-box strong { color: #007bff; font-size: 12px; } .gdpr-info-box ul { margin: 4px 0 0; padding-left: 16px; font-size: 11px; line-height: 1.5; color: #444; } .gdpr-error { color: #dc3545; font-size: 12px; text-align: center; margin: 0 0 8px; padding: 6px; background-color: #fff5f5; border-radius: 6px; } .gdpr-button { width: 100%; background-color: #007bff; color: #fff; border: none; border-radius: 8px; padding: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 0.15s, transform 0.1s; } .gdpr-button:hover:not(:disabled) { background-color: #0056b3; transform: translateY(-1px); } .gdpr-button:disabled { background-color: #6c757d; opacity: 0.7; cursor: not-allowed; } .gdpr-footer-note { font-size: 10px; color: #999; text-align: center; margin: 6px 0 0; } .gdpr-divider { height: 1px; background-color: #e9ecef; margin: 10px 0; border: none; } @media (max-width: 480px) { .gdpr-overlay { padding: 8px; align-items: flex-start; padding-top: 16px; } .gdpr-card { padding: 16px; border-radius: 10px; max-height: 95vh; } .gdpr-title { font-size: 18px; } .gdpr-subtitle { font-size: 12px; margin-bottom: 12px; } .gdpr-checkbox-row { padding: 6px 8px; margin-bottom: 4px; gap: 6px; } .gdpr-checkbox-row input[type="checkbox"] { width: 14px; height: 14px; } .gdpr-checkbox-content strong { font-size: 12px; } .gdpr-desc { font-size: 10px; } .gdpr-link { font-size: 10px; } .gdpr-info-box { padding: 8px 10px; margin: 10px 0; } .gdpr-info-box ul { font-size: 10px; } .gdpr-button { padding: 10px; font-size: 14px; } .gdpr-divider { margin: 8px 0; } } .account-deletion { max-width: 800px; margin: 0 auto; padding: 40px 24px; font-family: inherit; color: #2c3e50; } .account-deletion h1 { font-size: 32px; font-weight: 700; margin-bottom: 8px; } .account-deletion-publisher { color: #2c3e50; margin-bottom: 8px; font-size: 16px; } .account-deletion-intro { color: #2c3e50; margin-bottom: 40px; font-size: 14px; } .account-deletion-steps { background-color: #f8f9fa; border-radius: 12px; padding: 24px; margin-bottom: 32px; border: 1px solid #e0e0e0; } .account-deletion-steps h2 { font-size: 20px; font-weight: 600; margin-bottom: 20px; } .account-deletion-step { display: flex; gap: 12px; margin-bottom: 20px; } .account-deletion-step:last-child { margin-bottom: 0; } .account-deletion-step-number { min-width: 32px; height: 32px; border-radius: 50%; background-color: #007bff; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; } .account-deletion-step-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; } .account-deletion-step-desc { font-size: 14px; color: #555; } .account-deletion-section { margin-bottom: 32px; } .account-deletion-card { background-color: #fff; border-radius: 8px; padding: 20px; border: 1px solid #e0e0e0; } .account-deletion-section h2 { font-size: 20px; font-weight: 600; margin-bottom: 16px; } .account-deletion-section-text { font-size: 14px; color: #555; margin-bottom: 12px; } .account-deletion-section-text-after { font-size: 14px; color: #555; margin-top: 12px; } .account-deletion-data-list { font-size: 14px; color: #2c3e50; line-height: 2; padding-left: 20px; } .account-deletion-retained { background-color: #fff3cd; border-radius: 8px; padding: 16px; border: 1px solid #ffc107; font-size: 14px; line-height: 1.7; } .account-deletion-retained ul { padding-left: 20px; margin: 0; } .account-deletion-table { width: 100%; border-collapse: collapse; font-size: 14px; } .account-deletion-table thead tr { border-bottom: 2px solid #dee2e6; text-align: left; } .account-deletion-table th { padding: 10px 12px; color: #2c3e50; } .account-deletion-table td { padding: 10px 12px; } .account-deletion-table tbody tr { border-bottom: 1px solid #eee; } .account-deletion-table tbody tr:last-child { border-bottom: none; } .account-deletion-alt-request { background-color: #e7f3ff; border-radius: 8px; padding: 16px; border-left: 4px solid #007bff; margin-bottom: 32px; } .account-deletion-alt-request h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; } .account-deletion-alt-request p { font-size: 14px; color: #555; margin: 0; } .account-deletion-alt-request a, .account-deletion-footer a { color: #007bff; } .account-deletion-footer { border-top: 1px solid #eee; padding-top: 24px; font-size: 13px; color: #999; text-align: center; } .account-deletion-footer p { margin: 0; } .account-deletion-footer p + p { margin-top: 4px; } .seo-page { background-color: #fff; color: #2c3e50; font-family: inherit; } .seo-logo { height: 200px; max-width: 80vw; object-fit: contain; display: block; margin: 0 auto 24px; cursor: pointer; } .seo-back-home { display: inline-block; color: #aaa; text-decoration: none; font-size: 14px; font-weight: 500; margin-bottom: 16px; transition: color 0.15s; } .seo-back-home:hover { color: #fff; text-decoration: underline; } .seo-hero { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #fff; text-align: center; padding: 60px 24px 48px; } .seo-hero h1 { font-size: 36px; font-weight: 800; margin: 0 0 16px; line-height: 1.2; } .seo-hero-sub { font-size: 18px; color: #ccc; max-width: 600px; margin: 0 auto 28px; line-height: 1.5; } .seo-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; } .seo-hero-note { font-size: 13px; color: #888; margin-top: 8px; } .seo-btn-primary { display: inline-block; background-color: #28a745; color: #fff; padding: 14px 32px; border-radius: 8px; text-decoration: none; font-size: 16px; font-weight: 600; transition: background-color 0.15s, transform 0.1s; } .seo-btn-primary:hover { background-color: #218838; transform: translateY(-1px); } .seo-btn-secondary { display: inline-block; background-color: transparent; color: #fff; padding: 14px 32px; border-radius: 8px; text-decoration: none; font-size: 16px; font-weight: 600; border: 2px solid rgba(255, 255, 255, 0.3); transition: border-color 0.15s, background-color 0.15s; } .seo-btn-secondary:hover { border-color: #fff; background-color: rgba(255, 255, 255, 0.1); } .seo-content { max-width: 900px; margin: 0 auto; padding: 0 24px; } .seo-section { padding: 48px 0; } .seo-section h2 { font-size: 28px; font-weight: 700; margin: 0 0 16px; color: #1a1a2e; } .seo-section p { font-size: 16px; line-height: 1.7; color: #444; margin-bottom: 16px; } .seo-section-highlight { background-color: #f8f9fa; margin: 0 -24px; padding: 48px 24px; border-radius: 0; } .seo-section-dark { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #fff; margin: 0 -24px; padding: 48px 24px; text-align: center; } .seo-section-dark h2 { color: #fff; } .seo-section-dark p { color: #ccc; } .seo-benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 24px; } .seo-benefit-card { background-color: #fff; border-radius: 10px; padding: 20px; border: 1px solid #e0e0e0; } .seo-benefit-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: #1a1a2e; } .seo-benefit-card p { font-size: 14px; line-height: 1.6; color: #555; margin: 0; } .seo-audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; } .seo-audience-card { background-color: #f8f9fa; border-radius: 10px; padding: 20px; text-align: center; } .seo-audience-card h3 { font-size: 16px; margin: 0 0 6px; } .seo-audience-card p { font-size: 14px; color: #666; margin: 0; } .seo-checklist { list-style: none; padding: 0; margin: 20px 0 0; } .seo-checklist li { padding: 8px 0 8px 28px; position: relative; font-size: 15px; line-height: 1.5; color: #333; } .seo-checklist li::before { content: '✅'; position: absolute; left: 0; font-size: 14px; } .seo-pricing-summary { margin: 20px 0; } .seo-pricing-summary p { font-size: 18px; color: #fff; margin: 6px 0; } .seo-cta-section { text-align: center; padding: 48px 0 60px; } .seo-cta-section .seo-btn-secondary { color: #007bff; border-color: #007bff; } .seo-cta-section .seo-btn-secondary:hover { background-color: #007bff; color: #fff; } .seo-home-link { display: inline-block; margin-top: 16px; color: #888; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.15s; } .seo-home-link:hover { color: #007bff; text-decoration: underline; } .seo-related-links { margin-top: 20px; } .seo-related-links p { font-size: 14px; color: #888; } .seo-related-links a { color: #007bff; text-decoration: none; } .seo-related-links a:hover { text-decoration: underline; } .seo-timeline { margin-top: 24px; } .seo-timeline-item { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid #eee; } .seo-timeline-item strong { flex-shrink: 0; width: 70px; color: #007bff; font-size: 14px; } .seo-timeline-item p { margin: 0; font-size: 14px; } .seo-journey { margin-top: 24px; } .seo-journey-step { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid #eee; } .seo-journey-number { width: 36px; height: 36px; background-color: #007bff; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; } .seo-journey-step h3 { font-size: 16px; margin: 0 0 4px; color: #1a1a2e; } .seo-journey-step p { font-size: 14px; margin: 0; color: #555; } .seo-comparison-table { overflow-x: auto; margin-top: 20px; } .seo-comparison-table table { width: 100%; border-collapse: collapse; font-size: 14px; } .seo-comparison-table th, .seo-comparison-table td { padding: 10px 14px; text-align: center; border-bottom: 1px solid #eee; } .seo-comparison-table th { font-weight: 600; color: #666; font-size: 13px; } .seo-comparison-table td:first-child { text-align: left; font-weight: 500; color: #333; } .seo-highlight-col { background-color: #e8f5e9; font-weight: 600; } @media (max-width: 640px) { .seo-hero { padding: 40px 16px 32px; } .seo-hero h1 { font-size: 26px; } .seo-hero-sub { font-size: 15px; } .seo-btn-primary, .seo-btn-secondary { padding: 12px 24px; font-size: 14px; width: 100%; text-align: center; } .seo-section h2 { font-size: 22px; } .seo-benefits-grid, .seo-audience-grid { grid-template-columns: 1fr; } .seo-section { padding: 32px 0; } .seo-section-highlight, .seo-section-dark { padding: 32px 16px; margin: 0 -16px; } .seo-content { padding: 0 16px; } .seo-logo { height: 140px; } .seo-timeline-item { flex-direction: column; gap: 4px; } .seo-comparison-table { font-size: 12px; } .seo-comparison-table th, .seo-comparison-table td { padding: 8px 6px; } } .blog-page { background-color: #fff; min-height: 100vh; } .blog-hero { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #fff; text-align: center; padding: 48px 24px 40px; } .blog-logo { height: 160px; max-width: 80vw; object-fit: contain; display: block; margin: 0 auto 16px; cursor: pointer; } .blog-home-link { display: inline-block; color: #aaa; text-decoration: none; font-size: 14px; font-weight: 500; margin-bottom: 16px; transition: color 0.15s; } .blog-home-link:hover { color: #fff; text-decoration: underline; } .blog-hero h1 { font-size: 32px; font-weight: 800; margin: 0 0 8px; } .blog-hero p { font-size: 16px; color: #aaa; margin: 0; } .blog-list { max-width: 800px; margin: 0 auto; padding: 32px 24px 60px; } .blog-card { display: block; background-color: #f8f9fa; border-radius: 10px; padding: 24px; margin-bottom: 20px; text-decoration: none; color: inherit; border: 1px solid #e9ecef; transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s; } .blog-card:hover { border-color: #007bff; box-shadow: 0 4px 16px rgba(0, 123, 255, 0.1); transform: translateY(-2px); } .blog-card-content h2 { font-size: 20px; font-weight: 700; color: #1a1a2e; margin: 0 0 8px; line-height: 1.3; } .blog-card-content p { font-size: 14px; color: #555; line-height: 1.6; margin: 0 0 12px; } .blog-card-meta { display: flex; gap: 16px; margin-bottom: 8px; } .blog-card-date, .blog-card-author { font-size: 12px; color: #888; } .blog-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .blog-tag { background-color: #e7f3ff; color: #007bff; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; } .blog-card-read { font-size: 14px; font-weight: 600; color: #007bff; } /* Social share buttons */ .blog-share { margin-bottom: 20px; } .blog-share-label { font-size: 13px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 10px; } .blog-share-buttons { display: flex; gap: 8px; } .blog-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 16px; color: #fff; transition: opacity 0.15s, transform 0.1s; } .blog-share-btn:hover { opacity: 0.85; transform: translateY(-1px); } .blog-share-x { background-color: #000; font-size: 18px; } .blog-share-fb { background-color: #1877f2; font-family: Georgia, serif; font-size: 20px; } .blog-share-li { background-color: #0a66c2; font-size: 14px; font-weight: 800; } .blog-share-wa { background-color: #25d366; font-size: 20px; } .blog-share-copy { background-color: #6c757d; font-size: 18px; border: none; cursor: pointer; } /* Article page */ .blog-article-container { max-width: 760px; margin: 0 auto; padding: 32px 24px 60px; } .blog-back { display: inline-block; font-size: 14px; color: #007bff; text-decoration: none; font-weight: 500; } .blog-back:hover { text-decoration: underline; } .blog-article-nav { display: flex; gap: 16px; margin-bottom: 24px; } .blog-article h1 { font-size: 28px; font-weight: 800; color: #1a1a2e; margin: 0 0 8px; line-height: 1.3; } .blog-article h2 { font-size: 22px; font-weight: 700; color: #1a1a2e; margin: 32px 0 12px; } .blog-article h3 { font-size: 18px; font-weight: 600; color: #2c3e50; margin: 24px 0 8px; } .blog-article p { font-size: 16px; line-height: 1.7; color: #444; margin: 0 0 16px; } .blog-article strong { color: #1a1a2e; } .blog-article ul, .blog-article ol { padding-left: 24px; margin: 0 0 16px; } .blog-article li { font-size: 15px; line-height: 1.7; color: #444; margin-bottom: 6px; } .blog-article a { color: #007bff; font-weight: 500; } .blog-article a:hover { text-decoration: underline; } .blog-article hr { border: none; height: 1px; background-color: #e9ecef; margin: 24px 0; } .blog-article em { color: #888; font-size: 14px; } .blog-article-footer { border-top: 1px solid #e9ecef; padding-top: 24px; margin-top: 32px; margin-bottom: 24px; } .blog-article-cta { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: 10px; padding: 28px; text-align: center; margin-top: 20px; } .blog-article-cta h3 { color: #fff; font-size: 20px; margin: 0 0 8px; } .blog-article-cta p { color: #aaa; font-size: 14px; margin: 0 0 16px; } .blog-cta-btn { display: inline-block; background-color: #28a745; color: #fff; padding: 12px 28px; border-radius: 8px; text-decoration: none; font-size: 15px; font-weight: 600; transition: background-color 0.15s; } .blog-cta-btn:hover { background-color: #218838; } .blog-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .blog-cta-btn-secondary { display: inline-block; background-color: transparent; color: #aaa; padding: 12px 28px; border-radius: 8px; text-decoration: none; font-size: 15px; font-weight: 600; border: 1px solid #555; transition: color 0.15s, border-color 0.15s; } .blog-cta-btn-secondary:hover { color: #fff; border-color: #fff; } @media (max-width: 600px) { .blog-hero { padding: 32px 16px; } .blog-hero h1 { font-size: 24px; } .blog-logo { height: 120px; } .blog-list { padding: 20px 16px 40px; } .blog-card { padding: 18px; } .blog-card-content h2 { font-size: 18px; } .blog-article-container { padding: 20px 16px 40px; } .blog-article h1 { font-size: 24px; } .blog-article h2 { font-size: 20px; } .blog-article p, .blog-article li { font-size: 15px; } } /* Button Component Styles */ /* Base button styles */ .btn { padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; background-color: #3182ce; color: white; } .btn:hover:not(:disabled):not([data-loading="true"]) { background-color: #2c5aa0; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .btn:disabled { cursor: not-allowed !important; opacity: 0.6; background-color: #cbd5e0; } /* Button variants */ .btn-primary { background-color: #007bff; color: white; } .btn-primary:hover:not(:disabled) { background-color: #0056b3; } .btn-warning { background-color: #ffc107; color: black; } .btn-warning:hover:not(:disabled) { background-color: #e0a800; } .btn-danger { background-color: #dc3545; color: white; } .btn-danger:hover:not(:disabled) { background-color: #c82333; } .btn-success { background-color: #28a745; color: white; } .btn-success:hover:not(:disabled) { background-color: #1e7e34; } .btn-info { background-color: #20c997; color: white; } .btn-info:hover:not(:disabled) { background-color: #1aa085; } .btn-secondary { background-color: #6c757d; color: white; } .btn-secondary:hover:not(:disabled) { background-color: #545b62; } /* Loading state */ .btn[data-loading="true"] { cursor: wait !important; opacity: 0.7; pointer-events: none; } /* Responsive */ @media (max-width: 768px) { .btn { width: 100%; margin: 8px 0; min-height: 48px; font-size: 16px; padding: 12px 16px; } } @media (max-width: 480px) { .btn { min-height: 48px; font-size: 16px; padding: 14px 16px; } } /* LoadingButton Component Styles */ /* CSS Custom Properties for loading state */ :root { --loading-opacity: 1; --loading-cursor: pointer; --loading-pointer-events: auto; } /* LoadingButton inherits from Button.css */ /* LoadingButton specific styles */ .loading-button { position: relative; } .btn:disabled { background: #cbd5e0; cursor: not-allowed !important; } .btn:disabled:not([data-loading="true"]) { cursor: not-allowed !important; } .loading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #ffffff; border-top: 2px solid transparent; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 8px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Responsive Design */ @media (max-width: 768px) { .btn { width: 100%; margin: 8px 0; min-height: 48px; font-size: 16px; padding: 12px 16px; } .loading-spinner { width: 14px; height: 14px; margin-right: 6px; } } @media (max-width: 480px) { .btn { min-height: 48px; font-size: 16px; padding: 14px 16px; } } .product-selector { border: 1px solid #ddd; padding: 15px; margin: 15px 0; border-radius: 4px; background: #f9f9f9; } .product-grid { display: grid; gap: 10px; max-height: 200px; overflow-y: auto; } .product-item { display: flex; justify-content: space-between; align-items: center; padding: 8px; background: white; border: 1px solid #eee; border-radius: 4px; } .selected-products { margin-top: 15px; padding-top: 15px; border-top: 1px solid #ddd; } .selected-product { display: flex; justify-content: space-between; align-items: center; padding: 8px; background: white; border: 1px solid #eee; border-radius: 4px; margin-bottom: 5px; } .quantity-controls { display: flex; align-items: center; gap: 10px; } .quantity-controls button { width: 30px; height: 30px; padding: 0; } .total-value { text-align: right; padding: 10px; background: #e9ecef; border-radius: 4px; margin-top: 10px; } .selected-product-item { margin-bottom: 15px; padding: 10px; border: 1px solid #eee; border-radius: 4px; background: white; } .product-main-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .product-details { color: black; flex: 1; } .quantity-display { color: black; margin: 0 10px; } .product-total { color: black; font-weight: bold; } .item-notes-section { border-top: 1px solid #eee; padding-top: 8px; } .notes-toggle-btn { background: none; border: none; color: #007bff; cursor: pointer; font-size: 12px; font-weight: bold; padding: 4px 0; text-align: left; width: 100%; } .notes-toggle-btn:hover { color: #0056b3; text-decoration: underline; } .notes-input-container { margin-top: 8px; } .notes-textarea { width: 100%; padding: 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; resize: vertical; box-sizing: border-box; } /* Booking Form Component Styles */ .booking-form-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; padding: 20px; } .booking-form-container { background-color: white; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 30px; } .booking-form-container h3 { margin-top: 0; margin-bottom: 20px; color: #333; text-align: center; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #333; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); } .form-group input[readonly] { background-color: #f5f5f5; cursor: not-allowed; } .form-group small { display: block; margin-top: 5px; font-size: 12px; color: #666; } .form-group small[style*="color: #dc3545"] { color: #dc3545 !important; } /* Multi-day booking notice */ .multiday-notice { background-color: #fff3cd; padding: 10px; border-radius: 4px; border: 1px solid #ffeaa7; margin-bottom: 15px; } .multiday-notice small { color: #856404; } .multiday-notice strong { font-weight: bold; } /* Form buttons */ .form-buttons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; } .form-buttons .btn { padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; transition: background-color 0.3s ease; } .btn-secondary { background-color: #6c757d; color: white; } .btn-secondary:hover { background-color: #5a6268; } .btn-primary { background-color: #007bff; color: white; } .btn-primary:hover { background-color: #0056b3; } /* Component-specific button disabled styles */ button:disabled, .btn:disabled { background-color: #ccc; cursor: not-allowed; } /* Duration and End Time select overrides */ .form-group .duration-select { width: 144px !important; min-width: 144px; } .form-group .endtime-select { width: 100px !important; min-width: 100px; } /* Responsive design */ @media (max-width: 768px) { .booking-form-overlay { padding: 10px; } .booking-form-container { padding: 20px; max-height: 95vh; } .form-buttons { flex-direction: column; } .form-buttons .btn { width: 100%; margin: 5px 0; } } @media (max-width: 480px) { .booking-form-container { padding: 15px; } .form-group { margin-bottom: 15px; } } /* Loading Spinner Styles */ .loading-spinner-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; } .loading-spinner { border: 2px solid #f3f3f3; border-top: 2px solid #007bff; border-radius: 50%; animation: spin 1s linear infinite; } .loading-spinner.small { width: 16px; height: 16px; border-width: 2px; } .loading-spinner.medium { width: 32px; height: 32px; border-width: 3px; } .loading-spinner.large { width: 48px; height: 48px; border-width: 4px; } .loading-text { margin-top: 8px; color: #666; font-size: 14px; text-align: center; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Loading Overlay Styles */ .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; } .loading-overlay-content { background: white; border-radius: 8px; padding: 2rem; max-width: 400px; width: 90%; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .progress-container { margin-top: 1rem; } .progress-bar { width: 100%; height: 8px; background-color: #f0f0f0; border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; background-color: #007bff; transition: width 0.3s ease; border-radius: 4px; } .progress-text { margin-top: 8px; font-size: 14px; color: #666; } /* DYNAMIC INPUT EXPANSION FOR PLACEHOLDER TEXT */ input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input:not([type]), textarea, select, .form-group input, .form-group textarea, .form-group select, .searchable-dropdown input, .modal-content input, .modal-content textarea, .modal-content select { width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 2.5em !important; padding: 12px !important; border: 1px solid #ddd !important; border-radius: 8px !important; font-size: 16px !important; line-height: 1.4 !important; box-sizing: border-box !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; } /* Exception for quantity and discount input boxes */ input[style*="width: 75px"] { width: 75px !important; max-width: 75px !important; min-width: 75px !important; padding: 0 !important; } /* Responsive design for recent changes */ @media (max-width: 768px) { /* Make note text smaller on mobile */ span[style*="color: red"] { font-size: 12px !important; } /* Adjust input boxes for mobile */ input[style*="width: 75px"] { width: 60px !important; max-width: 60px !important; min-width: 60px !important; } } @media (max-width: 480px) { /* Further reduce input size on very small screens */ input[style*="width: 75px"] { width: 50px !important; max-width: 50px !important; min-width: 50px !important; } } /* Specific expansion for inputs with long placeholders */ input[placeholder*="Search by customer name"], input[placeholder*="Enter customer name"], input[placeholder*="Enter vehicle registration"], input[placeholder*="Enter works to be carried out"] { width: 100% !important; min-width: 300px !important; } @media (max-width: 768px) { input[placeholder*="Search by customer name"], input[placeholder*="Enter customer name"], input[placeholder*="Enter vehicle registration"], input[placeholder*="Enter works to be carried out"] { min-width: 100% !important; font-size: 14px !important; } } /* Professional Automotive Theme */ :root { --primary: #1a365d; --secondary: #2d3748; --accent: #3182ce; --success: #38a169; --warning: #d69e2e; --danger: #e53e3e; --light: #f7fafc; --dark: #1a202c; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } /* Ensure proper viewport handling */ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* Improve touch targets for mobile */ @media (max-width: 768px) { button, input[type="button"], input[type="submit"], input[type="reset"], .btn { min-height: 44px; min-width: 44px; } a { min-height: 44px; display: inline-flex; align-items: center; } } body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .container { background: black; border-radius: 12px; box-shadow: var(--shadow); margin: 20px auto; max-width: 1400px; width: calc(100% - 40px); min-height: calc(100vh - 40px); } header { background: linear-gradient(to bottom, #667eea, rgba(118, 75, 162, 0.3)); color: white; padding: 30px; border-radius: 12px 12px 0 0; text-align: center; } header h1 { font-size: 2.5rem; margin-bottom: 10px; font-weight: 700; } nav { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 20px; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; } nav a { color: black; text-decoration: none; padding: 12px 24px; border-radius: 8px; background: rgba(255,255,255,0.1); transition: all 0.3s ease; font-weight: 500; border: 2px solid black; } nav a:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); } header nav .btn:not(.btn-signout) { border: 2px solid black; } header nav .btn-signout { border: 2px solid black; } .content { padding: 40px; color: white; } /* Make all table text black */ table, th, td { color: black !important; } /* Make all dropdown list text black */ div[style*="position: absolute"][style*="backgroundColor: white"], div[style*="position: absolute"][style*="background-color: white"], div[style*="position: absolute"][style*="backgroundColor: 'white'"], div[style*="position: absolute"][style*="background-color: 'white'"] { color: black !important; } div[style*="position: absolute"] div { color: black !important; } .form-group { margin-bottom: 25px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--secondary); font-size: 1.1rem; } /* Global input expansion styles with !important */ input, textarea, select, .form-group input, .form-group textarea, .form-group select { width: 100% !important; padding: 15px !important; border: 2px solid var(--border) !important; border-radius: 8px !important; font-size: 16px !important; transition: border-color 0.3s ease !important; box-sizing: border-box !important; min-height: 3em !important; height: auto !important; line-height: 1.3 !important; white-space: pre-wrap !important; word-wrap: break-word !important; overflow-wrap: break-word !important; resize: vertical !important; max-height: none !important; display: block !important; vertical-align: top !important; overflow: visible !important; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1); } .form-group input[readonly] { background-color: #f8f9fa; color: #6c757d; } /* Global styles moved to component-specific CSS files */ .btn-secondary { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important; color: white !important; height: 50px; display: inline-flex; align-items: center; justify-content: center; } .btn-secondary:hover:not(:disabled) { background: linear-gradient(135deg, #3a4556 0%, #1a202c 100%) !important; color: white !important; } .btn-signout { background: #dc3545 !important; color: black !important; height: 50px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid black !important; padding: 12px 24px !important; } .btn-signout:hover:not(:disabled) { background: #c82333 !important; color: black !important; } .subscription-active { background: #f0fff0 !important; border: 2px solid #32cd32 !important; } .btn-subscribed { background: #28a745 !important; color: white !important; cursor: not-allowed !important; } .btn-subscribed:hover { background: #28a745 !important; } .subscription-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .subscription-price { font-size: 24px; color: var(--accent); font-weight: bold; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .staff-member-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); } .staff-member-row strong { color: black !important; } .signature-pad { border: 2px solid var(--border); border-radius: 8px; background: white; } .media-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; margin-top: 15px; } .media-preview img, .media-preview video { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow); } .installation-card { border: 1px solid var(--border); border-radius: 12px; padding: 25px; background: #b0b0b0; box-shadow: var(--shadow); margin-bottom: 20px; transition: transform 0.3s ease; color: black; } .installation-card p { color: black; } .installation-card:hover { transform: translateY(-2px); } .installation-card h3 { color: var(--primary); margin-bottom: 15px; font-size: 1.4rem; } .status-badge { padding: 6px 12px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; margin-left: 10px; } .status-completed { background: #c6f6d5; color: #22543d; } .status-handed-in { background: #fef5e7; color: #744210; } .camera-container { background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 15px 0; } .camera-controls { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; } /* Tablet styles */ @media (max-width: 1024px) { .container { max-width: 95%; margin: 15px auto; } nav { gap: 12px; } nav a { padding: 12px 20px; font-size: 15px; } } /* Mobile styles */ @media (max-width: 768px) { .container { margin: 5px; border-radius: 8px; width: calc(100% - 10px); min-height: calc(100vh - 10px); } header { padding: 15px; } header h1 { font-size: 1.8rem; line-height: 1.2; } /* Mobile logo adjustments */ .header-logo { height: clamp(150px, 20vw, 200px) !important; max-width: 95vw !important; } .landing-page img[src*="Autiva-FullLogo"] { height: clamp(200px, 25vw, 280px) !important; max-width: 95vw !important; } nav { gap: 8px; flex-direction: column; align-items: center; width: 100%; } nav a { padding: 12px 16px; font-size: 14px; text-align: center; margin: 2px 0; width: 100%; max-width: 300px; display: block; } .content { padding: 15px; } .btn { width: 100%; margin: 8px 0; min-height: 50px; font-size: 16px; padding: 12px 16px; } .camera-controls { flex-direction: column; width: 100%; } .camera-controls .btn { width: 100%; margin: 5px 0; } .media-preview { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .installation-card { padding: 15px; margin-bottom: 15px; } .form-group { margin-bottom: 20px; } .form-group label { font-size: 16px; margin-bottom: 8px; } .signature-container { width: 100%; max-width: none; } .signature-pad { width: 100% !important; height: 150px !important; } } /* Small mobile styles */ @media (max-width: 480px) { .container { margin: 2px; width: calc(100% - 4px); min-height: calc(100vh - 4px); } header { padding: 10px; } header h1 { font-size: 1.5rem; line-height: 1.2; } /* Small mobile logo adjustments */ .header-logo { height: clamp(120px, 18vw, 160px) !important; max-width: 98vw !important; } .landing-page img[src*="Autiva-FullLogo"] { height: clamp(150px, 22vw, 220px) !important; max-width: 98vw !important; } .content { padding: 10px; } .form-group input, .form-group textarea, .form-group select { padding: 12px; font-size: 16px; min-height: 48px; } .media-preview { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; } .installation-card { padding: 12px; } .form-grid { grid-template-columns: 1fr; gap: 10px; } .subscription-grid { grid-template-columns: 1fr; gap: 15px; } .btn { min-height: 48px; font-size: 16px; padding: 14px 16px; } .signature-pad { height: 120px !important; } nav a { padding: 14px 16px; font-size: 16px; min-height: 48px; display: flex; align-items: center; justify-content: center; } } /* Dedicated Landing Page Styles */ .landing-page { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .landing-content { background: #b0b0b0; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); margin: 0 auto; max-width: 1200px; padding: 40px; min-height: calc(100vh - 40px); } .landing-subtitle { font-size: 1.2rem; margin-bottom: 30px; } .header-subtitle { color: black; font-size: 1.4rem; font-weight: bold; margin: 0; } .landing-list { margin-bottom: 30px; } .landing-section { margin-bottom: 30px; } .plan-card { background: #f8f9fa; } .getting-started-section { background: #e8f4fd; padding: 20px; border-radius: 8px; margin-bottom: 30px; } .user-roles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; } .role-card { padding: 15px; border-radius: 8px; } .owner-role { background: #fff3cd; } .staff-role { background: #d1ecf1; } .cta-section { text-align: center; background: #d4edda; padding: 20px; border-radius: 8px; } .get-started-btn { background: #28a745 !important; color: white !important; font-size: 1.2rem; padding: 15px 40px; margin: 20px auto !important; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; display: block !important; } .get-started-btn:hover { background: #218838 !important; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .status-page-btn { margin: 0 auto 20px auto !important; background-color: #6c757d !important; display: block !important; } /* Authentication Styles */ .auth-footer { text-align: center; margin-top: 10px; } .clear-session-btn { background: none; border: none; color: #007bff; text-decoration: underline; cursor: pointer; font-size: 12px; } /* Custom Alert Styles */ .custom-alert-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; padding: 20px; } .custom-alert-box { background: white; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); max-width: 500px; width: 100%; animation: alertSlideIn 0.3s ease-out; } .custom-alert-content { padding: 30px; text-align: center; } .custom-alert-content p { margin: 0 0 25px 0; font-size: 1.1rem; line-height: 1.5; color: #333; } .custom-alert-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .custom-alert-btn { min-width: 100px; padding: 12px 24px; font-size: 1rem; font-weight: 600; } .copy-btn { min-width: 120px; padding: 12px 24px; font-size: 1rem; font-weight: 600; } @keyframes alertSlideIn { from { opacity: 0; transform: scale(0.9) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Signature Pad Styles */ .signature-container { position: relative; width: 100%; max-width: 500px; border: 2px solid var(--border); border-radius: 8px; background: white; } .signature-pad { width: 100% !important; height: 200px !important; max-width: 100%; display: block; border: none; border-radius: 8px; } .signature-clear-btn { position: absolute; top: 5px; right: 5px; padding: 5px 10px; font-size: 12px; z-index: 10; min-width: auto; width: auto; height: auto; margin: 0; } /* Image Capture Button States */ .btn-image-captured { background-color: #28a745 !important; color: white !important; border-color: #28a745 !important; } /* Header Logo - Responsive */ .header-logo { height: clamp(200px, 25vw, 300px); margin-bottom: 10px; max-width: 90vw; object-fit: contain; display: block; margin: 0 auto 10px auto; } /* Landing Page Logo - Responsive */ .landing-page img[src*="Autiva-FullLogo"] { height: clamp(250px, 30vw, 400px) !important; max-width: 90vw !important; object-fit: contain !important; display: block !important; } /* User Info Container */ .user-info-container { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 12px 20px; margin: 15px auto; max-width: 600px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .user-info-label { font-size: 14px; color: #6c757d; margin-bottom: 4px; } .user-info-email { font-size: 16px; font-weight: bold; color: #495057; margin-bottom: 4px; } .user-info-badge { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 12px; display: inline-block; } .owner-badge { color: #28a745; background-color: #d4edda; } .staff-badge { color: #007bff; background-color: #d1ecf1; } .organization-info { margin-top: 8px; padding-top: 8px; border-top: 1px solid #dee2e6; } .organization-name { font-size: 14px; color: #495057; font-weight: 600; margin-bottom: 2px; } .organization-owner { font-size: 13px; color: #6c757d; font-style: italic; } /* Access Restricted Container */ .access-restricted-container { background-color: #f8f9fa; border: 2px solid #dc3545; text-align: center; padding: 20px; } .access-restricted-container h3 { color: #dc3545; } .access-restricted-container p { color: #6c757d; margin: 10px 0; } /* Delete Account Grid */ .delete-account-grid { margin-top: 10px; } .delete-account-button { background-color: #dc3545 !important; color: white !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* Header Container Styles */ .header-container { margin: 10px auto; padding: 15px; border-radius: 8px; width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; } .header-container h3 { margin: 0 0 15px 0; font-size: 1.1rem; text-align: center; } .header-grid { display: grid; gap: 10px; justify-items: center; } .header-grid-2col { grid-template-columns: 1fr 1fr; } .header-grid-1col { grid-template-columns: 1fr; } /* Management Container */ .management-container { border: 2px solid #007bff; } .management-button { background-color: #007bff !important; color: white !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .management-button:hover { background-color: #0056b3 !important; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } /* Customer Interactions Container */ .customer-interactions-container { border: 2px solid #28a745; } .customer-interactions-button { background-color: #28a745 !important; color: white !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* Secure Information Container */ .secure-info-container { background-color: #a71e2a; border: 2px solid #a71e2a; } .secure-info-container h3 { color: white; } .secure-info-button { background-color: #c82333 !important; color: white !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* EPOS Container */ .epos-container { border: 2px solid #ffc107; background-color: #fff3cd; } .epos-container h3 { color: #856404; } .epos-button { background-color: #ffc107 !important; color: #212529 !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; border: 2px solid #212529 !important; font-weight: 600 !important; } .epos-button:hover { background-color: #e0a800 !important; color: #212529 !important; } /* System Container */ .system-container { border: 2px solid #6f42c1; } .system-button { background-color: #6f42c1 !important; color: white !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* Center odd buttons in header containers when viewport is wide enough */ @media (min-width: 769px) { .header-grid-2col:has(.system-button:nth-child(odd):last-child) .system-button:last-child, .header-grid-2col:has(.management-button:nth-child(odd):last-child) .management-button:last-child, .header-grid-2col:has(.customer-interactions-button:nth-child(odd):last-child) .customer-interactions-button:last-child { grid-column: 1 / -1; justify-self: center; max-width: 200px; } } /* System button styling - ensure Change Password matches other buttons */ .system-button { background-color: #6f42c1 !important; color: white !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; border: 2px solid black !important; font-size: 16px !important; font-weight: 600 !important; padding: 12px 24px !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.3s ease !important; text-decoration: none !important; min-height: 50px !important; } .system-button:hover { background-color: #5a32a3 !important; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .system-button-wide { min-width: 120px; } /* Ensure all management buttons have consistent styling */ .management-button { border-radius: 8px !important; padding: 12px 24px !important; } /* Responsive Design */ @media (max-width: 768px) { .header-grid-2col { grid-template-columns: 1fr; justify-items: center; } .header-container { margin: 10px 0; padding: 10px; } .header-container h3 { font-size: 1rem; } nav a { font-size: 0.9rem; padding: 8px; } .form-group { margin-bottom: 15px; } .form-group input, .form-group select, .form-group textarea { font-size: 16px; } .btn { font-size: 16px; padding: 12px 16px; } .media-preview { grid-template-columns: 1fr; } .camera-controls { flex-direction: column; gap: 10px; } .camera-controls button { width: 100%; } } @media (max-width: 480px) { .container { padding: 10px; } .header-container { margin: 5px 0; padding: 8px; } .installation-card { padding: 15px; } .subscription-grid { grid-template-columns: 1fr; } } /* Footer Styles */ .app-footer { background: #b0b0b0; border-radius: 12px; border: 2px solid black; padding: 20px 0; margin: 40px 20px 20px 20px; text-align: center; box-shadow: var(--shadow); } .footer-content { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .footer-links { margin-bottom: 15px; } .footer-links a { color: #007bff; text-decoration: none; margin: 0 15px; font-size: 14px; } .footer-links a:hover { text-decoration: underline; } .footer-links button:hover { text-decoration: underline; } .footer-business-continuity-btn { background: none; border: none; color: #007bff; text-decoration: none; cursor: pointer; margin: 0 15px; font-size: 14px; padding: 0; } .footer-social { display: flex; justify-content: center; gap: 20px; margin: 16px 0; } .footer-social a { color: #999; transition: color 0.2s, transform 0.2s; display: flex; align-items: center; } .footer-social a:hover { color: #fff; transform: scale(1.15); } .footer-credits { margin-bottom: 15px; } .footer-credits p { margin: 5px 0; font-size: 13px; color: black; } .footer-credits a { color: #007bff; text-decoration: none; } .footer-credits a:hover { text-decoration: underline; } .footer-copyright { font-size: 12px; color: black; } .footer-legal { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, 0.3); font-size: 11px; color: black; text-align: center; } .footer-legal p { margin: 0; line-height: 1.5; } /* Legal Content Styles */ .legal-content { max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.6; } .legal-content h2 { color: #333; border-bottom: 2px solid #007bff; padding-bottom: 10px; margin-bottom: 30px; } .legal-content h3 { color: #555; margin-top: 25px; margin-bottom: 10px; } .legal-content p { margin-bottom: 15px; color: #666; } .legal-content ul { margin-bottom: 15px; padding-left: 20px; } .legal-content li { margin-bottom: 5px; color: #666; } .credits-section { margin-bottom: 30px; padding: 20px; background-color: #f8f9fa; border-radius: 5px; } .legal-content a { color: #007bff; text-decoration: none; } .legal-content a:hover { text-decoration: underline; } /* Instructions Styles */ .instructions { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 20px; margin-bottom: 25px; } .instructions h3 { margin-top: 0; color: #495057; font-size: 1.2rem; } .instructions h4 { margin-top: 20px; margin-bottom: 10px; color: #6c757d; font-size: 1.1rem; } .instructions ol, .instructions ul { margin-bottom: 15px; padding-left: 25px; } .instructions li { margin-bottom: 8px; line-height: 1.5; } .instructions p { margin-bottom: 10px; line-height: 1.6; } /* Mobile responsive for landing page */ @media (max-width: 768px) { .user-roles-grid { grid-template-columns: 1fr; gap: 15px; } .custom-alert-box { margin: 20px; max-width: calc(100% - 40px); } .custom-alert-content { padding: 25px 20px; } .custom-alert-content p { font-size: 1rem; } } /* HandIn Component Responsive Styles */ .signing-section { border: 1px solid #ddd; padding: clamp(15px, 4vw, 20px); border-radius: 8px; background-color: #f9f9f9; margin: 15px 0; } .signing-header { margin: 0 0 15px 0; color: #333; font-size: clamp(16px, 4vw, 18px); } .signing-instructions { margin-bottom: 15px; } .instruction-text { display: block; margin-bottom: 8px; word-break: break-word; line-height: 1.4; font-size: clamp(13px, 3.5vw, 14px); } .checkbox-label { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; cursor: pointer; } .checkbox-input { margin-top: 2px; flex-shrink: 0; min-width: 16px; min-height: 16px; width: clamp(16px, 4vw, 18px); height: clamp(16px, 4vw, 18px); } .checkbox-text { word-break: break-word; line-height: 1.4; font-size: clamp(13px, 3.5vw, 14px); flex: 1; min-width: 200px; } .signature-disclaimer { margin: 10px 0; font-size: clamp(14px, 3.5vw, 15px); font-weight: bold; color: #333; line-height: 1.4; } .clear-signature-btn { margin-top: 10px; width: 100%; max-width: 200px; } .additional-info-section { margin: 15px 0; } .additional-info-header { display: block; margin-bottom: 10px; word-break: break-word; line-height: 1.4; font-size: clamp(14px, 3.5vw, 16px); font-weight: bold; color: #333; } .additional-info-content { margin-bottom: 12px; } .additional-info-text { display: block; margin-bottom: 5px; word-break: break-word; line-height: 1.4; font-size: clamp(13px, 3.5vw, 14px); font-weight: normal; color: #555; } .additional-info-details { display: block; word-break: break-word; line-height: 1.4; font-size: clamp(12px, 3vw, 13px); font-weight: normal; color: #666; font-style: italic; } .additional-info-checkbox { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; cursor: pointer; } .additional-info-input { margin-top: 2px; flex-shrink: 0; min-width: 16px; min-height: 16px; width: clamp(16px, 4vw, 18px); height: clamp(16px, 4vw, 18px); } .additional-info-label { word-break: break-word; line-height: 1.4; font-size: clamp(13px, 3.5vw, 14px); flex: 1; min-width: 200px; } @media (max-width: 768px) { .signing-section { padding: 15px; } .checkbox-text { min-width: unset; } .additional-info-label { min-width: unset; } } .additional-info-container { border: 1px solid #ddd; padding: clamp(15px, 4vw, 20px); border-radius: 8px; background-color: #f9f9f9; } .additional-info-container-header { margin: 0 0 15px 0; color: #333; font-size: clamp(16px, 4vw, 18px); font-weight: 600; } @media (max-width: 768px) { .additional-info-container { padding: 15px; } } /* Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; padding: 20px; } .modal-content { background: #b0b0b0; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; animation: modalSlideIn 0.3s ease-out; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; border-bottom: 1px solid #e2e8f0; } .modal-header h2 { margin: 0; color: #1a365d; font-size: 1.5rem; } .close-button { background: none; border: none; font-size: 24px; cursor: pointer; color: #666; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s; } .close-button:hover { background-color: #f5f5f5; } .modal-content form { padding: 30px; } .form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e2e8f0; } @keyframes modalSlideIn { from { opacity: 0; transform: scale(0.9) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } } @media (max-width: 768px) { .modal-overlay { padding: 10px; } .modal-content { max-width: 100%; max-height: 95vh; } .modal-header { padding: 15px 20px; } .modal-content form { padding: 20px; } .form-actions { flex-direction: column; } .form-actions .btn { width: 100%; margin: 5px 0; } } /* Responsive Utility Classes */ .mobile-full-width { width: 100%; } .mobile-center { text-align: center; } .mobile-stack { display: flex; flex-direction: column; gap: 10px; } @media (max-width: 768px) { .mobile-hide { display: none !important; } .mobile-show { display: block !important; } .mobile-full-width { width: 100% !important; } .mobile-center { text-align: center !important; } .mobile-stack { flex-direction: column !important; } } /* Prevent horizontal scrolling on mobile */ body, html { overflow-x: hidden; width: 100%; } /* Ensure all containers respect viewport width */ * { max-width: 100%; box-sizing: border-box; } /* Fix for iOS Safari viewport issues */ @supports (-webkit-touch-callout: none) { .container { min-height: -webkit-fill-available; } } * { margin: 0; padding: 0; box-sizing: border-box; } body { line-height: 1.6; color: #333; } .container { margin: 0 auto; padding: 20px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 5px; font-weight: 600; } /* Targeted input expansion for placeholder text visibility */ input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input:not([type]), textarea, select, .form-group input, .form-group textarea, .form-group select, .searchable-dropdown input, .modal-content input, .modal-content textarea, .modal-content select { width: 100% !important; padding: 12px !important; border: 1px solid #ddd !important; border-radius: 8px !important; font-size: 16px !important; min-height: 2.5em !important; height: auto !important; line-height: 1.4 !important; box-sizing: border-box !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; } /* Ensure all dropdowns have black text */ select, select option, .form-group select, .form-group select option, .modal-content select, .modal-content select option, .searchable-dropdown select, .searchable-dropdown select option { color: #000 !important; } /* Button styles moved to component-specific CSS files */ .signature-pad { border: 1px solid #ddd; border-radius: 8px; background-color: white; width: 100%; max-width: 100%; } /* Calendar responsive */ .calendar-container { overflow-x: auto; margin: 20px 0; } .rbc-calendar { min-width: 600px; } /* Form overlays responsive */ .booking-form-overlay, .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .booking-form-container, .modal-content { background: white; border-radius: 8px; padding: 20px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; } /* Dropdown responsive */ .searchable-dropdown { position: relative; width: 100%; } .dropdown-options { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; border-radius: 8px; max-height: 200px; overflow-y: auto; z-index: 100; } .dropdown-option { padding: 10px; cursor: pointer; border-bottom: 1px solid #eee; } .dropdown-option:hover { background-color: #f5f5f5; } /* Table responsive */ table { width: 100%; border-collapse: collapse; overflow-x: auto; display: block; white-space: nowrap; } thead, tbody, tr { display: table; width: 100%; table-layout: fixed; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; word-wrap: break-word; } /* Calendar header responsive */ .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; } .calendar-header h2 { margin: 0; flex: 1; } .refresh-btn { padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; white-space: nowrap; } .refresh-btn:hover { background-color: #0056b3; } @media (max-width: 480px) { .calendar-header { flex-direction: column; align-items: stretch; } .refresh-btn { width: 100%; padding: 12px; font-size: 16px; } .rbc-calendar { min-width: 320px; font-size: 12px; } .booking-form-container, .modal-content { padding: 15px; margin: 10px; } .form-buttons { display: flex; flex-direction: column; gap: 10px; } .form-buttons .btn { width: 100%; margin: 0; } } .media-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .media-preview img, .media-preview video { max-width: 150px; max-height: 150px; border-radius: 8px; } /* Responsive Design */ @media (max-width: 1200px) { .container { padding: 15px; } } @media (max-width: 768px) { .container { padding: 10px; } /* Button responsive styles moved to component CSS */ .form-group { margin-bottom: 15px; } h1, h2, h3 { font-size: 1.5rem; margin-bottom: 15px; } .media-preview img, .media-preview video { max-width: 120px; max-height: 120px; } } @media (max-width: 480px) { .container { padding: 8px; } input, textarea, select { font-size: 16px !important; padding: 14px !important; } /* Button styles moved to component CSS */ h1, h2, h3 { font-size: 1.3rem; } .media-preview { justify-content: center; } .media-preview img, .media-preview video { max-width: 100px; max-height: 100px; } } /* Global loading cursor removed - now handled per component */ .handin-title { margin-bottom: 20px; color: #ccc; } /* Light grey text for labels and notes in Hand-In form */ label, .form-group label, .additional-info-header, .additional-info-text, .additional-info-details, .additional-info-label, .additional-info-container-header { color: #ccc !important; } /* Ensure dropdown options have black text */ .dropdown-option, .dropdown-option strong, .dropdown-option small { color: #000 !important; } .upload-status-container { text-align: center; margin-top: 10px; } .upload-status-text { color: #666; font-style: italic; margin-bottom: 10px; } .progress-bar { width: 100%; height: 8px; background-color: #f0f0f0; border-radius: 4px; overflow: hidden; margin-top: 8px; } .progress-fill { height: 100%; background-color: #007bff; transition: width 0.3s ease; border-radius: 4px; } /* Searchable dropdown styles */ .searchable-dropdown { position: relative; width: 100%; } /* Searchable dropdown specific styling */ .searchable-dropdown input[type="text"], .searchable-dropdown input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input:not([type]), textarea, select { width: 100% !important; min-width: 0 !important; padding: 12px !important; border: 1px solid #ddd !important; border-radius: 8px !important; font-size: 16px !important; min-height: 2.5em !important; height: auto !important; line-height: 1.4 !important; box-sizing: border-box !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; } .dropdown-options { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; max-height: 200px; overflow-y: auto; z-index: 1000; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } @media (max-width: 768px) { .dropdown-options { max-height: 150px; font-size: 14px; } .dropdown-option { padding: 12px; min-height: 48px; display: flex; flex-direction: column; justify-content: center; } .searchable-dropdown input { min-height: 48px !important; font-size: 16px !important; } } @media (max-width: 480px) { .dropdown-options { max-height: 120px; font-size: 13px; } .dropdown-option { padding: 10px; } } .dropdown-option { padding: 10px; cursor: pointer; border-bottom: 1px solid #eee; transition: background-color 0.2s; } .dropdown-option:hover { background-color: #f5f5f5; } .dropdown-option:last-child { border-bottom: none; } .dropdown-option.disabled { cursor: not-allowed; color: #999; background-color: #f9f9f9; } .dropdown-option.disabled:hover { background-color: #f9f9f9; } .handover-title { margin-bottom: 20px; } .signature-container { margin-top: 10px; } .clear-signature-btn { margin-top: 10px; } .upload-status-container { text-align: center; margin-top: 10px; } .upload-status-text { color: #666; font-style: italic; margin-bottom: 10px; } .additional-info-form { margin-bottom: 20px; } .form-instructions { margin: 5px 0 10px 0; font-size: 0.9em; color: #666; } .upload-status-container { text-align: center; margin-top: 10px; } .upload-status { color: #666; font-style: italic; margin-bottom: 10px; } .progress-bar { width: 100%; height: 8px; background-color: #f0f0f0; border-radius: 4px; overflow: hidden; margin-top: 8px; } .progress-fill { height: 100%; background-color: #007bff; transition: width 0.3s ease; border-radius: 4px; } .secure-info-title { margin-bottom: 20px; } .upload-status-container { text-align: center; margin-top: 10px; } .upload-status-text { color: #666; font-style: italic; margin-top: 8px; font-size: 0.9em; } .progress-bar { width: 100%; height: 8px; background-color: #f0f0f0; border-radius: 4px; overflow: hidden; margin-top: 8px; } .progress-fill { height: 100%; background-color: #28a745; transition: width 0.3s ease; border-radius: 4px; } .handover-notes-container { margin-top: 10px; padding: 12px; background-color: #f8f9fa; border-radius: 6px; border-left: 4px solid #007bff; } .handover-notes-title { font-weight: bold; margin-bottom: 8px; color: #495057; font-size: 0.95em; } .handover-notes-content { white-space: pre-wrap; margin: 0; line-height: 1.4; color: #6c757d; font-size: 0.9em; } /* Responsive design */ @media (max-width: 768px) { .handover-notes-container { padding: 10px; margin-top: 8px; } .handover-notes-title { font-size: 0.9em; } .handover-notes-content { font-size: 0.85em; } } @media (max-width: 480px) { .handover-notes-container { padding: 8px; border-radius: 4px; } .handover-notes-title { font-size: 0.85em; margin-bottom: 6px; } .handover-notes-content { font-size: 0.8em; line-height: 1.3; } } .installation-grid { display: grid; gap: 20px; } .installation-card { border: 1px solid #ddd; border-radius: 8px; padding: 20px; background-color: white; } .status-badge { padding: 4px 8px; border-radius: 4px; margin-left: 8px; } .status-completed { background-color: #d4edda; color: #155724; } .status-pending { background-color: #fff3cd; color: #856404; } .handover-notes-container { margin-top: 15px; padding: 10px; background-color: #f8f9fa; border-radius: 4px; } .additional-info-container { margin-top: 15px; padding: 10px; background-color: #f8f9fa; border-radius: 4px; color: black; } .additional-info-entry { margin-bottom: 15px; padding: 10px; background-color: #fff; border-radius: 4px; border: 1px solid #ddd; } .secure-info-display-container { margin-top: 15px; padding: 10px; background-color: #ffe6e6; border-radius: 4px; border: 1px solid #dc3545; color: black; } .secure-info-entry { margin-bottom: 20px; padding: 10px; background-color: #fff; border-radius: 4px; border: 1px solid #ddd; } .pdf-button { background: none; border: none; color: #007bff; text-decoration: underline; cursor: pointer; } .pdf-button:hover { color: #0056b3; } .pdf-button-secondary { background: none; border: none; color: #007bff; text-decoration: underline; cursor: pointer; margin-left: 10px; } .pdf-iframe-container { margin-top: 10px; border: 1px solid #ccc; border-radius: 4px; } .pdf-iframe { border: none; border-radius: 4px; width: 100%; height: 600px; } .search-container { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; } .search-input { width: 100% !important; max-width: none !important; min-height: 3em !important; height: auto !important; line-height: 1.3 !important; white-space: pre-wrap !important; word-wrap: break-word !important; overflow-wrap: break-word !important; display: block !important; vertical-align: top !important; box-sizing: border-box !important; resize: vertical !important; overflow: visible !important; } .refresh-button { padding: 10px 20px; white-space: nowrap; width: fit-content; align-self: flex-start; } .staff-signature-note { margin-top: 10px; font-weight: bold; color: #856404; } .additional-info-required { margin-top: 10px; font-weight: bold; color: #dc3545; } .date-info { font-size: 0.9em; color: #666; margin-top: 10px; } .entry-text { white-space: pre-wrap; margin: 5px 0 10px 0; } .legacy-entry-text { white-space: pre-wrap; margin: 5px 0; } .pdf-list-container { margin-top: 10px; } .pdf-item { margin-bottom: 10px; } .no-pdf-note { font-style: italic; color: #666; margin: 5px 0; } .refresh-help-text { font-size: 14px; color: #666; font-style: italic; margin-top: 5px; } /* Work Records Instructions Styles */ .installation-instructions { color: black; } .work-records-title { color: #ccc !important; } .instructions-list { padding-left: 20px; line-height: 1.6; } .instruction-item { margin-bottom: 10px; word-break: break-word; font-size: 14px; } .search-instruction-text { color: #ccc !important; } .search-criteria-list { margin-left: 20px; margin-top: 5px; font-size: 13px; color: #ccc !important; } /* Mobile Responsive Design */ @media (max-width: 768px) { .installation-grid { gap: 15px; } .installation-card { padding: 15px; } .search-input { min-height: 48px !important; font-size: 16px !important; padding: 12px !important; } .refresh-button { width: 100%; min-height: 48px; } .pdf-iframe { height: 400px; } .status-badge { display: block; margin: 8px 0; text-align: center; padding: 8px 12px; } } .handin-pdf-container, .handover-pdf-container { margin-top: 15px; padding: 10px; background-color: #e6f3ff; border-radius: 4px; border: 1px solid #007bff; color: black; } @media (max-width: 480px) { .installation-card { padding: 12px; } .pdf-iframe { height: 300px; } .additional-info-entry, .secure-info-entry { padding: 8px; margin-bottom: 10px; } .handover-notes-container, .additional-info-container, .secure-info-display-container { padding: 8px; } } .sync-status-indicator { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 4px; font-size: 14px; font-weight: 500; transition: all 0.3s ease; } .sync-status-icon { font-size: 16px; } .sync-status-syncing { background-color: #e3f2fd; color: #1976d2; border: 1px solid #90caf9; } .sync-status-syncing .sync-status-icon { animation: pulse 1.5s ease-in-out infinite; } .sync-status-success { background-color: #e8f5e9; color: #388e3c; border: 1px solid #81c784; } .sync-status-error { background-color: #ffebee; color: #d32f2f; border: 1px solid #ef5350; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .sales-management { padding: 20px; } .sales-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .sales-item { padding: 10px; border: 1px solid #eee; border-radius: 4px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } .sales-totals { background-color: #f8f9fa; padding: 15px; border-radius: 4px; margin-bottom: 20px; } .sales-actions { display: flex; gap: 10px; } /* Operations Container Styles */ .operations-container { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; } .operations-section { display: flex; flex-direction: column; gap: 10px; } .counter-operations { padding: 15px; border: 1px solid #dee2e6; border-radius: 4px; background-color: #f8f9fa; } .account-operations { padding: 15px; border: 1px solid #dee2e6; border-radius: 4px; background-color: #f8f9fa; } .operations-title { font-weight: bold; color: #495057; margin-bottom: 5px; } .operations-buttons { display: flex; gap: 10px; flex-wrap: wrap; } .report-controls { display: flex; flex-direction: row; gap: 10px; align-items: center; flex-wrap: wrap; padding: 15px; border: 1px solid #dee2e6; border-radius: 4px; background-color: #f8f9fa; } .report-date-input { padding: 10px; border: 1px solid #ccc; border-radius: 4px; } .accounts-search { margin-bottom: 20px; } .accounts-search-input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; } .accounts-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .accounts-table-container { width: 100%; overflow-x: auto; } .accounts-table { width: 100%; border-collapse: collapse; } .accounts-table-empty { color: #6c757d; font-size: 12px; min-width: 675px; background-color: white; } .btn-back { padding: 8px 16px; background-color: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; } .btn-edit-account { padding: 3px 6px; background-color: #007bff; color: white; border: none; border-radius: 3px; font-size: 10px; cursor: pointer; } @media (max-width: 768px) { .sales-grid { grid-template-columns: 1fr; } .sales-item { flex-direction: column; align-items: flex-start; gap: 10px; } /* Scale down button text on mobile */ table button { font-size: 8px !important; padding: 2px 4px !important; } } /* Import shared button styles */ /* SalesManagement specific loading spinner */ .loading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #ffffff; border-top: 2px solid transparent; border-radius: 50%; animation: sales-spin 1s linear infinite; margin-right: 8px; } @keyframes sales-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* End of Day Sales Report Modal Styles */ .eod-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .eod-modal-content { background-color: white; padding: 20px; border-radius: 8px; width: 600px; max-width: 90vw; max-height: 80vh; overflow-y: auto; } .eod-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .eod-modal-title { color: black; margin: 0; } .eod-modal-close { background: none; border: none; font-size: 18px; cursor: pointer; } .eod-date-info { margin-bottom: 20px; } .eod-date-title { color: black; margin: 0 0 5px 0; } .eod-generated-text { color: black; margin: 0; } .eod-summary-section { margin-bottom: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 4px; } .eod-summary-title { color: black; margin: 0 0 10px 0; } .eod-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .eod-summary-item { color: black; } .eod-summary-total { grid-column: 1 / -1; color: black; } .eod-sales-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .eod-sales-section { padding: 15px; border: 1px solid #dee2e6; border-radius: 4px; } .eod-sales-title { color: black; margin: 0 0 10px 0; } .eod-sales-text { color: black; margin: 5px 0; } .eod-payment-methods { margin-top: 10px; } .eod-payment-title { color: black; margin: 0 0 5px 0; } .eod-payment-item { color: black; } .eod-totals-section { padding: 15px; background-color: #e9ecef; border-radius: 4px; margin-bottom: 20px; } .eod-totals-title { color: black; margin: 0 0 10px 0; } .eod-totals-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; text-align: center; } .eod-totals-item { color: black; } .eod-actions { display: flex; gap: 10px; justify-content: flex-end; } .eod-btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; } .eod-btn-save { background-color: #28a745; color: white; } .eod-btn-print { background-color: #17a2b8; color: white; } .eod-btn-print-save { background-color: #007bff; color: white; } .eod-btn-close { background-color: #6c757d; color: white; } /* Account Operations Button Styles */ .btn-account-sale { padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; } .btn-account-sale:hover:not(:disabled) { background-color: #1e7e34; } .btn-account-sale:disabled { background-color: #ccc; cursor: wait; } .btn-account-quote { padding: 10px 20px; background-color: #17a2b8; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; } .btn-account-quote:hover:not(:disabled) { background-color: #138496; } .btn-account-quote:disabled { background-color: #ccc; cursor: wait; } .btn-add-account { padding: 10px 20px; background-color: #6f42c1; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; } .btn-add-account:hover:not(:disabled) { background-color: #5a32a3; } .btn-add-account:disabled { background-color: #ccc; cursor: wait; } .btn-accounts-list { padding: 10px 20px; background-color: #fd7e14; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; } .btn-accounts-list:hover:not(:disabled) { background-color: #dc6502; } .btn-accounts-list:disabled { background-color: #ccc; cursor: wait; } /* Product actions button styles */ .product-actions button.btn:disabled:not([data-loading="true"]) { cursor: not-allowed !important; } /* Fallback for any disabled button */ button:disabled, button:disabled:hover, .btn-primary:disabled:hover, .btn-warning:disabled:hover, .btn-success:disabled:hover, .btn-info:disabled:hover, .btn-purple:disabled:hover, .btn-orange:disabled:hover, .btn:disabled, .loading-button-disabled { cursor: not-allowed !important; } /* Override LoadingButton component styles specifically */ .installation-card .btn:disabled, .installation-card button:disabled, .product-actions .btn:disabled, .product-actions button:disabled { cursor: not-allowed !important; } /* Price input styling - increased by 1/3rd from 75px to 100px */ .price-input { width: 100px; max-width: 100px; min-width: 100px; padding: 0; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; box-sizing: border-box; text-align: center; } /* Convert button styling - allows text wrapping */ .convert-button { white-space: normal; word-wrap: break-word; text-align: center; line-height: 1.2; } /* Sales list button hover styles */ .sales-edit-btn { padding: 3px 6px; background-color: #6c757d; color: white; border: none; border-radius: 3px; font-size: 10px; cursor: pointer; transition: all 0.2s ease; } .sales-edit-btn:hover { background-color: #5a6268; } .sales-view-booking-btn { padding: 3px 6px; background-color: #28a745; color: white; border: none; border-radius: 3px; font-size: 10px; cursor: pointer; transition: all 0.2s ease; } .sales-view-booking-btn:hover { background-color: #218838; } .sales-convert-booking-btn { padding: 3px 6px; background-color: #17a2b8; color: white; border: none; border-radius: 3px; font-size: 10px; cursor: pointer; transition: all 0.2s ease; } .sales-convert-booking-btn:hover { background-color: #138496; } .sales-go-to-sale-btn { padding: 3px 6px; background-color: #007bff; color: white; border: none; border-radius: 3px; font-size: 10px; cursor: pointer; transition: all 0.2s ease; } .sales-go-to-sale-btn:hover { background-color: #0056b3; } /* EOD Report Button */ .btn-eod-report { padding: 10px 20px; background-color: #6f42c1; color: white; border: none; border-radius: 4px; } .delete-modal-warning { color: #000 !important; } .tab-navigation { display: flex; gap: 10px; margin-bottom: 20px; } .tab-navigation button { padding: 10px 20px; border: 1px solid #ddd; background: #f5f5f5; cursor: pointer; border-radius: 4px; } .tab-button-active { background: #f0f8ff; color: #007bff; border-color: #007bff; } .tab-button-inactive { background: #f5f5f5; color: #333; border-color: #ddd; } .tab-navigation button:hover { background: #e9ecef; } .tab-button-active:hover { background: #e6f3ff; } .tab-button-inactive:hover { background: #e9ecef; } /* Component-specific button disabled styles */ button:disabled, .btn:disabled { background: #cbd5e0; cursor: not-allowed; } /* Loading button styles - ensure they work in EPOS */ button[data-loading="true"] { opacity: 0.7 !important; cursor: wait !important; pointer-events: none !important; position: relative !important; } .loading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #ffffff; border-top: 2px solid transparent; border-radius: 50%; animation: epos-spin 1s linear infinite; margin-right: 8px; } @keyframes epos-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Product action buttons layout */ .product-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } .product-actions .btn { flex: 1; min-width: 200px; margin: 0; } @media (max-width: 768px) { .product-actions { flex-direction: column; } .product-actions .btn { flex: none; width: 100%; } } /* Compact scan button for Goods In modal */ .goods-in-scan-btn { padding: 4px 8px !important; font-size: 12px !important; min-width: auto !important; width: auto !important; } /* Stock Reports table with sticky header and scroll indicator */ .stock-reports-container { position: relative; } .stock-reports-scroll-indicator { height: 12px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; margin-bottom: 10px; position: relative; cursor: pointer; } .stock-reports-scroll-thumb { height: 10px; background: linear-gradient(90deg, #007bff 0%, #17a2b8 50%, #007bff 100%); border-radius: 5px; position: absolute; top: 1px; cursor: grab; min-width: 20px; transition: background 0.2s ease; } .stock-reports-scroll-thumb:hover { background: linear-gradient(90deg, #0056b3 0%, #138496 50%, #0056b3 100%); } .stock-reports-scroll-thumb:active { cursor: grabbing; } .stock-reports-table-wrapper { max-height: 70vh; overflow: auto; border: 1px solid #dee2e6; border-radius: 4px; position: relative; } .stock-reports-table { width: 935px; border-collapse: collapse; table-layout: fixed; font-size: 12px; margin: 0; } .stock-reports-table th { background-color: #f8f9fa !important; border: 1px solid #dee2e6 !important; border-bottom: 2px solid #dee2e6 !important; position: sticky !important; top: 0 !important; z-index: 999 !important; padding: 6px !important; text-align: left !important; font-size: 11px !important; } /* Stock Order Report Table Styles */ .stock-order-table { width: 100%; border-collapse: collapse; } .stock-order-table th { padding: 8px; border: 1px solid #dee2e6; text-align: left; word-wrap: break-word; white-space: normal; hyphens: auto; background-color: #f8f9fa; font-size: 12px; } .stock-order-table th.center { text-align: center; } .stock-order-table td { padding: 8px; border: 1px solid #dee2e6; word-wrap: break-word; white-space: normal; } .stock-order-table td.center { text-align: center; } .stock-order-table td.suggested-order { text-align: center; font-weight: bold; color: #dc3545; } .stock-order-table td.ordered-btn { text-align: center; padding: 4px; } .stock-order-table .btn-ordered { padding: 4px 8px; background-color: #28a745; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 12px; } .stock-order-table .btn-ordered:hover { background-color: #218838; } /* EposSystem Reports Styles */ /* Layout and Grid Styles */ .reports-grid { display: grid; grid-template-columns: 200px 1fr; gap: 15px; margin-bottom: 20px; align-items: end; } .reports-grid-3col { display: grid; grid-template-columns: 200px 200px 1fr; gap: 15px; margin-bottom: 20px; align-items: end; } .reports-grid-4col { display: grid; grid-template-columns: 0.8fr 0.8fr 1.4fr 1fr; gap: 15px; margin-bottom: 20px; align-items: end; } .summary-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; text-align: center; } .summary-grid-4col { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 15px; text-align: center; } /* Section Styles */ .section-margin { margin-bottom: 30px; } .section-margin-20 { margin-bottom: 20px; } .section-divider { margin: 30px 0; border: none; border-top: 1px solid #dee2e6; } /* Summary Card Styles */ .summary-card { margin-bottom: 20px; padding: 15px; border-radius: 4px; color: black; } .summary-card-stock { background-color: #fff3cd; } .summary-card-balances { background-color: #f8d7da; } .summary-card-sales { background-color: #f8f9fa; } /* Summary Metric Styles */ .summary-metric { font-size: 24px; font-weight: bold; } .summary-metric-label { font-size: 12px; color: #666; } .metric-stock { color: #856404; } .metric-danger { color: #dc3545; } .metric-info { color: #17a2b8; } .metric-success { color: #28a745; } .metric-primary { color: #007bff; } /* Status Message Styles */ .status-success { padding: 20px; text-align: center; background-color: #d4edda; border-radius: 4px; color: #155724; } .status-info { padding: 20px; text-align: center; background-color: #f8f9fa; border-radius: 4px; color: #666; } /* Form Styles */ .form-label { display: block; margin-bottom: 5px; font-weight: bold; } .form-input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; } .form-input-search { width: 300px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; } /* Table Styles */ .table-container-scrollable { overflow-x: auto; max-height: 400px; border: 1px solid #dee2e6; border-radius: 4px; } .table-full { width: 100%; border-collapse: collapse; table-layout: auto; word-wrap: break-word; } .table-header { background-color: #f8f9fa; position: sticky; top: 0; } .table-cell { padding: 8px; border: 1px solid #dee2e6; text-align: left; } .table-cell-center { padding: 8px; border: 1px solid #dee2e6; text-align: center; } .table-cell-right { padding: 8px; border: 1px solid #dee2e6; text-align: right; } .table-cell-small { padding: 6px; border: 1px solid #dee2e6; font-size: 11px; word-wrap: break-word; white-space: normal; overflow-wrap: break-word; hyphens: auto; } .table-cell-sku { max-width: 120px; word-wrap: break-word; white-space: normal; overflow-wrap: break-word; } .table-cell-description { max-width: 250px; word-wrap: break-word; white-space: normal; overflow-wrap: break-word; } .table-cell-brand { max-width: 100px; word-wrap: break-word; white-space: normal; overflow-wrap: break-word; } .table-cell-outstanding { font-weight: bold; color: #dc3545; } /* Ordered Stock Table Styles */ .ordered-stock-table { background-color: #d4edda; } .ordered-stock-header { background-color: #c3e6cb; } .ordered-stock-row { background-color: #d4edda; } /* Empty State Styles */ .empty-state { padding: 20px; text-align: center; border-radius: 4px; color: #6c757d; font-size: 11px; } /* Banner Notification Styles */ .banner-notification { position: fixed; top: 0; left: 0; right: 0; padding: 15px 20px; z-index: 10000; font-size: 16px; font-weight: bold; text-align: center; } .banner-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .banner-error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* Trial Status Styles */ .trial-status { padding: 15px; border-radius: 4px; margin-bottom: 20px; } .trial-warning { background-color: #fff3cd; border: 1px solid #ffeaa7; color: #856404; } .trial-info { background-color: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; } .trial-reminder { margin-top: 5px; font-size: 14px; } /* Tab Navigation Styles */ .tab-navigation { display: flex; gap: 10px; margin-bottom: 20px; } .tab-button { flex: 1; padding: 10px; border: none; border-radius: 4px; cursor: pointer; } .tab-button-active { background-color: #f0f8ff; color: #007bff; border: 1px solid #007bff; } .tab-button-inactive { background-color: #f8f9fa; color: black; } /* Subscription Button */ .subscription-button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; } /* Instructions List */ .instructions-list { padding-left: 40px; } .instructions-list ~ ul { padding-left: 60px; } /* Tab Button Text Override */ .tab-button-inactive { background-color: #f8f9fa; color: black; } /* Outstanding Balances Table Styles */ .outstanding-balances-table { width: 100%; border-collapse: collapse; } .outstanding-balances-header { background-color: #f8f9fa; position: sticky; top: 0; } .outstanding-balances-cell { padding: 6px; border: 1px solid #dee2e6; font-size: 11px; } .outstanding-balances-customer { word-wrap: break-word; max-width: 200px; overflow-wrap: break-word; white-space: normal; } .outstanding-balances-email { word-wrap: break-word; max-width: 180px; overflow-wrap: break-word; white-space: normal; } .outstanding-balances-count { text-align: center; white-space: nowrap; } .outstanding-balances-amount { text-align: right; font-weight: bold; color: #dc3545; white-space: nowrap; }