/* ------------------------------------------------------------------------- */
/*  Dekstop                                                                  */
/* ------------------------------------------------------------------------- */

body {
  background: url('../img/background.png') no-repeat center center;
  background: contain;
  background-size: 100% 100%;
  background-attachment: fixed;
  overflow: hidden;
}

.bg-coklat {
  background: #996633;
}

.box-login {
  margin: auto;
  background: rgba(245, 245, 245, 0.7);
  border-radius: 8px;
  padding: 10px 20px;
  box-shadow: 1px 5px 15px #996633d5;

  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

.box-login h4 {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  text-align: center;
  color: #996633;
  margin-bottom: 25px;
  margin-top: -20px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
}

.input-groups input {
  color: #996633;
  border: solid 1px #99663352;
  box-shadow: 3px 3px 10px #99663352;
  padding-left: 40px;
}

.input-groups i {
  color: #996633;
  position: absolute;
  z-index: 1;
  font-size: 20px;
  margin-top: 9px;
  margin-left: 10px;
}

.form-control:focus {
  border-color: #A97445;
  box-shadow: 0 0 0 .2rem rgba(255, 217, 0, 0.3);
}

.box-button-login {
  border-top: solid 2px #996633;
  padding: 30px 0px;
}


@media (max-width: 767.98px) {
  body {
    background: url('../img/mobile.png?v=1') no-repeat center center !important;
    background: contain !important;
    background-size: 100% 100% !important;
    background-attachment: fixed !important;
    overflow: hidden;
  }

  .box-login {
    margin: auto;
    margin-top: 80px;
    background: unset;
    border-radius: unset;
    padding: 10px;
    box-shadow: unset;

    backdrop-filter: unset;
    -webkit-backdrop-filter: unset;
  }

  .box-button-login {
    border-top: solid 2px whitesmoke;
    padding: 30px 0px;
  }

  .box-button-login button {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  }

  .box-login h4 {
    color: black;
  }
}