:root {
  --bs-font-sans-serif: "Roboto", sans-serif;
}

body {
  font-family: var(--bs-font-sans-serif);
}

.login {
  width: var(--main-width);

  margin: 0 auto;

  .login-content {
    height: 670px;

    display: flex;

    align-items: center;
  }

  .row {
    margin: 0%;

    padding: 0%;
  }

  .login-content {
    .title_login_1 {
      width: 90%;

      font-size: 35px;

      font-weight: 600;

      text-align: center;

      margin-bottom: 6%;

      color: var(--main-color);
    }

    form {
      width: 90%;
    }

    .title_input {
      font-size: 18px;

      color: #888888;

      font-weight: 500;

      text-align: center;

      margin-bottom: 0.5rem;
    }

    .sta_inp_1 {
      width: 100%;

      display: flex;

      justify-content: center;
    }

    .form-group:nth-child(1) {
      margin-bottom: 1.5rem;
    }

    .input-field {
      width: 100%;

      height: 50px;

      outline: none;

      border-radius: 5px;

      box-shadow: 2px 4px 10px #efefef;

      background-color: #e2e2e2;

      border: 1px solid #c4c4c4;

      font-size: 18px;
    }
  }
}

.login-content input:hover .input-field,
.login-content select:hover .input-field {
  border: 3px solid #4285f4;

  cursor: pointer;
}

.login-content input:focus,
.login-content select:focus {
  border: 3px solid #4285f4;
}

.login-content .input-icons i {
  position: absolute;
}

.login-content .input-icons {
  width: 100%;

  margin-bottom: 10px;

  transition-delay: 3s;
}

.login-content .icon {
  padding: 10px;

  margin-left: 10px;

  min-width: 50px;

  font-size: 25px;

  color: #ffffff;

  text-shadow: 1px 1px 1px #000000;
}

.login-content .input-field {
  width: 100%;

  text-align: center;
}

.btn_save_2 {
  width: 100%;

  text-align: center;
}

.btn_save_2 {
  margin: 4% 0;
}

.btn-primary {
  width: 40%;

  background-color: var(--main-color);

  padding-top: 10px;

  padding-bottom: 10px;

  border: none;
}

.login-content input[type="checkbox"] {
  margin: 1px 0px;
}

.login-content .for_get_pass {
  text-decoration-line: none;

  font-size: 17px;

  font-weight: 500;

  color: var(--main-color);
}

.make-center {
  width: 100%;

  display: flex;

  justify-content: center;
}

@media (max-width: 2700px) {
  .main {
    width: 100%;

    margin-top: 70px;

    padding-left: 0px;

    padding-right: 0px;
  }

  .login .login-content {
    height: 850px;
  }
}

@media (max-width: 1700px) {
  .login .login-content {
    height: 670px;
  }
}

@media (max-width: 1400px) {
  .login {
    width: auto;
  }
}

@media (max-width: 1300px) {
  .login .login-content {
    height: 640px;
  }
}

@media (max-width: 1250px) {
  .login-content {
    height: 600px;
  }
}

@media (max-width: 1110px) {
  .login-form .container-fluid {
    background-image: url("https://dev.ru-japan.com/demo2/assets/img/test-10.jpg");
  }

  .login-content .register_descr {
    width: 90%;
  }

  .login-content {
    height: 600px;
  }
}

@media (max-width: 1000px) {
  /* .login-form .container-fluid,.login{

        width: 1000px;

    } */

  .login-content {
    height: 300px;
  }

  .login-content .col-sm-3,
  .login-content .col-sm-4 {
    width: 40%;
  }
}

@media (max-width: 980px) {
  .container-fluid {
    background-image: none !important;
  }

  .login {
    & .login-content {
      width: 100%;
      display: flex;
      justify-content: center;
      .title_login_1 {
        width: 100%;
        font-size: 30px;
        margin-bottom: 2%;
      }
      .col-sm-4 {
        width: 50%;
      }
      form {
        width: 100%;
      }
      .input-field {
            height: 45px;
            font-size: 16px;
        }
        .btn-primary {
    width: 30%;
    padding-top: 8px;
    padding-bottom: 8px;
}
    }
  }

  .login-content {
    height: 450px;
  }
}

@media (max-width: 780px) {
  .login {
    & .login-content {
        height: 400px;
      .title_login_1 {
        font-size: 22px;
      }
      .col-sm-4 {
        width: 70%;
      }
      .title_input
    {
        font-size: 14px;
    }
    .input-field {
            height: 40px;
            font-size: 14px;
        }
    }
            .btn-primary {
    padding-top: 5px;
    padding-bottom: 5px;
}
  }

}
@media (max-width: 780px) {
  .login {
    & .login-content {
        height: 450px;
      .title_login_1 {
        font-size: 25px;
      }
      .col-sm-4 {
        width: 70%;
      }
      .title_input
    {
        font-size: 16px;
    }
    }
  }

}