.focus-screen__overlay,
.focus-screen__container {
  inset: 0;
  position: fixed;
}

.focus-screen__container {
  display: flex;
  z-index: 110; /* Display over the trial indication badge. */
}

.focus-screen__overlay {
  background: var(--prism-gradient-background-brand-default);
}

.focus-screen__header {
  align-items: center;
  display: flex;
  height: 76.5px;
  justify-content: space-between;
  padding: var(--prism-spacing-800) 48px 0 48px;
}

.focus-screen__dialog {
  background-color: var(--prism-color-elevation-surface);
  border-radius: var(--border-radius-400);
  box-shadow: var(--prism-shadow-brand-300);
  display: flex;
  flex-direction: column;
  margin: auto;
  max-height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.focus-screen__dialog-footer {
  align-items: center;
  border-top: 1px solid var(--prism-color-border-neutral-default);
  display: flex;
  height: 72px;
  justify-content: space-between;
}

.focus-screen__dialog-body {
  flex: 1;
  overflow: hidden;
}

.focus-screen__dialog--small {
  height: 400px;
  min-width: 600px;
  width: 600px;
}

.focus-screen__dialog--medium,
.focus-screen__dialog--large {
  min-height: 600px;
}

@media (width >= 1024px) and (width <= 1375px) {
  .focus-screen__dialog--medium,
  .focus-screen__dialog--large {
    height: 732px;
    width: 1024px;
  }
}

@media (width >= 1376px) {
  .focus-screen__dialog--large {
    height: 780px;
    width: 1376px;
  }
}

.illustration {
  display: flex;
}

.illustration svg {
  /* Required for Safari to fill up the icon container */
  flex-grow: 1;
}

.phone-number-input__error {
  align-items: center;
  color: var(--prism-color-text-critical-default);
  display: flex;
  min-height: 20px;
}

.phone-number-input .combo-select-error {
  /* stylelint-disable-next-line declaration-no-important */
  border: 2px solid var(--input-error-border-color) !important; /* same as prism-input error border color */
}

.step-indicator {
  height: 12px;
  position: relative;
  width: 100%;
}

.step-indicator--small {
  height: 8px;
}

.step-indicator__background,
.step-indicator__progress,
.step-indicator__tick-container {
  border-radius: var(--border-radius-pill);
  bottom: 0;
  height: 12px;
  left: 0;
  pointer-events: none;
  position: absolute;
}

.step-indicator__background {
  background-color: var(--prism-color-general-neutral-200);
  width: 100%;
}

.step-indicator__progress {
  background-color: var(--prism-color-icon-brand-default);
}

.step-indicator__progress--not-full {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.step-indicator__tick-container {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.step-indicator__tick {
  background-color: var(--prism-color-text-inverse);
  height: 12px;
  width: 2px;
}

.step-indicator--small .step-indicator__background,
.step-indicator--small .step-indicator__progress,
.step-indicator--small .step-indicator__tick-container {
  height: 8px;
}

.step-indicator--small .step-indicator__tick {
  height: 8px;
}

.step-indicator--success .step-indicator__progress {
  background-color: var(--prism-color-icon-success-default);
}

/* Hide first and last tick. */
.step-indicator__tick:first-of-type,
.step-indicator__tick:last-of-type {
  background-color: transparent;
}

.tick-slider {
  position: relative;
  width: 100%;
}

.tick-slider__background,
.tick-slider__progress,
.tick-slider__tick-container {
  border-radius: var(--border-radius-pill);
  bottom: 5px;
  height: 12px;
  left: 0;
  pointer-events: none;
  position: absolute;
}

.tick-slider__background {
  background-color: var(--prism-color-chart-neutral-figure-empty);
  width: 100%;
}

.tick-slider__progress {
  background-color: var(--prism-color-interactive-background-primary-idle);
  transition: width 0.25s;
}

.tick-slider__tick-container {
  align-items: center;
  display: flex;
  justify-content: space-between;
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
  padding: 0 10px;
  width: 100%;
}

.tick-slider__tick {
  background-color: var(--prism-color-text-inverse);
  height: 12px;
  width: 2px;
}

/* Hide first and last tick. */
.tick-slider__tick:first-of-type,
.tick-slider__tick:last-of-type {
  background-color: transparent;
}

/* Slider */
.tick-slider input[type="range"] {
  appearance: none;
  background: transparent;
  margin: 5px 0;
  outline: none;
  width: 100%;
}

/* stylelint-disable-next-line at-rule-no-deprecated */
@document url-prefix("") {
  .tick-slider input[type="range"] {
    margin: -1px 0;
  }
}

/* Handle */
.tick-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: var(--prism-color-interactive-background-primary-idle);
  border: 3px solid var(--prism-color-elevation-surface);
  border-radius: var(--border-radius-circle);
  box-shadow: var(--prism-shadow-neutral-100);
  cursor: pointer;
  height: 20px;
  margin-top: -4px;
  transform: scale(1);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 20px;
}

.tick-slider input[type="range"]:hover::-webkit-slider-thumb,
.tick-slider input[type="range"]:focus::-webkit-slider-thumb {
  transform: scale(1.2);
}

.tick-slider input[type="range"]::-moz-range-thumb {
  appearance: none;
  background: var(--prism-color-interactive-background-primary-idle);
  border: 3px solid var(--prism-color-elevation-surface);
  border-radius: var(--border-radius-circle);
  box-shadow: var(--prism-shadow-neutral-100);
  cursor: pointer;
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
  height: 15px;
  transform: scale(1);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
  width: 15px;
}

.tick-slider input[type="range"]:hover::-moz-range-thumb,
.tick-slider input[type="range"]:focus::-moz-range-thumb {
  transform: scale(1.2);
}

/* Track */
.tick-slider input[type="range"]::-webkit-slider-runnable-track {
  background: none;
  border-radius: var(--border-radius-pill);
  cursor: pointer;
  height: 12px;
  width: 100%;
}

.tick-slider input[type="range"]::-moz-range-track {
  background: none;
  border-radius: var(--border-radius-pill);
  cursor: pointer;
  height: 12px;
  width: 100%;
}

.tick-slider input[type="range"]:focus::-webkit-slider-runnable-track {
  background: none;
}

.tick-slider input[type="range"]:active::-webkit-slider-runnable-track {
  background: none;
}

.google-maps-zoom-control-wrapper {
  padding: var(--prism-spacing-300);
}

.google-maps-zoom-control {
  background-color: var(--prism-color-elevation-surface);
  border-radius: var(--border-radius-100);
  fill: var(--prism-color-icon-neutral-default);
  height: 80px;
  width: 40px;
}

.google-maps-zoom-control-button {
  background-color: var(--prism-color-elevation-surface);
  border: 1px solid var(--prism-color-border-neutral-default);
  height: 40px;
  width: 40px;
}

.google-maps-zoom-control-button:first-of-type {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.google-maps-zoom-control-button:last-of-type {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

nav.tabs {
  background-color: var(--prism-color-elevation-surface);
  border-bottom: 1px solid var(--prism-color-border-neutral-default);
  height: 50px;
  line-height: 50px;
  width: 100%;
}

nav.tabs .tab-header-after {
  margin-left: auto;
  padding-right: var(--prism-spacing-400);
}

nav.tabs ol {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-left: var(--prism-spacing-500);
  text-align: left;
}

nav.tabs ol li.tab {
  padding-right: var(--prism-spacing-500);
}

nav.tabs ol li.tab a {
  /* To prevent glitching when hovering or selecting a tab, i added the same border as the active state in white */
  border-bottom: 2px solid var(--prism-color-elevation-surface);
  color: var(--prism-color-text-neutral-subdued);
  cursor: pointer;
  display: flex;
  font-size: var(--prism-typography-text-300-regular-font-size);

  /* Since 50px is the same height as the parent, the border off the parent will be covered by the border of the children. To prevent this, i made the children 1px smaller. */
  height: 49px;
  line-height: 50px;
}

nav.tabs ol li.tab a:hover,
nav.tabs ol li.tab a.active {
  color: var(--prism-color-interactive-text-primary-hover);
}

nav.tabs ol li.tab a.active {
  border-bottom: 2px solid var(--prism-color-border-info-emphasis);
  font-weight: var(--prism-typography-text-300-bold-font-weight);
}



.password-conditions {
  color: var(--prism-color-text-neutral-default);
  line-height: 20px;
  margin-bottom: 0;
}

.password-conditions__base,
.password-conditions__extra {
  margin-bottom: var(--prism-spacing-200);
}

.password-conditions__extra {
  margin-top: var(--prism-spacing-400);
}

.login-wrapper-container {
  background-color: var(--prism-color-background-neutral-subdued);
}

.login-wrapper {
  align-items: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: calc(100vh - 1px);
  overflow: hidden;
  position: relative;
}

.login-wrapper__left-side {
  padding: 0 100px;
  z-index: 2;
}

.login-wrapper__tagline {
  color: var(--prism-color-text-neutral-emphasis);
  font-size: 39px;
  font-weight: 500;
  line-height: 1.2;
  max-width: 500px;
}

.login-wrapper__content {
  border-radius: var(--border-radius-100);
  position: relative;
  width: 400px; /* Fixed width as per Figma */
  z-index: 1;
}

.sun-wrapper {
  align-items: center;
  display: flex;
  height: 700px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  z-index: -1;
}

.sun {
  animation: rotate-sun 15s infinite linear;
  /* stylelint-disable color-no-hex, declaration-property-value-no-unknown */
  background: radial-gradient(
    69.89% 1000% at 6.33% 70.61%,
    #f88640 0%,
    #fcce84 100%
  );
  /* stylelint-enable color-no-hex, declaration-property-value-no-unknown */
  border-radius: 100%;
  /* stylelint-disable-next-line color-no-hex */
  filter: blur(150px) drop-shadow(24px 24px 24px #ff9552) saturate(1.2);
  inset: 0;
  position: absolute;
}

@keyframes rotate-sun {
  0% {
    transform: rotate(0) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.1);
  }

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

.login-card .password__save-btn > * {
  width: 100%;
}

.login-card .spider-migration-message {
  margin-top: var(--prism-spacing-200);
  min-width: 480px;
}

.login-card .spider-migration-message h4.title {
  color: var(--prism-color-text-info-default);
}

.login-card .spider-migration-message .spider-migration-link {
  color: var(--prism-color-text-neutral-default);
  text-decoration: underline;
}

.login-card__form {
  margin: var(--prism-spacing-1000) 0;
}

.login-card__form .prism-card__content {
  padding: var(--prism-spacing-1000);
}

.login-card__explanation {
  color: var(--prism-color-text-neutral-default);
  line-height: 20px;
  margin-bottom: var(--prism-spacing-800);
  text-align: center;
}

.login-card__explanation:last-child {
  margin-bottom: 0;
}

.login-card__footer {
  line-height: 16px;
  margin-top: var(--prism-spacing-600);
  text-align: center;
}

.login-card__footer p {
  margin-bottom: var(--prism-spacing-300);
}

.login-card__footer p:last-of-type {
  margin-bottom: 0;
}

.login-card__footer a {
  color: var(--prism-color-interactive-background-primary-idle);
  text-decoration: underline;
}

.login-card .spider-logo {
  display: inline-flex;
  height: 48px;
  min-width: 38px;
  place-items: center center;
}

@media screen and (width >= 1024px) {
  .password-input-flex {
    gap: var(--prism-spacing-900);
  }

  .password-input-flex .password-conditions {
    /* stylelint-disable-next-line declaration-property-value-no-unknown */
    margin-bottom: none;
  }

  .login-wrapper__content {
    margin: 0 auto;
  }
}

@media only screen and (width <= 992px) {
  .login-wrapper {
    display: flex;
    flex-direction: column;
    padding: 100px var(--prism-spacing-500) var(--prism-spacing-500);
  }

  .login-wrapper__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 100px 0 0;
    width: 100%;
  }

  .login-card {
    max-width: 500px;
    width: 100%;
  }

  .login-wrapper__right-side {
    width: 100%;
  }

  .login-wrapper__left-side {
    padding: 0;
  }

  .login-wrapper__tagline {
    font-size: 28px;
  }

  .sun-wrapper {
    height: 400px;
    width: 400px;
  }

  .sun {
    /* stylelint-disable-next-line color-no-hex */
    filter: blur(100px) drop-shadow(16px 16px 16px #fc9250) saturate(1.2);
  }
}

.spider-banner {
  align-items: center;
  background-color: var(--prism-color-background-info-subdued);
  border: 1px solid var(--prism-color-border-info-default);
  border-radius: var(--prism-spacing-200);
  color: var(--prism-color-text-neutral-default);
  line-height: 20px;
  padding: var(--prism-spacing-300);
  position: relative;
  white-space: normal;
}

.spider-banner-title {
  color: var(--prism-color-text-info-default);
}