@font-face {
  font-family: 'DeLonghiSans';
  src: url('fonts/DeLonghiSansRegular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DeLonghiSans';
  src: url('fonts/DeLonghiSansMedium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'DeLonghiSans';
  src: url('fonts/DeLonghiSansBold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

:root {
  /* Colors */
  --color-brand: #266BBF;
  --color-white: #ffffff;
  --color-label: #636363;
  --color-border: #000000;
  --color-divider: #c9c9c9;
  --color-error: #ce4635;

  /* Typography */
  --font-stack: 'DeLonghiSans', Arial, sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.75rem;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-xl: 3rem;

  /* Border & Radius */
  --radius-sm: 0.25rem;
  --radius-pill: 100px;
}

*,
*:before,
*:after {
  font-family: var(--font-stack) !important;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  text-align: left;
}

body {
  margin: 0;
  padding: var(--spacing-xl) var(--spacing-md);
}

/* Gigya Custom CSS */

.gigya-layout-row {
  display: flex;
  flex-direction: column;
}

.gigya-input-submit {
  background-color: var(--color-brand);
  border-radius: var(--radius-pill);
  border: none;
  color: var(--color-white);
  padding: var(--spacing-sm) var(--spacing-xl);
  margin: var(--spacing-xs) 0;
  font-size: var(--font-size-base);
  font-weight: 600;
}

.gigya-label {
  position: absolute;
  left: var(--spacing-sm);
  top: 14px;
  background-color: var(--color-white);
  z-index: 100;

  .gigya-label-text,
  .gigya-required-display {
    color: var(--color-label) !important;
    font-size: var(--font-size-sm) !important;
  }
}

.gigya-password-input-container,
.gigya-input-text,
.gigya-input-password {
  width: 100% !important;
}

.gigya-input-text,
.gigya-input-password {
  padding: var(--spacing-sm) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-base) !important;
}

.gigya-composite-control-textbox:has(input:focus) .gigya-label,
.gigya-composite-control-textbox:has(input:not(:placeholder-shown)) .gigya-label,
.gigya-composite-control-textbox:has(input:-webkit-autofill) .gigya-label,
.gigya-composite-control-password:has(input:focus) .gigya-label,
.gigya-composite-control-password:has(input:not(:placeholder-shown)) .gigya-label,
.gigya-composite-control-password:has(input:-webkit-autofill) .gigya-label {
  top: 0;
  transform: translateY(-50%);
  transition: all 0.1s ease-out;

  .gigya-label-text,
  .gigya-required-display {
    font-size: var(--font-size-xs) !important;
  }
}

/* Gigya reset overrides */
.gigya-reset *,
div.gigya-reset,
.gigya-reset span,
.gigya-reset a:hover,
.gigya-reset a:visited,
.gigya-reset a:link,
.gigya-reset a:active {
  font-size: unset !important;
  color: unset !important;
}

/* Hide placeholder text */
.gigya-input-text::placeholder,
.gigya-input-password::placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

.gigya-error-msg,
#gigya-error-msg-gigya-login-form-password,
#gigya-error-msg-gigya-login-form-loginID,
#gigya-error-msg-gigya-reset-password-form-loginID {
  font-size: var(--font-size-xs) !important;
  margin-top: var(--spacing-xs) !important;
  color: var(--color-error) !important;
}

.gigya-login-providers-container {
  width: 100% !important;
}

.gigya-screen .gigya-composite-control-password-peek .gigya-show-password-button {
  width: auto !important;
  padding: var(--spacing-sm);
}

/* DLG Custom CSS */

.dlg-input {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: var(--spacing-xs) 0 !important;
}

.dlg-form-link {
  color: var(--color-brand);
  font-size: var(--font-size-sm);
  margin: var(--spacing-xs) 0;
}

.dlg-separator {
  border-bottom: 1px solid var(--color-divider);
  margin: var(--spacing-md) 0;
}

.dlg-title,
.dlg-paragraph {
  margin: 0 0 var(--spacing-md) 0;
  display: block;
}

.dlg-loader-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.dlg-loader {
  display: flex;
  align-items: center;
  font-size: var(--font-size-base);
  gap: var(--spacing-xs);
}

.dlg-icon-loader {
  width: 1.25rem;
  height: 1.25rem;
  border: 3px solid var(--color-brand);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}