html{
  min-height: 100%;
  -webkit-text-size-adjust: none;
  touch-action: pan-y, pan-x;
}

body{
 background-color: #fff;
 font-family: 'Poppins';
 color: #000000;
 font-size: .9rem;
}

body.home{
  background-image: url("../img/bg-circle-home.svg");
  background-repeat: no-repeat;
  background-position: top -40px left;

}


body.bg-dark{
  background-image: url("../img/bg-content-circle.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-color: #ED1C24 !important;

}

.login-logo{
  position: relative;
}

.login-logo img{
  position: absolute;
  /* top:20px;
  right:10px; */
  top: -150px;
  right: -350px;
}
.login-banner{
  background-color: #ED1C24;
}

.main-content{
  /* background-image: url("../img/bg-union.png"); */
  min-height: 90vh;
}



h1.login-title{
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 26px;
}

h1.page-title{
  font-style: normal;
  font-weight: 500;
  font-size: 25px;
  line-height: 26px;
  padding-top: 0px;
}

h2{
  font-size: 24px;
}

.input-signin, .input-signin:hover {
  background: #FFFFFF;
  border: 1px solid #ddd;
  border-radius: 16px;
  height: 48px;
  padding: 20px;
}

.input-group-text{
  border-radius: 16px;
  color:#999;
  background-color: #fff;
  font-weight: normal;
}


.btn-group-lg > .btn, .btn-lg {
  font-size: 1rem;
  padding: .8rem 1rem;
}

.btn-warning{
  background: linear-gradient(175.99deg, #FFDC5E -28.78%, #FFCE00 13.19%, #FFBD00 64.25%, #E2B103 113.55%, #D89A01 147.89%, #DDAD03 176.06%, #FFBD00 210.4%, #FFCE00 232.7%, #FFDC5E 264.69%);
  font-style: normal;
  font-weight: bold;
  color: #793B2C;
}

.btn-danger{
  background-color: #ED1C24;
  border: solid 1px #ED1C24;
  font-weight: 600;
  color : #fff;
  border-radius: 16px;
}

.btn-danger:hover{
  background-color: #d0161c;
  border: solid 1px #d0161c;
  font-weight: 600;
  color : #fff;
}

.btn-primary{
  background-color: #6F5AF3;
  border: solid 1px #6F5AF3;
  color : #fff;
}

.btn-primary:hover{
  background-color: #5844de;
  border: solid 1px #5844de;
  color : #fff;
}

.btn-outline-light{
  border: 2px solid #FFFFFF;
  font-weight: 500;
  height: 50px;
}


.badge{
}

.bg-light{
  color:#793B2C;
}

.text-gold{
  color:#f6b901;
}

.bg-yellow{
  background-color:  #fff5cc;
}

.card.bg-yellow{
  border-bottom: solid 5px #fcbc00 !important;
  border-radius:10px
}
.list-group-item{
  color: #000;
}

.fw-medium{
  font-weight: 600;
}

.lb-point{
  /* color: #793B2C; */
  /* font-size: 1.25rem; */
  font-weight: 600;
}


.main-menu{
  padding-top:15px;
  padding-left:5px;
  padding-right:5px;
  position: fixed;
  height: 65px;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  transition: 0.5s;
  left: 50%;
  transform: translate(-50%, 0%);
  margin: 0 auto;
  color:#fff;
  font-size: 18px;
  z-index: 10000;
}

.main-menu-active{

}

.main-menu-inactive img{
  filter: grayscale(100%);
  opacity: 40%;
  /* filter: opacity(50%); */
}

.side-menu-label{
  font-size: 18px;
  color:#000;
  padding-top:30px;
}

.side-menu-label.tebak-soal{
  color:#FF9D05 !important;
}

.side-menu-label.tebak-gambar{
  color:#C66EB3 !important;
}

.side-menu-label.tebak-lirik{
  color:#548BDA !important;
}

.side-menu-label.tebak-video{
  color:#29CB8D !important;
}

a{
  text-decoration: none;
}


#point-total{
  background-image: url('../img/icon-point.svg');
  background-repeat: no-repeat;
  background-position: left 15px center;
  padding-left: 45px !important;
  padding-right: 20px !important;
}

#credit-total{
  background-image: url('../img/icon-credit.svg');
  background-repeat: no-repeat;
  background-position: left 15px center;
  padding-left: 45px !important;
  padding-right: 20px !important;
}

.status-label{
  padding:0px;
}

.status-label div{
  background-color: #B20340;
  margin-top:2px;
  height: 25px;
  width: 90%;
  -ms-transform: skew(-20deg); /* Support untuk IE 9 */
  -webkit-transform: skew(-20deg); /* support untuk Safari */
  transform: skew(-20deg); /* default syntax */
  z-index: 0;
  border-radius:5px;
  margin-left: 15px;
}

.status-label p{
  position: absolute;
  z-index: 1;
  font-size: 13px;
  padding-left:40px;
  padding-top:5px;
  color:#fff;
}


.status-label img{
  position: absolute;
  z-index: 1;
  height: 29px;
}

.carousel-indicators {
  bottom: -3rem;
}
.carousel-indicators [data-bs-target]{
  background-color: #EF3239;
  opacity: .3;

  /* height: 10px;
  width: 10px; */
}

.carousel-indicators  [data-bs-target].active{
  opacity: 1;
  /* width: 30px; */
}



.trivia-option{
  background-color: #fff;
  border-radius: 30px;
  padding:10px;
  margin-bottom: 10px;
  cursor: pointer;

}

.trivia-option .no{
  width: 40px;
  height: 40px;
  background: #ED1C24;
  border-radius: 40px;
  color:#fff;
  text-align: center;
  vertical-align: middle;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  padding-top:9px;
  display: inline-block;
}

.trivia-option .answer{
  display: inline-block;
  padding:0px 10px;
}


.trivia-option.selected{
  background-color: #ddd;
}

.trivia-option.selected-true{
  background-color: #86D85D;
}


.trivia-option.selected-true .no{
  color:#86D85D;
  background: #fff;
  font-weight: 700;
  font-size: 20px;
  padding-top:10px;
}

.trivia-option.selected-true .answer{
  color:#fff;
}

.trivia-option.selected-false{
  background-color: #D3766A;
}


.trivia-option.selected-false .no{
  color:#D3766A;
  background: #fff;
  font-weight: 700;
  font-size: 20px;
  padding-top:10px;
}

.trivia-option.selected-false .answer{
  color:#fff;
}

.skeleton-box {
  height: 1em;
  position: relative;
  overflow: hidden;
  background-color: #DDDBDD;
}
.skeleton-box::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
  -webkit-animation: shimmer 2s infinite;
          animation: shimmer 2s infinite;
  content: "";
}


#help-option{
  padding-top:15px;
  padding-left:25px;
  padding-right:25px;
  position: fixed;
  height: 50px;
  bottom: 0;
  width: 300px;
  background-color: #2C4676;
  border-radius: 10px 10px 0px 0px;
  transition: 0.5s;
  left: 50%;
  transform: translate(-50%, 0%);
  margin: 0 auto;
  color:#fff;
  font-size: 14px;
}

#help-option ion-icon{
  font-size: 24px;
}

@-webkit-keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}



@media only screen and (min-width: 768px) {
  .main-content{
    min-height: 100vh;
  }

  h1.page-title{
    padding-top: 80px;
  }

}