/* The location pointed to by the popup tip. */
      .popup-tip-anchor {
        height: 0;
        position: absolute;
        /* The max width of the info window. */
        width: 200px;
      }
	  
	/* th .link {
    cursor: pointer;
    visibility: hidden;
	} */

      /* The bubble is anchored above the tip. */
      .popup-bubble-anchor {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
      }
      /* Draw the tip. */
      .popup-bubble-anchor::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-50%, 0);
        width: 0;
        height: 0;
      }
      /* The popup bubble itself. */
      .popup-bubble-content {
        position: absolute;
        top: -20px;
        left: 0;
        transform: translate(-50%, -100%);
        /* Style the info window. */
        background-color: white;
        padding: 5px;
        border-radius: 5px;
        font-family: sans-serif;
        overflow-y: auto;
        max-height: 60px;
        box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.5);
      }
	  
	  #charts {
	  padding: 10px 0;
	}
	
	.ggl-tooltip {
	  border: 1px solid #E0E0E0;
	  font-family: Arial, Helvetica;
	  font-size: 10pt;
	  padding: 12px 12px 12px 12px;
	  min-width:200px;
	}

	.ggl-tooltip div {
	  padding: 6px 6px 6px 6px;
	}

	.ggl-tooltip span {
	  font-weight: bold;
	}

	.chart {
	  display: inline-block;
	  height: 151px;
	  margin-bottom: 20px;
	}

	.reset {
	  padding-left: 1em;
	  font-size: smaller;
	  color: #ccc;
	}

	.background.bar {
	  fill: #ccc;
	}

	.foreground.bar {
	  fill: steelblue;
	}
	
	.ui.tabular.menu .item {
    background-color: rgba(255,255,255,0.4);
	}

	.axis path, .axis line {
	  fill: none;
	  stroke: #000;
	  shape-rendering: crispEdges;
	}

	.axis text {
	  font: 10px sans-serif;
	}

	.brush rect.extent {
	  fill: steelblue;
	  fill-opacity: .125;
	}

	.brush .resize path {
	  fill: #eee;
	  stroke: #666;
	}

	.pit_now{
		position:absolute;
		display:none;
		top:30vh;
		background-color:rgba(204,204,204,0.8);
		z-index:99999;
		box-shadow:7px 7px 7px black;
		width:100%;
		height:250px;
		margin:auto;
		display;flex;
		animation-name: pit_flash;
		animation-duration: 1s;
		animation-iteration-count: 6;
	}
	
	@keyframes pit_flash {
	  0% {scale: 1; left:0px}
	  50% {scale: 1.2; left:30px}
	  100% {scale: 1; left:0px}
	}


	#hour-chart {
	  width: 400px;
	}

	#delay-chart {
	  width: 400px;
	}

	#distance-chart {
	  width: 420px;
	}

	#date-chart {
	  width: 920px;
	}
	
	/* Slider CSS. */
	
	#slider_container {
    width: 400%;
	height:91vh;
    overflow: hidden;
    -webkit-transition: margin-left 500ms ease-in-out;
        -moz-transition: margin-left 500ms ease-in-out;
        -o-transition: margin-left 500ms ease-in-out;
        -ms-transition: margin-left 500ms ease-in-out;
        transition: margin-left 500ms ease-in-out;
}

.slider_section {
    width: 25%;
    float: left;
    height: 950px;
}

div.table_buffer{
	height:55px;
	}

#slider_section_1 {
	background: url(../images/Slide-01.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	}
#slider_section_2 {
	background: url(../images/Slide-02.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	}
#slider_section_3 {
	background: url(../images/Slide-03.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	}
#slider_section_4 {
	background: url(../images/Slide-04.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	}
	
.header_over{
	padding-top:20px;
	background-color:white;
	position:sticky;
	top:60px;
	width:100%;
	height:100px;
	z-index:998
}

.sticky.header {
    font-style: normal;
    text-align: center;
    position: sticky;
    top: 195px;
    z-index: 888;
}

#mobile_view{
	display:none;
	
}

.top.buffer {
		height: 70px;
	}
	
	/*replay section*/
	
#vehicle_nav{
	position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100vw;
    background-color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    z-index: 3;

}

.slidecontainer {
  width: 80%;
  padding: 0px 20px 25px 20px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background: #000000;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #FF0000;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #FF0000;
  cursor: pointer;
}

	
#devider{
	width: 90%;
    height: 2px;
    background-color: #636363;
    margin-top: 10px;
    margin-left: 5%;
    border-radius: 2px;
}
/* 
.speeding_zone{
	position:relative;
	top:0px;
	left:0px;
	height:60px;
	background-color:red;
	overflow:hidden;
	color:white;
	font-weight:600;
	line-height: 2.4em;
	font-size: 2em;
} */


#link_up.ui.selection.dropdown .menu {
    max-height: 40rem;
}

	/* MEDIA SCREEN SIZES */
@media only screen and (max-width: 1280px) {	
	div.table_buffer{
	height:55px;
	}
	#link_up.ui.selection.dropdown .menu {
    max-height: 30rem;
}
}	
	
@media only screen and (max-width: 850px) {
 .slider_section {
    width: 25%;
    float: left;
    height: 600px;
}

.ui.ui.ui.container:not(.fluid) {
    width: 850px;
    margin-left: 1em;
    margin-right: 1em;
  }

.header_over{
	
	display:none;
}

.pc_view{
	display:none;
}

.top.buffer {
		height: 30px;
	}

#mobile_view{
	display:block;
	max-width: 850px;
}

#pc_view{
	display:none;
}

#slider_section_1 {
	background: url(../images/Slide-05.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	}
#slider_section_2 {
	background: url(../images/Slide-06.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	}
#slider_section_3 {
	background: url(../images/Slide-08.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	}
#slider_section_4 {
	background: url(../images/Slide-07.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	}
	#link_up.ui.selection.dropdown .menu {
    max-height: 30rem;
}
}	

@media only screen and (max-width: 767.98px) {
  .ui.ui.ui.container:not(.fluid) {
    width: 760px;
    margin-left: 1em;
    margin-right: 1em;
  }
  
  #mobile_view{
	display:block;
	max-width: 760px;
}
  
}  

@media only screen and (max-width: 480px) {
 .slider_section {
    width: 25%;
    float: left;
    height: 450px;
}


.ui.ui.ui.container:not(.fluid) {
    width: 480px;
    margin-left: 1em;
    margin-right: 1em;
  }

.ui.table thead tr:first-child > th {
     position: sticky !important;
  position: -webkit-sticky !important;
     top: 0;
     z-index: 2;
	 padding: 100px 0px 0px 0px;
}

.header_over{
	
	display:none;
}
.pc_view{
	display:none;
}

.top.buffer {
		height: 30px;
	}

#mobile_view{
	display:block;
	max-width: 480px;
}

#pc_view{
	display:none;
}

#slider_section_1 {
	background: url(../images/Slide-05.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	}
#slider_section_2 {
	background: url(../images/Slide-06.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	}
#slider_section_3 {
	background: url(../images/Slide-08.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	}
#slider_section_4 {
	background: url(../images/Slide-07.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	}
	#link_up.ui.selection.dropdown .menu {
    max-height: 30rem;
}
}