.modal {

   position: fixed;

   top: 0;

   left: 0;

   z-index: 12;

   display: none;

   width: 100%;

   height: 100%;

   outline: 0;

}



/*

input, textarea, button {

   -webkit-appearance: none;

   -moz-appearance: none;

   appearance: none;

}

*/



.modal-dialog {

   height: 100vh;

   display: flex;

   align-items: center;

   justify-content: center;

   pointer-events: none;

}



.modal-content {

   border-radius: 12px;

   position: relative;

   pointer-events: auto;

}



.modal-backdrop {

   position: fixed;

   top: 0;

   left: 0;

   z-index: 11;

   width: 100vw;

   height: 100vh;

   background: #303136;

   opacity: .8;

}



.modal-title {

   color: white;

   font-weight: bold;

   display: table;

   margin-right: auto;

   margin-left: auto;

}



.modal-title span {

   padding: 0 6px;

}



.form-text {

   color: white;

   font-size: 14px;

   border-bottom: 1px solid #fff857;

   margin-bottom: 24px;

}



.form-subtext {

   display: table;

   color: white;

   font-size: 14px;

   text-align: center;

   margin: 0 auto 12px;

   position: relative;

}



.form-subtext:before {

   content: "*";

   position: absolute;

   color: #fff857;

   top: 0;

   left: -10px;

}



.form-row__label {

   color: white;

   font-weight: 500;

}



.form-row__label:after {

   content: "*";

   position: absolute;

   color: #fff857;

   top: 0;

   right: 0;

   font-size: 11px;

}



.form-row__label.not--required:after {

   content: none;

}



.form-row__input {

   display: block;

   border-width: 0;

   flex-shrink: 0;

   padding: 0 16px;

   font-size: 14px;

   color: white;

}



.form-row__textarea {

   display: block;

   border-width: 0;

   flex-shrink: 0;

   padding: 0 16px;

   font-size: 14px;

   line-height: 20px;

   color: white;

   font-family: 'Roboto', sans-serif;

}



.form-row__input:focus, .form-row__textarea:focus, .submit-wrapper__button:focus {

   outline: none;

}



.agreement {

   font-size: 13px;

   font-weight: 300;

   color: #fff857;

   text-align: center;

   margin: 16px 0;

}



.agreement b {

   font-weight: bold;

   cursor: pointer;

}



.agreement b:hover {

   text-decoration: underline;

}



.submit-wrapper__button {

   display: block;

   border-width: 0;

   font-weight: bold;

   text-align: center;

   cursor: pointer;

}



.modal-body__title {

   display: table;

   font-size: 33px;

   letter-spacing: 1px;

   font-weight: bold;

   color: white;

   background: url(img/forms/login-mobile/title.png) no-repeat;

   background-size: 100%;

   background-position: left bottom;

   margin-bottom: 28px;

}



.form-line {

   margin-bottom: 14px;

   position: relative;

}



.checkbox-item {

   position: relative;

   line-height: 18px;

}



.checkbox-item__input {

   position: absolute;

   left: -9999px;

   opacity: 0;

}



.checkbox-item__label {

   display: block;

   position: relative;

   padding-left: 24px;

   font-size: 12px;

   font-weight: 500;

   color: #fff857;

   letter-spacing: 0.5px;

   cursor: pointer;

}



.checkbox-item__label:before {

   content: "";

   position: absolute;

   width: 18px;

   height: 18px;

   background: url(img/forms/login/checkbox.png) no-repeat;

   background-size: cover;

   left: 0;

   top: 0;

}



.checkbox-item__label:after {

   content: "";

   position: absolute;

   width: 9px;

   height: 4px;

   border-left: 2px solid #fff857;

   border-bottom: 2px solid #fff857;

   background-size: cover;

   left: 4px;

   top: 4px;

   transform: rotate(-45deg);

   opacity: 0;

}



.checkbox-item__input:checked+.checkbox-item__label:after {

   opacity: 1;

}



.password-text {

   font-weight: 500;

   color: #fff857;

   font-size: 12px;

   margin-bottom: 4px;

}



.error-link {

   text-align: center;

   font-size: 12px;

   letter-spacing: .5px;

   font-weight: 300;

   color: #fff857;

}



.error-link a {

   font-weight: bold;

   color: #fff857;

}



.login-form .modal-title {

   background: url(img/forms/login/title.png) no-repeat;

   background-position: left bottom;

   background-size: 100%;

}



.btn-1, .btn-2 {

   border-width: 0;

   padding: 0;

   display: block;

   text-align: center;

   font-weight: bold;

}



@media(max-width:767px) {

   .login-form .modal-content {

      padding: 18px 22px 0;

      background: url(img/forms/login-mobile/form.png), url(img/forms/login/background.jpg);

      background-repeat: no-repeat;

      background-size: cover;

      width: 307px;

      height: 415px;

   }



   .login-form .modal-body__title {

      font-size: 26px;

      line-height: 32px;

      margin: 0 auto 20px;

   }



   .form-line__input, .email-input {

      display: block;

      border-width: 0;

      background: url(img/forms/login-mobile/input.png) no-repeat;

      background-size: cover;

      padding: 0 16px;

      font-size: 14px;

      height: 38px;

      line-height: 38px;

      width: 266px;

      color: white;

   }



   .btn-1,

   .btn-2 {

      width: 260px;

      height: 38px;

      font-size: 24px;

      background: url(img/forms/login-mobile/button.png) no-repeat;

      background-size: cover;

      margin-left: auto;

      margin-right: auto;

      cursor: pointer;

   }



   .form-line {

      margin-bottom: 10px;

   }



   .form-line__label {

      font-size: 20px;

      color: white;

      font-weight: 300;

      line-height: 38px;

      position: absolute;

      top: 0;

      left: 10px;

   }



   .button-line {

      margin-bottom: 20px;

   }



   .checkbox-item {

      margin-bottom: 20px;

   }



   .form-group .btn-2 {

      margin: 10px 0;

   }



   .error-link a {

      display: block;

   }



   .signup-full .modal-content {

      padding: 15px 23px;

      background: url(img/forms/signup-tall-mobile/form.png), url(img/forms/signup-tall/background.jpg);

      background-repeat: no-repeat;

      background-size: cover;

      width: 280px;

      /* height: 511px; */

   }



   .signup-full .form-row__input,

   .signup-full .form-row__textarea {

      height: 21px;

      line-height: 21px;

      width: 229px;

      padding: 0 10px;

      background: url(img/forms/signup-small-mobile/input.png) no-repeat;

      background-size: cover;

   }



   .signup-full .submit-wrapper__button {

      height: 35px;

      width: 237px;

      background: url(img/forms/signup-small-mobile/button.png) no-repeat;

      background-size: cover;

   }



   .signup-form .modal-content {

      padding: 15px 23px;

      background: url(img/forms/signup-small-mobile/form.png), url(img/forms/signup-small/background.jpg);

      background-repeat: no-repeat;

      background-size: cover;

      width: 272px;

      /* height: 335px; */

   }



   .signup-form .form-row__input, .signup-form .form-row__textarea {

      height: 21px;

      line-height: 21px;

      width: 229px;

      padding: 0 10px;

      background: url(img/forms/signup-small-mobile/input.png) no-repeat;

      background-size: cover;

   }



   .signup-form .submit-wrapper__button {

      height: 34px;

      width: 231px;

      background: url(img/forms/signup-small-mobile/button.png) no-repeat;

      background-size: cover;

   }



   .signup-full .modal-title,

   .signup-form .modal-title {

      background: url(img/forms/signup-tall-mobile/title.png) no-repeat;

      background-position: left bottom;

      background-size: 100%;

      font-size: 20px;

      line-height: 28px;

      margin-bottom: 15px;

   }



   .form-text {

      font-size: 10px;

      margin-bottom: 15px;

   }



   .form-subtext {

      font-size: 10px;

      margin-right: 0;

      margin-bottom: 4px;

   }



   .form-row {

      position: relative;

      margin-bottom: 8px;

   }



   .signup-full .form-row {

      margin-bottom: 6px;

   }



   .form-row__label {

      font-size: 10px;

      line-height: 23px;

      position: absolute;

      top: 0;

      left: 10px;

   }



   .agreement {

      font-size: 10px;

      margin: 6px 0;

   }



   .form-subtext:before {

      left: -6px;

   }



   .form-row__label:after {

      right: -6px;

   }



   .form-note {

      color: white;

      font-size: 10px;

      margin-top: -16px;

   }

}



@media(min-width:768px) {

   .signup-full .modal-content {

      padding: 25px 32px;

      background: url(img/forms/signup-tall/form.png), url(img/forms/signup-tall/background.jpg);

      background-repeat: no-repeat;

      background-size: cover;

      width: 654px;

      /* height: 715px; */

   }



   .signup-form .modal-content {

      padding: 25px 32px;

      background: url(img/forms/signup-small/form.png), url(img/forms/signup-small/background.jpg);

      background-repeat: no-repeat;

      background-size: cover;

      width: 633px;

      /* height: 476px; */

   }



   .login-form .modal-content {

      padding: 25px 55px;

      background: url(img/forms/login/form.png), url(img/forms/login/background.jpg);

      background-repeat: no-repeat;

      background-size: cover;

      width: 555px;

      height: 535px;

   }



   .login-form .modal-title {

      font-size: 26px;

      line-height: 32px;

      margin-bottom: 16px;

      margin-left: 0;

   }



   .signup-full .modal-title,

   .signup-form .modal-title {

      font-size: 26px;

      line-height: 32px;

      margin-bottom: 20px;

      background: url(img/forms/signup-tall/title.png) no-repeat;

      background-position: left bottom;

      background-size: 100%;

   }



   .signup-full .form-row__input,

   .signup-form .form-row__input {

      background: url(img/forms/signup-tall/input.png) no-repeat;

      background-size: cover;

      height: 30px;

      line-height: 30px;

      width: 322px;

   }



   .signup-full .form-row__textarea,

   .signup-form .form-row__textarea {

      background: url(img/forms/signup-tall/textarea.png) no-repeat;

      background-size: cover;

      height: 52px;

      width: 322px;

   }



   .signup-full .submit-wrapper__button,

   .signup-form .submit-wrapper__button {

      margin: 12px auto 0;

      font-size: 22px;

      width: 112px;

      height: 34px;

      line-height: 34px;

      background: url(img/forms/signup-tall/button.png) no-repeat;

      background-size: cover;

   }



   .form-row {

      display: flex;

      justify-content: space-between;

      margin-bottom: 6px;

   }



   .form-row__label {

      font-size: 13px;

      position: relative;

      padding-right: 10px;

   }



   .form-line__input {

      display: block;

      border-width: 0;

      background: url(img/forms/login/input.png) no-repeat;

      background-size: cover;

      padding: 0 16px;

      font-size: 14px;

      height: 39px;

      line-height: 39px;

      width: 441px;

      color: white;

   }



   .email-input {

      display: block;

      border-width: 0;

      background: url(img/forms/login/email.png) no-repeat;

      background-size: cover;

      padding: 0 16px;

      font-size: 12px;

      font-style: italic;

      font-weight: 300;

      height: 38px;

      color: #fff857;

      line-height: 38px;

      width: 212px;

   }



   .form-line__label {

      font-size: 33px;

      letter-spacing: 1px;

      color: white;

      font-weight: 300;

      margin-bottom: 4px;

      display: block;

   }



   .btn-1 {

      width: 200px;

      height: 41px;

      font-size: 24px;

      background: url(img/forms/login/button.png) no-repeat;

      background-size: cover;

   }



   .btn-2 {

      width: 114px;

      height: 42px;

      font-size: 21px;

      background: url(img/forms/login/button-small.png) no-repeat;

      background-size: cover;

   }



   .form-group {

      display: flex;

      align-items: center;

      column-gap: 16px;

      margin-bottom: 32px;

   }



   .button-line {

      margin: 20px 0 20px;

   }



   .checkbox-item {

      margin-bottom: 26px;

   }



   .form-note {

      color: white;

      font-size: 14px;

      margin-top: -20px;

   }



   .agreement {

      margin-top: 32px;

   }

}