/*!************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./node_modules/@aws-amplify/ui-react/dist/styles.css ***! \************************************************************************************************************************************************************************************************************************************************************************************************/ /* * 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-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-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-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: 2rem; --amplify-space-xxl: 3rem; --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: 2em; --amplify-space-relative-xxl: 3em; --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); -webkit-padding-before: var(--amplify-components-button-padding-block-start); padding-block-start: var(--amplify-components-button-padding-block-start); -webkit-padding-after: var(--amplify-components-button-padding-block-end); padding-block-end: var(--amplify-components-button-padding-block-end); -webkit-padding-start: var(--amplify-components-button-padding-inline-start); padding-inline-start: var(--amplify-components-button-padding-inline-start); -webkit-padding-end: var(--amplify-components-button-padding-inline-end); 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); -webkit-padding-before: var( --amplify-components-button-small-padding-block-start ); padding-block-start: var( --amplify-components-button-small-padding-block-start ); -webkit-padding-after: var( --amplify-components-button-small-padding-block-end ); padding-block-end: var(--amplify-components-button-small-padding-block-end); -webkit-padding-start: var( --amplify-components-button-small-padding-inline-start ); padding-inline-start: var( --amplify-components-button-small-padding-inline-start ); -webkit-padding-end: var( --amplify-components-button-small-padding-inline-end ); padding-inline-end: var(--amplify-components-button-small-padding-inline-end); } .amplify-button--large { font-size: var(--amplify-components-button-large-font-size); -webkit-padding-before: var( --amplify-components-button-large-padding-block-start ); padding-block-start: var( --amplify-components-button-large-padding-block-start ); -webkit-padding-after: var( --amplify-components-button-large-padding-block-end ); padding-block-end: var(--amplify-components-button-large-padding-block-end); -webkit-padding-start: var( --amplify-components-button-large-padding-inline-start ); padding-inline-start: var( --amplify-components-button-large-padding-inline-start ); -webkit-padding-end: var( --amplify-components-button-large-padding-inline-end ); 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); -webkit-padding-before: var( --amplify-components-fieldcontrol-padding-block-start ); padding-block-start: var( --amplify-components-fieldcontrol-padding-block-start ); -webkit-padding-after: var( --amplify-components-fieldcontrol-padding-block-end ); padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end); -webkit-padding-start: var( --amplify-components-fieldcontrol-padding-inline-start ); padding-inline-start: var( --amplify-components-fieldcontrol-padding-inline-start ); -webkit-padding-end: var( --amplify-components-fieldcontrol-padding-inline-end ); 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); -webkit-padding-before: var( --amplify-components-fieldcontrol-small-padding-block-start ); padding-block-start: var( --amplify-components-fieldcontrol-small-padding-block-start ); -webkit-padding-after: var( --amplify-components-fieldcontrol-small-padding-block-end ); padding-block-end: var( --amplify-components-fieldcontrol-small-padding-block-end ); -webkit-padding-start: var( --amplify-components-fieldcontrol-small-padding-inline-start ); padding-inline-start: var( --amplify-components-fieldcontrol-small-padding-inline-start ); -webkit-padding-end: var( --amplify-components-fieldcontrol-small-padding-inline-end ); padding-inline-end: var( --amplify-components-fieldcontrol-small-padding-inline-end ); } .amplify-input--large { font-size: var(--amplify-components-fieldcontrol-large-font-size); -webkit-padding-before: var( --amplify-components-fieldcontrol-large-padding-block-start ); padding-block-start: var( --amplify-components-fieldcontrol-large-padding-block-start ); -webkit-padding-after: var( --amplify-components-fieldcontrol-large-padding-block-end ); padding-block-end: var( --amplify-components-fieldcontrol-large-padding-block-end ); -webkit-padding-start: var( --amplify-components-fieldcontrol-large-padding-inline-start ); padding-inline-start: var( --amplify-components-fieldcontrol-large-padding-inline-start ); -webkit-padding-end: var( --amplify-components-fieldcontrol-large-padding-inline-end ); 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 { -webkit-border-before: var( --amplify-components-fieldcontrol-quiet-border-block-start ); border-block-start: var( --amplify-components-fieldcontrol-quiet-border-block-start ); -webkit-border-start: var( --amplify-components-fieldcontrol-quiet-border-inline-start ); border-inline-start: var( --amplify-components-fieldcontrol-quiet-border-inline-start ); -webkit-border-end: var( --amplify-components-fieldcontrol-quiet-border-inline-end ); 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); -webkit-padding-before: var( --amplify-components-fieldcontrol-padding-block-start ); padding-block-start: var( --amplify-components-fieldcontrol-padding-block-start ); -webkit-padding-after: var( --amplify-components-fieldcontrol-padding-block-end ); padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end); -webkit-padding-start: var( --amplify-components-fieldcontrol-padding-inline-start ); padding-inline-start: var( --amplify-components-fieldcontrol-padding-inline-start ); -webkit-padding-end: var( --amplify-components-fieldcontrol-padding-inline-end ); 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; } .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); -webkit-padding-before: var( --amplify-components-fieldcontrol-small-padding-block-start ); padding-block-start: var( --amplify-components-fieldcontrol-small-padding-block-start ); -webkit-padding-after: var( --amplify-components-fieldcontrol-small-padding-block-end ); padding-block-end: var( --amplify-components-fieldcontrol-small-padding-block-end ); -webkit-padding-start: var( --amplify-components-fieldcontrol-small-padding-inline-start ); padding-inline-start: var( --amplify-components-fieldcontrol-small-padding-inline-start ); -webkit-padding-end: var( --amplify-components-fieldcontrol-small-padding-inline-end ); padding-inline-end: var( --amplify-components-fieldcontrol-small-padding-inline-end ); } .amplify-textarea--large { font-size: var(--amplify-components-fieldcontrol-large-font-size); -webkit-padding-before: var( --amplify-components-fieldcontrol-large-padding-block-start ); padding-block-start: var( --amplify-components-fieldcontrol-large-padding-block-start ); -webkit-padding-after: var( --amplify-components-fieldcontrol-large-padding-block-end ); padding-block-end: var( --amplify-components-fieldcontrol-large-padding-block-end ); -webkit-padding-start: var( --amplify-components-fieldcontrol-large-padding-inline-start ); padding-inline-start: var( --amplify-components-fieldcontrol-large-padding-inline-start ); -webkit-padding-end: var( --amplify-components-fieldcontrol-large-padding-inline-end ); 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 { -webkit-border-before: var( --amplify-components-fieldcontrol-quiet-border-block-start ); border-block-start: var( --amplify-components-fieldcontrol-quiet-border-block-start ); -webkit-border-start: var( --amplify-components-fieldcontrol-quiet-border-inline-start ); border-inline-start: var( --amplify-components-fieldcontrol-quiet-border-inline-start ); -webkit-border-end: var( --amplify-components-fieldcontrol-quiet-border-inline-end ); 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); object-fit: var(--amplify-components-image-object-fit); 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 { -webkit-margin-before: calc( -1 * var(--amplify-components-accordion-item-border-width) ); 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); -webkit-padding-after: var( --amplify-components-accordion-item-content-padding-block-end ); padding-block-end: var( --amplify-components-accordion-item-content-padding-block-end ); -webkit-padding-before: var( --amplify-components-accordion-item-content-padding-block-start ); 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); -webkit-margin-before: var( --amplify-components-autocomplete-menu-margin-block-start ); 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; -webkit-padding-after: var(--amplify-space-medium); padding-block-end: var(--amplify-space-medium); } .amplify-authenticator__federated-button { font-weight: normal; gap: var(--amplify-space-medium); } .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 { -webkit-padding-end: calc( var(--amplify-components-fieldcontrol-padding-inline-end) * 3 ); padding-inline-end: calc( var(--amplify-components-fieldcontrol-padding-inline-end) * 3 ); } .amplify-field-group--has-inner-start .amplify-input { -webkit-padding-start: calc( var(--amplify-components-fieldcontrol-padding-inline-start) * 3 ); 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; -webkit-padding-start: var( --amplify-components-fieldcontrol-padding-inline-start ); padding-inline-start: var( --amplify-components-fieldcontrol-padding-inline-start ); -webkit-padding-end: var( --amplify-components-fieldcontrol-padding-inline-start ); padding-inline-end: var( --amplify-components-fieldcontrol-padding-inline-start ); flex-direction: column; justify-content: center; height: 100%; } .amplify-fieldset { background-color: var(--amplify-components-fieldset-background-color); border-radius: var(--amplify-components-fieldset-border-radius); flex-direction: var(--amplify-components-fieldset-flex-direction); gap: var(--amplify-components-fieldset-gap); /* Sizes */ /* Variations */ } .amplify-fieldset--small { gap: var(--amplify-components-fieldset-small-gap); } .amplify-fieldset--large { gap: var(--amplify-components-fieldset-large-gap); } .amplify-fieldset--outlined { border: var(--amplify-components-fieldset-outlined-border-width) var(--amplify-components-fieldset-outlined-border-style) var(--amplify-components-fieldset-outlined-border-color); padding: var(--amplify-components-fieldset-outlined-padding); } .amplify-fieldset--outlined.amplify-fieldset--small { padding: var(--amplify-components-fieldset-outlined-small-padding); } .amplify-fieldset--outlined.amplify-fieldset--large { padding: var(--amplify-components-fieldset-outlined-large-padding); } .amplify-fieldset__legend { color: var(--amplify-components-fieldset-legend-color); font-weight: var(--amplify-components-fieldset-legend-font-weight); line-height: var(--amplify-components-fieldset-legend-line-height); font-size: var(--amplify-components-fieldset-legend-font-size); } .amplify-fieldset__legend--small { font-size: var(--amplify-components-fieldset-legend-small-font-size); } .amplify-fieldset__legend--large { font-size: var(--amplify-components-fieldset-legend-large-font-size); } .amplify-liveness-cancel-container { z-index: 2; position: absolute; top: var(--amplify-space-medium); right: var(--amplify-space-medium); } .liveness-detector .amplify-button--primary:focus { box-shadow: unset; outline: var(--amplify-components-button-focus-color) solid 2px; outline-offset: 2px; } .amplify-liveness-cancel-button { background-color: #fff; color: hsl(190, 95%, 30%); } .amplify-liveness-fade-out { animation-name: amplify-liveness-animation-fadeout; animation-duration: 1s; animation-fill-mode: forwards; } @keyframes amplify-liveness-animation-fadeout { from { opacity: 1; } to { opacity: 0; } } .amplify-liveness-camera-module { flex-direction: column; align-items: center; justify-content: center; background-color: var( --amplify-components-liveness-camera-module-background-color ); border: 1px solid var(--amplify-colors-neutral-40); position: relative; } .amplify-liveness-camera-module--mobile { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; } .amplify-liveness-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleX(-1); } .amplify-liveness-freshness-canvas { height: 100%; width: 100%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 1; } .amplify-liveness-loader { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .amplify-liveness-oval-canvas { flex-direction: column; position: absolute; top: 0; left: 0; width: 100%; height: 100%; align-items: center; justify-content: center; } .amplify-liveness-oval-canvas--mobile { position: fixed; } .amplify-liveness-video-anchor { position: relative; width: 100%; } .amplify-liveness-recording-icon-container { z-index: 1; position: absolute; top: var(--amplify-space-medium); left: var(--amplify-space-medium); } .amplify-liveness-recording-icon { flex-direction: column; align-items: center; background-color: #fff; padding: var(--amplify-space-xxs); gap: var(--amplify-space-xxs); border-radius: var(--amplify-radii-small); } .amplify-liveness-recording-icon .amplify-text { color: var(--amplify-colors-black); } .amplify-liveness-instruction-overlay { z-index: 2; } .amplify-liveness-countdown-container { background-color: var(--amplify-colors-background-primary); border-radius: 100%; padding: var(--amplify-space-xs); } .amplify-liveness-instruction-list { flex-direction: column; } .amplify-liveness-instruction-list li { display: flex; } .amplify-liveness-toast { background-color: var(--amplify-colors-background-primary); padding: var(--amplify-space-small); max-width: 100%; } .amplify-liveness-toast__message { color: var(--amplify-colors-font-primary); text-align: center; flex-direction: column; } .amplify-liveness-toast--medium { border-radius: var(--amplify-radii-medium); } .amplify-liveness-toast--large { font-size: var(--amplify-font-sizes-xxl); padding: 0 var(--amplify-space-xs); } .amplify-liveness-toast--primary { background-color: var(--amplify-colors-primary-80); } .amplify-liveness-toast--primary .amplify-liveness-toast__message { color: var(--amplify-colors-font-inverse); text-align: center; flex-direction: column; } .amplify-liveness-toast__container { gap: var(--amplify-space-xs); flex-direction: column; align-items: center; } .amplify-liveness-toast--error { background-color: var(--amplify-colors-red-80); } .amplify-liveness-toast--error .amplify-liveness-toast__message { color: var(--amplify-colors-font-inverse); } .amplify-liveness-match-indicator { display: block; width: min(70%, 200px); position: relative; --amplify-liveness-match-indicator-transition: transform 0.2s linear; } .amplify-liveness-match-indicator__bar { --percentage: 0; display: block; width: 100%; height: var(--amplify-space-medium); border-radius: var(--amplify-radii-medium); background: var(--amplify-colors-white); position: relative; overflow: hidden; /* This translateZ transform fixes in issue in Safari where the bar::after element doesn't appear clipped from overflow: hidden here */ transform: translateZ(0); border: 1px solid var(--amplify-colors-border-tertiary); } .amplify-liveness-match-indicator__pin { --percentage: 0; display: block; width: 100%; position: absolute; top: 50%; left: 0; transform: translate(var(--percentage), 0); transition: var(--amplify-liveness-match-indicator-transition); } .amplify-liveness-match-indicator__bar:after { position: absolute; content: ""; width: 100%; height: 100%; background: var(--amplify-colors-primary-80); left: -100%; transform: translate(var(--percentage), 0); transition: var(--amplify-liveness-match-indicator-transition); } .amplify-liveness-match-indicator__pin:after { --height: var(--amplify-space-xl); position: absolute; content: ""; width: var(--amplify-space-small); height: var(--height); border-radius: var(--amplify-radii-medium); background: var(--amplify-colors-primary-80); left: 0; top: 0; transform: translate(-50%, calc(var(--height) / 2 * -1)); } .amplify-liveness-figures { flex-wrap: wrap; } .amplify-liveness-figure { flex-direction: column; gap: 0; } .amplify-liveness-figure__caption { padding: var(--amplify-space-xxs); } .amplify-liveness-figure__caption--success { background-color: var(--amplify-colors-background-success); color: var(--amplify-colors-font-success); } .amplify-liveness-figure__caption--error { background-color: var(--amplify-colors-background-error); color: var(--amplify-colors-font-error); } .amplify-liveness-figure__image { background-color: #fff; border: 1px solid var(--amplify-colors-border-primary); position: relative; display: flex; justify-content: center; } .amplify-liveness-figure__image svg { display: block; } .amplify-liveness-figure__image--success { border-color: var(--amplify-colors-green-90); } .amplify-liveness-figure__image--error { border-color: var(--amplify-colors-border-error); } .amplify-liveness-figure__icon { position: absolute; left: 0; top: 0; } .amplify-liveness-landscape-error-modal { background-color: var(--amplify-colors-background-primary); flex-direction: column; text-align: center; align-items: center; justify-content: center; width: 100%; } .amplify-liveness-landscape-error-modal__header { font-size: large; font-weight: var(--amplify-font-weights-bold); } .amplify-liveness-landscape-error-modal__button { justify-content: center; } .amplify-liveness-start-screen-header { display: flex; flex-direction: column; } .amplify-liveness-start-screen-header__heading { color: var(--amplify-colors-font-primary); font-weight: var(--amplify-font-weights-bold); } .amplify-liveness-start-screen-header__body { color: var(--amplify-colors-font-primary); } .amplify-liveness-start-screen-warning { color: var(--amplify-colors-blue-90); background-color: var(--amplify-colors-blue-10); align-items: center; z-index: 3; } .amplify-liveness-start-screen-instructions__heading { color: var(--amplify-colors-font-primary); font-weight: var(--amplify-font-weights-bold); } .amplify-liveness-overlay-opaque { background-color: var(--amplify-colors-overlay-40); } .amplify-liveness-overlay { flex-direction: column; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: var(--amplify-space-large); } .amplify-liveness-error-modal { gap: var(--amplify-space-xs); align-items: center; justify-content: center; color: var(--amplify-colors-font-error); } .amplify-liveness-error-modal__heading { font-weight: var(--amplify-font-weights-bold); } .amplify-liveness-hint--mobile { margin-top: var(--amplify-space-xxxl); } .amplify-liveness-hint__text { align-items: center; gap: var(--amplify-space-xs); } .amplify-liveness-popover { position: relative; } .amplify-liveness-popover__anchor { position: absolute; top: 26px; left: 20px; z-index: 3; border-style: solid; border-width: 0 9px 9px 9px; border-color: transparent transparent var(--amplify-colors-background-primary) transparent; } .amplify-liveness-popover__anchor-secondary { position: absolute; top: 24px; left: 19px; z-index: 2; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent var(--amplify-colors-border-secondary) transparent; } .amplify-liveness-popover__container { position: absolute; background-color: var(--amplify-colors-background-primary); color: var(--amplify-colors-font-primary); flex-direction: row; font-size: var(--amplify-font-sizes-xs); font-weight: var(--amplify-font-weights-normal); padding: var(--amplify-space-small); top: 33px; width: 240px; border: 1px solid var(--amplify-colors-border-secondary); border-radius: 2px; z-index: 4; } .amplify-liveness-start-screen-camera-select { flex-direction: column; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: var(--amplify-space-xl); align-items: center; justify-content: flex-end; display: flex; z-index: 2; } .amplify-liveness-start-screen-camera-select__container { display: flex; justify-content: space-between; align-items: inherit; gap: var(--amplify-space-xs); } .amplify-liveness-start-screen-camera-select__label, .amplify-liveness-start-screen-camera-select .amplify-select, .amplify-liveness-start-screen-camera-select .amplify-select__wrapper, .amplify-liveness-start-screen-camera-select .amplify-select__icon-wrapper { background-color: var(--amplify-colors-background-primary); color: var(--amplify-colors-font-primary); } .amplify-liveness-start-screen-camera-waiting { flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 480px; } .amplify-menu__wrapper { z-index: 999999; } .amplify-menu__trigger { display: flex; justify-content: center; align-items: center; } .amplify-menu__content { background-color: var(--amplify-components-menu-background-color); border-radius: var(--amplify-components-menu-border-radius); box-shadow: var(--amplify-components-menu-box-shadow); flex-direction: var(--amplify-components-menu-flex-direction); gap: var(--amplify-components-menu-gap); min-width: var(--amplify-components-menu-min-width); max-width: var(--amplify-components-menu-max-width); border-color: var(--amplify-components-menu-border-color); border-width: var(--amplify-components-menu-border-width); border-style: var(--amplify-components-menu-border-style); } .amplify-menu__content__item { min-height: var(--amplify-components-menu-item-min-height); -webkit-padding-start: var( --amplify-components-menu-item-padding-inline-start ); padding-inline-start: var( --amplify-components-menu-item-padding-inline-start ); -webkit-padding-end: var(--amplify-components-menu-item-padding-inline-end); 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 1; flex-direction: column; gap: var(--amplify-space-xxxs); } .amplify-message__dismiss { -webkit-margin-start: auto; margin-inline-start: auto; gap: var(--amplify-components-message-dismiss-gap); } .amplify-pagination { list-style-type: none; } .amplify-pagination__item { height: var(--amplify-components-pagination-item-shared-height); min-width: var(--amplify-components-pagination-item-shared-min-width); border-radius: var(--amplify-components-pagination-item-shared-border-radius); display: flex; align-items: center; justify-content: center; font-weight: initial; color: var(--amplify-components-pagination-button-color); -webkit-margin-start: var( --amplify-components-pagination-item-container-margin-left ); margin-inline-start: var( --amplify-components-pagination-item-container-margin-left ); -webkit-margin-end: var( --amplify-components-pagination-item-container-margin-right ); margin-inline-end: var( --amplify-components-pagination-item-container-margin-right ); -webkit-padding-start: var( --amplify-components-pagination-button-padding-inline-start ); padding-inline-start: var( --amplify-components-pagination-button-padding-inline-start ); -webkit-padding-end: var( --amplify-components-pagination-button-padding-inline-end ); 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 ); -webkit-padding-start: var( --amplify-components-pagination-ellipsis-padding-inline-start ); padding-inline-start: var( --amplify-components-pagination-ellipsis-padding-inline-start ); -webkit-padding-end: var( --amplify-components-pagination-ellipsis-padding-inline-end ); 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: inline-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); -webkit-padding-before: var( --amplify-components-fieldcontrol-padding-block-start ); padding-block-start: var( --amplify-components-fieldcontrol-padding-block-start ); -webkit-padding-after: var( --amplify-components-fieldcontrol-padding-block-end ); padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end); -webkit-padding-start: var( --amplify-components-fieldcontrol-padding-inline-start ); padding-inline-start: var( --amplify-components-fieldcontrol-padding-inline-start ); -webkit-padding-end: var( --amplify-components-fieldcontrol-padding-inline-end ); 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); -webkit-padding-end: var(--amplify-components-select-padding-inline-end); 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); -webkit-padding-before: var( --amplify-components-fieldcontrol-small-padding-block-start ); padding-block-start: var( --amplify-components-fieldcontrol-small-padding-block-start ); -webkit-padding-after: var( --amplify-components-fieldcontrol-small-padding-block-end ); padding-block-end: var( --amplify-components-fieldcontrol-small-padding-block-end ); -webkit-padding-start: var( --amplify-components-fieldcontrol-small-padding-inline-start ); padding-inline-start: var( --amplify-components-fieldcontrol-small-padding-inline-start ); -webkit-padding-end: var( --amplify-components-fieldcontrol-small-padding-inline-end ); padding-inline-end: var( --amplify-components-fieldcontrol-small-padding-inline-end ); } .amplify-select--large { font-size: var(--amplify-components-fieldcontrol-large-font-size); -webkit-padding-before: var( --amplify-components-fieldcontrol-large-padding-block-start ); padding-block-start: var( --amplify-components-fieldcontrol-large-padding-block-start ); -webkit-padding-after: var( --amplify-components-fieldcontrol-large-padding-block-end ); padding-block-end: var( --amplify-components-fieldcontrol-large-padding-block-end ); -webkit-padding-start: var( --amplify-components-fieldcontrol-large-padding-inline-start ); padding-inline-start: var( --amplify-components-fieldcontrol-large-padding-inline-start ); -webkit-padding-end: var( --amplify-components-fieldcontrol-large-padding-inline-end ); 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 { -webkit-border-before: var( --amplify-components-fieldcontrol-quiet-border-block-start ); border-block-start: var( --amplify-components-fieldcontrol-quiet-border-block-start ); -webkit-border-start: var( --amplify-components-fieldcontrol-quiet-border-inline-start ); border-inline-start: var( --amplify-components-fieldcontrol-quiet-border-inline-start ); -webkit-border-end: var( --amplify-components-fieldcontrol-quiet-border-inline-end ); 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); -webkit-padding-end: var( --amplify-components-select-small-padding-inline-end ); padding-inline-end: var(--amplify-components-select-small-padding-inline-end); } .amplify-select--large { min-width: var(--amplify-components-select-large-min-width); -webkit-padding-end: var( --amplify-components-select-large-padding-inline-end ); 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"] { -webkit-border-end: none; border-inline-end: none; } .amplify-stepperfield__button--increase[data-invalid="true"] { -webkit-border-start: none; 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"]) { -webkit-border-start: none; border-inline-start: none; -webkit-border-end: none; border-inline-end: none; } .amplify-switchfield { display: inline-block; font-size: var(--amplify-components-switchfield-font-size); cursor: pointer; } .amplify-switchfield--small { font-size: var(--amplify-components-switchfield-small-font-size); } .amplify-switchfield--large { font-size: var(--amplify-components-switchfield-large-font-size); } .amplify-switch__wrapper { display: inline-flex; align-items: center; } .amplify-switch__wrapper--start { flex-direction: row; } .amplify-switch__wrapper--end { flex-direction: row-reverse; } .amplify-switch__wrapper--top { flex-direction: column; } .amplify-switch__wrapper--bottom { flex-direction: column-reverse; } .amplify-switch__track { display: inline-flex; justify-content: flex-start; box-sizing: content-box; border-radius: var(--amplify-components-switchfield-track-border-radius); padding: var(--amplify-components-switchfield-track-padding); width: var(--amplify-components-switchfield-track-width); height: var(--amplify-components-switchfield-track-height); transition-duration: var( --amplify-components-switchfield-track-transition-duration ); background-color: var( --amplify-components-switchfield-track-background-color ); } .amplify-switch__track--checked { background-color: var( --amplify-components-switchfield-track-checked-background-color ); } .amplify-switch__track--disabled { opacity: var(--amplify-components-switchfield-disabled-opacity); cursor: not-allowed; } .amplify-switch__track--focused { box-shadow: var(--amplify-components-switchfield-focused-shadow); } .amplify-switch__track--error { background-color: var( --amplify-components-switchfield-track-error-background-color ); } .amplify-switch__thumb { background-color: var( --amplify-components-switchfield-thumb-background-color ); transition-duration: var( --amplify-components-switchfield-thumb-transition-duration ); border-radius: var(--amplify-components-switchfield-thumb-border-radius); width: var(--amplify-components-switchfield-thumb-width); height: var(--amplify-components-switchfield-thumb-width); border-width: var(--amplify-components-switchfield-thumb-border-width); border-style: var(--amplify-components-switchfield-thumb-border-style); border-color: var(--amplify-components-switchfield-thumb-border-color); overflow-wrap: break-word; } .amplify-switch__thumb--checked { transform: var(--amplify-components-switchfield-thumb-checked-transform); } .amplify-switch__thumb--disabled { cursor: not-allowed; } .amplify-switch__label { padding: var(--amplify-components-switchfield-label-padding); cursor: pointer; } .amplify-table { /** * Default Table primitive stylings */ border-collapse: var(--amplify-components-table-border-collapse); display: var(--amplify-components-table-display); width: var(--amplify-components-table-width); --amplify-internal-table-caption-font-size: var( --amplify-components-table-caption-font-size ); --amplify-internal-table-th-font-size: var( --amplify-components-table-header-font-size ); --amplify-internal-table-th-padding: var( --amplify-components-table-header-padding ); --amplify-internal-table-td-font-size: var( --amplify-components-table-data-font-size ); --amplify-internal-table-td-padding: var( --amplify-components-table-data-padding ); --amplify-internal-table-td-border-width: var( --amplify-components-table-data-border-width ) 0px var(--amplify-components-table-data-border-width) 0px; --amplify-internal-table-th-border-width: var( --amplify-components-table-header-border-width ) 0px var(--amplify-components-table-header-border-width) 0px; /** * Data attribute stylings */ } .amplify-table--small { --amplify-internal-table-caption-font-size: var( --amplify-components-table-caption-small-font-size ); --amplify-internal-table-th-font-size: var( --amplify-components-table-header-small-font-size ); --amplify-internal-table-th-padding: var( --amplify-components-table-header-small-padding ); --amplify-internal-table-td-font-size: var( --amplify-components-table-data-small-font-size ); --amplify-internal-table-td-padding: var( --amplify-components-table-data-small-padding ); } .amplify-table--large { --amplify-internal-table-caption-font-size: var( --amplify-components-table-caption-large-font-size ); --amplify-internal-table-th-font-size: var( --amplify-components-table-header-large-font-size ); --amplify-internal-table-th-padding: var( --amplify-components-table-header-large-padding ); --amplify-internal-table-td-font-size: var( --amplify-components-table-data-large-font-size ); --amplify-internal-table-td-padding: var( --amplify-components-table-data-large-padding ); } .amplify-table--bordered { --amplify-internal-table-td-border-width: var( --amplify-components-table-data-border-width ) var(--amplify-components-table-data-border-width) var(--amplify-components-table-data-border-width) var(--amplify-components-table-data-border-width); --amplify-internal-table-th-border-width: var( --amplify-components-table-header-border-width ) var(--amplify-components-table-header-border-width) var(--amplify-components-table-header-border-width) var(--amplify-components-table-header-border-width); } .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) { background-color: var( --amplify-components-table-row-striped-background-color ); } .amplify-table__caption { caption-side: var(--amplify-components-table-caption-caption-side); color: var(--amplify-components-table-caption-color); display: var(--amplify-components-table-caption-display); font-size: var(--amplify-internal-table-caption-font-size); text-align: var(--amplify-components-table-caption-text-align); word-break: var(--amplify-components-table-caption-word-break); } .amplify-table__head { display: var(--amplify-components-table-head-display); vertical-align: var(--amplify-components-table-head-vertical-align); } .amplify-table__body { display: var(--amplify-components-table-body-display); vertical-align: var(--amplify-components-table-body-vertical-align); } .amplify-table__foot { display: var(--amplify-components-table-foot-display); vertical-align: var(--amplify-components-table-foot-vertical-align); } .amplify-table__row { display: var(--amplify-components-table-row-display); vertical-align: var(--amplify-components-table-row-vertical-align); } .amplify-table__th { border-color: var(--amplify-components-table-header-border-color); border-style: var(--amplify-components-table-header-border-style); border-width: var(--amplify-internal-table-th-border-width); color: var(--amplify-components-table-header-color); display: var(--amplify-components-table-header-display); font-size: var(--amplify-internal-table-th-font-size); font-weight: var(--amplify-components-table-header-font-weight); padding: var(--amplify-internal-table-th-padding); vertical-align: var(--amplify-components-table-header-vertical-align); } .amplify-table__th:first-child { border-left-width: var(--amplify-components-table-header-border-width); } .amplify-table__th:last-child { border-right-width: var(--amplify-components-table-header-border-width); } .amplify-table__td { border-color: var(--amplify-components-table-data-border-color); border-style: var(--amplify-components-table-data-border-style); border-width: var(--amplify-internal-table-td-border-width); color: var(--amplify-components-table-data-color); display: var(--amplify-components-table-data-display); font-size: var(--amplify-internal-table-td-font-size); font-weight: var(--amplify-components-table-data-font-weight); padding: var(--amplify-internal-table-td-padding); vertical-align: var(--amplify-components-table-data-vertical-align); } .amplify-table__td:first-child { border-left-width: var(--amplify-components-table-data-border-width); } .amplify-table__td:last-child { border-right-width: var(--amplify-components-table-data-border-width); } .amplify-table[data-highlightonhover="true"] .amplify-table__row:not(.amplify-table__head *):hover { background-color: var(--amplify-components-table-row-hover-background-color); } .amplify-tabs__list { --internal-item-margin-start: 0; --internal-item-margin-end: calc( -1 * var(--amplify-components-tabs-item-border-width) ); --internal-item-border-width: 0 0 var(--amplify-components-tabs-border-width) 0; --internal-item-flex: initial; display: flex; flex-direction: row; background-color: var(--amplify-components-tabs-background-color); box-shadow: var(--amplify-components-tabs-box-shadow); border-width: var(--internal-item-border-width); border-style: var(--amplify-components-tabs-border-style); border-color: var(--amplify-components-tabs-border-color); gap: var(--amplify-components-tabs-gap); } .amplify-tabs__list--top { --internal-item-border-width: var(--amplify-components-tabs-border-width) 0 0 0; --internal-item-margin-start: calc( -1 * var(--amplify-components-tabs-item-border-width) ); --internal-item-margin-end: 0; } .amplify-tabs__list--equal { --internal-item-flex: 1 1 0; } .amplify-tabs__list--relative { --internal-item-flex: 1 1 auto; } .amplify-tabs__panel { display: none; background-color: var(--amplify-components-tabs-panel-background-color); padding-inline: var(--amplify-components-tabs-panel-padding-inline); padding-block: var(--amplify-components-tabs-panel-padding-block); } .amplify-tabs__panel--active { display: block; } .amplify-tabs__item { position: relative; background-color: var(--amplify-components-tabs-item-background-color); box-sizing: border-box; color: var(--amplify-components-tabs-item-color); font-size: var(--amplify-components-tabs-item-font-size); font-weight: var(--amplify-components-tabs-item-font-weight); padding: var(--amplify-components-tabs-item-padding-vertical) var(--amplify-components-tabs-item-padding-horizontal); text-align: var(--amplify-components-tabs-item-text-align); transition: all var(--amplify-components-tabs-item-transition-duration); border-width: var(--internal-item-border-width); border-style: var(--amplify-components-tabs-item-border-style); border-color: var(--amplify-components-tabs-item-border-color); flex: var(--internal-item-flex); -webkit-margin-before: var(--internal-item-margin-start); margin-block-start: var(--internal-item-margin-start); -webkit-margin-after: var(--internal-item-margin-end); 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 { 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) { -webkit-margin-start: calc( -1 * var(--amplify-components-button-border-width) ); 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-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%; 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 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-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; } /*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Barlow","arguments":[{"subsets":["latin"],"weight":"400"}],"variableName":"Barlow"} ***! \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* vietnamese */ @font-face { font-family: "__Barlow_ea16cd"; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/8a63bc110e8f45ad-s.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: "__Barlow_ea16cd"; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/00045315ec24c208-s.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: "__Barlow_ea16cd"; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/42ca9a2dc174b9b9-s.p.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "__Barlow_Fallback_ea16cd"; src: local("Arial"); ascent-override: 103.43%; descent-override: 20.69%; line-gap-override: 0%; size-adjust: 96.68%; } .__className_ea16cd { font-family: "__Barlow_ea16cd", "__Barlow_Fallback_ea16cd"; font-weight: 400; font-style: normal; } /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Inter","arguments":[{"subsets":["latin"]}],"variableName":"inter"} ***! \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* cyrillic-ext */ @font-face { font-family: "__Inter_d65c78"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/55c55f0601d81cf3-s.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: "__Inter_d65c78"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/26a46d62cd723877-s.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: "__Inter_d65c78"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/97e0cb1ae144a2a9-s.woff2) format("woff2"); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: "__Inter_d65c78"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/581909926a08bbc8-s.woff2) format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: "__Inter_d65c78"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: "__Inter_d65c78"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/6d93bde91c0c2823-s.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: "__Inter_d65c78"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/a34f9d1faa5f3315-s.p.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "__Inter_Fallback_d65c78"; src: local("Arial"); ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; size-adjust: 107.06%; } .__className_d65c78 { font-family: "__Inter_d65c78", "__Inter_Fallback_d65c78"; font-style: normal; } /*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Icon/ExternalIcon/ExternalIcon.scss ***! \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .custom-external-icon { stroke-width: 1; } /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Icon/SquareArrow/SquareArrow.scss ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .square-arrow { height: 32px; padding: 0 8px; color: var(--text-on-dark); display: flex; align-items: center; background-color: var(--primary); } /*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Link/CustomLink/CustomLink.scss ***! \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .custom-link { display: flex; flex-direction: row; align-items: center; font-weight: bold; } .custom-link svg { flex-shrink: 0; } .custom-link--large { justify-content: space-between; width: 100%; gap: 0; } .custom-link--anchor-link { color: var(--text-primary); font-size: 16px; font-weight: bold; border-bottom: solid 1px var(--border-background-secondary); display: flex; align-items: center; gap: 12px; padding: 12px 0; } .custom-link--anchor-link:hover { color: var(--primary); border-bottom-color: var(--primary); } .custom-link--anchor-link svg { color: var(--primary); } .custom-link--anchor-link.amplify-link:visited { color: var(--text-primary); } .custom-link--text-link-A { color: var(--primary); font-size: 16px; gap: 8px; } .custom-link--text-link-A:hover { color: #045244; } .custom-link--text-link-A.amplify-link:visited { color: var(--primary); } .custom-link--text-link-B { color: var(--primary); font-size: 14px; gap: 8px; } .custom-link--text-link-B:hover { color: #045244; } .custom-link--text-link-B.amplify-link:visited { color: var(--primary); } .custom-link--text-link-C { color: var(--text-primary); font-size: 14px; gap: 8px; } .custom-link--text-link-C svg { color: var(--primary); } .custom-link--text-link-C.amplify-link:visited { color: var(--text-primary); } .custom-link--text-link-D { color: var(--primary); font-size: 12px; gap: 8px; } .custom-link--text-link-D svg { color: var(--primary); } .custom-link--text-link-D.amplify-link:visited { color: var(--primary); } .custom-link--area-plus-link { color: var(--text-primary); font-size: 14px; gap: 8px; } .custom-link--area-plus-link:hover { color: #045244; } .custom-link--area-plus-link svg { color: var(--primary); width: 24px; height: 24px; padding: 2px; background-color: var(--background); border-radius: 12px; } .custom-link--area-minus-link { background-color: var(--border-background-secondary); color: var(--text-primary); font-size: 14px; gap: 8px; } .custom-link--area-minus-link:hover { color: #045244; } .custom-link--area-minus-link svg { color: var(--primary); width: 24px; height: 24px; padding: 2px; background-color: var(--background); border-radius: 12px; } .custom-link--blank-link-A { color: var(--primary); font-size: 16px; gap: 8px; } .custom-link--blank-link-A.amplify-link:visited { color: var(--primary); } .custom-link--blank-link-B { color: var(--primary); font-size: 14px; gap: 8px; } .custom-link--blank-link-B.amplify-link:visited { color: var(--primary); } .custom-link--blank-link-C { color: var(--text-primary); font-size: 14px; gap: 8px; } .custom-link--blank-link-C svg { color: var(--primary); } .custom-link--blank-link-C.amplify-link:visited { color: var(--text-primary); } .custom-link--blank-link-D { display: block; color: var(--primary); font-size: 12px; text-decoration: underline; } .custom-link--blank-link-D svg { margin: 0 0 -2px 10px; color: var(--primary); } .custom-link--blank-link-D.amplify-link:visited { color: var(--primary); } .custom-link--window-link-A { color: var(--primary); font-size: 16px; gap: 8px; } .custom-link--window-link-A.amplify-link:visited { color: var(--primary); } .custom-link--window-link-B { color: var(--primary); font-size: 14px; gap: 8px; } .custom-link--window-link-B.amplify-link:visited { color: var(--primary); } .custom-link--window-link-D { color: var(--primary); font-size: 12px; gap: 8px; } .custom-link--window-link-D.amplify-link:visited { color: var(--primary); } .custom-link--more-link { color: var(--primary); font-size: 16px; gap: 8px; } .custom-link--more-link svg { width: 24px; height: 24px; padding: 2px; background-color: var(--background); border-radius: 12px; } .custom-link--more-link.amplify-link:visited { color: var(--primary); } .custom-link--custom-plus-link { color: var(--primary); font-size: 16px; gap: 8px; } .custom-link--custom-plus-link svg { width: 24px; height: 24px; padding: 2px; background-color: var(--background); border-radius: 12px; } .custom-link--custom-plus-link.amplify-link:visited { color: var(--primary); } .custom-link--custom-minus-link { color: var(--primary); font-size: 16px; gap: 8px; } .custom-link--custom-minus-link svg { width: 24px; height: 24px; padding: 2px; background-color: var(--background); border-radius: 12px; } .custom-link--custom-minus-link.amplify-link:visited { color: var(--primary); } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Heading/H1Heading/H1Heading.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .h1-heading { margin-bottom: 48px; } @media (min-width: 640px) { .h1-heading { margin-bottom: 64px; } } .h1-heading__heading-container { text-align: center; padding: 20px; background-color: var(--background); width: 100%; letter-spacing: 0.06em; } @media (min-width: 640px) { .h1-heading__heading-container { padding: 26px 0; line-height: 64px; } } .h1-heading__heading-text { color: var(--text-primary); font-size: 20px; line-height: 1.2; } @media (min-width: 640px) { .h1-heading__heading-text { font-size: 32px; } } .h1-heading__heading-text--sub { color: var(--text-primary); font-size: 20px; line-height: 20px; margin-top: 8px; } @media (min-width: 640px) { .h1-heading__heading-text--sub { font-size: 24px; line-height: 24px; margin-top: 18px; } } .h1-heading__divider { background-color: var(--primary); width: 80px; height: 4px; margin: 0 auto; } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Heading/H2Heading/H2Heading.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .h2-heading__text { color: var(--text-primary); font-size: 24px; line-height: 40px; font-weight: bold; margin-bottom: 16px; } @media (min-width: 640px) { .h2-heading__text { font-size: 32px; line-height: 48px; margin-bottom: 24px; } } .h2-heading__divider { margin-bottom: 40px; display: none; border-color: var(--border-background-primary); } @media (min-width: 640px) { .h2-heading__divider { margin-bottom: 32px; display: block; } } .h2-heading__description { color: var(--text-primary); margin-bottom: 24px; } @media (min-width: 640px) { .h2-heading__description { margin-bottom: 50px; } } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Heading/H3Heading/H3Heading.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .h3-heading__text { font-size: 20px; } @media (min-width: 640px) { .h3-heading__text { font-size: 24px; } } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Heading/H4Heading/H4Heading.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .h4-heading { display: flex; align-items: flex-start; font-size: 18px; line-height: 32px; font-weight: bold; color: var(--text-primary); } .h4-heading__icon { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 5px; margin-right: 16px; line-height: 32px; } .h4-heading__icon::before { content: ""; display: block; width: 6px; height: 10px; background-color: #008060; /* Green top part */ margin-bottom: 2px; /* Space between green and gray parts */ } .h4-heading__icon::after { content: ""; display: block; width: 6px; height: 10px; background-color: #a0a0a0; /* Gray bottom part */ } /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Button/Button.scss ***! \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .amplify-button { border-width: none; } .amplify-button--link:focus { --amplify-internal-button-border-color: none; --amplify-internal-button-border-width: 0; --amplify-internal-button-focus-box-shadow: none; } .amplify-button:focus { box-shadow: none; } /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Button/BackButton/BackButton.scss ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .back { display: none; } @media (min-width: 640px) { .back { opacity: 0; visibility: hidden; transition: 0.2s; width: 100%; max-width: 1250px; display: flex; justify-content: flex-end; position: fixed; bottom: 20px; left: 0; right: 0; margin: auto; z-index: 100; } } .back.visible { opacity: 1; visibility: visible; transition: 0.2s; } .back.unfollow { position: absolute; } .back-button { border-radius: 100%; border: 0; box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.15); width: 50px; height: 50px; background-color: #fff; color: var(--primary); } .back-button:hover { box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.15); color: var(--text-primary-hover); } .back-button:focus { box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.15); } .back-button__icon { font-size: 32px; } /*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Button/CustomButton/CustomButton.scss ***! \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .amplify-button--primary { background: linear-gradient( to right, var(--primary-hover) 50%, var(--primary) 50% ); background-size: 200% 100.5%; background-position: right bottom; transition: all 0.5s ease-out; } .amplify-button--primary:hover { background-position: left bottom; } .custom-button { padding: 16px; line-height: 20px; text-align: center; border-radius: 0; display: flex; align-items: center; justify-content: center; position: relative; width: 100%; letter-spacing: 0.06em; } @media (min-width: 640px) { .custom-button { width: 320px; } } .custom-button__icon--forward { position: absolute; right: 16px; } .custom-button__icon--back { position: absolute; left: 16px; } .custom-button__icon--close { position: absolute; right: 16px; width: 16px; height: 16px; } .custom-button--secondary { background: linear-gradient( to right, var(--gray-hover) 50%, var(--border-background-secondary) 50% ); background-size: 200% 100.5%; background-position: right bottom; transition: all 0.5s ease-out; color: var(--text-primary); border: 0; } .custom-button--secondary:hover { background-position: left bottom; } .custom-button--outlined { background: linear-gradient( to right, var(--primary) 50%, var(--text-on-dark) 50% ); background-size: 200% 100.5%; background-position: right bottom; transition: all 0.5s ease-out; color: var(--primary); border: 2px solid var(--primary); } .custom-button--outlined:hover { background-position: left bottom; color: var(--text-on-dark); } .custom-button--conversion { background: linear-gradient( to right, var(--conversion-hover) 50%, var(--conversion) 50% ); background-size: 200% 100.5%; background-position: right bottom; transition: all 0.5s ease-out; color: var(--text-on-dark); border: 0; } .custom-button--conversion:hover { background-position: left bottom; } .custom-button.amplify-button--disabled { background: #ddd; color: #fff; } /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Input/CustomInput/CustomInput.scss ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .custom-input { width: 100%; height: 40px; } @media (min-width: 640px) { .custom-input { width: 300px; } } .custom-input--no-spin::-webkit-inner-spin-button, .custom-input--no-spin::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .amplify-input--error { background-color: var(--background-alert); } .amplify-input:focus { border-color: none; box-shadow: none; } /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Selectfield/Selectfield.scss ***! \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .amplify-selectfield { width: 100%; } .amplify-select { border-color: var(--border-background-primary); border-radius: 0; } .amplify-select__icon { color: var(--primary); } .amplify-select:focus { border-color: none; box-shadow: none; } .amplify-select--error { background-color: var(--background-alert); border-color: var(--alert); } .amplify-select:invalid { color: var(--text-secondary); } /*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Container/Container.scss ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .create-container { max-width: var(--max-width); margin: 0 auto; } .create-container--s { max-width: 920px; } /*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Loader/CustomLoader.scss ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .custom-loader { display: flex; justify-content: center; align-items: center; } .custom-loader--overlay { position: absolute; width: 100%; height: 100%; z-index: 100; background-color: rgba(255, 255, 255, 0.9); gap: 14px; } @media (min-width: 640px) { .custom-loader--overlay { gap: 16px; } } .custom-loader__text { font-weight: bold; } /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Label/CustomLabel/CustomLabel.scss ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .custom-label { display: flex; align-items: center; } .custom-label__require { display: flex; align-items: center; justify-content: center; text-align: center; width: 40px; height: 16px; font-size: 12px; font-weight: bold; color: #fff; background-color: var(--alert); margin-left: 8px; } .custom-label__bold { font-weight: bold; } /*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./node_modules/@splidejs/splide/dist/css/splide.min.css ***! \***************************************************************************************************************************************************************************************************************************************************************************************************/ .splide__container { box-sizing: border-box; position: relative; } .splide__list { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; height: 100%; margin: 0 !important; padding: 0 !important; } .splide.is-initialized:not(.is-active) .splide__list { display: block; } .splide__pagination { align-items: center; display: flex; flex-wrap: wrap; justify-content: center; margin: 0; pointer-events: none; } .splide__pagination li { display: inline-block; line-height: 1; list-style-type: none; margin: 0; pointer-events: auto; } .splide:not(.is-overflow) .splide__pagination { display: none; } .splide__progress__bar { width: 0; } .splide { position: relative; visibility: hidden; } .splide.is-initialized, .splide.is-rendered { visibility: visible; } .splide__slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; box-sizing: border-box; flex-shrink: 0; list-style-type: none !important; margin: 0; position: relative; } .splide__slide img { vertical-align: bottom; } .splide__spinner { animation: splide-loading 1s linear infinite; border: 2px solid #999; border-left-color: transparent; border-radius: 50%; bottom: 0; contain: strict; display: inline-block; height: 20px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 20px; } .splide__sr { clip: rect(0 0 0 0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause { display: none; } .splide__toggle.is-active .splide__toggle__pause { display: inline; } .splide__track { overflow: hidden; position: relative; z-index: 0; } @keyframes splide-loading { 0% { transform: rotate(0); } to { transform: rotate(1turn); } } .splide__track--draggable { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .splide__track--fade > .splide__list > .splide__slide { margin: 0 !important; opacity: 0; z-index: 0; } .splide__track--fade > .splide__list > .splide__slide.is-active { opacity: 1; z-index: 1; } .splide--rtl { direction: rtl; } .splide__track--ttb > .splide__list { display: block; } .splide__arrow { align-items: center; background: #ccc; border: 0; border-radius: 50%; cursor: pointer; display: flex; height: 2em; justify-content: center; opacity: 0.7; padding: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 2em; z-index: 1; } .splide__arrow svg { fill: #000; height: 1.2em; width: 1.2em; } .splide__arrow:hover:not(:disabled) { opacity: 0.9; } .splide__arrow:disabled { opacity: 0.3; } .splide__arrow:focus-visible { outline: 3px solid #0bf; outline-offset: 3px; } .splide__arrow--prev { left: 1em; } .splide__arrow--prev svg { transform: scaleX(-1); } .splide__arrow--next { right: 1em; } .splide.is-focus-in .splide__arrow:focus { outline: 3px solid #0bf; outline-offset: 3px; } .splide__pagination { bottom: 0.5em; left: 0; padding: 0 1em; position: absolute; right: 0; z-index: 1; } .splide__pagination__page { background: #ccc; border: 0; border-radius: 50%; display: inline-block; height: 8px; margin: 3px; opacity: 0.7; padding: 0; position: relative; transition: transform 0.2s linear; width: 8px; } .splide__pagination__page.is-active { background: #fff; transform: scale(1.4); z-index: 1; } .splide__pagination__page:hover { cursor: pointer; opacity: 0.9; } .splide__pagination__page:focus-visible { outline: 3px solid #0bf; outline-offset: 3px; } .splide.is-focus-in .splide__pagination__page:focus { outline: 3px solid #0bf; outline-offset: 3px; } .splide__progress__bar { background: #ccc; height: 3px; } .splide__slide { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .splide__slide:focus { outline: 0; } @supports (outline-offset: -3px) { .splide__slide:focus-visible { outline: 3px solid #0bf; outline-offset: -3px; } } @media screen and (-ms-high-contrast: none) { .splide__slide:focus-visible { border: 3px solid #0bf; } } @supports (outline-offset: -3px) { .splide.is-focus-in .splide__slide:focus { outline: 3px solid #0bf; outline-offset: -3px; } } @media screen and (-ms-high-contrast: none) { .splide.is-focus-in .splide__slide:focus { border: 3px solid #0bf; } .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus { border-color: #0bf; } } .splide__toggle { cursor: pointer; } .splide__toggle:focus-visible { outline: 3px solid #0bf; outline-offset: 3px; } .splide.is-focus-in .splide__toggle:focus { outline: 3px solid #0bf; outline-offset: 3px; } .splide__track--nav > .splide__list > .splide__slide { border: 3px solid transparent; cursor: pointer; } .splide__track--nav > .splide__list > .splide__slide.is-active { border: 3px solid #000; } .splide__arrows--rtl .splide__arrow--prev { left: auto; right: 1em; } .splide__arrows--rtl .splide__arrow--prev svg { transform: scaleX(1); } .splide__arrows--rtl .splide__arrow--next { left: 1em; right: auto; } .splide__arrows--rtl .splide__arrow--next svg { transform: scaleX(-1); } .splide__arrows--ttb .splide__arrow { left: 50%; transform: translate(-50%); } .splide__arrows--ttb .splide__arrow--prev { top: 1em; } .splide__arrows--ttb .splide__arrow--prev svg { transform: rotate(-90deg); } .splide__arrows--ttb .splide__arrow--next { bottom: 1em; top: auto; } .splide__arrows--ttb .splide__arrow--next svg { transform: rotate(90deg); } .splide__pagination--ttb { bottom: 0; display: flex; flex-direction: column; left: auto; padding: 1em 0; right: 0.5em; top: 0; } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/CheckboxField/CheckboxField.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .amplify-checkbox__button::before { background-color: var(--checkbox-background-color); border-width: var(--amplify-border-widths-small); } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Pagination/Pagination.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .amplify-pagination__item { font-family: var(--font-barlow); width: 30px; height: 30px; color: var(--primary); font-size: 18px; margin: 0 4px; background: #fff; border-radius: 0; border: var(--primary) 1px solid; } @media (min-width: 640px) { .amplify-pagination__item { width: 36px; height: 36px; font-size: 20px; margin: 0 8px; } } .amplify-pagination__item:hover { color: #fff; background: var(--primary); } .amplify-pagination__item--link { width: auto; height: auto; padding: 0; background: none; border: 0; } @media (min-width: 640px) { .amplify-pagination__item--link { margin: 0 16px; } } .amplify-pagination__item--link:hover { color: var(--primary); background: none; } .amplify-pagination__item--link svg { width: auto; height: 32px; } @media (min-width: 640px) { .amplify-pagination__item--link svg { height: 62px; } } .amplify-pagination__item--ellipsis { margin-top: 18px; } .amplify-pagination__item--current { color: #fff; background: var(--primary); } .amplify-pagination__item--disabled { color: var(--disabled); } /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Badge/Badge.scss ***! \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .amplify-badge { border: 1px solid var(--text-tertiary); } /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Badge/CustomBadge/CustomBadge.scss ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .amplify-badge--primary { background: linear-gradient( to right, var(--border-background-secondary) 50%, var(--text-on-dark) 50% ); background-size: 200% 100.5%; background-position: right bottom; } .amplify-badge--primary:hover { background-position: left bottom; color: var(--text-secondary); } .custom-badge { padding: 8px 12px; line-height: 1rem; text-align: center; align-items: center; justify-content: space-between; position: relative; width: auto; white-space: pre-wrap; } .custom-badge__icon--cross { cursor: pointer; width: 10px; height: 10px; stroke-width: 4; margin: 0 2px 0 6px; } .custom-badge--outlined { background: linear-gradient( to right, var(--border-background-secondary) 50%, var(--text-on-dark) 50% ); background-size: 200% 100.5%; background-position: right bottom; color: var(--text-tertiary); border: 1px solid var(--text-tertiary); } .custom-badge--outlined:hover { background-position: left bottom; color: var(--text-secondary); } /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/Dialog/Dialog.scss ***! \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .dialog { overflow-y: auto; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 1; } .dialog--active { display: flex; } .dialog-wrapper { width: 100%; height: 100%; overflow-y: auto; background: #fff; padding: 24px 20px 40px; position: relative; min-width: 300px; } @media (min-width: 640px) { .dialog-wrapper { max-width: 852px; padding: 50px 100px; border-radius: 5px; height: 100%; max-height: 848px; } } .dialog-close { position: absolute; top: 10px; right: 10px; background: none; border: 0; font-size: 16px; cursor: pointer; } /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/StepIcon/StepIcon.scss ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .step-icon { display: flex; flex-direction: column; align-items: center; margin: 0; } .step-icon--green { color: #00846d; } .step-icon--orange { color: #f68213; } .step-icon__label { font-size: 14px; line-height: 14px; font-weight: bold; } .step-icon__label--english { font-style: normal; font-family: var(--font-barlow); font-weight: 600; } .step-icon__number { font-size: 40px; line-height: 40px; font-weight: 600; font-style: normal; font-family: var(--font-barlow); } /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/UnderlinedText/UnderlinedText.scss ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .underlined-text { font-weight: bold; text-decoration: underline; -webkit-text-decoration-color: #d6f1e6; text-decoration-color: #d6f1e6; text-decoration-thickness: 0.5em; text-underline-offset: -0.3em; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/FlowIcon/FlowIcon.scss ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .flow-icon { margin-right: 10px; min-width: 24px; min-height: 24px; text-align: center; } @media (min-width: 640px) { .flow-icon { margin-right: 16px; } } .flow-icon__number { margin: 0; color: #00846d; font-size: 14px; font-weight: bold; font-family: var(--font-barlow); border: 2px solid #00846d; border-radius: 50%; } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/TextAreaField/TextAreaField.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .amplify-textarea { padding: 15px 10px; border-color: var(--input-border-color); } @media (min-width: 640px) { .amplify-textarea { padding: 32px 22px; } } .amplify-textarea--error { background-color: var(--background-alert); } .amplify-textarea:focus { border-color: none; box-shadow: none; } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/atoms/ValidationErrorText/ValidationErrorText.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .validation-error-text { display: flex; color: var(--alert); font-size: 14px; font-weight: bold; text-align: start; align-items: center; } .validation-error-text__icon { width: 18px; height: 18px; margin-right: 6px; margin-bottom: 1px; flex-shrink: 0; } /*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/PasswordInput/PasswordInput.scss ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .password-input { display: flex; flex-direction: column; width: -webkit-fill-available; gap: 12px; } .password-input__main { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 8px; } @media (min-width: 640px) { .password-input__main { flex-direction: row; align-items: baseline; gap: 0; } } .password-input__label { font-size: 14px; white-space: nowrap; margin-right: 20px; } @media (min-width: 640px) { .password-input__label { font-size: 16px; } } .password-input__input-wrapper { display: flex; flex-direction: column; text-align: start; gap: 0; width: 100%; } @media (min-width: 640px) { .password-input__input-wrapper { width: 300px; } } .password-input__input-container { display: flex; width: 100%; border: 1px solid var(--border-background-primary); } .password-input__input-container--error { background-color: var(--background-alert); border: 1px solid var(--alert); } .password-input__input-container .amplify-input--error { border-color: var(--alert); } @media (min-width: 640px) { .password-input__input-container { width: 300px; } } .password-input__input { flex: 1 1; padding: 8px 16px; border: 0; text-align: start; color: var(--text-secondary); } .password-input__button { padding: 4px 8px; margin: auto 8px; font-size: 12px; background: var(--border-background-secondary); border: 0; cursor: pointer; color: var(--text-secondary); } .password-input__error { margin-top: 12px; } .password-input__subtext { color: var(--text-secondary); font-size: 12px; margin-top: 12px; } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/CustomBreadcrumbs/CustomBreadcrumbs.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .custom-breadcrumbs { background-color: #f5f5f5; font-size: 12px; align-items: center; padding: 14px 12px; } @media (min-width: 640px) { .custom-breadcrumbs { font-size: 14px; padding: 0; height: 48px; } } .custom-breadcrumbs .create-container { margin: auto 0; } @media (min-width: 640px) { .custom-breadcrumbs .create-container { margin: auto; } } .custom-breadcrumbs__inner { display: flex; text-align: start; } @media (min-width: 640px) { .custom-breadcrumbs__inner { width: 1100px; } } .custom-breadcrumbs .amplify-link:visited { color: var(--primary); } @media (min-width: 640px) { .custom-breadcrumbs .amplify-breadcrumbs__list { flex-wrap: nowrap; max-width: 100%; } } @media (min-width: 640px) { .custom-breadcrumbs .amplify-breadcrumbs__item { white-space: nowrap; } } .custom-breadcrumbs .amplify-breadcrumbs__item:last-child { overflow: hidden; } .custom-breadcrumbs .amplify-breadcrumbs__link--current { overflow: hidden; text-overflow: ellipsis; } /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/LabeldInput/LabeledInput.scss ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .labeled-input { display: flex; flex-direction: column; text-align: start; } @media (min-width: 640px) { .labeled-input { align-items: center; } } .labeled-input__main { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 8px; width: 100%; } @media (min-width: 640px) { .labeled-input__main { flex-direction: row; align-items: baseline; width: auto; } } .labeled-input__main--sp-row { flex-direction: row; align-items: baseline; } .labeled-input__prefix { font-size: 14px; white-space: nowrap; margin-right: 8px; } @media (min-width: 640px) { .labeled-input__prefix { font-size: 16px; margin-right: 16px; } } .labeled-input__suffix { font-size: 14px; white-space: nowrap; margin-left: 8px; } @media (min-width: 640px) { .labeled-input__suffix { font-size: 16px; margin-left: 16px; } } .labeled-input__input { display: flex; flex-direction: column; text-align: start; gap: 0; width: 100%; } .labeled-input__error { display: flex; color: var(--alert); font-size: 14px; font-weight: bold; text-align: start; align-items: center; margin-top: 16px; } .labeled-input__error-icon { width: 18px; height: 18px; margin-right: 6px; margin-bottom: 1px; flex-shrink: 0; } .labeled-input__subtext { color: var(--text-secondary); font-size: 12px; margin-top: 12px; } /*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/Stepper/Stepper.scss ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .stepper { display: flex; justify-content: center; } .stepper__container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: auto; position: relative; gap: 24px; } .stepper__content { gap: 48px; flex-direction: row; } @media (min-width: 640px) { .stepper__content { gap: 96px; } } .stepper .step { height: 25px; display: flex; flex-direction: column; align-items: center; flex: 1 1; } .stepper .step:first-child::after { content: ""; position: absolute; top: 17%; height: 2px; background-color: #ccc; z-index: -1; width: 100%; left: 0%; } @media (min-width: 640px) { .stepper .step:first-child::after { width: 100%; left: 0%; } } .stepper .step .circle { width: 25px; height: 25px; border-radius: 50%; background-color: #ccc; color: #fff; display: flex; align-items: center; place-content: center center; font-size: 20px; font-family: var(--font-barlow); } .stepper .step.active .circle { background-color: var(--primary); } .stepper-label { font-size: 14px; font-weight: bold; color: var(--primary); } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/SimpleContents/SimpleContents.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .simple-contents { padding: 0 20px; line-height: 26px; margin-bottom: 48px; } @media (min-width: 640px) { .simple-contents { padding: 0; margin-bottom: 64px; } } .simple-contents__title { margin-bottom: 40px; } @media (min-width: 640px) { .simple-contents__title { margin-bottom: 64px; } } .simple-contents__title p { font-size: 20px; line-height: 36px; font-weight: bold; margin: 0; } @media (min-width: 640px) { .simple-contents__title p { font-size: 32px; line-height: 48px; } } .simple-contents__section { font-size: 14px; } .simple-contents__section:not(:last-child) { margin-bottom: 32px; } .simple-contents__section-introduction { margin-bottom: 32px; } .simple-contents__section-title { font-size: 16px; line-height: 30px; font-weight: bold; margin: 0 0 12px; } @media (min-width: 640px) { .simple-contents__section-title { font-size: 18px; } } .simple-contents__section-item { margin-bottom: 12px; } .simple-contents__section-item--wide-margin { margin-bottom: 40px; } .simple-contents__section-lists { margin: 0; line-height: 26px; padding-left: 0; list-style-type: none; counter-reset: simplecontents-counter; } .simple-contents__section-lists--interpoint { margin: 0; line-height: 26px; padding-left: 0; } .simple-contents__section-list { padding-left: 30px; margin-bottom: 20px; position: relative; counter-increment: simplecontents-counter; } .simple-contents__section-list::before { position: absolute; content: counter(simplecontents-counter) "."; top: 0; left: 0; } .simple-contents__section-list-annotation { margin: 20px 0; } .simple-contents__section-list-item { margin-top: 8px; } .simple-contents__section-list--interpoint { margin: 20px 0 20px 20px; padding-left: 10px; position: relative; } .simple-contents__section-list--interpoint::before { position: absolute; top: 0; left: 0; } .simple-contents__the-above, .simple-contents__effective-date { font-size: 14px; text-align: right; } .simple-contents__effective-date { justify-content: end; margin-top: 8px; } /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/ReadingContents/ReadingContents.scss ***! \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .reading-contents { padding: 0 20px; } @media (min-width: 640px) { .reading-contents { padding: 0; } } .reading-contents__sp { display: block; } @media (min-width: 640px) { .reading-contents__sp { display: none; } } .reading-contents__pc { display: none; } @media (min-width: 640px) { .reading-contents__pc { display: block; } } .reading-contents__banner, .reading-contents__merit { margin-bottom: 80px; } .reading-contents__conditions, .reading-contents__flow, .reading-contents__precautions { margin-top: 80px; } @media (min-width: 640px) { .reading-contents__conditions, .reading-contents__flow, .reading-contents__precautions { margin-top: 160px; } } .reading-contents__precautions { margin-bottom: 40px; } @media (min-width: 640px) { .reading-contents__precautions { margin-bottom: 80px; } } .reading-contents__text { margin: 24px 0 0; font-size: 16px; line-height: 30px; } @media (min-width: 640px) { .reading-contents__text { margin: 56px 0 0; } } .reading-contents__text--bold { font-weight: bold; } .reading-contents__text--notice { margin: 8px 0 0; font-size: 12px; line-height: 20px; } .reading-contents__text--medium-notice { margin: 8px 0 0; font-size: 14px; line-height: 26px; } @media (min-width: 640px) { .reading-contents__text--medium-notice { font-size: 12px; line-height: 20px; } } .reading-contents__text--bottom { margin-bottom: 48px; } @media (min-width: 640px) { .reading-contents__text--bottom { margin-bottom: 56px; } } .reading-contents__text--gray { color: #707070; } .reading-contents__image-link { margin-top: 32px; } .reading-contents__image-flow { margin-top: 32px; } .reading-contents__title { font-size: 24px; line-height: 40px; font-weight: bold; margin: 0 0 40px; } @media (min-width: 640px) { .reading-contents__title { font-size: 32px; line-height: 48px; margin: 0 0 56px; } } .reading-contents__lists { list-style: none; margin: 0; padding: 0; } .reading-contents__lists-menu { display: flex; flex-direction: column; gap: 30px; margin-bottom: 40px; width: 100%; } @media (min-width: 640px) { .reading-contents__lists-menu { flex-direction: row; gap: 40px; margin-bottom: 80px; width: 816px; } } .reading-contents__lists-feature { display: flex; flex-wrap: wrap; gap: 14px; } @media (min-width: 640px) { .reading-contents__lists-feature { gap: 30px; } } .reading-contents__lists--green { background-color: var(--background); padding: 40px 20px; margin-top: 48px; } @media (min-width: 640px) { .reading-contents__lists--green { padding: 40px; } } .reading-contents__list { display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; padding: 40px 20px; border: 4px solid #f5f5f5; } @media (min-width: 640px) { .reading-contents__list { flex-direction: row; align-items: flex-start; padding: 40px; } } .reading-contents__list:last-child { margin-bottom: 0; } .reading-contents__list-guide { padding: 40px 24px; } @media (min-width: 640px) { .reading-contents__list-guide { padding: 60px; } } .reading-contents__list-step-number { margin-bottom: 20px; display: flex; justify-content: center; } @media (min-width: 640px) { .reading-contents__list-step-number { margin-right: 32px; margin-bottom: 0; justify-content: flex-start; } } .reading-contents__list-step-number--bg { min-height: 80px; min-width: 80px; background-color: #fff; border-radius: 50%; align-items: center; justify-content: center; } .reading-contents__list-description { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } @media (min-width: 640px) { .reading-contents__list-description { align-items: flex-start; } } .reading-contents__list-description--green { justify-content: center; align-items: flex-start; } .reading-contents__list-title { font-size: 20px; line-height: 36px; font-weight: bold; margin: 0; } .reading-contents__list-title--normal { font-weight: normal; } .reading-contents__list-title--arrangement { margin: 0 auto; text-align: center; } @media (min-width: 640px) { .reading-contents__list-title--arrangement { text-align: left; margin: -7px 0 0; } } .reading-contents__list-title--small { font-size: 18px; line-height: 32px; } .reading-contents__list-text { margin: 20px 0 0; line-height: 30px; } @media (min-width: 640px) { .reading-contents__list-text { margin: 12px 0 0; } } .reading-contents__list-text--notice { margin: 8px 0 0; font-size: 12px; line-height: 20px; } .reading-contents__list-text--medium-notice { margin: 8px 0 0; font-size: 14px; line-height: 26px; } @media (min-width: 640px) { .reading-contents__list-text--medium-notice { font-size: 12px; line-height: 20px; } } .reading-contents__list-text--pattern { margin: 8px 0 0; } @media (min-width: 640px) { .reading-contents__list-text--pattern { margin: 12px 0 0; } } .reading-contents__list-text--large { font-size: 20px; margin: auto; } @media (min-width: 640px) { .reading-contents__list-text--large { font-size: 24px; } } .reading-contents__list-flow { margin-top: 40px; } .reading-contents__list-flow-number { display: flex; align-items: flex-start; } @media (min-width: 640px) { .reading-contents__list-flow-number { align-items: center; } } .reading-contents__list-menu { list-style: none; position: relative; } @media (min-width: 640px) { .reading-contents__list-menu { min-width: 245px; } } .reading-contents__list-menu a { display: flex; align-items: center; padding: 24px 16px; border: 1px solid #ddd; gap: 16px; color: var(--text-primary); } @media (min-width: 640px) { .reading-contents__list-menu a { padding: 28px 24px; gap: 20px; } } .reading-contents__list-menu a:visited { color: transparent; } .reading-contents__list-menu a:hover { border-color: var(--primary); color: var(--primary); } .reading-contents__list-menu--arrow { position: absolute; bottom: 1px; right: 1px; } .reading-contents__list-feature { list-style: none; } .reading-contents__list-icon-title { margin: -6px 0 0; } @media (min-width: 640px) { .reading-contents__list-icon-title { margin: 0; } } .reading-contents__list--green { padding: 0; border: 0; align-items: center; } .reading-contents__list--flow { position: relative; } .reading-contents__list--flow::after { position: absolute; content: ""; bottom: -44px; left: 50%; transform: translateX(-50%); height: 40px; width: 4px; background-color: #f5f5f5; } .reading-contents__list--condition { position: relative; font-weight: bold; padding-left: 20px; margin-bottom: 28px; align-items: flex-start; } .reading-contents__list--condition p { margin: 0; line-height: 30px; } .reading-contents__list--condition p span { display: inline; font-weight: normal; } .reading-contents__list--condition::before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background-color: #00846d; top: 11px; left: 0; } .reading-contents__warning { flex-direction: column; align-items: flex-start; } .reading-contents__warning-title { display: flex; align-items: flex-start; } @media (min-width: 640px) { .reading-contents__warning-title { align-items: center; } } .reading-contents__warning-icon { color: var(--alert); min-width: 28px; min-height: 24px; margin-right: 8px; } .reading-contents__faq + .reading-contents__faq { margin-top: 64px; } .reading-contents__faq-title { display: flex; align-items: center; } .reading-contents__faq-icon { color: var(--primary); margin-right: 8px; margin-left: -4px; min-width: 40px; min-height: 40px; } .reading-contents__link { display: inline; text-decoration: underline; font-weight: bold; } .reading-contents__link svg { margin: 0 2px -2px; } .reading-contents__link--right { width: 100%; display: flex; justify-content: flex-end; } .reading-contents__horizontal-line { width: 100%; border: 0; border-top: 1px solid #ddd; margin: 40px 0; } .reading-contents__completion { margin-top: 56px; } .reading-contents__completion-inner { text-align: center; } .reading-contents__completion-title { font-weight: bold; font-size: 20px; margin: 0 0 32px; line-height: 36px; } .reading-contents__completion-title--green { color: #00846d; font-size: 24px; margin: 0 0 12px; line-height: 40px; } .reading-contents__completion-text { margin: 32px 0 0; } .reading-contents__completion-image { margin: 0 auto; } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/RankingTabs/RankingTabs.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .ranking-tabs { align-items: center; justify-content: center; text-align: center; height: 50px; border-bottom: var(--border-background-primary) solid 1px; } @media (min-width: 640px) { .ranking-tabs { height: 72px; margin-bottom: 80px; } } .ranking-tabs .create-container { margin: auto 0; } @media (min-width: 640px) { .ranking-tabs .create-container { margin: auto; } } .ranking-tabs__icon--down { color: var(--primary) !important; position: absolute; bottom: 1px; right: 65px; } @media (min-width: 640px) { .ranking-tabs__icon--down { bottom: 2px; right: 200px; } } .amplify-tabs { all: unset; } .amplify-tabs__list { gap: 3px; } .amplify-tabs__item { color: var(--primary); background-color: var(--border-background-secondary); border-radius: 5px 5px 0 0; border: var(--border-background-primary) solid 1px; } @media (min-width: 640px) { .amplify-tabs__item { width: 420px; padding-top: 23px; padding-bottom: 23px; } } .amplify-tabs__item:hover { color: var(--primary-hover); } .amplify-tabs__item:active { background-color: var(--text-on-dark); border: var(--border-background-primary) solid 1px; } .amplify-tabs__item[aria-selected="true"] { color: var(--text-primary); background-color: var(--text-on-dark); border-bottom: 1px solid transparent; } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/Collapse/Collapse.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .smbc-collapse { border: 1px solid var(--border-background-primary); padding: 24px; width: 100%; } @media (min-width: 640px) { .smbc-collapse { padding: 32px 40px; width: var(--max-width); } } .smbc-collapse__title { display: flex; align-items: center; justify-content: space-between; text-align: left; width: 100%; font-size: 16px; font-weight: bold; background-color: var(--checkbox-background-color); border: 0; padding: 0; color: var(--text-primary); } .smbc-collapse__icon { color: var(--primary); background-color: var(--background); width: 25px; height: 25px; padding: 4px; margin-left: 20px; border-radius: 50%; flex-shrink: 0; } @media (min-width: 640px) { .smbc-collapse__icon { width: 32px; height: 32px; } } .smbc-collapse__content { overflow: hidden; transition: max-height 0.4s ease-out; } .smbc-collapse__text { font-size: 14px; line-height: 26px; } .smbc-collapse__text--alert { color: var(--alert); } .smbc-collapse__lists { font-size: 14px; list-style: none; } .smbc-collapse__list { display: flex; align-items: flex-start; } .smbc-collapse a { color: var(--primary); text-decoration: underline; font-weight: bold; } .smbc-collapse a:hover { color: var(--text-primary-hover); } .smbc-collapse__link { word-break: break-all; } .smbc-collapse__link svg { margin: 0 0 -2px 8px; } /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/JumpLinks/JumpLinks.scss ***! \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .jump-links { display: flex; flex-flow: column wrap; font-size: 14px; white-space: nowrap; } @media (min-width: 640px) { .jump-links { flex-direction: row; font-size: 16px; } } .jump-links__link { font-weight: bold; line-height: 2rem; border-bottom: solid 1px var(--border-background-secondary); display: flex; align-items: center; color: var(--text-primary); } .jump-links__link:hover { color: var(--primary); border-bottom-color: var(--primary); } .jump-links__link__icon { color: var(--primary); margin: 16px 12px 16px 0; } .jump-links .amplify-link:visited { color: var(--text-primary); } .jump-links .amplify-link:visited:hover { color: var(--primary); } /*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/InternalLinks/InternalLinks.scss ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .internal-links { align-items: center; } .internal-links__link { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; font-weight: bold; color: var(--primary); } @media (min-width: 640px) { .internal-links__link { gap: 14px; } } .internal-links__link:hover { color: var(--text-primary-hover); } .internal-links .amplify-link:visited { color: var(--primary); } .internal-links .amplify-link:visited:hover { color: var(--text-primary-hover); } /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/KeyVisual/KeyVisual.scss ***! \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .key-visual { text-align: center; margin-bottom: 32px; } @media (min-width: 640px) { .key-visual { margin-bottom: 80px; } } .key-visual__image { margin: 0 auto; width: 100%; min-height: 100px; object-fit: cover; } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/LeadText/LeadText.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .lead-text { color: var(--text-primary); } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/ProductList/ProductList.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .product-list__grid { display: grid; grid-gap: 1rem; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); } @media (min-width: 640px) { .product-list__grid { grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); } } .product-list__card { cursor: pointer; background-color: var(--text-on-dark); border: 1px solid var(--border-background-primary); padding: 0; display: flex; flex-direction: column; gap: 0; height: 264px; } .product-list__image { width: 100%; } .product-list__content { padding: 1rem; position: relative; } .product-list__title { color: var(--text-primary); font-weight: bold; font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .product-list__amount { font-family: Barlow, sans-serif; font-weight: bold; color: var(--primary); font-size: 18px; } @media (min-width: 640px) { .product-list__amount { font-size: 24px; } } .product-list__currency { font-weight: bold; color: var(--primary); font-size: 12px; } @media (min-width: 640px) { .product-list__currency { font-size: 14px; } } .product-list__location { color: var(--text-primary); font-size: 12px; padding-top: 4px; } /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/RecommendFeature/RecommendFeature.scss ***! \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .recommend-feature__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 3rem; gap: 3rem; } @media (min-width: 640px) { .recommend-feature__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } } .recommend-feature__flex { display: flex; flex-direction: column; gap: 12px; } @media (min-width: 640px) { .recommend-feature__flex { gap: 16px; } } .recommend-feature__image { width: 100%; height: auto; } .recommend-feature__text { color: var(--text-primary); font-weight: bold; } .recommend-feature__link:hover { color: var(--primary); } .recommend-feature__link-wrapper { justify-content: end; margin-top: 24px; } @media (min-width: 640px) { .recommend-feature__link-wrapper { margin-top: 60px; } } .recommend-feature__link-wrapper .text-link__body--custom-plus-link { display: flex; flex-direction: row-reverse; } .recommend-feature__link-wrapper .text-link__body--custom-minus-link { display: flex; flex-direction: row-reverse; } /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/CarouselBannerList/CarouselBannerList.scss ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .banner-content__loader { align-items: center; justify-content: center; height: 90px; } @media (min-width: 640px) { .banner-content__loader { height: 130px; } } @media (min-width: 640px) { .banner-content__img { width: 353px; } } /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/NoticeList/NoticeList.scss ***! \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; .notice-list { flex-direction: column; gap: 17px; text-align: left; } @media (min-width: 640px) { .notice-list { flex-direction: initial; gap: 25px; margin-top: 0; } } .notice-list:nth-of-type(n + 2) { margin-top: 30px; } @media (min-width: 640px) { .notice-list:nth-of-type(n + 2) { margin-top: 32px; } } .notice-list__date { font-size: 14px; } @media (min-width: 640px) { .notice-list__date { width: 125px; } } .notice-list__title { width: 100%; color: var(--primary); font-weight: bold; } .notice-list__title__icon { position: absolute; right: 0; } .important-info { overflow-y: auto; max-height: 246px; } @media (min-width: 640px) { .important-info { width: 100%; max-height: 136px; } } .important-info .notice-list__title { position: relative; white-space: nowrap; /* 横幅のMAXに達しても改行しない */ overflow: hidden; /* ハミ出した部分を隠す */ text-overflow: ellipsis; width: initial; padding-right: 35px; } @media (min-width: 640px) { .important-info .notice-list__title { width: 650px; } } .important-info .notice-list__title__icon { top: 3px; } .with-scrollbar .notice-list { margin-right: 5px; } @media (min-width: 640px) { .with-scrollbar .notice-list { margin-right: 0; } } .without-scrollbar { margin-right: 20px; } @media (min-width: 640px) { .without-scrollbar { margin-right: 40px; } } @media (min-width: 640px) { .info { width: 100%; } } .info .notice-list:nth-of-type(n + 2) { padding-top: 30px; border-top: var(--border-background-primary) solid 1px; } .info .notice-list__link { position: relative; display: flex; flex-direction: column; gap: 16px; padding-right: 35px; } @media (min-width: 640px) { .info .notice-list__link { flex-direction: initial; gap: 30px; width: 100%; } } .info .notice-list__title { overflow: hidden; /* ハミ出した部分を隠す */ text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: initial; } @media (min-width: 640px) { .info .notice-list__title { white-space: nowrap; /* 横幅のMAXに達しても改行しない */ display: initial; width: 878px; } } .info .notice-list__title__icon { top: 40%; } @media (min-width: 640px) { .info .notice-list__title__icon { top: 4px; } } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/RankingList/RankingList.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .ranking__lest { flex-wrap: wrap; justify-content: space-between; gap: 15px; } @media (min-width: 640px) { .ranking__lest { justify-content: flex-start; gap: 18px; } } .ranking__item { width: calc(50% - 8px); border: var(--border-background-primary) solid 1px; cursor: pointer; } @media (min-width: 640px) { .ranking__item { width: 204px; } } .ranking__item--images { border-bottom: var(--border-background-primary) solid 1px; } .ranking__item--content { padding: 8px 16px 16px; } .ranking__item--rank { font-family: var(--font-barlow); font-size: 12px; font-weight: bold; line-height: 22px; } .ranking__item--rank span { color: var(--primary); font-size: 22px; margin-right: 4px; font-weight: 600; } @media (min-width: 640px) { .ranking__item--rank { line-height: 30px; font-size: 14px; } .ranking__item--rank span { font-size: 30px; } } .ranking__item--name { font-size: 14px; font-weight: bold; display: -webkit-box; white-space: normal; overflow: hidden; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; } .ranking__item--amount { font-family: var(--font-barlow); color: var(--primary); font-size: 14px; font-weight: bold; } .ranking__item--amount span { font-size: 18px; font-weight: 600; } @media (min-width: 640px) { .ranking__item--amount { font-size: 18px; } .ranking__item--amount span { font-size: 23px; } } .ranking__item--address { font-size: 12px; margin-top: 6px; } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/ReturnGiftList/ReturnGiftList.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .return-gift__list { flex-wrap: wrap; justify-content: space-between; gap: 15px; } @media (min-width: 640px) { .return-gift__list { justify-content: flex-start; gap: 18px; } } .return-gift__item { width: calc(50% - 8px); border: var(--border-background-primary) solid 1px; cursor: pointer; } @media (min-width: 640px) { .return-gift__item { width: 177.75px; } } .return-gift__item--images { width: initial; height: initial; border-bottom: var(--border-background-primary) solid 1px; } .return-gift__item--content { padding: 15px 12px; } .return-gift__item--name { font-size: 14px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .return-gift__item--amount { font-family: var(--font-barlow); color: var(--primary); font-size: 12px; font-weight: bold; } .return-gift__item--amount span { font-size: 22px; font-weight: 600; } .return-gift__item--address { font-size: 12px; margin-top: 6px; } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/TopStepCard/TopStepCard.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .step-card { position: relative; height: 100%; background: #fff; padding: 20px; border-radius: 10px; } @media (min-width: 640px) { .step-card { width: 271px; padding: 16px 14px; border: var(--border-background-primary) solid 1px; border-radius: 5px; } } .step-card__loader { align-items: center; justify-content: center; height: 412px; } @media (min-width: 640px) { .step-card__loader { height: 290px; } } .step-card__icon { position: absolute; top: -12px; right: -12px; width: 60px; height: auto; } @media (min-width: 640px) { .step-card__icon { width: 52px; top: -8px; right: -9px; } } .step-card__item { align-items: center; gap: 10px; } .step-card__item--icon { width: 49px; height: 49px; align-items: center; justify-content: center; } .step-card__item--step { font-size: 16px; font-weight: bold; color: var(--primary); } @media (min-width: 640px) { .step-card__item--step { font-size: 14px; } } .step-card__item--title { position: relative; font-size: 16px; font-weight: bold; } @media (min-width: 640px) { .step-card__item--title { font-size: 18px; } } .step-card__item--title span { padding-bottom: 3px; background: linear-gradient(transparent 0%, var(--secondary) 60%); } .step-card__select { flex-direction: column; gap: 0; } @media (min-width: 640px) { .step-card__select { flex-direction: initial; justify-content: space-between; gap: 12px; } } .step-card__annualIncome { align-items: center; margin-top: 20px; } @media (min-width: 640px) { .step-card__annualIncome { flex-direction: column; align-items: flex-start; gap: 10px; } } .step-card__annualIncome--label { text-align: center; min-width: 86px; font-size: 14px; font-weight: bold; } @media (min-width: 640px) { .step-card__annualIncome--label { min-width: initial; text-align: left; } } .step-card__result { padding: 14px 16px; margin-top: 16px; background: var(--border-background-secondary); } @media (min-width: 640px) { .step-card__result { padding: 0; margin-top: 14px; background: none; } } .step-card__result--display { height: 60px; display: flex; justify-content: flex-end; align-items: baseline; font-family: var(--font-barlow); font-size: 16px; font-weight: bold; padding: 16px 20px; background: #fff; border: var(--border-background-primary) solid 1px; line-height: 1em; } @media (min-width: 640px) { .step-card__result--display { height: 50px; font-size: 16px; margin-bottom: 12px; padding: 6px 20px; } } .step-card__result--display-center { font-size: 24px; justify-content: center; } @media (min-width: 640px) { .step-card__result--display-center { font-size: 22px; } } .step-card__result--amount-text { margin-right: 4px; font-size: 32px; color: var(--primary); font-weight: 600; } @media (min-width: 640px) { .step-card__result--amount-text { font-size: 35px; line-height: 35px; } } .step-card__result--default-text { font-weight: 100; letter-spacing: -2px; margin-right: 8px; font-size: 32px; color: var(--primary); } @media (min-width: 640px) { .step-card__result--default-text { font-size: 28px; line-height: 35px; } } .step-card__login-btn { margin-top: 20px; } @media (min-width: 640px) { .step-card__login-btn { width: 100%; font-size: 13px; padding: 9px 16px; margin-top: 12px; } } @media (min-width: 640px) { .step-card__mypage-btn { width: 100%; } } .step-card__illustration { margin-top: 16px; } @media (min-width: 640px) { .step-card__illustration .sp { display: none; } } .step-card__illustration .pc { display: none; } @media (min-width: 640px) { .step-card__illustration .pc { display: block; } } .step-card__note { align-items: center; gap: 12px; padding-left: 10px; margin-top: 16px; } @media (min-width: 640px) { .step-card__note { gap: 15px; padding-left: 12px; margin-top: 8px; } } .step-card__note--images { max-width: 24px; height: auto; } .step-card__note--text { font-size: 14px; font-weight: bold; color: var(--primary); } @media (min-width: 640px) { .step-card__note--text { font-size: 12px; } } .slide-img { display: block; width: 100%; height: 100%; object-fit: cover; } .fs-14 { font-size: 14px; } .text-center { text-align: center; } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/SearchInput/SearchInput.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .search-input { position: relative; align-items: center; } .search-input__input { position: relative; font-size: 16px; padding: 10px 46px 10px 17px; background: var(--border-background-secondary); border: initial; border-radius: 19px; } @media (min-width: 640px) { .search-input__input { width: 460px; max-width: 460px; color: #818181; padding: 10px 56px 10px 20px; border-radius: 23px; } } .search-input__icon { position: absolute; top: 12px; right: 18px; font-size: 20px; color: var(--primary); } @media (min-width: 640px) { .search-input__icon { top: 10px; right: 23px; font-size: 24px; } } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/ListMenu/ListMenu.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .list-menu { display: flex; flex-direction: column; width: 100%; } @media (min-width: 640px) { .list-menu { max-width: 500px; } } .list-menu__parent-wrapper { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border-background-primary); } .list-menu__parent-wrapper:last-child { border-bottom: 1px solid var(--border-background-primary); } .list-menu .amplify-grid { border-top: 1px solid var(--border-background-primary); } .list-menu__parent { font-size: 14px; padding: 24px 20px; } @media (min-width: 640px) { .list-menu__parent { font-size: 16px; } } .list-menu__child { padding: 12px 20px; font-size: 14px; } .checkbox-field { color: var(--primary); width: 100%; justify-content: space-between; } .checkbox-field .list-menu__parent { padding: 16px 12px; } .checkbox-field .list-menu__child { padding: 9px 32px; } .checkbox-field .amplify-grid { padding: 9px 0; background-color: var(--border-background-secondary); } .checkbox-field--plus { color: var(--primary); font-size: 16px; gap: 8px; align-items: center; } .checkbox-field--minus { color: var(--primary); font-size: 16px; gap: 8px; background-color: var(--border-background-secondary); align-items: center; } .checkbox-field__checkbox { gap: 8px; } .checkbox-field__label .amplify-checkbox__label { color: var(--primary); font-weight: bold; font-size: 20px; } @media (min-width: 640px) { .checkbox-field__label .amplify-checkbox__label { font-size: 14px; } } .checkbox-field__label--child .amplify-checkbox__label { color: var(--primary); font-weight: bold; font-size: 16px; } @media (min-width: 640px) { .checkbox-field__label--child .amplify-checkbox__label { font-size: 12px; } } .checkbox-field__sub-label { color: var(--text-tertiary); font-size: 16px; line-height: 32px; } @media (min-width: 640px) { .checkbox-field__sub-label { font-size: 12px; line-height: 24px; } } .checkbox-field__icon { width: 24px; height: 24px; padding: 2px; border-radius: 12px; } .checkbox-field__icon--plus { background-color: var(--background); } .checkbox-field__icon--minus { background-color: var(--text-on-dark); } .plus-minus .custom-link--custom-minus-link { background-color: var(--border-background-secondary); } .plus-minus .custom-link--custom-minus-link svg { background-color: var(--text-on-dark); } .plus-minus .amplify-flex.list-menu__child-wrapper { border-bottom: 1px solid var(--border-background-primary); } .plus-minus .amplify-flex.list-menu__child-wrapper:last-child { border-bottom: 0; } .plus-minus .list-menu__child { padding-left: 40px; background-color: var(--border-background-secondary); } /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/ListMenuItem/ListMenuItem.scss ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .list-menu { display: flex; flex-direction: column; width: 100%; } @media (min-width: 640px) { .list-menu { max-width: 500px; } } .list-menu__parent-wrapper { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border-background-primary); } .list-menu__parent-wrapper:last-child { border-bottom: 1px solid var(--border-background-primary); } .list-menu .amplify-grid { border-top: 1px solid var(--border-background-primary); } .list-menu__parent { font-size: 14px; padding: 24px 20px; } @media (min-width: 640px) { .list-menu__parent { font-size: 16px; } } .list-menu__child { padding: 12px 20px; font-size: 14px; } .checkbox-field { color: var(--primary); width: 100%; justify-content: space-between; } .checkbox-field .list-menu__parent { padding: 16px 12px; } .checkbox-field .list-menu__child { padding: 9px 32px; } .checkbox-field .amplify-grid { padding: 9px 0; background-color: var(--border-background-secondary); } .checkbox-field--plus { color: var(--primary); font-size: 16px; gap: 8px; } .checkbox-field--minus { color: var(--primary); font-size: 16px; gap: 8px; background-color: var(--border-background-secondary); } .checkbox-field__checkbox { gap: 8px; } .checkbox-field__label .amplify-checkbox__label { color: var(--primary); font-weight: bold; font-size: 20px; } @media (min-width: 640px) { .checkbox-field__label .amplify-checkbox__label { font-size: 14px; } } .checkbox-field__label--child .amplify-checkbox__label { color: var(--primary); font-weight: bold; font-size: 16px; } @media (min-width: 640px) { .checkbox-field__label--child .amplify-checkbox__label { font-size: 12px; } } .checkbox-field__sub-label { color: var(--text-tertiary); font-size: 16px; line-height: 32px; } @media (min-width: 640px) { .checkbox-field__sub-label { font-size: 12px; line-height: 24px; } } .checkbox-field__icon { width: 24px; height: 24px; padding: 2px; border-radius: 12px; } .checkbox-field__icon--plus { background-color: var(--background); } .checkbox-field__icon--minus { background-color: var(--text-on-dark); } .plus-minus .custom-link--custom-minus-link { background-color: var(--border-background-secondary); } .plus-minus .custom-link--custom-minus-link svg { background-color: var(--text-on-dark); } .plus-minus .amplify-flex.list-menu__child-wrapper { border-bottom: 1px solid var(--border-background-primary); } .plus-minus .amplify-flex.list-menu__child-wrapper:last-child { border-bottom: 0; } .plus-minus .list-menu__child { padding-left: 40px; background-color: var(--border-background-secondary); } /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/CustomSelect/CustomSelect.scss ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .custom-select { display: flex; flex-direction: column; text-align: start; align-items: center; } @media (min-width: 640px) { .custom-select { align-items: center; } } .custom-select__main { display: flex; flex-direction: column; justify-content: center; gap: 8px; width: 100%; } @media (min-width: 640px) { .custom-select__main { flex-direction: row; align-items: baseline; width: auto; } } .custom-select__main--sp-row { flex-direction: row; align-items: baseline; } .custom-select__prefix { font-size: 14px; } @media (min-width: 640px) { .custom-select__prefix { height: 40px; font-size: 16px; } } .custom-select__suffix { font-size: 14px; } @media (min-width: 640px) { .custom-select__suffix { font-size: 16px; } } .custom-select__input { display: flex; flex-direction: column; text-align: start; gap: 0; width: auto; } .custom-select__error { display: flex; color: var(--alert); font-size: 14px; font-weight: bold; text-align: start; align-items: center; margin-top: 12px; } .custom-select__error-icon { width: 18px; height: 18px; margin-right: 6px; margin-bottom: 1px; } .custom-select__subtext { color: var(--text-secondary); font-size: 12px; margin-top: 10px; } .custom-select .amplify-select { color: var(--text-primary); } .custom-select .custom-select--placeholder .amplify-select { color: var(--text-secondary); } /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/app/mypage/card_info/components/SecurityCodeSubtext/SecurityCodeSubtext.scss ***! \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .security-code-subtext { font-size: 12px; line-height: 20px; color: var(--text-secondary); } .security-code-subtext__link { text-decoration: underline; padding: 4px; font-weight: bold; } /*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/InputCreditCardForm/InputCreditCardForm.scss ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .credit-card-form { width: calc(100% - 25px); padding: 0 25px 40px; margin: 20px 0 0 25px; background: var(--border-background-secondary); } .credit-card-form__container { display: grid; grid-gap: 10px; gap: 10px; } .credit-card-form__card-icons { display: flex; gap: 10px; } @media (min-width: 640px) { .credit-card-form__card-icons { gap: 20px; } } .credit-card-form__card-icons img { gap: 32px; margin: auto 0; } .credit-card-form__input-wrapper { display: flex; flex-direction: column; gap: 14px; margin-top: 36px; } .credit-card-form__input-wrapper .custom-input-field { align-items: flex-start; } @media (min-width: 640px) { .credit-card-form__input-wrapper { gap: 24px; } } .credit-card-form__input-wrapper .custom-select { gap: 0; } .credit-card-form__input-wrapper select { height: 40px; } @media (min-width: 640px) { .credit-card-form__input-wrapper select { width: 128px; } } .credit-card-form__input { display: flex; direction: row; } @media (min-width: 640px) { .credit-card-form__input { align-items: baseline; } } .credit-card-form__input--large { align-items: start; } .credit-card-form__input--large .custom-input-field__subtext { width: calc(100% - 25px); } .credit-card-form__input--large .custom-input { background: #fff; width: calc(100% - 25px); } @media (min-width: 640px) { .credit-card-form__input--large .custom-input { width: 580px; } } .credit-card-form__input--small { align-items: start; } .credit-card-form__input--small .custom-input-field__subtext { width: calc(100% - 25px); } .credit-card-form__input--small .custom-input { background: #fff; width: calc(100% - 25px); } @media (min-width: 640px) { .credit-card-form__input--small .custom-input { width: 130px; } } .credit-card-form__expiration-input { align-items: flex-start; flex-direction: row; gap: 0; width: calc(100% - 25px); color: var(--text-primary); } @media (min-width: 640px) { .credit-card-form__expiration-input { gap: 24px; } } .credit-card-form__expiration-input p { font-size: 14px; margin: 18px 12px 12px; } @media (min-width: 640px) { .credit-card-form__expiration-input p { margin-left: 16px; } } .credit-card-form-bottom { flex-direction: column; text-align: center; gap: 0; margin-top: 50px; } @media (min-width: 640px) { .credit-card-form-bottom { margin-top: 64px; } } .credit-card-form-bottom p { margin: 0; } .credit-card-form-bottom__link { font-weight: bold; } .credit-card-form-bottom__link svg { width: 14px; height: 14px; margin-left: 2px; margin-right: 2px; margin-bottom: -1px; } .credit-card-form-bottom__checkbox { padding: 24px 16px; background-color: var(--background); margin-top: 32px; margin-bottom: 40px; } @media (min-width: 640px) { .credit-card-form-bottom__checkbox { box-sizing: border-box; padding: 40px 100px; margin-top: 32px; margin-bottom: 50px; } } .credit-card-form-bottom__button { flex-direction: column-reverse; justify-content: center; } @media (min-width: 640px) { .credit-card-form-bottom__button { flex-direction: row; } } .credit-card-form__subtext { font-size: 12px; margin-top: 12px; line-height: 20px; color: var(--text-secondary); } /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/DonationPossibleAmount/DonationPossibleAmount.scss ***! \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .remaining-amount { margin-top: 43px; padding: 43px 20px; background: var(--border-background-secondary); } @media (min-width: 640px) { .remaining-amount { margin-top: 80px; padding: 80px 20px; } } .remaining-amount__content { flex-direction: column; justify-content: center; align-items: center; gap: 20px; } @media (min-width: 640px) { .remaining-amount__content { flex-direction: initial; align-items: flex-end; gap: 14px; } } .remaining-amount__txt { text-align: center; font-size: 16px; font-weight: bold; } @media (min-width: 640px) { .remaining-amount__txt { font-size: 18px; } } .remaining-amount__annotation { text-align: center; font-size: 16px; font-weight: bold; margin-top: 20px; } @media (min-width: 640px) { .remaining-amount__annotation { font-size: 18px; margin-top: 14px; } } .remaining-amount__total { font-size: 16px; font-weight: 600; } @media (min-width: 640px) { .remaining-amount__total { font-size: 18px; margin-bottom: -6px; } } .remaining-amount__total span { font-size: 35px; } @media (min-width: 640px) { .remaining-amount__total span { font-size: 30px; } } .remaining-amount .custom-button { margin-top: 40px; } @media (min-width: 640px) { .remaining-amount .custom-button { margin: 50px auto 0; } } .remaining-amount .custom-button-no-data { margin-top: 0; } @media (min-width: 640px) { .remaining-amount .custom-button-no-data { margin: 0 auto; } } .no-data { background-color: transparent; } /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/NotificationBar/NotificationBar.scss ***! \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .notification { padding: 20px; } @media (min-width: 640px) { .notification { padding: 32px 40px; } } .notification__txt + .notification__txt { margin-top: 20px; } @media (min-width: 640px) { .notification__txt + .notification__txt { margin-top: 24px; } } .notification.error { background: var(--alert-background); } .notification.error .notification__txt { display: flex; align-items: flex-start; gap: 10px; color: var(--alert); line-height: 1.8; } .notification.error .notification__icon { min-width: 20px; height: auto; margin-top: 4px; } /*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/TotalDonationAmount/TotalDonationAmount.scss ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @media (min-width: 640px) { .total { justify-content: flex-end; margin-top: 32px; padding: 20px 26px; background: var(--border-background-secondary); } } .total__content { justify-content: space-between; align-items: baseline; width: 100%; padding: 20px 17px; border: var(--border-background-primary) solid 2px; } @media (min-width: 640px) { .total__content { width: 397px; padding: 10px 25px 6px; background: #fff; border: 0; } } .total__item { font-size: 14px; font-weight: bold; } .total__amount { color: var(--primary); font-size: 16px; font-weight: bold; font-family: var(--font-barlow); } .total__amount span { font-size: 35px; margin-right: 4px; } /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/CartProductList/CartProductList.scss ***! \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; .cart-cell { align-items: center; gap: 20px; } @media (min-width: 640px) { .cart-cell { flex-direction: column; align-items: flex-start; gap: 0; } } .cart-cell__table { flex-direction: column; gap: 0; padding: 32px 0 30px; border-top: var(--border-background-primary) solid 2px; } @media (min-width: 640px) { .cart-cell__table { flex-direction: initial; padding: 0; border-top: 0; border-bottom: var(--border-background-primary) solid 1px; } } .cart-cell + .cart-cell { margin-top: 10px; } @media (min-width: 640px) { .cart-cell + .cart-cell { margin-top: 0; } } @media (min-width: 640px) { .cart-cell:nth-of-type(1) { min-width: 436px; } } .cart-cell:nth-of-type(2) { margin-top: 20px; } @media (min-width: 640px) { .cart-cell:nth-of-type(2) { min-width: 136px; margin-top: 0; } } @media (min-width: 640px) { .cart-cell:nth-of-type(3) { min-width: 136px; } } @media (min-width: 640px) { .cart-cell:nth-of-type(4) { min-width: 164px; } } .cart-cell--item { min-width: 71px; position: relative; font-size: 14px; font-weight: bold; padding-right: 15px; } @media (min-width: 640px) { .cart-cell--item { display: flex; justify-content: center; align-items: center; width: 100%; min-width: initial; min-height: 50px; font-size: 18px; padding: 0 18px; background: var(--border-background-secondary); border-top: var(--border-background-primary) solid 1px; border-left: var(--border-background-primary) solid 1px; border-bottom: var(--border-background-primary) solid 1px; } .cart-cell--item.pc-hide { display: none; } } .cart-cell--item::after { position: absolute; content: "："; right: 0; } @media (min-width: 640px) { .cart-cell--item::after { display: none; } } .cart-cell--item.sp-none { display: none; } @media (min-width: 640px) { .cart-cell--item.sp-none { display: flex; } } .cart-cell--gift { gap: 15px; } @media (min-width: 640px) { .cart-cell--gift { gap: 20px; width: 100%; padding: 25px; border-left: var(--border-background-primary) solid 1px; } } .cart-cell--gift-img { width: 120px; height: 100%; border: var(--border-background-primary) solid 1px; } @media (min-width: 640px) { .cart-cell--gift-img { width: 141px; border: 0; } } .cart-cell--gift-name { color: var(--primary); font-size: 12px; font-weight: bold; line-height: 1.6; text-decoration: underline; } @media (min-width: 640px) { .cart-cell--gift-name { font-size: 14px; } } @media (min-width: 640px) { .cart-cell--date { display: flex; align-items: center; width: 100%; height: 100%; font-size: 14px; padding: 16px; border-left: var(--border-background-primary) solid 1px; } } @media (min-width: 640px) { .cart-cell--delivery { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 14px; padding: 16px; border-left: var(--border-background-primary) solid 1px; } } .cart-cell--amount { color: var(--primary); font-size: 16px; font-weight: bold; font-family: var(--font-barlow); } @media (min-width: 640px) { .cart-cell--amount { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 14px; padding: 16px; border-left: var(--border-background-primary) solid 1px; } } @media (min-width: 640px) { .cart-cell--amount span { font-size: 22px; margin-right: 2px; } } .cart-cell__under--flex { justify-content: space-between; align-items: flex-end; margin-top: 20px; } @media (min-width: 640px) { .cart-cell__under--flex { gap: 0; justify-content: initial; align-items: initial; width: 231px; margin-top: 0; } } @media (min-width: 640px) { .cart-cell__under--flex .cart-cell:nth-of-type(1) { min-width: 136px; } } .cart-cell__under--flex .cart-cell:nth-of-type(2) { gap: 0; margin-top: 0; } @media (min-width: 640px) { .cart-cell__under--flex .cart-cell:nth-of-type(2) { min-width: 92px; } } .cart-cell__under--flex .cart-cell:nth-of-type(2) .cart-cell--item { min-width: initial; border-right: var(--border-background-primary) solid 1px; } .cart-cell__under--flex .cart-cell:nth-of-type(2) .cart-cell--item::after { display: none; } .cart-cell__under--flex .cart-cell--count { padding: 0; } @media (min-width: 640px) { .cart-cell__under--flex .cart-cell--count { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 16px; border-left: var(--border-background-primary) solid 1px; } } @media (min-width: 640px) { .cart-cell__under--flex .cart-cell--count .amplify-selectfield { width: initial; } } .cart-cell__under--flex .cart-cell--count .amplify-select { min-width: initial; padding: 8px 30px 8px 16px; } .cart-cell__under--flex .cart-cell--count .amplify-select__wrapper { width: 73px; box-sizing: border-box; } @media (min-width: 640px) { .cart-cell__under--flex .cart-cell--count .amplify-select__wrapper { width: 80px; } } .cart-cell__under--flex .cart-cell--delete { color: var(--primary); font-size: 14px; font-weight: bold; } .cart-cell__under--flex .cart-cell--delete span { border-bottom: var(--primary) 1px solid; } @media (min-width: 640px) { .cart-cell__under--flex .cart-cell--delete { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 16px; border-right: var(--border-background-primary) solid 1px; border-left: var(--border-background-primary) solid 1px; } } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/InputAmount/InputAmount.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .input-amount .custom-link { font-size: 16px; font-weight: bold; letter-spacing: 0.06em; margin-bottom: 24px; margin-left: 24px; display: flex; justify-content: center; } @media (min-width: 640px) { .input-amount .custom-link { margin-right: 40px; margin-bottom: 32px; justify-content: flex-end; } } .input-amount .custom-label { margin-top: 36px; margin-bottom: 16px; } .input-amount .labeled-input { margin-bottom: 184px; } @media (min-width: 640px) { .input-amount .labeled-input { margin-bottom: 40px; } } @media (min-width: 640px) { .input-amount .labeled-input__main { width: 100%; } } .input-amount .dialog-wrapper { height: 532px; } @media (min-width: 640px) { .input-amount .dialog-wrapper { height: 364px; } } .input-amount .dialog-wrapper .h4-heading { margin-top: -4px; } @media (min-width: 640px) { .input-amount .custom-input { width: 100%; max-width: 580px; } } @media (min-width: 640px) { .input-amount .custom-button { width: 310px; height: 50px; } } .input-amount .custom-button--secondary { margin-top: 20px; } @media (min-width: 640px) { .input-amount .custom-button--secondary { margin-top: 0; } } .input-amount .labeled-input__suffix { margin: 0; } @media (min-width: 640px) { .input-amount .labeled-input__suffix { margin-right: 40px; } } .input-amount__foot { display: block; } @media (min-width: 640px) { .input-amount__foot { display: flex; justify-content: space-between; flex-direction: row-reverse; } } /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/EditDonationInfo/EditDonationInfo.scss ***! \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .edit-donation-dialog__heading { margin-bottom: 32px; margin-top: -4px; } @media (min-width: 640px) { .edit-donation-dialog__heading { margin-bottom: 44px; } } .edit-donation-dialog__label { margin-bottom: 10px; } .edit-donation-dialog__label .amplify-label { font-size: 14px; } @media (min-width: 640px) { .edit-donation-dialog__label .amplify-label { font-size: 16px; } } .edit-donation-dialog__input-date { display: block; } @media (min-width: 640px) { .edit-donation-dialog__input-date { display: flex; } } .edit-donation-dialog__input-date .custom-input-field__main { justify-content: flex-start; gap: 8px; } @media (min-width: 640px) { .edit-donation-dialog__input-date .custom-input-field__main { gap: 16px; } } .edit-donation-dialog__input-date .custom-input-field__prefix, .edit-donation-dialog__input-date .custom-input-field__suffix, .edit-donation-dialog__input-date .custom-select__suffix { height: 20px; } .edit-donation-dialog__input-date .custom-input-field__prefix { width: 28px; } .edit-donation-dialog__input-date .amplify-label { font-size: 14px; } .edit-donation-dialog__input-date .custom-input { width: 175px; } @media (min-width: 640px) { .edit-donation-dialog__input-date .custom-input { width: 130px; } } .edit-donation-dialog__input-date-md { gap: 8px; margin-top: 13px; } @media (min-width: 640px) { .edit-donation-dialog__input-date-md { gap: 12px; margin-top: 0; } } .edit-donation-dialog__input-date-md-unit { width: 50%; } @media (min-width: 640px) { .edit-donation-dialog__input-date-md-unit { width: 100%; } } @media (min-width: 640px) { .edit-donation-dialog__input-date-md .custom-select { align-items: start; } } @media (min-width: 640px) { .edit-donation-dialog__input-date-md .custom-select__main { gap: 12px; } } .edit-donation-dialog__input-date-md .custom-select__input { width: 100%; } .edit-donation-dialog__input-date-md .amplify-select { height: 40px; } @media (min-width: 640px) { .edit-donation-dialog__input-date-md .amplify-select { width: 85px; } } .edit-donation-dialog__input-date-md .amplify-select__icon { right: 18px; } .edit-donation-dialog__input-date-md .custom-select__suffix { font-size: 14px; } .edit-donation-dialog__input-field { margin-top: 36px; } @media (min-width: 640px) { .edit-donation-dialog__input-field { margin-top: 44px; } } @media (min-width: 640px) { .edit-donation-dialog__input-field .custom-input { width: 580px; } } .edit-donation-dialog__input-field .custom-input-field { align-items: flex-start; } .edit-donation-dialog__input-field .custom-input-field__input { width: 100%; } .edit-donation-dialog__input-field .custom-input-field__subtext { margin-top: 12px; } @media (min-width: 640px) { .edit-donation-dialog__input-field .custom-input-field__subtext { margin-top: 14px; } } .edit-donation-dialog__input-field .custom-input-field__main { flex-direction: unset; gap: 8px; } @media (min-width: 640px) { .edit-donation-dialog__input-field .custom-input-field__main { gap: 16px; align-items: flex-start; } } .edit-donation-dialog__input-field .custom-input-field__suffix { margin-top: 8px; } .edit-donation-dialog__link { display: flex; justify-content: center; margin-left: 22px; } @media (min-width: 640px) { .edit-donation-dialog__link { margin-left: 0; } } .edit-donation-dialog__link span { border-bottom: 1px solid var(--primary); } .edit-donation-dialog__link span:hover { border-color: var(--primary); } .edit-donation-dialog__text { margin: 30px 0 212px; } @media (min-width: 640px) { .edit-donation-dialog__text { margin-bottom: 48px; } } .edit-donation-dialog__text-unit { margin-bottom: 8px; } @media (min-width: 640px) { .edit-donation-dialog__text-unit { margin-bottom: 4px; } } .edit-donation-dialog__foot { display: block; margin-top: 22px; } @media (min-width: 640px) { .edit-donation-dialog__foot { display: flex; justify-content: space-between; flex-direction: row-reverse; margin-top: 48px; gap: 32px; } } .edit-donation-dialog__foot .custom-button { height: 50px; } @media (min-width: 640px) { .edit-donation-dialog__foot .custom-button { width: 310px; } } .edit-donation-dialog__foot-button-top { margin-bottom: 20px; } @media (min-width: 640px) { .edit-donation-dialog__foot-button-top { margin-bottom: 0; } } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/MypageCardLink/MypageCardLink.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .mypage-card-link { width: 100%; height: 172px; border: 1px solid var(--border-background-primary); display: flex; align-items: center; margin-bottom: 40px; } .mypage-card-link:hover { border-color: var(--primary); } .mypage-card-link:hover .hover-color-green { color: var(--primary); } .mypage-card-link__body { margin: 0 auto; align-items: flex-end; gap: 18px; flex-wrap: wrap; } @media (min-width: 640px) { .mypage-card-link__body { gap: 32px; align-items: center; } } .mypage-card-link__image { width: 100px; height: 100px; } .mypage-card-link__heading { margin-bottom: 16px; } .mypage-card-link__text { width: 160px; font-size: 14px; line-height: 24px; } @media (min-width: 640px) { .mypage-card-link__text { width: 380px; } } .mypage-card-link__icon { position: relative; margin-top: auto; } /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/MypageCardLinks/MypageCardLinks.scss ***! \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .mypage-card-links { margin: 0 20px; margin-bottom: 64px; } @media (min-width: 640px) { .mypage-card-links { margin: 0; } } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/DonationStatus/DonationStatus.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .donation-status { margin: 0 20px 64px; } @media (min-width: 640px) { .donation-status { margin: 0 0 80px; } } @media (min-width: 640px) { .donation-status .custom-button { width: 100%; } } .donation-status .nav__text--popup { color: var(--primary); } .donation-status .nav__flex--popup { align-items: center; justify-content: center; gap: 8px; letter-spacing: 0.06em; } @media (min-width: 640px) { .donation-status .nav__flex--popup { justify-content: right; } } .donation-status__alert { margin-top: 40px; } @media (min-width: 640px) { .donation-status__alert { margin-top: 32px; } } .donation-status__table { width: 100%; margin-top: 40px; border: 1px solid var(--border-background-primary); border-top: 0; border-spacing: 0; } @media (min-width: 640px) { .donation-status__table { margin-top: 32px; } } .donation-status__table th, .donation-status__table td { display: block; } @media (min-width: 640px) { .donation-status__table th, .donation-status__table td { display: table-cell; margin-top: 32px; } } .donation-status__th { height: 40px; line-height: 40px; font-size: 14px; padding: 0; color: var(--text-primary); background-color: var(--border-background-secondary); border-top: 1px solid var(--border-background-primary); border-bottom: 1px solid var(--border-background-primary); } @media (min-width: 640px) { .donation-status__th { width: 235px; border-bottom: 0; text-align: left; padding: 0; padding-left: 40px; } } .donation-status__td { text-align: center; margin: 0 20px; } @media (min-width: 640px) { .donation-status__td { width: 375px; border-top: 1px solid var(--border-background-primary); border-left: 1px solid var(--border-background-primary); text-align: right; } } .donation-status__td-text, .donation-status__td-text--green { font-size: 20px; font-weight: bold; color: var(--text-primary); margin: 24px 0; } @media (min-width: 640px) { .donation-status__td-text, .donation-status__td-text--green { font-size: 22px; margin: 32px 40px 32px 0; } } .donation-status__td-text--green { color: var(--primary); } .donation-status__td-button { margin: 0 20px; margin-bottom: 20px; } @media (min-width: 640px) { .donation-status__td-button { margin: 0 40px 32px; } } .donation-status__td .text-sm { font-size: 16px; } /*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/PulldownInput/PulldownInput.scss ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .pulldown-input { display: flex; align-items: center; text-align: start; gap: 8px; } @media (min-width: 640px) { .pulldown-input { gap: 12px; } } .pulldown-input__suffix { font-size: 14px; } .pulldown-input__input .amplify-select { width: 145px; height: 40px; } @media (min-width: 640px) { .pulldown-input__input .amplify-select { width: 350px; } } .pulldown-input__error { color: var(--alert); font-size: 12px; font-weight: bold; text-align: start; } .pulldown-input__subtext { color: var(--text-secondary); font-size: 12px; } .pulldown-input .custom-selectfield { gap: 0; } .pulldown-input .amplify-select { font-size: 16px; } .placeholder select { color: var(--border-background-primary); } /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/UserInfoItem/UserInfoItem.scss ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .user-info__content + .user-info__content { margin-top: 40px; } @media (min-width: 640px) { .user-info__content + .user-info__content { margin-top: 50px; } } .user-info__content--item { font-size: 14px; font-weight: bold; white-space: pre-wrap; } @media (min-width: 640px) { .user-info__content--item { font-size: 16px; } } .user-info__content--txt { font-size: 14px; margin-top: 24px; white-space: pre-wrap; } @media (min-width: 640px) { .user-info__content--txt { font-size: 16px; } } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/TextLink/TextLink.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .text-link svg { flex-shrink: 0; } .text-link__body { display: flex; flex-direction: row; align-items: center; font-weight: bold; } .text-link__body--large { justify-content: space-between; width: 100%; gap: 0; } .text-link__body--anchor-link { color: var(--text-primary); font-size: 16px; font-weight: bold; border-bottom: solid 1px var(--border-background-secondary); display: flex; align-items: center; gap: 12px; padding: 12px 0; } .text-link__body--anchor-link:hover { color: var(--primary); border-bottom-color: var(--primary); } .text-link__body--anchor-link svg { color: var(--primary); } .text-link__body--anchor-link.amplify-link:visited { color: var(--text-primary); } .text-link__body--text-link-A { color: var(--primary); font-size: 16px; gap: 8px; } .text-link__body--text-link-A:hover { color: #045244; } .text-link__body--text-link-A.amplify-link:visited { color: var(--primary); } .text-link__body--text-link-B { color: var(--primary); font-size: 14px; gap: 8px; } .text-link__body--text-link-B:hover { color: #045244; } .text-link__body--text-link-B.amplify-link:visited { color: var(--primary); } .text-link__body--text-link-C { color: var(--text-primary); font-size: 14px; gap: 8px; } .text-link__body--text-link-C svg { color: var(--primary); } .text-link__body--text-link-C.amplify-link:visited { color: var(--text-primary); } .text-link__body--text-link-D { color: var(--primary); font-size: 12px; gap: 8px; } .text-link__body--text-link-D svg { color: var(--primary); } .text-link__body--text-link-D.amplify-link:visited { color: var(--primary); } .text-link__body--area-plus-link { color: var(--text-primary); font-size: 14px; gap: 8px; } .text-link__body--area-plus-link:hover { color: #045244; } .text-link__body--area-plus-link svg { color: var(--primary); width: 24px; height: 24px; padding: 2px; background-color: var(--background); border-radius: 12px; } .text-link__body--area-minus-link { background-color: var(--border-background-secondary); color: var(--text-primary); font-size: 14px; gap: 8px; } .text-link__body--area-minus-link:hover { color: #045244; } .text-link__body--area-minus-link svg { color: var(--primary); width: 24px; height: 24px; padding: 2px; background-color: var(--background); border-radius: 12px; } .text-link__body--blank-link-A { color: var(--primary); font-size: 16px; gap: 8px; } .text-link__body--blank-link-A.amplify-link:visited { color: var(--primary); } .text-link__body--blank-link-B { color: var(--primary); font-size: 14px; gap: 8px; } .text-link__body--blank-link-B.amplify-link:visited { color: var(--primary); } .text-link__body--blank-link-C { color: var(--text-primary); font-size: 14px; gap: 8px; } .text-link__body--blank-link-C svg { color: var(--primary); } .text-link__body--blank-link-C.amplify-link:visited { color: var(--text-primary); } .text-link__body--blank-link-D { display: block; color: var(--primary); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; line-height: 1.9em; } @media (min-width: 640px) { .text-link__body--blank-link-D { font-size: 14px; } } .text-link__body--blank-link-D svg { margin: 0 0 -2px 10px; } .text-link__body--window-link-A { color: var(--primary); font-size: 16px; gap: 8px; } .text-link__body--window-link-A.amplify-link:visited { color: var(--primary); } .text-link__body--window-link-B { color: var(--primary); font-size: 14px; gap: 8px; } .text-link__body--window-link-B.amplify-link:visited { color: var(--primary); } .text-link__body--window-link-D { color: var(--primary); font-size: 12px; gap: 8px; } .text-link__body--window-link-D.amplify-link:visited { color: var(--primary); } .text-link__body--more-link { color: var(--primary); font-size: 16px; gap: 8px; } .text-link__body--more-link svg { width: 24px; height: 24px; padding: 2px; background-color: var(--background); border-radius: 12px; } .text-link__body--more-link.amplify-link:visited { color: var(--primary); } .text-link__body--custom-plus-link { color: var(--primary); font-size: 16px; gap: 8px; } .text-link__body--custom-plus-link svg { width: 24px; height: 24px; padding: 2px; background-color: var(--background); border-radius: 12px; } .text-link__body--custom-plus-link.amplify-link:visited { color: var(--primary); } .text-link__body--custom-minus-link { color: var(--primary); font-size: 16px; gap: 8px; } .text-link__body--custom-minus-link svg { width: 24px; height: 24px; padding: 2px; background-color: var(--background); border-radius: 12px; } .text-link__body--custom-minus-link.amplify-link:visited { color: var(--primary); } .text-link__body--unset-icon { color: var(--primary); font-size: 14px; } @media (min-width: 640px) { .text-link__body--unset-icon { font-size: 16px; } } .text-link__body--unset-icon.amplify-link:visited { color: var(--primary); } .text-link--divider { margin: 40px 0; } @media (min-width: 640px) { .text-link--divider { margin: 60px 0 50px; } } .text-link--divider .text-link__body { margin: 20px 0; display: flex; justify-content: center; text-align: center; } @media (min-width: 640px) { .text-link--divider .text-link__body { margin: 30px 0; } } .text-link .second-row-title { gap: 16px; } .text-link .underline { text-decoration: underline; text-underline-offset: 4px; border-color: var(--text-primary-hover); } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/MypageSectionHeading/MypageSectionHeading.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .mypage-section { height: 40px; padding-left: 24px; font-size: 18px; font-weight: bold; display: flex; flex-direction: column; justify-content: center; background-color: var(--border-background-secondary); } @media (min-width: 640px) { .mypage-section { height: 50px; padding-left: 28px; } } /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/CustomInputField/CustomInputField.scss ***! \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .custom-input-field { display: flex; flex-direction: column; text-align: start; } @media (min-width: 640px) { .custom-input-field { align-items: center; } } .custom-input-field__main { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 100%; } @media (min-width: 640px) { .custom-input-field__main { flex-direction: row; align-items: baseline; width: auto; } } .custom-input-field__main--sp-row { flex-direction: row; align-items: baseline; } .custom-input-field__prefix { font-size: 14px; } @media (min-width: 640px) { .custom-input-field__prefix { height: 40px; font-size: 16px; } } .custom-input-field__suffix { font-size: 14px; } @media (min-width: 640px) { .custom-input-field__suffix { font-size: 16px; } } .custom-input-field__input { display: flex; flex-direction: column; text-align: start; gap: 0; } .custom-input-field__error { margin-top: 12px; } .custom-input-field__subtext { color: var(--text-secondary); font-size: 12px; margin-top: 10px; } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/CustomCheckbox/CustomCheckbox.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .custom-checkbox__error { display: flex; color: var(--alert); font-size: 14px; font-weight: bold; text-align: start; align-items: center; margin-top: 12px; } .custom-checkbox__error-icon { width: 18px; height: 18px; margin-right: 6px; margin-bottom: 1px; } .custom-checkbox__subtext { color: var(--text-secondary); font-size: 12px; margin-top: 10px; } /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/CustomInputField/CustomPostalCodeInput/CustomPostalCodeInput.scss ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .custom-postal-code-input__action-button { height: 40px; max-width: 160px; padding: 0; background: var(--primary); } /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/CustomRadioGroup/CustomRadioGroup.scss ***! \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .custom-radio-group__error { margin-top: 12px; } .custom-radio-group__subtext { color: var(--text-secondary); font-size: 12px; margin-top: 10px; } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/CustomTextArea/CustomTextArea.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .custom-text-area { max-width: var(--max-width); } .custom-text-area__error { display: flex; color: var(--alert); font-size: 14px; font-weight: bold; text-align: start; align-items: center; margin-top: 12px; } .custom-text-area__error-icon { width: 18px; height: 18px; margin-right: 6px; margin-bottom: 1px; } /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/SimplifiedChart/SimplifiedChart.scss ***! \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .simplified-chart__title { justify-content: center; align-items: center; letter-spacing: 0.08em; gap: 18px; margin-bottom: 48px; } @media (min-width: 640px) { .simplified-chart__title { gap: 28px; margin-bottom: 64px; } } .simplified-chart__title-img { width: 56px; } @media (min-width: 640px) { .simplified-chart__title-img { width: 70px; } } .simplified-chart__title .h2-heading__text { margin-bottom: 0; } .simplified-chart__heading { text-align: center; letter-spacing: 0.06em; margin-bottom: 24px; } @media (min-width: 640px) { .simplified-chart__heading { display: flex; justify-content: center; margin-bottom: 40px; } } .simplified-chart__heading .h4-heading { line-height: 30px; } @media (min-width: 640px) { .simplified-chart__heading .h4-heading { font-size: 24px; } } .simplified-chart__description { font-size: 16px; line-height: 28px; } @media (min-width: 640px) { .simplified-chart__description { font-size: 14px; line-height: 26px; } } .simplified-chart__sub-text { font-size: 12px; line-height: 20px; } .simplified-chart__sub-text--center { font-size: 12px; margin: 24px 0; } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/SimplifiedChartTable/SimplifiedChartTable.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .simplified-chart__table { margin-top: 64px; } @media (min-width: 640px) { .simplified-chart__table { margin-top: 50px; } } .simplified-chart__table-text { font-size: 14px; font-weight: bold; color: var(--primary); text-align: right; margin-bottom: 12px; } .simplified-chart__table-container { overflow-x: auto; margin-bottom: 20px; } @media (min-width: 640px) { .simplified-chart__table-container { margin-bottom: 32px; } } .simplified-chart__table table { border-collapse: collapse; } .simplified-chart__table th, .simplified-chart__table td { min-width: 122px; border: solid 1px var(--border-background-primary); text-align: center; } @media (min-width: 640px) { .simplified-chart__table th, .simplified-chart__table td { min-width: 180px; } } .simplified-chart__table th, .simplified-chart__table-first-td { background-color: var(--border-background-secondary); font-weight: bold; } .simplified-chart__table th { font-size: 14px; height: 96px; } @media (min-width: 640px) { .simplified-chart__table th { height: 100px; font-size: 16px; } } .simplified-chart__table td { font-size: 12px; height: 38px; } @media (min-width: 640px) { .simplified-chart__table td { font-size: 14px; height: 48px; } } /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/ProcessTable/ProcessTable.scss ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .process__table table { border-collapse: collapse; } .process__table th { font-size: 16px; border-bottom: solid 2px var(--border-background-primary); } @media (min-width: 640px) { .process__table th { font-size: 18px; } } .process__table-not-first-th { margin: 0 auto; text-align: center; background-color: #ebebeb; font-weight: bold; border: solid 1px var(--border-background-primary); padding: 12px 16px; } @media (min-width: 640px) { .process__table-not-first-th { padding: 12px 40px; } } .process__table-second-th { border-right: solid 1px var(--text-on-dark); } .process__table td { border: solid 1px var(--border-background-primary); } .process__table-first-td { font-size: 14px; background-color: var(--border-background-secondary); font-weight: bold; text-align: center; padding: 12px 16px; } @media (min-width: 640px) { .process__table-first-td { font-size: 16px; min-width: 164px; text-align: left; padding: 32px 40px; } } .process__table-td { font-size: 14px; text-align: left; width: 50%; padding: 20px 16px; vertical-align: top; } @media (min-width: 640px) { .process__table-td { padding: 32px 40px; vertical-align: middle; } } .process__table-text--bold { font-weight: bold; } .process__table-text--notice { font-size: 12px; color: var(--text-secondary); } .process__table-dialog-button { margin: 100px 0 20px; } .process__table .dialog-wrapper { height: auto; } /*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/layout/MainLayout/Header/components/HeaderNavigation/HeaderNavigation.scss ***! \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .header-navigation { position: relative; justify-content: center; gap: 0; } .header-navigation__item { width: 25%; height: 54px; text-align: center; color: var(--text-primary); font-size: 12px; font-weight: bold; padding: 12px 2px; background: var(--text-on-dark); border-top: 1px var(--border-background-primary) solid; border-right: 1px var(--border-background-primary) solid; border-bottom: 1px var(--border-background-primary) solid; border-radius: 0; } @media (min-width: 640px) { .header-navigation__item { font-size: 16px; border: initial; } } .header-navigation__item:hover { color: var(--text-on-dark); background: var(--primary); } @media (min-width: 640px) { .header-navigation__item:hover .header-navigation__content { display: grid; } } .header-navigation__item:nth-of-type(1) { border-left: 1px var(--border-background-primary) solid; } @media (min-width: 640px) { .header-navigation__item:nth-of-type(1) { border: initial; } } .header-navigation__content { position: absolute; grid-template-columns: repeat(2, 1fr); display: none; width: 100%; top: 54px; left: 0; padding: 0; background: var(--text-on-dark); box-shadow: rgba(0, 0, 0, 0.1) 0 10px 10% 0; z-index: 9999; } @media (min-width: 640px) { .header-navigation__content { grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); padding: 28px 44px; background: var(--background); gap: 18px; } } .header-navigation__list { padding: 0; border-right: var(--border-background-primary) solid 1px; border-bottom: var(--border-background-primary) solid 1px; } @media (min-width: 640px) { .header-navigation__list { border: var(--border-background-primary) solid 1px; border-radius: 10px; } .header-navigation__list:hover { border: var(--white-hover) solid 1px; } .header-navigation__list:hover:nth-of-type(2n + 1), .header-navigation__list:hover:nth-of-type(1) { border-left: var(--white-hover) solid 1px; } } .header-navigation__list:nth-of-type(2n + 1), .header-navigation__list:nth-of-type(1) { border-left: var(--border-background-primary) solid 1px; } .header-navigation__list--link { display: block; font-size: 14px; padding: 10px 21px 10px 15px; background: url("/images/common/icons/header/header_nav_arrow.png") no-repeat center right 13px/7px; } @media (min-width: 640px) { .header-navigation__list--link { height: 61px; padding: 0 21px 0 15px; background: var(--text-on-dark); border-radius: 10px; } } @media (min-width: 640px) { .header-navigation__list--link:nth-of-type(5n) { margin-right: 0 !important; } } @media (min-width: 640px) { .header-navigation__list--link:nth-of-type(n + 6) { margin-top: 18px !important; } } .header-navigation__list--img { align-items: center; height: inherit; gap: 0; } /*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/layout/MainLayout/Header/components/HeaderMenu/HeaderMenu.scss ***! \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .header-menu { padding: 12px 10px 10px 20px; background: var(--text-on-dark); } @media (min-width: 640px) { .header-menu { padding: 16px 0; } } .header-menu__wrapper { width: 100%; align-items: center; justify-content: space-between; } .header-menu__content { gap: 24px; align-items: center; } .header-menu__logo { display: flex; padding: 0; align-items: center; width: 140px; } @media (min-width: 640px) { .header-menu__logo { width: 180px; } } .header-menu__list { align-items: center; gap: 18px; position: relative; } @media (min-width: 640px) { .header-menu__list { gap: 22px; } } .header-menu__list-item { color: var(--primary); font-size: 11px; padding: 0; border: 0; } .header-menu__list-item:hover { --amplify-internal-button-background-color: none; } .header-menu__list-img { align-items: center; flex-direction: column; gap: 5px; } @media (min-width: 640px) { .header-menu__list-img { gap: 10px; } } .header-menu__list-img img { width: auto; height: 20px; } @media (min-width: 640px) { .header-menu__list-img img { height: 24px; } } .header-menu__list-text { display: flex; flex-direction: row; line-height: 11px; } .header-menu__list-badge { position: absolute; top: -14px; right: 66px; display: flex; justify-content: center; align-items: center; width: 16px; height: 16px; border-radius: 8px; font-size: 8px; font-weight: bold; color: #fff; background-color: var(--alert); } @media (min-width: 640px) { .header-menu__list-badge { top: -16px; right: 62px; width: 20px; height: 20px; border-radius: 12px; font-size: 10px; } } /*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/layout/MainLayout/Header/Header.scss ***! \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .header { z-index: 10000; background-color: #fff; border-bottom: 0; } @media (min-width: 640px) { .header { border-bottom: var(--border-background-primary) solid 1px; } } .header__border { border-bottom: var(--border-background-primary) solid 1px; } .header__noscript { background: var(--alert-background); color: var(--alert); font-weight: bold; font-size: 14px; text-align: center; display: block; padding: 16px; } .header__announcement { font-size: 9px; color: var(--text-on-dark); padding: 14px 6px; background: var(--primary); } @media (min-width: 640px) { .header__announcement { font-size: 12px; } } .header__search-input { margin: 12px 20px; } @media (min-width: 640px) { .header__search-input { margin: 0; } } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/base/molecules/FooterTitle/FooterTitle.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @media (min-width: 640px) { .title { margin: 0 auto; width: 1100px; } } .title__flex { margin-left: 20px; margin-bottom: 20px; align-items: center; gap: 0; flex-wrap: wrap; justify-content: flex-start; } @media (min-width: 640px) { .title__flex { margin-left: 0; margin-bottom: 16px; } } .title__icon { font-size: 32px; color: var(--primary); } .title__heading { margin-left: 12px; font-size: 20px; } /*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/layout/MainLayout/Footer/components/MainFooter/MainFooter.scss ***! \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .main-footer { position: relative; margin-top: 48px; } @media (min-width: 640px) { .main-footer { margin-top: 96px; } } .main-footer__container { max-width: var(--max-width); margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; } @media (min-width: 640px) { .main-footer__container { padding-bottom: 56px; flex-direction: row; gap: 50px; } } .main-footer__product-select-list { border-top: 1px solid var(--border-background-primary); display: flex; flex-direction: column; gap: 64px; } @media (min-width: 640px) { .main-footer__product-select-list { width: 730px; flex-direction: row; gap: 50px; } } .main-footer__product-select-list .list-menu__parent-wrapper:first-child { border-top: 0; } .main-footer__product-select-list .amplify-grid { grid-template-columns: 50% 50%; padding: 12px 0; } @media (min-width: 640px) { .main-footer__product-select-list .amplify-grid { grid-template-columns: calc(50% - 16px) calc(50% - 16px); column-gap: 32px; padding: 10px 0; } } @media (min-width: 640px) { .main-footer__category-list .list-menu__parent-wrapper:last-child { border: 0; } } .main-footer__sub-category-list { border-top: 1px solid var(--border-background-primary); } @media (min-width: 640px) { .main-footer__sub-category-list { border: 0; } } .main-footer__support-list { display: flex; flex-direction: column; align-items: flex-end; gap: 0; } @media (min-width: 640px) { .main-footer__support-list { gap: 60px; width: 320px; } } .main-footer__support-list .amplify-grid { padding: 12px 0; } @media (min-width: 640px) { .main-footer__support-list .amplify-grid { padding: 10px 0; } } .main-footer__logout .custom-link { margin: 24px 20px; gap: 16px; font-size: 13px; } @media (min-width: 640px) { .main-footer__logout .custom-link { margin: 0; } } @media (min-width: 640px) { .main-footer .list-menu__parent { padding: 24px 0; } } .main-footer .list-menu__parent.custom-link { font-size: 16px; } .main-footer .list-menu__child { padding: 12px 20px; } @media (min-width: 640px) { .main-footer .list-menu__child { padding: 10px 0; } } .main-footer .list-menu__child.custom-link { font-size: 13px; } /*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/layout/MainLayout/Footer/components/GlobalNav/GlobalNav.scss ***! \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .global-nav { width: 100%; height: auto; padding-top: 52px; padding-bottom: 24px; background-color: var(--primary); } @media (min-width: 640px) { .global-nav { padding-top: 80px; padding-bottom: 64px; } } .global-nav__content { width: 100%; margin: 44px 0; font-size: 13px; align-items: center; gap: 0; flex-wrap: wrap; justify-content: space-between; } @media (min-width: 640px) { .global-nav__content { width: 640px; margin: 72px auto 82px; justify-content: space-around; text-align: center; font-size: 16px; } } .global-nav__link { width: 50%; height: 54px; padding: 0 20px; border: 1px solid var(--text-on-dark); display: flex; flex-direction: column; justify-content: center; } .global-nav__link:nth-of-type(1) { border-left: 0; border-right: 0; border-bottom: 0; } .global-nav__link:nth-of-type(2) { border-right: 0; border-bottom: 0; } .global-nav__link:nth-of-type(3) { border-left: 0; border-right: 0; } .global-nav__link:nth-of-type(4) { border-right: 0; } @media (min-width: 640px) { .global-nav__link { width: auto; border: 0; padding: 16px 0; height: auto; } } .global-nav .text-link { display: flex; justify-content: center; } @media (min-width: 640px) { .global-nav .text-link { display: block; } } .global-nav__logo { display: flex; width: 185px; margin: 0 auto; text-align: center; } @media (min-width: 640px) { .global-nav__logo { width: 232px; } } .global-nav__copy-right { width: 297px; margin: 0 auto; font-size: 13px; text-align: center; color: var(--text-on-dark); } @media (min-width: 640px) { .global-nav__copy-right { width: 100%; } } .global-nav .text-link__body--unset-icon { color: var(--text-on-dark); gap: 8px; } .global-nav .text-link__body--unset-icon.amplify-link:visited { color: var(--text-on-dark); } /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/styles/globals.scss ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; :root, [data-amplify-theme] { --primary: #00846d; --secondary: #d6f1e6; --background: #edf8f5; --map-background: #e9e9e9; --alert: #eb4d4d; --alert-background: #fdeded; --conversion: #f68213; --text-primary: #333; --text-secondary: #707070; --text-tertiary: #a7a7a7; --border-background-primary: #ddd; --border-background-secondary: #f5f5f5; --text-on-dark: #fff; --conversion-hover: #db731f; --primary-hover: #076b59; --text-primary-hover: #045244; --white-hover: #00846d; --gray-hover: #ddd; --black-hover: #00846d; --disabled: #ddd; --reset: 0; --h1-sp-size: 28px; --h1-pc-size: 38px; --h2-sp-size: 24px; --h2-pc-size: 32px; --h3-size: 20px; --h4-size: 18px; --max-width: 1180px; --background-alert: #fdeded; --checkbox-background-color: #fff; --input-placeholder: #ddd; --input-border-color: #ddd; --font-primary: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", meiryo, メイリオ, osaka, "MS PGothic", arial, helvetica, sans-serif; --font-meiryo: メイリオ, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", meiryo, osaka, "MS PGothic", arial, helvetica, sans-serif; --font-barlow: "Barlow", sans-serif; } :root, [data-amplify-theme] { --amplify-components-button-border-color: var(--primary); --amplify-components-button-hover-background-color: var(--white-hover); --amplify-components-button-primary-background-color: var(--primary); --amplify-components-button-primary-hover-background-color: var( --primary-hover ); --amplify-components-button-disabled-background-color: var(--disabled); --amplify-components-button-disabled-color: var(--text-on-dark); --amplify-components-button-link-focus-background-color: none; --amplify-components-button-link-active-background-color: none; --amplify-components-text-primary-color: var(--text-primary); --amplify-components-text-secondary-color: var(--text-secondary); --amplify-components-text-tertiary-color: var(--text-tertiary); --amplify-components-text-error-color: var(--alert); --amplify-components-text-color: var(--text-primary); --amplify-components-alert-background-color: var(--alert); --amplify-components-alert-color: var(--text-on-dark); --amplify-components-checkbox-icon-background-color: var(--primary); --amplify-components-checkbox-button-color: var(--text-on-dark); --amplify-components-checkbox-button-before-border-color: var( --text-secondary ); --amplify-components-checkbox-button-before-border-radius: var(--reset); --amplify-components-radio-button-checked-color: var(--primary); --amplify-components-radio-button-border-color: var(--text-secondary); --amplify-components-radio-label-color: var(--text-primary); --amplify-components-field-label-color: var(--text-primary); --amplify-components-fieldcontrol-border-color: var(--text-primary); --amplify-components-fieldcontrol-border-radius: var(--reset); --amplify-components-link-color: var(--primary); --amplify-components-link-visited-color: var(--primary); --amplify-components-heading-1-font-size: var(--h1-sp-size); --amplify-components-heading-2-font-size: var(--h2-sp-size); --amplify-components-heading-3-font-size: var(--h3-size); --amplify-components-heading-4-font-size: var(--h4-size); --amplify-components-input-border-color: var(--border-background-primary); --amplify-components-fieldcontrol-focus-border-color: var( --border-background-primary ); --amplify-components-fieldcontrol-error-border-color: var(--alert); --amplify-components-select-color: var(--text-primary); --amplify-components-pagination-current-background-color: var(--white-hover); --amplify-components-pagination-button-hover-background-color: var( --black-hover ); } .align-center { text-align: center !important; } @media (min-width: 640px) { .align-pc-center { text-align: center !important; } } .align-left { text-align: left !important; } @media (min-width: 640px) { .align-pc-left { text-align: left !important; } } .align-right { text-align: right !important; } @media (min-width: 640px) { .align-pc-right { text-align: right !important; } } .fs-12 { font-size: 12px !important; } @media (min-width: 640px) { .fs-pc-12 { font-size: 12px !important; } } .fs-14 { font-size: 14px !important; } @media (min-width: 640px) { .fs-pc-14 { font-size: 14px !important; } } .fs-16 { font-size: 16px !important; } @media (min-width: 640px) { .fs-pc-16 { font-size: 16px !important; } } .fs-18 { font-size: 18px !important; } @media (min-width: 640px) { .fs-pc-18 { font-size: 18px !important; } } .fs-20 { font-size: 20px !important; } @media (min-width: 640px) { .fs-pc-20 { font-size: 20px !important; } } .color-text-primary { color: var(--text-primary) !important; } .color-text-secondary { color: var(--text-secondary) !important; } .color-alert { color: var(--alert) !important; } .color-disabled { color: var(--disabled) !important; } .line-height-1\.8 { line-height: 1.8; } .pt-0 { padding-top: 0px !important; } .mt-0 { margin-top: 0px !important; } .mt-auto { margin-top: auto !important; } .pt-4 { padding-top: 4px !important; } .mt-4 { margin-top: 4px !important; } .mt-auto { margin-top: auto !important; } .pt-8 { padding-top: 8px !important; } .mt-8 { margin-top: 8px !important; } .mt-auto { margin-top: auto !important; } .pt-12 { padding-top: 12px !important; } .mt-12 { margin-top: 12px !important; } .mt-auto { margin-top: auto !important; } .pt-16 { padding-top: 16px !important; } .mt-16 { margin-top: 16px !important; } .mt-auto { margin-top: auto !important; } .pt-20 { padding-top: 20px !important; } .mt-20 { margin-top: 20px !important; } .mt-auto { margin-top: auto !important; } .pt-24 { padding-top: 24px !important; } .mt-24 { margin-top: 24px !important; } .mt-auto { margin-top: auto !important; } .pt-28 { padding-top: 28px !important; } .mt-28 { margin-top: 28px !important; } .mt-auto { margin-top: auto !important; } .pt-32 { padding-top: 32px !important; } .mt-32 { margin-top: 32px !important; } .mt-auto { margin-top: auto !important; } .pt-36 { padding-top: 36px !important; } .mt-36 { margin-top: 36px !important; } .mt-auto { margin-top: auto !important; } .pt-40 { padding-top: 40px !important; } .mt-40 { margin-top: 40px !important; } .mt-auto { margin-top: auto !important; } .pt-64 { padding-top: 64px !important; } .mt-64 { margin-top: 64px !important; } .mt-auto { margin-top: auto !important; } .pt-80 { padding-top: 80px !important; } .mt-80 { margin-top: 80px !important; } .mt-auto { margin-top: auto !important; } .pt-120 { padding-top: 120px !important; } .mt-120 { margin-top: 120px !important; } .mt-auto { margin-top: auto !important; } @media (min-width: 640px) { .pt-pc-0 { padding-top: 0px !important; } } @media (min-width: 640px) { .mt-pc-0 { margin-top: 0px !important; } } @media (min-width: 640px) { .mt-pc-auto { margin-top: auto !important; } } @media (min-width: 640px) { .pt-pc-4 { padding-top: 4px !important; } } @media (min-width: 640px) { .mt-pc-4 { margin-top: 4px !important; } } @media (min-width: 640px) { .mt-pc-auto { margin-top: auto !important; } } @media (min-width: 640px) { .pt-pc-8 { padding-top: 8px !important; } } @media (min-width: 640px) { .mt-pc-8 { margin-top: 8px !important; } } @media (min-width: 640px) { .mt-pc-auto { margin-top: auto !important; } } @media (min-width: 640px) { .pt-pc-12 { padding-top: 12px !important; } } @media (min-width: 640px) { .mt-pc-12 { margin-top: 12px !important; } } @media (min-width: 640px) { .mt-pc-auto { margin-top: auto !important; } } @media (min-width: 640px) { .pt-pc-16 { padding-top: 16px !important; } } @media (min-width: 640px) { .mt-pc-16 { margin-top: 16px !important; } } @media (min-width: 640px) { .mt-pc-auto { margin-top: auto !important; } } @media (min-width: 640px) { .pt-pc-20 { padding-top: 20px !important; } } @media (min-width: 640px) { .mt-pc-20 { margin-top: 20px !important; } } @media (min-width: 640px) { .mt-pc-auto { margin-top: auto !important; } } @media (min-width: 640px) { .pt-pc-24 { padding-top: 24px !important; } } @media (min-width: 640px) { .mt-pc-24 { margin-top: 24px !important; } } @media (min-width: 640px) { .mt-pc-auto { margin-top: auto !important; } } @media (min-width: 640px) { .pt-pc-28 { padding-top: 28px !important; } } @media (min-width: 640px) { .mt-pc-28 { margin-top: 28px !important; } } @media (min-width: 640px) { .mt-pc-auto { margin-top: auto !important; } } @media (min-width: 640px) { .pt-pc-32 { padding-top: 32px !important; } } @media (min-width: 640px) { .mt-pc-32 { margin-top: 32px !important; } } @media (min-width: 640px) { .mt-pc-auto { margin-top: auto !important; } } @media (min-width: 640px) { .pt-pc-36 { padding-top: 36px !important; } } @media (min-width: 640px) { .mt-pc-36 { margin-top: 36px !important; } } @media (min-width: 640px) { .mt-pc-auto { margin-top: auto !important; } } @media (min-width: 640px) { .pt-pc-40 { padding-top: 40px !important; } } @media (min-width: 640px) { .mt-pc-40 { margin-top: 40px !important; } } @media (min-width: 640px) { .mt-pc-auto { margin-top: auto !important; } } @media (min-width: 640px) { .pt-pc-64 { padding-top: 64px !important; } } @media (min-width: 640px) { .mt-pc-64 { margin-top: 64px !important; } } @media (min-width: 640px) { .mt-pc-auto { margin-top: auto !important; } } @media (min-width: 640px) { .pt-pc-80 { padding-top: 80px !important; } } @media (min-width: 640px) { .mt-pc-80 { margin-top: 80px !important; } } @media (min-width: 640px) { .mt-pc-auto { margin-top: auto !important; } } @media (min-width: 640px) { .pt-pc-120 { padding-top: 120px !important; } } @media (min-width: 640px) { .mt-pc-120 { margin-top: 120px !important; } } @media (min-width: 640px) { .mt-pc-auto { margin-top: auto !important; } } .pr-0 { padding-right: 0px !important; } .mr-0 { margin-right: 0px !important; } .mr-auto { margin-right: auto !important; } .pr-4 { padding-right: 4px !important; } .mr-4 { margin-right: 4px !important; } .mr-auto { margin-right: auto !important; } .pr-8 { padding-right: 8px !important; } .mr-8 { margin-right: 8px !important; } .mr-auto { margin-right: auto !important; } .pr-12 { padding-right: 12px !important; } .mr-12 { margin-right: 12px !important; } .mr-auto { margin-right: auto !important; } .pr-16 { padding-right: 16px !important; } .mr-16 { margin-right: 16px !important; } .mr-auto { margin-right: auto !important; } .pr-20 { padding-right: 20px !important; } .mr-20 { margin-right: 20px !important; } .mr-auto { margin-right: auto !important; } .pr-24 { padding-right: 24px !important; } .mr-24 { margin-right: 24px !important; } .mr-auto { margin-right: auto !important; } .pr-28 { padding-right: 28px !important; } .mr-28 { margin-right: 28px !important; } .mr-auto { margin-right: auto !important; } .pr-32 { padding-right: 32px !important; } .mr-32 { margin-right: 32px !important; } .mr-auto { margin-right: auto !important; } .pr-36 { padding-right: 36px !important; } .mr-36 { margin-right: 36px !important; } .mr-auto { margin-right: auto !important; } .pr-40 { padding-right: 40px !important; } .mr-40 { margin-right: 40px !important; } .mr-auto { margin-right: auto !important; } .pr-64 { padding-right: 64px !important; } .mr-64 { margin-right: 64px !important; } .mr-auto { margin-right: auto !important; } .pr-80 { padding-right: 80px !important; } .mr-80 { margin-right: 80px !important; } .mr-auto { margin-right: auto !important; } .pr-120 { padding-right: 120px !important; } .mr-120 { margin-right: 120px !important; } .mr-auto { margin-right: auto !important; } @media (min-width: 640px) { .pr-pc-0 { padding-right: 0px !important; } } @media (min-width: 640px) { .mr-pc-0 { margin-right: 0px !important; } } @media (min-width: 640px) { .mr-pc-auto { margin-right: auto !important; } } @media (min-width: 640px) { .pr-pc-4 { padding-right: 4px !important; } } @media (min-width: 640px) { .mr-pc-4 { margin-right: 4px !important; } } @media (min-width: 640px) { .mr-pc-auto { margin-right: auto !important; } } @media (min-width: 640px) { .pr-pc-8 { padding-right: 8px !important; } } @media (min-width: 640px) { .mr-pc-8 { margin-right: 8px !important; } } @media (min-width: 640px) { .mr-pc-auto { margin-right: auto !important; } } @media (min-width: 640px) { .pr-pc-12 { padding-right: 12px !important; } } @media (min-width: 640px) { .mr-pc-12 { margin-right: 12px !important; } } @media (min-width: 640px) { .mr-pc-auto { margin-right: auto !important; } } @media (min-width: 640px) { .pr-pc-16 { padding-right: 16px !important; } } @media (min-width: 640px) { .mr-pc-16 { margin-right: 16px !important; } } @media (min-width: 640px) { .mr-pc-auto { margin-right: auto !important; } } @media (min-width: 640px) { .pr-pc-20 { padding-right: 20px !important; } } @media (min-width: 640px) { .mr-pc-20 { margin-right: 20px !important; } } @media (min-width: 640px) { .mr-pc-auto { margin-right: auto !important; } } @media (min-width: 640px) { .pr-pc-24 { padding-right: 24px !important; } } @media (min-width: 640px) { .mr-pc-24 { margin-right: 24px !important; } } @media (min-width: 640px) { .mr-pc-auto { margin-right: auto !important; } } @media (min-width: 640px) { .pr-pc-28 { padding-right: 28px !important; } } @media (min-width: 640px) { .mr-pc-28 { margin-right: 28px !important; } } @media (min-width: 640px) { .mr-pc-auto { margin-right: auto !important; } } @media (min-width: 640px) { .pr-pc-32 { padding-right: 32px !important; } } @media (min-width: 640px) { .mr-pc-32 { margin-right: 32px !important; } } @media (min-width: 640px) { .mr-pc-auto { margin-right: auto !important; } } @media (min-width: 640px) { .pr-pc-36 { padding-right: 36px !important; } } @media (min-width: 640px) { .mr-pc-36 { margin-right: 36px !important; } } @media (min-width: 640px) { .mr-pc-auto { margin-right: auto !important; } } @media (min-width: 640px) { .pr-pc-40 { padding-right: 40px !important; } } @media (min-width: 640px) { .mr-pc-40 { margin-right: 40px !important; } } @media (min-width: 640px) { .mr-pc-auto { margin-right: auto !important; } } @media (min-width: 640px) { .pr-pc-64 { padding-right: 64px !important; } } @media (min-width: 640px) { .mr-pc-64 { margin-right: 64px !important; } } @media (min-width: 640px) { .mr-pc-auto { margin-right: auto !important; } } @media (min-width: 640px) { .pr-pc-80 { padding-right: 80px !important; } } @media (min-width: 640px) { .mr-pc-80 { margin-right: 80px !important; } } @media (min-width: 640px) { .mr-pc-auto { margin-right: auto !important; } } @media (min-width: 640px) { .pr-pc-120 { padding-right: 120px !important; } } @media (min-width: 640px) { .mr-pc-120 { margin-right: 120px !important; } } @media (min-width: 640px) { .mr-pc-auto { margin-right: auto !important; } } .pb-0 { padding-bottom: 0px !important; } .mb-0 { margin-bottom: 0px !important; } .mb-auto { margin-bottom: auto !important; } .pb-4 { padding-bottom: 4px !important; } .mb-4 { margin-bottom: 4px !important; } .mb-auto { margin-bottom: auto !important; } .pb-8 { padding-bottom: 8px !important; } .mb-8 { margin-bottom: 8px !important; } .mb-auto { margin-bottom: auto !important; } .pb-12 { padding-bottom: 12px !important; } .mb-12 { margin-bottom: 12px !important; } .mb-auto { margin-bottom: auto !important; } .pb-16 { padding-bottom: 16px !important; } .mb-16 { margin-bottom: 16px !important; } .mb-auto { margin-bottom: auto !important; } .pb-20 { padding-bottom: 20px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-auto { margin-bottom: auto !important; } .pb-24 { padding-bottom: 24px !important; } .mb-24 { margin-bottom: 24px !important; } .mb-auto { margin-bottom: auto !important; } .pb-28 { padding-bottom: 28px !important; } .mb-28 { margin-bottom: 28px !important; } .mb-auto { margin-bottom: auto !important; } .pb-32 { padding-bottom: 32px !important; } .mb-32 { margin-bottom: 32px !important; } .mb-auto { margin-bottom: auto !important; } .pb-36 { padding-bottom: 36px !important; } .mb-36 { margin-bottom: 36px !important; } .mb-auto { margin-bottom: auto !important; } .pb-40 { padding-bottom: 40px !important; } .mb-40 { margin-bottom: 40px !important; } .mb-auto { margin-bottom: auto !important; } .pb-64 { padding-bottom: 64px !important; } .mb-64 { margin-bottom: 64px !important; } .mb-auto { margin-bottom: auto !important; } .pb-80 { padding-bottom: 80px !important; } .mb-80 { margin-bottom: 80px !important; } .mb-auto { margin-bottom: auto !important; } .pb-120 { padding-bottom: 120px !important; } .mb-120 { margin-bottom: 120px !important; } .mb-auto { margin-bottom: auto !important; } @media (min-width: 640px) { .pb-pc-0 { padding-bottom: 0px !important; } } @media (min-width: 640px) { .mb-pc-0 { margin-bottom: 0px !important; } } @media (min-width: 640px) { .mb-pc-auto { margin-bottom: auto !important; } } @media (min-width: 640px) { .pb-pc-4 { padding-bottom: 4px !important; } } @media (min-width: 640px) { .mb-pc-4 { margin-bottom: 4px !important; } } @media (min-width: 640px) { .mb-pc-auto { margin-bottom: auto !important; } } @media (min-width: 640px) { .pb-pc-8 { padding-bottom: 8px !important; } } @media (min-width: 640px) { .mb-pc-8 { margin-bottom: 8px !important; } } @media (min-width: 640px) { .mb-pc-auto { margin-bottom: auto !important; } } @media (min-width: 640px) { .pb-pc-12 { padding-bottom: 12px !important; } } @media (min-width: 640px) { .mb-pc-12 { margin-bottom: 12px !important; } } @media (min-width: 640px) { .mb-pc-auto { margin-bottom: auto !important; } } @media (min-width: 640px) { .pb-pc-16 { padding-bottom: 16px !important; } } @media (min-width: 640px) { .mb-pc-16 { margin-bottom: 16px !important; } } @media (min-width: 640px) { .mb-pc-auto { margin-bottom: auto !important; } } @media (min-width: 640px) { .pb-pc-20 { padding-bottom: 20px !important; } } @media (min-width: 640px) { .mb-pc-20 { margin-bottom: 20px !important; } } @media (min-width: 640px) { .mb-pc-auto { margin-bottom: auto !important; } } @media (min-width: 640px) { .pb-pc-24 { padding-bottom: 24px !important; } } @media (min-width: 640px) { .mb-pc-24 { margin-bottom: 24px !important; } } @media (min-width: 640px) { .mb-pc-auto { margin-bottom: auto !important; } } @media (min-width: 640px) { .pb-pc-28 { padding-bottom: 28px !important; } } @media (min-width: 640px) { .mb-pc-28 { margin-bottom: 28px !important; } } @media (min-width: 640px) { .mb-pc-auto { margin-bottom: auto !important; } } @media (min-width: 640px) { .pb-pc-32 { padding-bottom: 32px !important; } } @media (min-width: 640px) { .mb-pc-32 { margin-bottom: 32px !important; } } @media (min-width: 640px) { .mb-pc-auto { margin-bottom: auto !important; } } @media (min-width: 640px) { .pb-pc-36 { padding-bottom: 36px !important; } } @media (min-width: 640px) { .mb-pc-36 { margin-bottom: 36px !important; } } @media (min-width: 640px) { .mb-pc-auto { margin-bottom: auto !important; } } @media (min-width: 640px) { .pb-pc-40 { padding-bottom: 40px !important; } } @media (min-width: 640px) { .mb-pc-40 { margin-bottom: 40px !important; } } @media (min-width: 640px) { .mb-pc-auto { margin-bottom: auto !important; } } @media (min-width: 640px) { .pb-pc-64 { padding-bottom: 64px !important; } } @media (min-width: 640px) { .mb-pc-64 { margin-bottom: 64px !important; } } @media (min-width: 640px) { .mb-pc-auto { margin-bottom: auto !important; } } @media (min-width: 640px) { .pb-pc-80 { padding-bottom: 80px !important; } } @media (min-width: 640px) { .mb-pc-80 { margin-bottom: 80px !important; } } @media (min-width: 640px) { .mb-pc-auto { margin-bottom: auto !important; } } @media (min-width: 640px) { .pb-pc-120 { padding-bottom: 120px !important; } } @media (min-width: 640px) { .mb-pc-120 { margin-bottom: 120px !important; } } @media (min-width: 640px) { .mb-pc-auto { margin-bottom: auto !important; } } .pl-0 { padding-left: 0px !important; } .ml-0 { margin-left: 0px !important; } .ml-auto { margin-left: auto !important; } .pl-4 { padding-left: 4px !important; } .ml-4 { margin-left: 4px !important; } .ml-auto { margin-left: auto !important; } .pl-8 { padding-left: 8px !important; } .ml-8 { margin-left: 8px !important; } .ml-auto { margin-left: auto !important; } .pl-12 { padding-left: 12px !important; } .ml-12 { margin-left: 12px !important; } .ml-auto { margin-left: auto !important; } .pl-16 { padding-left: 16px !important; } .ml-16 { margin-left: 16px !important; } .ml-auto { margin-left: auto !important; } .pl-20 { padding-left: 20px !important; } .ml-20 { margin-left: 20px !important; } .ml-auto { margin-left: auto !important; } .pl-24 { padding-left: 24px !important; } .ml-24 { margin-left: 24px !important; } .ml-auto { margin-left: auto !important; } .pl-28 { padding-left: 28px !important; } .ml-28 { margin-left: 28px !important; } .ml-auto { margin-left: auto !important; } .pl-32 { padding-left: 32px !important; } .ml-32 { margin-left: 32px !important; } .ml-auto { margin-left: auto !important; } .pl-36 { padding-left: 36px !important; } .ml-36 { margin-left: 36px !important; } .ml-auto { margin-left: auto !important; } .pl-40 { padding-left: 40px !important; } .ml-40 { margin-left: 40px !important; } .ml-auto { margin-left: auto !important; } .pl-64 { padding-left: 64px !important; } .ml-64 { margin-left: 64px !important; } .ml-auto { margin-left: auto !important; } .pl-80 { padding-left: 80px !important; } .ml-80 { margin-left: 80px !important; } .ml-auto { margin-left: auto !important; } .pl-120 { padding-left: 120px !important; } .ml-120 { margin-left: 120px !important; } .ml-auto { margin-left: auto !important; } @media (min-width: 640px) { .pl-pc-0 { padding-left: 0px !important; } } @media (min-width: 640px) { .ml-pc-0 { margin-left: 0px !important; } } @media (min-width: 640px) { .ml-pc-auto { margin-left: auto !important; } } @media (min-width: 640px) { .pl-pc-4 { padding-left: 4px !important; } } @media (min-width: 640px) { .ml-pc-4 { margin-left: 4px !important; } } @media (min-width: 640px) { .ml-pc-auto { margin-left: auto !important; } } @media (min-width: 640px) { .pl-pc-8 { padding-left: 8px !important; } } @media (min-width: 640px) { .ml-pc-8 { margin-left: 8px !important; } } @media (min-width: 640px) { .ml-pc-auto { margin-left: auto !important; } } @media (min-width: 640px) { .pl-pc-12 { padding-left: 12px !important; } } @media (min-width: 640px) { .ml-pc-12 { margin-left: 12px !important; } } @media (min-width: 640px) { .ml-pc-auto { margin-left: auto !important; } } @media (min-width: 640px) { .pl-pc-16 { padding-left: 16px !important; } } @media (min-width: 640px) { .ml-pc-16 { margin-left: 16px !important; } } @media (min-width: 640px) { .ml-pc-auto { margin-left: auto !important; } } @media (min-width: 640px) { .pl-pc-20 { padding-left: 20px !important; } } @media (min-width: 640px) { .ml-pc-20 { margin-left: 20px !important; } } @media (min-width: 640px) { .ml-pc-auto { margin-left: auto !important; } } @media (min-width: 640px) { .pl-pc-24 { padding-left: 24px !important; } } @media (min-width: 640px) { .ml-pc-24 { margin-left: 24px !important; } } @media (min-width: 640px) { .ml-pc-auto { margin-left: auto !important; } } @media (min-width: 640px) { .pl-pc-28 { padding-left: 28px !important; } } @media (min-width: 640px) { .ml-pc-28 { margin-left: 28px !important; } } @media (min-width: 640px) { .ml-pc-auto { margin-left: auto !important; } } @media (min-width: 640px) { .pl-pc-32 { padding-left: 32px !important; } } @media (min-width: 640px) { .ml-pc-32 { margin-left: 32px !important; } } @media (min-width: 640px) { .ml-pc-auto { margin-left: auto !important; } } @media (min-width: 640px) { .pl-pc-36 { padding-left: 36px !important; } } @media (min-width: 640px) { .ml-pc-36 { margin-left: 36px !important; } } @media (min-width: 640px) { .ml-pc-auto { margin-left: auto !important; } } @media (min-width: 640px) { .pl-pc-40 { padding-left: 40px !important; } } @media (min-width: 640px) { .ml-pc-40 { margin-left: 40px !important; } } @media (min-width: 640px) { .ml-pc-auto { margin-left: auto !important; } } @media (min-width: 640px) { .pl-pc-64 { padding-left: 64px !important; } } @media (min-width: 640px) { .ml-pc-64 { margin-left: 64px !important; } } @media (min-width: 640px) { .ml-pc-auto { margin-left: auto !important; } } @media (min-width: 640px) { .pl-pc-80 { padding-left: 80px !important; } } @media (min-width: 640px) { .ml-pc-80 { margin-left: 80px !important; } } @media (min-width: 640px) { .ml-pc-auto { margin-left: auto !important; } } @media (min-width: 640px) { .pl-pc-120 { padding-left: 120px !important; } } @media (min-width: 640px) { .ml-pc-120 { margin-left: 120px !important; } } @media (min-width: 640px) { .ml-pc-auto { margin-left: auto !important; } } .py-0 { padding-top: 0px !important; padding-bottom: 0px !important; } .my-0 { margin-top: 0px !important; margin-bottom: 0px !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .py-4 { padding-top: 4px !important; padding-bottom: 4px !important; } .my-4 { margin-top: 4px !important; margin-bottom: 4px !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .py-8 { padding-top: 8px !important; padding-bottom: 8px !important; } .my-8 { margin-top: 8px !important; margin-bottom: 8px !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .py-12 { padding-top: 12px !important; padding-bottom: 12px !important; } .my-12 { margin-top: 12px !important; margin-bottom: 12px !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .py-16 { padding-top: 16px !important; padding-bottom: 16px !important; } .my-16 { margin-top: 16px !important; margin-bottom: 16px !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .py-20 { padding-top: 20px !important; padding-bottom: 20px !important; } .my-20 { margin-top: 20px !important; margin-bottom: 20px !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .py-24 { padding-top: 24px !important; padding-bottom: 24px !important; } .my-24 { margin-top: 24px !important; margin-bottom: 24px !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .py-28 { padding-top: 28px !important; padding-bottom: 28px !important; } .my-28 { margin-top: 28px !important; margin-bottom: 28px !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .py-32 { padding-top: 32px !important; padding-bottom: 32px !important; } .my-32 { margin-top: 32px !important; margin-bottom: 32px !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .py-36 { padding-top: 36px !important; padding-bottom: 36px !important; } .my-36 { margin-top: 36px !important; margin-bottom: 36px !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .py-40 { padding-top: 40px !important; padding-bottom: 40px !important; } .my-40 { margin-top: 40px !important; margin-bottom: 40px !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .py-64 { padding-top: 64px !important; padding-bottom: 64px !important; } .my-64 { margin-top: 64px !important; margin-bottom: 64px !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .py-80 { padding-top: 80px !important; padding-bottom: 80px !important; } .my-80 { margin-top: 80px !important; margin-bottom: 80px !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .py-120 { padding-top: 120px !important; padding-bottom: 120px !important; } .my-120 { margin-top: 120px !important; margin-bottom: 120px !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } @media (min-width: 640px) { .py-pc-0 { padding-top: 0px !important; padding-bottom: 0px !important; } } @media (min-width: 640px) { .my-pc-0 { margin-top: 0px !important; margin-bottom: 0px !important; } } @media (min-width: 640px) { .my-pc-auto { margin-top: auto !important; margin-bottom: auto !important; } } @media (min-width: 640px) { .py-pc-4 { padding-top: 4px !important; padding-bottom: 4px !important; } } @media (min-width: 640px) { .my-pc-4 { margin-top: 4px !important; margin-bottom: 4px !important; } } @media (min-width: 640px) { .my-pc-auto { margin-top: auto !important; margin-bottom: auto !important; } } @media (min-width: 640px) { .py-pc-8 { padding-top: 8px !important; padding-bottom: 8px !important; } } @media (min-width: 640px) { .my-pc-8 { margin-top: 8px !important; margin-bottom: 8px !important; } } @media (min-width: 640px) { .my-pc-auto { margin-top: auto !important; margin-bottom: auto !important; } } @media (min-width: 640px) { .py-pc-12 { padding-top: 12px !important; padding-bottom: 12px !important; } } @media (min-width: 640px) { .my-pc-12 { margin-top: 12px !important; margin-bottom: 12px !important; } } @media (min-width: 640px) { .my-pc-auto { margin-top: auto !important; margin-bottom: auto !important; } } @media (min-width: 640px) { .py-pc-16 { padding-top: 16px !important; padding-bottom: 16px !important; } } @media (min-width: 640px) { .my-pc-16 { margin-top: 16px !important; margin-bottom: 16px !important; } } @media (min-width: 640px) { .my-pc-auto { margin-top: auto !important; margin-bottom: auto !important; } } @media (min-width: 640px) { .py-pc-20 { padding-top: 20px !important; padding-bottom: 20px !important; } } @media (min-width: 640px) { .my-pc-20 { margin-top: 20px !important; margin-bottom: 20px !important; } } @media (min-width: 640px) { .my-pc-auto { margin-top: auto !important; margin-bottom: auto !important; } } @media (min-width: 640px) { .py-pc-24 { padding-top: 24px !important; padding-bottom: 24px !important; } } @media (min-width: 640px) { .my-pc-24 { margin-top: 24px !important; margin-bottom: 24px !important; } } @media (min-width: 640px) { .my-pc-auto { margin-top: auto !important; margin-bottom: auto !important; } } @media (min-width: 640px) { .py-pc-28 { padding-top: 28px !important; padding-bottom: 28px !important; } } @media (min-width: 640px) { .my-pc-28 { margin-top: 28px !important; margin-bottom: 28px !important; } } @media (min-width: 640px) { .my-pc-auto { margin-top: auto !important; margin-bottom: auto !important; } } @media (min-width: 640px) { .py-pc-32 { padding-top: 32px !important; padding-bottom: 32px !important; } } @media (min-width: 640px) { .my-pc-32 { margin-top: 32px !important; margin-bottom: 32px !important; } } @media (min-width: 640px) { .my-pc-auto { margin-top: auto !important; margin-bottom: auto !important; } } @media (min-width: 640px) { .py-pc-36 { padding-top: 36px !important; padding-bottom: 36px !important; } } @media (min-width: 640px) { .my-pc-36 { margin-top: 36px !important; margin-bottom: 36px !important; } } @media (min-width: 640px) { .my-pc-auto { margin-top: auto !important; margin-bottom: auto !important; } } @media (min-width: 640px) { .py-pc-40 { padding-top: 40px !important; padding-bottom: 40px !important; } } @media (min-width: 640px) { .my-pc-40 { margin-top: 40px !important; margin-bottom: 40px !important; } } @media (min-width: 640px) { .my-pc-auto { margin-top: auto !important; margin-bottom: auto !important; } } @media (min-width: 640px) { .py-pc-64 { padding-top: 64px !important; padding-bottom: 64px !important; } } @media (min-width: 640px) { .my-pc-64 { margin-top: 64px !important; margin-bottom: 64px !important; } } @media (min-width: 640px) { .my-pc-auto { margin-top: auto !important; margin-bottom: auto !important; } } @media (min-width: 640px) { .py-pc-80 { padding-top: 80px !important; padding-bottom: 80px !important; } } @media (min-width: 640px) { .my-pc-80 { margin-top: 80px !important; margin-bottom: 80px !important; } } @media (min-width: 640px) { .my-pc-auto { margin-top: auto !important; margin-bottom: auto !important; } } @media (min-width: 640px) { .py-pc-120 { padding-top: 120px !important; padding-bottom: 120px !important; } } @media (min-width: 640px) { .my-pc-120 { margin-top: 120px !important; margin-bottom: 120px !important; } } @media (min-width: 640px) { .my-pc-auto { margin-top: auto !important; margin-bottom: auto !important; } } .px-0 { padding-left: 0px !important; padding-right: 0px !important; } .mx-0 { margin-left: 0px !important; margin-right: 0px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .px-4 { padding-left: 4px !important; padding-right: 4px !important; } .mx-4 { margin-left: 4px !important; margin-right: 4px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .px-8 { padding-left: 8px !important; padding-right: 8px !important; } .mx-8 { margin-left: 8px !important; margin-right: 8px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .px-12 { padding-left: 12px !important; padding-right: 12px !important; } .mx-12 { margin-left: 12px !important; margin-right: 12px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .px-16 { padding-left: 16px !important; padding-right: 16px !important; } .mx-16 { margin-left: 16px !important; margin-right: 16px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .px-20 { padding-left: 20px !important; padding-right: 20px !important; } .mx-20 { margin-left: 20px !important; margin-right: 20px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .px-24 { padding-left: 24px !important; padding-right: 24px !important; } .mx-24 { margin-left: 24px !important; margin-right: 24px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .px-28 { padding-left: 28px !important; padding-right: 28px !important; } .mx-28 { margin-left: 28px !important; margin-right: 28px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .px-32 { padding-left: 32px !important; padding-right: 32px !important; } .mx-32 { margin-left: 32px !important; margin-right: 32px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .px-36 { padding-left: 36px !important; padding-right: 36px !important; } .mx-36 { margin-left: 36px !important; margin-right: 36px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .px-40 { padding-left: 40px !important; padding-right: 40px !important; } .mx-40 { margin-left: 40px !important; margin-right: 40px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .px-64 { padding-left: 64px !important; padding-right: 64px !important; } .mx-64 { margin-left: 64px !important; margin-right: 64px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .px-80 { padding-left: 80px !important; padding-right: 80px !important; } .mx-80 { margin-left: 80px !important; margin-right: 80px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .px-120 { padding-left: 120px !important; padding-right: 120px !important; } .mx-120 { margin-left: 120px !important; margin-right: 120px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } @media (min-width: 640px) { .px-pc-0 { padding-left: 0px !important; padding-right: 0px !important; } } @media (min-width: 640px) { .mx-pc-0 { margin-left: 0px !important; margin-right: 0px !important; } } @media (min-width: 640px) { .mx-pc-auto { margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 640px) { .px-pc-4 { padding-left: 4px !important; padding-right: 4px !important; } } @media (min-width: 640px) { .mx-pc-4 { margin-left: 4px !important; margin-right: 4px !important; } } @media (min-width: 640px) { .mx-pc-auto { margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 640px) { .px-pc-8 { padding-left: 8px !important; padding-right: 8px !important; } } @media (min-width: 640px) { .mx-pc-8 { margin-left: 8px !important; margin-right: 8px !important; } } @media (min-width: 640px) { .mx-pc-auto { margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 640px) { .px-pc-12 { padding-left: 12px !important; padding-right: 12px !important; } } @media (min-width: 640px) { .mx-pc-12 { margin-left: 12px !important; margin-right: 12px !important; } } @media (min-width: 640px) { .mx-pc-auto { margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 640px) { .px-pc-16 { padding-left: 16px !important; padding-right: 16px !important; } } @media (min-width: 640px) { .mx-pc-16 { margin-left: 16px !important; margin-right: 16px !important; } } @media (min-width: 640px) { .mx-pc-auto { margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 640px) { .px-pc-20 { padding-left: 20px !important; padding-right: 20px !important; } } @media (min-width: 640px) { .mx-pc-20 { margin-left: 20px !important; margin-right: 20px !important; } } @media (min-width: 640px) { .mx-pc-auto { margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 640px) { .px-pc-24 { padding-left: 24px !important; padding-right: 24px !important; } } @media (min-width: 640px) { .mx-pc-24 { margin-left: 24px !important; margin-right: 24px !important; } } @media (min-width: 640px) { .mx-pc-auto { margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 640px) { .px-pc-28 { padding-left: 28px !important; padding-right: 28px !important; } } @media (min-width: 640px) { .mx-pc-28 { margin-left: 28px !important; margin-right: 28px !important; } } @media (min-width: 640px) { .mx-pc-auto { margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 640px) { .px-pc-32 { padding-left: 32px !important; padding-right: 32px !important; } } @media (min-width: 640px) { .mx-pc-32 { margin-left: 32px !important; margin-right: 32px !important; } } @media (min-width: 640px) { .mx-pc-auto { margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 640px) { .px-pc-36 { padding-left: 36px !important; padding-right: 36px !important; } } @media (min-width: 640px) { .mx-pc-36 { margin-left: 36px !important; margin-right: 36px !important; } } @media (min-width: 640px) { .mx-pc-auto { margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 640px) { .px-pc-40 { padding-left: 40px !important; padding-right: 40px !important; } } @media (min-width: 640px) { .mx-pc-40 { margin-left: 40px !important; margin-right: 40px !important; } } @media (min-width: 640px) { .mx-pc-auto { margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 640px) { .px-pc-64 { padding-left: 64px !important; padding-right: 64px !important; } } @media (min-width: 640px) { .mx-pc-64 { margin-left: 64px !important; margin-right: 64px !important; } } @media (min-width: 640px) { .mx-pc-auto { margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 640px) { .px-pc-80 { padding-left: 80px !important; padding-right: 80px !important; } } @media (min-width: 640px) { .mx-pc-80 { margin-left: 80px !important; margin-right: 80px !important; } } @media (min-width: 640px) { .mx-pc-auto { margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 640px) { .px-pc-120 { padding-left: 120px !important; padding-right: 120px !important; } } @media (min-width: 640px) { .mx-pc-120 { margin-left: 120px !important; margin-right: 120px !important; } } @media (min-width: 640px) { .mx-pc-auto { margin-left: auto !important; margin-right: auto !important; } } .w-25 { width: 25% !important; } .h-25 { height: 25% !important; } .w-50 { width: 50% !important; } .h-50 { height: 50% !important; } .w-75 { width: 75% !important; } .h-75 { height: 75% !important; } .w-100 { width: 100% !important; } .h-100 { height: 100% !important; } .w-auto { width: auto !important; } .h-auto { height: auto !important; } .pointer-events-none { pointer-events: none; } .cursor-pointer { cursor: pointer; } html { scroll-behavior: smooth; height: 100%; } body { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100%; } @media (min-width: 640px) { body { min-width: 1100px; } } .font-reset { font-family: var(--font-primary); } .font-meiryo { font-family: var(--font-meiryo); } .font-barlow { font-family: var(--font-barlow); } @media (min-width: 640px) { .sp-show { display: none; } } .pc-show { display: none; } @media (min-width: 640px) { .pc-show { display: inherit; } } /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/layout/components/HeaderTopAnnouncement.scss ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .header-top-announcement { font-size: 9px; color: var(--text-on-dark); padding: 14px 6px; background: var(--primary); } @media (min-width: 640px) { .header-top-announcement { font-size: 12px; } } /*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/layout/SimpleLayout/SimpleHeader/SimpleHeader.scss ***! \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .simple-header { border-bottom: 1px solid #ddd; } .simple-header-main { height: 45px; width: 100%; display: flex; align-items: center; padding: 0 20px; } @media (min-width: 640px) { .simple-header-main { height: 75px; padding: 0; } } .simple-header-logo { width: 116px; height: 23px; display: flex; align-items: center; } @media (min-width: 640px) { .simple-header-logo { width: 209px; height: 42px; } } /*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/layout/SimpleLayout/SimpleFooter.tsx/SimpleFooter.scss ***! \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .simple-footer { padding: 24px 20px; color: var(--text-on-dark); background: var(--primary); text-align: center; } @media (min-width: 640px) { .simple-footer { padding: 40px; } } .simple-footer__text { font-size: 13px; } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/components/layout/SimpleLayout/SimpleLayout.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .simple-layout { display: flex; flex-direction: column; min-height: 100%; } .simple-layout__main { flex-grow: 1; } .bordered-block { border: 4px solid #f5f5f5; padding: 20px; } @media (min-width: 640px) { .bordered-block { padding: 40px; } }