@font-face {
  font-family: "Roboto-Regular";
  src: url(font/Roboto-Regular.ttf);
}

@font-face {
  font-family: "Roboto-Bold";
  src: url(font/Roboto-Bold.ttf);
}

#quiz-header{
  margin-top:28px;
  padding-bottom: 10px;
  /* border-bottom: 1px solid #81a3d5; */
  text-align: center;
}
  #question-header{
  /* padding-left:36px!important;
  padding-top:14px; */
  padding-left:21px!important;
  padding-top:13px;
  padding-bottom: 10px;
  background-color: #a6bcdd;
  width: 101.5%;
}
#quiz-name {
  background: white;
  display: none;
  width: 100%;
  border-bottom: 1.5px solid #81a3d5;
}
#quiz-name>tbody>tr>td {
  /* padding: 19px 14px 9px; */
  padding: 26px 14px 11px;
  display: table-cell;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
 
}
#option-row{
  padding-top: 15px;
}

.submit{
  background-color: #86b7e1;
  padding:10px;
  border:1px solid white;
  position: absolute;
  top:60%!important;
  left: 50%;
  margin-right: -50%;
  transform: translate(165%, 855%)!important;

}

.previousNext{
padding-top: 20px;
text-align: center;
}
.previousButton{
display: inline;
background-color: #72c4a4;
padding:10px;
border:1px solid white;
}
.nextButton{
display: inline;
background-color: #cecece;
padding:10px;
border:1px solid white;
}
.quiz-selected{
border-bottom: 3px solid #81a3d5;
}
input{
margin-left: 20px;
margin-top: 17px;
margin-right: 10px;

}
#result-p{
font-size :25px;
position: absolute;
top:54%;
left: 50%;
margin-right: -50%;
transform: translate(62%, 811%);
vertical-align: middle;
display:none;
}
#result-td{
text-align: center;
position: absolute;
top:50%!important;
left: 50%;
margin-right: -50%!important;
transform: translate(143%, 124%)!important;
}
.question{
font-size: 14px;
margin-bottom: 10px;
background-color: #c8cfdb;
padding-left: 20px;
padding-top: 6px;
padding-bottom: 6px;
width: 101.5%;
}
.answers {
margin-bottom: 20px;
text-align: left;
display: inline-block;
}
.answers label{
display: block;
margin-bottom: 10px;
}
#submitButton, .submission{
font-family: "Roboto-Regular";
font-size: 17px;
background-color: #279;
color: #fff;
border : none;
padding: 11px;
cursor: pointer;
width:20%;
margin-left:40%;
margin-right:40%;
margin-top:30px;
margin-bottom: 30px;

}
button.next:disabled
{
  background-color: #C0C0C0;
}
.next{
font-family: "Roboto-Regular";
font-size: 17px;
background-color: #279;
color: #fff;
border : none;
padding: 11px;
cursor: pointer;
width:49%;
margin-bottom:5px;
/* display:none; */
}


.previous{
font-family: "Roboto-Regular";
font-size: 17px;
background-color: #279;
color: #fff;
border : none;
padding: 11px;
cursor: pointer;
width:49%;
margin-left:1%;
/* margin-top:4%; */
margin-bottom:5px;
/* display:none; */
margin-right:0.5%;
}

button:hover{
background-color: #38a;
}
#abort, #further{
font-family: "Roboto-Regular";
font-size: 17px;
background-color: #279;
color: #fff;
border : none;
padding: 11px;
cursor: pointer;
width:32%;
}
.right_wrong{
  height: 18px;
  float:right;
  margin-right: 10px;
  margin-top: -13px;
  position:absolute;
  right:0;
}

.slide{
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
height:100%;
transition: opacity 0.5s;
display : none;
}
#iframeDiv{
  height: 56%;
}
.quiz-container{
position: relative;
height: 200px;
margin-top: 40px;
}
.iframeClass{
  visibility: hidden;
}
#retry-button{
  display: none;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.Popup-modal {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 35%; /* Could be more or less, depending on screen size */
}
#modal-button-span{
  text-align: center;
  display: block;
  padding-top: 3%;
}
/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
@media only screen and (min-width: 700px) and (max-width: 800px) {
  #result-p{
    font-size :25px;
    position: absolute;
    top:54%;
    left: 24%;
    margin-right: -50%;
    transform: translate(62%, 811%);
    vertical-align: middle;
    display:none;
    }
    #result-td{
    text-align: center;
    position: absolute;
    top:50%!important;
    left: 24%;
    margin-right: -50%!important;
    transform: translate(143%, 124%)!important;
    }
    .submit{
      background-color: #86b7e1;
      padding:10px;
      border:1px solid white;
      position: absolute;
      top:60%!important;
      left: 24%;
      margin-right: -50%;
      transform: translate(165%, 855%)!important;
    
    }
}
@media only screen and (min-width: 620px) and (max-width: 699px) {
  #result-p{
    left: 21%;
    }
    #result-td{
    left: 21%;
    }
    .submit{
      left: 21%;
    }
}
@media only screen and (min-width: 570px) and (max-width: 620px) {
  #result-p{
    left: 18%;
   
    }
    #result-td{
    left: 18%;
   
    }
    .submit{
      left: 18%;
      
    }
}
@media only screen and (min-width: 500px) and (max-width: 570px) {
  #result-p{
    left: 13%;
   top: 40% !important;
    }
    #result-td{
    left: 12%;
    top: 29% !important;
    }
    .submit{
      left: 13%;
      top: 46% !important;
    }
}
@media only screen and (min-width: 319px) and (max-width: 329px){
  #result-p{
    left: -14%;
    top: 4% !important;
    }
    #result-td{
    left: -15%;
    top: -2% !important;
    }
    .submit{
      left: -14%;
      top: 4% !important;
    }
    #submitButton, .submission{
      cursor: pointer;
      width:33%;
      margin-left:35%;
      padding:6px;
     }
     #question-header{
      padding-left:7px!important;
    }
   
      .next{
        padding: 7px;
        width:48%;
        margin-top:0px!important;
        bottom:0!important;
        right:0;
        /* margin-right:28px; */
        /* position:fixed; */
        
        }
        .previous{
        padding: 7px;
        margin-top:0px!important;
        width:45%;
        margin-left:4.5%;
        bottom:0!important;
        /* position:fixed; */
        margin-right: 2%;

        }
     
}
@media only screen and (min-width: 330px) and (max-width: 359px){
  #result-p{
    left: -6%;
    top: 4% !important;
    }
    #result-td{
    left: -8%;
    top: -2% !important;
    }
    .submit{
      left: -8%;
      top: 4% !important;
    }
    #submitButton, .submission{
      cursor: pointer;
      width:33%;
      margin-left:35%;
      padding:6px;
     }
     #question-header{
      padding-left:7px!important;
    }
    .next{
      padding: 7px;
      width:43%;
      margin-bottom:10px;
      
      margin-top:370px;
      
      }
      .previous{
      padding: 7px;
      margin-top:370px;
      width:43%;
      margin-left:4%;
      margin-bottom:10px;
     
      }
    
}
@media only screen and (min-width: 360px) and (max-width: 374px){
  #result-p{
    left: -6%;
    top: 4% !important;
    }
    #result-td{
    left: -8%;
    top: -2% !important;
    }
    .submit{
      left: -8%;
      top: 4% !important;
    }
    #submitButton, .submission{
      cursor: pointer;
      width:31%;
      margin-left:35%;
     }
     #question-header{
      padding-left:7px!important;
    }
    .next{
      padding: 7px;
      width:45%;
      margin-bottom:0px!important;
      margin-top:0px!important;
      /* position:fixed; */
      bottom:10px;
      right:0px;
      /* margin-right: 23px; */
      }
      .previous{
      padding: 7px;
      margin-top:0px!important;
      width:43%;
      margin-left:7%;
      margin-bottom:0px!important;
      /* display:none; */
      /* position:fixed; */
      bottom:10px;
      margin-right:1%;
      }
     
}
@media only screen and (min-width: 375px) and (max-width: 400px){
  #result-p{
    left: -5%;
    top: 4% !important;
    }
    #result-td{
    left: -6%;
    top: -2% !important;
    }
    .submit{
      left: -5%;
      top: 4% !important;
    }
    #submitButton, .submission{
      cursor: pointer;
      width:31%;
      margin-left:35%;
     }
     #question-header{
      padding-left:7px!important;
    }
    .next{
      padding: 7px;
      width:45%;
      margin-bottom:0px!important;
      margin-top:0px!important;
      /* position:fixed; */
      bottom:10px;
      right:0px;
      /* margin-right: 23px; */
      }
      .previous{
      padding: 7px;
      margin-top:0px!important;
      width:43%;
      margin-left:7%;
      margin-bottom:0px!important;
      /* display:none; */
      /* position:fixed; */
      bottom:10px;
      margin-right:1%;
      }
     
}
/* @media only screen and (min-width: 401px) and (max-width: 420px){
  #result-p{
    left: 4%;
    top: 34% !important;
    }
    #result-td{
    left: 4%;
    top: 33% !important;
    }
    .submit{
      left: 5%;
      top: 32% !important;
    }
    #submitButton, .submission{
      cursor: pointer;
      width:31%;
      margin-left:35%;
     }
     #question-header{
      padding-left:7px!important;
    }
    .next{
      padding: 7px;
      width:45%;
      margin-bottom:10px;
      display:none; 
      margin-top:50px;
      
      }
      .previous{
      padding: 7px;
      margin-top:115px;
      width:45%;
      margin-left:5%;
      margin-bottom:10px;
      display:none;
      }
      
} */
@media only screen and (min-width: 421px) and (max-width: 465px){
  #result-p{
    left: 4%;
    top: 34% !important;
    }
    #result-td{
    left: 4%;
    top: 33% !important;
    }
    .submit{
      left: 5%;
      top: 32% !important;
    }
    #submitButton, .submission{
      cursor: pointer;
      width:31%;
      margin-left:35%;
     }
     #question-header{
      padding-left:7px!important;
    }
    .next{
      padding: 7px;
      width:43%;
      margin-bottom:10px;
      /* display:none;  */
      margin-top:0px!important;
      /* position:fixed; */
      bottom:0;
      right:0;
      margin-right:31px;
      
      }
      .previous{
      padding: 7px;
      margin-top:0px!important;
      width:43%;
      margin-left:4%;
      margin-bottom:10px;
      /* display:none; */
      /* position: fixed; */
      bottom:0;
      }
}
@media only screen and (min-width: 466px) and (max-width: 499px){
  #result-p{
    left: 8%;
    top: 14% !important;
    }
    #result-td{
    left: 7%;
    top: 13% !important;
    }
    .submit{
      left: 7%;
      top: 13% !important;
    }
    #submitButton, .submission{
      cursor: pointer;
      width:31%;
      margin-left:35%;
     }
     #question-header{
      padding-left:7px!important;
    }
    .next{
      padding: 7px;
      width:45%;
      margin-bottom:10px;
      /* display:none;  */
      margin-top:150px;
      
      }
      .previous{
      padding: 7px;
      margin-top:150px;
      width:45%;
      margin-left:5%;
      margin-bottom:10px;
      /* display:none; */
      }
}

@media only screen and (min-width: 401px) and (max-width: 420px){
  #result-p{
    left: -1%;
    top: 34% !important;
    }
    #result-td{
    left: -2%;
    top: 33% !important;
    }
    .submit{
      left: -1%;
      top: 32% !important;
    }
    #submitButton, .submission{
      cursor: pointer;
      width:31%;
      margin-left:35%;
     }
     #question-header{
      padding-left:7px!important;
    }
    .next{
      padding: 7px;
      width:43%;
      margin-bottom:10px;
      /* display:none;  */
      }
      .previous{
      padding: 7px;
      width:43%;
      margin-left:7%;
      margin-bottom:10px;
      /* display:none; */
      }
}
@media only screen and (device-width: 1024px) and (device-height: 1366px){

    #question-header{
      padding-left: 9px!important;
    }
    #result-p{
      left: 41%;
      }
      #result-td{
      left: 41%;
      }
      .submit{
        left: 41%;
      }
}
@media only screen and (min-device-width: 319px) and (max-device-width: 390px){
.Popup-modal {
  margin: 37% auto; 
  padding: 12px;
  width: 81%; /* Could be more or less, depending on screen size */
}
#abort, #further{
  padding: 7px;
  width:44%;
  }
}
@media only screen and (min-device-width: 391px) and (max-device-width: 462px){
  .Popup-modal {
    margin: 33% auto; 
    padding: 16px;
    width: 75%; /* Could be more or less, depending on screen size */
  }
  #abort, #further{
    padding: 7px;
    width:38%;
    }
  }
  @media only screen and (min-device-width: 463px) and (max-device-width: 800px){
    .Popup-modal {
      margin: 32% auto; 
      padding: 16px;
      width: 75%; /* Could be more or less, depending on screen size */
    }
    #abort, #further{
      padding: 7px;
      width:38%;
      }
    }
  @media only screen and (min-device-width: 801px) and (max-device-width: 1000px){
    .Popup-modal {
      margin: 30% auto; 
      padding: 16px;
      width: 75%; /* Could be more or less, depending on screen size */
    }
    #abort, #further{
      padding: 7px;
      width:32%;
      }
    }
    @media only screen and (min-device-width: 1001px) and (max-device-width:1300px){
      .Popup-modal {
        margin: 22% auto; /* 15% from the top and centered */
        padding: 16px;
        width: 65%; /* Could be more or less, depending on screen size */
      }
      #abort, #further{
        padding: 7px;
        width:35%;
        }
      }
   @media only screen and (min-device-width: 1301px) and (max-device-width:1500px){
      .Popup-modal {
          margin: 18% auto; /* 15% from the top and centered */
          padding: 16px;
          width: 65%; /* Could be more or less, depending on screen size */
        }
      #abort, #further{
          padding: 7px;
          width:35%;
          }
        }