/***********************************************************
************************************************************
FONTS AND TEXT AND CONTAINER
************************************************************
***********************************************************/

@font-face {
    font-family: "Space Grotesk";
    src: url("./assets/typefaces/SpaceGrotesk-Regular.woff2") format("woff2"), url("./assets/typefaces/SpaceGrotesk-Regular.woff") format("woff");
  }
  
@font-face {
    font-family: "Space Grotesk Bold";
    src: url("./assets/typefaces/SpaceGrotesk-Bold.woff2") format("woff2"), url("./assets/typefaces/SpaceGrotesk-Bold.woff") format("woff");
}


html {
  font-size: 16px;
}

li{
    color: #003;
}

span {
  white-space: nowrap;
}

a {
  color: unset;
  text-decoration: underline;
}

a:hover {
  color: unset;
}

body, html{
    font-size: 16px;
    font-family: "Space Grotesk", sans-serif;
    background-color: #EEE;
    color: #EE0000;
}

* {
    box-sizing: border-box;
}

h1 {
    font-size: 2.75rem;
    font-family: "Space Grotesk Bold", sans-serif;
    padding: 0;
    margin:0;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
    padding: 0;
    }
}


hr {
    border-top: 1px solid #EE0000;
    color:  #000033;
    width: 100%;
    margin-bottom:0rem;
    margin-top:0rem;
}

b {
    font-family: "Space Grotesk Bold", sans-serif!important;
    font-weight: normal!important;
}

/*HEADER TEXT*/
#header {
    font-family: "Space Grotesk Bold", sans-serif;
}

#header p {
    padding: 0;
    margin: 0;
}

/*INSTRUCTIONS TEXT*/

#description{
    font-size: 1rem;
    font-family: "Space Mono", monospace;
    background:#EEE;
}

.description {
    font-size: 1rem;
    font-family: "Space Mono", monospace;
    background:#EEE;
}

#city-blurb{
    font-size: 1rem;
    font-family: "Space Mono", monospace;
    background:#EEE;
}


@media (max-width: 768px) {
  .sticky-top p{
      letter-spacing: -0.05em;
      word-spacing: -0.2em;
  }
}



h2 {
  font-size: 1.5rem;
  font-family: "Space Grotesk Bold", "Helvetica Bold", sans-serif;
  text-align: center;
  line-height: 1;
  margin-bottom: 0;
}

.container-center {
  justify-content: center;
}

.container-fluid {
  padding: 0;
}

#user-content{
  min-height: 100vh;
}


/***********************************************************
************************************************************
LOGO AND TITLE SCREEN
************************************************************
***********************************************************/

/*TITLE SCREEN AND LOGO*/
#title-screen {
    height: 100vh;
    background-color: #000033;
    color: #EEEEEE;
    align-items: center;
    position: relative;
    justify-content: space-around;
    z-index: 1;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
  }

#title-screen p {
    font-family: "Space Grotesk Bold", sans-serif;
    margin: 50px 0 0 0;
}

#logo {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 150px);
    cursor: pointer;
  }

/* DOWN ARROW*/
#down-arrow {
  position: absolute;
  bottom: 75px;
  -webkit-transition: 0.25s;
  transition: 0.25s;
  cursor: pointer;
}

#down-arrow:hover {
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
}


/*Ensures placement of down arrow*/
@media (min-width: 992px) {
  #logo {
    max-width:100%;
  }
  #down-arrow {
    bottom: 25px;
  }
}


/***********************************************************
************************************************************
SELECT AND FORM CONTROL
************************************************************
***********************************************************/

/*MENU*/
.menu select {
    -webkit-appearance: none;
    width: calc(100% - 40px);
    font-size: 1em;
    cursor: pointer;
    background-color: #EEE;
    color: #EE0000!important;
    border: 1px solid #EE0000;
    border-radius: 0;
    z-index: 10;
}

.digit-select{
  max-width: 75px;
  background-color:#EEEEEE;
  font-family: "Space Grotesk", sans-serif;
}


.form-control:focus{
  outline:none;
  border: 1px solid #003;
  outline-color:#003;
  background-color:#EEEEEE;
}

.digit-select:focus{
  outline:none;
}

.form-control:focus{
  outline:none;
  border: 1px solid #003;
  outline-color:#003;
  background-color:#EEEEEE;
}

select.form-control:focus{
  outline:none;
  border: 1px solid #003;
  outline-color:#003;
  background-color:#EEEEEE;
}


/*SELECT*/
select::-ms-expand {
    display: none;
    border-radius: 0;
}


select{
    background:none;
    -webkit-appearance: none;
}

select:active{
   -webkit-appearance: none;
   background-color:#003;
   color:white;
}


select.form-control:focus{
  outline:none;
  border: 1px solid #003;
  outline-color:#003;
  background-color:#EEEEEE;
}


select.form-control {
    -webkit-appearance: none;
    font-size: 1em;
    cursor: pointer;
    color: #EE0000;
    background-color: #EEEEEE;
    border-radius: 0;
    border: 1px solid #EE0000;
}


select.transcribe{
  border: 1px solid #003;
  color: #003;
  background-color: #EEEEEE;
}

select.transcribe:active{
  color: white;
  background-color: #003;
}

select.transcribe:hover{
  color: white;
  background-color: #003;
}


#select-container{
  border-radius: 10;
  font-family: "Space Grotesk", sans-serif;
  text-align: center;
  width:100%;
  z-index: 10;
  -webkit-appearance: none;
  background-color:#EEEEEE;
}

.select-container {
    position: relative;
    border-radius: 10;
    font-family: "Space Grotesk", sans-serif;
    text-align: center;
    -webkit-appearance: none;
    width:100%;
    background-color:#EEEEEE;
}



/*Arrow for small and large screens*/
.select-arrow-sm {
    position: absolute;
    right: 10px;
    top: 10px;
    pointer-events: none;
}

.select-arrow-sm:disabled {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #999;
    pointer-events: none;
}

.select-arrow-lg {
    position: absolute;
    right: 30px;
    top: 10px;
    pointer-events: none;
}



/***********************************************************
************************************************************
FORM AND INPUT
************************************************************
***********************************************************/
.sticky-top {
  background:#EEE;
/*  width:100%;*/
  /*position:sticky;*/
  z-index: 2;
}

.sticky-top button {
    border: 1px solid #EE0000;
    color: #EE0000;
}

.sticky-top button:disabled {
    border-color: #999;
    color: #999;
    opacity: 1;
}

.sticky-top button:active, .sticky-top button:hover:enabled{
    background-color: #EE0000;
    border-color: #EE0000;
    color: white;
}

.sticky-top button:focus{
  outline:none;
}



#submit-unknown .btn{
    font-family: "Space Grotesk Bold", sans-serif;
    border: 1px solid #003;
    border-left:none;
}

#submit-unknown .btn:active, #submit-unknown .btn:hover:enabled{
    border: 1px solid #003;
    border-left:none;
    color: white;
    background: #003;
    margin-right: 5px;
}

#submit-unknown .btn:focus{
  outline:none;
}

#submit-unknown .btn:disabled {
    border: 1px solid #999;
    border-left:none;
    color: #999;
    opacity: 1;
}

.number-transcription-input:focus{
  outline:none;
}



#submit-section .btn {
    border: 1px solid #003;
    color: #003;
    width: 100%;
}

#submit-section .btn:disabled {
    border: 1px solid #999;
    color: #999;
    opacity: 1;
}

#submit-section .btn:active, #submit-section .btn:hover:enabled{
    background-color: #003;
    border: 1px solid #003;
    color: white;
}

#submit-section .btn:focus{
  outline:none;
}

#sub{
    width: 100%;
    height: 50px;
}

#submit-language{
    width: 100%;
    height: 50px;
}

#submit-city{
    width: 100%;
    height: 50px;
}

#submit-section-part .btn {
    border: 1px solid #EE0000;
    color: #EE0000;
    width: 100%;
}

#submit-section-part .btn:disabled {
    border: 1px solid #999;
    color: #EE0000;
    opacity: 1;
}



#submit-section-part .btn:active, #submit-section-part .btn:hover:enabled{
    background-color: #EE0000;
    border: 1px solid #EE0000;
    color: white;
}


#submit-section-part .btn:focus{
  outline:none;
}

#sub-part{
    width: 100%;
    height: 50px;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #eaeaea;
    color: #999;
    border-color: #999;
    pointer-events: none;
    opacity: 1;
}

.form-control:disabled~.select-arrow-sm {
    color: #999;
    opacity: 1;
}

.form-control:disabled~.select-arrow-lg {
    color: #999;
    opacity: 1;
}

.form-control:disabled~.select-arrow {
    color: #999;
    opacity: 1;
}

input.group{
  z-index: 10;
}

input.form-control {
    background-color: #EEE;
    border: 1px solid #003;
    border-radius: 0;
    font-family: "Space Grotesk", sans-serif;
    color:#003;
  }


input.form-control:hover:enabled {
    outline:none;
    background-color:#003;
    color:white;
  }

input.form-control:focus {
    outline:none;
    background-color:#003;
    color:white;
  }

input.main-form-control{
    background-color: #EEE;
    border: 1px solid #EE0000;
    border-radius: 0;
    color: #EE0000;
    height:110%;
    width:100%;
}


input.main-form-control:hover{
    background-color: #EE0000;
    color: white;
}

input.main-form-control:focus{
    background-color: #EE0000;
    color: white;
    outline:none;
}


input.main-form-control::placeholder{
    color:#EE0000;
}



input.main-form-control:hover::placeholder{
    color:white;
}

input.unknown-call::placeholder {
  color:#003;
}

input.unknown-call:active::placeholder {
  color:white;
}

input.unknown-call:hover:enabled::placeholder {
  color:white;
}

input.unknown-call:disabled::placeholder {
    color:#999;
  }

input.unknown-call:focus {
  outline:none;
}



input.unknown-call.list-item::placeholder {
  color:#003;
}

input.unknown-call.list-item:disabled::placeholder {
    color:#999;
  }

input.unknown-call.list-item:focus {
  outline:none;
}


#part-select input.form-control::placeholder{
    color:#EE0000;
}

#part-select .form-control {
    background-color: #EEE;
    border: 1px solid #EE0000;
    border-radius: 0;
    color: #EE0000;
    border-right: none;
}


#part-select .form-control:focus {
  outline:none;
}

#lang-select input.form-control::placeholder{
    color:#EE0000;
}

#lang-select .form-control {
    background-color: #EEE;
    border: 1px solid #EE0000;
    border-radius: 0;
    color: #EE0000;
}

#lang-select .form-control:hover {
    background-color: #EE0000;
    color: #EEE;
}

#lang-select .form-control:hover::placeholder{
    color: #EEE;
}

#lang-select .form-control:focus {
  outline:none;
}



/***********************************************************
************************************************************
call.list-item
************************************************************
***********************************************************/
.list-item{
    border: 1px solid #003;
    font-family: "Space Grotesk Bold", sans-serif;
    font-size: 1rem;
    cursor: grab;
    color:#003;
}

#user-info-item{
    border: 1px solid #003;
    font-family: "Space Grotesk Bold", sans-serif;
    font-size: 1rem;
    cursor: grab;
    color:#003;
}


ul{
    list-style: none;
}

div.list-item:hover {
  color: #EEEEEE;
  background-color: #003;
  text-decoration: none;
}

ul.list-item {
    min-width: 250px;
    height: auto;
/*    border: 1px solid #003;*/
    flex-grow: 1;
}

ul.list-item li {
    list-style: none;
}



ul.list-item li {
    list-style: none;
}

#unknown-call.list-items ul {
    min-width: 250px;
    height: auto;
    border: 1px solid #999;
    font-family: "Space Grotesk Bold", sans-serif;
    flex-grow: 1;
}

#user-body{
  color:#003;
  font-family: "Space Mono", Helvetica, sans-serif;
}

#user-body div.list-item:nth-child(even){
    border-left: none;
    border-top: none;
}

#user-body div.list-item:nth-child(odd){
    border-top: none;
}

#user-body div.list-item:nth-child(1){
    border-top: 1px solid;
}
#user-body div.list-item:nth-child(2){
    border-top: 1px solid;
}

@media (max-width: 768px) {
    #user-body div.list-item:nth-child(even){
    border-top: none;
    border-left: 1px solid #003;
  }
}


textarea{
    background:#eee;
    color:#003;
    outline: none;
}

textarea.form-control{
    background:#eee;
    color:#003;
    border: 1px solid #003;
}

textarea:hover{
    background:#003;
    color:#eee;
    outline: none;
}

textarea:focus{
    background:#003;
    color:#eee;
    outline: none;
}

textarea:active{
    background:#003;
    color:#eee;
    outline: none;
}


/***********************************************************
************************************************************
BUTTONS AND INPUTS
************************************************************
***********************************************************/
.btn {
    border-radius:0;
    border:1px solid;
    background: #EEE;
    font-family: "Space Grotesk Bold", sans-serif;
}

/*Prevents hover effect override when disabled button*/
.btn [disabled]{
  cursor: default;
  pointer-events: none;
  color: #999;
  border-color: #999;
  opacity: 1;
}

.play-btn {
    color: #003;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    border-color: #003;
    padding: 0 0 0 2px;
}

.play-btn:hover:enabled {
    color: white;
    background: #003;
    width: 40px;
    height: 40px;
    padding: 0 0 0 2px;
    border-radius: 50px;
    border-color: #003;
}

#next-button .btn:hover:enabled{
  background:#EE0000;
  color:white;
}

#next-button .btn:active{
  background:#EE0000;
  color:white;
}

#language-autocomplete{
  font-family: "Space Grotesk", sans-serif;
}

.autocomplete-highlight {
    color:#FF0000;
    font-family: "Space Grotesk", sans-serif;
}

.dropdown-toggle{
  font-color:#003;
  color:#003;
  background-color:#EEEEEE;
  font-family: "Space Grotesk", sans-serif;
}

.dropdown-menu.show{
  font-family: "Space Grotesk", sans-serif;
}

/***********************************************************
************************************************************
FOOTER
************************************************************
***********************************************************/

#footer {
  background-color: #EE0000;
  color: #EEEEEE;
  font-family: "Space Grotesk Bold", "Helvetica Bold", sans-serif;
/*  padding: 25px;*/
}

@media (min-width: 768px) {
  #footer {
/*    padding: 50px;*/
  }
}

#footer div {
  -webkit-column-count: 1;
          column-count: 1;
  -webkit-column-gap: 25px;
          column-gap: 25px;
  -webkit-column-fill: balance;
          column-fill: balance;
  font-family: "Space Grotesk", "Helvetica", sans-serif;
}

#footer div a {
  white-space: nowrap;
}

@media (min-width: 576px) {
  #footer div {
    -webkit-column-count: 2;
            column-count: 2;
  }
}

@media (min-width: 992px) {
  #footer div {
    -webkit-column-count: 4;
            column-count: 4;
  }
  #footer div p {
    margin-bottom: 1rem;
  }
}

.social-media-icons a {
  text-decoration: none;
}

  .social-media-icons a + a{
    margin-left: 1em;
  }

.social-media-icon {
  height: 2em;
  fill: white;
}

.twitter-icon {
  margin-right: -0.2em;
}


/***********************************************************
************************************************************
HOMEPAGE STYLES
************************************************************
***********************************************************/

.cta-button {
  border: 1px solid #EE0000;
  margin: -1px 0 0 -1px;
  text-decoration: none;

  text-align: center;
  font-family: "Space Mono", monospace;
  font-size: 0.75rem;
}

.cta-button p{
  margin: 0;
  padding:0;
}

.cta-button div{
  text-align:center;
}


.cta-button:hover {
  color: #EEEEEE;
  background-color: #EE0000;
  text-decoration: none;
}



.selected {
  color: #EEEEEE;
  background-color: #EE0000;
}

#placeholder {
  text-align: center;
  color: #EE0000;
  background-color: #EEEEEE;
  font-size: 1.5rem;
}

#nav {
  color: #EE0000;
  background-color: #EEEEEE;
  border-bottom: 1px solid #EE0000;
}

.nav-btn-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.nav-btn {
  padding: 20px;
  line-height: 1.15;
  min-width: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  cursor: pointer;
  border-top: 1px solid #EE0000;
}

.nav-btn:not(.not-clickable):hover{
  background-color: #EE0000;
  color: #EEEEEE;
}

.not-clickable {
  cursor: default;
  pointer-events: none;
  display: none;
}

:not(.not-clickable) + .not-clickable {
  display: unset;
}

@media (min-width: 768px) {
  .nav-btn {
    border-left: 1px solid #EE0000;
    min-width: 15%;
    margin-left: -1px;
  }
  .not-clickable {
    display: unset;
  }
}

.credits-header {
  font-weight: bold;
  font-size: 1rem;
}

.credits-body {
  -webkit-column-count: 2;
          column-count: 2;
  -webkit-column-fill: balance;
          column-fill: balance;
  -webkit-column-gap: 25px;
          column-gap: 25px;
  line-height: 1.2rem;
  font-size: 0.75rem;
}

.credits-body p{
  padding-left: 12.5px;
  margin-bottom: 0;
}


.credits-body .language {
  font-weight: bold;
  padding-left: 12.5px;

  text-indent: -12.5px;
}

@media (min-width: 576px) {
  .credits-body {
    line-height: 1.5rem;
    font-size: 0.75rem;
    -webkit-column-count: unset;
            column-count: unset;
    -webkit-column-width: 200px;
            column-width: 200px;
  }
}

/***********************************************************
************************************************************
CHECK BOXES
************************************************************
***********************************************************/

/* Customize the label (the container_check) */
.container_check {
  padding-left: 35px;
  position: relative;
  margin-bottom: 1rem;
/*  display: block;*/
  float: initial;
}

/* Hide the browser's default checkbox */
.container_check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border: 1px solid #EE0000;
}

/* On mouse-over, add background color */
.container_check:hover input ~ .checkmark {
  background-color: #EE0000;
}

/* When the checkbox is checked, add a blue background */
.container_check input:checked ~ .checkmark {
  background-color: #EE0000;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container_check input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container_check .checkmark:after {
    /* Heres your symbol replacement */
    content: "X";
    color: #eee;
    /* The following positions my tick in the center,
     * but you could just overlay the entire box
     * with a full after element with a background if you want to */
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}


/* Create a custom checkbox */
#show_main .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border: 1px solid #003;
}

/* On mouse-over, add background color */
#show_main .container_check:hover input ~ .checkmark {
  background-color: #003;
}

/* When the checkbox is checked, add a blue background */
#show_main .container_check input:checked ~ .checkmark {
  background-color: #003;
}



/***********************************************************
************************************************************
REMOVE FOCUS
************************************************************
***********************************************************/

button:focus { outline:!important  none; }

.btn:focus { outline: !important none; }

input:focus { outline: !important  none; }

input.group:focus { outline: !important  none; }

.input-group:focus { outline: !important  none; }

form-control:focus { outline: !important none; }

input.main-form-control:focus { outline: !important none; }

input.form-control:focus { outline: !important none; }

*:focus { outline: none;}

body:focus { outline: !important none; }

html:focus { outline: !important none; }

select:focus{outline: !important none; }

.play-btn:focus{outline: !important none; }

.form-control:focus{outline: !important none; }

.transcribe:focus{outline: !important none; }

#participant-credit:focus{outline: !important none; }

ul:focus{outline: !important none; }

li:focus{outline: !important none; }

ul.list-item li:focus{outline: !important none; }

.select-container:focus{outline: !important none;}


input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
*:focus {
    outline: none;
}

.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}
.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}