*{ box-sizing: border-box; }   
  .quizbox-3schools .qbtnlabel:hover { background-color:#0033ff;color:white;border:1px solid black;box-shadow:0px 0px 15px black;} 
  .answerBox .option:hover { background-color:#d7dadb; color:black;}      
  a {font-size:20px;color: blue;}
  a:hover {color: red;}  
  h6 {text-align: right;}
  p {font-size:20px;color: black;}
  .start-quiz-btn{ display: none; } 
.start-quiz-btn.show{ display: inline-block; }
    .start2-quiz-btn{ display: none; } 
.start2-quiz-btn.show{ display: inline-block; }
   .back-before-btn{ display: none; } 
.back-before-btn.show{ display: inline-block; } 
   .my-name{ display: none; }
  .my-name.show{ display: block; } 
   .my-surname{ display: none; } 
  .my-surname.show{ display: block; } 
  
  .button-71 {width:calc(30% - 20px); padding: 12px 20px; color:white; background-color:#2450ff;border:1px solid black;box-shadow:0px 0px 5px #000000;font-size: 20px; border-radius: 20px; font-family: Arial; cursor: pointer; white-space:nowrap; margin: 10px; }
  
   .button-71:hover { background-color:#0033ff;color:white;border:1px solid white;box-shadow:0px 0px 15px black;}

    .button-72 {width:calc(30% - 20px); padding: 12px 20px; color:white; background-color:#fc8c19;border:1px solid black;box-shadow:0px 0px 5px #000000;font-size: 20px; border-radius: 20px; font-family: Arial; cursor: pointer; white-space:nowrap; margin: 10px; }
  
   .button-72:hover { background-color:#ff8100;color:white;border:1px solid white;box-shadow:0px 0px 15px black;}
  
  
   .button-77 {width:calc(50% - 20px); padding: 12px 20px; color:white; border:1px solid white; background-image: linear-gradient(to bottom, #afd652, #6db62e);background-color: #6db62e;box-shadow:0px 0px 5px #000000;font-size: 20px; border-radius: 20px; font-family: Arial; cursor: pointer; white-space:nowrap; margin: 10px; }
  .button-77:hover { background-color:#0033ff;color:white;border:2px solid white;box-shadow:0px 0px 15px black;}
  
.quizbox-3schools .qbtnlabel{width:calc(40% - 25px); padding: 50px 16px; color:white; background-color:#2852fa;border:1px solid #0c0d0d;box-shadow:0px 0px 5px #000000;font-size: 20px; border-radius: 20px; font-family: Arial; cursor: pointer; white-space:nowrap; margin: 10px; }   .qbtn:focus{ outline:none; } 
  
  .quizbox-3schools{  max-width: 800px; margin:15px auto; padding:30px 10px;text-align:center;border-radius: 3px; background-color:#ffffff;box-shadow:0px 0px 2px #000000 ;border:4px inset #8baff9;}    
    .password-box{ display:none;} 
  .password-box.show{ display: block; } 
  
  .quiz-home-box{ display:none;} 
  .quiz-home-box.show{ display: block; }   
.quizbox-3schools .qbtn{width:calc(36% - 25px); padding: 10px 16px; color:black; background-color:#f0f3ff;border:1px solid #0c0d0d;box-shadow:0px 0px 5px #000000;font-size: 20px; border-radius: 20px; font-family: Arial; cursor: pointer; white-space:nowrap; margin: 10px; }   .qbtn:focus{ outline:none; }   .quiz-box{ display: none; } .quiz-box.show{ display: block; }     .quiz-box .setting-3schools{ display: flex; flex-wrap: wrap; justify-content: space-between; font-size:15px;text-transform: none; color: #000; }   
  
  .quizbox-3schools .u-namepass,  .tuman,.maktab,.sinf,.u-name{ width: 300px; font-size: 25px; height: 40px; padding: 0 5px; text-align: center; margin-top: 15px;}
 
  .quizbox-3schools .my-name, .my-surname, .savol-soni{ width: 300px; font-size: 25px;margin-top: 3px;border-radius: 5px;
    padding: 10px 5px;
    border: solid 1px #cdc5bc;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .1);
    background-color: #fafafa;
    transform: translateZ(1px);    appearance: menulist-button;
    background-image: none !important;
    background-color: light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
    color: fieldtext !important;}
 
  .quizbox-3schools .test-finish{animation: fadeInOut 1s linear infinite; color:#ffffff; box-shadow:0 0 7px rgba(250,50,50,.3);background-color:#ff00ff; width: auto; font-size: 50px;  text-align: center; padding: 40px;} @keyframes fadeInOut{ 0%{ opacity: 0; } 50%{ opacity: 1; } 100%{ opacity: 0; } }
    
  
  .quizbox-3schools .legend{border-radius:55px;border:none;outline:none;padding:5px 18px;text-align:center; box-shadow:0 0 5px rgba(60,60,60,0.5);background-color:#ffffff} .quiz-box .question-box, .quiz-box .answer-description{background-color:#fff;padding:30px 30px 15px;box-shadow:0 5px 14px 0 rgba(60,60,60,0.3);border-radius:4px; text-align: center; position: relative; }     .setting-3schools {width:100%;position:absolute;top:-36px;left:0;display:flex;justify-content:space-between;}   
  
  .setting-3schools span{width:calc(25% - 9px);color:white;background-color:#2b7fa6;box-shadow:0 0 5px rgba(0,0,0,.4);padding:3px;border-radius:3px;margin:2px auto;}

  
  .setting-3schools .remaining-time.less-time{animation: fadeInOut 1s linear infinite; color:#ffffff; box-shadow:0 0 7px rgba(250,50,50,.3);background-color:#ff00ff; } @keyframes fadeInOut{ 0%{ opacity: 0; } 50%{ opacity: 1; } 100%{ opacity: 0; } }
  
  
  .question-box .question-text{font-size:25px; font-family: 'Arial',serif; color:#000000;} .quiz-box .answerBox{ display: flex; flex-wrap: wrap; justify-content: space-between; } .answerBox .option{ background-color:#ffffff; flex-basis: calc(50% - 35px); max-width: calc(50% - 35px); margin-top: 30px; padding: 7px 13px; font-size: 20px; color:#000000; box-shadow:0 0 4px black;border-radius:3px;text-align:left; cursor: pointer; position: relative; animation: zoomIn .4s linear forwards; opacity: 0; }   @keyframes zoomIn{ 0%{ transform: scale(0.7); } 100%{ transform: scale(1); opacity:1; } } .answerBox .option::before{content: ''; position: absolute; height:18px; width: 18px; right: 15px; top:8px; } .answerBox .option.already-answered{ pointer-events: none; } .answerBox .option.show-correct{ background-color: #11c466; border-color:#059e4c; color: #ffffff; animation: zoomIn 1.9s linear forwards; } .answerBox .option.show-correct::before{content:'\2714';} .answerBox .option.correct{ background-color: #11c466; border-color:#059e4c; color:#ffffff; opacity:1; animation: pulse 1s infinite; }   @keyframes pulse{ 0%{ transform: scale(1); } 50%{ transform: scale(1.1); } 100%{ transform: scale(1); } } .answerBox .option.correct::before{ content: '\2714';} .answerBox .option.wrong{ background-color: #f85943; border-color:#d23723; color: #ffffff; opacity:1; animation: shake 1.7s infinite; } .answerBox .option.wrong::before{content:'\2573';}   @keyframes shake{ 0%,30%,50%{ transform: translateX(10px); } 20%,40%{ transform: translateX(-10px); } 60%{ transform: translateX(-7px); } 70%{ transform: translateX(7px); } 80%{ transform: translateX(-4px); } 90%{ transform: translateX(4px); } 100%{ transform: translateX(0px); } } .quiz-box .answer-description{ margin-top:10px;text-align:left;border:1px inset #11c466; padding: 15px; display: none; } .quiz-box .answer-description.show,.quiz-over-box.show,.place-ads.show,.s-btn.show{ display: block; } .quiz-box .next-question{ margin-top: 20px; text-align: center; } .see-result-btn,.next-question-btn,.place-ads,.s-btn{ display: none; } .see-result-btn.show, .next-question-btn.show{ display: inline-block; }     .quiz-over-box{ text-align: center; display: none; }   .quiz-over-box h2{ font-size:20px; font-family: 'Arial', serif; color: #f70b0b; margin:0px 3px 5px; }   .quiz-over-box h4{ font-size:20px; font-weight: normal; color: #0910f7; margin: 2px 0 2px; }  .quiz-over-box h4 input{border:none;max-width:55px;background:transparent;outline:none;font-size:20px;font-weight:600;}       
  @media (max-width: 667px){ .quizbox-3schools .qbtnlabel{width:calc(80% - 5px); padding: 25px 12px; font-size: 14px;margin:5px 1px; } 
 .quizbox-3schools .button-71,.button-72{width:calc(46% - 5px); padding:8px 8px; font-size: 14px;margin:5px 1px; } 
    .quizbox-3schools .button-77{width:calc(70% - 5px); padding:8px 8px; font-size: 14px;margin:5px 1px; } 
  .quizbox-3schools{  max-width: 800px; margin:15px auto; padding:30px 10px;text-align:center;border-radius: 3px; background-color:#ffffff;box-shadow:0px 0px 2px #000000 ;border:4px inset #8baff9;} 
    .quizbox-3schools .test-finish{animation: fadeInOut 1s linear infinite; color:#ffffff; box-shadow:0 0 7px rgba(250,50,50,.3);background-color:#ff00ff; width: auto; font-size: 20px;  text-align: center; padding: 40px;} @keyframes fadeInOut{ 0%{ opacity: 0; } 50%{ opacity: 1; } 100%{ opacity: 0; } } 
    
    .quiz-box .question-box{ padding: 20px 5px 15px; margin-top:10px; } .quiz-box .question-box .question-text{ font-size: 20px; } .quizbox-3schools{ padding:20px 10px 20px; } .setting-3schools span{font-size:14px;width:calc(25% - 8px);} .answerBox .option{ flex-basis: 100%; max-width: 100%; font-size: 15px; margin-top: 15px; }     .quiz-over-box h2{ font-size: 16px; } .quiz-over-box h4{ font-size: 16px; margin: 2px 0 2px; } }     .blink {animation: blinker 2.5s linear infinite; width:calc(50% - 5px); padding: 8px 8px; background-color:#d7dadb;color:white;border:1px solid #0c0d0d;box-shadow:0px 0px 5px #000000;font-size: 13px; border-radius: 20px; font-family: Arial; cursor: pointer; white-space:nowrap; margin: 10px;  font-family: sans-serif;} @keyframes blinker {30% { opacity: 0; }}
  p {font-size:15px;color: black;}