@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
body{
  font-family: 'DM Sans', sans-serif;
}
  /* 
  Kuning  #ffqb00 #ffbc33 #ffdd99 #ffeecc
  Biru    #506396 #7382ab #96a1c0 #dce0ea
  Ungu    #4b395f #6f617f #93889f #dbd7df
  Merah   #b35c74 #c27d90 #d19dac #f0dee3 */

.login-page{
  background: url(../assets/images/background-login-desktop.png) no-repeat;
  background-size: 100% 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card{
  width: 750px;
  background-color: #fff;
  background-image: url('img/1.png');
  border-radius: 10px;
}
.login-left{
  background: #506396;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 2rem;
}
.sikoko{
  font-weight: 700;
}
.login-left h6{
  font-size: 15px;
  margin-top: 10px;
}
.login-right{
  padding:3rem;
}
.login-right h1{
  margin-bottom: 15px;
}
.form-control:focus {
  border-color: #96a1c0;
  box-shadow: 0 0 0 1.5px #96a1c0;
}
.btn{
  background-color: #506396;
}
.btn:hover{
  background-color: #7382ab;
}
h6{
  font-weight: 400;
}
.form-check-input:checked {
  background-color: #506396;
  border-color: #506396;
}
.input-group-text {
  background-color: #dce0ea;
}
.logo-place {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

@media screen and (max-width:769px){
  .login-page{
    background: url(../assets/images/background-login-tengah.png) no-repeat;
    background-size: 100% 100%;
  }
  .login-card{
    width: 500px;
  }
  .login-left{
    padding:1rem;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 10px;
  }
  .login-right{
    padding:2rem
  }  
  img{
    width: 90px;
  }
}
@media screen and (max-width:576px){
  .login-page{
    background: url(../assets/images/background-login-hp.png) no-repeat;
    background-size: 100% 100%;
    width: 100%;
  }
  .login-left{
    padding:1rem;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 10px;
  }
  img{
    width: 75px;
  }
  .login-right{
    padding:1rem
  }
  .login-card{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  
}