body {
  /* background: linear-gradient(
    -45deg,
    #ffffff,
    #ffe4e9,
    #fcc8e2,
    #f6baed,
    #efb0ff,
    #d3a2ff,
    #8eb8ff,
    #91efff,
    #d5f9ff
  );
  background-size: 400% 400%;
  animation: gradient 9s ease infinite;
  height: 100vh; */
  /* background: url(https://klikmadura.id/wp-content/uploads/2023/08/1691635618927-2048x960.jpg); */
  background: url("../uin-mdr.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 500px 150px 0 rgba(255, 0, 150, 0.3);
}

.clouds {
  position: absolute;
  width: 100%;
  height: 500px;
  background: url(../cloud.png);
  animation: movecloud 60s linear infinite;
  z-index: 1;
  -webkit-mask-image: -webkit-gradient(linear,
      left top,
      left bottom,
      from(rgba(0, 0, 0, 1)),
      to(rgba(0, 0, 0, 0)));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

@keyframes movecloud {
  0% {
    background-position: 0px;
  }

  100% {
    background-position: 1063px;
  }
}

#app {
  max-width: 450px;
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  backdrop-filter: blur(55px);
  padding: 2rem 3rem;
  color: #fff;
  z-index: 10;
}

#app .form-floating>label {
  color: #000;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.nav-box {
  margin-top: 24px;
  background: #ffffff;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0px 4px 5px #00000026;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: linear-gradient(rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0.5)),
    url(https://source.unsplash.com/random/900x200/?nature);
  background-size: cover;

  .meta-user {
    display: flex;
    gap: 0.7rem;
    align-items: center;

    .avatar {
      border-radius: 50%;
      overflow: hidden;
      width: 50px;
      height: 50px;
      background: #4b59c8;
    }

    .nav-nick-name {
      display: flex;
      flex-direction: column;
      line-height: 18px;

      .name-user {
        font-size: large;
        font-weight: bold;
        margin-bottom: 2px;
      }

      .level {
        font-size: small;
      }
    }
  }
}

.bg-material {
  position: fixed;
  background: #007edd;
  /* Edit */
  background: url(../taneyan-lanjhang.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(1.5px);
  -webkit-filter: blur(1.5px);
  /* End of Edit */
  height: 100%;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0px;
  left: 0px;

  .paper-1,
  .paper-2,
  .paper-3,
  .paper-4 {
    box-shadow: 0px 0px 18px #0000005e;
    position: absolute;
  }

  .paper-1 {
    background: #094e89;
    height: 120%;
    width: 180%;
    transform: rotate(43deg);
    bottom: -73%;
    left: -99%;
  }

  .paper-2 {
    background: #0b72b5;
    height: 120%;
    width: 180%;
    transform: rotate(136deg);
    bottom: -72%;
    right: -76%;
  }

  .paper-3 {
    background: #009688;
    height: 204%;
    width: 200%;
    transform: rotate(46deg);
    top: -127%;
    right: -119%;
  }

  .paper-4 {
    background: #42c4fe;
    height: 204%;
    width: 200%;
    transform: rotate(315deg);
    bottom: -175%;
    right: -119%;
  }
}

.bg-material-login {
  position: fixed;
  background: #9e9e9e;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0px;
  left: 0px;

  .paper-1,
  .paper-2,
  .paper-3,
  .paper-4 {
    box-shadow: 0px 0px 18px #0000005e;
    position: absolute;
  }

  .paper-1 {
    background: #1c593c;
    height: 120%;
    width: 180%;
    transform: rotate(43deg);
    bottom: -73%;
    left: -99%;
  }

  .paper-2 {
    background: #f44336;
    height: 120%;
    width: 180%;
    transform: rotate(136deg);
    bottom: -72%;
    right: -76%;
  }

  .paper-3 {
    background: #007edd;
    height: 204%;
    width: 200%;
    transform: rotate(46deg);
    top: -127%;
    right: -119%;
  }

  .paper-4 {
    background: #990000;
    height: 204%;
    width: 200%;
    transform: rotate(315deg);
    bottom: -175%;
    right: -119%;
  }
}

.bg-theme {
  background: #ffffff;
  background-position: 6px;
  background-size: 65px;
  background-repeat: no-repeat;
  border-radius: 2px;
  border: none;
  box-shadow: 0px 4px 5px #00000026;

  .card-body {
    display: flex;
    justify-content: end;
    flex-direction: column;
  }

  .card-title {
    text-align: right;
    margin-left: 20%;
  }
}

.name-app {
  color: white;
}


.icon-new {
  background-image: url(../../assets/icons/new.png);
}

.icon-graduation {
  background-image: url(../../assets/icons/graduation.png);
}

.icon-education {
  background-image: url(../../assets/icons/education.png);
}

.icon-admin {
  background-image: url(../../assets/icons/admin.png);
}

.icon-optimization {
  background-image: url(../../assets/icons/optimization.png);
}

.icon-video {
  background-image: url(../../assets/icons/video.png);
}

.icon-public-relations {
  background-image: url(../../assets/icons/public-relations.png);
}

.icon-web-link {
  background-image: url(../../assets/icons/web-link.png);
}

.icon-student-add {
  background-image: url(../../assets/icons/student-add.png);
}

.icon-help-desk {
  background-image: url(../../assets/icons/help-desk.png);
}

.icon-admin-help-desk {
  background-image: url(../../assets/icons/admin-help-desk.png);
}

.icon-tracer-study {
  background-image: url(../../assets/icons/tracer-study.png);
}

.icon-open-ticket {
  background-image: url(../../assets/icons/support-ticket.png);
}

.icon-personal-development {
  background-image: url(../../assets/icons/personal-development.png);
}

.icon-va {
  background-image: url(../../assets/icons/va.png);
}

.icon-voting {
  background-image: url(../../assets/icons/voting-box.png);
}

.icon-compliant {
  background-image: url(../../assets/icons/compliant.png);
}

.icon-librarian {
  background-image: url(../../assets/icons/librarian.png);
}

.icon-fingerprint {
  background-image: url(../../assets/icons/fingerprint.png);
}

.icon-idcard {
  background-image: url(../../assets/icons/idcard.png);
}

.btn {
  border-radius: 3px;
}

.login-bg {
  background: url(../login.jpeg);
  background-size: 100% 100%;
}

.sate {
  font-size: xxx-large;
  font-weight: bolder;
}