.auth-ui-anchor {
    font-family: var(--bodyFontFamily);
    font-size: var(--baseBodySize);
    margin-bottom: var(--anchorBottomMargin);
    color: var(--anchorTextColor);
    display: block;
    text-align: center;
    text-decoration: underline;
  }
  
.auth-ui-anchor:hover {
    color: var(--anchorTextHoverColor);
}
  

/* Button styles */

.auth-ui-button {
    font-family: var(--buttonFontFamily);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--borderRadiusButton);
    font-size: var(--baseButtonSize);
    padding: var(--buttonPadding);
    cursor: pointer;
    border-width: var(--buttonBorderWidth);
    border-style: solid;
    width: 100%;
    transition-property: background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 100ms;
  }
  
  .auth-ui-button.auth-ui-button-color-default {
    background-color: var(--defaultButtonBackground);
    color: var(--defaultButtonText);
    border-color: var(--defaultButtonBorder);
  }
  
  .auth-ui-button.auth-ui-button-color-default:hover {
    background-color: var(--defaultButtonBackgroundHover);
  }
  
  .auth-ui-button.auth-ui-button-color-primary {
    background-color: var(--brand);
    color: var(--brandButtonText);
    border-color: var(--brandAccent);
  }
  
  .auth-ui-button.auth-ui-button-color-primary:hover {
    background-color: var(--brandAccent);
  }
  
  /* Container styles */

  .auth-ui-container {
    display: flex;
    gap: 4px;
  }
  
  .auth-ui-container.auth-ui-container-direction-horizontal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  }
  
  .auth-ui-container.auth-ui-container-direction-vertical {
    flex-direction: column;
    margin: 8px 0;
  }
  
  .auth-ui-container.auth-ui-container-gap-small {
    gap: 4px;
  }
  
  .auth-ui-container.auth-ui-container-gap-medium {
    gap: 8px;
  }
  
  .auth-ui-container.auth-ui-container-gap-large {
    gap: 16px;
  }
  

  /* divider */
  .auth-ui-divider {
    background: var(--dividerBackground);
    display: block;
    margin: 16px 0;
    height: 1px;
    width: 100%;
  }

  /* input */

  .auth-ui-input {
    font-family: var(--inputFontFamily);
    background: var(--inputBackground);
    border-radius: var(--inputBorderRadius);
    padding: var(--inputPadding);
    cursor: text;
    border-width: var(--inputBorderWidth);
    border-color: var(--inputBorder);
    border-style: solid;
    font-size: var(--baseInputSize);
    width: 100%;
    color: var(--inputText);
    box-sizing: border-box;
    transition-property: background-color, border;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 100ms;
  }
  
  .auth-ui-input:hover {
    border-color: var(--inputBorderHover);
    outline: none;
  }
  
  .auth-ui-input:focus {
    border-color: var(--inputBorderFocus);
    outline: none;
  }
  
  .auth-ui-input::placeholder {
    color: var(--inputPlaceholder);
    letter-spacing: initial;
  }
  
  .auth-ui-input.auth-ui-input-type-default {
    letter-spacing: 0px;
  }
  
  .auth-ui-input.auth-ui-input-type-password {
    letter-spacing: 6px;
  }
  
  /* label */

  .auth-ui-label {
    font-family: var(--labelFontFamily);
    font-size: var(--baseLabelSize);
    margin-bottom: var(--labelBottomMargin);
    color: var(--inputLabelText);
    display: block;
  }
  
  /* loader */

  .auth-ui-loader {
    border-radius: 50%;
    width: 10em;
    height: 10em;
    margin: 60px auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
  }
  
  .auth-ui-loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
  }
  
  /* message */

  .auth-ui-message {
    font-family: var(--bodyFontFamily);
    font-size: var(--baseBodySize);
    margin-bottom: var(--labelBottomMargin);
    display: block;
    text-align: center;
  }
  
  .auth-ui-message.auth-ui-message-color-danger {
    color: var(--messageTextDanger);
  }
  
  .auth-ui-message.auth-ui-message-color-default {
    color: var(--messageText);
  }

  /* icon */

  .auth-ui-icon{
    height: 21px;
    width: 21px;
  }
  
/* themes */

.auth-ui-wrapper.default-theme {
  /* Colors */
  --brand: hsl(153 60.0% 53.0%);
  --brandAccent: hsl(154 54.8% 45.1%);
  --brandButtonText: white;
  --defaultButtonBackground: white;
  --defaultButtonBackgroundHover: #eaeaea;
  --defaultButtonBorder: lightgray;
  --defaultButtonText: gray;
  --dividerBackground: #eaeaea;
  --inputBackground: transparent;
  --inputBorder: lightgray;
  --inputBorderHover: gray;
  --inputBorderFocus: gray;
  --inputText: black;
  --inputLabelText: gray;
  --inputPlaceholder: darkgray;
  --messageText: gray;
  --messageTextDanger: red;
  --anchorTextColor: gray;
  --anchorTextHoverColor: darkgray;

  /* Space */
  --spaceSmall: 4px;
  --spaceMedium: 8px;
  --spaceLarge: 16px;
  --labelBottomMargin: 8px;
  --anchorBottomMargin: 4px;
  --emailInputSpacing: 4px;
  --socialAuthSpacing: 4px;
  --buttonPadding: 10px 15px;
  --inputPadding: 10px 15px;

  /* Font Sizes */
  --baseBodySize: 13px;
  --baseInputSize: 14px;
  --baseLabelSize: 14px;
  --baseButtonSize: 14px;

  /* Fonts */
  --bodyFontFamily: ui-sans-serif, sans-serif;
  --buttonFontFamily: ui-sans-serif, sans-serif;
  --inputFontFamily: ui-sans-serif, sans-serif;
  --labelFontFamily: ui-sans-serif, sans-serif;

  /* Border Widths */
  --buttonBorderWidth:  1px;
  --inputBorderWidth:   1px;

  /* Radii */
  --borderRadiusButton:   4px;
  --buttonBorderRadius:   4px;
  --inputBorderRadius:  4px;
}

.auth-ui-wrapper.default-theme.default-dark-theme{
  --brandButtonText: white;
--defaultButtonBackground: #2e2e2e;
--defaultButtonBackgroundHover: #3e3e3e;
--defaultButtonBorder: #3e3e3e;
--defaultButtonText: white;
--dividerBackground: #2e2e2e;
--inputBackground: #1e1e1e;
--inputBorder: #3e3e3e;
--inputBorderHover: gray;
--inputBorderFocus: gray;
--inputText: white;
--inputPlaceholder: darkgray;
}

.auth-ui-wrapper.minimal-theme {
  /* Colors */
  --brand: black;
  --brandAccent: #333333;
  --brandButtonText: white;
  --defaultButtonBackground: white;
  --defaultButtonBorder: lightgray;
  --defaultButtonText: gray;
  --dividerBackground: #eaeaea;
  --inputBackground: transparent;
  --inputBorder: lightgray;
  --inputText: black;
  --inputPlaceholder: darkgray;

  /* Space */
  --spaceSmall:   4px;
  --spaceMedium: 8px;
  --spaceLarge:   16px;

  /* Font Sizes */
  --baseInputSize:  14px;
  --baseLabelSize: 12px;

  /* Fonts */
  --bodyFontFamily: '';
  --inputFontFamily: '';
  --buttonFontFamily: '';
  --labelFontFamily: '';
}


.auth-ui-wrapper.minimal-theme.minimal-dark-theme {
  /* Colors */
  --brand: white;
  --brandAccent: #afafaf;
  --brandButtonText: black;
  --defaultButtonBackground: #080808;
  --defaultButtonBorder: black;
  --defaultButtonText: white;
  --dividerBackground: black;
  --inputBackground: transparent;
  --inputBorder: gray;
  --inputText: black;
  --inputPlaceholder: darkgray;
}