.icon {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 3px;
  float: left;
}
.icon button {
  opacity: 0.2;
}
.icon:hover button {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member .member-img {
  border-radius: 8px;
  overflow: hidden;
}
.team .team-member .social {
  position: absolute;
  left: 0;
  bottom: 2px;
  right: 0;
  opacity: 0;
  transition: ease-in-out 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team .team-member .social a {
  transition: color 0.3s;
  color: var(--color-white);
  background: var(--color-primary);
  margin: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: 0.3s;
}
.team .team-member .social a i {
  line-height: 0;
  font-size: 12px;
}
.team .team-member .social a:hover {
  background: var(--color-primary-light);
}
.team .team-member .social i {
  font-size: 12px;
  margin: 0 2px;
}
.team .team-member .member-info {
  padding: 30px 15px;
  text-align: center;
  box-shadow: 0px 2px 15px rgba(var(--color-black-rgb), 0.1);
  background: var(--color-white);
  margin: -50px 20px 0 20px;
  position: relative;
  border-radius: 8px;
}
.team .team-member .member-info h4 {
  font-weight: 400;
  margin-bottom: 5px;
  font-size: 24px;
  color: var(--color-secondary);
}
.team .team-member .member-info span {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray);
}
.team .team-member .member-info p {
  font-style: italic;
  font-size: 14px;
  line-height: 26px;
  color: var(--color-gray);
}
.team .team-member:hover .social {
  opacity: 1;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

th {
  background: #c9d9fa;
}

td,
th {
  border: 0.3px solid #ccc;
  padding: 8px;
  /* font-family: "Roboto"; */
  /* font-family: monospace; */
  font-size: 13px;
}

.dark {
  background-color: #fbfdee;
}

.kanan {
  text-align: right;
}

.kiri {
  text-align: left;
}

.tengah {
  text-align: center;
}

/* button */
.button {
  border: 1.2vh groove rgb(200, 200, 200);
  margin: 1.5vh 1vw;
  width: 28vw;
  font-size: 2vw;
  transition: all 1s ease-in-out;
}

#laptop {
  float: left;
  width: 65%;
}

#tablet {
  float: left;
  width: 50%;
}

@media only screen and (orientation: landscape) {
  .button,
  #instructions {
    font-size: 2vh;
  }
}

@media only screen and (max-width: 1160px) {
  #laptop {
    float: none;
    width: 100%;
  }
  #tablet {
    float: left;
    width: 50%;
  }
  .button {
    width: 45vw;
    font-size: 4vw;
  }
}

@media only screen and (max-width: 485px) {
  #laptop {
    width: calc(95vw - 32px);
  }
  #tablet {
    float: none;
    width: calc(95vw - 32px);
  }
  .button {
    width: calc(95vw - 32px);
    font-size: 4vw;
  }
}

.bg-login-image { 
background:url(../img/logo/login.jpg);
background-position:center;
background-size:cover
}
.bg-register-image{
background:url(../img/logo/daftar.jpg);
background-position:center;
background-size:cover}
.bg-password-image{
  background:url(../img/logo/reset.jpg);
background-position:center;
background-size:cover
}