i.fas.fa-folder-open{color: #ffc42d;font-size: 16px;padding-right:10px;}
i.far.fa-bookmark{color: #115e09;font-size: 16px;padding-right:10px;}
i.far.fa-question-circle{color: #0050aa;font-size: 16px;padding-right:10px;}


body{width:1024px;height:660px;margin:0 auto;position:relative;}
div.current_time {text-align: center;font-size: 18px;color: black;}
div.content {text-align: center;font-size: 18px;color: black;}

div#the_end {text-align: center;padding-top:180px;display:none;}
div#the_end div.icon{color:green;font-size:30px;height:100px;}
div#the_end div.icon i{margin-top:30px;}
div#the_end div.status{font-size:18px;color:#272727;}

table.table_text {width: 100%;height: 100%;}
table.table_text td {text-align: center;vertical-align: center;font-size: 22px;color: #272727;}


div.tiket{padding-top:23px;margin-top:20px;}
div.tiket.no_answers{padding-top:80px;}
div.tiket.hidden{display:none;}
div.tiket table.inner{width: 95%;margin: 30px auto 0 auto;height:400px;}

div.tiket table.inner td.col{vertical-align:middle;text-align:center;}
div.tiket table.inner td.col.col_content{width:500px;border:1px solid #aaaaaa;}
div.tiket table.inner td.col.col_question{width:auto;}

div.tiket div.title {font-weight: bold;}
div.tiket div.cnt_info {position:absolute;bottom:20px;left:20px;font-size:30px;}
div#countdown {position:absolute;bottom:20px;left:440px;}
div.tiket i.next_question {font-size:4em;position:absolute;bottom:20px;right:20px;cursor: pointer;}

/*div.tiket table.table_image {width: 500px;height: 300px;border:1px solid #aaaaaa;margin:0 auto 20px auto;}
div.tiket table.table_image td {text-align: center;vertical-align: center;font-size: 22px;color: #272727;}
div.tiket table.table_image td img {max-width: 100%;max-height: 1000px;}*/

div.tiket div.answer{margin:20px;}
div.tiket div.answer.small_margin{margin:10px;}

div.tiket table.answer{width:100%;min-height:80px;margin:0 0;border-bottom:1px solid #aaaaaa;}
div.tiket table.answer td{vertical-align:middle;min-height:100px;text-align:left;padding:10px;font-size:16px;}
div.tiket table.answer td:hover{background-color:#f0f0f0;}
div.tiket table.answer:last-child{border-bottom:none;}
div.tiket table.answer.selected td{background-color:#aacc99;}

div.tiket div.answer.selected{background-color:#aacc99;}
div.tiket div.answer.unselected{background-color:#aaaaaa;}

div.alert{margin-top:100px;padding-top:100px;}
table.by_center{width:100%;height:100%;}
table.by_center td{vertical-align:middle;text-align:center;padding-top:200px;}

div#panel_answer_by_ball{margin-top:30px;}
div#panel_answer_by_ball div.items{
    border:1px solid white;height:250px;
    background:url('images/scale.png') no-repeat 280px 180px;
    _background-size: contain;
    _background-repeat:no-repeat;
    _background-position:center center;
    position:relative;;
}
div#panel_answer_by_ball div.items div.item{position:absolute;top:31px;width:100px;height:103px;text-align:center;
                color:gray;
                border-radius: 50%;
           }
div#panel_answer_by_ball div.items div.size_1{left:220px;background:url('images/smail.png') no-repeat -3px -1px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 73, 59, 0.75);
    -moz-box-shadow:    0px 0px 5px 0px rgba(255, 73, 59, 0.75);
    box-shadow:0px 0px 5px 0px rgba(255, 73, 59, 0.75);
}
div#panel_answer_by_ball div.items div.size_1:hover{
    -webkit-box-shadow: 0px 0px 12px 0px rgba(255, 73, 59, 0.9);
    -moz-box-shadow:    0px 0px 12px 0px rgba(255, 73, 59, 0.9);
    box-shadow:0px 0px 12px 0px rgba(255, 73, 59, 0.9);
}
div#panel_answer_by_ball div.items div.size_2{left:340px;background:url('images/smail.png') no-repeat -126px -1px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 113, 5, 0.75);
    -moz-box-shadow:    0px 0px 5px 0px rgba(255, 113, 5, 0.75);
    box-shadow:0px 0px 5px 0px rgba(255, 113, 5, 0.75);
}
div#panel_answer_by_ball div.items div.size_2:hover{
    -webkit-box-shadow: 0px 0px 12px 0px rgba(255, 113, 5, 0.9);
    -moz-box-shadow:    0px 0px 12px 0px rgba(255, 113, 5, 0.9);
    box-shadow:0px 0px 12px 0px rgba(255, 113, 5, 0.9);
}
div#panel_answer_by_ball div.items div.size_3{left:461px;background:url('images/smail.png') no-repeat -248px -1px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 176, 35, 0.75);
    -moz-box-shadow:    0px 0px 5px 0px rgba(255, 176, 35, 0.75);
    box-shadow:0px 0px 5px 0px rgba(255, 176, 35, 0.75);
}
div#panel_answer_by_ball div.items div.size_3:hover{
    -webkit-box-shadow: 0px 0px 12px 0px rgba(255, 176, 35, 0.9);
    -moz-box-shadow:    0px 0px 12px 0px rgba(255, 176, 35, 0.9);
    box-shadow:0px 0px 12px 0px rgba(255, 176, 35, 0.9);
}
div#panel_answer_by_ball div.items div.size_4{left:582px;background:url('images/smail.png') no-repeat -371px -1px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(62, 194, 118, 0.75);
    -moz-box-shadow:    0px 0px 5px 0px rgba(62, 194, 118, 0.75);
    box-shadow:0px 0px 5px 0px rgba(62, 194, 118, 0.75);
}
div#panel_answer_by_ball div.items div.size_4:hover{
    -webkit-box-shadow: 0px 0px 12px 0px rgba(62, 194, 118, 0.9);
    -moz-box-shadow:    0px 0px 12px 0px rgba(62, 194, 118, 0.9);
    box-shadow:0px 0px 12px 0px rgba(62, 194, 118, 0.9);
}
div#panel_answer_by_ball div.items div.size_5{left:703px;background:url('images/smail.png') no-repeat -494px -1px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(51, 153, 103, 0.75);
    -moz-box-shadow:    0px 0px 5px 0px rgba(51, 153, 103, 0.75);
    box-shadow:0px 0px 5px 0px rgba(51, 153, 103, 0.75);
}
div#panel_answer_by_ball div.items div.size_5:hover{
    -webkit-box-shadow: 0px 0px 12px 0px rgba(51, 153, 103, 0.9);
    -moz-box-shadow:    0px 0px 12px 0px rgba(51, 153, 103, 0.9);
    box-shadow:0px 0px 12px 0px rgba(51, 153, 103, 0.9);
}
div#panel_answer_by_ball div.items div.unselected{opacity:0.7;background-color:white;}
div#panel_answer_by_ball div.items div.selected
{/* -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);*/
    -webkit-animation: swing 0.6s ease;
                 animation: swing 0.6s ease;
                  -webkit-animation-iteration-count: 1;
                  animation-iteration-count: 1;
}
div#panel_answer_by_ball div.items div.selected2
{ /*-webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);*/
    -webkit-animation: swing 2.6s ease;
                 animation: swing 2.6s ease;
                  -webkit-animation-iteration-count: 1;
                  animation-iteration-count: 1;
}
div#panel_answer_by_ball div.items div.item:hover{
    cursor: pointer;
/*    -webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.9);
    -moz-box-shadow:    0px 0px 12px 0px rgba(50, 50, 50, 0.9);
    box-shadow:         0px 0px 12px 0px;*/
}
@-webkit-keyframes swing {
  15% {
    -webkit-transform: translateY(9px);
    transform: translateY(9px);
  }
  30% {
    -webkit-transform: translateY(-9px);
    transform: translateY(-9px);
  }
  40% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
  50% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  65% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes swing {
  15% {
    -webkit-transform: translateY(9px);
    transform: translateY(9px);
  }
  30% {
    -webkit-transform: translateY(-9px);
    transform: translateY(-9px);
  }
  40% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
  50% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  65% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.swing:hover {
  -webkit-animation: swing 0.6s ease;
  animation: swing 0.6s ease;
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
}
