/*
 *
 *	Colors
 *		White/Light		#ffffff
 *		Gray/Medium		#9f9497
 *		Black/Dark		#393536
 *		Accent 1		#c4161c
 *		Accent 2		#
 *		Accent 3		#
 */

 @font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}



html, body {
    color: #333333;
    background-color:white;
    font-family: 'Roboto', sans-serif;
    /*font-family: Trebuchet MS, sans-serif;*/
}

h1, h2, h3, h4 {
    color: #000000;
    font-weight: bold;
}
#slide-title {
    position: absolute;
    left: 325px;
    font-size: 13px;
    top: 13px;
}
#topic-slide-title {
    position: absolute;
    left: 325px;
    font-size: 13px;
    top: 13px;
    border-left: 2px solid #d50563;
    padding-left: 10px;
}
.bolder-h {
    /*font-family: 'ApexNew Bold';*/
}
.smaller-h {
    font-size: 27px;
}
.normal-h {
    font-weight: normal;
    font-size: 22px;
    /*font-family: 'ApexNew', sans-serif;*/
}
header#slide-header {

}

footer#slide-footer {
    z-index: 0;
    /*height: 3em;*/
    height: 6.25vh;
}
header#slide-header section.slide-width {
}
main#slide-container section.header {
    width: 100%;
    height: 90px;
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(255,255,255);
    /* background: linear-gradient(to right, white 0% 22%, #ffffff 22% 75% );     */
    background-color: #ffffff;
    z-index: 1000;
    border-bottom:4px solid white ;
    border-bottom: 4px solid #725382;
}

main#slide-container section.header h1 {
    color: #d50563;
 }

main#slide-container section.footer {
/*    width: 100%;
    height: 45px;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    z-index: 10000;
    box-shadow: 0 0 1rem rgba(0,0,0,0.25);
    border-top: 2px solid #d50563;
    background-color: #ffffff;
    background-color: #d50563;*/
}
main#slide-container {

}
article#slide {
    background-color: white;
}
article#slide menu {
    background-color: white;
    box-shadow: 0.25rem 0 0.5rem rgba(0,0,0,0.25);
}
article#slide menu::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    border-right: 14px solid transparent;
    border-left: 14px solid transparent;
    border-top: 14px solid white;
    left: 79px;
    bottom: calc(-14px + 1px);
    /*box-shadow: 0.25rem 0 0.5rem rgba(0,0,0,0.25);*/
    /*z-index: -1000;*/
}
a.controls {
    color: #4a4444;
    background-color: #ffffff;
}
a.controls:hover {
    color: #ffffff;
    background-color: #c4161c;
}

#loader {
    color: #d50563;
    background-color: white;
    background-size: cover;
    z-index: 100000;
}

menu#slide-menu section a.menu-link,
menu#slide-menu section a.menu-link:visited {
    color: #333333;
    text-decoration: none;
    /*border-radius: 0.5em;*/
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
menu#slide-menu section a.menu-link:first-child {
    margin-top: 0;
}
menu#slide-menu section a.menu-link:last-child {
    margin-bottom: 0;
}
menu#slide-menu section a.menu-link:hover,
menu#slide-menu section a.menu-link:active {
    color: #333333;
    background-color: transparent;
    text-decoration: none;
}
menu#slide-menu section a.button-locked {
    opacity: 0.5rem;
}
menu#slide-menu section a.link-active {
    color: #333333;
    font-weight: bold;
    /*background-color: #c97e02;*/
}
.menu-topic-title {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
    margin-bottom: 40px;
}
.menu-topic-title:after {
    content: '';
    width: 38px;
    height: 3px;
    position: absolute;
    bottom: -20px;
    left: 0;
}
menu#slide-menu section a.menu-link {
    padding: 15px 0 15px 20px;
    float: left;
    clear: left;
    font-size: 15px;
    line-height: 100%;
    margin: 0;
    width: 100%;
    text-transform: uppercase;
    background-image: url( ../images/tema-0-menu-escudo.png);
    background-repeat: no-repeat;
    background-size: auto 13px;
    background-position: 0px 16px;
}
.menu-topic {
    height: calc(100% - 4vh);
    position: absolute;
    top: 0;
    left: 100%;
    padding: 41px;
    width: 100%;
    transition: left 0.5s ease;
}

#topics-navigation[data-page="0"] ~ #menu-topic-0,
#topics-navigation[data-page="1"] ~ #menu-topic-1,
#topics-navigation[data-page="2"] ~ #menu-topic-2,
#topics-navigation[data-page="3"] ~ #menu-topic-3,
#topics-navigation[data-page="4"] ~ #menu-topic-4,
#topics-navigation[data-page="5"] ~ #menu-topic-5,
#topics-navigation[data-page="6"] ~ #menu-topic-6,
#topics-navigation[data-page="7"] ~ #menu-topic-7,
#topics-navigation[data-page="8"] ~ #menu-topic-8,
#topics-navigation[data-page="9"] ~ #menu-topic-9,
#topics-navigation[data-page="10"] ~ #menu-topic-10,
#topics-navigation[data-page="11"] ~ #menu-topic-11,
#topics-navigation[data-page="12"] ~ #menu-topic-12,
#topics-navigation[data-page="13"] ~ #menu-topic-13,
#topics-navigation[data-page="14"] ~ #menu-topic-14,
#topics-navigation[data-page="15"] ~ #menu-topic-15 {
    left: 0;
}

#topics-navigation[data-page="1"] ~ #menu-topic-0,
#topics-navigation[data-page="2"] ~ #menu-topic-0,
#topics-navigation[data-page="2"] ~ #menu-topic-1,
#topics-navigation[data-page="3"] ~ #menu-topic-0,
#topics-navigation[data-page="3"] ~ #menu-topic-1,
#topics-navigation[data-page="3"] ~ #menu-topic-2,
#topics-navigation[data-page="4"] ~ #menu-topic-0,
#topics-navigation[data-page="4"] ~ #menu-topic-1,
#topics-navigation[data-page="4"] ~ #menu-topic-2,
#topics-navigation[data-page="4"] ~ #menu-topic-3,
#topics-navigation[data-page="5"] ~ #menu-topic-0,
#topics-navigation[data-page="5"] ~ #menu-topic-1,
#topics-navigation[data-page="5"] ~ #menu-topic-2,
#topics-navigation[data-page="5"] ~ #menu-topic-3,
#topics-navigation[data-page="5"] ~ #menu-topic-4,
#topics-navigation[data-page="6"] ~ #menu-topic-0,
#topics-navigation[data-page="6"] ~ #menu-topic-1,
#topics-navigation[data-page="6"] ~ #menu-topic-2,
#topics-navigation[data-page="6"] ~ #menu-topic-3,
#topics-navigation[data-page="6"] ~ #menu-topic-4,
#topics-navigation[data-page="6"] ~ #menu-topic-5,
#topics-navigation[data-page="7"] ~ #menu-topic-0,
#topics-navigation[data-page="7"] ~ #menu-topic-1,
#topics-navigation[data-page="7"] ~ #menu-topic-2,
#topics-navigation[data-page="7"] ~ #menu-topic-3,
#topics-navigation[data-page="7"] ~ #menu-topic-4,
#topics-navigation[data-page="7"] ~ #menu-topic-5,
#topics-navigation[data-page="7"] ~ #menu-topic-6,
#topics-navigation[data-page="8"] ~ #menu-topic-0,
#topics-navigation[data-page="8"] ~ #menu-topic-1,
#topics-navigation[data-page="8"] ~ #menu-topic-2,
#topics-navigation[data-page="8"] ~ #menu-topic-3,
#topics-navigation[data-page="8"] ~ #menu-topic-4,
#topics-navigation[data-page="8"] ~ #menu-topic-5,
#topics-navigation[data-page="8"] ~ #menu-topic-6,
#topics-navigation[data-page="8"] ~ #menu-topic-7,
#topics-navigation[data-page="9"] ~ #menu-topic-0,
#topics-navigation[data-page="9"] ~ #menu-topic-1,
#topics-navigation[data-page="9"] ~ #menu-topic-2,
#topics-navigation[data-page="9"] ~ #menu-topic-3,
#topics-navigation[data-page="9"] ~ #menu-topic-4,
#topics-navigation[data-page="9"] ~ #menu-topic-5,
#topics-navigation[data-page="9"] ~ #menu-topic-6,
#topics-navigation[data-page="9"] ~ #menu-topic-7,
#topics-navigation[data-page="9"] ~ #menu-topic-8,
#topics-navigation[data-page="10"] ~ #menu-topic-0,
#topics-navigation[data-page="10"] ~ #menu-topic-1,
#topics-navigation[data-page="10"] ~ #menu-topic-2,
#topics-navigation[data-page="10"] ~ #menu-topic-3,
#topics-navigation[data-page="10"] ~ #menu-topic-4,
#topics-navigation[data-page="10"] ~ #menu-topic-5,
#topics-navigation[data-page="10"] ~ #menu-topic-6,
#topics-navigation[data-page="10"] ~ #menu-topic-7,
#topics-navigation[data-page="10"] ~ #menu-topic-8,
#topics-navigation[data-page="10"] ~ #menu-topic-9 {
    left: -100%;
}


#topics-navigation {
    position: absolute;
    bottom: 50px;
    left: 41px;
    z-index: 1000;
}
menu#slide-menu section a#menu-prev-topic,
menu#slide-menu section a#menu-next-topic {
    float: unset;
    clear: none;
    cursor: pointer;
    padding: 0;
    width: 0;
    height: 19px;
    font-size: 12px;
}

menu#slide-menu section a#menu-prev-topic {
    padding-right: 17px;
}
menu#slide-menu section a#menu-next-topic {
    padding-left: 17px;
}
menu#slide-menu section a#menu-prev-topic svg {
    transform: scaleX(-1);
}
menu#slide-menu section a#menu-prev-topic svg,
menu#slide-menu section a#menu-next-topic svg {
    height: 15px;
    width: auto;
    vertical-align: middle;
    margin: 0 0 2px 0;
}

#slide-previous-button, #slide-next-button {

}
#slide-previous-button:hover, #slide-next-button:hover {

}
#slide-previous-button-placeholder{
    position: absolute;
    height: 100%;
    /*top: calc(360px - 1.5rem);*/
    right: 200px;
}
#slide-next-button-placeholder{
    position: absolute;
    height: 100%;
    /*top: calc(360px - 1.5rem);*/
    right: 43px;
}
#slide-previous-button{
    position: absolute;
    height: 100%;
    /*top: calc(360px - 1.5rem);*/
    right: 200px;
}
#slide-next-button{
    position: absolute;
    height: 100%;
    /*top: calc(360px - 1.5rem);*/
    right: 43px;
}
#closing-window-message {
    background-color: rgba( 0, 0, 0, 0.5);
    color: #ffffff;
}

.jumping-loading {
    color: #ffffff;
    font-size: 2em;
    text-align: center;
    margin: 0;
    padding: 0.5em;
    transition: color 0.5s ease;
}
.jumping-loading p {
    text-align: center;
}
.jumping-loading p span {
    animation-name: jump-loading;
    animation-duration:1s;
    animation-iteration-count: infinite;
    display:block;
    float: left;
    padding: 0.5;
}

.jumping-loading span:nth-child(1) {
	animation-delay: 0.1s;
}
.jumping-loading span:nth-child(2) {
	animation-delay: 0.2s;
}
.jumping-loading span:nth-child(3) {
	animation-delay: 0.3s;
}
.jumping-loading span:nth-child(4) {
	animation-delay: 0.4s;
}
.jumping-loading span:nth-child(5) {
	animation-delay: 0.5s;
}
.jumping-loading span:nth-child(6) {
	animation-delay: 0.6s;
}
.jumping-loading span:nth-child(7) {
	animation-delay: 0.7s;
}
.jumping-loading span:nth-child(8) {
	animation-delay: 0.8s;
}
.jumping-loading span:nth-child(9) {
	animation-delay: 0.9s;
}
.jumping-loading span:nth-child(10) {
	animation-delay: 1s;
}

@keyframes jump-loading {
    0% {transform: translateY(0);animation-timing-function: ease-out;}
    10% {transform: translateY(-25%);animation-timing-function: ease-in;}
    20% {transform: translateY(0);}
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 5em;
    text-align: center;
}
.spinner > div {
    width: 18px;
    height: 18px;
    background-color: #ef6363;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% { 
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% { 
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

.layer-quiz {
    /*background-image: url(../images/avaliacao/avaliacao_slide2.png);*/
}

.layer-quiz h2 {
    margin: 0 0 20px 0;
}
.layer-quiz  h3 {
    color: #d50563;
    font-weight: bold;
}
.layer-quiz p {
        margin: 0px 0px 20px 0px;
        line-height: 1.45;
}

.layer-quiz p:last-of-type {
    margin-bottom: 0;
}

h2 {
    color: white;
    background: #725382;
    display: block;
    width: max-content;
    padding: 16px;
}

.quiz-obs {
    color: #000000;
}
#progress-bar {
/*    background-image: url(../images/player/progress-bar.png);
    background-size: 100% 100%;
    background-position: center center;*/
    background-color: #db6f39;
    height: 8px;
}

#progress-bar-cover {
    background-color: #0c3977;
    transition: all 1s ease;
}
#progress-bar-position {
    background-color: #ffffff;
    transition: all 1s ease;
    box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.5);
}
@media only screen and (max-width: 1366px)  {
    h2 {

    }
    h3 {

    }
    #progress-bar {
	height: 6px;
    }
}
@media only screen and (max-width: 1280px)  {
    h2 {

    }
    h3 {

    }
    #progress-bar {
	height: 4px;
    }
    #slide-menu {
	width: 50%;
    }
}
body.mobile  {
    font-size: 13px;
}
header h2.mobile {

}
header h3.mobile {

}
    


.layer-last, .layer-first {
    
    /*background-image: url(../images/bg-av.jpg);*/
    background-size: cover;
    background-position: center center;
}

.quiz-message-start, .quiz-message-end {
/*    width: 1280px;
    height: 614px;
    padding: 55px 69px;
    top: 62px;
    left: 0px;
    display: none;
    position: absolute;
    background-image: url( ../images/tema-0-bg-grelha-01.png);
    background-repeat: no-repeat;
    background-size: 226px auto;
    background-position: 8px 553px;
    background-color: #f2f2f2;*/
}
#message-start-generic {
    background-color: transparent;
}

.layer {
    background-color: #ffffff;
}

.quiz-answer-area {
    display: flex;
    /*justify-content: space-evenly;*/
    flex-direction: column;
    height: 91%;
    margin-top: 16px;
}

.layer-quiz p.quiz-mbcp-question {
	text-transform: uppercase;
	color: #d50563;
	margin: 0 0 30px 0;
}

.quiz-question-text {
    font-weight: bold;
    padding:16px;
    font-size: 18px;
    font-size: 1.5rem;
    /*background: #725382;*/
    color:#725382;
    /* outline: 4px solid #f2f2f2; */
}
.layer-quiz p.quiz-mbcp-instruction {
    font-weight: bold;
    font-size: 15px;
    margin: 30px 0 40px 0;
}

.quiz-question-instruction {
    color: #4b6d80;
    padding:16px;
    font-weight: bold;
    opacity:.9;
    margin-bottom: 8px;
    font-weight: 300;

}

#quiz-counter {
    z-index: 100000;
    position: absolute;
    bottom: 2px;
    left: 890px;
    font-weight: bold;
    color: #ffffff;
    /* transform: translate3d(-50%, 0, 0); */
    background-color: #725382;
    color: #ffffff;
    width: 64px;
    height: 40px;
    align-items: center;
    justify-content: center;
    /* border-radius: 50%; */
    /* box-shadow: 0 0.25rem 0.5rem rgb(0 0 0 / 25%); */
    display: none;
}

#quiz-counter.-visible {
    display: flex;
}

.quiz-button {
    color: #ffffff;
    background: #725382;
    border: 2px solid #725382;
    border-radius: 6px;
    border-radius: 0px;
    margin: 0 8px;
    padding: 8px 24px;
    /*text-transform: uppercase;*/
    font-weight: bold;
    order: 2;
    height: 40px;
}
.quiz-button:hover {
    background-color: #ffffff;
    color: #725382;
}
.quiz-flex {
    display: flex;
    flex-direction: column;
    min-height: 50%;
    align-content: center;
    justify-content: center;
}
#message-start-generic .quiz-flex {
    border: 8px solid white;
    padding: 64px;
    background-color: #ffffff;
    /*color: white !important;*/
    color: #000000;
    font-weight: 300;
}
.quiz-flex ul li {
    margin-bottom: 1rem;
    margin-top: 1rem;
}
.quiz-question-area {
    width: 1280px;
    height: 614px;
    padding: 70px 70px 55px 70px;
    top: 62px;
    left: 0px;
    position: absolute;
}
.quiz-message-start {
    width: 1280px;
    height: 585px;
    padding: 0 70px;
    top: 90px;
    left: 0px;
    position: absolute;
    font-size: 1.25rem;
    font-size: 1.1rem;
    display: grid;
    place-items: center;
    /* outline: 1px solid red;*/
}
.quiz-message-end {
    width: 1280px;
    height: 587px;
    padding: 70px 70px 25px 70px;
    top: 88px;
    left: 0px;
    font-size: 1.25rem;
    font-size: 1.1rem;
    position: absolute;
}


.quiz-list-item.button-locked {
}

#message-start-terminated {

}

#quiz-start-grade, #quiz-end-grade {
  
}
#quiz-start-best-grade, #quiz-end-best-grade {
    
}
#quiz-start-attempts, #quiz-end-attempts {
    
}

#quiz-next,
#quiz-submit {
/*    position: absolute;
    left: initial;
    top: initial;
    left: initial;*/
    /*right: 15%;*/
    /*bottom: calc(5% + 1.25em);bottom: calc(5% + 1.45em);*/
}

#quiz-prev {
    /*right: 252px;*/
}

#quiz-finish,
#quiz-review,
#quiz-try-again {
/*    position: absolute;

    right: 265px;
    bottom: 170px;*/
}
#quiz-finish {
/*    right: 307px;
    bottom: 114px;*/
}
#quiz-review {
    order: 1;
}
#quiz-review.end {
/*    right: 307px;
    bottom: 134px;*/
}
#quiz-try-again {
    /*left: calc(5% + 1.45em);*/
}
.quiz-answer {
    min-height: 64px;
    padding: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
    /* padding: 4px 0px 4px 66px; */
    margin: 0;
    margin: 8px 0px;
    display: flex;
    align-items: center;
    /* border-bottom: 2px solid #fff; */
    border: 2px solid #725382;
    color: #ffffff;
    background: #725382;
    border-radius: 6px;
    border-radius: 0px;
    font-size: 1.1rem;

    transition: transform .3s ease;
}
.quiz-answer.order-1{ order: 1; }
.quiz-answer.order-2{ order: 2; }
.quiz-answer.order-3{ order: 3; }
.quiz-answer.order-4{ order: 4; }
.quiz-answer.order-5{ order: 5; }
.quiz-answer.order-6{ order: 6; }
.quiz-answer.order-7{ order: 7; }
.quiz-answer.order-8{ order: 8; }
.quiz-answer.order-9{ order: 9; }
.quiz-answer.order-10{ order: 10; }
.quiz-answer.order-11{ order: 11; }
.quiz-answer.order-12{ order: 12; }
.quiz-answer.order-13{ order: 13; }
.quiz-answer.order-14{ order: 14; }
.quiz-answer.order-15{ order: 15; }
.quiz-answer.order-16{ order: 16; }
.quiz-answer.order-17{ order: 17; }
.quiz-answer.order-18{ order: 18; }
.quiz-answer.order-19{ order: 19; }
.quiz-answer.order-20{ order: 20; }

.quiz-answer:hover {
    background: #ffffff;
    color: #725382;

}
/*body.llwindow .correct {
    animation: 0.5s ease shake infinite; 
}*/
.quiz-answer.selected {
    background: #ffffff;
    color: #725382;
    border: 2px solid #725382;
    /*color: #ffffff;*/
    /*transform: scale(1.02);*/
}
.quiz-answer.correct,.quiz-answer.correct:hover {
    color: #ffffff;
    background: #558252;
    border: 2px solid #558252;
    pointer-events: none;
}
.quiz-answer.wrong,.quiz-answer.wrong:hover {
    color: #ffffff;
    background-color: #825252;
    border: 2px solid #825252;
    pointer-events: none;
}
.quiz-answer.selected.correct {
    background-color: #ffffff;
    color: #558252;
    border: 2px solid #558252;
    /*color: #17ad37;*/
}
.quiz-answer.selected.wrong {
    background-color: #ffffff;
    color: #825252;
    border: 2px solid #825252;
    /*color: #825252;*/
}

.quiz-help-review {
    width: 70%;
    padding: 0.5em 1em;
    background-color: #77787b;
    color: #ffffff;
    margin-top: 1em;
}
.quiz-help {
    width: 70%;
    padding: 1.5em 1em 0.5em 1em;
    color: #a5a5a5;
    font-size: 0.8em;
}
#quiz-list {
    position: absolute;
    font-size: 18px;
    /* top: initial; */
    /* right: initial; */
    left: 0;
    min-height: 45px;
    bottom: 0;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-content: center;
    /* flex-wrap: nowrap; */
    width: 50%;
    flex-wrap: wrap;
    align-items: center;
    /*justify-content: center;*/
    z-index: 10000;
    padding-left: 10px;
}
#quiz-list {
    position: absolute;
    font-size: 18px;
    /* top: initial; */
    /* right: initial; */
    left: 0;
    min-height: 45px;
    bottom: -3px;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-content: center;
    /* flex-wrap: nowrap; */
    width: 870px;
    flex-wrap: wrap;
    align-items: center;
    /* justify-content: center; */
    z-index: 10000;
    padding-left: 10px;
}
.quiz-list-size-15,
.quiz-list-size-16 {
    width: 27%;
}
.quiz-list-size-17,
.quiz-list-size-18 {
    width: 30%;
}
.quiz-list-size-19,
.quiz-list-size-20 {
    width: 33%;
}
.quiz-list-size-21,
.quiz-list-size-22 {
    width: 36%;
}
.quiz-list-size-23,
.quiz-list-size-24 {
    width: 38%;
}
.quiz-list-size-25,
.quiz-list-size-26 {
    width: 40%;
}
.quiz-list-size-27,
.quiz-list-size-28,
.quiz-list-size-29,
.quiz-list-size-30 {
    width: 36%;
}
.quiz-list-size-31,
.quiz-list-size-32 {
    width: 36%;
}
.quiz-list-size-33,
.quiz-list-size-34,
.quiz-list-size-35,
.quiz-list-size-36 {
    width: 39%;
}
.quiz-list-size-37,
.quiz-list-size-38 {
    width: 43%;
}
.quiz-list-size-39,
.quiz-list-size-40 {
    width: 45%;
}

.quiz-list-item {
    font-size: 12px;
    margin: 0 3px 0 0;
    width: 20px;
    padding: 0;
    height: 20px;
    /*opacity: 0.75;*/
    color: #ffffff;
    background-color: #d50563;
    border: 2px solid #ffffff;
    border-radius: 6px;
    border-radius: 0px;
    font-weight: bold;
}
.quiz-list-item {
    font-size: 15px;
    margin: 0 3px 0 0;
    width: 40px;
    padding: 0;
    margin-bottom: 2px;
    height: 40px;
    /* opacity: 0.75; */
    color: #ffffff;
    background-color: #faaf41;
    border: 2px solid #ffffff;
    border-radius: 6px;
    border-radius: 0px;
    font-weight: bold;
    cursor:pointer;
}
.quiz-list-item:hover,
.quiz-list-item.answered:hover {
    background-color: #ffffff;
    border: 2px solid #ffffff;
    color: #725382;
    
}
.quiz-list-item.button-locked {
    opacity: 0.5;
    pointer-events: none;
}
.quiz-list-item.answered {
    border: 2px solid #ffffff;
    /*color: #d50563;*/
    background-color: #faaf41;
}
.quiz-list-item.active {
    pointer-events: none;
    border: 2px solid #725382;
    color: #ffffff;
    background-color: #725382;
}
.quiz-list-item.correct {
    color: #ffffff;
    background-color: #725382;
    
    border: 2px solid #725382;
}
.quiz-list-item.correct.active {
    color: #558252;
    background-color: #ffffff;
    border: 2px solid #558252;
}
.quiz-list-item.wrong.active {
    background-color: #ffffff;
    color: #825252;
    border: 2px solid #825252;
}
.quiz-list-item.wrong {
    
    background-color: #825252;
    color: #ffffff;
    border: 2px solid #825252;
}
.quiz-list-item.active, .quiz-list-item.active.wrong, .quiz-list-item.active.correct {
    opacity: 1;
}

#quiz-start-grade,
#quiz-start-best-grade,
#quiz-start-attempts,
#quiz-end-grade,
#quiz-end-best-grade,
#quiz-end-attempts {
    position: absolute;
    left: -100%;
}

body.llwindow .quiz-answer.order-1,
body.llwindow .quiz-answer.order-2,
body.llwindow .quiz-answer.order-3,
body.llwindow .quiz-answer.order-4,
body.llwindow .quiz-answer.order-5,
body.llwindow .quiz-answer.order-6,
body.llwindow .quiz-answer.order-7,
body.llwindow .quiz-answer.order-8,
body.llwindow .quiz-answer.order-9,
body.llwindow .quiz-answer.order-10,
body.llwindow .quiz-answer.order-11,
body.llwindow .quiz-answer.order-12,
body.llwindow .quiz-answer.order-13,
body.llwindow .quiz-answer.order-14,
body.llwindow .quiz-answer.order-15,
body.llwindow .quiz-answer.order-16,
body.llwindow .quiz-answer.order-17,
body.llwindow .quiz-answer.order-18,
body.llwindow .quiz-answer.order-19,
body.llwindow .quiz-answer.order-20{ order: 1; }

h1 {
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#quiz-button-area {
    position: absolute;
    z-index: 1000;
    bottom: 0;
    right: 0;
    display: flex;
    height: 45px;
    width: 100%;
    padding-left: 50%;
    padding-right: 50% 10px;
    align-items: center;
    justify-content: flex-end;
    z-index: 10000;
    /*border-top: 4px solid white;
    background-color: #ffffff;*/
    
}

#message-end-generic-fail,
#message-end-fail,
#message-end-fail-no-attempts,
#message-end-generic-fail-passed,
#message-end-fail-passed-no-attempts,
#message-end-generic-pass,
#message-end-pass,
#message-end-pass-no-attempts,
#message-end-fail-passed,
#message-end-pass-passed,
#message-end-pass-passed-no-attempts,
#message-end-best {
    background-color: #ffffff;
}

#message-end-generic-fail .quiz-flex,
#message-end-fail .quiz-flex,
#message-end-fail-no-attempts .quiz-flex,
#message-end-generic-fail-passed .quiz-flex,
#message-end-fail-passed .quiz-flex,
#message-end-fail-passed-no-attempts .quiz-flex,
#message-end-generic-pass .quiz-flex,
#message-end-pass .quiz-flex,
#message-end-pass-no-attempts .quiz-flex,
#message-end-pass-passed .quiz-flex,
#message-end-pass-passed-no-attempts .quiz-flex,
#message-end-best .quiz-flex{
    background-color: transparent;
    border: 8px solid white;
    padding: 64px 64px 64px 64px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    background-repeat: no-repeat;
    background-position: 72px center;
    background-size: 128px;
    color:#000000;
}
#message-end-generic-fail .quiz-flex,
#message-end-fail .quiz-flex,
#message-end-fail-no-attempts .quiz-flex,
#message-end-fail-passed .quiz-flex,
#message-end-generic-fail-passed .quiz-flex,
#message-end-fail-passed-no-attempts .quiz-flex {background-image: url(../images/fail.png);}

#message-end-generic-pass .quiz-flex,
#message-end-pass .quiz-flex,
#message-end-pass-no-attempts .quiz-flex,
#message-end-pass-passed .quiz-flex,
#message-end-pass-passed-no-attempts .quiz-flex,
#message-end-best .quiz-flex {background-image: url(../images/win.png);}


h2.fail,
h2.win {
    color:white;

}

b{
    background: #725382;
    padding: 2px 8px;
    color: #ffffff;
}
.quiz-answer-feedback-wrong,
.quiz-answer-feedback-right {
        display: none;
    color: #705383;
    margin: 20px 64px;
    /* background: white; */
    width: max-content;
    font-size: 1rem;
    /* padding: 16px 24px; */
    /* box-shadow: 0 4px 8px 0px rgb(0 0 0 / 25%); */
    width: 450px;
    position: absolute;
    left: 0px;
    margin: 0;
    bottom: 20px;
}
.correct.selected ~ .quiz-answer-feedback-right,
.wrong.selected ~ .quiz-answer-feedback-wrong,
.wrong ~ .quiz-answer-feedback-wrong {
    display: block;
        width: 920px;
}
.correct.selected  ~ .quiz-answer-feedback-wrong {
    display: none;
}