@font-face {
    font-family: CharisSIL;
    src: url(CharisSIL-Regular.woff2?1);
    font-weight: normal;
}

* {
    margin: 0;
    padding: 0;
}


h1:not(:first-of-type)::before {
    border-top: rgba(0, 0, 0, 0.5) 1px dashed;
    width: 100%;
    position: absolute;
    left: 0;
    display: block;
    height: 1px;
    content: '';
    margin: 0;
    padding: 0;
    margin-top: -30px;
}

h1 {
    margin-top: 30px;
}

h1:first-of-type {
    margin-top: 72px;
}

h1:not(.no-shadow) {
    padding: 30px 0;
    background: radial-gradient(ellipse at top, white 0%, transparent 75%);
    text-align: center;
}

h1, h2, main > p, main > .reduced > p, p.description, p.spaced, .problem p.text {
    margin-bottom: 20px;
}


p.spaced {
    margin-top: 20px;
}

.progress {
    height: 3px;
    background: transparent;
}

main > p, main > .reduced > p, p.description, p.spaced, .problem p.text {
    text-align: justify;
    line-height: 1.5;
}

body {
    overscroll-behavior-y: none;
    padding: 30px;
    padding-top: 0;
    font-family: 'Arial', sans-serif;
    background-image: linear-gradient(to bottom, steelblue 0,rgb(250, 244, 230) 72px);
    background-color: rgb(250, 244, 230);
    background-size: cover;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    color: #111;
}

.box-group {
    position: relative;
    height: auto;
    margin-bottom: 30px;
    margin-left: -5px;
    margin-right: -5px;
}

.box-underlay {
    margin-top: -5px;
    position: absolute;
    height: 100%;
    width: calc(100% - 10px);
    border: 5px dashed transparent;
    border-radius: 15px;
    transition: border-color 0.1s linear;
}

.box-group.grading .box-underlay {
    border-color: hsl(30deg, 10%, 70%);
    animation: linear 1s border-twist infinite;
}

@keyframes border-twist {
    0%   { border-radius: 10px;  }
    50%  { border-radius: 30px;  }
    100% { border-radius: 10px;  }
}

.box {
    margin: 5px;
    /* height: 120px; */
    position: absolute;
    background-color: #EEE; /*rgba(255, 255, 255, .5);*/
    padding: 10px;
    /* border: 1px solid gray; */
    box-shadow: 0 0 5px gray;
    border-radius: 5px;
    position: relative;
}

.gloss {
    margin-bottom: 5px;
    padding: 10px;
    font-style: italic;
    font-size: 16px;
}

.prompt .gloss {
    margin-right: 50px;
}

.source, .target {
    font-family: CharisSIL;
    text-size-adjust: none;

    border: 1px solid lightslategray;
    padding: 10px;
    vertical-align: bottom;
    font-size: 18px;
    min-height: 32px;
    word-break: keep-all;
    white-space: nowrap;
    overflow-x: auto;
    background: 
        linear-gradient(to right, white 0%, white 100%) 100% 0, 
        linear-gradient(to right, transparent calc(100% - 5px), rgba(0, 0, 0, .2) 100%) 100% 0;
    background-color: white;
    background-repeat: no-repeat;
    background-size: 5px 100%, 5px 100%;
    background-attachment: local, scroll;
}

span[data-key] {
    background-color: #b177a2;
    border: 1px solid #b177a2;
    display: inline-block;
    /* letter-spacing: -2px; */
    margin: 2px;
    padding: 0 2px;
    color: rgba(255, 255, 255, .4);
    /* vertical-align: top; */
    border-radius: 3px;
    transition: background-color 0.05s linear;
    font-family: monospace;
}

.prompt {
    background: linear-gradient(to bottom right, rgb(247, 208, 136), rgb(255, 216, 202));
}

.instruction {
    font-size: 12px;
    color: rgba(0, 0, 0, .5);
    margin: 10px;
    margin-bottom: 0;
    margin-left: 0;
}

main {
    max-width: 900px;
    margin: 0 auto;
}

.problem {
    margin-bottom: 75px;
}

.reduced {
    opacity: 0.4;
}

.box {
    transition: filter 0.3s ease-in-out;
}

.correct {
    animation: correct 1s ease-out;
    filter: hue-rotate(50deg);
}

@keyframes correct {
    25% {
        transform: scale(105%);
    }

    100% {
        transform: none;
    }
}

.language-info {
    text-align: center;
}

.description {
    color: green;
}

.reveal, .grade, .go {
    font-family: inherit;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    margin-right: 15px;
    background: yellowgreen;
    box-shadow: 0 3px 6px lightgray;
    border: none;
    letter-spacing: 1px;
    font-size: 16px;
    color: white;
    text-transform: uppercase;
    border-radius: 5px;
    outline: none !important;    
    text-shadow: 0 0 10px rgba(0, 0, 0, .5);  
    transition: background 0.5s, box-shadow 0.5s, opacity 0.25s;
}

.reveal:hover:not(.disabled), .grade:hover:not(.disabled), .go:not(.disabled):hover {
    box-shadow: 0 3px 9px yellowgreen;
}

.reveal:focus:not(.disabled), .grade:focus:not(.disabled), .go:not(.disabled):focus {
    background: radial-gradient(circle at 75% 75%, yellowgreen 0%, yellowgreen 60%, olivedrab 65%);
    
}

.reveal.disabled, .go.disabled, .grade.disabled {
    cursor: not-allowed;
    background: lightgray;
}

.reveal:not(.disabled), .go:not(.disabled):not(.no-animation) {
    cursor: pointer;
    animation: reveal 1s ease-out;
}

.language-info .description {
    animation: appear 5s linear;
}

@keyframes reveal {
    25% {
        transform: scale(125%) rotate(5deg);
        filter: hue-rotate(90deg);
    }

    50% {
        transform: scale(125%) rotate(-5deg);
        filter: hue-rotate(180deg);
    }

    100% {
        transform: none;
        filter: none;
    }
}

@keyframes appear {
    0% {
        opacity: 0;
        max-height: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        max-height: 100vh;
    }
}

.classified-words {
    max-width: 490px;
    margin: 30px auto;
    background-color: rgba(255, 255, 255, .5);
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
    border-radius: 5px;
}

.classified-words > .word {
    display: inline-block;
    padding: 15px 10px;
    width: 140px;
    color: gray;
    margin: 0;
    text-align: center;
}

.classified-words > .word::first-line {
    color: #111;
}

.no {
    color: #A67;
}


.yes {
    color: #7A6;
}

:not(.box-group).grading {
    animation: grading 1.5s ease-in-out infinite;
    margin: 0 auto;
}

@keyframes grading {
    0% {
        background: deepskyblue;
        width: 1%;
    }

    50% {
        background: steelblue;
        width: 100%;
    }

    100% {
        background: transparent;
    }
}

.ordering-items {
    /* margin: 30px auto;
    background-color: rgba(255, 255, 255, .5);
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
    border-radius: 5px;*/
    text-align: center;
}

.ordering-items span {
    display: inline-block;
}

.ordering-items img {
    background-color: white;
    border: 1px solid lightgray;
    vertical-align: middle;
    margin: 10px;
    display: inline-block;
    border-radius: 5px;
}

.mapping {
    margin-left: 30px;
}

.mapping td {
    padding: 5px;
}

.duplicate {
    box-shadow: 0 0 5px red;
    /* background-color: lightpink; */
}

.box.duplicate {
    box-shadow: 0 0 10px red, inset 0 0 5px red;
    /* background-color: lightpink; */
}

.ordering-grades {
    color: lightgray;
}

.ordering-grades > * {
    display: inline-block;
    margin: 20px;
    transition: color 0.3s linear;
}

.ordering-grades > .yes {
    /* animation: correct 1s ease-out; */
}

ol {
    margin: 20px;
    /* list-style-type: parenthesis; */
}

ol li {
    margin-bottom: 10px;
}

ol {
    counter-reset: list;
}

ol > li {
    list-style: none;
}

ol > li:before {
    white-space: pre;
    content: counter(list) ")  ";
    counter-increment: list;
}

ol > li:not(:last-child):after {
    content: ",";
}

ol > li:last-child:after {
    content: ".";
}

header {
    /* opacity: 0.9; */
    min-height: 72px;
    text-shadow: 0 0 10px hsl(207, 44%, 30%);
    backdrop-filter: blur(5px);
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(70, 130, 180, .7);
    width: 100%;
    /* margin-top: -50px; */
    /* margin-left: -30px; */
    color: white;
    display: table;
    box-shadow: 0 0 20px white;
    z-index: 10000;
    /* border-bottom: 5px solid rgba(255, 255, 255, .5); */


}

header > p {
    display: table-cell;
    padding: 20px 30px;
    vertical-align: middle;
}

#participant {
    text-align: right;
} 

main {
    margin-top: 60px;
}

#score .total, #score .achieved {
    height: 10px;
}

#score .total {
    display: inline-block;
    text-align: left;
    border: 1px solid white;
    border-radius: 3px;
    width: 100px;
    background: rgba(0, 0, 0, .25);
}

#score .achieved {
    display: inline-block;
    vertical-align: top;;
    background: yellowgreen;
    width: 0;
}

#score .score-text {
    display: block;
    font-size: 12px;
    line-height: 12px;
    margin-top: 0;
    margin-left: 10px;
    /* display: none; */
}




form#identify {
    line-height: 1.5;
    margin-top: 100px;

    /* display: table-cell; */
    text-align: center;
    /* vertical-align: middle; */
}

#identify-container {
    /* position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: table; */
}


#identify p {
    margin: 20px;
}

.conditions {
    max-width: 500px;
    background: moccasin;
    height: 150px;
    border-radius: 10px;
    display: inline-block;
    border: 1px dashed lightsalmon;
    padding: 10px;
    margin: 20px;
    overflow-y: auto;
    text-align: left;
    line-height: 1.5;
}

.inflection {
    font-family: CharisSIL;
    font-size: 18px;
    margin: 30px auto;
    background-color: rgba(255, 255, 255, .5);
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
    border-radius: 5px;
}

.inflection td {
    padding: 5px 10px;
}

.box-container {
    text-align: center;
    margin: 30px;
}

.box-container > .box {
    text-align: left;
    display: inline-block;
    margin: 10px;
}

.points {
    color: #999;
}

.max-points-for-problem {
    font-weight: normal;
    color: #999;
}

.grading-group {
    position: absolute;
    right: 10px;
    top: 20px;
    width: 100px;
    height: 100%;
    color: #777;
    /* opacity: 0; */
}

.correct .no-points, .all-points {
    display: none;
}

.correct .all-points {
    display: block;
    color: #555;
}

.no-points, .all-points, .grading-message {
    position: absolute;
    text-align: right;
    width: 100%;
    transition: opacity 0.1s linear;
    /* left: 0;
    top: 0; */
}

.grading-message {
    transition-delay: 0.1s;
    opacity: 0;

}

.grading .no-points, .grading .all-points {
    opacity: 0;
} 

.grading .grading-message {
    transition-delay: 0.1s;
    opacity: 1;
    color: #555;
}


@media (min-height: 768px) and (min-width: 900px) {
    form#identify {
        display: table-cell;
        vertical-align: middle;
        margin-top: 0;
    }

    #identify-container {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100vw;
        height: calc(100vh - 60px);
        display: table;
    }

}


@media (max-width: 1024px) {
    header {
        position: static;
        margin: 0 -30px;
        width: calc(100% + 60px);
    }

    main {
        margin-top: 0;
    }
        
    form#identify {
        margin-top: 25px;
    }

    h1:first-of-type {
        margin-top: 0;
    }
}

@media (max-width: 900px) {
    header > p {
        display: block;
        text-align: center !important;
    }
}

@media (max-width: 640px) {
    .max-points {
        position: static;
        padding: 10px;
        margin-top: -20px;
    }
}

.round {
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, .6);
    padding: 2px 8px;
    display: inline-block;
    /* transform: rotate(3deg); */
}

.test-question p:not(.control) {
    margin-bottom: 15px;
    line-height: 1.5;
}

.test-question hr {
    border: none;
    border-top: 1px solid lightgray;
    margin: 30px 0;
}

.test-question p.control {
    margin-bottom: 15px;
}

.test-question p.control input[type="checkbox"], .test-question p.control input[type="radio"] {
    margin-right: 15px;
    /* display: inline-block; */
}

.test-question p.control span {
    display: inline-block;
    width: 35px;
    margin-left: 15px;
    color: gray;
}

.procedure {
    box-shadow: 0 0 5px rgba(0, 0, 0, .25); border-radius: 5px; padding: 0 20px; border: 1px solid transparent; background: linear-gradient(to bottom, rgba(255, 255,255, .5) calc(100% - 200px), rgba(154,205,50, .25) 100%);
}

.gloss abbr {
    display: inline-block;
    padding: 0 3px;
    border: 1px dotted gray;
    text-decoration: none;
    border-radius: 3px;
}

.control .masked, .control .unmasked {
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 2px solid yellowgreen;
    margin-right: 2px !important;
    font-size: inherit;
    font-family: inherit;
}

.control .unmasked {
    border-bottom: 2px solid gray;
}

.test-question p.control span.unmasked {
    color: #111;
    margin: 0;
}




.scramble {
    margin: 30px auto;
}

.scramble .pair {
    margin: 10px 0;
    padding: 5px 10px;
    border-radius: 5px;
}

.scramble .pair:nth-child(odd) {
    background: rgba(0, 0, 0, .025);

}

.scramble .fixed {
    display: inline-block;
    width: calc(100% - 165px);
    vertical-align: middle;

}

.scramble .movable {
    display: inline-block;
    vertical-align: middle;
    background: linear-gradient(to bottom, hsl(35, 100%, 90%), hsl(35, 87%, 75%));
    width: 115px;
    margin: 5px;
    margin-right: 20px;
    padding: 4px 8px;
    border-radius: 30px;
    border: 1px solid hsl(35, 87%, 75%);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, .1);
}

.scramble .icon {
    vertical-align: bottom;
    margin-bottom: 2px;
    width: 15px;
    height: 18px;
    display: inline-block;
    background: linear-gradient(
        to right, 
        transparent 0%, 
        transparent 25%, 
        rgba(0, 0, 0, .25) 26%, 
        rgba(0, 0, 0, .25) 30%, 
        transparent 31%,
        transparent 56%,
        rgba(0, 0, 0, .25) 57%,
        rgba(0, 0, 0, .25) 62%,
        transparent 63%,
        transparent 88%,
        rgba(0, 0, 0, .25) 89%,
        rgba(0, 0, 0, .25) 94%,
        transparent 95%
    );
    margin-right: 10px;
}

.scramble .movable:hover {
    cursor: all-scroll;
    background: linear-gradient(to bottom, hsl(35, 100%, 85%), hsl(35, 90%, 70%));
}

.scramble.moving .movable {
    background: transparent;
    color: transparent;
}

.scramble.moving .active {
    background: linear-gradient(to bottom, hsl(35, 100%, 90%), hsl(35, 87%, 75%));
    color: inherit;
    box-shadow: none;
}

.scramble.moving .movable:not(.active) .icon {
    visibility: hidden;
}

/* .scramble .correct {
    filter: hue-rotate()
} */

.gpt-group {
    border: 1px solid #778;
    border-radius: 11px;
}

.gpt-group textarea {
    border: none;
    font: inherit;
    color: #444;
    /* font-size: smaller; */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* border: 1px solid #778; */
    display: block;
    width: calc(100% - 14px);
    padding: 7px;
    margin-bottom: 0;
    transition: background-color 0.2s ease-in-out; 
}

textarea:not(:focus) {
    background: #F4F4F4;
}

textarea {
    outline: none;
    height: 70px;
    resize: vertical;
}

.gpt-feedback, .jigsaw-feedback {
    margin-top: 0;
    padding: 8px;
    font-size: smaller;
    background: #778;
    /* background: #282; */
    color: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: all 0.3s linear;
}

.gpt-feedback.faded, .jigsaw-feedback.faded {
    color: transparent;
}

.points-group {
    position: relative;
}

.points-group > :not(.points) {
    text-align: left !important;
    margin-right: 115px;
}

.points-group .points {
    position: absolute;
    bottom: 0;
    right: 0;
}

.gpt-feedback.partial {
    background: hsl(33, 100%, 45%);
}

.gpt-feedback.correct, .jigsaw-feedback.correct {
    background: olivedrab;
    animation: none !important;
}

.gpt-feedback a {
    color: white !important;
}

.asterisk {
    height: 17px;
    width: 13px;
    padding-left: 3px;
    padding-right: 1px;
    left: 3px;
    margin-top: -5px;
    color: gray;
    font-family: 'Times New Roman', Times, serif;
    font-size: 13px;
    line-height: 17px;
    /* margin-bottom: -20px; */
    position: absolute;
    /* margin: 1px; */
    background: lightgray;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, .25);
    transition: all 0.3s linear;
    cursor: default;
}

.asterisk:hover {
    background: steelblue;
    color: white;
}

.notice {
    padding: 8px;
    display: table-row;
    border-radius: 10px;
}

.notice > .time {
    width: 100px;
    background: #778;
    color: white;
    /* font-size: smaller; */
    text-align: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.notice > :not(.time) {
    /* width: calc(100% - 100px); */
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-left: 15px;
    text-align: justify;
    line-height: 1.5;
}

.notice > * {
    border: 1px solid #778;
    display: table-cell;
    padding: 8px;
    vertical-align: middle;
    background: rgba(255, 255, 255, .75);
}

.notice-group {
    margin-bottom: 20px;

    display: table;
    width: 100%;
    border-radius: 10px;
    border: none;
}

.target[data-mask] {
    background-attachment: local !important;
}