/* profil murid */
.invisible-close {
  display: none;
  width: 100%;
  height: 400%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -150%;
  margin-left: -50%;
  z-index: 4;
}
.profile {
  display: none;
  width: 400px;
  height: auto;
  background-color: white;
  box-shadow: 0 0 10px rgb(164, 164, 164);
  border: 5px solid rgb(247, 160, 28);
  border-radius: 8px;
  position: fixed;
  z-index: 5;
  top: 50%;
  left: 50%;
  margin-top: -260px;
  margin-left: -200px;
  transition: 0.3s;
  animation-name: flip;
  animation-duration: 0.5s;
  padding: 20px;
}
.profile::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  background-image: linear-gradient(45deg, rgb(247, 160, 28), rgb(135, 233, 246));
}
.profile .image-student {
  width: 250px;
  transform: translateX(22%);
  border-radius: 8px;
  margin-top: 4px;
}
.profile h4 {
  color: rgb(21, 21, 21);
  margin-top: 4px;
  font-family: "Mali";
  font-weight: 600;
  font-size: 120%;
  text-align: center;
}
.profile h5 {
  color: rgb(247, 160, 28);
  font-family: "Mali";
  font-size: 100%;
  font-weight: 400;
  margin-top: -10px;
  text-align: center;
}
.profile .template-birthday {
  color: rgb(105, 105, 105);
  font-family: "Mali";
  font-size: 90%;
  font-weight: 300;
  margin-top: -6px;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px dotted black;
}
.profile .template-advice {
  color: rgb(61, 61, 61);
  font-family: "Mali";
  font-size: 90%;
  margin-top: 4px;
  font-weight: 400;
  max-height: 80px;
  overflow-y: scroll;
}
.profile .sosmed-main {
  float: right;
  margin-bottom: 0;
}
.profile .template-sosmed-siswa {
  display: inline;
  width: 20px;
  margin-left: 5px;
}
#close-button {
  cursor: pointer;
}
#close-button img {
  width: 20px;
}
@keyframes flip {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}
/* akhir profil murid */

/* scrollbar */
/* width */
.profile .template-advice::-webkit-scrollbar {
  width: 10px;
}
.profile .template-advice::-webkit-scrollbar-track {
  border-radius: 10px;
}
.profile .template-advice::-webkit-scrollbar-thumb {
  background: rgb(199, 199, 199);
  border-radius: 10px;
  transition: 0.3s;
}
.profile .template-advice::-webkit-scrollbar-thumb:hover {
  background: #3f3f3f;
}
/* akhir scrollbar */

/* responsive profil murid */
@media only screen and (max-width: 500px) {
  .profile {
    width: 350px;
    margin-left: -175px;
    padding: 10px;
  }
  .profile .image-student {
    width: 250px;
    transform: translateX(14%);
  }
  #close-button img {
    width: 17px;
  }
}

@media only screen and (max-width: 400px) {
  .profile {
    width: 300px;
    margin-left: -150px;
    padding: 10px;
  }
  .profile .image-student {
    width: 240px;
    transform: translateX(7%);
  }
  #close-button img {
    width: 15px;
  }
}

@media only screen and (max-width: 350px) {
  .profile {
    width: 280px;
    margin-left: -140px;
    padding: 10px;
  }
  .profile .image-student {
    width: 220px;
    transform: translateX(7%);
  }
  #close-button img {
    width: 15px;
  }
}

@media only screen and (max-width: 300px) {
  .profile {
    width: 260px;
    margin-left: -130px;
    padding: 10px;
  }
  .profile .image-student {
    width: 210px;
    transform: translateX(6%);
  }
  #close-button img {
    width: 15px;
  }
}