/* =====================================
            dig_mit! colours
   =====================================

dig_mit mint:     #7BBE95;
dig_mit orange:   #D48028;
dig_mit blue:     #63D2E3;
dig_mit_darkblue: #25569E
dig_mit yellow:   #FCDB67;
dig_mit red:      #F22F57;
dig_mit cheekred: #F0615D;
dig_mit lipsred:  #CB878F;

*/

/* ==== General plugin related styling ==== */
div.error,
div.warning,
div.success {
  background: #fff;
  border: 1px solid #ccd0d4;
  border-left-width: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
  padding: 1px 12px;
  margin-bottom: 1em;
}

div.error {
  border-left-color: #dc3232;
}
div.warning {
  border-left-color: #ffb000;
}
div.success {
  border-left-color: #078600;
}


/* ==== Exercise continer layout ==== */
.digmit-exercise-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

@media screen and (max-width: 840px) {
  .digmit-exercise-container {
    margin: 1em -1em;
    padding: 0;
    font-size: 0.75em;
  }
}

.digmit-exercise-container .header {
  text-align: center;
  width: 100%;
}

/* ==== Header ==== /*
/* Title and short sentence / paragraph describing what to do */

.digmit-exercise-container .header h2 i.fa-volume-up {
  cursor: pointer;
  color: #7BBE95;
}

.digmit-exercise-container .description {
  font-size: 1.5em;
  text-align: center;
  width: 100%;
  padding-bottom: 1em;
}

/* ==== Success message ==== /*
/* ... which is displayed when all answers are correct */
.digmit-exercise-container .next-word-message,
.digmit-exercise-container .success-message {
  width: 100%;
  text-align: center;
  padding: 1em;
  margin-top: 1em;
  border: 3px dotted #7BBE95; /* dig_mit mint */
  font-size: 1.5em;
  font-weight: bold;
}

.digmit-exercise-container .next-word-message .fa-star,
.digmit-exercise-container .success-message .fa-star {
  color: #FCDB67; /* dig_mit yellow */
}

.digmit-exercise-container #next-word-button,
.digmit-exercise-container #next-exercise-button {
  font-weight: normal;
  border: 1px dotted black;
  border-radius: 3px;
  padding: 0.33em 0.16em;
  cursor: pointer;
  color: #25569E; /* dig_mit darkblue */
}
.digmit-exercise-container #next-word-button:hover,
.digmit-exercise-container #next-exercise-button:hover {
  color: #63D2E3; /* dig_mit blue */
}
.digmit-exercise-container #next-word-button span ,
.digmit-exercise-container #next-exercise-button span {
  vertical-align: middle;
}
.digmit-exercise-container #next-word-button i.fa,
.digmit-exercise-container #next-exercise-button i.fa {
  font-size: 2em;
  vertical-align: middle;
}


/* ==== Source field area ==== */
/* ... where the audio buttons reside initially */

.digmit-exercise-container .source-field {
  border: 1px solid black;
  padding: 1em;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.digmit-exercise-container .source-field .audio-button {
  border: 1px dotted gray;
  border-radius: 3px;
  padding: 0.16em;
  margin: 0.16em;
  font-size: 2.5em;
  width: auto !important;
  display: inline-block;
  cursor: grab;
  text-align: center;
}
.digmit-exercise-container .source-field .audio-button.ui-draggable-dragging {
  cursor: grabbing;
}

/* ==== Target field area ==== */
/* ... where audio buttons can be dragged to */

.digmit-exercise-container .target-field {
  border: 1px solid gray;
  min-height: 7em;
  margin: 1em 0;
  width: 40%;
  flex-grow: 1;
  padding-bottom: 3em;
}
.digmit-exercise-container .target-field.height6 {
  min-height: 6em;
}
.digmit-exercise-container .target-field.single-target-area {
  border: 0;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.digmit-exercise-container .target-field.single-target-area > div {
  min-width: 4em;
  border: 1px solid black;
  display: inline-block;
}

.digmit-exercise-container .target-field h3 {
  text-align: center;
  font-size: 1.3em;
  cursor: pointer;
}

.digmit-exercise-container .target-field .audio-button {
  border: 1px dotted gray;
  border-radius: 3px;
  padding: 0.3333em;
  margin: 0.16em auto;
  width: max-content !important;  /* it seems jquery adds a specific width directly to the element */
  height: auto !important; /* same as with width */
  font-size: 2em;
  display: block;
  text-align: center;
  cursor: grab;
}
@media screen and (max-width: 840px) {
  .digmit-exercise-container .target-field .audio-button {
    font-size: 1.7em;
  }
}
@media screen and (max-width: 460px) {
  .digmit-exercise-container .target-field .audio-button {
    font-size: 1.5em;
  }
}
@media screen and (max-width: 380px) {
  .digmit-exercise-container .target-field .audio-button {
    font-size: 1.3em;
  }
}

.digmit-exercise-container .target-field .audio-button.ui-draggable-dragging {
  cursor: grabbing;
}
.digmit-exercise-container .target-field .audio-button.exercise-solved {
  border: none;
  cursor: pointer;
}
.digmit-exercise-container .target-field .audio-button.exercise-solved .highlighted {
  color: #7BBE95; /* dig_mit mint */
}

.digmit-exercise-container .drop-hover {
  background-color: #63D2E3; /* dig_mit blue */
}

.digmit-exercise-container .correct {
  color: #7BBE95; /* dig_mit mint */
  font-weight: bold;
}

.digmit-exercise-container .incorrect {
  color: #D48028; /* dig_mit orange */
  font-weight: bold;
}

/* a button after the source and in the target field to play the whole word */
.digmit-exercise-container .source-field + .full-word,
.digmit-exercise-container .target-field.single-target-area > .full-word {
  font-size: 3.5em;
  display: flex;
  align-items: center;
  margin-left: 0.5em;
  min-width: 0;
  border: none;
  cursor: pointer;
}
.digmit-exercise-container .target-field.single-target-area > .full-word:first-child {
  margin-left: 0;
  margin-right: 0.5em;
}
.digmit-exercise-container .source-field + .full-word {
  width: 100%;
  justify-content: center;
  margin-top: 0.25em;
  margin-left: 0;
}

@media screen and (max-width: 480px) {
  .digmit-exercise-container .source-field + .full-word,
  .digmit-exercise-container .target-field.single-target-area > .full-word {
    font-size: 2em;
  }
}


/* ==== Target field area input boxes for listen-and-write ==== */


/* an input box containing a single character input and an audio button */
.digmit-exercise-container .target-field.single-target-area .input-box {
  font-size: 1.8em;
  text-align: center;
  padding: 0.1em;
  border: 1px dotted black;
  min-width: inherit;
}

.digmit-exercise-container .target-field .input-box input {
  font-size: 1em;
  font-weight: bold;
  width: 1.3em;
  padding: 0.3em 0;
  text-align: center;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.digmit-exercise-container .target-field .input-box input:disabled{
  color: #555;
  -webkit-text-fill-color: #555; /* required on Safari and/or iOS */
  opacity: 1; /* required on Safari and/or iOS */
  font-weight: normal;
}

.digmit-exercise-container .target-field .input-box i.fa-volume-up {
  cursor: pointer;
}

.digmit-exercise-container .target-field .input-box i.help {
  font-size: 0.6em;
  cursor: pointer;
  color: #25569E; /* dig_mit darkblue */
}
.digmit-exercise-container .target-field .input-box i.help:hover {
  color: #63D2E3; /* dig_mit blue */
}

.digmit-exercise-container .target-field .input-box .solution span {
  font-size: 0.6em;
  display: none;
}

.digmit-exercise-container .target-field .input-box .correct {
  background-color: #7BBE95; /* dig_mit mint */
  color: #000;
}

.digmit-exercise-container .target-field .input-box .incorrect {
  background-color: #D48028; /* dig_mit orange */
  color: #000;
}

@media screen and (max-width: 480px) {
  .digmit-exercise-container .target-field .input-box {
    font-size: 1.5em;
  }
  .digmit-exercise-container .target-field .input-box input {
    width: 1.2em;
    padding: 0.2em 0;
  }
  .digmit-exercise-container .target-field .input-box i.help {
    font-size: 0.5em;
  }
}