body{
  font-family: poppins!important;
  background-color: #252527!important;
}

.bg-djarum-primary{
  background-color: #991B1B!important;
}

.bg-djarum-dark{
  background-color: #252527!important;
}

.btn-djarum-dark{
  background-color: #474749;
}

.text-djarum-primary{
  color: #FFEEBB!important;
}

.text-djarum-red{
  color: #991B1B!important;
}

/* .failed{
  font-size: 46px;
} */

.card-hint{
  border: 0.5px solid #FFEEBB;
  border-radius: 3px;
}

.card-hint > .card-header{
  border-radius: 0;
  border: 0;
}

#shell{
  margin-top: 2%;
}

.img-placeholder{
  /* width: 35vw; */
  width: 500px;
  max-width: 500px
}

.text-container{
  /* width: 35vw; */
  width: 500px;
  max-width: 500px
}

#myCanvas{
  /* width: 35vw!important; */
  width: 500px;
  max-width: 500px
  display: block;
}

#item-list{
  flex-wrap: wrap;
}

.circle{
  width: 20px;
  height: 20px;
  border: 1px solid #991B1B;
  border-radius: 20px;
}

.item{
  border: 1px grey solid;
  padding: 3px 15px;
  border-radius: 5px;
  margin: 2px 3px;
  background-color: #991B1B;
  font-size: 14px;
}

.modal.show{
  padding-right: 0!important;
  width: 100%!important;
}

.modal-backdrop{
  width: 100%!important;
}

@media screen and (max-width:600px) {
  #myCanvas{
    width: 375px!important;
  }

  .img-placeholder{
    width: 375px;
  }

  .text-container{
    width: 375px;
  }
}