@import url('https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap');

/* Login */
.half, .half .container > .row {
  height: 100vh;
}

.half .bg {
  background-color: #DDE1E6;
}

.half .bg .container {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.half .contents, .half .bg {
  width: 50%;
}

.half h3 {
  font-family: Roboto;
  font-weight: 700;
  font-size: 40px;
  color: #21272A;
  padding-bottom: 15px;
}

.half .form-label {
  font-family: Roboto;
  font-weight: 400;
  font-size: 15px;
  color: #21272A;
}

.half .form-control {
  border: none;
  border-bottom: 1px solid #ced4da;
  border-radius: 0;
  background-color: #F2F4F8;
}

.half .form-control:focus {
  box-shadow: none;
}

.half a {
  font-family: Roboto;
  font-weight: 400;
  font-size: 15px;
  color: #001D6C;
  text-decoration: none;
}

@media (max-width: 991.98px) {
  .half .bg {
    height: 500px;
  }
  .banner {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  .half .contents, .half .bg {
    width: 100%;
  }
}

/* Header */
.nav-bottom {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
}

/* Dropzone */
.dropzone {
  background-color: #D9D9D9;
  border: transparent;
}

/* Button Back */
a.back {
  font-size: 13px;
  color: #000;
  padding: 3px 5px;
  background-color: #ffffff;
}

a.back:hover {
    color: #000;
    opacity: .8;
}

/* Progress Bar */
@property --progress-value {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

/* RPS */
@keyframes rps-progress {
  to {
    --progress-value: 60;
  }
}

.rps {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%, white 0), conic-gradient(#5369F8 calc(var(--progress-value) * 1%), pink 0);
  animation: rps-progress 2s 1 forwards;
}

.rps::before {
  animation: rps-progress 2s 1 forwards;
}

/* Portofolio */
@keyframes portofolio-progress {
  to {
    --progress-value: 70;
  }
}

.portofolio {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%, white 0), conic-gradient(#5369F8 calc(var(--progress-value) * 1%), pink 0);
  animation: portofolio-progress 2s 1 forwards;
}

.portofolio::before {
  animation: portofolio-progress 2s 1 forwards;
}

/* Soal Assesmen */
@keyframes soal-assesmen-progress {
  to {
    --progress-value: 40;
  }
}

.soal-assesmen {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%, white 0), conic-gradient(#5369F8 calc(var(--progress-value) * 1%), pink 0);
  animation: soal-assesmen-progress 2s 1 forwards;
}

.soal-assesmen::before {
  animation: soal-assesmen-progress 2s 1 forwards;
}

/* Contoh Tugas */
@keyframes contoh-tugas-progress {
  to {
    --progress-value: 50;
  }
}

.contoh-tugas {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%, white 0), conic-gradient(#5369F8 calc(var(--progress-value) * 1%), pink 0);
  animation: contoh-tugas-progress 2s 1 forwards;
}

.contoh-tugas::before {
  animation: contoh-tugas-progress 2s 1 forwards;
}

/* Risalah Rapat */
@keyframes risalah-rapat-progress {
  to {
    --progress-value: 80;
  }
}

.risalah-rapat {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%, white 0), conic-gradient(#5369F8 calc(var(--progress-value) * 1%), pink 0);
  animation: risalah-rapat-progress 2s 1 forwards;
}

.risalah-rapat::before {
  animation: risalah-rapat-progress 2s 1 forwards;
}

/* BA Nilai */
@keyframes ba-nilai-progress {
  to {
    --progress-value: 60;
  }
}

.ba-nilai {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%, white 0), conic-gradient(#5369F8 calc(var(--progress-value) * 1%), pink 0);
  animation: ba-nilai-progress 2s 1 forwards;
}

.ba-nilai::before {
  animation: ba-nilai-progress 2s 1 forwards;
}

/* Hasil Remedial */
@keyframes hasil-remedial-progress {
  to {
    --progress-value: 65;
  }
}

.hasil-remedial {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%, white 0), conic-gradient(#5369F8 calc(var(--progress-value) * 1%), pink 0);
  animation: hasil-remedial-progress 2s 1 forwards;
}

.hasil-remedial::before {
  animation: hasil-remedial-progress 2s 1 forwards;
}

/* Data Dokumentasi */
@keyframes data-dokumentasi-progress {
  to {
    --progress-value: 58;
  }
}

.data-dokumentasi {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%, white 0), conic-gradient(#5369F8 calc(var(--progress-value) * 1%), pink 0);
  animation: data-dokumentasi-progress 2s 1 forwards;
}

.data-dokumentasi::before {
  animation: data-dokumentasi-progress 2s 1 forwards;
}

.progress-bar-container {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.progress-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.progress-bar::before {
  color: #000000;
  font-weight: 700;
  counter-reset: percentage var(--progress-value);
  content: counter(percentage) '%';
}

progress {
  visibility: hidden;
  width: 0;
  height: 0;
}