/*Nullifying browser default*/
input:focus{
  outline: none;
}
button:focus {
  outline: none !important;
}

.background {
  /*width: auto;*/
  /*height: auto;*/
  background: #FFFFFF;
  border-radius: 8px;
  display:flex;
  justify-content: center;
  align-items: center;
  /*position:absolute;*/
  /*top: 0;*/
  /*bottom: 0;*/
  /*right: 0;*/
  /*left: 0;*/
}

/*Back button*/
.back-btn-box {
  display: flex;
  flex-direction: row;
  padding: 10px 16px;

  position: absolute;
  width: 110px;
  height: 44px;
  top: 30px;
  left: 30px;
  background: #FFFFFF;
  border: 1px solid #F0F0F0;
  box-sizing: border-box;
  border-radius: 200px;
  /*margin-top: 30px;*/
}

.back-btn-text {
  position: static;
  width: 50px;
  height: 21px;
  left: 44px;
  top: 11.5px;

  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;

  letter-spacing: -0.02em;

  color: #000000;
  flex: none;
  align-self: center;

}

.back-btn-symbol {
  position: static;
  width: 24px;
  height: 24px;
  left: 16px;
  top: 10px;

  flex: none;
  align-self: center;
  margin: 4px 0px;
}

/*Login and recover password forms*/
.form-box {
  display: flex;
  flex-direction: column;
  width: 32vw;
  padding: 32px 0px;
  margin-top: 60px;
}

@media only screen and (max-width: 768px) {
  .form-box {
    width: 85vw;
  }
}

.form-box input[type=text],
.form-box input[type=password] {
  border-radius: 0;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #fff;
  padding-bottom: 0;
  width: 100%;
}

#recoverform {
  display: none;
}

.form-title {
  position: static;
  left: 40px;
  top: 0px;

  font-style: normal;
  font-weight: bold;
  font-size: 42px;
  line-height: 120%;

  text-align: center;
  letter-spacing: -0.04em;

  color: #000000;

  flex: none;
  order: 0;
  align-self: center;
  margin-bottom: 40px;
  justify-content: center;
  display: flex;
}

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

/*Fields*/
.field-area {
  flex-direction: column;
  padding: 0px;

  position: static;
  left: 0px;
  top: 0px;

  flex: none;
  align-self: center;
  margin-bottom: 20px;
}

.field-area > .observation-container > p {
  text-align: left;
}

.field-label{
  position: static;
  height: 21px;
  left: 0px;
  top: 0px;

  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;

  letter-spacing: -0.02em;

  color: #000000;

  flex: none;
  align-self: flex-start;
}

.field-box{
  display: flex;
  flex-direction: row;
  padding: 16px;

  position: static;
  /*width: 400px;*/
  height: 53px;
  left: 0px;
  top: 31px;

  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  box-sizing: border-box;
  border-radius: 8px;

  flex: none;
  align-self: flex-start;
}

.box-text {
  position: static;
  /*width: 368px;*/
  height: 23px;
  left: 16px;
  top: 16px;

  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;

  letter-spacing: -0.01em;

  color: rgba(0, 0, 0, 0.6);

  flex: none;
  align-self: center;
}

.switch-form{
  position: static;
  height: 21px;
  left: 40px;
  top: 16px;

  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;

  text-align: center;
  letter-spacing: -0.01em;

  color: var(--secondary-color);

  flex: none;
  order: 0;
  align-self: center;
}

.recover-text{
  position: static;
  left: 0px;
  top: 0px;

  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 27px;

  text-align: center;
  letter-spacing: -0.02em;

  color: rgba(0, 0, 0, 0.6);

  flex: none;
  order: 0;
  align-self: flex-start;
}

.passwords-area{
  position: relative;
  /*width: 400px;*/
  height: 21px;
  left: 0px;
  top: 0px;

  flex: none;
  align-self: flex-end;
}

::placeholder {
  position: static;
  /*width: 368px;*/
  height: 21px;
  left: 16px;
  top: 16px;

  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;

  letter-spacing: -0.01em;

  color: rgba(0, 0, 0, 0.2);

  flex: none;
  align-self: center;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}

/*Keep me*/
.keep-me-area{
  display: flex;
  flex-direction: row;
  padding: 13px 0px;

  position: static;
  width: 223px;
  height: 50px;
  left: 0px;
  top: 208px;

  flex: none;
  align-self: flex-start;
}

.keep-me-text {
  position: static;
  width: 187px;
  height: 21px;
  left: 36px;
  top: 14.5px;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;

  letter-spacing: -0.01em;

  color: #000000;

  flex: none;
  align-self: center;
}

/*Submit button*/
.submit-btn {
  display: flex;
  flex-direction: row;
  padding: 16px 40px;
  width: 305px;
  justify-content: center;

  position: static;
  /*width: 400px;*/
  height: 53px;
  left: 0;
  top: 278px;

  background: var(--primary-color);
  border-radius: 8px;

  flex: none;
  align-self: center;
  border-width: 0;
  margin-right: auto;
  margin-left: auto;
}

.submit-btn:hover {
  cursor: pointer;
}

.submit-btn:disabled,
.submit-btn[disabled] {
  background: #cddffa;
  cursor: initial;
}

.submit-text{
  position: static;
  /*width: 320px;*/
  height: 21px;
  left: 40px;
  top: 16px;

  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 21px;

  text-align: center;
  letter-spacing: -0.02em;

  color: #FFFFFF;

  flex: none;
  align-self: center;
}

/*Wrong credentials*/
.wrong-credential{
  position: static;
  left: 32px;
  top: 7.5px;

  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;

  letter-spacing: -0.01em;

  color: #FF4949;

  flex: none;
  order: 1;
  align-self: center;
  margin: 8px 0px;
  white-space: unset;
  width: 100%;
}

.warning-field{
  flex-direction: column;
  padding: 0px;
  position: static;
  /*width: 400px;*/
  left: 0px;
  top: 0px;

  flex: none;
  align-self: center;
}

.wrong-credential-box{
  display: flex;
  flex-direction: row;
  padding: 16px;

  position: static;
  /*width: 400px;*/
  height: 53px;
  left: 0px;
  top: 31px;

  background: #FFFFFF;
  border: 2px solid #FF4949;
  box-sizing: border-box;
  border-radius: 8px;

  flex: none;
  align-self: flex-start;
}

/*Recover password errors*/
.reset-error-title{
  font-style: normal;
  font-weight: normal;
  font-size: 27px;
  line-height: 27px;
  margin-bottom: 20px;

  text-align: center;
  letter-spacing: -0.02em;

  color: #FF4949;

  flex: none;
  order: 0;
  align-self: flex-start;
}

.reset-success-title{
  font-style: normal;
  font-weight: normal;
  font-size: 27px;
  line-height: 27px;
  margin-bottom: 20px;

  text-align: center;
  letter-spacing: -0.02em;

  color: #35964F;

  flex: none;
  order: 0;
  align-self: flex-start;
}

.reset-text{
  position: static;
  left: 0px;
  top: 0px;

  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 17px;

  text-align: justify;
  letter-spacing: -0.02em;

  color: rgba(0, 0, 0, 0.6);

  flex: none;
  order: 0;
  align-self: flex-start;
}

.forms-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 60px;
}

/*Google sign in btn*/

.google-btn {
  display: flex;
  background-color: #FFFFFF;
  border-radius: 2px;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .25);
}
.google-icon-wrapper {
  width: 40px;
  height: 40px;
}

.btn-text {
  margin: 0 10px 0 0;
  align-self: center;
  color: #757575;
  font-size: 14px;
  letter-spacing: 0.2px;
}
.google-btn:hover, .google-btn:hover .google-icon-wrapper {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)), #FFFFFF;
}
.google-btn:active, .google-btn:active .google-icon-wrapper {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), #FFFFFF;
}