#number {
  font-family: monospace;
  color: #cc0000;
  font-weight: bold;
  font-size: 22px;
  vertical-align: middle;
}
#question{
    /*background: #c3dcea;*/
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    /*box-shadow: 0px 0px 30px rgba(0,0,0,0.3);*/
    position: relative;
    /*padding-bottom: 30px;*/
}
#question_header{
    /*display: flex;*/
    flex-direction: column;
    justify-content: center;
    /*align-items: center;*/
    padding: 10px;
    /*background-color: #2ba2e8;*/
    position: relative;
    overflow: hidden;
}
.question_number{
    color:#000;
font-family: Pyidaungsu;
font-size: 18px;
font-weight: bold;
position: relative;
letter-spacing: 0;
text-align: center;
background-image: url(../images/question-box.png);
background-repeat: no-repeat;
height: 50px;
text-align: right;
padding: 12px 21px;
width: 112px;
letter-spacing: 1px;
}

.question_point_number{
   color:#000;
font-family: Pyidaungsu;
font-size: 18px;
font-weight: bold;
position: relative;
letter-spacing: 0;
text-align: center;
    background: url(../images/question-score.png);
    background-repeat: no-repeat;
height: 50px;
text-align: right;
padding: 12px 21px;
width: 112px;
letter-spacing: 1px;
}
.question_qty{
    color: #fff200;
    font-family: Pyidaungsu;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    letter-spacing: 0;
    text-align: center;
}
.question_name {
    color: white;
    font-family: Pyidaungsu;
    font-size: 30px;
    text-align: center;
    /*font-weight: bold;*/
    position: relative;
    letter-spacing: 0;
}
.question_backgroundbit {
    position: absolute;
    width: 100%;
    opacity: 0.1;
}
.question_userAvatar{
    border-radius: 50%;
    overflow: hidden;
    padding: 8px;
    position: relative;
    height: 80px;
    width: 80px;
    border: 2px solid rgba(255,255,255,0.6);
    margin-bottom: 10px;
    margin: 0 auto;
}
.question_bodywrap {
    /*background: #c3dcea;*/
}
#quiz ul li{
  color: #000000;
    display: block;
    position: relative;
    float: left;
    width: 85%;
    left: 9%;
    padding: 0px;
    /* height: 80px; */
    background: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
    border-bottom: 1px solid #0b55b7;
}

#quiz ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

#quiz ul li label{
    display: block;
    position: relative;
    font-weight: 300;
    font-size: 1.05em;
    padding: 17px 15px 15px 15px;
    /* margin: 10px auto; */
    height: -2px;
    text-align: center;
    line-height: 1;
    z-index: 9;
    /*color: #000 !important;*/
    cursor: pointer;
    -webkit-transition: all 0.25s linear;
}

#quiz ul li:hover label{
    /*color: #FFFFFF;*/
}

#quiz ul li .check{
  display: block;
    position: absolute;
    border: 5px solid #AAAAAA;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    top: 17px;
    visibility: hidden;
    left: 19px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
}

#quiz ul li:hover .check {
  border: 5px solid #ffe200;
}

#quiz ul li .check::before {
  display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 14px;
    width: 14px;
    top: 3px;
    left: 3px;
  margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 5px solid #fff200;
}

input[type=radio]:checked ~ .check::before{
  background: #fff200;/*attr('data-background');*/
}

input[type=radio]:checked ~ label{
  color: #fff200;
}

.ink.animate {animation: ripple 0.65s linear;}
@keyframes ripple {
    /*scale the element to 250% to safely cover the entire link and fade it out*/
    100% {opacity: 0; transform: scale(2.5);}
}