.input-container {
  margin: 0 0 10px 0;
}
.input-container label {
  margin: 0 0 3px 0;
  display: block;
  font-size: 14px;
}

.checkbox {
  font-size: 14px;
}
.checkbox input[type=checkbox] {
  display: none;
}
.checkbox input[type=checkbox] + .checkbox-label {
  margin: 0 !important;
  display: -webkit-flex;
  display: flex;
  cursor: pointer;
  line-height: 16px;
}
.checkbox input[type=checkbox] + .checkbox-label .checkbox-icon {
  position: relative;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  display: inline-block;
  cursor: pointer;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23707070' d='M80.008,66.995v19h-19v-19h19ZM63,84H78V69H63V84Z' transform='translate(-61 -67)'/%3E%3C/svg%3E") no-repeat center;
  background-size: 100% 100%;
}
.checkbox input[type=checkbox]:checked + .checkbox-label .checkbox-icon {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23707070' d='M79.289,39.995L78,42H63V57H78V47l2-1V59H61l0.008-19.005h18.28Zm0.7,3.539-9.212,9-0.552.516-0.552-.516-3.838-3.75,1.1-1.078,3.287,3.211,8.66-8.461Z' transform='translate(-61 -40)'/%3E%3C/svg%3E") no-repeat center;
  background-size: 100% 100%;
}
.checkbox input[type=checkbox]:active + .checkbox-label .checkbox-icon {
  background: #ddd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23707070' d='M80.008,66.995v19h-19v-19h19ZM63,84H78V69H63V84Z' transform='translate(-61 -67)'/%3E%3C/svg%3E") no-repeat center;
  background-size: 100% 100%;
}
.checkbox-text {
  color: #707070;
}
.checkbox-text a {
  color: #171717;
}

.radio {
  font-size: 14px;
}
.radio input[type=radio] {
  display: none;
}
.radio input[type=radio] + .radio-label {
  margin: 0 !important;
  display: -webkit-flex;
  display: flex;
  cursor: pointer;
  line-height: 16px;
}
.radio input[type=radio] + .radio-label .radio-icon {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 10px;
  margin-right: 10px;
  display: inline-block;
  cursor: pointer;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  background: #fff url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0C11.9778 0 13.9112 0.586489 15.5557 1.6853C17.2002 2.78412 18.4819 4.3459 19.2388 6.17316C19.9957 8.00043 20.1937 10.0111 19.8078 11.9509C19.422 13.8907 18.4696 15.6725 17.0711 17.0711C15.6726 18.4696 13.8907 19.422 11.9509 19.8079C10.0111 20.1937 8.00043 19.9957 6.17317 19.2388C4.34591 18.4819 2.78412 17.2002 1.6853 15.5557C0.586489 13.9112 0 11.9778 0 10C0 7.34784 1.05356 4.8043 2.92892 2.92893C4.80429 1.05357 7.34784 0 10 0ZM10 2C11.5823 2 13.129 2.46919 14.4446 3.34824C15.7602 4.22729 16.7855 5.47672 17.391 6.93853C17.9965 8.40034 18.155 10.0089 17.8463 11.5607C17.5376 13.1126 16.7757 14.538 15.6569 15.6569C14.538 16.7757 13.1126 17.5376 11.5607 17.8463C10.0089 18.155 8.40035 17.9965 6.93854 17.391C5.47673 16.7855 4.22729 15.7602 3.34824 14.4446C2.46918 13.129 2 11.5823 2 10C2 7.87827 2.84285 5.84344 4.34314 4.34315C5.84343 2.84286 7.87827 2 10 2Z' fill='%23707070'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat center;
  background-size: 100% 100%;
}
.radio input[type=radio]:checked + .radio-label .radio-icon {
  background: #fff url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.6 7.2L17.9 8.6C18 9 18 9.5 18 10C18 14.4 14.4 18 10 18C5.6 18 2 14.4 2 10C2 5.6 5.6 2 10 2C12 2 13.9 2.8 15.3 4L16.9 2.7C15.1 1.1 12.7 0 10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 9 19.9 8.1 19.6 7.2ZM6.7 8.7L5.6 9.8L9.4 13.6L10 14.1L10.6 13.6L19.8 4.4L18.7 3.3L10 12L6.7 8.7Z' fill='%23707070'/%3E%3C/svg%3E%0A") no-repeat center;
  background-size: 100% 100%;
}
.radio input[type=radio]:active + .radio-label .radio-icon {
  background: #ddd url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0C11.9778 0 13.9112 0.586489 15.5557 1.6853C17.2002 2.78412 18.4819 4.3459 19.2388 6.17316C19.9957 8.00043 20.1937 10.0111 19.8078 11.9509C19.422 13.8907 18.4696 15.6725 17.0711 17.0711C15.6726 18.4696 13.8907 19.422 11.9509 19.8079C10.0111 20.1937 8.00043 19.9957 6.17317 19.2388C4.34591 18.4819 2.78412 17.2002 1.6853 15.5557C0.586489 13.9112 0 11.9778 0 10C0 7.34784 1.05356 4.8043 2.92892 2.92893C4.80429 1.05357 7.34784 0 10 0ZM10 2C11.5823 2 13.129 2.46919 14.4446 3.34824C15.7602 4.22729 16.7855 5.47672 17.391 6.93853C17.9965 8.40034 18.155 10.0089 17.8463 11.5607C17.5376 13.1126 16.7757 14.538 15.6569 15.6569C14.538 16.7757 13.1126 17.5376 11.5607 17.8463C10.0089 18.155 8.40035 17.9965 6.93854 17.391C5.47673 16.7855 4.22729 15.7602 3.34824 14.4446C2.46918 13.129 2 11.5823 2 10C2 7.87827 2.84285 5.84344 4.34314 4.34315C5.84343 2.84286 7.87827 2 10 2Z' fill='%23707070'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat center;
  background-size: 100% 100%;
}
.radio-text {
  color: #707070;
}
.radio-text a {
  color: #171717;
}

.form-container {
  max-width: 700px;
  margin: 50px auto 80px auto;
  padding: 36px 42px;
  background-color: #f5f5f5;
  border-radius: 5px;
  box-sizing: border-box;
}
.form-container .input {
  width: 100%;
  height: 42px;
  border-color: #fff;
}
.form-container .input:focus {
  border-color: #bbb;
}
.form-container-login {
  max-width: 420px;
}
.form-container-login .form-signup-fields {
  width: 100%;
  margin: 0;
}
.form-container-login .form-signup-button {
  margin-top: 10px;
}
.form-tabs {
  margin: 0 0 20px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.form-tabs li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.form-tabs li a {
  height: 42px;
  padding: 0 10px;
  display: block;
  background-color: #e0e0e0;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #171717;
  line-height: 40px;
}
.form-tabs li a:hover, .form-tabs li a.active {
  background-color: #fff;
}
.form-tabs-pane {
  display: none;
}
.form-tabs-pane.toggled {
  display: block;
}
.form-row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}
.form-signup-image {
  -webkit-flex-grow: 1;
          flex-grow: 1;
}
.form-signup-image-container {
  position: relative;
  padding: 56.25% 0 0 0;
}
.form-signup-image-url {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.form-signup-image-play {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: block;
}
.form-signup-fields {
  width: 45%;
  margin-right: 20px;
}
.form-signup-premium {
  margin-right: 0;
  margin-left: 20px;
}
.form-signup-details {
  width: calc(55% - 20px);
  padding: 15px 18px;
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  box-sizing: border-box;
}
.form-signup-details ul {
  margin: 10px 0 0 0;
  padding: 0;
}
.form-signup-details ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.form-signup-text {
  margin: 0 0 10px 0;
  font-size: 14px;
}
.form-signup-radio {
  margin: 10px 0 15px 0;
}
.form-signup-radio label {
  margin: 0 0 10px 0;
  display: block;
  font-size: 14px;
}
.form-signup-button {
  width: 100%;
  margin-top: 30px;
  text-align: center;
}
.form-signup-button .btn {
  width: 100%;
  height: 42px;
  font-size: 18px;
  line-height: 40px;
}
.form-alt {
  width: 100%;
  margin: 15px 0 0 0;
  text-align: center;
  font-size: 16px;
  color: #707070;
}
.form-alt a {
  font-weight: 500;
  color: #171717;
}
.form-or {
  position: relative;
  margin: 5px 0;
  text-align: center;
}
.form-or span {
  position: relative;
  padding: 0 10px;
  display: inline-block;
  background-color: #f5f5f5;
  z-index: 2;
}
.form-or::before {
  position: absolute;
  top: 50%;
  left: 0;
  content: "";
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
  height: 1px;
  display: block;
  background-color: #e0e0e0;
}

@media screen and (max-width: 767px) {
  .form-tabs li a {
    font-size: 20px;
  }
  .form-container {
    margin: 20px 0 40px 0;
    padding: 20px;
    font-size: 17px;
  }
  .form-container h1, .form-container h2 {
    font-size: 26px;
  }
  .form-container label {
    font-size: 17px;
  }
  .form-container .input {
    height: 51px;
  }
  .form-container-login .form-signup-button {
    margin-bottom: 0;
  }
  .form-row {
    -webkit-flex-direction: column;
            flex-direction: column;
  }
  .form-signup-fields {
    -webkit-order: 1;
            order: 1;
    width: 100%;
    margin: 0;
  }
  .form-signup-text {
    font-size: 17px;
  }
  .form-signup-button {
    -webkit-order: 2;
            order: 2;
    margin: 20px 0 30px 0;
  }
  .form-signup-button .btn {
    height: 51px;
    line-height: 51px;
  }
  .form-signup-details, .form-signup-image {
    -webkit-order: 3;
            order: 3;
    width: 100%;
  }
  .form-alt {
    -webkit-order: 4;
            order: 4;
    font-size: 17px;
  }
}