*,
*::after,
*::before {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  font: 400 16px 'SB Sans Display',
  sans-serif;
  background-color: var(--color-bg-hero);
}

/* COMMON STYLES -- START */

label {
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.75rem;
  white-space: nowrap;
}

select {
  background: url('../img/chevron-down.svg') no-repeat right transparent;
  background-position-x: calc(100% - ((var(--step-size) * 4) + 3px));
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select,
input[type='text'],
input[type='number'],
input[type='password'],
input[type='tel'],
input[type='email'] {
  width: 100%;
  font-family: 'SB Sans Display', sans-serif;
  font-size: 0.875rem;
  line-height: 150%;
  color: var(--color-typo-dark);
  padding: calc(var(--step-size) * 3) calc(var(--step-size) * 4);
  border: 1px solid var(--color-bg-border);
  border-radius: var(--step-size);
  outline: none;
  transition: border-color var(--transition-duration) var(--transition-cubic-function);
}

input[type='number'] {
  -moz-appearance: textfield;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

select:hover,
input[type='text']:hover,
input[type='number']:hover,
input[type='password']:hover,
input[type='tel']:hover,
input[type='email']:hover {
  border-color: var(--color-bg-border-hover);
}

select:focus,
input[type='text']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='tel']:focus,
input[type='email']:focus {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.98),
  0 0 0 3px rgba(114, 165, 180, 0.3);
}

input::placeholder,
select.placeholder {
  color: var(--color-old-colors-pearl-grey);
}

select:disabled,
input[type='text']:disabled,
input[type='number']:disabled,
input[type='password']:disabled,
input[type='tel']:disabled,
input[type='email']:disabled {
  background-color: rgb(239 239 239 / 0.3);
  border-color: var(--color-bg-border);
  box-shadow: unset;
}

select:disabled {
  opacity: unset;
  cursor: default;
}

.kc-form-group_error {
  position: relative;
}

.kc-form-group_error select,
.kc-form-group_error input {
  border-color: var(--color-typo-error);
  transition: none;
}

.kc-form-group_error select {
  background: url(../img/exclamation-circle_red.svg) no-repeat right,
  url(../img/chevron-down.svg) no-repeat right;
  background-position-x: calc(100% - (var(--step-size) * 4)), calc(100% - ((var(--step-size) * 4) + 28px));
}

.kc-form-group_error input {
  background: url('../img/exclamation-circle_red.svg') no-repeat right transparent;
  background-position-x: calc(100% - (var(--step-size) * 4));
}

.kc-form-group_error select:hover,
.kc-form-group_error input:hover {
  border-color: var(--color-typo-error);
}

.kc-form-group_error select:focus,
.kc-form-group_error input:focus {
  box-shadow: none;
}

.kc-form-group_error .error-message {
  position: absolute;
  bottom: -2rem;
  left: 0;
  font-size: 0.75rem;
  line-height: 2rem;
  color: var(--color-typo-error);
  white-space: nowrap;
  user-select: none;
}

.alert {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-auto-flow: column;
  align-items: center;
  color: white;
  border-radius: var(--step-size);
  margin-bottom: calc(var(--step-size) * 8);
}

.alert_success {
  background-color: var(--color-typo-success);
}

.alert_warning {
  background-color: var(--color-typo-warning);
}

.alert_error {
  background-color: var(--color-typo-error);
}

.alert_info {
  background-color: var(--color-typo-info);
}

.alert__icon {
  width: 40px;
  height: 40px;
  border-top-left-radius: var(--step-size);
  border-bottom-left-radius: var(--step-size);
}

.alert__icon_success {
  background: url('../img/checkmark.svg') center center no-repeat transparent;
}

.alert__icon_warning {
  background: url('../img/exclamation-circle_white.svg') center center no-repeat transparent;
}

.alert__icon_error {
  background: url('../img/crossed-circle.svg') center center no-repeat transparent;
}

.alert__icon_info {
  background: url('../img/info-circle.svg') center center no-repeat transparent;
}

.alert__text {
  width: 100%;
  padding: calc(var(--step-size) * 3) calc(var(--step-size) * 4);
  border-top-right-radius: var(--step-size);
  border-bottom-right-radius: var(--step-size);
}

.alert__text_success {
  background-color: var(--color-bg-succes);
}

.alert__text_warning {
  background-color: var(--color-bg-warning);
}

.alert__text_error {
  background-color: var(--color-bg-error);
}

.alert__text_info {
  background-color: var(--color-bg-info);
}

.kc-hero {
  display: none;
}

/* COMMON STYLES -- END  */

#kc-header,
#kc-page-title,
#kc-registration,
#kc-social-providers {
  display: none;
}

#kc-content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr;
  grid-gap: var(--main-grid-column-gap);
  height: 100%;
}

#kc-panel {
  position: relative;
  display: inherit;
  grid-column: 1 / 13;
  grid-auto-rows: auto;
  align-items: center;
  background-color: #fff;
}

#kc-intro,
.kc-intro {
  margin-bottom: calc(var(--step-size) * 13);
}

#kc-intro > h1,
.kc-intro > h1 {
  margin-top: 0;
  margin-bottom: calc(var(--step-size) * 2);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.75rem;
  color: var(--color-typo-header);
}

#kc-intro > p,
.kc-intro > p,
#kc-info-wrapper {
  margin: 0;
  font-size: 1rem;
  color: var(--color-typo-dark);
}

#kc-info {
  align-self: flex-start;
}

#kc-form {
  color: var(--color-typo-text);
  padding: calc(var(--step-size) * 8);
  align-self: end;
}

#kc-form.disabled {
  pointer-events: none;
}

#kc-reset-password-form {
  align-self: flex-end;
}

.kc-form-group:first-child {
  margin-bottom: calc(var(--step-size) * 4);
}

.kc-form-group:nth-child(2),
.kc-form-group:nth-child(3) {
  margin-bottom: calc(var(--step-size) * 6);
}

.kc-form-group:nth-child(4) {
  margin-bottom: calc(var(--step-size) * 11);
}

#kc-form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(var(--step-size) * 6);
  margin-bottom: calc(var(--step-size) * 11);
}

#kc-form-options.password-step {
  justify-content: flex-end;
}

#kc-back-link {
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-typo-text);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-duration) var(--transition-cubic-function);
}

#kc-back-link:hover {
  color: var(--color-typo-primary);
}

#kc-form-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#kc-form-switch.hidden {
  display: none;
}

#kc-form-switch > input {
  margin-right: calc(var(--step-size) * 4);

  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border: none;

  background-color: var(--color-bg-input-switch);

  inline-size: calc(var(--step-size) * 9);
  block-size: calc(var(--step-size) * 6);
  padding: var(--step-size);
  border-radius: calc(var(--step-size) * 6);

  flex-shrink: 0;
  display: grid;
  align-items: center;
  grid: [track] 1fr / [track] 1fr;

  cursor: pointer;
}

#kc-form-switch > input:active {
  background-color: var(--color-bg-primary-hover);
}

#kc-form-switch > input::before {
  content: '';
  grid-area: track;
  inline-size: calc(var(--step-size) * 4);
  block-size: calc(var(--step-size) * 4);
  background-color: var(--color-bg-secondary);
  border-radius: 50%;
  transform: translateX(var(--switch-thumb-position));
  transition: transform var(--transition-duration) var(--transition-cubic-function),
  box-shadow var(--transition-duration) var(--transition-cubic-function);
}

#kc-form-switch > input:checked {
  background-color: var(--color-bg-primary);
  --switch-thumb-position: calc(calc(var(--step-size) * 7) - 100%);
}

#kc-form-switch:hover > input::before,
#kc-form-switch:hover > input:checked::before {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24),
  0 9.05305px 18.11px rgba(38, 32, 48, 0.24);
}

#kc-password-restore-button {
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-typo-text);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-duration) var(--transition-cubic-function);
}

#kc-password-restore-button:hover,
#kc-password-restore-button:focus,
#kc-password-restore-button:visited {
  color: var(--color-typo-primary);
}

#kc-password-restore-button.hidden {
  display: none;
}

#kc-form-buttons,
.kc-form-buttons,
#kc-instruction-buttons {
  display: grid;
  grid-auto-flow: row;
  align-items: center;
  grid-column-gap: var(--main-grid-column-gap);
  grid-row-gap: calc(var(--step-size) * 4);
  margin-top: calc(var(--step-size) * 11);
}

#kc-primary-button,
#kc-secondary-button,
.kc-primary-button,
.kc-secondary-button {
  display: block;
  line-height: 1;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--step-size);
  padding: calc(var(--step-size) * 4) calc(var(--step-size) * 6);
  transition: color var(--transition-duration) var(--transition-cubic-function),
  background-color var(--transition-duration) var(--transition-cubic-function);
  user-select: none;
}

#kc-secondary-button.hidden {
  display: none;
}

#kc-primary-button,
.kc-primary-button {
  color: var(--color-typo-light);
  background-color: var(--color-bg-primary);
}

#kc-secondary-button,
.kc-secondary-button {
  order: 1;
  color: var(--color-typo-dark);
  background-color: var(--color-bg-secondary);
}

#kc-primary-button:hover,
.kc-primary-button:hover {
  background-color: var(--color-bg-primary-hover);
}

#kc-secondary-button:hover,
.kc-secondary-button:hover {
  background-color: var(--color-bg-secondary-hover);
}

#kc-primary-button:active:not([disabled]),
#kc-primary-button:focus:not([disabled]),
.kc-primary-button:active:not([disabled]),
.kc-primary-button:focus:not([disabled]) {
  color: white;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.98),
  0 0 0 3px rgba(114, 165, 180, 0.3);
}

#kc-primary-button:active,
.kc-primary-button:active {
  background-color: var(--color-bg-primary-active);
}

#kc-secondary-button:active,
#kc-secondary-button:focus,
.kc-secondary-button:active,
.kc-secondary-button:focus {
  color: var(--color-typo-header);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.98),
  0 0 0 3px rgba(238, 242, 245, 0.4);
}

#kc-primary-button:disabled,
#kc-secondary-button:disabled,
.kc-primary-button:disabled,
.kc-secondary-button:disabled {
  color: var(--color-old-colors-niagar-light);
  background-color: var(--color-old-colors-niagar-half-light);
}

#kc-passwd-update-form .alert_warning {
  display: none;
}

/* LOADER STYLES -- START */

@keyframes kc-loader-rotate {
  to {
    transform: rotate(1turn);
  }
}

@keyframes kc-loader-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@keyframes kc-loader-color {
  0%,
  100% {
    stroke: var(--color-typo-error);
  }

  40% {
    stroke: var(--color-typo-info);
  }

  66% {
    stroke: var(--color-typo-success);
  }

  80%,
  90% {
    stroke: var(--color-typo-warning);
  }
}

.kc-loader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: rgba(0, 0, 0, 0.05);
}

.kc-loader svg {
  transform-origin: center center;

  animation: kc-loader-rotate 2s linear infinite;
  animation-duration: 2s;
}

.kc-loader circle {
  animation: kc-loader-dash 1.5s ease-in-out infinite,
  kc-loader-color 6s ease-in-out infinite;

  stroke: var(--color-typo-error);
  stroke-dasharray: 89, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
}

.kc-loader.hidden {
  display: none;
}

/* LOADER STYLES -- END */

/* REGISTER MODAL STYLES -- START */

.kc-register-modal {
  position: absolute;
  top: 0;
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: max-content min-content max-content max-content min-content;
  align-items: center;
  width: 100%;
  min-height: calc(100vh - (var(--modal-close-button-height) * 2));
  color: var(--color-typo-text);
  background-color: #fff;
  z-index: 2;
  --padding-calc: calc(var(--step-size) * 8);

  /* 100px is a safe-click-zone for touch-users */
  padding: var(--padding-calc) var(--padding-calc) 100px var(--padding-calc);
  filter: var(--drop-shadow);
  transform: translateY(110vh);
  transition: transform 1s;
}

.kc-register-modal.visible {
  transform: translateY(calc(var(--modal-close-button-height) * 2));
}

.kc-register-modal.hidden {
  display: none;
}

.kc-register-modal.disabled {
  pointer-events: none;
}

.kc-register-modal__close-button {
  position: absolute;
  top: calc(var(--panel-content-outdent) * -1);
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: var(--modal-close-button-height);
  background-color: var(--color-typo-primary);
  border-top-right-radius: 8px;
  filter: var(--drop-shadow);
  transition: background-color var(--transition-duration) var(--transition-cubic-function);
}

.kc-register-modal__close-button > span {
  width: inherit;
  height: inherit;
  background: url('../img/arrow-down.svg') center center no-repeat transparent;
}

.kc-register-modal__close-button:hover {
  background-color: var(--color-bg-primary-hover);
}

.kc-register-modal__close-button:focus {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.98),
  0 0 0 3px rgb(114 165 180 / 0.3);
}

.kc-register-modal__close-button.inactive {
  pointer-events: none;
}

.kc-register-modal__close-button:disabled {
  background-color: var(--color-old-colors-niagar-half-light);
}

.kc-register-modal__form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: max-content;
  grid-column-gap: 16px;
  grid-row-gap: 33px;
}

.kc-register-modal__form > div:nth-of-type(7) {
  grid-column: 1 / span 2;
}

.kc-register-modal__policy-comply-hint {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-typo-dark);
  margin-top: 16px;
}

.kc-register-modal__policy-comply-hint > a, .kc-register-modal__policy-comply-hint > p > a {
  font-size: 14px;
  line-height: 20px;
  text-decoration: underline;
  color: var(--color-bg-primary);
  margin-left: 0;
  cursor: pointer;
}

.kc-register-modal__alert-container > .alert,
.kc-form__alert-container > .alert {
  margin-top: 22px;
  margin-bottom: 16px;
}

.hidden {
  display: none;
}

/* REGISTER MODAL STYLES -- END */

/* PHONE VERIFY MODAL STYLES -- START */

.kc-phone-verify-modal {
  z-index: 3;
  position: absolute;
  top: 0;
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: max-content max-content 1fr max-content max-content;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  color: var(--color-typo-text);
  background-color: #fff;
  --padding-calc: calc(var(--step-size) * 8);

  /* 100px is a safe-click-zone for touch-users */
  padding: var(--padding-calc) var(--padding-calc) 100px var(--padding-calc);
  filter: var(--drop-shadow);
  transform: translateY(110vh);
  transition: transform 1s;
}

.kc-phone-verify-modal.visible {
  transform: translateY(0);
}

.kc-phone-verify-modal.hidden {
  display: none;
}

.kc-phone-verify-modal__resend-code-button {
  align-self: start;
  font-size: 1rem;
  color: var(--color-text-button);
  margin-top: calc(var(--step-size) * 8);
  transition: color var(--transition-duration) var(--transition-cubic-function);
}

.kc-phone-verify-modal__resend-code-button:hover {
  color: var(--color-text-button-hover);
}

.kc-phone-verify-modal__resend-code-button:disabled {
  color: var(--color-typo-dark);
}

.kc-phone-verify-modal__form > div {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  grid-column-gap: 16px;
}

.kc-phone-verify-modal__form input[type='number'] {
  width: 44px;
  height: 44px;
  text-align: center;
}

.kc-phone-verify-modal .kc-form-group_error input {
  background: unset;
  background-position-x: unset;
}

.kc-phone-verify-modal__alert-container > .alert {
  margin-top: 38px;
  margin-bottom: 0;
}

/* PHONE VERIFY MODAL STYLES -- END */

/* AGREEMENT MODAL STYLES -- START */

.kc-agreement-modal__wrapper {
  display: flex;
  justify-content: center;

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 999;
  opacity: 0;

  transition: opacity var(--transition-duration) var(--transition-cubic-function);
}

.kc-agreement-modal__wrapper.agreement-hidden {
  display: none;
}

.kc-agreement-modal__wrapper.agreement-visible {
  opacity: 1;
  transition: opacity var(--transition-duration) var(--transition-cubic-function);
}

.kc-agreement-modal__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background-color: rgba(0, 0, 0, 0.5);
}

.kc-agreement-modal {
  display: flex;
  flex-flow: column;

  position: relative;

  width: calc(100vw - 80px);
  height: calc(100vh - 80px);

  padding: 24px 32px;

  align-self: center;

  background-color: rgb(255, 255, 255);
}

.kc-agreement-modal__close-button {
  position: absolute;
  top: 30px;
  right: 38px;

  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kc-agreement-modal__title-wrapper {
  width: calc(100% - 18px - 24px);
  height: auto;

  font-size: 22px;
  font-weight: 600;
}

.kc-agreement-modal__title-wrapper > p {
  margin-top: 0;
}

.kc-agreement-modal__close-button > span {
  width: inherit;
  height: inherit;
  background: url('../img/cross.svg') center center no-repeat transparent;
}

.kc-agreement-modal__document-wrapper {
  width: 100%;
  height: 100%;
}

.kc-agreement-modal__document-wrapper > iframe {
  width: inherit;
  height: inherit;
}

/* AGREEMENT MODAL STYLES -- END */

@media (min-width: 600px) {
  .kc-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 100%;
    height: 100%;
    min-width: 420px;
  }

  .kc-hero__illustration-group {
    display: inherit;
    position: relative;
    flex-direction: column;
    align-items: inherit;
    justify-content: inherit;
    width: inherit;
    height: inherit;
  }

  .kc-hero__illustration-group__graphics-left {
    z-index: 1;
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    content: '';
    background: url('../img/graphics-left.svg') left center/100% no-repeat transparent;
    background-size: cover;
  }

  .kc-hero__illustration-group__graphics-bottom {
    z-index: 1;
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    content: '';
    background: url('../img/graphics-bottom.svg') center bottom/100% no-repeat transparent;
    background-size: cover;
  }

  .kc-hero__illustration-group__graphics-border-right {
    z-index: 2;
    position: absolute;
    right: 0;
    height: 100%;
    width: 100%;
    content: '';
    background: url('../img/graphics-border-right.svg') right center/100% no-repeat transparent;
    background-size: contain;
  }
}

@media (min-width: 600px) and (orientation: portrait) {
  .kc-hero,
  #kc-panel {
    grid-column: 1 / 5;
  }

  .kc-hero__illustration-group {
    height: 403px;
    position: relative;
    padding: 0;
    width: calc(100% + var(--main-grid-column-gap));
    margin-bottom: calc(var(--main-grid-column-gap) * -1);
  }

  .kc-hero__illustration-group__graphics-border-right {
    display: none;
  }

  .kc-hero__illustration-group__graphics-left {
    display: none;
  }

  #kc-content {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: min-content 1fr;
  }

  #kc-form {
    /* 100px is a safe-click-zone for touch-users */
    padding-bottom: 100px;
  }

  #kc-form-buttons,
  .kc-form-buttons {
    grid-auto-flow: column;
    justify-content: space-between;
    margin-top: 62px;
  }

  #kc-form-buttons.password-step,
  .kc-form-buttons.password-step {
    justify-content: flex-end;
  }

  #kc-secondary-button,
  .kc-secondary-button {
    order: unset;
  }

  .kc-feedback-text {
    font-size: 1rem;
  }

  .kc-register-modal,
  .kc-phone-verify-modal {
    min-height: unset;
    transform: translateY(120%);
  }

  .kc-register-modal.visible,
  .kc-phone-verify-modal.visible {
    transform: translateY(0);
  }
}

@media (min-width: 600px) and (orientation: landscape) {
  .kc-hero {
    grid-column: 1 / 6;
  }

  .kc-hero__illustration-group {
    position: relative;
    padding: 0;
    width: calc(100% + var(--main-grid-column-gap));
    margin-right: calc(var(--main-grid-column-gap) * -1);
  }

  .kc-hero__illustration-group__graphics-bottom {
    display: none;
  }

  .kc-hero__illustration-group__graphics-border-right {
    display: none;
  }

  #kc-panel {
    grid-column: 6 / 13;
  }

  #kc-intro,
  .kc-intro {
    margin-bottom: calc(var(--step-size) * 2);
  }

  .kc-register-modal,
  .kc-phone-verify-modal {
    min-height: unset;
    padding: var(--panel-content-outdent);
    padding-top: 24px;
    transform: translateX(120%);
  }

  .kc-register-modal.visible,
  .kc-phone-verify-modal.visible {
    transform: translateX(0);
  }

  .kc-register-modal__policy-comply-hint {
    margin-top: calc(var(--step-size) * 2);
    margin-bottom: 0;
  }

  .kc-register-modal__close-button {
    --modal-close-button-height: 32px;

    top: var(--panel-content-outdent);
    left: calc(var(--panel-content-outdent) * -1);
    width: 48px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0;
  }

  .kc-register-modal__close-button > span {
    transform: rotate(-90deg);
  }
}

@media (min-width: 940px) {
  #kc-content {
    overflow: hidden;
  }
}

@media (min-width: 1000px) {
  #kc-form-buttons,
  .kc-form-buttons {
    grid-auto-flow: column;
    justify-content: space-between;
    margin-top: 62px;
  }

  #kc-form-buttons.password-step,
  .kc-form-buttons.password-step {
    justify-content: flex-end;
  }

  #kc-secondary-button,
  .kc-secondary-button {
    order: unset;
  }

  .kc-feedback-text {
    font-size: 0.875rem;
  }
}

@media (min-width: 1200px) and (orientation: landscape) {
  .kc-hero {
    grid-column: 1 / 8;
    min-width: unset;
  }

  #kc-panel {
    grid-column: 8 / 13;
  }

  .kc-register-modal__close-button {
    --modal-close-button-height: 48px;
  }
}

@media (min-width: 1200px) {
  .kc-hero__illustration-group__graphics-border-right {
    display: block;
  }
}

@media (min-width: 1300px) {
  .kc-feedback-text {
    font-size: 1rem;
  }
}

.kc-contacts {
  padding: 24px 48px;
  border-top: 1px solid #F7F9FA;
  align-self: end;
}

.kc-contacts * {
  font-family: SBSansInterface, sans-serif;
}

.kc-contacts h4 {
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  color: var(--color-contacts-header);
  margin: 0;
  margin-bottom: 12px;
}

.kc-contacts .kc-contacts-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.kc-contacts .kc-contacts-item span, a {
  line-height: 16px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 8px;
}

.kc-contacts .kc-contacts-item a {
  color: var(--color-contacts-link);
}

.kc-contacts .kc-contacts-item span {
  color: var(--color-contacts-phone);
}

.kc-contacts .kc-contacts-mail-icon {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  background: url('../img/mail.svg') center center no-repeat transparent;
}

.kc-contacts .kc-contacts-phone-icon {
  width: 13px;
  height: 13px;
  background: url('../img/phone.svg') center center no-repeat transparent;
}