﻿/* fonts */
/* css */

.subscription-homePage {
  background-color: #fff;
  /* margin: 48px auto; */
  padding: 32px;
  font-family: "Proxima nova";
  font-weight: 400;
  /* border: 1px solid #D9DCE2; */
  border-radius: 12px;
  min-width: 100%;
  /* max-height: 311px; */
}

/* title */

.subscription__title {
  width: 100%;
  margin-bottom: 24px;
}

.subscription__title__title {
  width: 100%;
  font-family: "Proxima nova";
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0em;
  text-align: left;
  margin-bottom: 4px;
  color: #32384a;
}

.subscription__title__description {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  color: #6a7186;
}

/* form */

.subscription__form {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.form__item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  gap: 20px;
}

.child__input:focus {
  box-shadow: none;
  border: 1px solid #565d73;
  outline: none;
}

.form__item__child {
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.form__item__child label {
  position: absolute;
  left: 0;
  padding: 17px 16px;
  font-size: 16px;
  line-height: 22px;
  pointer-events: none;
  color: #7d8499;
}

.subscription-homePage__UA p {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0em;
  text-align: left;
  color: #6a7186;
}

.subscription-homePage__UA p a {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0em;
  text-align: left;
  color: #32384a;
  text-decoration: none;
}

.child__input {
  width: 100%;
  padding: 17px 16px;
  border: 1px solid #d9dce2;
  border-radius: 12px;
  color: #32384a;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  box-sizing: border-box;
  font-family: "Proxima nova";
  font-weight: 400;
}

/* button */

.form__item__button {
  width: 100%;
}

.button__submit button {
  width: 100%;
  border-radius: 12px;
  padding: 17px 32px 17px 32px;
  background-color: #f7a906;
  border: none;
  color: #fff;
  /* font-family: 'Proxima nova'; */
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    "Liberation Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  font-weight: 600;
  font-size: 24px;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: center;
  cursor: pointer;
  margin: 0 auto;
}

/* floating inputs */

.child__input:valid ~ label,
.child__input:focus ~ label {
  transform: translate(0, -8px);
  font-size: 12px;
  line-height: 18px;
}

.child__input:focus,
.child__input:valid {
  /* padding-top: 26px;
    padding-bottom: 8px; */
}

/* errors */
.errorP {
  color: #c21313 !important;
  margin: 3px 10px;
}

.errorLabel {
  color: #c21313 !important;
}

.errorBgColor {
  background-color: #faf1f0 !important;
  border: 1px solid transparent;
}

#dwnBtn {
  font-weight: 700 !important;
}
