.quiz-container {padding: 0 !important; box-shadow: 0 0 1rem 0 #ddd !important;}
#quiz-root .uk-container:nth-child(1) {padding: 0 !important;   margin: 2rem 0 !important;   box-shadow: none !important;}
#currentQuestionText {background: white;   font-weight: 100;   padding: 0 10px;   border-radius: 50px;}
#countdownTimer {background: white;   width: 100px;   display: inline-block;   text-align: center;   border-radius: 50px;}
.progress-container {width: 100%;   height: 1px;   overflow: hidden;   background: deeppink;}
.progress-bar {height: 10px; background: #fff5f5; transition: width 0.1s linear;}
.options button {display: block;   width: 100%;   cursor: pointer;   transition: background 0.3s;   text-align: left;   border: 1px solid #eee;   background: white;   padding: 1rem;   color: black !important;   font-size: 1rem;}
.options button.correct {background: repeating-linear-gradient(49deg, white, white 0px, #d4edda 1px, #d4edda 1px); border: 1px solid transparent;}
.options button:before {text-align: center;   margin-right: 0.5rem;   display: inline-block;   font-size: 1rem;   color: #666;   border: 2px solid #ddd;   border-radius: 50%;   width: 1.5rem;   height: 1.5rem;   line-height: 1.5rem;   background: repeating-linear-gradient(50deg, white, white 0px, #ddd 1px, #ddd 1px); }
.options button:nth-child(1):before {content: "A";}
.options button:nth-child(2):before {content: "B";}
.options button:nth-child(3):before {content: "C";}
.options button:nth-child(4):before {content: "D";}
.question {border: 1px solid #eee;   color: black;   padding: 1rem;   font-size: 1rem;   font-family: verdana, sans-serif, arial, tahoma;}
.question p:nth-child(1) {background: linear-gradient(to right, #eee9, #fff); border-radius: 50px;}
.question strong, .question b {font-weight: 900;   color: brown;}
.wrong {background-color: #ffeff2; border: 1px solid pink; text-decoration: line-through;}
.correct::before {content: "\2713" !important; border: 2px solid teal !important;   color: teal !important;   font-weight: 900;  text-shadow: 1px 1px;}
.wrong::before {content: "\2715" !important; border: 2px solid crimson !important;   color: crimson !important;   font-weight: 900; text-shadow: 1px 1px;}
.quiz-box-2 {padding: 0; border-left: 1rem solid #fcfcfc;}
.nav-box-card {height: 360px;   overflow-y: scroll;   text-align: center;   padding: 0;   border-bottom: 1rem solid white;}
.nav-box button {width: 25%;   color: #999;   border: 1px solid #eee9;   padding: 1rem 0;   background: white;   cursor: pointer;}
.nav-box button.active {background: cadetblue;   color: white;   border: 1px solid cadetblue;}
.nav-box button:hover {background: #eee;}
.nav-btn-bar {background: repeating-linear-gradient(50deg, white, white 0px, #ddd9 1px, #ddd9 1px);   padding: 1rem;   border: 1px solid #eee;}
.nav-btn-bar button {line-height: unset; width: 100px; cursor: pointer; padding: 5px 0;}
.nav-box button:hover {background: cadetblue;   color: white;   border: 1px solid cadetblue;}
.prev-btn {background: repeating-linear-gradient(50deg, white, white 0px, #ddd 1px, #ddd 1px);   border: 1px solid #ddd;}
.next-btn {background: #09f; border: 1px solid #09f; color: white;}
.finish-btn {float: right; background: crimson; color: white; border: 1px solid crimson;}
.prev-btn::before {content: "❮"; padding-right: 5px;}
.next-btn::after {content: "❯"; padding-left: 5px;}
.finish-btn::before {content: "✓"; padding-right: 5px;}
.timer-box {text-align: right;   background: #fff5f5;   padding: 1rem;}
.timer-box i {display: inline-block;   background: deeppink;   color: white;   width: 1.5rem;   height: 1.5rem;   line-height: 1.5rem;   text-align: center;   border-radius: 50px;}
.tbr, .tbl {display: inline-block;}
.tbl {float: left;}
.rt {background: repeating-linear-gradient(50deg, white, white 0px, #ddd9 1px, #ddd9 1px);}
.rt h5 {font-size: 1.5rem !important;   font-weight: 100 !important;   text-shadow: 0px 1px;   padding: 2rem 1rem !important;   color: black !important;   border-left: none !important;   background: #00808024 !important;}
.rtt h6 {display: inline-block;   font-size: 2rem !important;   background: white !important;   width: 10rem;   height: 10rem;   line-height: 10rem;   text-align: center !important;   color: teal !important;   border: 1px solid !important;   border-radius: 50%;   box-shadow: 0 0 1rem 0;}
.rtt td:nth-child(1) {width: 20rem;   text-align: center;   background: transparent !important; border-bottom: none;}
.rtt td:nth-child(2) {padding: 1rem 2rem; border-bottom: none;}
.rtt td:nth-child(2) p {background: white;   padding: 0.5rem;}
.rtt td:nth-child(2) p b {float: right;   background: cadetblue;   color: white;   padding: 0 1rem;}
.rt button {background: crimson;   color: white;   border: 1px solid crimson;   font-size: 1rem;   padding: 1rem;}
.rt button:hover {cursor: pointer;}
mjx-container {display: inline-block !important;}
mjx-container [size="s"] {   font-size: 100% !important; }
@media (max-width: 640px) {
    .quiz-container {padding: 0;   box-shadow: 0 0 1rem 0 #000;}
    .nav-btn-bar {height: 150px;   font-size: 1rem;   text-align: center;}
    .nav-btn-bar button {padding: 1rem 0;   width: 49%;   font-size: 1rem;}
    .finish-btn {width: 100% !important;   border: 1px solid white;   margin: 1rem 0;}
    .rtt td {display: block !important;}
    .rtt td:nth-child(1) {display: block !important;     width: 100% !important;     text-align: center !important;     border: none !important; padding: 2rem 0 !important;}
    .n1table td:nth-child(2) {display: block;}
    .n1menu {display: block;   text-align: center;   border-radius: 0;   background: linear-gradient(to right, purple, crimson);   color: white;}
    .n1menu:hover {backgroud: #000;}
}