@font-face {
    font-family: "LogicWebFont";
    font-weight: normal;
    font-style: normal;
    font-stretch: semi-condensed;
    src: url('fonts/DejaVuLGCSansCondensed.eot');
    src: url('fonts/DejaVuLGCSansCondensed.eot?#iefix') format('embedded-opentype'),
         url('fonts/DejaVuLGCSansCondensed.woff2') format('woff2'),
         url('fonts/DejaVuLGCSansCondensed.woff') format('woff'),
         url('fonts/DejaVuLGCSansCondensed.ttf') format('truetype'),
         url('fonts/DejaVuLGCSansCondensed.svg##{$family}') format('svg');
}

@font-face {
    font-family: "LogicWebFont";
    font-weight: bold;
    font-style: normal;
    font-stretch: semi-condensed;
    src: url('fonts/DejaVuLGCSansCondensed-Bold.eot');
    src: url('fonts/DejaVuLGCSansCondensed-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/DejaVuLGCSansCondensed-Bold.woff2') format('woff2'),
         url('fonts/DejaVuLGCSansCondensed-Bold.woff') format('woff'),
         url('fonts/DejaVuLGCSansCondensed-Bold.ttf') format('truetype'),
         url('fonts/DejaVuLGCSansCondensed-Bold.svg##{$family}') format('svg');
}

@font-face {
    font-family: "LogicWebFont";
    font-weight: normal;
    font-style: italic;
    font-stretch: semi-condensed;
    src: url('fonts/DejaVuLGCSansCondensed-Oblique.eot');
    src: url('fonts/DejaVuLGCSansCondensed-Oblique.eot?#iefix') format('embedded-opentype'),
         url('fonts/DejaVuLGCSansCondensed-Oblique.woff2') format('woff2'),
         url('fonts/DejaVuLGCSansCondensed-Oblique.woff') format('woff'),
         url('fonts/DejaVuLGCSansCondensed-Oblique.ttf') format('truetype'),
         url('fonts/DejaVuLGCSansCondensed-Oblique.svg##{$family}') format('svg');
}

@font-face {
    font-family: "LogicWebFont";
    font-weight: bold;
    font-style: italic;
    font-stretch: semi-condensed;
    src: url('fonts/DejaVuLGCSansCondensed-BoldOblique.eot');
    src: url('fonts/DejaVuLGCSansCondensed-BoldOblique.eot?#iefix') format('embedded-opentype'),
         url('fonts/DejaVuLGCSansCondensed-BoldOblique.woff2') format('woff2'),
         url('fonts/DejaVuLGCSansCondensed-BoldOblique.woff') format('woff'),
         url('fonts/DejaVuLGCSansCondensed-BoldOblique.ttf') format('truetype'),
         url('fonts/DejaVuLGCSansCondensed-BoldOblique.svg##{$family}') format('svg');
}

.hidden { display: none !important; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: LogicWebFont,Arial,Helvetica,sans-serif;
    font-stretch: semi-condensed;
    font-size: 12pt;
    box-sizing: border-box;
    padding: 0.5em 2em 0 2em;
    min-height: 100vh;
    background-color: white;
    display: flex;
    flex-direction: column;
}

body#legalNotices {
    padding: 2em;
}
#legalNotices p {
    margin-bottom: 1em;
}
#legalNotices h1 {
    margin-bottom: 1em;
    font-size: 2.5em;
    font-weight: bold;
}
#legalNotices h2 {
    margin: 1em 0;
    font-size: 1.5em;
    font-weight: bold;
}


#title {
    font-size: 3em;
    color: #009688;
    text-align: center;
    font-weight: bold;
}
#subtitle {
    font-size: 1.25em;
    color: #888;
    text-align: center;
    font-weight: bold;
}

#flags {
    position: absolute;
    top: 1em;
    right: 1em;
}

#flags a {
    margin-right: 1em;
}

#flags img {
    height: 2em;
}

#presentation {
    text-align: center;
    margin: 1em auto 2em auto;
    border-top: 1px solid #ddd;
    padding-top: 1.5em;
    width: 60%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4em;
}

.presentationItem {
    width: 50%;
    text-align: left;
}

.presentationItem h1 {
    font-size: 1.5em;
    font-weight: bold;
    color: #009688;
}

p, li {
    margin-top: 0.5em;
}

#welcome {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#errorText {
    width: 70%;
    padding: 1em;
    margin: 0 auto 1em auto;
    text-align: center;
}

#dz-form {
    width: 70%;
    max-height: 30%;
    margin: 0 auto 2em auto;
    border: 2px dashed #0087F7;
    border-radius: 1em;
    background: white;
    padding: 2em;
/*     flex-grow: 1; */
}

#dz-form .dz-preview.dz-file-preview .dz-image {
    width: 30em;
}

#dz-form .dz-message {
    font-size: 1.25em;
    color: #888;
}

.select-overflow {
    max-height: 200px;
}
.ui-selectmenu-button.ui-button {
    width: 100% !important;
}

.select-score {
    font-weight: bold;
    width: 4em;
    text-align: right;
    margin-right: 1em;
    display: inline-block;
}

.sev-error {
    color: #a00000;
}
.sev-warn {
    color: #ff7711;
}
.sev-ok {
    color: #009688;
}

#reloadWidget {
    position: absolute;
    top: 1em;
    right: 2em;
}

#results {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#selectorLabel {
    margin-top: 1em;
    color: #888;
}

#essayParams {
    color: #888;
    font-size: 0.75em;
    margin-top: 0.5em;
    text-align: center;
}

#resultsWrapper {
    display: flex;
    flex-direction: row;
    margin: 2em auto;
    width: fit-content;
}

#scoreWrapper {
    padding: 0 2em;
    border-right: 1px solid #ddd;
}

#scoreLabel {
    font-variant-caps: small-caps;
    font-weight: bold;
    white-space: pre-wrap;
    color: #888;
    font-size: 0.75em;
    text-align: center;
}

#score {
    font-weight: bold;
    font-size: 4em;
    text-align: center;
}

#reactionWrapper {
    padding: 0 2em;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
}

#reactionLabel {
    font-variant-caps: small-caps;
    font-weight: bold;
    white-space: pre-wrap;
    color: #888;
    font-size: 0.75em;
    text-align: center;
}

#reactionUp, #reactionDown {
    cursor: pointer;
    height: 2em;
    aspect-ratio: auto;
    width: auto;
    margin: 1em auto 0 auto;
}
#reactionUp:hover {
    content: url("thumb-up-hover.svg")
}
#reactionDown:hover {
    content: url("thumb-down-hover.svg")
}
#reactionUp.selected, #reactionUp.selected:hover {
    content: url("thumb-up-active.svg")
}
#reactionDown.selected, #reactionDown.selected:hover {
    content: url("thumb-down-active.svg")
}

#comments {
    margin-left: -1px;
    padding: 0 2em;
    border-left: 1px solid #ddd;
}

#comments div div {
    margin: 0.5em 0;
}

#chartWrapper {
    flex-grow: 1;
    margin: 0 auto;
}

#footer {
    font-size: 0.75em;
    color: #888;
    border-top: 1px solid #ddd;
    padding: 0.5em 1em 0.5em 0;
    width: 80%;
    margin: 2em auto 0 auto;
    text-align: right
}

#footer a, #footer a:visited, #footer a:active {
    color: #2d7895;
    text-decoration: none;
}
#footer a:hover {
    color: #2d7895;
    text-decoration: underline;
}