:root{
  --mainColor: #191919;
  --seconColor: #2d2d2d;
}

body{
  font-family: 'Roboto Condensed', sans-serif;
  background-color: whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box-login{
  background-color: white;
  border-radius: 2px;
  box-shadow: 0px 7px 15px #3838382c;
  display: flex;
  align-items: center;
}

.form-login{
  padding: 50px 60px;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.box-img{
  width: 40vw;
  height: 400px;
  overflow: hidden;
  display: none;
}

.child-img{
  width: 100%;
  height: 100%;
  background-color: black;
  background-image: url('../img/login-img.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 2px 0 0 2px;
}

.text-img{
  background-image: linear-gradient(90deg, var(--mainColor), rgba(0, 0, 0, 0));
  width: 100%;
  height: 100%;
  position: relative;
  bottom: 400px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 50px 60px; 
  color: white;
  border-radius: 2px 0 0 2px;
}

.box-img::before{
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-image: linear-gradient(90deg, var(--mainColor), rgba(0, 0, 0, 0)); */
  background-color: black;
  z-index: 1001;
}

.box-input{
  background-color: whitesmoke;
  width: 240px;
  padding: 5px 10px;
  border-radius: 2px;
  /* margin-bottom: 10px; */
  display: flex;
  align-items: center;  
}

.box-input input{
  width: 100%;
  background-color: transparent;
  border: none;
  padding: 0 7px;
  /* background-color: aqua; */
}

.box-input input:focus{
  outline: none;
}

.box-input input::placeholder{
  font-size: 14px;
  opacity: 50%;
}

.btn-login{
  width: 100px;
  border: none;
  background-image: linear-gradient(90deg, #287993, #31c3bc);
  color: white;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 5px 0;
  transition: ease 1s;
}

.btn-home{
  width: 100px;
  border: none;
  background-image: linear-gradient(90deg, #287993, #31c3bc);
  color: white;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 5px 0;
  transition: ease 1s;
  text-align: center;
  text-decoration: none;
}

@media (min-width: 992px) {

  .box-img{
    width: 40vw;
    height: 400px;
    overflow: hidden;
    display: block;
  }

}