/*@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Light.ttf');
}*/

body, div, canvas {
  font-family: 'Raleway', sans-serif !important;
}

div {
  word-wrap: break-word;
}

.container {
  padding-left: 1em;
  padding-right: 1em;
}

input {
  width : 70px;
}

/**
 * GRAPH
 */
#graph {
  width: 100%;
  height: 80vh;
  display: block;
}

#properties-view {
  position: fixed;
  top: 100px;
  right: 100px;
  width: 30%;
  /*background-color: #EEE;*/

  background-color: rgba(0,0,0,0.1);
  /*border: 3px solid #73AD21;*/
}

#properties-view-title {
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  border-bottom-color: white;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

#message-view {
  position: fixed;
  top: 100px;
  left: 50px;
  width: 30%;
  /*color: #a0333a;*/
  /*margin:10px;*/

  background-color: rgba(0,0,0,0.1);
}

#signal-view-title {
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  border-bottom-color: white;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}


.table-view-cell {
  margin-top: 5px;
  margin-bottom: 5px;
}

.table-view-cell-name {
  font-weight: 300;
}

.table-view-cell-subname {
  font-style: italic;
}

.inner-view {
  margin: 10px;
  color : #FFF;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
    /*padding: 12px 16px;*/
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.example-link {
  cursor : pointer;
}


/**
 * TIMELINE
 */
#timeline-toolbar {
  padding-bottom: 0px;
}
#timeline {
  padding-top: 5px;
}

.button-xsmall {
  font-size: 70%;
}

.button-small {
  font-size: 85%;
}

.pure-button-active {
  color : blue;
}

.startTime {
  background-color: #F00;
}

.endTime {
  background-color: #00F;
}

/*ANA Colors (Army Navy Aero) - w3*/
.color-0 {
  border-color: #09568d !important;
  background-color: #09568d !important;
}

.color-1 {
  border-color: #172035 !important;
  background-color: #172035 !important;
}

.color-2 {
  border-color: #457725 !important;
  background-color: #457725 !important;
}

.color-3 {
  border-color: #686b69 !important;
  background-color: #686b69 !important;
}

.color-4 {
  border-color: #ffbb00 !important;
  background-color: #ffbb00 !important;
}

.color-5 {
  border-color: #f8a300 !important;
  background-color: #f8a300 !important;
}

.color-6 {
  border-color: #f0c282 !important;
  background-color: #f0c282 !important;
}

.color-7 {
  border-color: #901E1D !important;
  background-color: #901E1D !important;
}

.color-8 {
  border-color: #421814 !important;
  background-color: #421814 !important;
}

.color-9 {
  border-color: #a2a7ad !important;
  background-color: #a2a7ad !important;
}

.color-10 {
  border-color: #47484a !important;
  background-color: #47484a !important;
}

.color-11 {
  border-color: #1c1d22 !important;
  background-color: #1c1d22 !important;
}

.color-12 {
  border-color: #0b0b0d !important;
  background-color: #0b0b0d !important;
}

.color-13 {
  border-color: #122b3e !important;
  background-color: #122b3e !important;
}

.color-14 {
  border-color: #b0aaad !important;
  background-color: #b0aaad !important;
}

.color-15 {
  border-color: #5b5e6a !important;
  background-color: #5b5e6a !important;
}

.color-16 {
  border-color: #343236 !important;
  background-color: #343236 !important;
}

.color-17 {
  border-color: #363848 !important;
  background-color: #363848 !important;
}

.color-18 {
  border-color: #262f39 !important;
  background-color: #262f39 !important;
}

.color-19 {
  border-color: #373a42 !important;
  background-color: #373a42 !important;
}

.color-20 {
  border-color: #646e83 !important;
  background-color: #646e83 !important;
}

.color-21 {
  border-color: #7284b7 !important;
  background-color: #7284b7 !important;
}

.color-22 {
  border-color: #acac9a !important;
  background-color: #acac9a !important;
}

.color-23 {
  border-color: #65623c !important;
  background-color: #65623c !important;
}

.color-24 {
  border-color: #46554f !important;
  background-color: #46554f !important;
}

.color-25 {
  border-color: #4d4c30 !important;
  background-color: #4d4c30 !important;
}

.color-26 {
  border-color: #ffaa07 !important;
  background-color: #ffaa07 !important;
}

.color-27 {
  border-color: #a98652 !important;
  background-color: #a98652 !important;
}

.color-28 {
  border-color: #b19083 !important;
  background-color: #b19083 !important;
}

.color-29 {
  border-color: #705a43 !important;
  background-color: #705a43 !important;
}

.color-30 {
  border-color: #874840 !important;
  background-color: #874840 !important;
}

.color-31 {
  border-color: #a0333a !important;
  background-color: #a0333a !important;
}

.color-32 {
  border-color: #acaca4 !important;
  background-color: #acaca4 !important;
}

.color-33 {
  border-color: #7e7e87 !important;
  background-color: #7e7e87 !important;
}

.color-34 {
  border-color: #383839 !important;
  background-color: #383839 !important;
}

.color-35 {
  border-color: #002d30 !important;
  background-color: #002d30 !important;
}

.color-36 {
  border-color: #635d41 !important;
  background-color: #635d41 !important;
}

.color-37 {
  border-color: #4b4c50 !important;
  background-color: #4b4c50 !important;
}

.color-38 {
  border-color: #575c45 !important;
  background-color: #575c45 !important;
}

.color-39 {
  border-color: #987563 !important;
  background-color: #987563 !important;
}

.color-40 {
  border-color: #46554f !important;
  background-color: #46554f !important;
}



.highlight {
  border-color : #FF00FF !important;
  background-color : #FF00FF !important;
}

.vis-selected {
  border-color: #FF0000 !important;
  background-color: #FF0000 !important;
}


/**
 * tooltip
 */
.tooltip {
    display: inline;
    position: relative;
}

.tooltip:hover {
    color: #c00;
    text-decoration: none;
}

.tooltip:hover:after {
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: .5em;
    bottom: 1.35em;
    color: #fff;
    content: attr(title);
    display: block;
    left: 1em;
    padding: .3em 1em;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;
}

.tooltip:hover:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;
}