#watupro_quiz *, #watupro_quiz *::before, #watupro_quiz *::after, .watupro-paginator-wrap * {
    box-sizing: border-box;
    border-radius: 20px;
    color: #212187;
max-width:100%;
height:auto;
}

.watupro-qnum-info {
    font-style: italic;
    padding-top: 1.563em;
    clear: both;
    display: none;
}



.watupro_buttons input[type=button] {
    cursor: pointer;
    border: 1px solid #8383af;
    padding: 0.6em 1em;
    border: 1px solid #212187;;
    background: #ffffff;
    color: #fff;
    margin-left: 5px;
    border-radius: 0.188em;
    font-size: 1.1em;
display:none;
}


.watupro_buttons input[type=submit]
.watupro-exam-description button

.watupro-question-choice input[type=radio] + label, .watupro-question-choice input[type=checkbox] + label {
    cursor: pointer;
    padding: 0.6em 1em;
    border: 1px solid #8d0a7e; !important
    background: #8d0a7e; !important
    color: #8d0a7e; !important
    margin-left: 5px;
    border-radius: 0.188em;
    font-size: 1.1em;
}


label:hover, label:active, input:hover+label, input:active+label {
    background-image: linear-gradient(#fff, #8383af);
}

input[type=radio] { display: none }

.watupro_num { display: none }

.watupro-progress-bar {
background-image: linear-gradient(#fff, #8383af);
}

.watupro-progress-container {
flex-direction: column;
    background-color: #eaeaea;
    border-radius: 100%;
    /* position: relative; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.watupro-progress-percent {
    padding: 0 0.313em;
    background: #8d0a7e00;
    font-weight: bold;
    border-radius: 0.625em;
width:0%;
}



.p{
font-family:Roboto;
}


.quiz-area {
    color:#212187;
    background-color: white;
    border-radius: 20px;
    text-align: -webkit-center;
    padding: 20px;
}
.watupro-question-choice input[type=radio] + label, .watupro-question-choice input[type=checkbox] + label {
 
	margin: 0.25em 0 0 0;
    padding: 0.25em 0.75em;
    font-size: 1.5em;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #8383af; !important
    background: #8d0a7e; !important
    color: #8d0a7e; !important
}

ul.watupro-paginator li {
    border: 1px solid #C986A3;
    color: #C986A3;
    background-color: #602222;
    flex-grow: 0; /* 1 if you want the remaining space in the container will be distributed equally to all buttons */
}

ul.watupro-paginator li.answered:hover {
    background-color: #8d0a7e; !important
    border-color: #8d0a7e; !important
    color: #fff;
}



.quiz-area {
      width:100%;
}
.quiz-area p, .quiz-area form  {

}
}

media-query.css

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
max-width:100%;
height:auto;
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
max-width:100%;
height:auto;
  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
max-width:100%;
height:auto;
  
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
max-width:100%;
height:auto;
  
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
max-width:100%;
height:auto;
  
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
max-width:100%;
height:auto;
  
}

.show-question {
display:none;
}

form.quiz-form {
    text-align: center;
}