body {
  margin: 0;
  padding: 0;
  line-height: 2;
  font-family: Roboto, Noto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: rgb(97,97,97);
    -webkit-font-smoothing: antialiased;

}

body.kiosk_mode {
    overflow: hidden;
    /*cursor: none;*/

}


body.kiosk_mode #unmute-button {
  display: none;
}

#unmute-button {
  display: none;
}

#test {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: black;
}

.track {
  position: fixed;
  color: white;
  right: 40px;
  top: 20px;
  font-size: 26px;
}

.card, .card-header, #entities {
  background-color:rgba(255,255,255,0.1)!important;
  /*background: rgb(63,72,79)!important; */
  /*3F484F*/
  /*background: linear-gradient(40deg, #8AAAC4 0%, black 40%)!important;*/
  color: white!important;
}
/* TYPO */

.card-header-label {
  /*font-size: 16px;*/
}

.card-header-label.score {
  font-size: 14px;
}

.card-sub-header .label {
  font-weight: bold;
}


.card-header .meta {
  font-size: 20px;
}

.card {
  line-height: 30px;
  color:rgb(97, 97, 97);
  font-size: 16px;
}

/* ENTITY TYPO */

.entity-annotation {
  font-weight:500;
  line-height: 30px;
}

.card-sub-header {
  font-size: 12px;
}
.entity {
  /*color:rgb(97, 97, 97);*/
  display: inline-flex;
  font-size: 110%;
  font-weight: 500;
}

.entity-card {
  font-size: 12px;
}

.entity-card .entity-type {
  /*font-weight: bold;*/
  font-size: 12px;
}

sub {
  line-height: 0;
  font-size: 10px;
}

/* HEADER TYPO */

.sentiment-label {
    font-weight: 500;
    line-height: 24px;
    font-size: 15px;
}

.entity-card .name {
    font-weight: bold;
}

.sub-header {
  color: rgb(11, 128, 67);
}

.card-header-label {
    /*font-weight: bold;*/
    line-height: 24px;
}

.bold {
  font-weight: bold;
}

/* END TYPO */

.hidden {
  display: none!important;
}

.card {
  background: white;

  box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
  border-radius: 2px;
  position: relative;
  width: 100%;
}

/*.positive-card {
  box-shadow: rgba(56, 142, 60, 0.14) 0px 2px 2px 0px, rgba(56, 142, 60, 0.14) 0px 1px 5px 0px, rgba(56, 142, 60, 0.14) 0px 3px 1px -2px;
}*/

.card-header {
  padding: 16px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.card-sub-header {
  padding: 3px 16px;
  display: flex;
  /*background: #fff;*/
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}



.card-body {
  padding: 16px;
}

.card-footer {
  /*padding: 16px;*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  display: none;
}

/* ENTITY CARDS */

#entities {
  box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  padding: 10px;
  padding-left: 20px;
  background: white;
}

.entity-card {

}

/* SIDEBAR*/

.entity-card:first-child .card-content {
  border: none;
}

.entity-card .card-content {
  padding: 6px 0;
  border-top: 1px solid lightgray;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.entity-card .entity-type {
  border-radius: 2px;
  color: #fff;
/*  float: right;
  margin: -6px -6px 0 0;
  padding: 6px 6px;*/
  padding: 2px 0;
  background-color: #9aa0a6;
  min-width: 100px;
  text-align: center;
}

.name-row {
  /*margin-bottom: 5px;*/
  /*max-width: 160px;*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* LEGEND */

.legend {
    align-items: center;
    display: flex;
    justify-content: center;
    overflow: auto;
    padding: 24px 0;
    text-align: center;
    padding-top: 48px;
    flex-direction: row-reverse;
}

.legend.fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  padding: 0;
  font-weight: bold;
  /*height: 100px;*/
}

.legend.fixed .range {
  width: 100%;
  margin: 0;
}

.legend-title {
  font-size: 16px;
  font-weight: bold;
}

.range {
    display: inline-flex;
    margin-left: 24px;
    width: 340px;
}

.values :first-child, .range :first-child {
    border-radius: 2px 0 0 2px;
}

.values div, .range div {
    padding: 8px 5px;
    text-align: center;
}

.range div {
    flex-basis: 33.3333%;
}


.card-header.neutral {
  border-top: 10px solid #ffe57f;
  border-bottom: 1px solid lightgray;
  color: #555;
  background: white;
}

.card-header.positive {
  border-top: 10px solid #388e3c;
  border-bottom: 1px solid lightgray;
  color: #555;
  background: white;
}

.card-header.negative {
  border-top: 10px solid #e53935;
  border-bottom: 1px solid lightgray;
  color: #555;
  background: white;
}

/*
.neutral {
    background-color: #ffe57f;
    background-color: rgba(255, 229, 127, 0.5);
    color: #555;
}
*/
.loading {
    background-color: #555;
    color: white;
}

.spinner {
  -webkit-animation: rotation 1.35s linear infinite;
  animation: rotation 1.35s linear infinite;
  width: 30px;
  height: 30px;
  stroke: white;
  /*// #202124 txt?*/
  /*#1a73e8 link?*/
}


/* LINEAR */

.linear-activity {
    overflow: hidden;
    width: 100%;
    height: 10px;
    background-color: #B3E5FC;
    background-color: transparent;
    /*margin: 20px auto;*/
}

.determinate {
    position: relative;
    max-width: 100%;
    height: 100%;
    -webkit-transition: width 500ms ease-out 1s;
       -moz-transition: width 500ms ease-out 1s;
         -o-transition: width 500ms ease-out 1s;
            transition: width 500ms ease-out 1s;
    background-color: #03A9F4;
}

.indeterminate {
    position: relative;
    width: 100%;
    height: 100%;
}

.indeterminate:before {
    content: '';
    position: absolute;
    height: 100%;
    background-color: #03A9F4;
    background-color: white;
    animation: indeterminate_first 1.5s infinite ease-out;
}

.indeterminate:after {
    content: '';
    position: absolute;
    height: 100%;
    background-color: #4FC3F7;
    background-color: white;

    animation: indeterminate_second 1.5s infinite ease-in;
}

.circle {
  stroke-dasharray: 180;
  stroke-dashoffset: 0;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-animation: turn 1.35s ease-in-out infinite;
  animation: turn 1.35s ease-in-out infinite;
}

.loading-card {
  text-align: center;
}


.negative {
    /*background-color: #e53935!important;*/
}

.negative, .positive, .magnitude {
    /*color: #fff!important;*/
}

h2 {
  font-size: 16px;
  font-weight: 400;
}

/* CATEGORY / HEADERS */

/*.name {
    font-size: 15px;
    font-weight: bold;
}*/

/*.p-10-r {
  padding-right: 10px;
}*/

.controls {
  width: 20px;
}
.play-controls {
  display: flex;
  align-items: center;
}

.horoscope-container .horoscope.playing.neutral {
  /*-55px 0 145px -57px rgba(56, 142, 60, 1)*/
  box-shadow: 0px 0px 110px -60px rgba(255, 229, 127, 0.3)
}

.horoscope-container .horoscope.playing.neutral.positive {
  box-shadow: 0px 0px 110px -60px  rgba(56, 142, 60, 1);
}

.horoscope-container .horoscope.playing.neutral.negative {
  box-shadow: 0px 0px 110px -60px rgba(229, 57, 53, 1)
}

.horoscope-container .horoscope.playing {
  box-shadow: 0px 0px 110px -60px  rgba(255,255,255,0.3);
}

.card-header .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header.playing{
  border-top-width: 20px;
  /*transform: scale(1.1);*/
}

.playing .fa-play {
  display: none;
}

.playing .fa-stop {
  display: inline;
}

.fa-stop {
  display: none;
}

.fa-play {
  display: inline;
}

.entity-annotation {
  display:block;

}


/* ENTITY COLORS */

.positive {
    background-color: #388e3c;
}

.neutral {
    background-color: #ffe57f;
    color: #555;
}

.negative {
    background-color: #e53935;
}

.entity-type.ORGANIZATION {
  background-color: #4285f4;
}

.entity-type.CONSUMER {
  background-color: #a142f4;
}

.entity-type.LOCATION {
  background-color: #34a853;
}

.entity-type.person {
  background-color: #ea4335;
}

.entity-type.price {
  background-color: #b31412;
}

.entity-type.address {
  background-color: #f538a0;
}

.entity-type.number {
  background-color: #185abc;
}

.entity-type.event {
  background-color: #f29900;
}
.entity-type.work_of_art {
  background-color: #fa7b17;
}

.entity-type.CONSUMER_GOOD {
  background-color: #a142f4;
}

span.other {
  color: #9aa0a6;
}

span.ORGANIZATION {
  color: #4285f4;
}

span.CONSUMER {
  color: #a142f4;
}

span.LOCATION {
  color: #34a853;
}

span.person {
  color: #ea4335;
}

span.price {
  color: #b31412;
}

span.address {
  color: #f538a0;
}

span.number {
  color: #185abc;
}

span.event {
  color: #f29900;
}

span.work_of_art {
  color: #fa7b17;
}

span.consumer_good {
  color: #a142f4;
}

@keyframes grad-anim {
  0% {
    transform: translate(5%, -2%);
  }

  25% {
    transform: translate(10%, 7%);
  }

  40% {
    transform: rotate(-10deg);
  }

  60% {
    transform: translate(7%, -2%);
  }

  85% {
    transform: translate(6%, 3%) rotate(12deg);
  }

  100% {
    transform: none;
  }
}

.a-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  z-index: -1;
  background-color: #f1f1f1;
  /*background: radial-gradient(ellipse at bottom, #f1f1f1 0%, lightblue 100%);*/
  /*background: radial-gradient(ellipse at bottom, #8AAAC4 10%, black 100%);*/
/*background-image: url(https://cdn.theatlantic.com/assets/media/img/photo/2017/11/smog/s04_AP17314179729900/main_900.jpg);*/
  background-repeat: none;
  background-size: cover;
  opacity: 0.6;
  background-size: 400% 400%;
/*
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;

*/
/*23232E 666672 8B8C9A ABAAB6 8C949B*/
  /*background-color: #1a73e8;*/
  /*8AAAC4 698BA9 7D9BB5 A4ACB4 CFD8DC*/
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.grad-anim {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  animation-name: grad-anim;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background: linear-gradient(10deg, #a1d9b4 20%, #32988a 40%, #000e3c 70%);
  /*background: linear-gradient(20deg, lightblue 5%, lightblue 60%, white 70%);*/
  background: linear-gradient(10deg, #000e3c 20%, #000e3c 40%, black 70%);
  background: linear-gradient(10deg, #3b3e46 20%, #050b21 40%, black 70%);
  opacity: 0.8;
  /*opacity: 0;*/
}

@keyframes spinner-line-fade-more {
  0%, 100% {
    opacity: 0; /* minimum opacity */
  }
  1% {
    opacity: 1;
  }
}

@keyframes spinner-line-fade-quick {
  0%, 39%, 100% {
    opacity: 0.25; /* minimum opacity */
  }
  40% {
    opacity: 1;
  }
}

@keyframes spinner-line-fade-default {
  0%, 100% {
    opacity: 0.22; /* minimum opacity */
  }
  1% {
    opacity: 1;
  }
}

@keyframes spinner-line-shrink {
  0%, 25%, 100% {
    /* minimum scale and opacity */
    transform: scale(0.5);
    opacity: 0.25;
  }
  26% {
    transform: scale(1);
    opacity: 1;
  }
}



@-webkit-keyframes rotation
{
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}

@keyframes rotation
{
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}

@-webkit-keyframes turn
{
  0% {
    stroke-dashoffset: 180;
  }

  50% {
    stroke-dashoffset: 45;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  100% {
    stroke-dashoffset: 180;
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}

@keyframes turn
{
  0% {
    stroke-dashoffset: 180;
  }

  50% {
    stroke-dashoffset: 45;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  100% {
    stroke-dashoffset: 180;
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}



@keyframes indeterminate_first {
    0% {
        left: -100%;
        width: 100%;
    }
    100% {
        left: 100%;
        width: 10%;
    }
}

@keyframes indeterminate_second {
    0% {
        left: -150%;
        width: 100%;
    }
    100% {
        left: 100%;
        width: 10%;
    }
}