input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

body {
  margin: 0;
  background-color: #fff;
  font-family: Montserrat;
  color: #151b2d;

  --acent: #12a274;
  --accent-dark: #0f8a63;
  --neutral-5: #f0f2f7;
  --neutral-20: #c5c8d1;
  --neutral-30: #a9adb8;
  --neutral-60: #6d7384;
  --neutral-120: #2d3242;
  --dragon-120: #c74952;
  --oslo-100: #00809c;
}

p {
  margin: 0;
}

a {
  font-weight: 600 !important;
  color: var(--oslo-100) !important;
  text-decoration: none;
}

.a-button {
  font-weight: 600 !important;
  font-size: 16px;
  line-height: 20px;
  color: var(--oslo-100) !important;
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 84px;
}

.page-content {
  width: 100%;
  max-width: min(536px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
}

.page-title {
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  margin-bottom: 80px;
  text-align: center;
}

.form {
  display: flex;
  flex-direction: column;
}

.form-button-group {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-with-gap {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.logo {
  display: flex;
  justify-content: center;
  padding: 16px 0 32px;
}

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title > p {
  margin-bottom: 24px;
}

.title-main {
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  text-align: center;
}

.title-secondary {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #51586b;
  text-align: center;
}

.title .em {
  font-weight: 600;
  color: #151b2d;
}

.button-main {
  padding: 16px 24px;
  background-color: var(--acent);
  cursor: pointer;
  border-radius: 8px;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-transform: capitalize;
}

.button-main:disabled {
  background-color: var(--neutral-60);
  cursor: auto;
}

.button-main:disabled:hover {
  background-color: var(--neutral-60);
}

.button-block {
  width: 100%;
}

.input-container > .input-label {
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #51586b;
}

.input-container > .input-group {
  margin-top: 4px;
  display: flex;
  align-items: center;
  border: 1px solid var(--neutral-30);
  border-radius: 8px;
  padding: 0 12px;
  gap: 4px;
}

.input-container > .input-group-error {
  border: 1px solid var(--dragon-120);
}

.input-container .input {
  border: none;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  padding: 16px 0;
  flex-grow: 1;
  outline: none;
}

.input-container .input.md {
  padding: 10px 0;
}

.input-container > .input-error {
  margin-top: 4px;
  color: var(--dragon-120);
}

.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.checkbox {
  height: 20px;
  width: 20px;
  appearance: none;
  border: 1px solid var(--neutral-30);
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
}

.checkbox:checked {
  background-color: var(--neutral-30);
}

.checkbox-inner {
  position: relative;
  color: #fff;
}

.checkbox-inner > svg {
  position: absolute;
  width: 10px;
  left: 9px;
  top: 10px;
  pointer-events: none;
}

.checkbox-label {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
}

#kc-social-providers {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 32px 0;
}

.social-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-line {
  background-color: var(--neutral-30);
  height: 1px;
  flex: 1;
}

.social-title {
  color: var(--neutral-120);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.social-icon {
  width: 75px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--neutral-20);
  background-color: #fff;
  border-radius: 8px;
}

.social-icon:hover {
  background-color: var(--neutral-5);
}

#kc-registration {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}

.alert-error {
  margin-bottom: 8px;
  color: var(--dragon-120);
}

.user-email {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  background-color: var(--neutral-5);
  padding: 12px 8px;
  margin-bottom: 32px;
}

.user-email > .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  background-color: #fff;
}

.user-email > p {
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
}

.otp-group {
  margin: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.otp-group__cells {
  display: flex;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.otp-group__cell {
  display: flex;
  border-radius: 8px;
  border: 1px solid var(--neutral-30);
  width: 52px;
  height: 52px;
  text-align: center;
  font-size: 18px;
}

.otp-group__cell--error {
  border: 1px solid var(--dragon-120);
}

.otp-group__error {
  min-height: 24px;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--dragon-120);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.otp-group__resend {
  min-height: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.otp-form-text {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--neutral-60);
}

.recaptcha-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.recaptcha-error {
  display: block;
  margin-top: 8px;
  text-align: center;
  color: var(--dragon-120);
}