body, html{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Roboto", sans-serif;
  color: white;
}
.container
{
  width: 100%;
}
.container .content
{
  margin: auto;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1280px;
}

#masterWrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#panelWrap {
  height: 100%;
}

#panelWrap img {
  width: 100%;
}

#masterWrap section {
  display: flex;
  align-content: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  position: absolute;
  float: left;
  margin: auto;
  left: 0;
  right: 0;
  user-select: none;
}

.text-block{
	position: absolute;
	top: 5px;
	left: 375px;
	background-color: black;
	color: white;
	padding-left: 5px;
	padding-right: 5px;
	opacity: 0.4
}

#masterWrap #infoButton {
	position: absolute; 
	z-index: 100;
	top: 10px;
    left: 12px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	/*opacity: 0.75;*/
	stroke-width: 8px;
	stroke: #3494AB;
	fill: transparent;
}

#masterWrap #sidePanel {
	position: absolute;
    width: 25%;
    height: 100%;
    top: 0;
    left: 55px;
	overflow: hidden;
}

#masterWrap .infoPanel {
	position: absolute;
    width: 100%;
    height: 100%;
}

#masterWrap #sidePanel .background {
	position: absolute; 
	width: 100%;
	height: 100%;
    background-color: #eee;
    margin: 0;       
    top: 0;
    opacity: .9;
}

#masterWrap #sidePanel .info {
	position: relative;
	margin: 10px 10px;
    height: calc(100% - 20px);
	overflow-x: auto;
    overflow-y: auto;
	
}

#masterWrap #sidePanel .info .description {
	position: absolute;
	color: #333;
    font-size: 15px;
    margin: 0;
    padding: 0;
}

#masterWrap #sidePanel .info .description img {
	width: 100%;
	
}

#masterWrap #infoButton2 {
	position: absolute; 
	z-index: 100;
	bottom: 10px;
    right: 12px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	/*opacity: 0.75;*/
	stroke-width: 8px;
	stroke: #3494AB;
	fill: transparent;
}

#masterWrap #sidePanel2 {
	position: absolute;
    width: 25%;
    height: 100%;
    top: 0;
    right: 55px;
	overflow: hidden;
}

#masterWrap .infoPanel2 {
	position: absolute;
    width: 100%;
    height: 100%;
}

#masterWrap #sidePanel2 .background {
	position: absolute; 
	width: 100%;
	height: 100%;
    background-color: #eee;
    margin: 0;       
    top: 0;
    opacity: .9;
}

#masterWrap #sidePanel2 .info {
	position: relative;
	margin: 10px 10px;
    height: calc(100% - 20px);
	overflow-x: auto;
    overflow-y: auto;	
}

#masterWrap #sidePanel2 .info .descriptions {
	position: absolute;
	color: #333;
    font-size: 15px;
    margin: 0;
    padding: 0;
}

#masterWrap #sidePanel2 .info .descriptions img {
	width: 100%;	
}

#masterWrap #legend {
	position: absolute;
    width: 25%;
    bottom: 0;
	left: 55px;
	overflow: hidden;
}

#masterWrap .legendPanel {
}

#masterWrap #legend .background {
	position: absolute; 
	width: 100%;
	height: 100%;
    /*background-color: #eee;*/
    margin: 0;       
    top: 0;
    opacity: .9;
}

#masterWrap #legend .info {
	position: relative;
	margin: 10px 10px;
    width: 80%;
}

#masterWrap #legend .info .description {
	position: relative;
	height: 24vw;
	background-size: cover;
	background-image: url("./../assets/legend/legend.png")
}

#draggerThumb {
  width: 100%;
  overflow: hidden;
}

#draggerThumb section {
  cursor: pointer;
  float: left;
  user-select: none;
}
#draggerThumb img {
  width: 100px;
  display: none;
}
#panelThumb {
  
}

#leftArrow {
  left: 12px;
}

#rightArrow {
  right: 12px;
}

#titleWrap {
  height: 30px;
  position: relative;
  z-index: 20;
  bottom: 0;
  left: 50%;
  overflow-y: hidden;
}

.title {
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #444;
}

.arrow {
  position: absolute;
  z-index: 100;
  top: 50%;
  cursor: pointer;
  /*opacity: 0.75;*/
  width: 40px;
  height: 40px;
  stroke-width: 8px;
  stroke: #3494AB;
  fill: transparent;
}

.scrollContainer {
  
}

#scrollRange
{
  width: 100%;
}

input[type="range"] { 
  margin: auto;
  -webkit-appearance: none;
  position: relative;
  overflow: hidden;
  height: 30px;
  cursor: pointer;
  border-radius: 0; 
  background: rgba(0, 0, 0, 0);
}
input[type=range]:focus {
  outline: none;
}

::-webkit-slider-runnable-track  {
  background: #ddd;
  height: 6px;
}

::-webkit-slider-thumb{
  -webkit-appearance: none;
  background: #fff;
  height: 30px;
  width: 30px;
  border: 3px solid #3494AB;
  border-radius: 50% !important;
  margin-top: -12px;
}

::-moz-range-track{
  height: 6px;
  background: #ddd;
}

::-moz-range-thumb  {
  background: #fff;
  height: 30px;
  width: 30px;
  border: 3px solid #444;
  border-radius: 50% !important;
  box-sizing: border-box;
}

::-ms-thumb { 
  background: #fff;
  height: 30px;
  width: 30px;
  border: 3px solid #444;
  border-radius: 50% !important;
  box-sizing: border-box;
}
::-ms-track { 
  background: #ddd;
  color: transparent;
  height: 6px;
  border: none;
}

::-ms-ticks-after { 
  display: none; 
}

::-ms-ticks-before { 
  display: none; 
}
::-ms-fill-lower {
  background: rgba(0, 0, 0, 0);
}
input[type=range]::-ms-tooltip {
  display: none;
}

body ::-webkit-scrollbar{-webkit-appearance:none;width:10px;height:10px}body ::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:0}body ::-webkit-scrollbar-thumb{cursor:pointer;border-radius:5px;background:rgba(0,0,0,.25);-webkit-transition:color .2s ease;transition:color .2s ease}body ::-webkit-scrollbar-thumb:window-inactive{background:rgba(0,0,0,.15)}body ::-webkit-scrollbar-thumb:hover{background:rgba(128,135,139,.8)}body .ui.inverted::-webkit-scrollbar-track{background:hsla(0,0%,100%,.1)}body .ui.inverted::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.25)}body .ui.inverted::-webkit-scrollbar-thumb:window-inactive{background:hsla(0,0%,100%,.15)}body .ui.inverted::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.35)}