/*

 *

 *	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 #005591;

}



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;

}



.layer-quiz h2.cu-title{

    color: #005591;

    padding: 0;

    background: transparent;

}



h2 {

    color: white;

    background: #005591;

    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: #005591;*/

    color:#005591;

    /* 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: 20px;

    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: #005591;

    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: #005591;

    border: 2px solid #005591;

    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: #005591;

}

.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 #005591;

    color: #ffffff;

    background: #005591;

    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: #005591;



}

/*body.llwindow .correct {

    animation: 0.5s ease shake infinite; 

}*/

.quiz-answer.selected {

    background: #ffffff;

    color: #005591;

    border: 2px solid #005591;

    /*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: #c90000;

    border: 2px solid #c90000;

    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: #c90000;

    border: 2px solid #c90000;

    /*color: #c90000;*/

}



.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: #ea668e;

    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: #005591;

    

}

.quiz-list-item.button-locked {

    opacity: 0.5;

    pointer-events: none;

}

.quiz-list-item.answered {

    border: 2px solid #ffffff;

    /*color: #d50563;*/

    background-color: #ea668e;

}

.quiz-list-item.active {

    pointer-events: none;

    border: 2px solid #005591;

    color: #ffffff;

    background-color: #005591;

}

.quiz-list-item.correct {

    color: #ffffff;

    background-color: #558252;

    

    border: 2px solid #558252;

}

.quiz-list-item.correct.active {

    color: #558252;

    background-color: #ffffff;

    border: 2px solid #558252;

}

.quiz-list-item.wrong.active {

    background-color: #ffffff;

    color: #c90000;

    border: 2px solid #c90000;

}

.quiz-list-item.wrong {

    

    background-color: #c90000;

    color: #ffffff;

    border: 2px solid #c90000;

}

.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: #005591;

    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;

}