@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap");@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap");@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap");@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap");/*
 * 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;
}.PermissionSelectContainer {
  width: 90%;
  justify-content: space-around;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.SelectButton {
  width: 33%;
  margin-top: 1%;
  margin-bottom: 1%;
  text-align: center;
}

.SelectableButton {
  border: solid;
  margin-top: 1%;
  margin-bottom: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
}

.SelectableButton.ButtonSelected {
  border-color: green;
  color: green;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  
}.PhoneInputCountry {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.UserForm {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.UserForm::-webkit-scrollbar {
  display: none;
}

.usernameRow {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
}

.userNameRow,
.userRow {
  width: 45%;
}

.UserRow {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.userProperty {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.userProperty input {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.userEditSection {
  width: 95%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 25px #333333;
  margin: 2%;
  padding: 2%;
  margin-left: auto;
  margin-right: auto;
}

.userRowTitle {
  width: 100%;
  text-align: center;
  font-size: 2.5rem;
}

.userNameRow {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.userNameRow.userProperty {
  width: 25%;
}

/* .UserForm {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: scroll;
} */


.UserPermissionSection,
.UserLoginStatsSection {
  box-shadow: 0 0 25px #333333;
  width: 95%;
  margin-top: 2%;
  margin-bottom: 2%;
  padding-top: 2%;
  padding-bottom: 2%;
  margin-left: auto;
  margin-right: auto;
}

.UserLoginStatsSection .UserRow {
  display: flex; 
  flex-direction: row;
}

.UserLoginStatsSection .UserRow .userProperty {
  width: 100%;
}

.UserLoginStatsSection .UserRow .userProperty .userInput input {
  width: 100%;
}

.StatWrapper {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.userLabel {
  font-size: 1rem;
}

.UserLoginStatsSection .UserRow .userProperty .userLabel {
  width: 75%;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.GeneralUserInfoWrapper .UserRow {
  flex-direction: row;
  justify-content: space-evenly;
}

.GeneralUserInfoWrapper .UserRow .userProperty {
  width: auto;
}

.UserNameEditWrapper {
  display: flex;
  flex-direction: row;
}

.UserNameEditWrapper .userNameRow .userProperty .propertyContainer .userInput input{
  width: 75%;
}

.UserEditActionButtons {
  text-align: center;
  margin-bottom: 2%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.UserEditActionButtons button {
  font-size: 1.5rem;
}

.UserGeographyWrapper .UserRow{
  flex-direction: row;
}

.UserGeographyWrapper .userProperty {
  /* width: 45%; */
  width: auto;
}

.UserContactWrapper .UserRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}


@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .UserForm {
    flex-direction: row;
  }

  .userEditSection {
    width: 45%;
  }

  .userRowTitle {
    font-size: 1.5rem;
  }

  .UserPermissionSection,
.UserLoginStatsSection {
  box-shadow: 0 0 25px #333333;
  width: 75%;
  margin-top: 2%;
  margin-bottom: 2%;
  padding-top: 2%;
  padding-bottom: 2%;
}
}.userOverviewRow {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.userOverviewRow.userTitleRow{
  display: none;
}

.userEntry {
  display: flex;
  flex-direction: row;
  margin-top: 4%;
  margin-bottom: 4%;
  border: solid;
  border-color: var(--list-dividing-line);
  font-size: 2rem;
}

.userEditHeader--Mobile {
  width: 25%;
}

.userOverviewRow {
  width: 75%;
  display: flex;
  flex-direction: column;
}

.manageUsersFooter {
  background-color: var(--list-header-background);
  font-size: 1rem;
  margin-top: 2%;
  margin-bottom: 0.5%;
  margin-left: 0;
  padding-top: 1%;
  padding-bottom: 1%;
  border-top: solid;
  border-color: red;
  width: 100%;
}

.userAddRow {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  font-size: 1.25rem;
  padding-top: 1%;
  padding-bottom: 1%;
}

.userAddRow button {
  font-size: 2rem;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .userEditHeader--Mobile {
    display: none;
  }

  .userTitleRow {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    background-color: var(--list-header-background);
    border-bottom: solid;
    border-color: red;
    height: 5%;
    padding-top: 1%;
    padding-bottom: 1%;
  }

  .userTitleRow button {
    font-size: 1rem;
    margin: 1%;
  }

  .userTitleRow a:hover {
    color: red;
  }

  .userEntry {
    margin-top: 0;
    margin-bottom: 0;
    border-style: none;
    padding-top: 1%;
    padding-bottom: 1%;
    border-bottom: solid;
    border-color: var(--list-header-background);
    border-width: 0.1rem;
  }

  .userOverviewRow {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1rem;
  }

  .userOverviewRow a {
    width: 20%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .userOverviewRow:hover {
    color: red;
    font-size: 1rem;
  }

  .userInfoCell {
    width: 20%
  }

  .userUsername,
  .userName,
  .userPhone,
  .userEmail,
  .userDealerCode {
    text-align: center;
  }
}.showItemsDropdown select {
  font-size: 2rem;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .showItemsDropdown {
    font-size: 1rem;
  }
  .showItemsDropdown select {
    font-size: 1rem;
  }
}.amplify-pagination button {
  font-size: 3rem;
}

.amplify-pagination .amplify-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly !important; /* Marked as important to override the default styling from this library*/
}

.amplify-pagination button[data-testid=current] {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .amplify-pagination {
    width: 50%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-around;
  }
  .amplify-pagination button {
    font-size: 1rem;
  }
  .amplify-pagination .amplify-flex {
    display: flex;
    flex-direction: row;
    justify-content: center !important;
  }
  .amplify-pagination button[data-testid=current] {
    width: 1.5rem;
    height: 1.5rem;
  }
}.SuperAdminUserModal {
  overflow: scroll;
}

.SuperAdminUserModal::-webkit-scrollbar {
  display: none;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
}.driverTitleRow {
  display: none;
}

.driverRecordRow {
  display: flex;
  flex-direction: column;
  margin-top: 4%;
  margin-bottom: 4%;
  font-size: 2rem;
  border: solid;
  border-color: var(--list-dividing-line);
}

.manageDriversFooter {
  background-color: var(--list-header-background);
  font-size: 1rem;
  margin-top: 2%;
  margin-bottom: 0.5%;
  margin-left: 0;
  padding-top: 1%;
  padding-bottom: 1%;
  border-top: solid;
  border-color: red;
  width: 100%;
}

.ManageDriversHeader {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.ManageDriversHeader button {
  font-size: 3rem;
}

.driverSearch {
  margin-top: auto;
  margin-bottom: auto;
}

.driverAdder {
  width: 100%;
  height: 100%;
}

.driverEditorTitle {
  text-align: center;
  font-size: 2rem;
}

.driverEditorTitle input {
  font-size: 1.5rem;
}

.driverEditorRow,
.driverLicenseEditor,
.driverEditorSubmitRow {
  font-size: 1.5rem;
  text-align: center;
}

.driverLicenseEditor {
  margin: 2%;
  margin-left: auto;
  margin-right: auto;
  border: solid;
  width: 50%;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .driverTitleRow {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: var(--list-header-background);
    border-bottom: solid;
    border-color: red;
    height: 5%;
    padding-top: 1%;
    padding-bottom: 1%;
  }

  .driverRecordRow {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    margin-top: 1%;
    margin-bottom: 1%;
    border: none;
    border-bottom: solid;
    border-color: var(--list-dividing-line);
    border-width: 0.1rem;
    font-size: 1rem;
  }

  .driverRecordRow:hover {
    color: red;
    font-size: 1rem;
  }

  .driverRowInfoCell {
    width: 33%;
  }
}.specDiv {
  width: 75%;
  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
}

.driverCategory {
  /* display: flex;
  flex-direction: column;
  padding: 5%;
  border: solid;
  margin-bottom: 5%;
  margin-top: 5%; */
}

.driverCategoryName {
  font-size: 4rem;
}

.driverDownloadEntry {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  border-bottom: solid;
  border-color: var(--list-dividing-line);
  border-width: 0.1rem;
}


.driverName {
  width: 25%;
}

.driverVersion {
  width: 25%;
}

.driverNotes {
  width: 50%;
}

.resourceMobileHidden {
  display: none;
}


@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .specDiv{
    width: 23%;
  }

  .specDiv a{
      text-decoration: none;
  }

  .specDiv:hover {
    cursor: pointer;
  }

  .specDiv.Manage {
    position: relative;
    top: 0;
    left: 0;
  }

  .specDiv.Manage .specsBlock {
    position: relative;
    color: black;
  }

  .specDiv.Manage:hover {
    cursor: grab;
  }

  .specDiv.Manage.dragging {
    cursor: grabbing;
  }

  .newResource {
    border: solid;
    border-color: white;
    padding-top: 5%;
    padding-bottom: 5%;
    font-size: 6rem;
  }

  .ManageResource--Informational {
    z-index: 3;
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    height: 100%;
    width: 100%;
    background-color: rgba(54, 54, 54, 0.6);
    font-size: 2rem;
  }

  .resourceEditor {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
  }

  .resourceEditorRow {
    display: flex;
    flex-direction: row;
    width: 100%;
  }

  .resourceEditorRow label {
    width: 30%;
  }

  .resourceEditorRow input,
  .resourceEditorRow select,
  .resourceEditor button {
    width: 70%;
    overflow: hidden;
  }

  .resourceEditorRow button {
    background-color: #545454;
  }

  .resourcePickerContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: scroll;
    justify-content: space-evenly;
  }

  .resourcePicker {
    margin-bottom: 1%;
  }

  .ResourceOptionTile {
    width: 45%;
    height: 25%;
    color: #545454;
    border: solid;
    border-color: #545454;
    padding-top: 5%;
    padding-bottom: 5%;
    overflow: hidden;
  }

  .ResourceOptionTile--Selected {
    color: green;
    border: solid;
    border-color: green;
    width: 45%;
    padding-top: 5%;
    padding-bottom: 5%;
    overflow: hidden;
  }

  .saveResourceRow {
    width: 100%;
    text-align: center;
  }

  .ImageTile {
    width: 22%;
    position: relative;
  }

  .ImageTile img {
    max-width: 100%;
    max-height: 100%;
    position: relative;
  }

  .ImageTile--SelectedOverlay {
    position: absolute;
    color: red;
    top: 0;
    right: 0;
    margin-top: auto;
    text-align: center;
    width: 100%;
    font-size: 8rem;
  }

  .driverCategoryName {
    font-size: 1.5rem;
    background-color: var(--list-header-background);
    color: white;
    text-align: center;
    /* margin-top: 1%;
    margin-bottom: 1%; */
    margin-right: auto;
    margin-left: auto;
    width: 90%;
  }

  .driverDownloadEntry {
    padding-top: 2%;
    padding-bottom: 2%;
  }

  .driverDownloader {
    cursor: pointer;
  }

  .driverCategory{
    display: flex;
    flex-direction: column;
    margin: 0;
    border: none;
}

.driverCategory a {
    text-decoration: none;
}

.driverDownloadEntry{ 
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 1%;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.driverDownloadEntry:hover {
  color: red;
}

.driverName,
.driverVersion,
.driverNotes {
    width: 25%;
    text-align: center;
}


/* Driver Download Confirm Modal*/
.DriverDownloadConfirm {
    z-index: 3;
    position: absolute;
    left: 25%;
    top: 25%;
    width: 50%;
    height: 50%;
    border-color: white;
    background-color: black;
    border-style: solid;
}

.driverDownloadText {
    top: 45%;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 2rem;
}

.driverDownloadButtonRow{
    bottom: 5%;
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
}

.resourceMobileHidden {
  display: block;
}
}.userInfoContainer {
  display: flex;
  flex-direction: row;
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  height: 100%;
}

.userInfo--Actions {
  width: 25%;
  border-right: solid;
  border-right-color: var(--list-dividing-line);
  height: 85%;
  text-align: left;
  font-size: 2rem;
  /* display: flex; */
  /* flex-direction: column;
  justify-content: space-evenly; */
}

.userInfo--ActionsBox {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 75%;
  font-size: 1rem;
}

.userInfo--ActionsBox button {
  font-size: 1.25rem;
}

.userInfo--Actions .adminHeader {
  text-align: center;

}

.adminActionButton {
  /* margin-top: 5%;
  margin-bottom: 5%; */
}

.adminActionButton button {
  text-align: left;
  width: 100%;
}

.adminActionButton button:hover,
.userEditContainer button:hover {
  font-size: 1.25rem;
  color: white;
}

.userInfo {
  width: 75%;
}

.userInfoBlock {
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.userInfo .adminHeader {
  font-size: 2rem;
  margin-bottom: 10%;
}

.userInfoHeader {
  max-width: 100%;
  min-width: 50%;
  text-align: left;
  font-size: 1.5rem;
}

.userInfoValue {
  max-width: 100%;
  min-width: 50%;
  text-align: left;
}

.UserEditModal {
  width: 100%;
  height: 100%;
}

.UserInfoChanger {
  width: 100%;
}

.UserChangeTitle { 
  width: 100%;
  text-align: center;
}

.UserChangeTitle h3 {
  font-size: 2rem;
}

.UserChangerRow {
  width: 25%;
  margin-left: auto;
  margin-right: auto;
}

.UserRowLabel {
  display: flex;
  flex-direction: column;
}

.UserRowLabel label {
  font-size: 1.5rem;
}

.UserRowLabel input {
  width: 100%;
}

.UserRowSubmit {
  margin-top: 10%;
  text-align: center;
}

.UserRowSubmit button {
  text-align: center;
  font-size: 1.5rem;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: red;
}

input:focus + .slider {
  box-shadow: 0 0 1px red;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.UIToggle {
  display: flex;
  flex-direction: row;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .userInfoContainer {
    display: flex;
    flex-direction: row;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    height: 100%;
  }

  .userInfo--Actions {
    width: 25%;
    border-right: solid;
    border-right-color: var(--list-dividing-line);
    height: 85%;
    text-align: left;
    font-size: 2rem;
    /* display: flex; */
    /* flex-direction: column;
    justify-content: space-evenly; */
  }

  .userInfo--ActionsBox {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 75%;
    font-size: 1rem;
  }

  .userInfo--ActionsBox button {
    font-size: 1.25rem;
  }

  .userInfo--Actions .adminHeader {
    text-align: center;

  }

  .adminActionButton {
    /* margin-top: 5%;
    margin-bottom: 5%; */
  }

  .adminActionButton button {
    text-align: left;
    width: 100%;
  }

  .adminActionButton button:hover,
  .userEditContainer button:hover {
    font-size: 1.25rem;
    color: white;
  }

  .userInfo {
    width: 75%;
  }

  .userInfoBlock {
    /* max-width: 50%; */
    margin-left: auto;
    margin-right: auto;
  }

  .userInfo .adminHeader {
    font-size: 2rem;
    margin-bottom: 10%;
  }

  .userInfoHeader {
    max-width: 100%;
    min-width: 50%;
    text-align: left;
    font-size: 1.5rem;
  }

  .userInfoValue {
    max-width: 100%;
    min-width: 50%;
    text-align: left;
  }

  .userInfoCell {
    width: 100%;
  }
}.cartButton {
  position: relative;
  margin-right: 50px;
}

.CartCount {
  position: absolute;
  top: 0;
  right: -25px;
  width: 60%;
  height: 60%;
  border-radius: 60%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  /* color: red; */
  /* font-size: 3rem; */
  /* margin-right: 50px; */
}

.CartCountNumber {
  font-size: 3rem;
  color: red;
}

.cartButtonIcon {
  font-size: 5rem;
  color: red;
}

.cartButtonIcon:hover {
  color: white;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .cartButton {
    margin-right: 0;
  }
  
  .cartButtonIcon {
    font-size: 2.5rem;
  }
  
  .CartCount {
    width: 50%;
    height: 50%;
    right: 0;
  }

  .CartCountNumber {
    font-size: 0.75rem;
  }
}.StoreHeader {
  width: 100%;
  display: flex;
  height: 5vh;
}

.StoreDisplayMode {
  width: 90%;
  text-align: right;
  font-size: 2rem; 
}

.CartButton {
  width: 10%;
  font-size: 2rem;
  text-align: center;
  position: relative;
  margin-right: 2.5%;
}

.CartButton button {
  position: relative;
  right: 2.5%;
}

.CartButton button {
  border: none;
}

.CartCount {
  background-color: white;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .StoreHeader {
    font-size: 2.5rem;
  }

  .CartButton {
    text-align: right;
    height: 100%;
  }

  .CartButton button {
    border: none;
  }

  .CartButton button:hover {
    color: white;
  }

  .CartButton button:hover .CartCount {
    background-color: red;
  }
}
.SystemsActionHeader {
  width: 100%;
  margin: auto;
  display: flex;
  font-size: 2rem;
}

.SystemsActionHeader button {
  font-size: 3rem;
  width: 20%;
}

.AddSystemIconButton {
  font-size: 3rem;
}

.SystemAdderOverlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 11, 11, 0.5)
}

/* System Add Modal*/
.SystemAdder {
  text-align: center;
  font-size: 2rem;
}

.SystemName,
.MainNodeMAC,
.NodeSerial {
  display: flex;
  flex-direction: column;
  margin-bottom: 2%;
}

.SystemName input,
.MainNodeMAC input,
.NodeSerial input {
  width: 50%;
  margin: auto;
}

.SystemName label,
.MainNodeMAC label,
.NodeSerial label {
  width: 50%;
  margin: auto;
  text-align: left;
}

/* System Add Title */
.SystemAdder h2 {
  font-size: 4rem;
}

/* System add information field */
.SystemAdder input {
  font-size: 2rem;
}

.SystemAdder button {
  font-size: 2rem;
  margin-top: 5%;
}

/* Row on Systems page containing the overview elements of the system*/
.systemRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  font-size: 2rem;
}

.systemRow a,
.systemRow a:visited {
  text-decoration: none;
}

/* Each element in the system overview row is contained in a System Field*/
.systemField {
  width: 25%;
  text-align: center;
  overflow-x: scroll;
  white-space: nowrap;
  margin-bottom: 4%;
}

/* System Fields marked with status are for the system status (last node checkin time)*/

.Status.systemField.bad {
  display: none;
}

.Status.systemField.iffy {
  display: none;
}

.Status.systemField.good {
  display: none;
}

.Status.systemField.bad.mobile {
  color: red;
  /* display: block; */
  display: none;
}

.Status.systemField.iffy.mobile {
  color: yellow;
  /* display: block; */
  display: none;
}

.Status.systemField.good.mobile {
  color: green;
  /* display: block; */
  display: none;
}

.systemName.good {
  color: white;
}

.systemName {
  width: 50%;
}

/* On the systems overview page, every other row is colored different. Evens one way, odds another */
.SystemContainerEven,
.SystemContainerOdd {
  /* padding-top: 0.5%;
  padding-bottom: 0.5%; */
  border-bottom: solid;
  border-color: var(--list-dividing-line);
  border-width: 0.1rem;
  margin-top: 4%;
}

.SystemContainerEven a,
.SystemContainerOdd a{
  text-decoration: none;
}

.driverTitleRow--Mobile {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 75%;
  margin: auto;
  justify-content: space-around;
  font-size: 1.5rem;
}

.SystemPageActionRow {
  margin-top: 5%;
}

.SystemPageActionRow button {
  font-size: 2rem;
}

.SystemPageActionRow button:hover {
  color: white;
}

.NodeAddContainer {
  height: 100%;
  width: 100%;
}

.NodeAddTitle {
  font-size: 2rem;
  text-align: center;
}

.NodeAddDetails {
  margin-top: 10%;
}

.NodeAddDetailsRow {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.NodeAddSubmitRow {
  text-align: center;
}

.NodeAddDetailsRow--Input input{
  width: 100%;
}

.SystemRenameModalOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(137, 137, 137, 0.3);
}

.SystemRenameModal {
  position: absolute;
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;
  background-color: rgba(34, 34, 34, 1);
  text-align: center;
  border-color: white;
}

.InfoChangerRow {
  font-size: 3rem;
  margin-top: 2%;
  margin-bottom: 2%;
}

.InfoChangerRow input {
  font-size: 3rem;
}

.InfoChangerRow button {
  font-size: 3rem;
}

/* Container for search-by-name field */
.SystemSearchContainer {
  margin-left: 5%;
  text-align: left;
  width: 75%;
  margin-top: auto;
  margin-bottom: auto;
  font-size: 3rem;
  display: flex;
  justify-content: space-evenly;
}

.SystemSearchContainer label {
  font-size: 0;
}

.SystemSearchContainer label:before {
  content: "Search ";
  font-size: 2rem;
}

.SystemSearchContainer input {
  font-size: 2rem;
}

.SystemsTitleRow {
  display: none;
}

/* Add System button */
.SystemsTitleRow button {
  font-size: 3rem;
  margin-top: 4%;
  margin-bottom: 4%;
}

.NodeRestartModal,
.CredResetModal,
.CustodialModeModal,
.DeleteNodeModal,
.NodeConfirmModal {
  position: absolute;
  width: 50%;
  height: 50%;
  left: 25%;
  top: 25%;
  background-color: rgba(34, 34, 34, 1);
  border-color: white;
  z-index: 3;
}

.NodeRestartModalOverlay,
.CredResetOverlay,
.CustodialModeOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(137, 137, 137, 0.3);
}

.ResetNodeModalContainer,
.DeleteNodeModalContainer,
.NodeConfirmModalContainer {
  width: 100%;
  height: 100%;
  text-align: center;
}

.ResetNodeText,
.DeleteNodeText,
.NodeConfirmModalText {
  margin-top: 15%;
}

.ResetNodeModalContainer button,
.DeleteNodeModalContainer button,
.NodeConfirmModalContainer button {
  margin-top: 15%;
}

.ResetNodeModalContainer button:hover,
.NodeConfirmModalContainer button:hover {
  color: white;
}

.InfoChangerRow {
  font-size: 1.2rem;
}

.InfoChangerRow input {
  font-size: 1.2rem;
}

.InfoChangerRow button {
  font-size: 1.2rem;
}


/* Node Row style */
.DriverContainer {
  width: 90%;
  margin: auto;
  border: solid;
  border-color: white;
  margin-top: 2%;
}

.DriverSection--Mobile {
  display: flex;
  flex-direction: column;
}

.nodeRowTitle {
  width: 50%;
}

.nodeRowContents {
  width: 50%;
}

.nodeRowDropOption {
  width: 100%;
}

.MirusSystem--TabMenu {
  display: flex;
  background-color: var(--list-header-background);
  margin-bottom: 2%;
}

.MirusSystem--TabMenu a {
  width: 30%;
}

.TabHidden {
  display: none;
}

.DriverSelectedOption {
  color: red;
}

.adminWarnOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Driver Section style */
.DriverTitle {
  font-size: 3rem;
}

.drivers-title {
  display: none;
}

.mobile-drivers-section {
  display: flex;
  flex-direction: column;
}

.driverAdderModalCont {
  display: flex;
  flex-direction: column;
}

.driverAdderModal {
  top: 25%;
  background-color: #222222;
  left: 12.5%;
  width: 75%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 5%;
}

.driverAdderModal h4 {
  font-size: 4rem;
}

.DriverAddOption {
  width: 45%;
  margin: auto;
}

.addDriverRow {
  text-align: center;
}

.DriverAddButtonContainer {
  margin: auto;
  text-align: center;
}

/* PC Driver Row style */
.PCTitleRow {
  display: none;
}

.DriverRows {
  width: 100%;
  margin: auto;
  /* border: solid; */
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.DriverRows a:hover {
  color: red;
}

.driverRow {
  width: 45%;
  font-size: 2rem;
  margin: auto;
}

.driverRow button {
  font-size: 2rem;
}

.DriverEntryRow {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: solid;
}

.driverInfo {
  width: 50%;
}
  /* Colors for online status on system page */
.AddSystemIconButton {
  display: block;
  font-size: 4rem;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 15%;
  text-align: right;
}

.AddSystemIconText {
  display: none;
}

.LogoutForm {
  width: 20%
}

.systemsPageFooter {
  background-color: var(--list-header-background);
  font-size: 3rem;
  /* margin: 1%; */
  /* margin-top: 2%; */
  /* margin-bottom: 0.5%; */
  /* margin-left: 0; */
  /* padding-top: 1%; */
  /* padding-bottom: 1%; */
  border-top: solid;
  border-color: red;
  width: 100%;
  height: 10dvh;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .SystemsActionHeader {
    width: 100%;
    margin: auto;
    display: flex;
    font-size: 1rem;
  }

  .SystemsActionHeader button {
    font-size: 1rem;
    margin: 1%;
    width: 50%;
  }

  .SystemsActionHeader button:hover{
    color: white;
  }

  .SystemsTitleRow {
    display: flex;
    background-color: var(--list-header-background);
    border-bottom: solid;
    border-color: red;
  }

  .SystemsTitleRow button {
    font-size: 1rem;
    /* margin-top: 4%;
    margin-bottom: 4%; */
    margin: 1%;
    font-size: 2rem;
  }

  .SystemSearchContainer button {
    font-size: 1rem;
  }
  
  .SystemSearchContainer label {
    font-size: 1rem;
  }

  .SystemSearchContainer input {
    font-size: 1rem;
  }

  .SystemsTitleRow button:hover {
    color: white;
  }

  .AddSystemIconButton {
    font-size: 2rem;
  }

  .SystemSearchContainer label:before {
    content: none;
    display: none;
    font-size: 0;
  }

  .SystemAdder {
    font-size: 1rem;
  }

  .SystemAdder h2 {
    font-size: 1.2rem;
  }

  .SystemAdder input {
    font-size: 1.2rem;
  }
  
  .SystemAdder button {
    font-size: 1.2rem;
  }

  .systemRow{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 5%;
    padding-top: 1%;
    padding-bottom: 1%;
    font-size: 1rem;
  }

  .systemRow a {
    text-decoration: none;
  }

  .systemField{
    width: 20%;
    text-align: center;
    white-space: wrap;
    margin-bottom: 0;
    overflow:visible;
  }

  .systemField a:hover {
    color: red;
  }

  .Status.systemField.good.mobile,
  .Status.systemField.iffy.mobile,
  .Status.systemField.bad.mobile{
    display: block;
  }

  .SystemContainerEven,
  .SystemContainerOdd {
    margin-top: 0;
    margin-bottom: 0;
  }

  .SystemContainerEven a,
  .SystemContainerOdd a {
    text-decoration: none;
    margin-top: 0;
    margin-bottom: 0;
  }

  .SystemContainerEven a:hover,
  .SystemContainerOdd a:hover {
    color: red;
  }

  .DriverContainer {
    border: none;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    margin: 0;
    width: 100%;
  }

  .driverAdderModal {
    width: 50%;
    height: 50%;
    /* left: 25%; */
    /* top: 25%; */
    margin-top: 12.5%;
    margin-left: 25%;
    background-color: rgb(34, 34, 34, 1);
    z-index: 2;
}

  .driverAdderModal h4 {
    font-size: 1.2rem;
  }

  .MobileTitleRow {
    display: none;
  }

  .PCTitleRow {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    background-color: var(--list-header-background);
    border-bottom: solid;
    border-color: red;
  }

  .DriverEntryRow {
    width: 100%;
    border-color: var(--list-dividing-line);
    border-bottom: solid;
    border-width: 0.1rem;
    display: flex;
    flex-direction: row;
  } 

  .DriverRows a{
    border-color: var(--list-dividing-line);
  }
  
  .drivers-title {
    display: block;
  }
  
  .mobile-drivers-section {
    display: none;
  }

  .updateField {
      color: red;
  }

  .MobileUpdate {
    display: none;
  }  
  
  .DriverSection--Mobile {
    display: none;
  }

  .driverTitleRow--Mobile {
    display: none;
  }
  
  .DriverTitle {
    font-size: 1.5rem;
  }

  .driverEntryRow {
    font-size: 1rem;
    
  }

  .MirusSystem--TabMenu {
    display: flex;
    background-color: var(--list-header-background);
    margin-bottom: 2%;
  }

  .MirusSystem--TabMenu a {
    width: 20%;
  }

  .TabHidden {
    display: none;
  }

  .TabSelected {
    color: red;
    border-bottom: solid;
  }

  .driverInfo{
      width: 18%;
      text-align: center;
  }

  .DriverTitle {
      text-align: center;
      font-size: 1.5rem;
  }

  .NodeTableOdd {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }

  .NodeTableEven {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }

  .NodeTableEven,
  .NodeTableOdd  {
    border-bottom: solid;
    border-width: 0.1rem;
    border-color: var(--list-dividing-line)
  }
}/* Input placeholders */
.login-window {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #252525;
}

@property --shadow-hue {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@keyframes hue-cycle {
  from {
    --shadow-hue: 0;
  }
  to {
    --shadow-hue: 360;
  }
}
.login-form-container-glow {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 35%;
  min-height: 45%;
  background-color: #222222;
  position: relative;
  z-index: 2;
  border-radius: 25px;
}
.login-form-container-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: inherit;
  /* Smooth transition for when the user hovers over the image */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: hue-cycle 10s linear infinite;
  box-shadow: 0 0px 20px 1px hsl(var(--shadow-hue), 90%, 50%, 0.4), 0 0px 25px 1px hsl(var(--shadow-hue), 90%, 40%, 0.2);
}

.login-input-container label {
  font-size: 3rem;
}

.top-logo-container {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  max-height: 45%;
}

.top-logo-container img {
  width: 100%;
  height: 100%;
}

.login-form,
.forgot-password-form {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 5%;
}

.password-forgot-button {
  border-radius: 5px;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
  padding-left: 3%;
  padding-right: 3%;
  text-align: center;
  font-size: 2.5rem;
}

.password-forgot-button:hover {
  background-color: #151515;
  color: blue;
}

.login-input-container {
  width: 100%;
  padding-bottom: 4%;
}

.login-input-container input {
  width: 100%;
  border-color: white;
  border-width: 0.25rem;
  font-size: 3rem;
  border-radius: 2px;
  padding: 2.55%;
  color: white;
  background-color: #222222;
}
.login-input-container input::placeholder {
  color: white;
  opacity: 0.5;
}

.additional-action-row {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
}

.submit-row {
  margin-top: 3%;
  width: 100%;
  text-align: center;
  padding-bottom: 5%;
  padding-top: 5%;
}

.submit-row input[type=submit] {
  font-size: 3.5rem;
}

.password_visibility_eye {
  font-size: 3.5rem;
  margin-right: 2.5%;
  margin-top: 1.25%;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .login-form-container-glow {
    width: 50%;
    margin-top: 10%;
  }
  .top-logo-container {
    width: 25%;
    max-height: 25%;
  }
  .login-form,
  .forgot-password-form {
    width: 50%;
  }
  .login-input-container input {
    border-width: 0.025rem;
    font-size: 1rem;
  }
  .login-input-container label {
    font-size: 1rem;
  }
  .password-forgot-button {
    font-size: 1rem;
  }
  .submit-row {
    padding-top: 0;
    padding-bottom: 0;
  }
  .submit-row input[type=submit] {
    font-size: 1.5rem;
  }
  .password_visibility_eye {
    font-size: 1rem;
  }
}.mobile-drivers-title {
  display: block;
}

.drivers-section {
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .mobile-drivers-title {
    display: none;
  }

  .drivers-section {
    display: flex;
    flex-wrap: wrap;
  }
}.LicenseChangeModal {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.AdminDriverMenu {
  width: 100%;
  display: flex;
  border-bottom: solid;
  border-width: 0.1rem;
  padding-bottom: 1%;
  padding-top: 1%;
  text-align: center;
}

.AdminDriverMenu a {
  width: 50%;
}

.DriverAdminOption:hover,
.DriverDealerOption:hover {
  color: red;
}

.LicenseModalTitle {
  width: 100%;
  text-align: center;
}

.LicenseModalCurrentTitle {
  width: 100%;
  text-align: center;
}

.UpgradeOptions {
  display: flex;
  justify-content: space-evenly;
  padding-bottom: 2%;
}

.UpgradeOptions button:hover {
  color: white;
}

.UpgradeTo {
  width: 100%;
  text-align: center;
}

.UpgradeTo button:hover {
  color: white;
}

.NoUpgrade {
  width: 100%;
  text-align: center;
}

.ConfirmModal {
  background-color: #222222;
}

.confirmLicenseModal {
  display: flex;
  flex-direction: column;
}

.confirmLicenseModalText {
  font-size: 1.2rem;
  margin-top: 5%;
  margin-bottom: 5%;
  text-align: center;
}

.confirmLicenseModalButtons {
  font-size: 1.2rem;
  display: flex;
  justify-content: space-evenly;
}

.dealerWarnTitle {
  font-size: 1.5rem;
  text-align: center;
}

.dealerWarnText {
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 2%;
}

.dealerWarnText button {
  margin-top: 10%;
  font-size: 1.2rem;
}

.driverAddConfModal {
  z-index: 5;
}
@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {

}.driverTitleRow--PC {
  display: none;
}

.DriverRow--Mobile {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.DriverRow--Title {
  width: 50%;
}

.DriverRow--Info {
  width: 50%;
}

.DriverRow--Mobile {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.DriverRow--Mobile .driverInfoLabel {
  width: 50%;
}

.DriverRow--Mobile .driverInfo {
  width: 50%;
}

.DriverInfoContainer {
  width: 100%;
  font-size: 2rem;
}


@media only screen and (min-width: 750px) and (orientation: landscape),
(min-width: 1200px) and (orientation: portrait) {
  .MirusSystem--DriversTab a {
    cursor: pointer;
  }

  .driverTitleRow--PC {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 90%;
    margin: auto;
    justify-content: space-around;
    background-color: var(--list-header-background);
    font-size: 1.5rem;
    border-bottom: solid;
    border-color: red;
  }

  .DriverRow {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 5%;
  }

  .DriverRow--Title {
    display: none;
  }

  .DriverRow--Info {
    width: 50%;
    text-align: center;
  }

  .driverInfoCell {
    width: 22%;
    text-align: center;
    margin-top: 1%;
    font-size: 1.5rem;
  }

  .DriverTableEven,
  .DriverTableOdd {
    border-bottom: solid;
    border-width: 0.1rem;
    border-color: var(--list-dividing-line);
    width: 90%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
  }

  .DriverTableOdd{
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }

  .DriverContainer {
    border: none;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    margin: 0;
    width: 100%;
  }

  .DriverSection {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    justify-content: space-evenly;
    width: 100%
  }

  .DriverInfoContainer {
    display: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 5%;
    font-size: 1rem;
  }

  .DriverVersionModal {
    top: 25%;
    left: 25%;
    background-color: #222222;
    width: 50%;
    height: 50%;
    position: absolute;
  }

  .DriverVersionTitle {
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    padding-bottom: 5%;
  }

  .VersionRow {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
  }

  .VersionRow:hover {
    color: red;
  }

  .DriverVersionRow--DriverName,
  .DriverVersionRow--Version {
    width: 45%;
  }

  .DriverVersionRow--Colon {
    width: 10%
  }

  .DriverRow--Mobile {
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .DriverRow--Mobile .driverInfoLabel {
    display: none;
  }

  .DriverRow--Mobile .driverInfo {
    width: 100%;
    text-align: center;
    font-size: 1rem;
  }

  .DriverRow--Mobile .DriverRow--Mobile {
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .DriverRow--Mobile .driverInfoLabel {
    display: none;
  }

  .DriverRow--Mobile .driverInfo {
    width: 100%;
    text-align: center;
    font-size: 1rem;
  }

}.NodeContainer {
  width: 90%;
  margin: auto;
  border: solid;
  border-color: white;
  margin-top: 2%;
}

.NodeSection--Mobile {
  display: flex;
  flex-direction: column;
}

.NodeRow button {
  width: 15%;
  border: none;
  margin-top: 2%;
}

.NodeRow button:hover {
  color: white;
}

.NodeInfoContainer {
  width: 100%;
}

.NodeActionRow {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.NodeActionRow button {
  width: 60%;
  font-size: 3rem;
}

.NodeActionRow .firmwareUpdateContainer button {
  width: 50%;
}

.firmwareUpdateContainer select {
  font-size: 3rem;
}

.NodeSection--PC {
  display: none;
}

.nodefirmware {
  color: white;
}

.bad {
  color: red;
}

.iffy {
  color: yellow;
}

.good {
  color: green;
}

@media only screen and (min-width: 750px) and (orientation: landscape),
(min-width: 1200px) and (orientation: portrait) {
  .NodeContainer {
    border: none;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    margin: 0;
    width: 100%;
  }

  .NodeSection--Mobile {
    display: none;
  }

  .NodeRow {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 5%;
  }

  .firmwareUpdateContainer {
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-size: 1rem;
    margin-top: 1%;
  }

  .firmwareUpdateContainer button {
    width: 40%;
  }

  .firmwareUpdateContainer select {
    font-size: 1rem;
  }

  .NodeSection--PC {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    justify-content: space-evenly;
    width: 100%;
  }

  .nodeName {
    display: flex;
  }

  .NodeCaret {
    width: 25%;
  }

  .nodeNameText {
    width: 75%;
  }

  .bad {
    color: white;
  }

  .iffy {
    color: white;
  }

  .good {
    color: white;
  }

}.nodeTitleRow--PC {
  display: none;
}

.nodeTitleRow-Mobile {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 75%;
  margin: auto;
  justify-content: space-around;
  font-size: 1.5rem;
}

.NodeRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.NodeRow--Mobile {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.NodeRow--Title {
  width: 50%;
}

.NodeRow--Info {
  width: 50%;
}

.NodeSection--Mobile--Title h3 {
  font-size: 3rem;
}


@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {  .nodeTitleRow--PC {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 90%;
    margin: auto;
    justify-content: space-around;
    background-color: var(--list-header-background);
    font-size: 1.5rem;
    border-bottom: solid;
    border-color: red;
  }

  .nodeTitleRow--Mobile {
    display: none;
  }

  .nodeInfoCell {
    width: 12%;
    text-align: center;
    /* font-size: 1rem; */
  }

  .nodeInfoCell {
    margin-top: 1%;
  }

  .NodeSection--Mobile--Title {
    display: none;
  }
}.systemPageActionRow{
  display: flex;
  flex-direction: row;
  width: 100%;
  text-align: right;
  flex-flow: row-reverse;
  text-align: left;
}

.systemPageActionRow--ManageBar {
  font-size: 3rem;
  width: 5%;
  margin-left: 2%;
  margin-right: 2%;
  /* position: absolute;
  transform: translateX(10%); */
}

.systemPageActionRow--ManageOpts {
  z-index: 3;
  position: absolute;
  transform: translateX(-60%);
  font-size: 1.2rem;
  width: 20%;
  text-align: center;
  background-color: #696969;
  border-style: solid;
  border-color: white;
  max-width: 200px;;
}

.systemPageActionRow--ManageAction:hover {
  color: red;
}

.projectDeleteContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
  width: 100%;
}

.projectDeleteConfText {
  height: 25%;
  font-size: 1.5rem;
}

.SystemInfoModalContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
}

.SystemInfoModal--MACContainer,
.SystemInfoModal--ControllerOSVersionContainer,
.SystemInfoModal--ClaimCodeContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 100%;
}

.ClearMACContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
  width: 100%;
}

.ClearMACText {
  font-size: 1.2rem;
  text-align: center;
  display: flex;
}

.ClearMACButton {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: space-around;
}

.SystemInfoModal--MacClearButton {
  text-align: center;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .systemPageActionRow--ManageBar {
    font-size: 2rem;
    margin: 0;
  }
}.MirusSystem--TabTitle {
  font-size: 3rem;
}

.MirusSystem--TabTitle:hover {
  cursor: pointer;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .MirusSystem--TabTitle {
    font-size: 1.5rem;
  }

  .MirusSystem--TabTitle:hover {
    cursor: pointer;
  }
}/* Input placeholders */
:global {
  
}
.CartContainer {
  min-height: "100vh";
  padding: "40px 20px";
  font-family: "'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif";
  color: "#181B1D";
}
.CartContainer--Inner {
  width: 100%;
  margin: "0 auto";
}
.CartContainer--Inner h1 {
  font-family: "'Oswald', sans-serif";
  font-weight: 600;
  font-size: 28;
  letter-spacing: "0.01em";
  margin: "0 0 4px";
}
.CartContainer--Inner p {
  color: #6B6F6A;
  font-size: 14;
  margin: "0 0 24px";
}
.FilledCart {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.FilledCartContainer {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 90%;
}
@media (max-width: 1000px) {
  .FilledCartContainer {
    flex-direction: column;
  }
}
.FilledCart--Panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 80%;
  min-width: 70%;
}
@media (max-width: 1000px) {
  .FilledCart--Panel {
    width: 100%;
    max-width: 100%;
  }
}
.CartOverview {
  width: 100%;
  max-width: 300px;
  background-color: #FFFFFF;
  border: 1px solid #D9DBD4;
  padding: 20px;
  height: fit-content;
  flex-shrink: 0;
}
@media (max-width: 1000px) {
  .CartOverview {
    max-width: 500px;
    margin-top: 2.5%;
    margin-left: auto;
    margin-right: auto;
  }
}
.CartOverviewLabel {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: red;
  margin-bottom: 14px;
}
@media (max-width: 1000px) {
  .CartOverviewLabel {
    font-size: 36px;
  }
}
.CartOverviewRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
  color: black;
}
.CartOverviewRow:last-of-type {
  margin-bottom: 0;
}
.CartOverviewRow span:first-child {
  color: #6B6F6A;
}
.CartOverviewRow strong {
  font-weight: 600;
}
@media (max-width: 1000px) {
  .CartOverviewRow {
    font-size: 28px;
  }
}
.CartOverviewDivider {
  height: 1px;
  background: #D9DBD4;
  margin: 14px 0;
}
.CartCheckoutButton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  background: red;
  padding: 12px 0;
  transition: background 160ms ease;
}
.CartCheckoutButton:hover {
  background: hsl(0, 100%, -6%);
}
@media (max-width: 1000px) {
  .CartCheckoutButton {
    font-size: 29px;
  }
}
.CartProduct {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #D9DBD4;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 180ms ease, transform 180ms ease;
}
.CartProduct:last-child {
  border-bottom: none;
}
.CartProduct--removing {
  opacity: 0;
  transform: translateX(8px);
}
@media (max-width: 1000px) {
  .CartProduct {
    padding: 16px 0px;
  }
}
.CartProduct img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border: 1px solid #D9DBD4;
  flex-shrink: 0;
}
@media (max-width: 1000px) {
  .CartProduct img {
    width: 125px;
    height: 125px;
  }
}
.CartLineBody {
  flex: 1;
  min-width: 0;
}
.CartSku {
  font-size: 11px;
  color: #6B6F6A;
}
@media (max-width: 1000px) {
  .CartSku {
    font-size: 27.5px;
  }
}
.CartTitle {
  font-weight: 600;
  font-size: 15px;
  margin: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .CartTitle {
    font-size: 45px;
  }
}
.CartDescription {
  font-size: 12.5px;
  color: #6B6F6A;
}
@media (max-width: 1000px) {
  .CartDescription {
    font-size: 31.25px;
  }
}
.CartPrice {
  font-size: 13px;
  margin-top: 4px;
}
@media (max-width: 1000px) {
  .CartPrice {
    font-size: 32.5px;
  }
}
.CartStepper {
  display: flex;
  align-items: center;
  border: 1px solid #B9BCB3;
  flex-shrink: 0;
}
.CartStepper button {
  width: 28px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  color: red;
}
@media (max-width: 1000px) {
  .CartStepper button {
    width: 56px;
    height: 68px;
  }
}
@media (max-width: 1000px) {
  .lucide-minus,
  .lucide-plus {
    height: 26px;
    width: 26px;
  }
}
.CartStepper input {
  width: 40px;
  text-align: center;
  font-size: 14px;
  border: none;
  outline: none;
  background: none;
  color: #6B6F6A;
}
@media (max-width: 1000px) {
  .CartStepper input {
    font-size: 35px;
  }
}
.CartTotal {
  width: 76px;
  text-align: right;
  font-weight: 600;
  font-size: 15px;
  flex-shrink: 0;
}
@media (max-width: 1000px) {
  .CartTotal {
    font-size: 37.5px;
  }
}
.CartLineX {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #6B6F6A;
  cursor: pointer;
  flex-shrink: 0;
}
.CartLineX:hover {
  color: white;
}/* Input placeholders */
 {
  
}
._CartContainer_tiixj_6 {
  min-height: "100vh";
  padding: "40px 20px";
  font-family: "'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif";
  color: "#181B1D";
}
._CartContainer--Inner_tiixj_13 {
  width: 100%;
  margin: "0 auto";
}
._CartContainer--Inner_tiixj_13 h1 {
  font-family: "'Oswald', sans-serif";
  font-weight: 600;
  font-size: 28;
  letter-spacing: "0.01em";
  margin: "0 0 4px";
}
._CartContainer--Inner_tiixj_13 p {
  color: #6B6F6A;
  font-size: 14;
  margin: "0 0 24px";
}
._FilledCart_tiixj_32 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
._FilledCartContainer_tiixj_39 {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 90%;
}
@media (max-width: 1000px) {
  ._FilledCartContainer_tiixj_39 {
    flex-direction: column;
  }
}
._FilledCart--Panel_tiixj_51 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 80%;
  min-width: 70%;
}
@media (max-width: 1000px) {
  ._FilledCart--Panel_tiixj_51 {
    width: 100%;
    max-width: 100%;
  }
}
._CartOverview_tiixj_65 {
  width: 100%;
  max-width: 300px;
  background-color: #FFFFFF;
  border: 1px solid #D9DBD4;
  padding: 20px;
  height: fit-content;
  flex-shrink: 0;
}
@media (max-width: 1000px) {
  ._CartOverview_tiixj_65 {
    max-width: 500px;
    margin-top: 2.5%;
    margin-left: auto;
    margin-right: auto;
  }
}
._CartOverviewLabel_tiixj_83 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: red;
  margin-bottom: 14px;
}
@media (max-width: 1000px) {
  ._CartOverviewLabel_tiixj_83 {
    font-size: 36px;
  }
}
._CartOverviewRow_tiixj_96 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
  color: black;
}
._CartOverviewRow_tiixj_96:last-of-type {
  margin-bottom: 0;
}
._CartOverviewRow_tiixj_96 span:first-child {
  color: #6B6F6A;
}
._CartOverviewRow_tiixj_96 strong {
  font-weight: 600;
}
@media (max-width: 1000px) {
  ._CartOverviewRow_tiixj_96 {
    font-size: 28px;
  }
}
._CartOverviewDivider_tiixj_119 {
  height: 1px;
  background: #D9DBD4;
  margin: 14px 0;
}
._CartCheckoutButton_tiixj_125 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  background: red;
  padding: 12px 0;
  transition: background 160ms ease;
}
._CartCheckoutButton_tiixj_125:hover {
  background: hsl(0, 100%, -6%);
}
@media (max-width: 1000px) {
  ._CartCheckoutButton_tiixj_125 {
    font-size: 29px;
  }
}.ProductOverviewText--grid h1 {
  font-size: 2.5rem;
}

.DealerPrice,
.MSRP,
.ProductOverviewText--grid button {
  font-size: 2.5rem;
}

.RecommendedProductPreview--rows {
  display: flex;
  flex-direction: row;
}

.RecommendedProductPreview--rows a {
  width: 90%;
  display: flex;
  justify-content: space-evenly;
}

.ProductOverviewText--rows {
  width: 50%;
}

.ProductOverviewText--rows h1 {
  font-size: 3rem;
}

.ProductOverviewText--rows .DealerPrice,
.ProductOverviewText--rows .MSRP {
  font-size: 2rem;
}
.RecommendedProductPreview--grid,
.RecommendedProductPreview--rows {
  width: 100%;
}

.RecommendedProductPreview--grid button,
.RecommendedProductPreview--rows button {
  font-size: 4rem;
  /* margin-top: 10%; */
}

.RecommendedProductPreview--grid button {
  margin-top: 10%;
}

.ProductEntry--grid {
  width: 95%;
  height: 95%;
  margin: auto;
  padding: 1%;
  margin-bottom: 4%;
  /* border-color: #555555;
  border-style: double; */
}

.ProductOverviewImage--grid img {
  max-width: 100%;
  max-height: 100%;
}

.ProductOverviewImage--rows {
  width: 50%;
  display: inherit;
  margin: auto;
}

.ProductOverviewImage--rows img {
  max-width: 100%;
  max-height: 100%;
}

.RecommendedProductPreview--rows .ProductPreviewATC {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 25%;
}

.RecommendedProductPreview--grid .ProductPreviewATC {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.ProductPreviewATC input[type=number] {
  /* width: 25%; */
  font-size: 2rem;
  text-align: center;
  width: 50%;
  margin: auto;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .ProductEntry {
    margin-bottom: 2%;
  }

  .ProductOverviewImage--rows {
    width: 20%;
  }

  .ProductOverviewText--rows {
    width: 90%;
  }

  .ProductPreviewATC input[type=number]{
    font-size: 1.5rem;
  }

  .ProductPreviewATC button {
    font-size: 2.5rem;
  }

  .ProductPreviewATC button:active {
    color: white;
  }

  .ProductOverviewText--rows h1,
  .ProductOverviewText--grid h1{
    font-size: 2rem;
  }

  .ProductOverviewText--rows .DealerPrice,
  .ProductOverviewText--rows .MSRP,
  .ProductOverviewText--grid .DealerPrice,
  .ProductOverviewText--grid .MSRP {
    font-size: 1.5rem;
  }
}.AddedToCartModal {
  position: absolute;
  top: 45%;
  left: 45%;
  border-style: solid;
  border-color: white;
  background-color: #222222;
  width: 20%;
  height: 15%;
  text-align: center;
  font-size: 2rem;
}.CollectionTile {

}

.CollectionListCollections {
  width: 100%;
  /* display: flex; */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* flex-direction: row; */
  column-gap: 2%;
  justify-content: space-evenly;
}

.CollectionPageContainer--grid,
.CollectionPageContainer--rows {
  height: 85vh;
}

.CollectionListHeader,
.RecommendedProductsTitle h3 {
  font-size: 2rem;
}

.CollectionPage--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  column-gap: 2%;
}

.RecommendedProductsProducts--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  width:80%;
  margin-left: auto;
  margin-right: auto;
  grid-auto-rows: 1fr;
  column-gap: 2%;

  @media (max-width: 1000px) {
    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
  }
}

.StoreHeader {
  width: 100%;
  /* position: absolute; */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.StoreTitle {
  width: 50%;
}

.StoreDisplayMode {
  color: white;
  width: 25%;
}

.StoreDisplayModeOptSelected {
  color: red;
}

.StoreDisplayModeContainer,
.CartButton {
  font-size: 3rem;
}

.StoreDisplayModeContainer svg{
  vertical-align: middle;
}

.RecommendedProductsProducts--rows {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.ProductEntry--rows {
 width: 100%;
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 justify-content: space-evenly;
 margin-bottom: 2%;
 border-color: #333333;
 border-style: double;
 padding: 0.5%;
}





.ProductEntry button {
  font-size: 2rem;
}



.ProductTileContents--rows {
  width: 100%;
  display: flex;
}



@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .CollectionListCollections {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  }

  .CollectionTile {
    width: 20%;
  }

  .CollectionPage--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    column-gap: 2%;
  }

  .StoreDisplayModeContainer {
    font-size: 2rem;
  }
} {
  
}

._grid_15c7o_5 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

@media (max-width: 1000px) {
  ._grid_15c7o_5 {
    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
    gap: 10px;
  }
}

._card_15c7o_17 {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #D9DBD4;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #181B1D;
  transition: border-color 140ms ease;
}

._card_15c7o_17:hover {
  border-color: #B9BCB3;
}

._imageWrap_15c7o_30 {
  position: relative;
  aspect-ratio: 1/1;
  background: #F4F5F1;
  overflow: hidden;
  border-bottom: 1px solid #D9DBD4;
  display: flex;
  flex-direction: column;
  align-items: center;
}

._image_15c7o_30 {
  max-width: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 200ms ease;
  margin: auto;
}

._imageSecondary_15c7o_49 {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 200ms ease;
}

._card_15c7o_17:hover ._imageSecondary_15c7o_49 {
  opacity: 1;
}

._stockFlag_15c7o_60 {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #6B6F6A;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 6px;
}

._stockFlag--low_15c7o_71 {
  color: #C1440E;
}

._body_15c7o_75 {
  display: flex;
  flex-direction: column;
  padding: 10px 12px 12px;
  flex: 1;
}

._sku_15c7o_82 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: #6B6F6A;
  margin-bottom: 2px;
}

@media (max-width: 1000px) {
  ._sku_15c7o_82 {
    font-size: 20px;
  }
}

._title_15c7o_94 {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  margin: 0 0 6px;
  margin-left: auto;
  margin-right: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}

@media (max-width: 1000px) {
  ._title_15c7o_94 {
    font-size: 28px;
  }
}

._priceRow_15c7o_114 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

._cost_15c7o_121 {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 17px;
}

@media (max-width: 1000px) {
  ._cost_15c7o_121 {
    font-size: 28px;
  }
}

._msrp_15c7o_132 {
  font-size: 11.5px;
  color: #6B6F6A;
}

._msrp_15c7o_132 span {
  font-size: 10px;
}

@media (max-width: 1000px) {
  ._msrp_15c7o_132 {
    font-size: 23px;
  }
}

._margin_15c7o_145 {
  font-size: 11px;
  font-weight: 600;
  color: #1F5C4C;
  background: #E4EEE9;
  padding: 2px 6px;
  width: fit-content;
  margin-bottom: 10px;
}

@media (max-width: 1000px) {
  ._margin_15c7o_145 {
    font-size: 22px;
  }
}

._spacer_15c7o_160 {
  flex: 1;
}

._footer_15c7o_164 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._addBtn_15c7o_170 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  background: #C1440E;
  padding: 8px 0;
  transition: background 160ms ease;
}

._addBtn--added_15c7o_186 {
  background: #1F5C4C;
}

._addBtn_15c7o_170:hover:not(._addBtn--added_15c7o_186) {
  background: hsl(18.1005586592, 86.4734299517%, -6%);
}

@media (max-width: 1000px) {
  ._addBtn_15c7o_170 {
    font-size: 25px;
  }
}

._quantityContainer_15c7o_198 button,
._quantityContainer_15c7o_198 input {
  font-size: 12.5px;
}

@media (max-width: 1000px) {
  ._quantityContainer_15c7o_198 button,
  ._quantityContainer_15c7o_198 input {
    font-size: 25px;
  }
}

._gridBackground_15c7o_209 {
  width: 100%;
  margin-top: 2%;
}.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1}
.ProductPage {
  display: flex;
  flex-direction: column;
}

.PhotoSidebar {
  width: 100%;
}

.PhotoSidebar img {
  max-width: 100%;
  max-height: 100%;
}

.ProductOverviewBar {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ProductPage--Title {
  font-size: 5rem;
}

.ProductPage--Description p {
  font-size: 3rem;
}

.ProductPage--ATC {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-size: 3rem;
}

.ProductPage--ATC button {
  font-size: 4.5rem;
}

.DealerPrice,
.MSRP {
  display: flex;
  margin: auto;
  width: 100%;
  text-align: center;
  justify-content: space-around;
  font-size: 3rem;
}

.MoneyLabel {
  width: 50%;
  text-align: right;
  margin-right: 1%;
}

.MoneyAmount {
  width: 50%;
  text-align: left;
  margin-left: 1%;
}

.ProductPage input[type=number] {
  /* width: 25%; */
  font-size: 2.5rem;
  text-align: center;
  /* width: 50%; */
  margin: auto;
}



@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .ProductPage {
    flex-direction: row;
  }

  .PhotoSidebar {
    width: 50%;
  }

  .ProductOverviewBar {
    width: 50%;
  }

  .ProductPage--Title {
    font-size: 3rem;
  }

  .ProductPage--Description p {
    font-size: 1rem;
  }

  .DealerPrice,
  .MSRP {
    font-size: 1.25rem;
  }

  .ProductPage--ATC {
    font-size: 1rem;
  }

  .ProductPage--ATC button {
    font-size: 1rem;
  }

  .ProductPage input[type=number] {
    font-size: 1rem;
  }

  .ProductPage--ATC button {
    font-size: 2rem;
  }
}.ConsoleContainer{
    width: 95%;
    height: 75vh;
    background-color: black;
    overflow: auto;
    border-style: solid;
    border-color: white;
    margin-left: auto;
    margin-right: auto;
}

.beforeStartingModal,
.InstructionBox{
    z-index: 1;
    position: absolute;
    top: 15%;
    left: 20%;
    width: 75%;
    height: 50%;
    background-color: #222222;
    border-color: red;
    border-style: solid;
}

.modalInt,
.instructions{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5%;
}

.InstructionTitle{
    width: 100%;
    text-align: center;
}

.InstructionBox{
    height: 75%;
    overflow: auto;
}

.ButtonRow,
.foot {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
  }

.ButtonRow button{
  width: 20%;
}

.ExitBar {
    width: 100%;
    display: flex;
    flex-direction: row-reverse
}

.ExitBox {
    margin-left: auto;
    margin-right: 5%;
    cursor: pointer;
}

.MirusFlashUtility {
    height: 95%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-content: space-between;
    flex-wrap: wrap;
}

/* Button Styling
button,
input[type=button],
input[type=submit]{
	color: Red;
	background-color: transparent;
	font-size: 18px;
	margin: auto;
	padding: 5px;
	border-color: red;
	border-style: solid;
}

button:hover{
	color: red;
	background-color: white;
	border-color: #515151;
} */.DealerAddForm {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.DealerAddSection {
  width: 95%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 25px #333333;
  padding: 2%;
  margin-left: auto;
  margin-right: auto;
}

.DealerAddSectionTitle {
  font-size: 2.5rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.userLabel {
  font-size: 2rem;
}

.userInput input,
.userInput select {
  font-size: 1.5rem;
}

.DealerAddGeoSection {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.DealerAddGeoSection .userProperty {
  width: auto;
}

.DealerAddDistroSection {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.DealerAddDistroSection .userProperty {
  width: auto;
}

.DealerAddActionSection {
  width: 100%;
  text-align: center;
}

.DealerAddActionSection button {
  font-size: 2.5rem;
  margin-bottom: 2%;
}



.dealerAddress {
  width: 100%;
}

.dealerAddress input {
  width: 90%;
}

.PhoneInput {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.PhoneInputCountry {
  width: 20%;
}

/* .PhoneInputCountry input[type="select"] {
  width: 95%;
} */

.PhoneInputCountrySelect {
  width: 100%;
}

.PhoneInput input[type="tel"] {
  width: 75%;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .DealerAddForm {
    flex-direction: row;
  }

  .DealerAddSection {
    width: 45%;
    /* margin-left: auto; */
    /* margin-right: auto; */
    margin: 2%;
  }

  .DealerAddSectionTitle {
    font-size: 1.25rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .userLabel {
    font-size: 1.25rem;
  }

  .userInput input,
  .userInput select {
    font-size: 1rem;
  }
  .DealerAddActionSection button {
    font-size: 1.5rem;
  }
}.DealerLicenseEditor {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.DriverOption {
  width: 95%;
  box-shadow: 0 0 20px #555555;
  margin: 2%;
  padding: 2%;
}

.DealerLicenseEditorTitle {
  width: 100%;
  text-align: center;
  font-size: 3rem;
}

.DriverOption .Opt {
  display: flex;
  flex-direction: column;
}

.DealerLicenseEditor button {
  font-size: 3rem;
}

.DriverOption {
  font-size: 2.5rem;
}

.Opt label {
  font-size: 2.25rem;
}

.Opt input {
  font-size: 2rem;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .DealerLicenseEditor {
    flex-direction: row;
  }

  .DealerLicenseEditorTitle {
    font-size: 2.5rem;
  }

  .DriverOption {
    box-shadow: 0 0 20px #333333;
    width: 45%;
  }

  .DealerLicenseEditor button {
    font-size: 2.5rem;
  }
  .DriverOption {
    font-size: 1.5rem;
  }
  
  .Opt label {
    font-size: 1.25rem;
  }
  
  .Opt input {
    font-size: 1rem;
  }

}.DealerManageHeader {
  display: none;
}

.DealerManageActionRow {
  width: 100%;
  display: flex;
  flex-direction: row;
  font-size: 1.5rem;
  padding-top: 1%;
  padding-bottom: 1%;
  justify-content: space-evenly;
}

.DealerManageActionRow button {
  font-size: 3.5rem;
}

.DealerSearch {
  font-size: 2rem;
}

.DealerSearch input {
  font-size: 2rem;
}

.DealerEntry {
  display: flex;
  flex-direction: row;
  margin-top: 4%;
  margin-bottom: 4%;
  font-size: 2rem;
  border: solid;
  border-color: var(--list-dividing-line);
}

.DealerManageHeader {
  width: 25%;
}

.DealerManageRow {
  width: 75%;
}

.DealerEditor {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.DealerEditorSection {
  width: 95%;
  box-shadow: 0 0 20px #333333;
  margin: 1%;
  margin-left: auto;
  margin-right: auto;
  padding: 1%;
}

.DealerEditorFullNameSection {
  width: 100%;
}

.DealerEditorNameSection {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.DealerEditorNameSection .DealerEditorName {
  width: 50%;
  text-align: center;
}

.DealerEditorNameSection .DealerEditorInfo {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.DealerEditorTitle {
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
}

.DealerEditorName {
  display: flex;
  flex-direction: column;
  width: 25%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1%;
  font-size: 2.5rem;
}

.EditDealerLicense,
.DealerDeleteRow {
  width: 50%;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.DealerEditorAddressSection .DealerEditorName {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.DealerEditorAddressSection .DealerEditorInfo {
  width: 100%;
}

.DealerEditorInfo input,
.DealerEditorInfo select {
  font-size: 1.5rem;
}

.DealerEditorAddressSection .DealerEditorInfo input {
  width: 100%;
}

.DealerEditorContactSection {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.DealerEditorContactSection .DealerEditorName {
  width: 45%;
}

.DealerEditorContactSection .DealerEditorName .DealerEditorLabel {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.DealerEditorContactSection .DealerEditorName .DealerEditorInfo {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.DealerEditorContactSection .DealerEditorName .DealerEditorInfo input {
  width: 100%;
}

.DealerEditorDistroSection {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.DealerEditorDistroSection .DealerEditorName {
  width: 45%;
}

.DealerEditorDistroSection .DealerEditorName .DealerEditorLabel {
  width: auto;
}

.DealerEditorDistroSection .DealerEditorName .DealerEditorInfo {
  width: auto;
}

.DealerEditorDistroSection .DealerEditorName .DealerEditorInfo select {
  width: 100%;
}

.DealerEditorSelectWrapper {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.DealerEditorSaveSection {
  margin-top: 2%;
  width: 100%;
  text-align: center;
}

.DealerEditorSaveSection button {
  font-size: 2rem;
}

.DealerEditorSaveSection button:hover {
  color: white;
}

.EditDealerButtonSection {
  width: 95%;
  display: flex;
  flex-direction: row;
}

.EditDealerButtonSection button {
  font-size: 2rem;
}

.EditDealerButtonSection button:hover {
  color: white;
}

/* .DealerEditorContactNameSection {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.DealerEditorContactNameSection .DealerEditorName {
  width: 50%;
}

.DealerEditorContactNameSection .DealerEditorName .DealerEditorLabel {
  width: 100%;
}

.DealerEditorContactNameSection .DealerEditorName .DealerEditorInfo {
  width: 95%;
  margin-right: auto;
  text-align: left;
  margin-left: 0;
} */

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .DealerManageHeader--Mobile {
    display: none;
  }

  .DealerEntry {
    border: none;
    font-size: 1rem;
    border-bottom: solid;
    border-color: var(--list-header-background)
  }

  .DealerManageHeader {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: var(--list-header-background);
    border-bottom: solid;
    border-color: red;
    height: 5%;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-bottom: 0;
  }

  .DealerManageHeader button {
    font-size: 1rem;
    margin: 1%;
  }

  .DealerManageHeader a:hover {
    color: red;
  }

  .DealerEntry {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1%;
    margin-bottom: 1%;
    font-size: 1rem;
    border-width: 0.1rem;
  }

  .DealerManageRow {
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .DealerManageRow:hover {
    /* font-size: 1.2rem; */
    font-size: 1rem;
    color: red;
  }

  .DealerInfoCell {
    width: 25%;
    text-align: center;
  }

  .DealerEditor {
    flex-direction: row;
  }

  .DealerEditorSection {
    width: 45%;
    box-shadow: 0 0 20px #333333;
    margin: 1%;
    padding: 1%;
  }

  .DealerEditorName {
    display: flex;
    flex-direction: column;
    width: 25%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1%;
    font-size: 1rem;
  }

  .DealerEditorInfo input,
  .DealerEditorInfo select {
    font-size: 1rem;
  }

  .DealerManageActionRow button {
    font-size: 2rem;
  }
  .DealerSearch {
    font-size: 1rem;
  }
  
  .DealerSearch input {
    font-size: 1rem;
  }
}.DevHeader {
  display: none;
}

.DevRecord {
  display: flex;
  flex-direction: row;
  /* font-size: 2rem; */
  margin-top: 0;
  margin-bottom: 0;
  border-bottom: solid;
  border-color: var(--list-dividing-line);
  border-width: 0.1rem;
}

.devEntryTitle {
  width: 25%;
}

.DevRecordRow {
  width: 75%;
}

.manageDevsFooter {
  background-color: var(--list-header-background);
  font-size: 1rem;
  margin-top: 2%;
  margin-bottom: 0.5%;
  margin-left: 0;
  padding-top: 1%;
  padding-bottom: 1%;
  border-top: solid;
  border-color: red;
  width: 100%;
}

.AddDevContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.AddDevContainer input {
  margin: auto;
}

.AddDevContainer button{
  font-size: 3rem;
}

.devSearch {
  margin-top: auto;
  margin-bottom: auto;
}

.DevEditorTitle {
  text-align: center;
  font-size: 2rem;
}

.DevEditorRow {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.DevEditorField {
  display: flex;
  flex-direction: column;
}

.Submit {
  width: 100%;
  margin-top: 5%;
  text-align: center;
}

.Submit button {
  font-size: 2rem;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .devEntryTitle {
    display: none;
  }

  .DevHeader {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    font-size: 1.5rem;
    background-color: var(--list-header-background);
    border-bottom: solid;
    border-color: red;
    height: 5%;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-bottom: 0;
  }

  .DevRecordRow {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1%;
    margin-top: 1%;
    font-size: 1rem;
  }

  .DevRecordRow:hover {
    color: red;
  }
  
  .DevHeaderField {
    width: 20%;
    text-align: center;
  }

  .DevRecordRow--Code,
  .DevRecordRow--Name,
  .DevRecordRow--ContactName,
  .DevRecordRow--ContactEmail,
  .DevRecordRow--ContactPhone {
    width: 20%;
    text-align: center;
  }
}input,
button,
select{
  font: revert;
}
*{
  box-sizing: border-box;
  --default-background-color: #222222;
  --default-text-color: #FFFFFF;

  --default-tab-color: #d3d3d3;
  --hover-tab-color: #6d6d6d;
  --hover-button-text-color: #FF0000;
  --conflict-text-color: #FF0000;
  --default-tab-border-color: #000000;
  --active-tab-border-color: red;
  --active-tab-color: rgb(126, 125, 125);
  --default-tab-text-color: #000000;

  --default-popup-color: #222222;
  --default-modal-background: rgba(0,0,0,0.8);
  --list-even-background: #222222;
  --list-odd-background: #222222;
  --list-dividing-line: #545454;
  --list-header-background: #6d6d6d;
  --list-header-border-bottom: #FF0000;

  --disabled-button-background: rgb(89,89,89)
}

@font-face {
  font-family: 'icomoon';
  src:  url('data:application/vnd.ms-fontobject;base64,TAUAAKgEAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAtT1yFAAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIGzAAAALwAAABgY21hcBYK1SAAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmnVAmhAAAAXgAAADkaGVhZCK/3kEAAAJcAAAANmhoZWEHwgPHAAAClAAAACRobXR4DgAAQAAAArgAAAAYbG9jYQCaAFwAAALQAAAADm1heHAADAAZAAAC4AAAACBuYW1lmUoJ+wAAAwAAAAGGcG9zdAADAAAAAASIAAAAIAADA1UBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOpNA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDqTf/9//8AAAAAACDqTP/9//8AAf/jFbgAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAIP/gBAADwAAGAAoADgASABYAACURIxEjFzcnIRUhESEVIREhFSERMxUjAUCAoODgIAJA/cABwP5AAUD+wMDAwAMA/QDg4MCAAUCAAUCAAUCAAAUAIP/gBAADwAAGAAoADgASABYAACURIxEjFzcDIRUhFSEVIRUhFSEVMxUjAUCAoODgIAJA/cABwP5AAUD+wMDAwAMA/QDg4AMAgECAQIBAgAAAAAEAAAAAAAAUcj21Xw889QALBAAAAAAA39DM0gAAAADf0MzSAAD/4AQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAYEAAAAAAAAAAAAAAACAAAABAAAIAQAACAAAAAAAAoAFAAeAEgAcgAAAAEAAAAGABcABQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
  src:  url('data:application/vnd.ms-fontobject;base64,TAUAAKgEAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAtT1yFAAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIGzAAAALwAAABgY21hcBYK1SAAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmnVAmhAAAAXgAAADkaGVhZCK/3kEAAAJcAAAANmhoZWEHwgPHAAAClAAAACRobXR4DgAAQAAAArgAAAAYbG9jYQCaAFwAAALQAAAADm1heHAADAAZAAAC4AAAACBuYW1lmUoJ+wAAAwAAAAGGcG9zdAADAAAAAASIAAAAIAADA1UBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOpNA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDqTf/9//8AAAAAACDqTP/9//8AAf/jFbgAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAIP/gBAADwAAGAAoADgASABYAACURIxEjFzcnIRUhESEVIREhFSERMxUjAUCAoODgIAJA/cABwP5AAUD+wMDAwAMA/QDg4MCAAUCAAUCAAUCAAAUAIP/gBAADwAAGAAoADgASABYAACURIxEjFzcDIRUhFSEVIRUhFSEVMxUjAUCAoODgIAJA/cABwP5AAUD+wMDAwAMA/QDg4AMAgECAQIBAgAAAAAEAAAAAAAAUcj21Xw889QALBAAAAAAA39DM0gAAAADf0MzSAAD/4AQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAYEAAAAAAAAAAAAAAACAAAABAAAIAQAACAAAAAAAAoAFAAeAEgAcgAAAAEAAAAGABcABQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA') format('embedded-opentype'),
      url('data:font/ttf;base64,AAEAAAALAIAAAwAwT1MvMg8SBswAAAC8AAAAYGNtYXAWCtUgAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zp1QJoQAAAF4AAAA5GhlYWQiv95BAAACXAAAADZoaGVhB8IDxwAAApQAAAAkaG10eA4AAEAAAAK4AAAAGGxvY2EAmgBcAAAC0AAAAA5tYXhwAAwAGQAAAuAAAAAgbmFtZZlKCfsAAAMAAAABhnBvc3QAAwAAAAAEiAAAACAAAwNVAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADqTQPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6k3//f//AAAAAAAg6kz//f//AAH/4xW4AAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAAFACD/4AQAA8AABgAKAA4AEgAWAAAlESMRIxc3JyEVIREhFSERIRUhETMVIwFAgKDg4CACQP3AAcD+QAFA/sDAwMADAP0A4ODAgAFAgAFAgAFAgAAFACD/4AQAA8AABgAKAA4AEgAWAAAlESMRIxc3AyEVIRUhFSEVIRUhFTMVIwFAgKDg4CACQP3AAcD+QAFA/sDAwMADAP0A4OADAIBAgECAQIAAAAABAAAAAAAAFHI9tV8PPPUACwQAAAAAAN/QzNIAAAAA39DM0gAA/+AEAAPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAGBAAAAAAAAAAAAAAAAgAAAAQAACAEAAAgAAAAAAAKABQAHgBIAHIAAAABAAAABgAXAAUAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==') format('truetype'),
      url('data:font/woff;base64,d09GRgABAAAAAAT0AAsAAAAABKgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIGzGNtYXAAAAFoAAAAVAAAAFQWCtUgZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAAOQAAADknVAmhGhlYWQAAAKoAAAANgAAADYiv95BaGhlYQAAAuAAAAAkAAAAJAfCA8dobXR4AAADBAAAABgAAAAYDgAAQGxvY2EAAAMcAAAADgAAAA4AmgBcbWF4cAAAAywAAAAgAAAAIAAMABluYW1lAAADTAAAAYYAAAGGmUoJ+3Bvc3QAAATUAAAAIAAAACAAAwAAAAMDVQGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6k0DwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOpN//3//wAAAAAAIOpM//3//wAB/+MVuAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAABQAg/+AEAAPAAAYACgAOABIAFgAAJREjESMXNychFSERIRUhESEVIREzFSMBQICg4OAgAkD9wAHA/kABQP7AwMDAAwD9AODgwIABQIABQIABQIAABQAg/+AEAAPAAAYACgAOABIAFgAAJREjESMXNwMhFSEVIRUhFSEVIRUzFSMBQICg4OAgAkD9wAHA/kABQP7AwMDAAwD9AODgAwCAQIBAgECAAAAAAQAAAAAAABRyPbVfDzz1AAsEAAAAAADf0MzSAAAAAN/QzNIAAP/gBAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAABgQAAAAAAAAAAAAAAAIAAAAEAAAgBAAAIAAAAAAACgAUAB4ASAByAAAAAQAAAAYAFwAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=') format('woff'),
      url('/assets/icomoon-aCpJi5Gt.svg?e7rp3f#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-sort-amount-asc:before {
  content: "\ea4c";
}
.icon-sort-amount-desc:before {
  content: "\ea4d";
}
body{
  margin: 0;
}
button{
  margin: 0;
  padding: 0;
  border: none;
}
button:hover{
  background-color: transparent;
}

.burger--menu--open{
  min-height: 10%;
  transition: min-height 0.3s linear;
}
.burger--menu--open--mid{
  min-height: 15%;
  transition: min-height 0.3s linear;
}
.burger--menu--open--large{
  min-height: 25%;
  transition: min-height 0.3s linear;
}

.modal--background{
  width: 100%;
  height: 100%;
  background: var(--default-modal-background);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.modal--background--sub{
  width: 100%;
  height: 100%;
  background: var(--default-modal-background);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}.add_project--container {
  display: flex;
  width: 25%;
  height: 11%;
  position: fixed;
  margin-top: -25%;
  margin-left: -25%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}

.add_project--header {
  display: flex;
  height: 25%;
  width: 100%;
  margin-top: 2%;
  font-size: 1.5rem;
  font-weight: bold;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.add_project--input--container {
  display: flex;
  height: 25%;
  width: 100%;
  margin-top: 2%;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.add_project--button--container {
  display: flex;
  height: 30%;
  width: 100%;
  margin-top: 2%;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
.add_project--button {
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  align-content: center;
}

.add_project--button:hover {
  background-color: var(--hover-tab-color);
  color: var(--hover-button-text-color);
}

@media only screen and (max-width: 1300px) {
  .add_project--button {
    font-size: 1rem;
  }

  .add_project--container {
    margin-left: 0;
    margin-top: -150px;
  }
}.delete_project--container{
  display: flex;
  width: 25%;
  height: 11%;
  position: fixed;
  margin-top: -25%;
  margin-left: -25%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}

.delete_project--header{
  display: flex;
  height: 25%;
  width: 100%;
  margin-top: 2%;
  font-size: 1.5rem;
  font-weight: bold;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.delete_project--button--container{
  display: flex;
  height: 30%;
  width: 100%;
  margin-top: 5%;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-evenly;
}

.delete_project--button{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  align-content: center;
}

.delete_project--button:hover{
  background-color: var(--hover-tab-color);
  color: var(--hover-button-text-color);
}

@media only screen and (max-width: 1300px) {
  .delete_project--button {
    font-size: 1rem;
  }

  .delete_project--container {
    margin-left: 0;
    margin-top: -150%;
  }
}/* items related to the projects page */
.project_list_item--link{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  align-content: center;
}

.project_list_item--link:hover{
  background-color: var(--hover-tab-color);
  color: var(--hover-button-text-color);
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .overview--list--item--button--copy,
  .overview--list--item--button--delete {
    font-size: .8rem;
    width: auto;
  }
}

@media only screen and (max-width: 1300px) {
  .project_list_item--name{
    display: flex;
    justify-content: center;
    width: 60%;
  }

  .overview--list--item--button--copy,
  .overview--list--item--button--delete,
  .project_list_item--link{
    font-size: 1rem;
  }

  .project_list_item--modified {
    display: none;
    font-size: 1rem;
  }

  .overview--list--item--button--container{
      width: 15%;
  }
}.newProject_NameError--container{
  display: flex;
  width: 25%;
  height: 11%;
  position: fixed;
  margin-top: -25%;
  margin-left: -25%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}

.newProject_nameError--header{
  display: flex;
  height: 25%;
  width: 100%;
  margin-top: 2%;
  font-size: 1.5rem;
  font-weight: bold;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.newProject_nameError--body{
  display: flex;
  height: 25%;
  width: 100%;
  margin-top: 2%;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.newProject_nameError--button--container{
  display: flex;
  height: 30%;
  width: 100%;
  margin-top: 2%;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
.newProject_nameError--button{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  align-content: center;
}

.newProject_nameError--button:hover{
  background-color: var(--hover-tab-color);
  color: var(--hover-button-text-color);
}

@media only screen and (max-width: 1300px) {
  .newProject_NameError--container{
    margin-left: 0%;
    margin-top: -150%;
  }
}.saved_projects--container{
  display: flex;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  flex-direction: column;
}

.saved_projects--header{
  display: flex;
  height: 4%;
  font-weight: bolder;
  width: 100%;
  font-size: 1.25rem;
  background-color: var(--list-header-background);
  border-bottom: 1px solid var(--list-header-border-bottom);
}

.saved_projects--header--add,
.project_list_item--spacer {
  display: flex;
  justify-content: center;
  width: 8%;
  margin-left: 2%;
  height: 100%;    
  align-items: center;
  justify-content: center;
  /* flex-direction: column; */
  text-align: center;
  align-items: center;
}
.saved_projects--header--button{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5%;
  border-radius: .75rem;
  align-content: center;
  font-weight: bold;
  width: 80%;
}

.saved_projects--header--button:hover{
  background-color: var(--hover-tab-color);
}

/* .saved_projects--header--sub,
.project_list_item--sub{
  width: 90%;
  display: flex;
  /* justify-content: space-evenly; * /
  align-items: center;
  font-weight: bold;
} */

.saved_projects--header--sub{
  margin-right: 10px;
}

.project_list_item--sub{
  font-size: 1rem;
}

.saved_projects--header--modified,
.project_list_item--modified{
  width: 25%;
  text-align: center;
}

.saved_projects--header--dealer,
.project_list_item--dealer{
  width: 15%;
  text-align: center;
}

.saved_projects--header--actions,
.project_list_item--actions{
  width: 10%;
  text-align: center;
}

.saved_projects--header--button {
  font-size: 1rem;
}

.saved_projects--header--name {
  font-size: 1rem;
  width: 60%;
}

.saved_projects--header--modified {
  font-size: 1rem;
}

.saved_projects--header--actions {
  font-size: 1rem;
}

.saved_projects--list--container{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.saved_projects--list--container::-webkit-scrollbar{
  width: 10px;
}

.saved_projects--list--container::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}

.saved_projects--list--container::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}

.overview--list--item--button--inner--closed{
  display: none;
  transition: all 0.3s linear;
}
.overview--list--item--button--inner--open{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 75%;
  justify-content: space-evenly;
  transition: all 0.3s linear;
}

.project_list_item--actions{
  display: flex;
  justify-content: space-evenly;
}

/* FIXME: */
.overview--list--item--button--edit,
.overview--list--item--button--copy,
.overview--list--item--button--delete{
  display: flex;
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  margin-right: 5%;
}

.overview--list--item--button--edit:hover,
.overview--list--item--button--copy:hover,
.overview--list--item--button--delete:hover{
  background-color: var(--hover-tab-color)
}

.project_list_item--container,
.project_list_item--container--alt{
  display: flex;
  flex-direction: row;
  background-color: var(--list-even-background);
  /* height: 4%; */
  border-bottom: var(--list-dividing-line) solid 1px;
}

.project_list_item--container--alt{
  background-color: var(--list-odd-background);
}

.overview--list--item--button--burger--open,
.overview--list--item--button--burger--closed{
  width: 1.5rem;
  height: 1rem;
  display: flex;
  justify-content: space-evenly;
  flex-flow: column nowrap;
  margin-left: auto;
  margin-bottom: auto;
}
.overview--list--item--button--burger--open{
  height: 1.5rem;
  justify-content: space-around;
}
.overview--list--item--burger--open,
.overview--list--item--burger--closed{
  width: 1.5rem;
  height: 2px;
  /* border-radius: 10px; */
  transform-origin: 1px;
  transition: all 0.3s linear;
}
.overview--list--item--burger--open{
  background-color: var(--default-text-color);
  &:nth-child(1){
    transform: rotate(45deg);
  }
  &:nth-child(2){
    transform: translateX(100%);
    opacity: 0;
  }
  &:nth-child(3){
    transform: rotate(-45deg);
  }
}
.overview--list--item--burger--closed{
  background-color: var(--default-tab-color);
  &:nth-child(1){
    transform: rotate(0);
  }
  &:nth-child(2){
    transform: translateX(0);
    opacity: 1;
  }
  &:nth-child(3){
    transform: rotate(0);
  }
}

/* NEW */
.saved_projects--list--container {
  width: 100%;
  margin-left: auto;
}

.project_list--item--container,
.project_list--item--container--alt {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.saved_projects--header--sub,
.project_list_item--sub {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-weight: bold;
}

.saved_projects--header--name,
.project_list_item--name {
  width: 30%;
}

.project_list_item--link:hover {
  color: white;
  font-size: 1.2rem;
}

@media only screen and (max-width: 1300) {
  .saved_projects--header--modified {
    display: none;
  }

  .saved_projects--header--actions {
    width: 35%;
  }

  .project_list_item--actions{
    width: 35%;
  }

  .project_list_item--name,
  .project_list_item--actions,
  .add_project--button,
  .delete_project--button{
    height: 50%;
  }

  .overview--list--item--button--inner--open{
    height: 75%;
  }

  .project_list_item--container,
  .project_list_item--container--alt {
    height: 6%;
  }

  .overview--list--item--button--burger--closed{
    margin-left: revert;
    margin-bottom: revert;
    height: 2rem;
    width: 2rem;
  }
  
  .overview--list--item--button--burger--open{
    height: 2rem;
    width: 2rem;
    margin-top: 0.5rem;
    margin-left: revert;
  }

  .overview--list--item--button--container{
    flex-direction: column-reverse;
  }
  .overview--list--item--burger--open, .overview--list--item--burger--closed{
    height: 3px;
    width: 2rem;
  }
}@media only screen and (max-width: 1300px) {
  .spt--nav--button--breakdown,
  .spt--nav--button--hardware,
  .spt--nav--button--po {
    display: none;
  }
  
  .spt--nav--button--overview,
  .spt--nav--button--save,
  .spt--nav--button--loadschedule,
  .spt--nav--button--options{
      width: 25%;
      font-size: 1.5rem;
  }
}/* popup background blocker */
.modal--background--save {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

@keyframes savepopup {
  from {transform: translateY(5%);}
  to {transform: translateY(-100%);}
}
.savepopup--container{
  display: flex;
  width: 15%;
  height: 5%;
  position: fixed;
  margin-top: -15%;
  margin-left: -25%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  animation-name: savepopup;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
.savepopup--header{
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 2%;
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .savepopup--header {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 1300px) {
  .savepopup--header {
    font-size: 1rem;
  }

  .savepopup--container{
    width: 35%;
    height: 3%;
    margin-left: 0%;
  }
}.add_customfixture_modal--container {
  display: flex;
  width: 30%;
  height: 35%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}

.add_customfixture_modal--header {
  display: flex;
  width: 100%;
  height: 10%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 2%;
}

.add_customfixture_modal--input--container {
  display: flex;
  width: 100%;
  height: 72%;
  justify-content: center;
  margin-top: 2%;
  flex-direction: column;
  justify-content: space-evenly;
}

.add_customfixture_modal--input--type,
.add_customfixture_modal--input--unit {
  color: black;
  width: 40%;
}

.add_customfixture_modal--input--row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 1.5%;
  margin-bottom: 1.5%
}

.add_customfixture_modal--label--chip,
.add_customfixture_modal--label--type,
.add_customfixture_modal--label--unit,
.add_customfixture_modal--label--voltage,
.add_customfixture_modal--label--channels,
.add_customfixture_modal--label--amps {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  text-align: left;
  /* margin-left: 5%; */
  width: 40%;
}

.add_customfixture_modal--input--chip,
.add_customfixture_modal--input--voltage,
.add_customfixture_modal--input--channels,
.add_customfixture_modal--input--amps {
  width: 40%;
  text-align: center;
}

.add_customfixture_modal--button--container {
  display: flex;
  width: 100%;
  height: 10%;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 2%;
  margin-top: 2%;
}

.add_customfixture_modal--button--add,
.add_customfixture_modal--button--cancel {
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .65rem;
  font-weight: bold;
}

.add_customfixture_modal--button--add {
  margin-left: auto;
  margin-right: 20%;
}

.add_customfixture_modal--button--cancel {
  margin-right: auto;
}

.add_customfixture_modal--button--add:hover,
.add_customfixture_modal--button--cancel:hover {
  background-color: var(--hover-tab-color)
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .add_customfixture_modal--header {
    font-size: 1rem;
  }

  .add_customfixture_modal--input--chip,
  .add_customfixture_modal--input--channels,
  .add_customfixture_modal--input--voltage,
  .add_customfixture_modal--input--amps {
    font-size: 0.8rem;
  }

  /* .add_customfixture_modal--input--channels,
  .add_customfixture_modal--input--voltage,
  .add_customfixture_modal--input--amps {
    width: 15%;
  } */
}

@media only screen and (max-width: 1300px) {
  .add_customfixture_modal--input--chip,
  .add_customfixture_modal--input--channels,
  .add_customfixture_modal--input--voltage,
  .add_customfixture_modal--input--amps,
  .add_customfixture_modal--label--chip,
  .add_customfixture_modal--label--type,
  .add_customfixture_modal--label--voltage,
  .add_customfixture_modal--label--channels,
  .add_customfixture_modal--label--amps,
  .add_customfixture_modal--button--add,
  .add_customfixture_modal--button--cancel {
    font-size: 1rem;
  }

  .add_customfixture_modal--header {
    font-size: 2rem;
  }

  .add_customfixture_modal--button--add,
  .add_customfixture_modal--button--cancel {
    height: 75%;
  }

  .add_customfixture_modal--container {
    width: 75%;
    height: 37.5%;
    margin-top: -15%;
    margin-left: 0;
  }
}.customfixture--container,
.customfixture--container--alt,
.customfixture--item,
.customfixture--Name,
.customfixture--channels,
.customfixture--voltage,
.customfixture--amps,
.customfixture--button--edit,
.customfixture--button--remove{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.customfixture--container,
.customfixture--container--alt{
  display: flex;
  justify-content: space-between;
  min-height: 8.6666%;
  width: 100%;
  background-color: var(--list-odd-background);
  border-bottom: var(--list-dividing-line) solid 1px;
}
.customfixture--container--alt{
  background-color: var(--list-even-background);
}

.customfixture--item{
  width: 100%;
}
.customfixture--Name,
.customfixture_modal--list--header--name{
  width: 25%;
  margin-left: 5%;
}

.customfixture--channels {
  width: 11%;
}

.customfixture--voltage {
  width: 10%;
}

.customfixture--amps {
  width: 10%;
}

.customfixture--button--container {
  display: flex;
  justify-content: space-evenly;
  width: 25%;
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .customfixture--button--edit,
  .customfixture--button--remove {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 1300px) {
  .customfixture--button--edit,
  .customfixture--button--remove,
  .customfixture--Name {
    font-size: 1rem;
  }

  .customfixture--channels,
  .customfixture--voltage,
  .customfixture--amps{
      display: none;
  }

  .customfixture--Name{
      width: 47%;
      margin-left: 2%;
  }
  .customfixture--button--container{
      width: 47%;
      margin-right: 2%;
  }
  .customfixture--container,
  .customfixture--container--alt{
      min-height: 10%;
      max-height: 10%;
  }
}.edit_customfixture_modal--container{
  display: flex;
  width: 30%;
  height: 35%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}

.edit_customfixture_modal--header{
  display: flex;
  width: 100%;
  height: 10%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 2%;
}

.edit_customfixture_modal--input--container{
  display: flex;
  width: 100%;
  height: 72%;
  justify-content: center;
  margin-top: 2%;
  flex-direction: column;
  justify-content: space-evenly;
}

.edit_customfixture_modal--input--row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.edit_customfixture_modal--label--chip,
.edit_customfixture_modal--label--voltage,
.edit_customfixture_modal--label--channels,
.edit_customfixture_modal--label--type,
.edit_customfixture_modal--label--unit,
.edit_customfixture_modal--label--amps{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  text-align: left;
  margin-left: 5%;
  width: 40%;
}

.edit_customfixture_modal--input--chip,
.edit_customfixture_modal--input--voltage,
.edit_customfixture_modal--input--channels,
.edit_customfixture_modal--input--type,
.edit_customfixture_modal--input--unit,
.edit_customfixture_modal--input--amps{
  margin-left: auto;
  margin-right: 5%;
  width: 10%;
  width: 40%;
  text-align: center;
}

.edit_customfixture_modal--button--container{
  display: flex;
  width: 100%;
  height: 10%;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 2%;
  margin-top: 2%;
}

.edit_customfixture_modal--button--edit,
.edit_customfixture_modal--button--cancel{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .65rem;
  font-weight: bold;
}

.edit_customfixture_modal--button--edit{
  margin-left: auto;
  margin-right: 20%;
}

.edit_customfixture_modal--button--cancel{
  margin-right: auto;
}

.edit_customfixture_modal--button--edit:hover,
.edit_customfixture_modal--button--cancel:hover{
  background-color: var(--hover-tab-color)
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .edit_customfixture_modal--header {
    font-size: 1rem;
  }

  .edit_customfixture_modal--input--chip,
  .edit_customfixture_modal--input--channels,
  .edit_customfixture_modal--input--voltage,
  .edit_customfixture_modal--input--amps {
    font-size: 0.8rem;
  }

  /* .edit_customfixture_modal--input--channels,
  .edit_customfixture_modal--input--voltage,
  .edit_customfixture_modal--input--amps {
      width: 15%;
  } */
}

@media only screen and (max-width: 1300px) {
  .edit_customfixture_modal--input--chip,
  .edit_customfixture_modal--input--channels,
  .edit_customfixture_modal--input--voltage,
  .edit_customfixture_modal--input--amps,
  .edit_customfixture_modal--label--chip,
  .edit_customfixture_modal--label--voltage,
  .edit_customfixture_modal--label--channels,
  .edit_customfixture_modal--label--amps,
  .edit_customfixture_modal--button--edit,
  .edit_customfixture_modal--button--cancel {
    font-size: 1rem;
  }

  .edit_customfixture_modal--header {
    font-size: 2rem;
  }

  .edit_customfixture_modal--button--edit,
  .edit_customfixture_modal--button--cancel {
    height: 75%;
  }

  .edit_customfixture_modal--container {
    width: 75%;
    height: 37.5%;
    margin-top: -15%;
    margin-left: 0%;
  }
}.remove_fixture_modal--container{
  display: flex;
  width: 25%;
  height: 15%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
  z-index: 11;
}

.remove_fixture_modal--header{
  display: flex;
  width: 100%;
  height: 25%;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: bold;
  margin-top: 3%;
}

.remove_fixture_modal--chip{
  height: 15%;
  text-align: center;
  font-size: 1.5rem;
  margin-top: 2%;
}

.remove_fixture_modal--button--space{
  display: flex;
  height: 55%;
  align-items: center;
}

.remove_fixture_modal--button--container{
  display: flex;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  justify-content: center;
  height: 37%;
  margin-top: 2%;
  margin-bottom: 1%;
}

.remove_fixture_modal--button--confirm,
.remove_fixture_modal--button--cancel{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  margin-right: 5%;
}

.remove_fixture_modal--button--confirm{
  margin-left: 20%;
}

.remove_fixture_modal--button--cancel{
  margin-left: auto;
  margin-right: 20%;
}

.remove_fixture_modal--button--confirm:hover,
.remove_fixture_modal--button--cancel:hover{
  background-color: var(--hover-tab-color)
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .remove_fixture_modal--header {
    font-size: 1rem;
  }

  .remove_fixture_modal--chip,
  .remove_fixture_modal--button--confirm,
  .remove_fixture_modal--button--cancel {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 1300px) {
  .remove_fixture_modal--chip,
  .remove_fixture_modal--button--confirm,
  .remove_fixture_modal--button--cancel {
    font-size: 1rem;
  }

  .remove_fixture_modal--header {
    font-size: 2rem;
  }

  .remove_fixture_modal--container {
    width: 75%;
    margin-top: -15%;
    margin-left: 0;
  }
}.customfixture_modal--container{
  display: flex;
  width: 50%;
  height: 50%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}

.customfixture_modal--header{
  display: flex;
  width: 100%;
  height: 10%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 2%;
}

.customfixture_modal--button--container{
  display: flex;
  width: 100%;
  height: 7%;
  justify-content: center;
}

.customfixture_modal--button--add{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  align-content: center;
}

.customfixture_modal--button--add:hover{
  background-color: var(--hover-tab-color)
}

.customfixture_modal--list--container{
  display: flex;
  width: 90%;
  height: 65%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 0%;
  margin-bottom: 3%;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  border: 1px solid var(--list-header-border-bottom);
}
.customfixture_modal--list--container::-webkit-scrollbar{
  width: 10px;
}

.customfixture_modal--list--container::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}

.customfixture_modal--list--container::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}

.customfixture_modal--list--header,
.customfixture_modal--list--header--name,
.customfixture_modal--list--header--channel,
.customfixture_modal--list--header--voltage,
.customfixture_modal--list--header--amps,
.customfixture_modal--list--header--actions {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  align-items: center;
}
.customfixture_modal--list--header{
  display: flex;
  margin-top: 2%;
  height: 5%;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  background-color: var(--list-even-background);
  justify-content: space-between;
}

.customfixture_modal--list--header--name{
  width: 25%;
  margin-left: 5%;
}

.customfixture_modal--list--header--channel{
  width: 11%;
}

.customfixture_modal--list--header--voltage{
  width: 10%;
}

.customfixture_modal--list--header--amps{
  width: 10%;
}

.customfixture_modal--list--header--actions{
  display: flex;
  justify-content: space-evenly;
  width: 25%;
}
.customfixture_modal--list--header--actions{
  margin-right: 10px;
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .customfixture_modal--header {
    font-size: 1rem;
  }

  .customfixture_modal--button--add {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 1300px) {
  .customfixture_modal--button--add,
  .customfixture_modal--list--header--name,
  .customfixture_modal--list--header--actions {
    font-size: 1rem;
  }

  .customfixture_modal--header {
    font-size: 2rem;
  }

  .customfixture_modal--container {
    width: 75%;
    height: 37.5%;
    margin-top: -15%;
    margin-left: 0%;
  }

  .customfixture_modal--list--header--channel,
  .customfixture_modal--list--header--voltage,
  .customfixture_modal--list--header--amps {
      display: none;
  }

  .customfixture_modal--list--header--name {
      width: 47%;
      margin-left: 2%;
  }

  .customfixture_modal--list--header--actions {
      width: 47%;
      margin-right: 2%;
  }
}.groupedit--container{
  display: flex;
  width: 40%;
  height: 25%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
}
.groupedit--container{
  height: 40%;
}

.groupedit--container{
  flex-direction: column;
}

.groupedit--header {
  display: flex;
  width: 100%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 4%;
  text-align: center;
}

.groupedit--list--container {
  display: flex;
  width: 90%;
  height: 50%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 2%;
  flex-direction: column;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  border: 1px solid var(--list-header-border-bottom);
}

.groupedit--list--container::-webkit-scrollbar {
  width: 10px;
}

.groupedit--list--container::-webkit-scrollbar-track {
  background-color: var(--hover-tab-color);
}

.groupedit--list--container::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}

.groupedit--list-item,
.groupedit--list-item-alt {
  display: flex;
  min-height: 18.75%;
  width: 100%;
  background-color: var(--list-odd-background);
  align-items: center;
  padding-left: 5%;
  border-bottom: var(--list-dividing-line) solid 1px;
}

.groupedit--list-item-alt {
  background-color: var(--list-even-background);
}

.groupedit--row1--container,
.groupedit--row2--container,
.groupedit--row3--container{
  display: flex;
  width: 100%;
  height: 8%;
  justify-content: center;
  margin-top: 2%;
}
.groupedit--row3--container{
  margin-top: 1%;
  margin-bottom: 1%;
}

.groupedit--room--dropdown,
.groupedit--type--dropdown,
.groupedit--chip--dropdown,
.groupedit--unit--dropdown,
.groupedit--altcontrol--dropdown{
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  font-weight: bold;
}

.groupedit--room--dropdown{
  margin-left: 10%;
  width: 25%;
}
.groupedit--type--dropdown{
  width: 25%;
  margin-left: auto;
}

.groupedit--chip--dropdown{
  width: 25%;
  margin-left: auto;
  margin-right: 10%;
}

.groupedit--unit--dropdown{
  margin-left: 10%;
  width: 25%;
}
.groupedit--altcontrol--dropdown{
  width: 25%;
  margin-left: auto;
  margin-right: 10%;
}

.groupedit--button--save,
.groupedit--button--cancel{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
}

.groupedit--button--save{
  margin-left: 35%;
}

.groupedit--button--cancel{
  margin-right: 35%;
  margin-left: auto;
}

.groupedit--button--save:hover,
.groupedit--button--cancel:hover{
  background-color: var(--hover-tab-color)
}

@media only screen and (max-width: 1670), (max-height: 900px) {
  .groupedit--header {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 1300px) {
  .groupedit--header {
    font-size: 1rem;
  }
}.groupremove--container{
  display: flex;
  width: 25%;
  height: 50%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}

.groupremove--header {
  display: flex;
  width: 100%;
  height: 10%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 2%;
}

.groupremove--list--container {
  display: flex;
  width: 90%;
  height: 75%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 2%;

  flex-direction: column;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  border: 1px solid var(--list-header-border-bottom);
}

.groupremove--list--container::-webkit-scrollbar {
  width: 10px;
}

.groupremove--list--container::-webkit-scrollbar-track {
  background-color: var(--hover-tab-color);
}

.groupremove--list--container::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}

.groupremove--list-item,
.groupremove--list-item-alt {
  display: flex;
  min-height: 15%;
  max-height: 15%;
  width: 100%;
  background-color: var(--list-odd-background);
  align-items: center;
  padding-left: 5%;
  border-bottom: var(--list-dividing-line) solid 1px;
}
.groupremove--list-item-alt {
  background-color: var(--list-even-background);
}

.groupremove--button--container {
  display: flex;
  justify-content: center;
  height: 8%;
  margin-top: 2%;
  margin-bottom: 2%;
}

.groupremove--button--delete,
.groupremove--button--cancel {
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .65rem;
  font-weight: bold;
  margin-right: 5%;
}

.groupremove--button--delete:hover,
.groupremove--button--cancel:hover {
  background-color: var(--hover-tab-color)
}

.groupremove--button--delete {
  margin-left: 15%;
}

.groupremove--button--cancel {
  margin-left: auto;
  margin-right: 15%;
}

.groupremove--container--lr {
  display: flex;
  width: 25%;
  height: 50%;
  position: fixed;
  margin-top: -10%;
  margin-left: -20%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .groupremove--header {
    font-size: 1rem;
  }

  .groupremove--list-item,
  .groupremove--list-item-alt {
      min-height: 12%;
      max-height: 12%;
  }

  .groupremove--button--delete,
  .groupremove--button--cancel {
    font-size: 0.8rem;
  }

  .groupremove--button--container {
    height: 5%;
  }
}

@media only screen and (max-width: 1300px) {
  .groupremove--button--delete,
  .groupremove--button--cancel,
  .groupremove--header {
    font-size: 1rem;
  }
}
/* edit locations and room popup stuff and custom io edit*/
.edit_room_modal--container {
  display: flex;
  width: 25%;
  height: 15%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
  z-index: 11;
  justify-content: space-between;
}

.edit_room_modal--header {    
  display: flex;
  width: 100%;
  height: 25%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 3%;
}
.edit_room_modal--input--container {
  display: flex;
  width: 100%;
  height: 20%;
  justify-content: center;
  margin-top: 3%;
}

.edit_room_modal--input {
  width: 60%;
  margin-left: 5%;
}



.edit_room_modal--control--dropdown {
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  font-weight: bold;
  margin-left: auto;
  margin-right: 5%;
  width: 30%;
}

.edit_room_modal--button--container {
  display: flex;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  justify-content: center;
  height: 10%;
  margin-top: 2%;
  margin-bottom: 1%;
}

.edit_room_modal--button--save,
.edit_room_modal--button--cancel {
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  margin-right: 5%;
}

.edit_room_modal--button--save {
  margin-left: 20%;
}

.edit_room_modal--button--cancel {
  margin-left: auto;
  margin-right: 20%;
}

.edit_room_modal--button--save:hover,
.edit_room_modal--button--cancel:hover {
  background-color: var(--hover-tab-color)
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
    .edit_room_modal--header {
        font-size: 1rem;
    }

    .edit_room_modal--input,
    .edit_room_modal--control--dropdown,
    .edit_room_modal--button--save,
    .edit_room_modal--button--cancel {
        font-size: 0.8rem;
    }
}

@media only screen and (max-width: 1300px) {
    .edit_room_modal--header,
    .edit_room_modal--input,
    .edit_room_modal--control--dropdown,
    .edit_room_modal--button--save,
    .edit_room_modal--button--cancel {
        font-size: 1rem;
    }
}/* Remove Location and Room popup stuff and custom io*/
.remove_room_modal--container {
  display: flex;
  width: 25%;
  height: 15%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
  z-index: 11;
}

.remove_room_modal--header {
  display: flex;
  width: 100%;
  height: 25%;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: bold;
  margin-top: 3%;
}
.remove_room_modal--name {
  height: 15%;
  text-align: center;
  font-size: 1.5rem;
}
.remove_room_modal--button--spacer {
  display: flex;
  height: 57%;
  align-items: center;
}
.remove_room_modal--button--container {
  display: flex;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  justify-content: center;
  height: 37%;
  margin-top: 2%;
  margin-bottom: 1%;
}

.remove_room_modal--button--confirm,
.remove_room_modal--button--cancel {
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  margin-right: 5%;
}
.remove_room_modal--button--confirm {
  margin-left: 20%;
}

.remove_room_modal--button--cancel {
  margin-left: auto;
  margin-right: 20%;
}

.remove_room_modal--button--confirm:hover,
.remove_room_modal--button--cancel:hover {
  background-color: var(--hover-tab-color)
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .remove_room_modal--header {
      font-size: 1rem;
  }

  .remove_room_modal--name,
  .remove_room_modal--button--confirm,
  .remove_room_modal--button--cancel {
      font-size: .8rem;
  }

  .remove_room_modal--container {
      height: 12%;
  }
}

@media only screen and (max-width: 1300px) {
  .remove_room_modal--name,
  .remove_room_modal--button--confirm,
  .remove_room_modal--button--cancel,
  .remove_room_modal--header {
    font-size: 1rem;
  }
}.location_room_groupmenu--background{
  display: flex;
  width: 50%;
  height: 50%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  z-index: 5;
}
.location_room_groupmenu--background--sub {
  width: 100%;
  height: 100%;
  background: var(--default-modal-background);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  margin-top: -7.5%;
  /* margin-left: -15%; */
}

.groupedit--container--lr {
  display: flex;
  width: 25%;
  height: 50%;
  position: fixed;
  margin-top: -10%;
  margin-left: -20%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}

.groupedit--container--lr{
  height: 40%;
}


.groupedit--lr--row2--container {
  display: flex;
  justify-content: center;
  height: 8%;
  margin-top: 2%;
  margin-bottom: 2%;
}

.groupedit--lr--row1--container {
  display: flex;
  width: 100%;
  height: 10%;
  justify-content: center;
  margin-top: 2%;
}
.groupedit--lr--row1--container{
  height: 20%;
  width: 100%;
}

.groupedit--lr--select--header{
  display: flex;
  width: 100%;
  height: 30%;
  justify-content: space-evenly;
}
.groupedit--lr--select--container{
  display: flex;
  width: 100%;
  height: 50%;
  justify-content: space-evenly;
}

.groupedit--lr--select {
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  font-weight: bold;
}
.groupedit--lr--select{
  width: 80%;
  height: 40%;
}
.groupedit--lr--select--type,
.groupedit--lr--select--node,
.groupedit--lr--select--ac{
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  font-weight: bold;
}
.groupedit--lr--location--options{
  width: 100%;
}
.groupedit--lr--select--header--type,
.groupedit--lr--select--type{
  width: 30%;
}
.groupedit--lr--select--header--node,
.groupedit--lr--select--node{
  width: 30%;
}
.groupedit--lr--select--header--ac,
.groupedit--lr--select--ac{
  width: 30%;
}
.groupedit--lr--select--header--type,
.groupedit--lr--select--header--node,
.groupedit--lr--select--header--ac{
  text-align: center;
}

.groupedit--lr--button--save,
.groupedit--lr--button--cancel {
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .65rem;
  font-weight: bold;
  margin-right: 5%;
}

.groupedit--lr--button--save:hover,
.groupedit--lr--button--cancel:hover {
  background-color: var(--hover-tab-color)
}

.groupedit--lr--button--save {
  margin-left: 15%;
}

.groupedit--lr--button--cancel {
  margin-left: auto;
  margin-right: 15%;
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .groupedit--container--lr {
    width: 30%;
  }

  .groupedit--lr--button--save,
  .groupedit--lr--button--cancel,
  .groupedit--lr--select--type,
  .groupedit--lr--select--node,
  .groupedit--lr--select--ac,
  .groupedit--lr--select {
    font-size: 0.8rem;
  }
}

@media only screen and (max-height: 1300px) {
  .groupedit--lr--button--save,
  .groupedit--lr--button--cancel,
  .groupedit--lr--select--type,
  .groupedit--lr--select--node,
  .groupedit--lr--select--ac,
  .groupedit--lr--select {
    font-size: 1rem;
  }
}.multiroom--container{
  display: flex;
  width: 40%;
  height: 50%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
  z-index: 11;
  /* justify-content: space-between; */
}
.multiroom--header{
  display: flex;
  height: 10%;
  width: 100%;
  margin-top: 2%;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: bold;
}
.multiroom--select--container{
  display: flex;
  height: 5%;
  width: 100%;
  margin-top: 2%;
  justify-content: center;
}
.multiroom--select{
  width: 50%;
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  font-weight: bold;
}
.multiroom--input--list--container{
  display: flex;
  width: 90%;
  height: 60%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 3%;
  margin-bottom: 3%;
  flex-direction: column;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  border: 1px solid var(--list-header-border-bottom);
}
.multiroom--input--list--container::-webkit-scrollbar{
  width: 10px;
}

.multiroom--input--list--container::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}

.multiroom--input--list--container::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}
.multiroom--list--item{
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  height: 8%;
  margin-bottom: 1%;
}
.multiroom--footer{
  display: flex;
  flex-direction: row;
  height: 8%;
  margin-top: 2%;
  margin-bottom: 3%;
  justify-content: space-evenly;
}
.multiroom--button--add,
.multiroom--button--cancel{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .65rem;
  font-weight: bold;
}
.multiroom--button--add:hover,
.multiroom--button--cancel:hover{
    background-color: var(--hover-tab-color)
}


@media only screen and (max-width: 1670px), (max-height: 900px) {
    .multiroom--header {
        font-size: 1rem;
    }

    .multiroom--button--add,
    .multiroom--button--cancel {
        font-size: .8rem;
        width: auto;
    }
}

@media only screen and (max-width: 1300px) {
    .multiroom--header,
    .multiroom--button--add,
    .multiroom--button--cancel {
        font-size: 1rem;
    }
}
/* Location and room Manager and custom io manager */
.room_manager--container {
  display: flex;
  width: 50%;
  height: 50%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}

.room_manager--header {
  display: flex;
  width: 100%;
  height: 10%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 2%;
}

.room_manager--input--container {
  display: flex;
  width: 100%;
  height: 7%;
  justify-content: space-between;
}

.room_manager--control--dropdown{
  margin-right: auto;
  margin-left: auto;
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  font-weight: bold;
  width: 25%;
}


.room_manager--addButton{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  align-content: center;
  margin-right: 5%;
  width: 20%;
}

.room_manager--addrooms--button{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  font-weight: bold;
  align-content: center;
  margin-right: 5%;
  width: 100%;
}

.room_manager--addButton:hover,
.room_manager--addrooms--button:hover,
.room_manager--group_action--button:hover {
  background-color: var(--hover-tab-color)
}


.room_manager--group_action {
  display: flex;
  width: 90%;
  margin-left: 5%;
  height: 5%;
  margin-top: 2%;
}

.room_manager--groupaction--spacer {
  border: none;
  margin: none;
  width: 10%;
}
.room_manager--groupaction--spacer{
  width: 40%;
}
.room_Manager--groupaction--spacer{
  display: flex;
  width: 30%;
}
.room_manager--group_action--button {
  cursor: default;
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  font-weight: bold;
  align-content: center;
  text-align: center;
  margin-left: auto;
  width: 18%;
}
.room_manager--group_action--button:hover {
  color: var(--hover-button-text-color);
}



.room_manager--list--header {
  display: flex;
  width: 90%;
  height: 6%;
  font-weight: bolder;
  margin-left: 5%;
  margin-right: 5%;
  background-color: var(--list-header-background);
  border-left: 1px solid var(--list-header-background);
  border-right: 1px solid var(--list-header-background);
  justify-content: space-between;
}

.room_manager--list--container {
  display: flex;
  flex-direction: column;
  width: 90%;
  height: 61%;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 3%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  border: 1px solid var(--list-header-border-bottom);
}

.room_manager--list--container::-webkit-scrollbar {
  width: 10px;
}

.room_manager--list--container::-webkit-scrollbar-track {
  background-color: var(--hover-tab-color);
}

.room_manager--list--container::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}

.room_manager--list--item--conatiner,
.room_manager--list--item--conatiner--alt {
  display: flex;
  min-height: 10%;
  width: 100%;
  background-color: var(--list-even-background);
  justify-content: space-between;
  border-bottom: var(--list-dividing-line) solid 1px;
}

.room_manager--list--item--conatiner--alt {
  background-color: var(--list-odd-background);
}

.room_manager--list--item--name,
.room_manager--list--item--control,
.room_manager--list--item--select,
.room_manager--list--header--name--container,
.room_manager--list--header--control--container,
.room_manager--list--header--actions,
.room_manager--list--header--select {   
  display: flex;
  height: 100%;    
  align-items: center;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.room_manager--list--item--name,
.room_manager--list--header--name--container{
  width: 40%;
  margin-left: 1%;

}

.room_manager--list--item--control,
.room_manager--list--header--control--container{
  width: 20%;

}

.room_manager--list--item--button--container{
  display: flex;
  width: 20%;
  align-items: center;
  flex-direction: row;
  justify-content: space-evenly;
}

.room_manager--list--header--actions{
  width: 20%;
}

.room_manager--list--item--editbutton,
.room_manager--list--item--deleteButton {
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .65rem;
  font-weight: bold;
  margin-right: 3%;
}

.room_manager--list--item--editbutton:hover,
.room_manager--list--item--deleteButton:hover {
  background-color: var(--hover-tab-color)
}

.room_manager--list--item--select,
.room_manager--list--header--select{
  width: 9%;
}

.room_manager--list--header--select,
.customio--list--header--select{
  margin-right: 10px;
}

.room_manager--list--item--checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--default-tab-color);
  border: 1px solid var(--default-tab-border-color);
  cursor: pointer;
  display: flex;
}
.room_manager--list--item--checkbox:checked {
  background-color: rgb(207, 0, 0);
}
.room_manager--list--item--checkbox:checked::before {
  content: '\2714';
  font-size: 1.1rem;
  color: #fff;
  transform: translateY(-4px);
}

.room_manager--container--error{
  display: flex;
  width: 50%;
  height: 50%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  align-items: center;
}
.room_manager--error {
  width: 100%;
  text-align: center;
  font-size: xxx-large;
  font-weight: bolder;
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
    .room_manager--header {
        font-size: 1rem;
    }

    .room_manager--list--item--editbutton,
    .room_manager--list--item--deleteButton,
    .room_manager--group_action--button {
        font-size: .8rem;
        width: auto;
    }

    .room_manager--input,
    .room_manager--control--dropdown,
    .room_manager--addButton,
    .room_manager--addrooms--button {
        font-size: 0.8rem;
    }

    .room_manager--container{
        width: 55%;
        margin-left: -25%;
    }

    .room_manager--list--item--checkbox {
        width: 14px;
        height: 14px;
    }
  
    .room_manager--list--item--checkbox:checked::before {
        font-size: .9rem;
    }
}

@media only screen and (max-width: 1300px) {
    .room_manager--header,
    .room_manager--list--item--editbutton,
    .room_manager--list--item--deleteButton,
    .room_manager--group_action--button,
    .room_manager--input,
    .room_manager--control--dropdown,
    .room_manager--addButton,
    .room_manager--addrooms--button,
    .room_manager--list--item--checkbox:checked::before {
        font-size: 1rem;
    }
}.edit_location_modal--container {
  display: flex;
  width: 25%;
  height: 15%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
  z-index: 11;
  justify-content: space-between;
}
.edit_location_modal--container{
  height: 25%;
  width: 30%;
}

.edit_location_modal--header {    
  display: flex;
  width: 100%;
  height: 25%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 3%;
}
.edit_location_modal--input--container  {
  display: flex;
  width: 100%;
  height: 20%;
  justify-content: center;
  margin-top: 3%;
}

.edit_location_modal--input {
  width: 60%;
  margin-left: 5%;
}

.edit_location_modal--select--header--container{
  display: flex;
  justify-content: space-evenly;
  margin-top: 3%;
}
.edit_location_modal--select--container{
  display: flex;
  justify-content: space-evenly;
  height: 20%;
  margin-top: 1%;
}
.edit_location_modal--header--type,
.edit_location_modal--header--Node,
.edit_location_modal--header--ac{
  width: 30%;
  text-align: center;
}

.edit_location_modal--type--dropdown,
.edit_location_modal--node--dropdown,
.edit_location_modal--ac--dropdown{
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  font-weight: bold;
  width: 30%;
}

.edit_location_modal--button--container {
  display: flex;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  justify-content: center;
  height: 10%;
  margin-top: 2%;
  margin-bottom: 1%;
}
.edit_location_modal--button--save,
.edit_location_modal--button--cancel {
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  margin-right: 5%;
}
.edit_location_modal--button--save {
  margin-left: 20%;
}
.edit_location_modal--button--cancel {
  margin-left: auto;
  margin-right: 20%;
}
.edit_location_modal--button--save:hover,
.edit_location_modal--button--cancel:hover {
  background-color: var(--hover-tab-color)
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
    .edit_location_modal--header {
        font-size: 1rem;
    }

    .edit_location_modal--input,
    .edit_location_modal--type--dropdown,
    .edit_location_modal--node--dropdown,
    .edit_location_modal--ac--dropdown,
    .edit_location_modal--button--save,
    .edit_location_modal--button--cancel {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 1300px) {
    .edit_location_modal--header,
    .edit_location_modal--input,
  .edit_location_modal--type--dropdown,
  .edit_location_modal--node--dropdown,
  .edit_location_modal--ac--dropdown,
  .edit_location_modal--button--save,
  .edit_location_modal--button--cancel {
    font-size: 1rem;
  }
}/* Remove Loction and Room popup stuff and custom io*/
.remove_location_modal--container {
  display: flex;
  width: 25%;
  height: 15%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
  z-index: 11;
}

.remove_location_modal--header {
  display: flex;
  width: 100%;
  height: 25%;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: bold;
  margin-top: 3%;
}
.remove_location_modal--name {
  height: 15%;
  text-align: center;
  font-size: 1.5rem;
}
.remove_location_modal--button--spacer {
  display: flex;
  height: 57%;
  align-items: center;
}
.remove_location_modal--button--container {
  display: flex;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  justify-content: center;
  height: 37%;
  margin-top: 2%;
  margin-bottom: 1%;
}

.remove_location_modal--button--confirm,
.remove_location_modal--button--cancel {
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  margin-right: 5%;
}
.remove_location_modal--button--confirm {
  margin-left: 20%;
}

.remove_location_modal--button--cancel {
  margin-left: auto;
  margin-right: 20%;
}

.remove_location_modal--button--confirm:hover,
.remove_location_modal--button--cancel:hover {
  background-color: var(--hover-tab-color)
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
    .remove_location_modal--header {
        font-size: 1rem;
    }
    .remove_location_modal--name,
    .remove_location_modal--button--confirm,
    .remove_location_modal--button--cancel {
        font-size: 0.8rem;
    }
    .remove_location_modal--container {
        height: 12%;
    }
}

@media only screen and (max-width: 1300px) {
    .remove_location_modal--name,
    .remove_location_modal--button--confirm,
    .remove_location_modal--button--cancel,
    .remove_location_modal--header {
    font-size: 1rem;
  }
}.location_manager--list--item--container,
.location_manager--list--item--container--alt {
  display: flex;
  min-height: 10%;
  width: 100%;
  background-color: var(--list-even-background);
  justify-content: space-between;
  border-bottom: var(--list-dividing-line) solid 1px;
}

.location_manager--list--item--container--alt {
  background-color: var(--list-odd-background);
}

.location_manager--list--item--name,
.location_manager--list--item--type,
.location_manager--list--item--node,
.location_manager--list--item--ac,
.location_manager--list--item--select {
  display: flex;
  height: 100%;    
  align-items: center;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.location_manager--list--item--name {
  min-width: 35%;
  max-width: 35%;
  margin-left: 1%;
}

.location_manager--list--item--type {
  min-width: 15%;
  max-width: 15%;
}
.location_manager--list--item--ac{
  min-width: 15%;
  max-width: 15%;
}

.location_manager--list--item--node{
  min-width: 15%;
  max-width: 15%;
}

.location_manager--list--item--button--container {
  display: flex;
  width: 20%;
  align-items: center;
  flex-direction: row;
  justify-content: space-evenly;
}

.location_manager--list--item--editbutton,
.location_manager--list--item--deletebutton {
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .65rem;
  font-weight: bold;
  margin-right: 3%;
}

.location_manager--list--item--editbutton:hover,
.location_manager--list--item--deletebutton:hover {
  background-color: var(--hover-tab-color)
}

.location_manager--list--item--select {
  width: 9%;
}

.location_manager--list--item--checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--default-tab-color);
  border: 1px solid var(--default-tab-border-color);
  cursor: pointer;
  display: flex;
}
.location_manager--list--item--checkbox:checked {
  background-color: rgb(207, 0, 0);
}
.location_manager--list--item--checkbox:checked::before {
  content: '\2714';
  font-size: 1.1rem;
  color: #fff;
  transform: translateY(-4px);
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
    .location_manager--list--item--editbutton,
    .location_manager--list--item--deletebutton {
        font-size: 0.8rem;
        width: auto;
    }

    .location_manager--list--item--checkbox {
        width: 14px;
      height: 14px;
    }

    .location_manager--list--item--checkbox:checked::before {
        font-size: 0.9rem;
    }
}

@media only screen and (max-width: 1300px) {
    .location_manager--list--item--editbutton,
  .location_manager--list--item--deletebutton,
  .location_manager--list--item--checkbox:checked::before {
    font-size: 1rem;
  }
}/* Location and room Manager and custom io manager */
.location_manager--container {
  display: flex;
  width: 50%;
  height: 50%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}

.location_manager--container{
  width: 80%;
  margin-left: -15%;
}


.location_manager--header {
  display: flex;
  width: 100%;
  height: 10%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 2%;
}
.location_manager--input--container {
  display: flex;
  width: 100%;
  height: 7%;
  justify-content: space-between;
}

.location_manager--input,
.room_manager--input{
  width: 40%;
  margin-left: 5%;
}
.location_manager--input{
  width: 30%;
}
.location_manager--type--dropdown,
.location_manager--node--dropdown,
.location_manager--ac--dropdown {
  margin-right: auto;
  margin-left: auto;
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  font-weight: bold;
  width: 25%;
}
.location_manager--type--dropdown
{   
  margin-left: none;
  margin-right: none;
  width: 12%;
}
.location_manager--node--dropdown{
  margin-left: none;
  margin-right: none;
  width: 15%;
}
.location_manager--ac--dropdown{
  margin-left: none;
  margin-right: none;
  width: 10%;
}

.location_manager--addButton {
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  align-content: center;
  margin-right: 5%;
  width: 20%;
}

.location_manager--addButton:hover,
.location_manager--group_action--button:hover {
  background-color: var(--hover-tab-color)
}

.location_manager--group_action {
  display: flex;
  width: 90%;
  margin-left: 5%;
  height: 5%;
  margin-top: 2%;
}

.location_manager--groupaction--spacer {
  border: none;
  margin: none;
  width: 10%;
}

.location_manager--group_action--button {
  cursor: default;
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  font-weight: bold;
  align-content: center;
  text-align: center;
  margin-left: auto;
  width: 18%;
}
.location_manager--group_action--button:hover {
  color: var(--hover-button-text-color);
}



.location_manager--list--header {
  display: flex;
  width: 90%;
  height: 6%;
  font-weight: bolder;
  margin-left: 5%;
  margin-right: 5%;
  background-color: var(--list-header-background);
  border-left: 1px solid var(--list-header-background);
  border-right: 1px solid var(--list-header-background);
  justify-content: space-between;
}

.location_manager--list--container {
  display: flex;
  flex-direction: column;
  width: 90%;
  height: 61%;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 3%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  border: 1px solid var(--list-header-border-bottom);
}

.location_manager--list--container::-webkit-scrollbar {
  width: 10px;
}

.location_manager--list--container::-webkit-scrollbar-track {
  background-color: var(--hover-tab-color);
}

.location_manager--list--container::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}


.location_manager--list--header--name--container,
.location_manager--list--header--type--container,
.location_manager--list--header--node--container,
.location_manager--list--header--ac--container,
.location_manager--list--header--actions,
.location_manager--list--header--select {   
  display: flex;
  height: 100%;    
  align-items: center;
  justify-content: center;
  text-align: center;
  align-items: center;
}


.location_manager--list--header--name--container{
  min-width: 35%;
  max-width: 35%;
  margin-left: 1%;
}

.location_manager--list--header--type--container{
  min-width: 15%;
  max-width: 15%;
}
.location_manager--list--header--ac--container {
  min-width: 15%;
  max-width: 15%;
}

.location_manager--list--header--node--container {
  min-width: 15%;
  max-width: 15%;
}

.location_manager--list--header--actions {
  width: 20%;
}


.location_manager--list--header--select {
  width: 9%;
}

.location_manager--list--header--select {
  margin-right: 10px;
}

@keyframes groupMenuLocationRoom{
  from {transform: translateY(-5%);}
  to {transform: translateY(0%);}
}

.group_action--menu--container{
  position: absolute;
  width: 16.2%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-bottom-left-radius: .75rem;
  border-bottom-right-radius: .75rem;
  right: 5%;
  z-index: 10;
  animation-name: groupMenuLocationRoom;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}


.group_action--menu--ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.group_action--menu--li {
  display: flex;
  width: 100%;
  background-color: var(--default-tab-color);
  border: 1px solid var(--default-tab-border-color);
  color: var(--default-tab-text-color);
  align-items: center;
  justify-content: center;
}
.group_action--menu--li--last {
  border-bottom-left-radius: .75rem;
  border-bottom-right-radius: .75rem;
}

.group_action--menu--button {
  border: 1px solid var(--default-tab-color);
  border-radius: .5rem;
  color: var(--default-tab-text-color);
  background-color: var(--default-tab-color);
  padding: 0 .5rem;
  font-weight: bold;
  align-content: center;
}
.group_action--menu--button:hover {
  background-color: var(--hover-tab-color);
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
    .location_manager--header {
        font-size: 1rem;
    }

  .group_action--menu--button,
    .location_manager--input,
  .location_manager--type--dropdown,
  .location_manager--node--dropdown,
  .location_manager--ac--dropdown,
  .location_manager--addButton {
    font-size: 0.8rem;
  }
}


@media only screen and (max-width: 1300px) {
    .group_action--menu--button,
      .location_manager--input,
  .location_manager--type--dropdown,
  .location_manager--node--dropdown,
  .location_manager--ac--dropdown,
  .location_manager--addButton,
  .location_manager--header {
    font-size: 1rem;
  }
}/* Add io */
.addio--container{
  display: flex;
  width: 15%;
  height: 25%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
  justify-content: space-evenly;
  z-index: 11;
}
.addio--header{
  display: flex;
  width: 100%;
  height: 15%;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 3%;
}
.addio--selection{
  display: flex;
  width: 100%;
  height: 55%;
  margin-top: 2%;
  flex-direction: column;
  justify-content: center;
}
.addio--selection--row1,
.addio--selection--row2,
.addio--selection--row3{
  display: flex;
  width: 100%;
  height: 31%;
  margin-top: 2%;
  flex-direction: column;
  justify-content: center;
}
.addio--selection--title{
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 50%;
}
.addio--select--type,
.addio--select--control,
.addio--select--quantity{
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  font-weight: bold;
  width: 50%;
  /* height: 20%; */
  margin-left: auto;
  margin-right: auto;
}

.addio--button--container{
  display: flex;
  width: 100%;
  height: 15%;
  justify-content: center;
  margin-top: 2%;
  margin-bottom: 3%;
}
.addio-button--add{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
}
.addio-button--add:hover{
  background-color: var(--hover-tab-color)
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
    .addio--header {
        font-size: 1rem;
    }

    .addio--select--type,
  .addio--select--control,
  .addio--select--quantity,
  .addio-button--add {
    font-size: 0.8rem;
  }

  .addio--select--type,
  .addio--select--control,
  .addio--select--quantity,
  .editio--select--filter1,
  .editio--select--filter2{
      width: 60%;
  }
}

@media only screen and (max-width: 1300px) {
    .addio--header,
    .addio--select--type,
    .addio--select--control,
    .addio--select--quantity,
    .addio-button--add {
        font-size: 1rem;
    }
}.editio--bindings--list--item--container,
.editio--bindings--list--item--container--alt{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 11.1111%;
  align-items: center;
  background-color: var(--list-even-background);
  border-bottom: solid 1px var(--list-dividing-line);
}
.editio--bindings--list--item--container--alt{
  background-color: var(--list-odd-background)
}

.editio--bindings--list--item--id{
  margin-left: 2%;
  width: 10%;
}

.editio--bindings--list--item--control,
.editio--bindings--list--item--id,
.editio--bindings--list--item--room,
.editio--bindings--list--header--actions,
.editio--bindings--list--item--actions {
  display: flex;
  justify-content: center;
}

.editio--bindings--list--item--control{
  width: 40%;
}

.editio--bindings--list--item--button{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .65rem;
  font-weight: bold;
  font-size: .9rem;
}
.editio--bindings--list--item--button:hover{
  background-color: var(--hover-tab-color)
}

.editio--bindings--list--item--room{
  width: 25%;
}

.editio--bindings--list--item--actions{
  margin-right: 2%;
  width: 20%;
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .editio--bindings--list--item--control{
      width: 35%;
  }

  .editio--bindings--list--item--button {
    font-size: 0.8rem;
    width: auto;
  }
}

@media only screen and (max-width: 1300px) {
  .editio--bindings--list--item--button {
    font-size: 1rem;
  }
}.editio--loadlist--item--container-alt,
.editio--loadlist--item--container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-height: 10%;
  align-items: center;
  background-color: var(--list-even-background);
  border-bottom: solid 1px var(--list-dividing-line);
}
.editio--loadlist--item--container-alt{
  background-color: var(--list-odd-background)
}

.editio--loadlist--item--name,
.editio--loadlist--item--room,
.editio--loadlist--item--bound,
.editio--loadlist--item--select{
  display: flex;
  justify-content: center;
}

.editio--loadlist--item--name{
  margin-left: 2%;
  width: 30%;
}/* add relay settings stuff */
.relaysettings--container{
  display: flex;
  width: 30%;
  height: 18%;
  position: fixed;
  margin-top: -15%;
  margin-left: -25%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
  z-index: 11;
}
.relaysettings--header{
  display: flex;
  justify-content: center;
  height: 12%;
  margin-top: 1%;
}
.relaysettings--selection--container{
  display: flex;
  height: 45%;
  margin-top: 1%;
  flex-direction: row;
  justify-content: space-evenly;

}
.relaysettings--selection--type--container,
.relaysettings--selection--voltage--container,
.relaysettings--selection--acdc--container{
  display: flex;
  flex-direction: column;
  width: 32%;
  justify-content: center;
}
.relaysettings--selection--select--header,
.relaysettings--selection--voltage--header,
.relaysettings--selection--acdc--header{
  display: flex;
  height: 40%;
  justify-content: center;
}
.relaysettings--selection--select,
.relaysettings--selection--voltage--input,
.relaysettings--selection--acdc--select{
  display: flex;
  justify-content: center;
  width: 60%;
  align-self: center;
}
.relaysettings--selection--select,
.relaysettings--selection--acdc--select{
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  font-weight: bold;
}

.relaysettings--buttons--container{
  display: flex;
  height: 18%;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 1%;
  margin-bottom: 2%;
}
.relaysettings--button--save,
.relaysettings--button--cancel{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .65rem;
  font-weight: bold;
}
.relaysettings--button--save:hover,
.relaysettings--button--cancel:hover{
  background-color: var(--hover-tab-color)
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
    .relaysettings--header {
        font-size: 1rem;
    }

  .relaysettings--selection--select,
  .relaysettings--selection--voltage--input,
  .relaysettings--selection--acdc--select,
  .relaysettings--button--save,
  .relaysettings--button--cancel {
    font-size: 0.8rem;
  }

  .relaysettings--selection--select,
  .relaysettings--selection--voltage--input,
  .relaysettings--selection--acdc--select{
      width: 70%;
  }

  .relaysettings--selection--container{
      margin-top: 1%;
  }
  .relaysettings--buttons--container{
      margin-top: 1%;
      margin-bottom: 2%;
  }
}

@media only screen and (max-width: 1300px) {
  .relaysettings--selection--select,
  .relaysettings--selection--voltage--input,
  .relaysettings--selection--acdc--select,
  .relaysettings--button--save,
  .relaysettings--button--cancel,
  .relaysettings--header {
    font-size: 1rem;
  }
}.edit_customio--container {
  display: flex;
  width: 25%;
  height: 15%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
  z-index: 11;
  justify-content: space-between;
}

.edit_customio--container{
  height: 25%;
  width: 30%;
}

.edit_customio--header{    
  display: flex;
  width: 100%;
  height: 25%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 3%;
}

.edit_customio--input--container{
  display: flex;
  width: 100%;
  height: 20%;
  justify-content: center;
  margin-top: 3%;
}
.edit_customio--input--container{
  height: 15%;
  margin-top: 1%;
  
}

.edit_customio--input{
  width: 60%;
  margin-left: 5%;
}

.edit_customio--type--select{
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  font-weight: bold;
  margin-left: auto;
  margin-right: 5%;
  width: 30%;
}

.edit_customio--button--container{
  display: flex;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  justify-content: center;
  height: 10%;
  margin-top: 2%;
  margin-bottom: 1%;
}

.edit_customio--button--save,
.edit_customio--button--cancel{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  margin-right: 5%;
  /* height: 20%; */
  /* margin-top: 50%; */
}

.edit_customio--button--save{
  margin-left: 20%;
}

.edit_customio--button--cancel{
  margin-left: auto;
  margin-right: 20%;
}

.edit_customio--button--save:hover,
.edit_customio--button--cancel:hover{
  background-color: var(--hover-tab-color)
}

.edit_customio--relay--acdc--container{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 32%;
  align-content: center;
}
.edit_customio--relay--select--header,
.edit_customio--relay--voltage--header,
.edit_customio--relay--acdc--header{
  display: flex;
  height: 40%;
  align-self: center;
}
.edit_customio--relay--select,
.edit_customio--relay--acdc--select{
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  font-weight: bold;
  height: 50%;
}

.edit_customio--relay--container{
  display: flex;
  flex-direction: row;
  height: 20%;
  justify-content: space-evenly;
  width: 100%;
  margin-top: 1%;
}

.edit_customio--relay--voltage--input{
  height: 50%;
  display: flex;
  align-self: center;
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
    .edit_customio--header {
        font-size: 1rem;
    }

    .edit_customio--input,
  .edit_customio--type--select,
  .edit_customio--button--save,
  .edit_customio--button--cancel,
  .edit_customio--relay--select,
  .edit_customio--relay--voltage--input,
  .edit_customio--relay--acdc--select {
    font-size: 0.8rem;
  }

  .edit_customio--button--container{
      height: 15%;
  }

  .edit_customio--container{
      height: 25%;
  }
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
    .edit_customio--input,
  .edit_customio--type--select,
  .edit_customio--button--save,
  .edit_customio--button--cancel,
  .edit_customio--relay--select,
  .edit_customio--relay--voltage--input,
  .edit_customio--relay--acdc--select,
    .edit_customio--header {
        font-size: 1rem;
    }
}.remove_customio--container{
  display: flex;
  width: 25%;
  height: 15%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
  z-index: 11;
}

.remove_customio--header{
  display: flex;
  width: 100%;
  height: 25%;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: bold;
  margin-top: 3%;
}

.remove_customio--name{
  height: 15%;
  text-align: center;
  font-size: 1.5rem;
}

.remove_customio--button--spacer{
  display: flex;
  height: 57%;
  align-items: center;
}

.remove_customio--button--container{
  display: flex;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  justify-content: center;
  height: 37%;
  margin-top: 2%;
  margin-bottom: 1%;
}

.remove_customio--button--confirm,
.remove_customio--button--cancel{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  margin-right: 5%;
}

.remove_customio--button--confirm{
  margin-left: 20%;
}


.remove_customio--button--cancel{
  margin-left: auto;
  margin-right: 20%;
}

.remove_customio--button--confirm:hover,
.remove_customio--button--cancel:hover{
  background-color: var(--hover-tab-color)
}.customio--container{
  display: flex;
  width: 50%;
  height: 50%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}
.customio--container{
  width: 60%;
  margin-left: -20%;
}



.customio--list--container{
  display: flex;
  flex-direction: column;
  width: 90%;
  height: 61%;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 3%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  border: 1px solid var(--list-header-border-bottom);
}
.customio--list--container{
  width: 96%;
  margin-left: 2%;
  margin-right: 2%;
}

.customio--list--container::-webkit-scrollbar{
  width: 10px;
}

.customio--list--container::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}

.customio--list--container::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}

.customio--list--item--container,
.customio--list--item--container--alt{
  display: flex;
  min-height: 10%;
  width: 100%;
  background-color: var(--list-even-background);
  justify-content: space-between;
  border-bottom: var(--list-dividing-line) solid 1px;
}

.customio--list--item--container--alt{
  background-color: var(--list-odd-background);
}



.customio--list--item--actions--container{
  display: flex;
  width: 8%;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}


.customio--list--item--edit--button,
.customio--list--item--copy--button,
.customio--list--item--remove--button{
  /* margin-left: auto;
  margin-right: auto; */
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .65rem;
  font-weight: bold;
  margin-right: 3%;
}

.customio--list--item--edit--button:hover,
.customio--list--item--copy--button:hover,
.customio--list--item--remove--button:hover{
  background-color: var(--hover-tab-color)
}

.customio--list--item--select{
  width: 8%;
}

.customio--list--item--checkbox{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--default-tab-color);
  border: 1px solid var(--default-tab-border-color);
  cursor: pointer;
  display: flex;
}

.customio--list--item--select{
  width: 8%;
}

.customio--list--item--checkbox:checked{
  background-color: rgb(207, 0, 0);
}

.customio--list--item--checkbox:checked::before{
  content: '\2714';
  font-size: 1.1rem;
  color: #fff;
  transform: translateY(-4px);
}

.customio--list--item--name,
.customio--list--item--type,
.customio--list--item--mode,
.customio--list--item--voltage,
.customio--list--item--select{   
  display: flex;
  height: 100%;    
  align-items: center;
  justify-content: center;
  /* flex-direction: column; */
  text-align: center;
  align-items: center;
}


.customio--list--item--name{
  margin-left: 1%;
  width: 30%;
}

.customio--list--item--type{
  width: 12%;
}
.customio--list--item--mode{
  min-width: 18%;
}
.customio--list--item--voltage{
  min-width: 12%;
}


@media only screen and (max-width: 1670px), (max-height: 900px) {
  .customio--list--item--edit--button,
  .customio--list--item--copy--button,
  .customio--list--item--remove--button {
    font-size: .8rem;
    width: auto;
  }

  .customio--list--item--checkbox {
    width: 14px;
    height: 14px;
  }

  .customio--list--item--checkbox:checked::before {
    font-size: 0.9rem;
  }
}

@media only screen and (max-width: 1300px) {
  .customio--list--item--edit--button,
  .customio--list--item--copy--button,
  .customio--list--item--remove--button,
  .customio--list--item--checkbox:checked::before {
    font-size: 1rem;
  }
}.customio--groupedit--row2--container{
  display: flex;
  justify-content: center;
  height: 8%;
  margin-top: 2%;
  margin-bottom: 2%;
}
.customio--groupedit--row2--container{
  margin-top: auto;
}

.customio--groupedit--button--save,
.customio--groupedit--button--cancel {
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .65rem;
  font-weight: bold;
  margin-right: 5%;
}

.customio--groupedit--button--save:hover,
.customio--groupedit--button--cancel:hover {
    background-color: var(--hover-tab-color)
}

.customio--groupedit--button--save {
    margin-left: 15%;
}

.customio--groupedit--button--cancel {
  margin-left: auto;
  margin-right: 15%;
}

.customio--groupedit--background--sub {
  width: 100%;
  height: 100%;
  background: var(--default-modal-background);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  margin-top: -7.5%;
}

.customio--groupedit--container {
  display: flex;
  width: 25%;
  height: 50%;
  position: fixed;
  margin-top: -10%;
  margin-left: -20%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}

.customio--groupedit--row1--container,
.customio--groupedit--hidden-row--container{
  display: flex;
  width: 100%;
  height: 10%;
  justify-content: center;
  margin-top: 2%;
}

.customio--groupedit--hidden-row--container{
  justify-content: space-evenly;
}
.customio--groupedit--relay_settings--container{
  display: flex;
  flex-direction: column;
  width: 30%;
  justify-content: center;
  align-items: center;
}
.customio--groupedit--relay_settings--header{
  font-size: .95rem;
  margin-bottom: 2%;
}

.customio--groupedit--header{
  display: flex;
  width: 100%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 4%;
  text-align: center;
}

.customio--groupedit--list--container{
  display: flex;
  width: 90%;
  height: 50%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 2%;
  flex-direction: column;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  border: 1px solid var(--list-header-border-bottom);
}

.customio--groupedit--list--container::-webkit-scrollbar{
  width: 10px;
}

.customio--groupedit--list--container::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}

.customio--groupedit--list--container::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}

.customio--groupedit--list-item,
.customio--groupedit--list--item--alt{
  display: flex;
  min-height: 18.75%;
  width: 100%;
  background-color: var(--list-odd-background);
  align-items: center;
  padding-left: 5%;
  border-bottom: var(--list-dividing-line) solid 1px;
}

.customio--groupedit--list--item--alt{
  background-color: var(--list-even-background);
}.customio--groupremove--header{
  display: flex;
  width: 100%;
  height: 10%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 2%;
}

.customio--groupremove--list--container{
  display: flex;
  width: 90%;
  height: 75%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 2%;

  flex-direction: column;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  border: 1px solid var(--list-header-border-bottom);
}

.customio--groupremove--list--container::-webkit-scrollba{
  width: 10px;
}

.customio--groupremove--list--container::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}

.customio--groupremove--list--container::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}

.customio--groupremove----list--item,
.customio--groupremove--list--item--alt{
  display: flex;
  min-height: 15%;
  max-height: 15%;
  width: 100%;
  background-color: var(--list-odd-background);
  align-items: center;
  padding-left: 5%;
  border-bottom: var(--list-dividing-line) solid 1px;
}

.customio--groupremove--list--item--alt{
  background-color: var(--list-even-background);
}

.customio--groupremove--button--container {
  display: flex;
  justify-content: center;
  height: 8%;
  margin-top: 2%;
  margin-bottom: 2%;
}

.customio--groupremove--button--delete,
.customio--groupremove--button--cancel{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .65rem;
  font-weight: bold;
  margin-right: 5%;
}

.customio--groupremove--button--delete:hover,
.customio--groupremove--button--cancel:hover{
  background-color: var(--hover-tab-color)
}

.customio--groupremove--button--delete{
  margin-left: 15%;
}

.customio--groupremove--button--cancel{
  margin-left: auto;
  margin-right: 15%;
}

.customio--groupremove--background--sub{
  width: 100%;
  height: 100%;
  background: var(--default-modal-background);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  margin-top: -7.5%;
}

.customio--groupremove--container{
  display: flex;
  width: 25%;
  height: 50%;
  position: fixed;
  margin-top: -10%;
  margin-left: -20%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}.customio--header{
  display: flex;
  width: 100%;
  height: 10%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 2%;
}

.customio--input--container{
  display: flex;
  width: 100%;
  height: 7%;
  justify-content: space-between;
}
.customio--input--container{
  width: 72%;
  margin-left: 9%;
  margin-right: 9%;
  justify-content: space-evenly;
}
.customio--input{
  width: 50%;
}

.customio--select{
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  font-weight: bold;
}
.customio--button--add{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  align-content: center;
}

.customio--button--add:hover {
  background-color: var(--hover-tab-color);
}

.customio--groupaction--button:hover{
  background-color: var(--hover-tab-color)
}

.customio--groupaction--container{
  display: flex;
  width: 90%;
  margin-left: 5%;
  height: 5%;
  margin-top: 2%;
}
.customio--groupaction--container{
  width: 96%;
  margin-left: 2%;
  margin-right: 2%;
}

.customio--groupaction--spacer{
  border: none;
  margin: none;
  width: 10%;
}

.customio--groupaction--button{
  cursor: default;
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  font-weight: bold;
  align-content: center;
  text-align: center;
  margin-left: auto;
  width: 18%;
}

.customio--groupaction--button:hover{
  color: var(--hover-button-text-color);
}

.customio--groupaction--menu--container{
  position: absolute;
  width: 17.3%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-bottom-left-radius: .75rem;
  border-bottom-right-radius: .75rem;
  /* top: 17%; */
  right: 2%;
  z-index: 10;
  animation-name: groupMenuLocationRoom;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}

.customio--groupaction--menu--ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.customio--groupaction--menu--li{
  display: flex;
  width: 100%;
  background-color: var(--default-tab-color);
  border: 1px solid var(--default-tab-border-color);
  color: var(--default-tab-text-color);
  align-items: center;
  justify-content: center;
}

.customio--groupaction--menu--li--last {
  border-bottom-left-radius: .75rem;
  border-bottom-right-radius: .75rem;
}

.customio--groupaction--menu--button{
  border: 1px solid var(--default-tab-color);
  border-radius: .5rem;
  color: var(--default-tab-text-color);
  background-color: var(--default-tab-color);
  padding: 0 .5rem;
  font-weight: bold;
  align-content: center;
}

.customio--groupaction--menu--button:hover{
  background-color: var(--hover-tab-color);
}

.customio--list--header{
  display: flex;
  width: 90%;
  height: 6%;
  font-weight: bolder;
  margin-left: 5%;
  margin-right: 5%;
  background-color: var(--list-header-background);
  border-left: 1px solid var(--list-header-background);
  border-right: 1px solid var(--list-header-background);
  justify-content: space-between;
}

.customio--list--header{
  width: 96%;
  margin-left: 2%;
  margin-right: 2%;
}

.customio--list--header--name--container,
.customio--list--header--type--container,
.customio--list--header--mode--container,
.customio--list--header--voltage--container,
.customio--list--header--actions,
.customio--list--header--select {   
  display: flex;
  height: 100%;    
  align-items: center;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.customio--list--header--name--container {
  margin-left: 1%;
  width: 30%;
}

.customio--list--header--type--container {
  width: 12%;
}
.customio--list--header--mode--container {
  min-width: 18%;
}
.customio--list--header--voltage--container {
  min-width: 12%;
}

.customio--list--header--actions{
  width: 8%;
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
    .customio--groupaction--button,
    .customio--select,
    .customio--button--add,
    .customio--header,
    .customio--groupaction--menu--button,
    .customio--input {
        font-size: 0.8rem;
    }
}

@media only screen and (max-width: 1300px) {
    .customio--groupaction--button,
    .customio--select,
    .customio--button--add,
    .customio--header,
    .customio--input {
        font-size: 1rem;
    }
}.relay-error--container{
  display: flex;
  width: 20%;
  height: 10%;
  position: fixed;
  margin-top: -15%;
  margin-left: -20%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}
.relay-error--header{
  display: flex;
  height: 10%;
  margin-top: 2%;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  justify-content: center;
  font-weight: bold;
}
.relay-error--status--container{
  display: flex;
  height: 78%;
  margin-top: 8%;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 2%;
  justify-content: center;
}
.relay-error--voltage,
.relay-error--config{
  display: flex;
  height: 50%;
  justify-content: center;
  align-items: center;
}/* edit io page stuff */
.editio--container{
  display: flex;
  width: 80%;
  height: 50%;
  position: fixed;
  margin-top: -15%;
  margin-left: -20%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}
.editio--header{
  display: flex;
  width: 100%;
  height: 8%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 2%;
}
.editio--body{
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-top: 2%;
  height: 65%;
  justify-content: space-between;
}
.editio--column1,
.editio--column2,
.editio--column3{
  display: flex;
  flex-direction: column;
  /* width: 30%; */
  height: 100%;
}
.editio--column1{
  margin-left: 2%;
  width: 40%;
}
.editio--column2{
  width: 20%;
}
.editio--column3{
  margin-right: 2%;
  width: 40%;
}
.editio--column--header{
  display: flex;
  justify-content: center;
  height: 8%;
}
.editio--column--list--container{
  display: flex;
  flex-direction: column;
  margin-top: auto;
  height: 91%;
  width: 100%;
  border: 1px solid var(--list-header-border-bottom);
  background-color: var(--list-even-background);
}
.editio--loadlist--container{
  display: flex;
  flex-direction: column;
  margin-top: auto;
  height: 91%;
  width: 100%;
  border: 1px solid var(--list-header-border-bottom);
  background-color: var(--list-even-background);
}
.editio--loadlist--list{
  display: flex;
  flex-direction: column;
  margin-top: auto;
  height: 89%;
  width: 100%;
  background-color: var(--list-even-background);
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
.editio--loadlist--list::-webkit-scrollbar{
  width: 10px;
}

.editio--loadlist--list::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}

.editio--loadlist--list::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}
.editio--bindings--list--header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 11.1111%;
  align-items: center;
  background-color: var(--list-header-background)
}

.editio--bindings--list--header--id,
.editio--bindings--list--header--control,
.editio--bindings--list--header--room {
  display: flex;
  justify-content: center;
}
.editio--bindings--list--header--id {
  margin-left: 2%;
  width: 10%;
}

.editio--bindings--list--header--control {
  width: 40%;
}
.editio--bindings--list--header--room {
  width: 25%;
}

.editio--bindings--list--header--actions {
  margin-right: 2%;
  width: 20%;
}
.editio--bindings--list--header--control,
.editio--bindings--list--header--room{
  flex-direction: column;
}


.editio--filter1,
.editio--filter2{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 20%;
  align-items: center;
  justify-content: space-between;
  padding-left: 5%;
  padding-right: 5%;
}
.editio--filter--title{
  width: 40%;
}
.editio--select--filter1,
.editio--select--filter2{
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  width: 50%;
}
.editio--relay_settings--container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 60%;
  align-items: center;
  justify-content: space-evenly;
  padding-left: 5%;
  padding-right: 5%;
}
.editio--relay_settings--header{
  height: 10%;
}   
.editio--relay_settings--ab--container{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 40%;
  justify-content: space-evenly;
  margin-top: 5%;
}

.editio--relay_settings--ab--header{
  display: flex;
  justify-content: center;
  font-size: .8rem;
}
.editio--relay_settings--ab--select{
  margin-top: 10%;
}
.editio--relay_settings--ab--mode{
  margin-top: 10%;
}
.editio--relay_settings--voltage--header{
  height: 10%;
}
.editio--relay_settings--voltage--container{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 40%;
  justify-content: space-evenly;
}
.editio--relay_settings--voltage--spec{
  height: 30%;
  margin-top: 5%;
  font-size: .8rem;
}

.editio--relay_settings--voltage--input,
.editio--relay_settings--voltage{
  height: 30%;
  margin-top: 5%;
}
.editio--loadlist--header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 10%;
  align-items: center;
  background-color: var(--list-header-background)
}
.editio--loadlist--item--container-alt,
.editio--loadlist--item--container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-height: 10%;
  align-items: center;
  background-color: var(--list-even-background);
  border-bottom: solid 1px var(--list-dividing-line);
}
.editio--loadlist--item--container-alt{
  background-color: var(--list-odd-background)
}
.editio--loadlist--header--name,
.editio--loadlist--header--room,
.editio--loadlist--header--bound,
.editio--loadlist--header--select,
.editio--loadlist--item--name,
.editio--loadlist--item--room,
.editio--loadlist--item--bound,
.editio--loadlist--item--select{
  display: flex;
  justify-content: center;
}
.editio--loadlist--header--name,
.editio--loadlist--item--name{
  margin-left: 2%;
  width: 30%;
}
.editio--loadlist--header--room,
.editio--loadlist--item--room{
  width: 25%;
}
.editio--loadlist--header--bound,
.editio--loadlist--item--bound{
  width: 10%;
}
.editio--loadlist--header--select,
.editio--loadlist--item--select{
  width: 10%;
}
.editio--loadlist--header--select{
  margin-right: 10px;
}
.editio--loadlist--header--name,
.editio--loadlist--header--room{
  flex-direction: column;
}

.editio--loadlist--item--select--checkbox{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--default-tab-color);
  border: 1px solid var(--default-tab-border-color);
  cursor: pointer;
  display: flex;
}

.editio--loadlist--item--select--checkbox:checked{
  background-color: rgb(207, 0, 0);
}

.editio--loadlist--item--select--checkbox:checked::before{
  content: '\2714';
  font-size: 1.1rem;
  color: #fff;
  transform: translateY(-4px);
}
.editio--loadlist--item--bound--uncheck,
.editio--loadlist--item--bound--check{
  width: 18px;
  height: 18px;
  background: var(--default-tab-color);
  border: 1px solid var(--default-tab-border-color);
  display: flex;
}
.editio--loadlist--item--bound--check{
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: rgb(207, 0, 0);
  font-size: 1.1rem;
  color: #fff;
}

.editio--footer{
  display: flex;
  width: 100%;
  height: 5%;
  margin-top: auto;
  margin-bottom: 2%;
}
.editio--footer--control--container{
  display: flex;
  width: 30%;
  margin-left: 2%;
  font-size: .8rem;
  justify-content: space-between;
  align-items: center;
}
.editio--control--select{
  font-size: .8rem;
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  width: 40%;
}
.editio--manage_customio{
  display: flex;
  flex-direction: row;
  width: 30%;
  align-items: center;
  justify-content: space-between;
  padding-left: 5%;
  padding-right: 5%;
  margin-left: 3%;
}
.editio--manage_customio--button{
  width: 100%;
}
.editio--control--set,
.editio--manage_customio--button,
.editio--footer--button--bind,
.editio--footer--button--cancel{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .65rem;
  font-weight: bold;
}
.editio--footer--button--bind{
  margin-left: 3%;
}
.editio--footer--button--cancel{
  margin-left: auto;
  margin-right: 2%;
}

.editio--control--set:hover,
.editio--manage_customio--button:hover,
.editio--footer--button--bind:hover,
.editio--footer--button--cancel:hover{
  background-color: var(--hover-tab-color)
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
    .editio--header {
        font-size: 1rem;
    }

    .editio--select--filter1,
  .editio--select--filter2,
  .editio--control--select,
  .editio--control--set,
  .editio--manage_customio--button,
  .editio--footer--button--bind,
  .editio--footer--button--cancel {
    font-size: 0.8rem;
  }

  .editio--footer--control--title {
    font-size: 0.7rem;
  }

  .editio--bindings--list--header--control {
      width: 35%;
  }

  location_manager--list--item--checkbox,
  .editio--loadlist--item--select--checkbox,
  .editio--loadlist--item--bound--uncheck,
  .editio--loadlist--item--bound--check{
      width: 14px;
      height: 14px;
  }

  .editio--loadlist--item--select--checkbox:checked::before,
  .editio--loadlist--item--bound--check{
      font-size: .9rem;
  }
}

@media only screen and (max-width: 1300px) {
    .editio--select--filter1,
    .editio--select--filter2,
    .editio--control--select,
    .editio--control--set,
    .editio--manage_customio--button,
    .editio--footer--button--bind,
    .editio--footer--control--title,
    .editio--loadlist--item--bound--check,
    .editio--loadlist--item--select--checkbox:checked::before,
    .editio--footer--button--cancel,
    .editio--header {
        font-size: 1rem;
    }
}/* remove io stuff */
.removeio--container{
  display: flex;
  width: 25%;
  height: 15%;
  /* position: fixed; */
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
  z-index: 11;
}
.removeio--header{
  display: flex;
  width: 100%;
  height: 25%;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: bold;
  margin-top: 3%;
}   
.removeio--location{
  display: flex;
  height: 25%;
  text-align: center;
  font-size: 1.5rem;
  margin-top: 2%;
  flex-direction: column;
}
.removeio--button--container{
  display: flex;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  justify-content: center;
  height: 20%;
  margin-top: auto;
  margin-bottom: 3%;
}   
.removeio--button--confirm,
.removeio--button--cancel{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;

}
.removeio--button--confirm{
  margin-left: 20%;
}
.removeio--button--cancel{
  margin-left: auto;
  margin-right: 20%;
}
.removeio--button--confirm:hover,
.removeio--button--cancel:hover{
  background-color: var(--hover-tab-color)
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
    .removeio--header {
        font-size: 1rem;
    }

    .removeio--location,
  .removeio--button--confirm,
  .removeio--button--cancel {
    font-size: 0.8rem;
  }

  .removeio--container {
    height: 12%;
  }
}

@media only screen and (max-width: 1300px) {
    .removeio--location,
  .removeio--button--confirm,
  .removeio--button--cancel,
    .removeio--header {
        font-size: 1rem;
    }
}.io_item--container,
.io_item--container--alt{
  display: flex;
  min-height: 10%;
  width: 100%;
  background-color: var(--list-even-background);
  justify-content: space-between;
  border-bottom: 1px solid var(--list-dividing-line);
}
.io_item--container--alt{
  background-color: var(--list-odd-background);
}

.io_item--location {
    display: flex;
    height: 100%;
    align-items: center;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.io_item--location{
  width: 25%;
  margin-left: 1%;
}

.io_item--type,
.io_item--configuration,
.io_item--button--container,
.io_item--select{
  display: flex;
  height: 100%;    
  align-items: center;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.io_item--type{
  width: 20%;
}

.io_item--button--container{
  display: flex;
  width: 20%;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.io_item--button--edit,
.io_item--button--remove{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .65rem;
  font-weight: bold;
  margin-right: 3%;
}
.io_item--button--edit:hover,
.io_item--button--remove:hover{
  background-color: var(--hover-tab-color)
}

.io_item--configuration{
  width: 15%;
}

.io_item--select{
  width: 15%;
}

.io_item--checkbox{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--default-tab-color);
  border: 1px solid var(--default-tab-border-color);
  cursor: pointer;
  display: flex;
}
.io_item--checkbox:checked:checked{
  background-color: rgb(207, 0, 0);
}
.io_item--checkbox:checked::before{
  content: '\2714';
  font-size: 1.1rem;
  color: #fff;
  transform: translateY(-4px);
}

.io_item--checkbox {
      width: 14px;
      height: 14px;
  }

  .io_item--checkbox:checked::before {
      font-size: .9rem;
  }

@media only screen and (max-width: 1670px), (max-height: 900px) {
    .io_item--button--edit,
  .io_item--button--remove {
      font-size: .8rem;
      width: auto;
  }
}

@media only screen and (max-width: 1300px) {
    .io_item--button--edit,
    .io_item--button--remove,
    .io_item--checkbox:checked::before {
        font-size: 1rem;
    }
}/* manage IO stuff */
.io_manager--container{
  display: flex;
  width: 50%;
  height: 50%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
}
.io_manager--header{
  display: flex;
  width: 100%;
  height: 10%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 2%;
}
.io_manager--options--container{
  display: flex;
  width: 90%;
  height: 5%;
  margin-top: 2%;
  margin-left: 5%;
}
.io_manager--options--add--button,
.io_manager--options--groupaction--button{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  font-weight: bold;
  align-content: center;
  text-align: center;
}
.io_manager--options--groupaction--button{
  cursor: default;
  margin-left: auto;
  width: 18%;
}
.io_manager--options--add--button:hover,
.io_manager--options--groupaction--button:hover{
  background-color: var(--hover-tab-color);
  color: var(--hover-button-text-color);
}
.io_manager--groupaction--container{
  position: absolute;
  width: 16.2%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-bottom-left-radius: .75rem;
  border-bottom-right-radius: .75rem;
  right: 5%;
  z-index: 10;
  animation-name: groupMenuIO;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
@keyframes groupMenuIO{
  from {transform: translateY(-5%);}
  to {transform: translateY(-0%);}
}
.io_manager--groupaction--menu--ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.io_manager--groupaction--menu--li,
.io_manager--groupaction--menu--li--last{
  display: flex;
  width: 100%;
  background-color: var(--default-tab-color);
  border: 1px solid var(--default-tab-border-color);
  color: var(--default-tab-text-color);
  align-items: center;
  justify-content: center;
}
.io_manager--groupaction--menu--li--last{
  border-bottom-left-radius: .75rem;
  border-bottom-right-radius: .75rem;
}
.io_manager--groupaction--menu--button{
  border: 1px solid var(--default-tab-color);
  border-radius: .5rem;
  color: var(--default-tab-text-color);
  background-color: var(--default-tab-color);
  padding: 0 .5rem;
  font-weight: bold;
  align-content: center;
}

.io_manager--groupaction--menu--button:hover{
  background-color: var(--hover-tab-color);
}
.io_manager--list--header{
  display: flex;
  width: 90%;
  height: 6%;
  font-weight: bolder;
  margin-left: 5%;
  margin-right: 5%;
  background-color: var(--list-header-background);
  border-left: 1px solid var(--list-header-background);
  border-right: 1px solid var(--list-header-background);
  justify-content: space-between;
}
.io_manager--list--header--location--container,
.io_manager--list--header--type--container,
.io_manager--list--header--configured--container,
.io_manager--list--header--actions,
.io_manager--list--header--select {
  display: flex;
  height: 100%;    
  align-items: center;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.io_manager--list--header--location--container {
  width: 25%;
  margin-left: 1%;
}

.io_manager--list--header--type--container {
  width: 20%;
}

.io_manager--list--header--configured--container {
  width: 15%;
}

.io_manager--list--header--actions{
  width: 20%;
}

.io_manager--list--header--select {
  width: 15%;
}
.io_manager--list--header--select{
  margin-right: 10px;
}

.io_manager--list--container{
  display: flex;
  flex-direction: column;
  width: 90%;
  height: 72%;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 3%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  border: 1px solid var(--list-header-border-bottom);
}
.io_manager--list--container::-webkit-scrollbar{
  width: 10px;
}

.io_manager--list--container::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}

.io_manager--list--container::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
    .io_manager--header {
        font-size: 1rem;
    }

    .io_manager--options--add--button,
  .io_manager--options--groupaction--button {
      font-size: .8rem;
      width: auto;
  }

  .io_manager--groupaction--menu--button {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 1300px) {
    .io_manager--header,
    .io_manager--options--add--button,
  .io_manager--options--groupaction--button,
  .io_manager--groupaction--menu--button {
    font-size: 1rem;
  }
}.addload_modal--container,
.addload_modal--container--error {
  display: flex;
  width: 40%;
  height: 25%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
}

.addload_modal--container--error{
  align-items: center;
}

.addload_modal--container {
  flex-direction: column;
}

.addload_modal--error {
  width: 100%;
  text-align: center;
  font-size: xxx-large;
  font-weight: bolder;
}

.addload_modal--header {
  display: flex;
  width: 100%;
  height: 20%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 4%;
}

.addload_modal--row1--container,
.addload_modal--row2--container,
.addload_modal--row3--container {
  display: flex;
  width: 100%;
  height: 14%;
  justify-content: center;
  margin-top: 2%;
}

.addload_modal--room--dropdown,
.addload_modal--fixture_type--dropdown,
.addload_modal--led_type--dropdown,
.addload_modal---unit--dropdown {
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  font-weight: bold;
}
.addload_modal--input--name {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}
.addload_modal--room--dropdown {
  margin-left: 10%;
  /* margin-right: 10%; */
  width: 25%;
  /* margin-right: auto; */
}
.addload_modal--fixture_type--dropdown {
  width: 25%;
  margin-left: auto;
}
.addload_modal--led_type--dropdown {
  width: 25%;
  margin-left: auto;
  margin-right: 10%;
}

.addload_modal--input--quantity {
  margin-left: 10%;
  margin-right: auto;
  width: 25%;
}
.addload_modal--input--quantity--strip {
  margin-left: 10%;
  width: 25%;
}
.addload_modal---unit--dropdown {
  width: 25%;
  margin-left: 2.5%;
  margin-right: auto;
}

.addload_modal--button--container {
  display: flex;
  width: 100%;
  height: 14%;
  margin-top: 2%;
  margin-bottom: 1%;
}
.addload_modal--button--container{
  width: 90%;
  height: 20%;
  margin-left: 5%; 
  margin-right: 5%;
  justify-content: center;
}
.addload_modal--button {
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
}

.addload_modal--button:hover {
  background-color: var(--hover-tab-color)
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .addload_modal--header {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 1300px) {
  .addload_modal--container {
      width: 75%;
      height: 37.5%;
      margin-top: -15%;
      margin-left: 0%;
  }

  .addload_modal--header,
  .addload_modal--row1--container {
      height: 10%;
      margin-top: 2%;
  }

  .addload_modal--input--name {
    width: 75%;
    margin-left: 12.5%;
    margin-right: 12.5%;
  }
  .addload_modal--row2--container {
      flex-direction: column;
      justify-content: space-evenly;
      height: 30%;
  }
  .addload_modal--room--dropdown,
  .addload_modal--fixture_type--dropdown,
  .addload_modal--led_type--dropdown,
  .addload_modal--input--quantity,
  .addload_modal--input--quantity--strip,
  .addload_modal---unit--dropdown {
      margin:0;
      width: 75%;
      height: 33%;
      margin-left: 12.5%;
  }

  .addload_modal--input--quantity,
  .addload_modal--input--quantity--strip,
  .addload_modal---unit--dropdown{
      height: 50%;
  }
  .addload_modal--row3--container {
      flex-direction: column;
      justify-content: space-evenly;
      height: 20%;
      margin-top: .2%;
  }


  .addload_modal--button--container {
      height: 10%;
      margin-top: 8%;
  }

  .addload_modal--input--name,
  .addload_modal--room--dropdown,
  .addload_modal--fixture_type--dropdown,
  .addload_modal--led_type--dropdown,
  .addload_modal--input--quantity,
  .addload_modal--input--quantity--strip,
  .addload_modal---unit--dropdown,
  .addload_modal--button {
    font-size: 1rem;
  }

  .addload_modal---header {
    font-size: 2rem;
  }
}.popup--heavyload--container{
  display: flex;
  flex-direction: column;
  align-content: center;
  flex-wrap: wrap;
  width: 45%;
  height: 15%;
  position: fixed;
  margin-top: -15%;
  margin-left: -15%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  animation-name: savepopup;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
.popup--heavyload--header,
.popup--heavyload--subheader,
.popup--heavyload--button--container{
  width: 90%;
  height: 20%;
  text-align: center;
}
.popup--heavyload--header{
  font-weight: bold;
}
.popup--heavyload--header,
.popup--heavyload--button--container{
  margin-top: 1%;
}
.popup--heavyload--button{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
}
.popup--heavyload--button:hover{
  background-color: var(--hover-tab-color)
}

.popup--heavyload--bakcground{
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

@media only screen and (max-width: 1300px) {
    .popup--heavyload--container{
        width: 75%;
        height: 25%;
        margin-top: -15%;
        margin-left: 0%;
    }
    .popup--heavyload--header,
    .popup--heavyload--subheader{
        font-size: 1.5rem;
        height: 24%;
    }
    .popup--heavyload--header{
        margin-top: 5%;
    }
}.designbar--container{
  background-color: var(--default-background-color);
  display: flex;
  width: 100%;
  height: 3vh;
}

.designbar--nav{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4%;
  height: 90%;
  margin-bottom: auto;
}
.designbar--nav--list{
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: .25%;
  height: 90%;
  margin-bottom: auto;
  margin-left: 1%;
  margin-right: 1%;
  width: 100%;
}
.designbar--nav--list--li{
  display: flex;
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5%;
  border-bottom-left-radius: .75rem;
  border-bottom-right-radius: .75rem;
  align-content: center;
}
.designbar--nav--list--li:hover{
  background-color: var(--hover-tab-color);
}
.designbar--button,
.designbar--button--groupaction{
  color: black;
  text-decoration: none;
  font-weight: bold;
  font-size: .9rem;
  text-align: center;
}
.designbar--button{
  width: 100%;
}
.designbar--button:hover{
  color: var(--hover-button-text-color);
}
.designbar--button--groupaction{
  cursor: default;
  align-content: center;
  text-align: center;
  margin-left: auto;
  width: 10%;
}
.designbar--button--groupaction:hover,
.designbar--button--groupaction--active:hover{
  color: var(--hover-button-text-color);

}

.designbar--button--groupaction--active{
  border-radius: 0;
}

.designbar--groupmenu--container{
  position: absolute;
  width:8.3%;
  /* margin-left: auto; */
  /* margin-right: 1%; */
  /* margin-bottom: auto; */
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-bottom-left-radius: .75rem;
  border-bottom-right-radius: .75rem;
  /* top: 17%; */
  right: .85%;
  z-index: 10;
  animation-name: groupMenu;
  animation-duration: 0s;
  animation-fill-mode: forwards;
}
.designbar--groupmenu--ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.designbar--groupmenu--li{
  display: flex;
  width: 100%;
  background-color: var(--default-tab-color);
  border: 1px solid var(--default-tab-border-color);
  color: var(--default-tab-text-color);
  align-items: center;
  justify-content: center;
}
.designbar--groupmenu--li--last{
  border-bottom-left-radius: .75rem;
  border-bottom-right-radius: .75rem;
}
.designbar--groupmenu--button{
  border: 1px solid var(--default-tab-color);
  border-radius: .5rem;
  color: var(--default-tab-text-color);
  background-color: var(--default-tab-color);
  padding: 0 .5rem;
  font-weight: bold;
  align-content: center;
  /* width: 100%; */
}
.designbar--groupmenu--button:hover{
  background-color: var(--hover-tab-color);
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .designbar--button,
  .designbar--groupmenu--button {
      font-size: .8rem;
  }
}

@media only screen and (max-width: 1300px) {
  .designbar--nav--list--li{
      padding: 0 2%;
  }

  .designbar--button--location,
  .designbar--button--rooms,
  .designbar--button--io,
  .designbar--button--groupaction {
    display: none;
  }

  .designbar--button,
  .designbar--groupmenu--button {
    font-size: 1rem;
  }
}.autosave--modal--container{
  display: flex;
  width: 15%;
  height: 15%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
  z-index: 11;
}
.autosave--header{
  display: flex;
  width: 100%;
  height: 45%;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 3%;
}
.autosave--button--container{
  display: flex;
  width: 100%;
  height: 20%;
  justify-content: space-evenly;
  margin-top: 1%;
  margin-bottom: auto;
}
.autosave--button{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
}
.autosave--button:hover{
  background-color: var(--hover-tab-color);
}

.save--active{
  background-color: black;
  color: white;
  border: 1px solid var(--active-tab-border-color);
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .autosave--header {
    font-size: 1rem;
  }

  .autosave--button {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 1300px) {
  .autosave--button {
    font-size: 1rem;
  }

  .autosave--header {
    font-size: 2rem;
  }

  .autosave--modal--container{
    width: 50%;
    height: 10%;
  }
  
  .autosave--modal--container {
    width: 75%;
    margin-top: -15%;
    margin-left: 0;
  }
}.defaultunit_modal--container{
  display: flex;
  width: 15%;
  height: 15%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
  z-index: 11;
}

.defaultunit_modal--header{
  display: flex;
  width: 100%;
  height: 25%;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: bold;
  margin-top: 3%;
}

.defaultunit_modal--select{
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  font-weight: bold;
  margin-top: 5%;
  width: 50%;
  height: 20%;
  margin-left: auto;
  margin-right: auto;
}

.defaultunit_modal--button--container{
  display: flex;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  justify-content: center;
  height: 25%;
  margin-top: 5%;
  margin-bottom: 1%;
}
.defaultunit_modal--button--save,
.defaultunit_modal--button--cancel{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
}

.defaultunit_modal--button--save{
  margin-left: 10%;
}
.defaultunit_modal--button--cancel{
  margin-left: auto;
  margin-right: 10%;
}

.defaultunit_modal--button--save:hover,
.defaultunit_modal--button--cancel:hover{
  background-color: var(--hover-tab-color);
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .defaultunit_modal--header {
    font-size: 1rem;
  }

  .defaultunit_modal--select,
  .defaultunit_modal--button--save,
  .defaultunit_modal--button--cancel {
      font-size: .8rem;
  }
}

@media only screen and (max-width: 1300px) {
  .defaultunit_modal--select,
  .defaultunit_modal--button--save,
  .defaultunit_modal--button--cancel {
    font-size: 1rem;
  }

  .defaultunit_modal--header {
    font-size: 2rem;
  }

  .defaultunit_modal--button--save,
  .defaultunit_modal--button--cancel{
    height: 75%;
  }

  .defaultunit_modal--container {
      width: 75%;
      margin-top: -15%;
      margin-left: 0%;
  }
}.qfactor--modal--container{
  display: flex;
  width: 30%;
  height: 20%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
  z-index: 11;
}

.qfactor--header{
  display: flex;
  width: 100%;
  height: 15%;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 3%;
}

.qfactor--subheader{
  display: flex;
  width: 100%;
  height: 25%;
  justify-content: center;
  font-size: 1rem;
  font-weight: bold;
  margin-top: 3%;
}

.qfactor--input--container{
  display: flex;
  width: 100%;
  height: 10%;
  justify-content: center;
  margin-top: 1%;
}

.qfactor--button--container{
  display: flex;
  width: 100%;
  height: 15%;
  justify-content: space-evenly;
  margin-top: 1%;
  margin-bottom: auto;
}

.qfactor--button{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
}

.qfactor--button:hover{
  background-color: var(--hover-tab-color)
}

@media only screen and (max-width: 1670px), (max-width: 900px) {
  .qfactor--header {
      font-size: 1rem;
  }

  .qfactor--input,
  .qfactor--button {
      font-size: .8rem;
  }

  .qfactor--subheader {
      font-size: .7rem;
  }

  .qfactor--input--container{
      min-height: 12%;
      max-height: 12%;
  }

  .qfactor--subheader{
      height: 20%;
  }

  .qfactor--button--container{
      margin-top: 4%;
  }
}

@media only screen and (max-width: 1300px) {
  .qfactor---input,
  .qfactor--button,
  .qfactor--subheader {
    font-size: 1rem;
  }
  .qfactor--header{
    font-size: 2rem;
  }

  .qfactor--modal--container {
      width: 75%;
      margin-top: -15%;
      margin-left: 0%;
  }

  .qfactor--modal--container{
      width: 80%;
  }
}.spt--menu--container {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* height: 6vh; */
}

/* Lower Nav Bar config */
.spt--nav--container{
  background-color: var(--default-background-color);
  display: flex;
  margin-top: auto;
  width: 100%;
  height: 100%;
  max-height: 3vh;
  top: 0;
}

.spt--nav--bar{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4%;
  /* padding: 0 1%; */
  height: 90%;
  margin-top: auto;
}

.spt--nav--list{
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: .25%;
  height: 90%;
  margin-top: auto;
  margin-left: 1%;
  margin-right: 1%;
  width: 100%;
}

.spt--nav--li{
  display: flex;
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5%;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  align-content: center;
}
.spt--nav--li--active{
  background-color: var(--active-tab-color);
  border: 1px solid var(--active-tab-border-color);
}
.spt--nav--li:hover{
  background-color: var(--hover-tab-color);
}

.spt--nav--button--options{
  cursor: default;
  align-content: center;
  text-align: center;
  margin-left: auto;
  width: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.spt--nav--button--options:hover{
  color: var(--hover-button-text-color);
}

.spt--nav--button,
.spt--nav--link{
  color: inherit;
  text-decoration: none;
  font-weight: bold;
  font-size: .9rem;
  cursor: default;
}
.spt--nav--button{
  width: 100%;
}

.spt--nav--button--options--active{
  border-radius: 0;
}

.spt--nav--optionsmenu--ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.spt--nav--optionsmenu--container{
  position: absolute;
  width:8.3%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-bottom-left-radius: .75rem;
  border-bottom-right-radius: .75rem;
  /* border-top-left-radius: .75rem;
  border-top-right-radius: .75rem; */
  /* bottom: .3%; */
  right: .85%;
  top: 19%;
  z-index: 10;
  animation-name: optionsMenu;
  animation-duration: 0s;
  animation-fill-mode: forwards;
}

.spt--nav--optionsmenu--il{
  display: flex;
  width: 100%;
  background-color: var(--default-tab-color);
  border: 1px solid var(--default-tab-border-color);
  color: var(--default-tab-text-color);
  align-items: center;
  justify-content: center;
}
.spt--nav--optionsmenu--il--first{
  border-bottom-left-radius: .75rem;
  border-bottom-right-radius: .75rem;
}
.spt--nav--optionsmenu--button{
  border: 1px solid var(--default-tab-color);
  border-radius: .5rem;
  color: var(--default-tab-text-color);
  background-color: var(--default-tab-color);
  padding: 0 .5rem;
  font-weight: bold;
  /* font-size: .9rem; */
  align-content: center;
}
.spt--nav--optionsmenu--button:hover{
  background-color: var(--hover-tab-color);
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .spt--nav--optionsmenu--button {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 1300px) {
  .spt--nav--optionsmenu--container{
      width: 25%;
      height: 10%;
  }

  .editload_modal--row3--container,
  .spt--nav--optionsmenu--il,
  .autosave--button--container{
      height: 25%;
  }

  .spt--nav--optionsmenu--container{
    height: 15%;
  }
  .popup--heavyload--button--container{
      height: 10%;
  }
  .spt--nav--optionsmenu--ul{
    height: 100%;
  }

  .spt--nav--optionsmenu--button {
    font-size: 1rem;
  }
}/* Remove Location and Room popup stuff and custom io*/
.remove_load_modal--container {
  display: flex;
  width: 25%;
  height: 15%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
  flex-direction: column;
  z-index: 11;
}

.remove_load_modal--header {
  display: flex;
  width: 100%;
  height: 25%;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: bold;
  margin-top: 3%;
}
.remove_load_modal--name {
  height: 15%;
  text-align: center;
  font-size: 1.5rem;
}
.remove_load_modal--button--spacer {
  display: flex;
  height: 57%;
  align-items: center;
}
.remove_load_modal--button--container {
  display: flex;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  justify-content: center;
  height: 37%;
  margin-top: 2%;
  margin-bottom: 1%;
}

.remove_load_modal--button--confirm,
.remove_load_modal--button--cancel {
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  margin-right: 5%;
}
.remove_load_modal--button--confirm {
  margin-left: 20%;
}

.remove_load_modal--button--cancel {
  margin-left: auto;
  margin-right: 20%;
}

.remove_load_modal--button--confirm:hover,
.remove_load_modal--button--cancel:hover {
  background-color: var(--hover-tab-color)
}

@media only screen and (max-width: 1300px) {
  .remove_load_modal--header {
    font-size: 2rem;
  }

  .remove_load_modal--button--confirm,
  .remove_load_modal--button--cancel {
    height: 75%;
  } 
  
  .remove_load_modal--container{
      width: 75%;
      margin-top: -15%;
      margin-left: 0%;
  }

  .remove_load_modal--container{
      height: 20%;
  }
}.editload_modal--container {
  display: flex;
  width: 40%;
  height: 25%;
  position: fixed;
  margin-top: -15%;
  margin-left: -35%;
  background-color: var(--default-popup-color);
  box-shadow: -2px 2px 3px .5px rgba(255, 0, 0, 0.9);
  border-radius: .25rem;
}

.editload_modal--container {
  flex-direction: column;
}

.editload_modal--header{
  display: flex;
  width: 100%;
  height: 20%;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 4%;
}

.editload_modal--row1--container,
.editload_modal--row2--container,
.editload_modal--row3--container{
  display: flex;
  width: 100%;
  height: 14%;
  justify-content: center;
  margin-top: 2%;
}

.editload_modal--room--dropdown,
.editload_modal--fixture_type--dropdown,
.editload_modal--led_type--dropdown,
.editload_modal---unit--dropdown,
.editload_modal--altlocation--dropdown {
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  font-weight: bold;
}
.editload_modal--input--name{
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}
.editload_modal--room--dropdown {
  margin-left: 10%;
  /* margin-right: 10%; */
  width: 25%;
  /* margin-right: auto; */
}
.editload_modal--fixture_type--dropdown {
  width: 25%;
  margin-left: auto;
}
.editload_modal--led_type--dropdown {
  width: 25%;
  margin-left: auto;
  margin-right: 10%;
}

.editload_modal--input--quantity{
  margin-left: 10%;
  margin-right: auto;
  width: 25%;
}
.editload_modal--input--quantity--strip{
  margin-left: 10%;
  width: 25%;
}
.editload_modal---unit--dropdown{
  width: 25%;
  margin-left: 2.5%;
  margin-right: auto;
}

.editload_modal--button--container{
  display: flex;
  width: 100%;
  height: 14%;
  margin-top: 2%;
  margin-bottom: 1%;
}

.editload_modal--button--save,
.editload_modal--button--cancel {
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
}
.editload_modal--altlocation--dropdown{
  margin-right: 10%;
  width: 25%;
  margin-left: auto;
}
.editload_modal--button--save {
  margin-left: 35%;
}
.editload_modal--button--cancel {
  margin-right: 35%;
  margin-left: auto;
}

.editload_modal--button--save:hover,
.editload_modal--button--cancel:hover {
  background-color: var(--hover-tab-color)
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .editload_modal--input--name,
  .editload_modal--room--dropdown,
  .editload_modal--fixture_type--dropdown,
  .editload_modal--led_type--dropdown,
  .editload_modal--input--quantity,
  .editload_modal--input--quantity--strip,
  .editload_modal---unit--dropdown,
  .editload_modal--button--save,
  .editload_modal--button--cancel {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 1300px) {
      .editload_modal--button--save,
  .editload_modal--button--cancel {
    height: 75%;
  }

  .editload_modal--row3--container{
      flex-direction: column;
      justify-content: space-evenly;
      height: 20%;
      margin-top: .2%;
  }

  .editload_modal--button--container{
      height: 10%;
      margin-top: 8%;
  }
  .editload_modal--button--save,
  .editload_modal--button--cancel{
      margin: 0;
  }
  .editload_modal--button--container{
      justify-content: space-evenly;
      margin-top: 6%;
  }
}.overview--list--item--container,
.overview--list--item--container--alt{
  display: flex;
  width: 100%;
  min-height: 4%;
  max-height: 4%;
  max-width: 100%;
  background-color: var(--list-even-background);
  justify-content: space-between;
  transition: min-height 0.3s linear;
  border-bottom: var(--list-dividing-line) solid 1px;
}
.overview--list--item--container--alt{
  background-color: var(--list-odd-background);
}/* overview page stuff */
.overview--container{
  display: flex;
  flex-direction: column;
  height: 96.4%;
  width: 100%;
}

.overview--list--container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 96.4%;
}

.overview--list--header{
  display: flex;
  height: 4%;
  font-weight: bolder;
  width: 100%;
  font-size: 1.25rem;
  background-color: var(--list-header-background);
  justify-content: space-between;
  border-bottom: 1px solid var(--list-header-border-bottom);
}

.overview--list--header--name--container,
.overview--list--item--name,
.overview--list--header--room--container,
.overview--list--item--room_name,
.overview--list--header--chip--container,
.overview--list--item--chip,
.overview--list--header--quantity--container,
.overview--list--item--quantity,
.overview--list--header--unit--container,
.overview--list--item--unit,
.overview--list--header--actions,
.overview--list--item--button--container,
.overview--list--header--select,
.overview--list--item--select{
  /* display: flex; */
  height: 100%;    
  /* align-items: center; */
  /* justify-content: center; */
  /* flex-direction: column; */
  /* text-align: center; */
  /* align-items: center; */
}

.overview--list--header--name--container,
.overview--list--header--room--container,
.overview--list--header--chip--container,
.overview--list--header--quantity--container,
.overview--list--header--unit--container {
  /* width: 50%; */
  /* margin-left: auto;
  margin-right: auto; */
}

.overview--list--header--name--container,
.overview--list--item--name{
  margin-left: 1%;
  width: 25%;
  
}

.overview--list--header--room--container,
.overview--list--item--room_name{
  width: 20%;
}
.overview--list--header--chip--container,
.overview--list--item--chip{
  width: 10%;
}
.overview--list--header--quantity--container,
.overview--list--item--quantity{
  width: 10%;
}
.overview--list--header--unit--container,
.overview--list--item--unit{
  width: 5%;
}
.overview--list--header--actions,
.overview--list--item--button--container{
  width: 10%;
}
.overview--list--item--button--container{
  align-items: center;
  flex-direction: row;
  justify-content: space-evenly;
}

.overview--list--header--select,
.overview--list--item--select{
  /* margin-left: auto; */
  width: 5%;
  /* margin-right: 1%; */
  /* border-left: 1px solid black; */
}
.overview--list--header--select{
  margin-right: 10px;
}

.overview--list{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.overview--list::-webkit-scrollbar{
  width: 10px;
}

.overview--list::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}

.overview--list::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}

.overview--list--item--checkbox{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--default-tab-color);
  border: 1px solid var(--default-tab-border-color);
  cursor: pointer;
  display: flex;
}
.overview--list--item--checkbox:checked{
  background-color: rgb(207, 0, 0);
}
.overview--list--item--checkbox:checked::before{
  content: '\2714';
  font-size: 1.1rem;
  color: #fff;
  transform: translateY(-4px);
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .overview--list--item--checkbox {
      width: 14px;
      height: 14px;
  }
  
  .overview--list--item--checkbox:checked::before {
      font-size: .9rem;
  }
}

@media only screen and (max-width: 1300px) {
  .overview--list--header--name--container,
  .overview--list--item--name{
      width: 30%;
  }

  .overview--list--header--room--container,
  .overview--list--item--room_name,
  .overview--list--header--select,
  .overview--list--item--select,
  .overview--list--header--unit--container,
  .overview--list--item--unit {
      display: none;
  }

  .overview--list{
      overflow-x: hidden;
  }

  .overview--list--header--name--title,
  .overview--list--header--room--title,
  .overview--list--header--chip--title,
  .overview--list--header--quantity--title,
  .overview--list--header--unit--title,
  .overview--list--header--actions,
  .overview--list--header--select,
  .overview--list--item--checkbox:checked::before,
  .overview--list--item--name,
  .overview--list--item--chip,
  .overview--list--item--quantity {
    font-size: 1rem;
  }

  .overview--list--header--actions
  {
      margin-right: 1%;
  }
  .overview--list--header--actions{
      margin-right: 10px
  }

  .overview--list--header--chip--container,
  .overview--list--item--chip{
      width: 25%;
  }
  
  .overview--list--header--quantity--container,
  .overview--list--item--quantity{
      width: 25%;
  }
  .overview--list--header--actions {
      width: 15%;
  }
}.breakdown--nav--li{
  display: flex;
  height: 80%;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  /* border: 1px solid var(--default-tab-border-color); */
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5%;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  min-width: 10%;
  max-width: 10%;
  direction: ltr;
  cursor: default;
}

.breakdown--nav--li--active{
  background-color: var(--active-tab-color);
  border: 1px solid var(--active-tab-border-color);
}
.breakdown--nav--li:hover{
  background-color: var(--hover-tab-color);
  color: var(--hover-button-text-color);
}

@keyframes scroll-text {
  0% {
      transform: translateX(0%);
  }
  65% {
      transform: translateX(-75%);
  }
  95% {
      transform: translateX(-75%);
  }
  100% {
      transform: translateX(0%);
  }
}

.item--name--scroll{
  min-width: 100%;
  max-width: 100%;
  max-height: 100%;
  white-space: nowrap;
  overflow: hidden; 
}
.item--name--scroll:not( :hover) {
  text-overflow: ellipsis;
  }


.item--name--scroll:hover .name--scroll,
.item--name--scroll:focus .name--scroll{
  display: inline-block;
  animation-name: scroll-text;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: .25s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

.breakdown--nav--button{
  color: inherit;
  text-decoration: none;
  font-weight: bold;
  font-size: .9rem;
}
.breakdonw--nav--button--inner{
  width: 100%;
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .breakdonw--nav--button--inner {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 1300px) {
  .breakdonw--nav-button--inner {
    font-size: 1rem;
  }
}/* breakdown tab */
.breakdown--header--container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 7%;
}
.breakdown--tab--container{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 40%;
}

.breakdown--tab--button{
  width: 50%;
  justify-content: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
}

.breakdown--tab--button:hover{
  background-color: var(--hover-tab-color);
  color: var(--hover-button-text-color);
}

.breakdown--active--tab{
  background-color: var(--active-tab-color);
  border: 1px solid var(--active-tab-border-color);
}

.breakdown--tab--button--con{
  width: 33.33;
}

.breakdown--table--header--container{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 60%;
  font-weight: bolder;
  /* font-size: 1.25rem; */
  background-color: var(--list-header-background);
  justify-content: space-between;
  border-bottom: 1px solid var(--list-header-border-bottom);
}

.breakdown--table--header--inner--container{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  justify-content: space-evenly;
  margin-right: 10px;
}

.breakdown--table--header--load--name--conatiner,
.breakdown--table--header--load--room--conatiner,
.breakdown--table--header--load--sku--conatiner,
.breakdown--table--header--load--quantity--conatiner,
.breakdown--table--header--load--unit--conatiner,
.breakdown--table--header--load--Channels--conatiner,
.breakdown--table--header--load--amps--conatiner,
.breakdown--table--header--load--voltage--conatiner,
.breakdown--table--header--load--actions--conatiner {
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.breakdown--table--header--load--name--conatiner,
.breakdown--config--list--item--load--name{
  width: 20%;
}
.breakdown--table--header--load--room--conatiner,
.breakdown--config--list--item--load--room{
  width: 16%;
}
.breakdown--table--header--load--sku--conatiner,
.breakdown--config--list--item--load--sku{
  width: 10%;
}

.breakdown--table--header--load--unit--conatiner,
.breakdown--config--list--item--load--unit{
  width: 5%;
}

.breakdown--table--header--load--amps--conatiner,
.breakdown--config--list--item--load--amps{
  width: 6%;
}

.breakdown--table--header--load--voltage--conatiner,
.breakdown--config--list--item--load--voltage{
  width: 4%;
}

.breakdown--table--header--io--location--conatiner,
.breakdown--table--header--io--type--conatiner,
.breakdown--table--header--io--configured--conatiner,
.breakdown--table--header--io--relaya--conatiner,
.breakdown--table--header--io--relayb--conatiner,
.breakdown--table--header--io--voltage--conatiner {
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.breakdown--table--header--load--actions--title,
.breakdown--table--header--location--title,
.breakdown--table--header--io--type--title,
.breakdown--table--header--io--configured--title,
.breakdown--table--header--io--relaya--title,
.breakdown--table--header--io--relayb--title,
.breakdown--table--header--io--voltage--title,
.breakdown--table--header--conflict--name,
.breakdown--table--header--conflict--type {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.breakdown--table--header--conflict--name,
.breakdown--table--header--conflict--type,
.breakdown--table--header--conflict--name,
.breakdown--table--header--conflict--type {
  width: 25%;
  text-align: center;
  font-size: .9rem;
}

.breakdown--table--header--load--quantity--conatiner,
.breakdown--table--header--load--Channels--conatiner {
  width: 8%;
}

.breakdown--table--header--load--actions--conatiner {
  width: 20%;
}

.breakdown--table--header--io--location--conatiner,
.breakdown--table--header--io--type--conatiner,
.breakdown--table--header--io--configured--conatiner,
.breakdown--table--header--io--relaya--conatiner,
.breakdown--table--header--io--relayb--conatiner {
  width: 10%;
}

.breakdown--table--header--io--voltage--conatiner {
  width: 15%;
}

.breakdown--table--header--conflict--description {
  width: 74%;
  text-align: center;
  font-size: .9rem;
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .breakdown--table--header--location--title,
  .breakdown--table--header--io--type--title,
  .breakdown--table--header--io--configured--title,
  .breakdown--table--header--io--relaya--title,
  .breakdown--table--header--io--relayb--title,
  .breakdown--table--header--io--voltage--title,
  .breakdown--table--header--conflict--description,
  .breakdown--table--header--load--name--title,
  .breakdown--table--header--load--room--title,
  .breakdown--table--header--load--sku--title,
  .breakdown--table--header--load--quantity--title,
  .breakdown--table--header--load--unit--title,
  .breakdown--table--header--load--Channels--title,
  .breakdown--table--header--load--amps--title,
  .breakdown--table--header--load--voltage--title,
  .breakdown--table--header--load--actions--title {
    font-size: 0.7rem;
  }

  .breakdown--table--header--load--actions--conatiner {
    width: 10%;
  }

}

@media only screen and (max-width: 1300px) {
  .breakdown--table--header--load--name--title,
  .breakdown--table--header--load--room--title,
  .breakdown--table--header--load--sku--title,
  .breakdown--table--header--load--quantity--title,
  .breakdown--table--header--load--unit--title,
  .breakdown--table--header--load--Channels--title,
  .breakdown--table--header--load--amps--title,
  .breakdown--table--header--load--voltage--title,
  .breakdown--table--header--load--actions--title,
  .breakdown--table--header--conflict--name,
  .breakdown--table--header--conflict--type,
  .breakdown--table--header--location--title,
  .breakdown--table--header--io--type--title,
  .breakdown--table--header--io--configured--title,
  .breakdown--table--header--io--relaya--title,
  .breakdown--table--header--io--relayb--title,
  .breakdown--table--header--io--voltage--title,
  .breakdown--table--header--conflict--description {
    font-size: 1rem;
  }
}.breakdown--config--list--item--container,
.breakdown--config--list--item--load--container{
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.breakdown--config--list--item--container,
.breakdown--config--list--item--container--alt{
  display: flex;
  height: 4%;
  min-height: 4%;
  width: 100%;
  transition: min-height 0.3s linear;
  background-color: var(--list-even-background);
}

.breakdown--config--list--item--load--container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  height: 100%;
  width: 100%;
  font-size: .9rem;
  border-bottom: 1px solid var(--list-dividing-line);
}

.breakdown--config--list--item--load--quantity,
.breakdown--config--list--item--load--channel,
.breakdown--config--list--item--load--actions{
  width: 8%;
}

.breakdown--config--list--item--load--actions{
  width: 20%;
}
.breakdown--config--list--item--load--actions{
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-evenly;
}

.breakdown--config--list--item--load--name,
.breakdown--config--list--item--load--room,
.breakdown--config--list--item--load--sku,
.breakdown--config--list--item--load--quantity,
.breakdown--config--list--item--load--unit,
.breakdown--config--list--item--load--channel,
.breakdown--config--list--item--load--amps,
.breakdown--config--list--item--load--voltage {
  text-align: center;
}

.breakdown--config--list--item--button--edit,
.breakdown--config--list--item--button--copy,
.breakdown--config--list--item--button--delete{
  display: flex;
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  margin-right: 5%;
}

.breakdown--config--list--item--button--edit:hover,
.breakdown--config--list--item--button--copy:hover,
.breakdown--config--list--item--button--delete:hover{
  background-color: var(--hover-tab-color)
}

.breakdown--config--list--item--conflict--name,
.breakdown--config--list--item--conflict--list{
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.breakdown--config--list--item--conflict--name{
  width: 25%;
  text-align: center;
  font-size: .9rem;
}

.breakdown--config--list--item--conflict--list{
  width: 74%;
  text-align: center;
  font-size: .9rem;
}
.breakdown--config--list--item--conflict--name{
  color: var(--conflict-text-color);
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .breakdown--config--list--item--conflict--name,
  .breakdown--config--list--item--conflict--list,
  .breakdown--config--list--item--load--container {
    font-size: .7rem;
  }
  
  .breakdown--config--list--item--load--actions{
      width: 10%;
  }
  
  .breakdown--config--list--item--button--edit,
  .breakdown--config--list--item--button--copy,
  .breakdown--config--list--item--button--delete{
      font-size: .8rem;
      width: auto;
      
  }

  .breakdown--config--list--item--button--copy{
      display: none;
  }

}

@media only screen and (max-width: 1300px) {
  .breakdown--config--list--item--conflict--name,
  .breakdown--config--list--item--conflict--list,
  .breakdown--config--list--item--button--edit,
  .breakdown--config--list--item--button--copy,
  .breakdown--config--list--item--button--delete,
  .breakdown--config--list--item--load--container {
    font-size: 1rem;
  }
}.breakdown--config--list--item--container--alt{
  background-color: var(--list-odd-background);
}

.breakdown--config--list--item--io--container,
.breakdown--config--list--item--room--container{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  height: 100%;
  width: 100%;
  font-size: .9rem;
  border-bottom: 1px solid var(--list-dividing-line);
}

.breakdown--config--list--item--io--location,
.breakdown--config--list--item--io--type,
.breakdown--config--list--item--io--configured,
.breakdown--config--list--item--io--relaya,
.breakdown--config--list--item--io--relayb {
  width: 10%;
}
.breakdown--config--list--item--io--location,
.breakdown--config--list--item--io--type,
.breakdown--config--list--item--io--configured,
.breakdown--config--list--item--io--relaya,
.breakdown--config--list--item--io--relayb,
.breakdown--config--list--item--io--voltage{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.breakdown--config--list--item--io--voltage{
  width: 15%;
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .breakdown--config--list--item--io--container {
    font-size: 0.7rem;
  }
}

@media only screen and (max-width: 1300px) {
  .breakdown--config--list--item--io--container {
    font-size: 1rem;
  }
}.breakdown--config--list--container{
  display: flex;
  flex-direction: column;
  height: 93%;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.breakdown--config--list--container::-webkit-scrollbar{
  width: 10px;
}
.breakdown--config--list--container::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}
.breakdown--config--list--container::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}.breakdown--config--requirement--window{
  display: flex;
  flex-direction: column;
  width: 20%;
  height: 100%;
  border: 1px solid var(--list-header-border-bottom);
  text-align: center;
}

.breakdown--config--requirement--header{
  border-bottom: 1px solid var(--list-header-border-bottom);
  padding-top: 1%;
  padding-bottom: 1%;
}
.breakdown--config--requirement--sub-container{
  padding-top: 5%;
  padding-bottom: 5%;
  border-bottom: 1px solid var(--list-header-border-bottom);
}
.breakdown--config--requirement--sub-header{
  border-bottom: 1px  white;
  padding-bottom: 2%;
}
.breakdown--config--requirement--sub-detail{
  padding-top: 2%;
}

.breakdown--config--requirement--sub-detail--power, .breakdown--config--requirement--sub-detail--power--alt{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  padding-top: 1%;
  padding-bottom: 1%;
}
.breakdown--config--requirement--sub-detail--power--alt{
  background-color: var(--list-even-background);
}
.breakdown--config--requirement--sub-detail--power--voltage{
  padding-left: 2%;
  width: 40%;
  text-align: left;
}
.breakdown--config--requirement--sub-detail--power--amps{
  width: 55%;
  text-align: left;
}

.conflict{
  color: var(--conflict-text-color);
}

@media only screen and (max-width: 1670px), (max-height: 900) {
  .breakdown--config--list--item--room--container {
    font-size: 0.7rem;
  }

  /* .breakdown--config--requirement--window {
    width: 15%;
  } */
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .breakdown--config--list--item--room--container {
    font-size: 1rem;
  }
}.breakdown--container{
  display: flex;
  flex-direction: column;
  height: 96.4%;
  width: 100%;
}

.breakdown--display--container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 96.4%;
}

.breakdown--nav--container{
  background-color: var(--default-background-color);
  display: flex;
  height: 5%;
  /* overflow-x: scroll;
  scrollbar-gutter: stable; */
}

.breakdown--nav--bar{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4%;
  /* padding: 0 1%; */
  height: 100%;
  margin-top: auto;
  /* overflow-x: scroll;
  scrollbar-gutter: stable; */
}

.breakdown--nav--list{
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: .25%;
  height: 100%;
  margin-top: auto;
  width: 100%;
  /* margin-left: 1%;
  margin-right: 1%; */
  overflow-x: scroll;
  scrollbar-gutter: stable;
  direction: rtl;
  padding-left: 2%;
  padding-right: 2%;
}

.breakdown--config--display--window--container{
  display: flex;
  flex-direction: row;
  height: 95%;
  width: 100%;
}
.breakdown--config--display--window{
  display: flex;
  flex-direction: column;
  width: 80%;
  height: 100%;
}

.breakdown--nav--list, .breakdown--nav--list .breakdown--nav--li{
  transform: rotate(180deg);
}

.breakdown--nav--list::-webkit-scrollbar{
  height: 10px;
}

.breakdown--nav--list::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}

.breakdown--nav--list::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}

@media only screen and (max-width: 1300px) {
    .breakdown--config--display--window{
      width: 85%;
  }
}.hardware--nav--li{
  display: flex;
  height: 80%;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5%;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  min-width: 10%;
  max-width: 10%;
  direction: ltr;
  cursor: default;
}
.hardware--nav--li--active{
  background-color: var(--active-tab-color);
  border: 1px solid var(--active-tab-border-color);
}
.hardware--nav--li:hover{
  background-color: var(--hover-tab-color);
  color: var(--hover-button-text-color);
}

.hardware--nav--button{
  color: inherit;
  text-decoration: none;
  font-weight: bold;
  font-size: .9rem;
}
.hardware--nav--button--inner{
  width: 100%;
}

@media screen and (max-width: 1670px), (max-height: 900px) {
  .hardware--nav--button {
    font-size: 0.8rem;
    width: auto;
  }
}

@media screen and (max-width: 1300px) {
  .hardware--nav--button {
    font-size: 1rem;
  }
}.hardware--selection--panel--item--container,
.hardware--selection--panel--item--container--alt{
  display: flex;
  flex-direction: row;
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  justify-content: space-between;
  background-color: var(--list-even-background);
  margin-bottom: .25%;
  align-items: center;
  border-bottom: 1px solid var(--list-dividing-line);
}
.hardware--selection--panel--item--container--alt{
  background-color: var(--list-odd-background)
}

.hardware--selection--panel--input{
  width: 10%;
  margin-right: 2.5%;
}

.hardware--selection--panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .hardware--selection--panel--input {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 1300px) {
  .hardware--selection--panel--input {
    font-size: 1rem;
  }
}.hardware--selection--fixture {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.hardware--selection--header{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 10%;
  /* margin-top: 1%; */
  background-color: var(--list-header-background);
  border-bottom: solid 1px var(--list-header-border-bottom);
  padding-left: 5%;
  padding-right: 5%;
  font-weight: bolder;
}
.hardware--selection--header--alt{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 5%;
  /* margin-top: 1%; */
  background-color: var(--list-header-background);
  border-bottom: solid 1px var(--list-header-border-bottom);
  padding-left: 5%;
  padding-right: 5%;
  font-weight: bolder;
}

.hardware--selection--sub--title,
.hardware--selection--sub--title--alt{
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  align-self: center;
  font-size: 1.5rem;
}

.hardware--selection--button--container{
  display: flex;
  height: 100%;
  align-items: center;
  width: 15%;
}

.hardware--selection--autoadd{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
  margin-left: auto;
}

.hardware--selection--autoadd:hover{
  background-color: var(--hover-tab-color)
}

.hardware--selection--list{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
.hardware--selection--list::-webkit-scrollbar{
  width: 10px;
}

.hardware--selection--list::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}

.hardware--selection--list::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}

.hardware--selection--panels {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-evenly;
  padding-bottom: 1%;
  border-bottom: solid 1px var(--list-header-border-bottom);
}

.hardware--selection--subheader{
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  text-align: center;
  margin-top: .5%;
  margin-bottom: .5%;
}

.hardware--selection--item--header--container{
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: .5%;
  margin-bottom: .5%;
}
.hardware--selection--item--header--sku,
.hardware--selection--panel--sku{
  width: 30%;
}
.hardware--selection--item--header--suggested,
.hardware--selection--panel--suggested{
  width: 25%;
  text-align: center;
}
.hardware--selection--item--header--error,
.hardware--selection--item--panel--error{
  color: var(--conflict-text-color);
  width: 10%;
  text-align: center;
  font-weight: bold;
}
.hardware--selection--item--header--selection,
.hardware--selection--panel--input{
  width: 15%;
}

@media screen and (max-width: 1670px), (max-height: 900px) {
  .hardware--selection--autoadd {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 1300px) {
  .hardware--selection--autoadd {
    font-size: 1rem;
  }
}.hardware--selection--site,
.hardware--selection--loadbalance{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}.errorlist--void{
  display: none;
}

.errorList--item--container,
.errorList--item--container--alt{
  display: flex;
  background-color: var(--list-even-background);
  margin-bottom: .25%;
}
.errorList--item--container--alt{
  background-color: var(--list-odd-background);
}

.errorlist--resolve{
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  text-align: left;
}.hardware--selection--loadbalance{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.hardware--selection--loadbalance--options{
  height: 95%;
  display: flex;
  flex-direction: column;
}
.hardware--selection--loadbalance--option--wire--container{
  height: 12%;
  display: flex;
  flex-direction: column;
  margin-top: .5%;
  border-bottom: 1px solid var(--list-header-border-bottom);
}
.hardware--selection--loadbalance--option--header,
.hardware--selection--loadbalance--option--wire--awg--container,
.hardware--selection--loadbalance--option--wire--color--container{
  width: 30%;
  margin-left: 35%;
}
.hardware--selection--loadbalance--option--header{
  margin-bottom: .2%;
  font-size: 1.25rem;
}
.hardware--selection--loadbalance--option--wire--awg--container,
.hardware--selection--loadbalance--option--wire--color--container{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.hardware--selection--loadbalance--option--wire--title,
.hardware--selection--loadbalance--option--wire--selection--container{
  width: 30%;
}

.hardware--selection--loadbalance--option--wire--colorset--container{
  height: 40%;
  display: flex;
  flex-direction: column;
  margin-top: .5%;
  border-bottom: 1px solid var(--list-header-border-bottom);
}

.hardware--selection--loadbalance--option--table--header{
  display: flex;
  flex-direction: row;
  margin-top: .25%;
  width: 60%;
  margin-left: 20%;
  justify-content: space-evenly;
  margin-bottom: .25%;
}
.hardware--selection--loadbalance--option--conductor--container{
  display: flex;
  flex-direction: row;
  width: 60%;
  margin-left: 20%;
  justify-content: space-evenly;
}

.hardware--selection--loadbalance--option--table--header--conductor,
.hardware--selection--loadbalance--option--table--header--function--container,
.hardware--selection--loadbalance--option--table--header--color,
.hardware--selection--loadbalance--option--conductor--count,
.hardware--selection--loadbalance--option--conductor--function,
.hardware--selection--loadbalance--option--color--input--container{
  width: 30%;
}

.hardware--selection--loadbalance--option--table--header--function,
.hardware--selection--loadbalance--option--conductor--function{
  display: flex;
  justify-content: space-evenly;
}
.hardware--selection--loadbalance--option--table--header--conductor,
.hardware--selection--loadbalance--option--table--header--color{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hardware--selection--loadbalance--option--table--header--function--ch{
  width: 20%;
}
.hardware--selection--loadbalance--option--table--header--function--sep{
  width: 5%;
  color: var(--conflict-text-color);

}
.hardware--selection--loadbalance--verify--container{
  height: 32%;
  display: flex;
  flex-direction: column;
  margin-top: .5%;
  border-bottom: 1px solid var(--list-header-border-bottom);;
}
.hardware--selection--loadbalance--verify--header{
  width: 30%;
  margin-left: 35%;
  margin-top: .2%;
  font-size: 1.25rem;
  height: 12%;
}
.hardware--selection--loadbalance--verify--body{
  height: 88%;
}

.hardware--selection--loadbalance--verify--button{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
}
.hardware--selection--loadbalance--verify--button:hover{
  background-color: var(--hover-tab-color);
}
.hardware--selection--loadbalance--error--container{
  margin-top: .25%;
  height: 80%;
  width: 60%;
  margin-left: 20%;
  display: flex;
  flex-direction: column;
}

.hardware--selection--loadbalance--error--header{
  height: 10%;
  display: flex;
  flex-direction: row;
  padding-right: 10px;
  background-color: var(--list-header-background);
  border-bottom: 1px solid var(--list-header-border-bottom);
}
.hardware--selection--loadbalance--error--List{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 90%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  background-color: var(--active-tab-color);
}
.hardware--selection--loadbalance--error--List::-webkit-scrollbar{
  width: 10px;
}
.hardware--selection--loadbalance--error--List::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}
.hardware--selection--loadbalance--error--List::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}
.hardware--selection--loadbalance--error--header{
  width: 100%;
  height: 15%;
}
.hardware--selection--loadbalance--error--header--risk,
.errorlist--item--risk{
  width: 20%;
}
.hardware--selection--loadbalance--error--error--header--message,
.errorlist--item--warning{
  width: 80%;
  text-align: left;
}

.hardware--selection--loadbalance--run--container{
  width: 100%;
  height: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.hardware--selection--loadbalance--run--button--container{
  margin-top: .5%;
  height: 20%;
  width: 100%;
}
.hardware--selection--loadbalance--run--secondary--container{
  height: 75%;
  width: 100%;
}
.hardware--selection--loadbalance--run--secondary--button--container{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.hardware--selection--loadbalance--run--button{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
}
.hardware--selection--loadbalance--run--button--void,
.hardware--selection--loadbalance--run--secondary--container--void{
  display: none;
}
.hardware--selection--loadbalance--run--button:hover{
  background-color: var(--hover-tab-color);
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .hardware--selection--loadbalance--option--wire--container{
    height: 15%;
    margin-top: 0.2%;
  }
  .hardware--selection--loadbalance--option--wire--colorset--container{
    height: 48%;
    margin-top: 0.2%;
  }
  .hardware--selection--loadbalance--verify--container{
    height: 40%;
    margin-top: 0.2%;
  }
}

@media only screen and (max-width: 1300px) {

}.hardware--selection--subheader--main{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 50%;
  justify-content: space-between;
}
.hardware--selection--subheader--detail{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 50%;
  justify-content: space-between;
}

.hardware--selection--location--type,
.hardware--selection--location--ac,
.hardware--selection--location--m1,
.hardware--selection--subheader--detail--channels,
.hardware--selection--subheader--detail--avlchannels,
.hardware--selection--subheader--detail--iochannels,
.hardware--selection--subheader--detail--item{
  display: flex;
  height: 100%;
  align-items: center;
}

.hardware--selection--location--type{
  width: 25%;
}

.hardware--selection--location--ac{
  width: 20%;
}
.hardware--selection--location--m1{
  width: 15%;
}


.hardware--selection--location--checkbox{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--default-tab-color);
  border: 1px solid var(--default-tab-border-color);
  cursor: default;
  display: flex;
}
.hardware--selection--location--checkbox:checked{
  background-color: rgb(207, 0, 0);
}
.hardware--selection--location--checkbox:checked::before{
  content: '\2714';
  font-size: 1.1rem;
  color: #fff;
  transform: translateY(-4px);
}

.hardware--selection--dimmers,
.hardware--selection--power,
.hardware--selection--io{
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-evenly;
  padding-bottom: 1%;
  border-bottom: solid 1px var(--list-header-border-bottom);
}

@media only screen and (max-width: 1670px), (max-height: 900px) {
  .hardware--selection--location--checkbox {
    width: 14px;
    height: 14px;
  }

  .hardware--selection--location--checkbox:checked::before {
    font-size: 0.9rem;
  }
}

@media only screen and (max-width: 1300px) {
  .hardware--selection--location--checkbox:checked::before {
    font-size: 1rem;
  }
}/* items related to hardware page */
.hardware--container{
  display: flex;
  flex-direction: column;
  height: 96.4%;
  width: 100%;
}

.hardware--nav--container{
  background-color: var(--default-background-color);
  display: flex;
  height: 5%;
}
.hardware--nav--bar{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4%;
  height: 100%;
  margin-top: auto;
}
.hardware--nav--list{
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: .25%;
  height: 100%;
  margin-top: auto;
  width: 100%;
  overflow-x: scroll;
  scrollbar-gutter: stable;
  direction: rtl;
  padding-left: 2%;
  padding-right: 2%;
}
.hardware--nav--list, .hardware--nav--list .hardware--nav--li{
  transform: rotate(180deg);
}
.hardware--nav--list::-webkit-scrollbar{
  height: 10px;
}

.hardware--nav--list::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}

.hardware--nav--list::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}

.hardware--display--container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 95%;
  max-height: 95%;
  min-height: 95%;
}.po--section--item{
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-evenly;
  padding-bottom: 1%;
  border-bottom: solid 1px var(--list-header-border-bottom);
}
.po--section--header{
  width: 30%;
  margin-left: 35%;
  margin-right: 35%;
  text-align: center;
  margin-top: .5%;
  margin-bottom: .5%;
}
.po--section--subheader{
  display: flex;
  flex-direction: row;
  width: 30%;
  margin-left: 35%;
  margin-right: 35%;
  justify-content: space-between;
  margin-bottom: 1%;
}

.po--section--list--item,
.po--section--list--item--alt{
  display: flex;
  flex-direction: row;
  width: 30%;
  margin-left: 35%;
  margin-right: 35%;
  justify-content: space-between;
  background-color: var(--list-even-background);
  margin-bottom: .25%;
  border-bottom: 1px solid var(--list-dividing-line);
}
.po--section--list--item--alt{
  background-color: var(--list-odd-background)
}
.po--section--subheader--sku,
.po--section--list--item--sku{
  width: 65%;
  margin-left: 5%;
}
.po--section--subheader--quantity,
.po--section--list--item--quantity{
  width: 20%;
  margin-right: 5%;
  text-align: center;
}.POCartModal {
  width: 100%;
  height: 100%;
}

.POCartTitle {
  width: 100%;
  font-size: 4rem;
  text-align: center;
  height: 20%;
}

.POCartErrors {
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  height: 65%;
}

.POCartCheckout {
  bottom: 0;
  width: 100%;
  text-align: center;
}

.POCartCheckout a {
  text-decoration: none;
}

.POCartCheckout a:hover {
  color: red;
}.po--container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 96.4%;
  /* max-height: 100%;
  min-height: 100%; */
}
.po--header{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 5%;
  border-bottom: solid 1px var(--list-header-border-bottom);
  background-color: var(--list-header-background);
  font-weight: bolder;
}
.po--header--title{
  width: 85%;
}

.po--header--button--container{
  width: 15%;
}
.po--header--button{
  border: 1px solid var(--default-tab-border-color);
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5rem;
  border-radius: .75rem;
  font-weight: bold;
}
.po--header--button:hover{
  background-color: var(--hover-tab-color);
}
.po--list--container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
.po--list--container::-webkit-scrollbar{
  width: 10px;
}

.po--list--container::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}

.po--list--container::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}.loadschedule--nav--li{
  display: flex;
  height: 80%;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-color: var(--default-tab-color);
  color: var(--default-tab-text-color);
  padding: 0 .5%;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  min-width: 10%;
  max-width: 10%;
  direction: ltr;
  cursor: default;
}
.loadschedule--nav--li--active{
  background-color: var(--active-tab-color);
  border: 1px solid var(--active-tab-border-color);
}
.loadschedule--nav--li:hover{
  background-color: var(--hover-tab-color);
  color: var(--hover-button-text-color);
}

.loadschedule--nav--button{
  color: inherit;
  text-decoration: none;
  font-weight: bold;
  font-size: .9rem;
}
.loadschedule--nav--button--inner{
  width: 100%;
}.loadschedule--load--container{
  display: flex;
  justify-content: space-between;
  /* min-height: 40px; */
  margin: 1px 0px 1px 0px;
  border-bottom: 1px solid var(--list-dividing-line);
}

.loadschedule--load--channel,
.loadschedule--load--name,
.loadschedule--load--chip,
.loadschedule--load--room,
.loadschedule--load--awg,
.loadschedule--load--label,
.loadschedule--load--dcp,
.loadschedule--load--dcn,
.loadschedule--load--amps{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media only screen and (max-width: 1300px) {
  .loadschedule--load--awg,
  .loadschedule--load--amps {
    display: none;
  }
}.loadschedule--container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 96.4%;
}
.loadschedule--nav--container{
  background-color: var(--default-background-color);
  display: flex;
  height: 4%;
}
.loadschedule--nav--bar{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4%;
  height: 100%;
  margin-top: auto;
}
.loadschedule--nav--list{
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: .25%;
  height: 100%;
  margin-top: auto;
  width: 100%;
  overflow-x: scroll;
  scrollbar-gutter: stable;
  direction: rtl;
  padding-left: 2%;
  padding-right: 2%;
}
.loadschedule--nav--list, .loadschedule--nav--list .loadschedule--nav--li{
  transform: rotate(180deg);
}
.loadschedule--nav--list::-webkit-scrollbar{
  height: 5px;
}

.loadschedule--nav--list::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}

.loadschedule--nav--list::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}

.loadschedule--display--container{
  display: flex;
  flex-direction: column;
  height: 88%;
}

.loadschedule--dimmer--load--header--container{
  display: flex;
  justify-content: space-between;
  /* min-height: 30px; */
  height: 3%;
  background-color: var(--list-header-background);
  border-bottom: 1px solid var(--list-header-border-bottom);
}

.loadschedule--dimmer--load--header--channel,
.loadschedule--load--channel{
  width: 5%;
}
.loadschedule--dimmer--load--header--name,
.loadschedule--load--name{
  width: 15%;
}
.loadschedule--dimmer--load--header--chip,
.loadschedule--load--chip{
  width: 8%;
}
.loadschedule--dimmer--load--header--room,
.loadschedule--load--room{
  width: 12%;
}
.loadschedule--dimmer--load--header--awg,
.loadschedule--load--awg{
  width: 10%;
}
.loadschedule--dimmer--load--header--label,
.loadschedule--load--label{
  width: 15%;
}
.loadschedule--dimmer--load--header--dcp,
.loadschedule--load--dcp{
  width: 10%;
}
.loadschedule--dimmer--load--header--dcn,
.loadschedule--load--dcn{
  width: 10%;
}
.loadschedule--dimmer--load--header--amps,
.loadschedule--load--amps{
  width: 5%;
}

.loadschedule--dimmer--load--header--channel,
.loadschedule--dimmer--load--header--name,
.loadschedule--dimmer--load--header--chip,
.loadschedule--dimmer--load--header--room,
.loadschedule--dimmer--load--header--awg,
.loadschedule--dimmer--load--header--label,
.loadschedule--dimmer--load--header--dcp,
.loadschedule--dimmer--load--header--dcn,
.loadschedule--dimmer--load--header--amps {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.loadschedule--load--list--container{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  font-size: 1.1rem;
}
.loadschedule--load--list--container::-webkit-scrollbar{
  width: 10px;
}

.loadschedule--load--list--container::-webkit-scrollbar-track{
  background-color: var(--hover-tab-color);
}

.loadschedule--load--list--container::-webkit-scrollbar-thumb{
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.9);
}

@media only screen and (max-width: 1300px) {
  .loadschedule--dimmer--load--header--awg,
  .loadschedule--dimmer--load--header--amps {
    display: none;
  }
}.ConsoleContainer{
    width: 95%;
    height: 75vh;
    background-color: black;
    overflow: auto;
    border-style: solid;
    border-color: white;
    margin-left: auto;
    margin-right: auto;
}

.beforeStartingModal,
.InstructionBox{
    z-index: 1;
    position: absolute;
    top: 15%;
    left: 20%;
    width: 75%;
    height: 50%;
    background-color: #222222;
    border-color: red;
    border-style: solid;
}

.modalInt,
.instructions{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5%;
}

.InstructionTitle{
    width: 100%;
    text-align: center;
}

.InstructionBox{
    height: 75%;
    overflow: auto;
}

.ButtonRow,
.foot {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
  }

.ButtonRow button{
  width: 20%;
}

.deviceTypeSelector {
  width: 45%;
}

.ExitBar {
    width: 100%;
    display: flex;
    flex-direction: row-reverse
}

.ExitBox {
    margin-left: auto;
    margin-right: 5%;
    cursor: pointer;
}

.MirusFlashUtility {
    height: 95%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-content: space-between;
    flex-wrap: wrap;
}

/* Button Styling */
/* button,
input[type=button],
input[type=submit]{
	color: Red;
	background-color: transparent;
	font-size: 18px;
	margin: auto;
	padding: 5px;
	border-color: red;
	border-style: solid;
}

button:hover{
	color: red;
	background-color: white;
	border-color: #515151;
} */

.ProvisionerConfirmationTitle {
  width: 100%;
  text-align: center;
  font-size: 2rem;
}

.SerialSelectorContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.SerialAutoSelectorContainer {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-evenly;
  padding-top: 5%;
}

.ProvisionButtonRow {
  padding-top: 5%;
  width: 100%;
  justify-content: space-evenly;
  display: flex;
}

.deviceTypeSelector {
  display: flex;
  flex-direction: row;
}

.deviceTypeDropdown {
  width: 50%;
}

.deviceTypeButton {
  width: 100%;
}

.deviceTypeButton button {
  width: 75%
}.userTemplateMenuDrop {
  display: none;
  position: absolute;
  width: 25%;
}

.userTemplateMenu {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.userTemplateMenu--Mobile {
  display: block;
  width: 100%;
  font-size: 2rem;
  padding-top: 25%;
}

.userTemplateIcon {
  display: none;
}

.userTemplateMenuDrop {
  display: none;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .userTemplateMenu {
    width: 20%;
  }

  .userTemplateMenu--Mobile {
    display: none;
  }

  .userTemplateIcon {
    display: block;
  }

  .userTemplateMenuDrop {
    display: block;
  }
}.userTemplateIcon {
  position: relative;
  font-size: 2rem;
}

.LogoutForm:hover .userTemplateMenuDrop {
  display: flex;
  flex-direction: column;
  background-color: gray;
  border: solid;
  padding: 2%;
  border-color: black;
}

.userTemplateMenuDrop {
  z-index: 1;
  transform: translate(-50%);
  font-size: 1.5rem;
  max-width: 200px;
  display: none;
}

.userTemplateMenuDrop a {
  font-size: 1.5rem;
  padding: 5%;
  text-decoration: none;
  z-index: 3;
  color: white;
}

.userTemplateMenuDrop a:hover {
  color: red;
  font-size: 1.7rem;
}

.LogoutForm:hover {
  color: white;
}

.LogoutButton {
  color: white;
}

/* Content window style (where most of the magic appears) */
.content-window-right {
  width: 100%;
  text-align: center;
  height: 90dvh;
  margin-bottom: 5%;
}

.content-window-right::-webkit-scrollbar {
  display: none;
}

.content {
  height: 87dvh;
  background-color: #222222;
  overflow: auto;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .content-window-right {
    width: 95%;
    overflow: hidden;
    height: 100vh;
  }
  .content-window-right::-webkit-scrollbar {
    display: none;
  }
  .content {
    height: 95dvh;
    background-color: #222222;
    overflow: auto;
  }
}.MobileMenu {
  width: 100%;
  height: 8dvh;
  bottom: 0;
  left: 0;
  position: fixed;
  font-size: 2rem;
  border-top: solid;
  background-color: black;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.graphic-menu-opt {
  display: block;
  font-size: 6rem;
}

.menu-opt {
  display: none;
}

.userTemplateMenuDrop--Mobile {
  z-index: 1;
  transform: translate(-25%, -150%);
  display: flex;
  flex-direction: column;
  font-size: 4rem;
  background-color: gray;
  border: solid;
  padding: 2%;
  border-color: black;
  width: 150%;
  animation-duration: 0.5s;
}

.userTemplateMenuDrop--Mobile.opening {
  animation-name: fadeInUp;
}

.userTemplateMenuDrop--Mobile.closing {
  animation-name: fadeOutDown;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(0); /* Starts 20px below its final position */
  }
  100% {
    opacity: 1;
    transform: translateY(-150%); /* Ends at its final vertical position */
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(-150%);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
    display: none;
  }
}
.userTemplateMenuDrop--Mobile.open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

.userTemplateMenuDrop--Mobile--Closed {
  display: none;
  width: 0;
  height: 0;
}

.userTemplateMenuDrop--Mobile a {
  font-size: 3rem;
  padding: 5%;
  text-decoration: none;
  z-index: 3;
  color: white;
}

.userTemplateMenuDrop a:hover {
  color: red;
  font-size: 1.7rem;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .MobileMenu {
    display: none;
  }
}.menu-block-left {
  display: none;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .menu-opt {
    display: none;
  }
  .graphic-menu-opt {
    display: block;
    font-size: 2rem;
    margin-top: 12%;
    margin-bottom: 12%;
    text-align: center;
  }
  .menu-block-left {
    display: flex;
    flex-direction: column;
    width: 5%;
  }
  .menu-block-left a {
    height: 15%;
  }
  .menu-block-left img {
    width: 85%;
  }
  .content-header {
    height: 2vh;
    text-align: center;
    width: 100%;
  }
  .content-header h2 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .content::-webkit-scrollbar {
    display: none;
  }
}:root {
  --list-header-background: #6d6d6d;
  --list-even-background: #515151;
  --list-odd-background: #151515;
  --list-dividing-line: #545454;
}

/* Global site settings*/
body {
  color: white;
  background-color: black;
}

/* Global link settings. Avoid that blue and purple link look*/
body a {
  color: white;
}

/* Template style */
.portalBody{
  width: 100vw;
  height: 100vh;
  background-color: black;
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 0;
  left: 0;
  overflow: hidden;
}

/* Top bar style */
.content-header {
  height: 5vh;
  display: flex;
  width: 100%;
}

/* Top bar content */
.title {
  width: 80%;
}

.content::-webkit-scrollbar {
  display: none;
}

.MobileMenuOptions {
  background-color: #222222;
  width: 75%;
  height: 75%;
  margin-top: 25%;
  margin: auto;
  font-size: 4rem;
  position: absolute;
  left: 12.5%;
  top: 12.5%;
}

.MobileMenuOptions a,
.MobileMenuOptions a:visited {
  text-decoration: none;
}

.MobileMenuContainer {
  margin: auto;
  display: flex;
  flex-direction: column;
  margin-top: 25%;
  text-align: center;
  font-size: 4rem;
}

.MobileMenuContainer .menu-opt {
  margin-top: 2%;
  margin-bottom: 2%;
}

.MobileMenuExit {
  top: 2%;
  right: 2%;
  font-size: 3rem;
}

.NormalUpdate {
  display: none;
}

.updateGraphic {
  display: none;
}

.MobileUpdate {
  font-size: 4rem;
}

.ModalOverlay {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: rgba(11, 11, 11, 75%);
}
.LoginInputContainer {
  font-size: 5rem;
  display: flex;
  flex-direction: column;
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.LoginInputContainer input {
  width: 25%;
  margin: auto;
  height: 50px;
  width: 100%;
  font-size: 4rem;
  margin-top: 2%;
  margin-bottom: 2%;
  height: 100%;
}

.PassForgotModal button {
  font-size: 4rem;
  text-align: center;
  width: 100%;
}

.loginForm input[type="submit"] {
  font-size: 4rem;
}

.pwForgotButton {
  font-size: 3rem;
  margin-top: 2%;
}

.LoginInputContainer label {
  width: 25%;
  margin: auto;
  text-align: left;
}

.loginForm {
  padding-top: 10%;
  height: 50%;
}

.PassForgotModal {
  position: absolute; 
  left: 12.5%;
  top: 12.5%;
  width: 75%;
  height: 75%;
  background-color: #222222;
  border-style: solid;
  border-color: white;
  background-color: rgba(22, 22, 22, 1);
}

.PassForgotOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(137, 137, 137, 0.3);
}

.ForgotPassTitle {
  text-align: center;
}

.ForgotPassSubmitContainer {
  width: 100%;
  text-align: center;
}

.ErrorContainer {
  width: 100%;
  z-index: 15;
  background-color: blue;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
}

.errBanner,
.statusBanner,
.goodBanner {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding-top: 1%;
  padding-bottom: 1%;
  font-size: 1.5rem;
}

.errBanner {
  background-color: red;
}

.statusBanner {
  background-color: yellow;
}

.goodBanner {
  background-color: green;
}

.errText,
.statusText,
.goodText {
  width: 95%;
}


.ExitError {
  width: 5%
}

.PWResetRow {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
}

.PWResetRow input {
  width: 25%;
  margin: auto;
}

.PWResetRow label {
  text-align: left;
  width: 25%;
  margin: auto;
  font-size: 1.5rem;
}

.passwordRequirements {
  font-size: 1.2rem;
  margin-top: 2%;
  margin-bottom: 2%;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

.CollectionTileContents img {
  width: 75%;
  margin: auto;
}

.RecommendedProductsProducts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.RecommendedProductsTitle h3{
  font-size: 2rem;
}

.RecommendedProducts .ProductEntry {
  width: 40%;
  margin-bottom: 5%;
}

.RecommendedProducts .ProductEntry img {
  width: 40%;
  margin: auto;
}
.SmallModal {
  width: 75%;
  height: 50%;
  background-color: #222222;
  top: 25%;
  left: 12.5%;
  position: absolute;
  border: solid;
  border-color: white;
  overflow: scroll;
}

.SmallModal::-webkit-scrollbar {
  display: none;
}

.LargeModal {
  width: 75%;
  height: 75%;
  border-color: white;
  background-color: #222222;
  top: 12.5%;
  left: 12.5%;
  border: solid;
  position: absolute;
  z-index: 2;
  overflow: scroll;
}

.LargeModal::-webkit-scrollbar {
  display: none;
}

.AvailableLicenses {
  width: 50%;
  margin: auto;
  border: solid;
}

.LicenseList {
  text-align: center;
}

/* Button Styling */
button,
input[type=button],
input[type=submit]{
	color: Red;
	background-color: transparent;
	font-size: 18px;
	margin: auto;
	padding: 5px;
	/* border-color: red;
	border-style: solid; */
}

button:hover{
	color: red;
	/* background-color: white; */
	/* border-color: #515151; */
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  body{
      color: white;
  }

  body a {
      color: white;
  }


  .portalBody{
      top: 0;
      left: 0;
      position: absolute;
      background-color: black;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: row;
  }

  .menu-left-opts{
      display: flex;
      flex-direction: column;
      margin-left: 5%;
      margin-top: 15%;
  }

  .menu-left-opts a {
      text-decoration: none;
  }

  .menu-left-opts a:hover{
      color: red;
      font-size: 110%;
      text-decoration: underline;
  }

  .MobileMenu {
    display: none;
  }

  .NormalUpdate {
    display: block;
  }

  .ModalOverlay {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 3;
      background: rgb(137, 137, 137, 0.3);
  }

  .ConfirmModal {
      position: absolute;
      width: 50%;
      height: 50%;
      top: 25%;
      left: 25%;
      z-index: 3;
  }

  .SmallModal {
    width: 50%;
    height: 50%;
    background-color: #222222;
    top: 25%;
    left: 25%;
    position: absolute;
    border: solid;
    border-color: white;
    overflow: hidden;
  }

  .LargeModal {
    width: 75%;
    height: 75%;
    border-color: white;
    background-color: #222222;
    top: 12.5%;
    left: 12.5%;
    border: solid;
    position: absolute;
    overflow: scroll;
  }

  .LargeModal::-webkit-scrollbar {
    display: none;
  }

  .AvailableLicenses { 
      display: flex;
      flex-direction: column;
      margin: auto;
      width: 50%;
      border-style: solid;
      border-color: black;
      text-align: center;
      justify-content: space-evenly;
      height: 25%;
  }

  .LicenseList { 
      display: flex;
      flex-direction: column;
      text-align: center;
  }

  .specsPic{
      display: inline-block;
      margin: auto;
      padding-left: 0;
      padding-bottom: 15px;
      top: 0;
      position: relative;
      width: 80%;
  }

  /* Product Specs pages */
  .specsCont{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
  }

  .Dates {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      width: 50%;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
  }

  .loading {
      z-index: 5;
      position: absolute;
      left: 45%;
      top: 45%;
      width: 12vw;
      height: 12vw;
  }

  .loading:after {
      display: block;
      padding-bottom: 100%;
  }

  .loadingImage{
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .loading img {
      height: 75%;
      margin-left: auto;
      margin-right: auto;
  }

  .LoadingCircle {
      z-index: 6;
      position: absolute;
      top: 0;
      left: 0;
  }

  /*
      Store Style
  */
  .StoreContainer {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
  }

  .StoreSidebar {
      display: flex;
      flex-direction: column;
  }

  .StoreContent {
      width: 90%;
  }

  .ProductListing {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
  }


  .box {
  margin: auto;
  }

  .nav_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    z-index: 4;
    border: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #fff;
  }
  .nav_btn > svg {
    fill: #000;
    width: 100%;
    height: 100%;
    position: relative;
  }

  .nav_btn_left {
  left: 0;
  }
  .nav_btn_right {
  right: 0;
  }

  .ind {
    width: 20px;
    height: 20px;
    list-style: none;
    border: 4px solid #f5f5f5;
    transform: rotate(135deg);
    display: inline-block;
    cursor: pointer;
    position: relative;
    z-index: 100;
  }

  .ind.active {
  background-color: #000;
  transition: 500ms 200ms;
  }

  .ind:not(:last-child) {
  margin-right: 1.4rem;
  }

  .carousel .carousel-status {
    left: 0;
    right: 0;
    text-align: center;
    color: #000;
    font-size: 1.4rem;
    text-shadow: none;
    margin-top: 1rem;
    text-transform: uppercase;
    font-weight: 700;
  }  

  .LoginInputContainer {
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    width: 25%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .LoginInputContainer input {
    margin: auto;
    height: 50px;
    width: 100%;
    font-size: 1rem;
    /* margin-top: 2%; */
    margin-bottom: 2%;
    height: 100%;
  }
  
  .loginForm input[type="submit"] {
    font-size: 1rem;
  }
  
  .pwForgotButton {
    font-size: 1rem;
  }
  
  .LoginInputContainer label {
    /* width: 25%; */
    margin: auto;
    text-align: left;
  }
}/* Input placeholders */
.login-window {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #252525;
}

@property --shadow-hue {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@keyframes hue-cycle {
  from {
    --shadow-hue: 0;
  }
  to {
    --shadow-hue: 360;
  }
}
.top-logo-container img {
  width: 100%;
  height: 100%;
}

.top-text-container {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.password-forgot-button {
  border-radius: 5px;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
  padding-left: 3%;
  padding-right: 3%;
  text-align: center;
}

.password-forgot-button:hover {
  background-color: #151515;
  color: blue;
}

.login-input-container {
  width: 100%;
  padding-bottom: 4%;
}

.additional-action-row {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
}

.submit-row {
  margin-top: 3%;
  width: 100%;
  text-align: center;
}.login-err-container {
  font-size: 2.5rem;
}

@media only screen and (min-width: 750px) and (orientation: landscape), (min-width: 1200px) and (orientation: portrait) {
  .login-err-container {
    font-size: 1rem;
  }
}/* Input placeholders */
.CheckoutContainer {
  width: 100%;
}
.CheckoutContainer--Inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.CheckoutBody {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
  margin-top: 16px;
}
.CheckoutBody--Panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.CheckoutBody--compact {
  grid-template-columns: 1fr;
}

.CheckoutSection {
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 16px;
}

.CheckoutSectionHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 12px;
}

.CheckoutSectionEmpty {
  color: #767676;
  font-size: 0.9rem;
}

.AddressCardGrid {
  display: flex;
  flex-direction: column;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.AddressCard {
  display: flex;
  flex-direction: row;
  margin-left: 10%;
  margin-right: auto;
  gap: 5px;
}
.AddressCard--Selected {
  background-color: #111;
  border-radius: 10px;
  padding: 10px;
  border-color: #1a1a1a;
  color: white;
}
.AddressCard:hover {
  background-color: blue;
  background-color: #111;
  border-radius: 10px;
  padding: 10px;
}

.AddressCardLine {
  font-size: 0.85rem;
  line-height: 1.4;
}
.AddressCardLine--Muted {
  color: #767676;
}

.PaymentMethodOptions {
  display: flex;
  gap: 10px;
}

.PaymentMethodOption {
  flex: 1;
  text-align: left;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  padding: 12px 14px;
  background: #fff;
  cursor: pointer;
}
.PaymentMethodOption--Selected {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 1px #1a1a1a;
}

.PaymentMethodOptionTitle {
  font-weight: 600;
  font-size: 0.95rem;
}

.PaymentMethodOptionSubtitle {
  color: #767676;
  font-size: 0.8rem;
  margin-top: 2px;
}

.CheckoutLine {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #efefef;
}
.CheckoutLine:last-child {
  border-bottom: none;
}

.checkoutLineImage img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
}

.checkoutLineTextFields {
  flex: 1;
}

.checkoutLineTitle {
  font-size: 0.9rem;
}

.checkoutLineQuantity {
  color: #767676;
  font-size: 0.8rem;
}

.checkoutLinePrice {
  font-size: 0.9rem;
  font-weight: 500;
}

.CheckoutOverview {
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 20px;
  position: sticky;
  top: 24px;
}

.CheckoutOverviewLabel {
  font-weight: 600;
  margin-bottom: 12px;
}

.CheckoutOverviewRow {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 6px 0;
}

.CheckoutOverviewDivider {
  height: 1px;
  background: #e2e2e2;
  margin: 12px 0;
}

.CheckoutError {
  color: #c0392b;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.AddAddressTrigger {
  margin-top: 10px;
  background: none;
  border: 1px dashed #bbb;
  border-radius: 6px;
  padding: 10px 12px;
  width: 100%;
  text-align: center;
  color: #444;
  font-size: 0.85rem;
  cursor: pointer;
}
.AddAddressTrigger:hover {
  border-color: #1a1a1a;
  color: #1a1a1a;
}

.AddAddressForm {
  margin-top: 10px;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.AddAddressFormRow {
  display: flex;
}
.AddAddressFormRow input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #d8d8d8;
  border-radius: 5px;
  font-size: 0.85rem;
}
.AddAddressFormRow--Split {
  gap: 8px;
}

.AddAddressFormCheckbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #444;
}

.AddAddressFormActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.AddAddressFormCancel {
  background: none;
  border: 1px solid #d8d8d8;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}

.AddAddressFormSave {
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}
.AddAddressFormSave:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.AddressDeleteModalOverlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

.AddressDeleteModal {
  width: 50%;
  height: 50%;
  margin-top: 12.5%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-color: #111;
}

.AddressDeleteModal h3 {
  padding-top: 2.5%;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
  margin-bottom: 10%;
}

.AddressDeleteModal .AddressContainer {
  width: 50%;
  height: 50%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  background-color: #222222;
  padding-top: 10%;
}

.AddressDeleteModal .ActionRow {
  padding-top: 5%;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
} {
  
}

._page_1hobr_5 {
  min-height: 100vh;
  padding: 40px 20px;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #181B1D;
}

._card_1hobr_12 {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #D9DBD4;
}

@media (min-width: 700px) {
  ._card_1hobr_12 {
    flex-direction: row;
  }
}

._gallery_1hobr_26 {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-bottom: 1px solid #D9DBD4;
}

@media (min-width: 700px) {
  ._gallery_1hobr_26 {
    max-width: 440px;
    border-bottom: none;
    border-right: 1px solid #D9DBD4;
  }
}

._mainImageWrap_1hobr_40 {
  position: relative;
  aspect-ratio: 1/1;
  background: #F4F5F1;
}

._mainImage_1hobr_40 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

._navBtn_1hobr_53 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  color: #181B1D;
  display: flex;
  align-items: center;
  justify-content: center;
}

._navBtn--left_1hobr_67 {
  left: 10px;
}

._navBtn--right_1hobr_70 {
  right: 10px;
}

._dots_1hobr_74 {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

._dot_1hobr_74 {
  height: 6px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(24, 27, 29, 0.35);
  border-radius: 3px;
  width: 6px;
  transition: width 180ms ease, background 180ms ease;
}

._dot--active_1hobr_95 {
  width: 16px;
  background: #181B1D;
}

._thumbs_1hobr_100 {
  display: flex;
  gap: 8px;
  padding: 12px;
}

._thumb_1hobr_100 {
  flex: 1;
  aspect-ratio: 1/1;
  padding: 0;
  cursor: pointer;
  border: 1px solid #D9DBD4;
  opacity: 0.6;
  background: none;
}

._thumb--active_1hobr_115 {
  border-color: #181B1D;
  opacity: 1;
}

._thumb_1hobr_100 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

._info_1hobr_126 {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 24px;
}

._sku_1hobr_133 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #6B6F6A;
}

._title_1hobr_140 {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  margin: 8px 0 6px;
  letter-spacing: 0.01em;
}

._subtitle_1hobr_149 {
  color: #6B6F6A;
  font-size: 14.5px;
  margin: 0;
  max-width: 46ch;
}

._divider_1hobr_156 {
  height: 1px;
  background: #D9DBD4;
  margin: 20px 0;
}

._priceRow_1hobr_162 {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

._priceBlock_1hobr_169 {
  display: flex;
  flex-direction: column;
}

._priceLabel_1hobr_174 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6B6F6A;
  margin-bottom: 2px;
  text-transform: uppercase;
}

._priceValue_1hobr_183 {
  font-family: "Oswald", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

._priceValueSecondary_1hobr_190 {
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: #181B1D;
}

._marginBadge_1hobr_198 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E4EEE9;
  color: #1F5C4C;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  margin-top: 14px;
  width: fit-content;
}

._spacer_1hobr_211 {
  flex: 1;
}

._footer_1hobr_215 {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #D9DBD4;
}

._stepper_1hobr_225 {
  display: flex;
  align-items: center;
  border: 1px solid #B9BCB3;
}

._stepperBtn_1hobr_231 {
  width: 32px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  color: #181B1D;
  display: flex;
  align-items: center;
  justify-content: center;
}

._stepperInput_1hobr_243 {
  width: 44px;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  border: none;
  outline: none;
  background: none;
  color: #181B1D;
}

._addBtn_1hobr_254 {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  background: #C1440E;
  padding: 0 18px;
  transition: background 160ms ease;
  height: 75%;
}

._addBtn--added_1hobr_272 {
  background: #1F5C4C;
}

._expandBtn_1hobr_276 {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  color: #181B1D;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

._mainImage_1hobr_40 {
  cursor: zoom-in;
}

._lightboxOverlay_1hobr_296 {
  position: fixed;
  inset: 0;
  background: rgba(24, 27, 29, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px;
}

._lightboxImage_1hobr_307 {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: default;
}

._lightboxClose_1hobr_314 {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

._lightboxClose_1hobr_314:hover {
  background: rgba(255, 255, 255, 0.18);
}

._lightboxNav_1hobr_332 {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  width: 44px;
  height: 44px;
}

._lightboxNav_1hobr_332:hover {
  background: rgba(255, 255, 255, 0.18);
}

._lightboxCounter_1hobr_342 {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  color: #FFFFFF;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
}

._optionGroup_1hobr_354 {
  margin-top: 16px;
}

._optionLabel_1hobr_358 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6B6F6A;
  margin-bottom: 6px;
}

._optionValues_1hobr_367 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

._optionPill_1hobr_373 {
  border: 1px solid #B9BCB3;
  background: #FFFFFF;
  color: #181B1D;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

._optionPill_1hobr_373:hover:not(:disabled) {
  border-color: #181B1D;
}

._optionPill--selected_1hobr_386 {
  border-color: #181B1D;
  background: #181B1D;
  color: #FFFFFF;
}

._optionPill--unavailable_1hobr_391 {
  color: #6B6F6A;
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: 0.5;
}

._optionPill--unavailable_1hobr_391:hover {
  border-color: #B9BCB3;
}

._unavailableNote_1hobr_401 {
  font-size: 12.5px;
  color: #C1440E;
  margin-top: 10px;
}