html, body { height: 100%; width: 100%; }
body { background: #66c1be url('../img/fond-quiz.jpg') center center no-repeat; background-size: cover; padding: 15vw 5vw 5vw 5vw; }

.notificationMessage { animation-duration: .3s; animation-name: notificationSlideIn; position: fixed; transition: all .3s; top: 0; width: 340px; left: calc(50% - 170px); background: #fff; box-shadow: 0 0 50px 0 rgba(0,0,0,.1); display: block; z-index: 99; padding: 30px 50px 30px 30px; border-radius: 0 0 20px 20px; font-size: 1.2rem; border-top: 4px solid #00a19a; }
.notificationMessage:after { content: '×'; display: block; position: absolute; top: 10px; right: 10px; color: rgba(0,0,0,.2); width: 20px; height: 20px; text-align: center; line-height: 19px; font-weight: 700; font-size: 26px; cursor: pointer; }
.notificationMessage.hidden { opacity: 0; top: -90px !important; }
.notificationMessage.error { border-top: 4px solid #db2828; color: #db2828; }
@keyframes notificationSlideIn {from { top: -50px; } to { top: 0; }}

/**************************************************************************************************/

#quiz-box { background: #fff; height: 100%; padding: 5vw; border-radius: 5vw; display: flex; flex-direction: column; align-items: center; box-shadow: 1vw 1vw 7vw rgba(0, 0, 0, .5); }

#logo { width: 25vw; position: relative; margin-top: -17vw; margin-bottom: -9vw; background: #fff; aspect-ratio: 1/1; border-radius: 100%; padding: 5vw; }
#logo img { display: block; }

.quiz-content { z-index: 2; width: 100%; height: 100%; }
.quiz-content > .quiz-ctr { height: calc(100% - 50px); display: flex; justify-content: center; align-items: center; }
.quiz-content > .quiz-actions { height: 50px; display: flex; justify-content: space-between; }
.quiz-content > .quiz-ctr > .quiz-ctr-content { width: 100%; }

h1.question { font-family: "Palanquin Dark", sans-serif; font-weight: 400; text-align: center; font-size: 4.5vw; color: #004f9f; margin-bottom: 5vw; line-height: 4.5vw; padding: 0; }
h3.suptitle { font-family: "Palanquin Dark", sans-serif; font-weight: 400; text-align: center; font-size: 2vw; color: #009ed8; margin-bottom: -1.5vw; }
.button.quiz { font-size: 2.5vw; padding-top: 0; padding-bottom: 0; color: #fff; font-family: "Palanquin Dark", sans-serif; font-weight: 400; border-radius: 150px !important; }

input.hidden { display: none; }
.question-label { text-align: center; font-family: "Palanquin Dark", sans-serif; font-weight: 400; color: #004f9f; margin: 2rem 0 1rem 0; }

.inline { display: flex; align-items: center; }
.inline > .label { font-size: 1.8vw; width: 30%; padding-right: 5%; line-height: 1; }
.inline > .buttons { width: 70%; display: flex; justify-content: space-between; }
.inline > .buttons .button { width: 32%; padding: 1.5vw 0; font-size: 1.8vw; }

.inline.condensed + .inline.condensed { margin-top: 1vw; }

.choice_uniq .button, .choice_multiple .button { display: block; margin-bottom: 1rem; border-radius: 100px !important; font-size: 2.5vw; position: relative; }

.question-row + .question-row { margin-top: 2rem; }

.choice_uniq_1_to_10 .label { text-align: center; display: block; margin-bottom: 1rem; font-family: "Palanquin Dark", sans-serif; font-weight: 400; color: #009ed8; }
.choice_uniq_1_to_10 .button { font-size: 2.5vw !important; padding: 2.5vw 0; font-weight: bold !important; }

.ui.floating.label.good-answer { left: auto !important; right: 0% !important; margin: 0.25rem 2rem 0 0 !important; border-radius: 100px !important; }

h3.question-pretitle { font-family: "Palanquin Dark", sans-serif; font-weight: 400; text-align: center; font-size: 2vw; color: #ea5284; }

.question-row.sorting .buttons + .buttons { margin-top: .5rem; }
.question-row.sorting .buttons .button { border-radius: 50px; position: relative; }
.question-row.sorting .buttons .button:not(.sort) { border: 1px solid rgba(34,36,38,.15); }
.question-row.sorting > .buttons:first-child .sort.button.up, .question-row.sorting > .buttons:last-child .sort.button.down { opacity: 0; }