h1,h2,h3
{
  color:#1af7ff;
  font-family:  'Edit Undo Line BRK';
}

h2 {
  color:#FFFD34;
}

h3,h4,h5,h6
{
  color:#FFFD34;
  font-family: "ModeNine", Monaco, monospace;
  text-shadow: 0 0 10px #FFFD34;
}

h1 {
  font-size:5em;
  text-align: center;
  line-height: 1em;
  padding-left:20px;
  padding-right:20px;
}
h2 {
  font-size:2.5em;
  text-align: center;
}

h3 {
  font-size:2em;
  text-align: center;
}


/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

  header img
  {
    width:100px;
    height:100px;
  }

  h1 {
    font-size:2.5em;
  }
  h2 {
    font-size:2em;
  }

  h3 {
    font-size:1.5em;
  }

  h4 {
    font-size:1.2em;
  }

}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  h1 {
    font-size:2.5em;
    -ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for WebKit */
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }
  h2 {
    font-size:1.9em;
  }

  h3 {
    font-size:1.4em;
  }

  h4 {
    font-size:1.1em;
  }
}


.icon-button {
    color:#17a3a8;
    /*border: 0.08em solid #1af7ff;*/
    background-color: rgba(0, 0,0, 0.2);
    border-radius: 0.1em;
    padding: 0.2em 0.25em 0.15em;
    margin-left:10px;
    /*position:absolute;
    right:0em;*/
  /*  top:1em;*/

}

.icon-button:hover {
  color:#1af7ff;
  /*border: 0.08em solid #ffe400;*/
  background-color: rgba(0, 0,0, 0.2);
  border-radius: 0.1em;
padding: 0.2em 0.25em 0.15em;
}

.icon-button:active {
  color:#1af7ff;
  /*border: 0.08em solid #ffe400;*/
  background-color: rgba(255,255,255, 0.2);
  border-radius: 0.1em;
padding: 0.2em 0.25em 0.15em;
}



.mapPano {
  height:50vh;
  width:100%;
}

.mapInput {
  height:40vh;
  width:100%;
}

.gmnoprint, .gm-style-cc, .gm-style a {
  display:none!important;
  pointer-events: none!important;
}

.btn-answer {
  font-family:"ModeNine", Monaco, monospace !important;
  width: 100%;
  background: #EEEEEE;
  color: #000;
  margin-bottom:18px;
}

.creator-choice-input {
  font-family:"ModeNine", Monaco, monospace !important;
}
.freetext-answer {
  font-family:"ModeNine", Monaco, monospace !important;
  width: 100%;
  font-size:1.3em;
}


.freetext-answer::placeholder {
  font-size:.7em;
  color: #333;
}

.image {
  display:flex;
  justify-content:space-around;
}

.image-column {
  /*flex:50%;
  text-align: left;*/
}

.answer-toggle[aria-pressed=false] {
    background: #AAAAAA;
    color: #000;
}

.answer-toggle[aria-pressed=true] {
    background: #ffe400;
    color: #000;
}

#player-list {
    border:4px solid #000000;
    margin: auto;
    text-align:center;
}

#my-score {
  text-align: right;
}



.smallBTN {
  font-size:1.2em;

}


button, a.smallBTN {
  font-size:1.2em;
  margin:4px;
  text-align: center;
}

.image-button
{
  background: none!important;
  border: none!important;
  box-shadow: none!important;
  outline: none!important;
  -webkit-tap-highlight-color: transparent;
}

.section {
  clear:left;
  margin-bottom:8px;
}

.player-answered {
  color:#FFFD34;
}

.player-unanswered {
  color:#888888;
}


.freetext-answer:disabled {
    background:#AAAAAA;
    box-shadow:none;
}

#player-list {
  padding:10px;
  max-width: 600px;
  border: 8px solid #1af7ff;
  box-shadow: inset 4px 4px 0px 0px #000000;
}

.pscore {
  padding-left:10px;
  font-family: 'Visitor' !important;
  font-size:1.3em;
  color:#1af7ff;
}

.pscore-alt {
  padding-left:10px;
  font-family: 'Visitor' !important;
  font-size:1.3em;
  color:#FFFFFF;
}


.rank1 {
  padding-left:10px;
  font-family: 'Visitor' !important;
  font-size:1.3em;
  color:#1af7ff;
}

.player-row {
  cursor:pointer;
}


.choices-hidden, .choices-hidden h4
{
  color:#777777;
  text-shadow:none;
}

.answer-hidden, .answer-hidden h4
{
  color:#777777;
  text-shadow:none;
}

.answer-score-correct
{
  font-family: 'ModeNine' !important;
  font-size: 1.8em;
  background-color: #17a3a8;
  border: 4px solid #1af7ff;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1em;
  color:#FFFFFF;
  text-align: center;

}



.answer-score-incorrect
{
    font-family: 'ModeNine' !important;
    font-size: 1.8em;
    background-color: rgb(139, 42, 147);
    border: 4px solid rgb(66, 20, 70);
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 1em;
    color: #000;
    text-align: center;
}

.external-link
{
  font-family: 'Visitor';
  font-size: 1.2em;
  background-color: #1af7ff;
  border: 4px solid #000000;
  box-shadow: inset 4px 4px 0px 0px #FFFFFF;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1em;
  color:#000000;
}

img.imgClue {
    max-width: 100%;
    max-height: 75vh;
    min-width: 100%;
    object-fit: contain;
}


img.imgClueHost {
    max-width: 100%;
    max-height: 125px;
    margin-bottom:8px;
}

.radio-toolbar {
  margin: 10px;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.radio-toolbar label {

    font-family: 'ModeNine' !important;
    font-size:1em;
    border:4px solid #000000;
    box-shadow: inset 4px 4px 0px 0px #FFFFFF;
    padding-left:12px;
    padding-right:12px;
    padding-top:2px;
    padding-bottom:2px;
    background: #AAAAAA;
    color: #000;
}

.radio-toolbar label:hover {
  background: #BBBBBB;
  color: #000;
}

.radio-toolbar input[type="radio"]:checked + label {
  background: #ffe400;
}

.creator-question-row {
  background-color: rgba(0, 0,0, 0.2);
  margin-bottom: 12px;
}



textarea {
    border: 4px solid #150639;
    background-color: #fffd34;
    box-shadow: inset 4px 4px 0px 0px #BfBd14;
    color: #150639;
    padding-left: 8px;
}



select, option {
  font-family: 'ModeNine' !important;
    font-size:26px;
    border: 4px solid #150639;
    background-color: #fffd34;
    box-shadow: inset 4px 4px 0px 0px #BfBd14;
    color: #150639;
}

select
{
  margin-bottom: 8px;
  padding: 4px 8px;
}

.freetext-answer
{
  margin-bottom: 8px;
}

label
{
  margin-bottom:0px;
  color:#FFFD34;
  user-select: none; /* supported by Chrome and Opera */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

body {
  font-family:"ModeNine", Monaco, monospace;
}

.miniBTN {
  font-size:1.1em;
  padding:4px;
  padding-left:8px;
  font-family:"Lucida Console", Monaco, monospace;
}

.clickable
{
  cursor:pointer;
}

.focus-border
{
  border: 12px dashed #fffd34;
  padding: 12px;
}

.unlink-question {
  color:#6c757d;
}

.question-icon-buttons {
  color: #fffd34;
}
.info-text
{
  color: #fffd34;
}

div.player-row:hover i
{ /* when icon is hovered select i */
  visibility: visible;
}


div.player-row i { /* in all other case hide it */
  visibility: hidden;
}



header {
    display: flex;
    justify-content: center;
    align-items: center;
    height:120px;
}
header a img {
  display: flex;
  height:100%;
  object-fit: cover;
  margin-right:1em;

}

header a {
  display: flex;
  height:100%;
}


div.textarea {
    border: 4px solid #150639;
    background-color: #fffd34;
    box-shadow: inset 4px 4px 0px 0px #BfBd14;
    color: #150639;
}

.accordion-header {
  background:none;
  border:none;
  outline:none;
  padding:0px !important;
}


.accordion-content {
  background:none;
  border:none;
  outline:none;
  padding:0px !important;
}


.creator-choice
{
  display:flex;padding-right:16px;margin-bottom: 8px;
}

.creator-choice-input
{
   flex-grow:1;
}

#next-question {
  margin:8px;
}

#next-question-container {
  width:100%;
  text-align: right;
}


.info-box {
  background-color: RGBA(0,0,0,0.2);
  padding:8px;
  font-family: "ModeNine", Monaco, monospace;
  color:#FFFFFF;
  margin-top:12px;
  margin-bottom:12px;
  font-size:1.1em;
  text-align: center;
}


.question-box {
  /*background-color: RGBA(0,0,0,0.2);*/
  padding:8px;
  font-family: "ModeNine", Monaco, monospace;
  color:#FFFFFF;
  margin-top:12px;
  margin-bottom:12px;
  font-size:1.1em;
}

.ui-sortable-helper {
  background-color: RGBA(255,255,255,0.2);

}


input[type=text] {
    padding-left: 8px;
}

input[type=text] {
    padding-left: 8px;
}


/*** custom checkboxes ***/

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + span:after {
  display: inline-block;
  font-family: FontAwesome;
  font-size:1.5em;
  color:#1af7ff;
}

input[type=checkbox] + span:after { content: "\f0c8"; } /* unchecked icon */
input[type=checkbox] + span:after { letter-spacing: 10px; } /* space between checkbox and label */

input[type=checkbox]:checked + span:after { content: "\f14a"; } /* checked icon */
input[type=checkbox]:checked + span:after { letter-spacing: 10px; } /* allow space for check mark */


input[type=radio] { display:none; } /* to hide the checkbox itself */
input[type=radio] + span:after {
  display: inline-block;
  font-family: FontAwesome;
  font-size:1.5em;
  color:#1af7ff;
}

input[type=radio] + span:after { content: "\f0c8"; } /* unchecked icon */
input[type=radio] + span:after { letter-spacing: 10px; } /* space between checkbox and label */

input[type=radio]:checked + span:after { content: "\f14a"; } /* checked icon */
input[type=radio]:checked + span:after { letter-spacing: 10px; } /* allow space for check mark */



.fa-cog {
  font-size:18px;
  color:#1af7ff;
}

.fa-cog + span
{
  font-family: "ModeNine", Monaco, monospace;
  text-transform: uppercase;
  font-size:18px;
  padding-left:5px;
  color:#1af7ff;
}

#fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  background-color: rgba(0, 0,0, 0.9);
  z-index:1;
  padding:8px;
}

.ui-dialog {
  max-width:100%!important;
}

.error {
  color:#D162DB;
} 

.collapse-margins:empty {
  margin:0!important;
}

@media (max-width: 758px)
{
  header {
    height:80px;
  }

  .smallBTN {
    width:auto;
  }

  .miniBTN {
    width:auto;
  }
}


@media (max-width: 400px)
{
  header  {
    height:50px;
  }

  .smallBTN {
    width:auto;
  }
  .miniBTN {
    width:auto;
  }
}


.tag {
  display: inline-block;
  padding: 0.35em 0.7em;
  border-radius: 3px;               
  border: 1px solid #e3e8f3;
  background: #f6f7fb;
  color: #1f2937;
  font-size:16px;
  font-family: "ModeNine", Monaco, monospace !important;
  white-space: nowrap;
  margin: 0px 10px;
}