pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere !important
}

.navbar-brand {
  color: #3c6cb4 !important
}

.search-mhs-btn {
  background-color: transparent !important;
  border: none !important;
  color: #3c6cb4 !important
}

::placeholder {
  color: #3c6cb4 !important;
  opacity: 1
}

:-ms-input-placeholder {
  color: #3c6cb4 !important
}

::-ms-input-placeholder {
  color: #3c6cb4 !important
}

.title {
  font-weight: 700;
  text-align: center
}

.deskripsi {
  text-align: justify;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* justify-content: center; */
  /* align-items: center; */
  /* text-indent: 2cm; */
  padding-top: 7px
}

.alignleft {
  font-size: 13pt
}

input[type=radio] {
  transform: scale(1.5)
}

#performance-element {
  width: 90%
}

.title-performance {
  font-size: 16pt
}

#textbox {
  width: 100%;
  padding-right: 30%
}

.half-star,
.star {
  font-size: 20pt !important;
  color: #d67c57 !important
}

.blank-star {
  color: #7c6ed1 !important
}

.blank-star,
.half-star {
  font-size: 21pt !important
}

.radar-row {
  width: 100%
}

.radar-row-event {
  width: 100%
}

#desc-title {
  font-size: 16pt
}

.jconfirm-title {
  line-height: 1.5 !important
}

.assessment {
  margin-top: 0 !important
}

.alignleft {
  float: left
}

.alignright {
  float: right;
  margin-top: -5px
}

.navigation {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20
}

.container {
  padding-top: 30px
}

.progress {
  margin-top: 6px
}

#hr-line {
  visibility: hidden
}

@media (max-width:1600px) {
  #textbox {
    padding-right: 20%
  }
}

@media only screen and (max-width:1400px) and (min-width:768px) {
  #textbox {
    padding-right: 30px
  }
}

@media only screen and (max-width:991px) and (min-width:768px) {
  #textbox {
    width: 60% !important;
    margin-bottom: 10px;
    padding-right: 0
  }

  #performance-element {
    width: 50%
  }
}

@media only screen and (max-width:1400px) {
  .biodata-row {
    justify-content: center
  }

  #performance-container {
    border: none
  }

  .biodata-row {
    text-align: center
  }
}

@media (max-width:1150px) {
  .deskripsi {
    text-align: center;
    text-indent: 0
  }

  .title-performance {
    font-size: 14pt;
    margin-bottom: 1.5vh !important
  }

  .star {
    font-size: 14pt !important
  }

  .blank-star,
  .half-star {
    font-size: 15pt !important
  }

  .radar-row {
    width: 75%
  }

  #sub-title {
    text-align: center
  }
}

@media (max-width:991px) {
  #hr-line {
    visibility: visible
  }

  .title-row {
    justify-content: center
  }
}

@media (max-width:768px) {
  .title-performance {
    font-size: 14pt
  }

  #textbox {
    padding-right: 0
  }

  .star {
    font-size: 14pt !important
  }

  .blank-star,
  .half-star {
    font-size: 15pt !important
  }

  #sub-title {
    font-size: 18pt
  }

  #desc-title {
    font-size: 14pt;
    padding-top: 20px
  }

  .radar-row {
    width: 100%
  }

  #textbox {
    width: 90%
  }
}

@media (max-width:360px) {
  .title-performance {
    font-size: 12pt
  }

  #textbox {
    padding-right: 20px
  }

  .star {
    font-size: 12pt !important
  }

  .blank-star,
  .half-star {
    font-size: 13pt !important
  }

  .card {
    width: 15rem !important
  }

  .radar-row {
    width: 100%
  }

  .container-fluid {
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 5px !important
  }
}

@media (max-width:280px) {
  .title-performance {
    font-size: 10pt
  }

  .star {
    font-size: 10pt !important
  }

  .blank-star,
  .half-star {
    font-size: 11pt !important
  }

  .card {
    width: 13rem !important
  }
}