/* Document Styles */

body {
  margin: 2em;
}
body, input[text], button {
  color: #013;
  font-family: Cambria, Georgia;
}

/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

.footer p {
    color: darkgray;
    font-size: small;
}

#myTab {
    margin-top: 1em;
}

#myTabContent {
    margin-top: 2em;
}

blockquote {
    margin-left: 6em;
    margin-right: 6em;
}

.description-text {
    margin-top: 1em;
}

button {
  font-family: Calibri, Helvetica, Arial, sans-serif;
  font-weight: bolder;
}

#info-section {
    margin-bottom: 1em;
}

#instructions {
    padding: 1em;
}

#raw-data {
    padding: 1em;
}

.phrase-badge {
    font-size: 1em;
}

.meta-badge {
    color: white;
}

.table-sroll {
  height: 61em;
  overflow-y: auto;
}

#editor {
    min-width: 100%;
    min-height: 20em;
    padding: 1em;
}

#reflectionEntry {
  min-height: 20em;
  width: 100%;
}
.phraseTags {
  clear: right;
  margin-bottom: 5px;
}

.phraseTags .label {
  color: black;
  font-style: normal;
  font-family: Arial, sans-serif;
}

.stack {
  float: left;
  clear: right;
  margin-bottom: 5px;
}

.sentence {
  font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
  font-size: 10pt;
}
.legend-text {
  font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
  font-size: 9pt;
}

.pie-text {
  font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
  font-size: 8pt;
}

.meta0 {
  background-color: white;
  color: darkcyan;
}
.meta1 {
  background-color: lightgrey;
  color: darkcyan;
}
.meta2 {
  background-color: dimgrey;
  color: lightcyan;
}
.meta3 {
  background-color: black;
  color: cyan;

}

/* Colours for phraseTags and metaTags */
.none {
  fill: lightgrey;
  background-color: lightgrey;
}

.regulation {
  fill: #0e7b5b;
  background-color: #0e7b5b;

}
.knowledge {
  fill: #21517c;
  background-color: #21517c;
}
.experience {
  fill: #8f0625;
  background-color: #8f0625;
}


.selfReflexive {
  background: paleturquoise;
  fill: paleturquoise;
}
.groupReflexive {
  background: lightseagreen;
  fill: lightseagreen;
}
.selfPossessive {
  background: skyblue;
  fill: skyblue;
}
.groupPossessive {
  background: deepskyblue;
  fill: deepskyblue;
}
.othersPossessive {
  background: dodgerblue;
  fill: dodgerblue;
}



.temporal {
  background: lightgreen;
  fill: lightgreen;
}
.anticipate {
  background: limegreen;
  fill: limegreen;
}
.possible {
  background: darkseagreen;
  fill: darkseagreen;
}
.definite {
  background: mediumseagreen;
  fill: mediumseagreen;
}
.outcome {
  background: forestgreen;
  fill: forestgreen;
}


.pertains {
  background: palegoldenrod;
  fill: palegoldenrod;
}
.consider {
  background: goldenrod;
  fill: goldenrod;
}
.compare {
  background: darkgoldenrod;
  fill: darkgoldenrod;
}

.manner {
  background: pink;
  fill: pink;
}
.emotive {
  background: violet;
  fill: violet;
}


/* Piechart Colours for phraseTags and metaTags */
.none {
    fill: lightgrey;
    background-color: lightgrey;
}

.regulation {
    fill: #0e7b5b;
    background-color: #0e7b5b;

}
.knowledge {
    fill: #21517c;
    background-color: #21517c;
}
.experience {
    fill: #8f0625;
    background-color: #8f0625;
}


.selfReflexive {
    background: paleturquoise;
    fill: paleturquoise;
}
.groupReflexive {
    background: lightseagreen;
    fill: lightseagreen;
}
.selfPossessive {
    background: skyblue;
    fill: skyblue;
}
.groupPossessive {
    background: deepskyblue;
    fill: deepskyblue;
}
.othersPossessive {
    background: dodgerblue;
    fill: dodgerblue;
}



.temporal {
    background: lightgreen;
    fill: lightgreen;
}
.anticipate {
    background: limegreen;
    fill: limegreen;
}
.possible {
    background: darkseagreen;
    fill: darkseagreen;
}
.definite {
    background: mediumseagreen;
    fill: mediumseagreen;
}
.outcome {
    background: forestgreen;
    fill: forestgreen;
}


.pertains {
    background: palegoldenrod;
    fill: palegoldenrod;
}
.consider {
    background: goldenrod;
    fill: goldenrod;
}
.compare {
    background: darkgoldenrod;
    fill: darkgoldenrod;
}

.manner {
    background: pink;
    fill: pink;
}
.emotive {
    background: violet;
    fill: violet;
}