body { margin: 0; padding: 0; font-family: Roboto}

#popup { position: absolute; top: 0%; right: 0%; width: 100%; height: 100%; background-color: rgba(255,255,255,0); z-index: 10000; opacity:0; transition:0.25s; display: none; cursor: wait;}
#popupcontent { position: absolute; right: 10%; bottom: 10%; width: 20%; height: 20%; background-color: rgba(255,255,255,1); padding: 15px;  border-width: 15px; border-style: solid;
	border-color: #3c3d59;   font-size: 16px;   text-align: center;  color: #3c3d59; }


#popup-idsvinfo { position: absolute; top: 15%; right: 15%; width: 70%; height: 70%; background-color: white; z-index: 500; display: none; filter: drop-shadow(0px 0px 14px black);}

#singleIDSVDataTable {height: 100%; width: 100%}

.form-popup { position: absolute; left: 30%; top: 25%; width: 40%; background-color: rgba(255,255,255,1); padding: 15px;  border-width: 15px; border-style: solid; border-color: #3c3d59;   font-size: 16px;  color: #3c3d59; display: none;}
.closeicon { position: absolute; right: 5%; top: 5%; }
.closeicon-out { position: absolute; right: 0%; top: -2.5%; background-color: white; }

#navigation { position: fixed; top: 0; right: 0; width: 100%; height: 40px; background-color: #3c3d59;  z-index: 100;}
.main { position: absolute; top: 40px; bottom: 0; width: 75%; height: 100%; background-color: rgba(255,255,255,1); visibility: hidden;}
#map { position: absolute; top: 40px; bottom: 25%; width: 75%; }

.nodisplay {display: none;}

#listOfSVTable { position: absolute; top: 75%; bottom: 0; width: 75%; background-color: white; }

#map-table-options { position: absolute; top: 70%; bottom: 0; background-color: white; }

#sidebar { position: absolute; top: 40px; right: 0; width: 25%; height: 100%; background-color: rgba(255, 255, 255, 1)}

#table-content-sidebar { padding: 10px;}

.nav-logo { position: absolute;
    top: 5px;
    right: 5px;
    height: 35px;
    padding: 0px;
}

#login { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,1); z-index: 200;}
#logincontent { position: absolute; top: 30%; left: 20%; width: 60%; max-width: 600px; min-width: 400px; text-align: center;}
#loginlogo {width: 100%; max-width: 600px; min-width: 400px;}


.sidebar {position: absolute; top: 40px; right: 0; width: 25%; height: 100%; background-color: rgba(255,255,255,1); visibility: hidden;}
.icon-menu {display: none;}
.menu-title {display: inline;;}

@media screen and (max-width: 600px) {
	.icon-menu {display: inline;}
	.menu-title {display: none;}
	.nav-logo {display: none;}
	.fas {font-size: small;}
  .sidebar {position: absolute; top: 640px; width: 100%;}
	#map { position: absolute; width: 100%; height: 600px}
	#logincontent { left: 0%;}
	#listOfSVTable { position: absolute; top: 1390px; height: 500px; width: 100%; background-color: white; }
	#navigation { }
	#popupcontent { position: absolute; left: 15%; top: 15%; width: 60%; height: 30%; }
}


#showinfo { padding: 20px;}
#covarianttable.tabulator { font-size: 11px; }

.tabulator { font-size: 13px; }

.tabulator .tabulator-header {
    border-bottom: 3px solid #3c3d59;
    color: #3c3d59;
}

.tabulator-row:nth-child(2n) .tabulator-cell:first-child {
    border-left: 10px solid #3c3d59;
}

.tabulator-row .tabulator-cell:first-child {
    border-left: 10px solid #3c3d59;
}

.button-block {
	display: flex;
}

button {
	border-width: 0px;
	border-style: solid;
  background-color: #3c3d59;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
	margin: 2px;
	cursor: pointer;
}

button.single {
  padding: 5px 22px;
	transition: 0.3s;
	border-width: 1px;
	border-style: solid;
	border-color: #3c3d59;
	transition: 0.3s;
}

button.single:hover {
	background-color: white;
	color: #3c3d59;
}

button.nav {
	border-width: 0px;
	border-style: solid;
  background-color: #3c3d59;
  color: white;
  padding: 5px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
	margin: 2px;
	font-size: 20px;
    font-family: Roboto;
}


.spanLeft{
  position: relative;
  left:-7px;
  opacity:0;
  transition:0.25s;
}

.spanRight{
  position: relative;
  right:-7px;
  opacity:0;
  transition:0.25s;
}

button:hover.nav .spanLeft{
  position: relative;
  left:-20px;
  opacity:1;
}

button:hover.nav .spanRight{
  position: relative;
  right:-20px;
  opacity:1;
}

button:hover {
  background-color: #3c3d59; /* Green */
  color: white;
}

button.filter {
	background-color: white;
	border-width: 1px;
	border-style: solid;
	border-color: #2a9d8fff;
  color: #2a9d8fff;
  padding: 5px 22px;
}

button:hover.filter {
  background-color: #2a9d8fff;
	color: white;
}

button.map, button.map:hover {
	flex-grow: 1;
	border-width: 5px;
	border-style: solid;
	border-color: #3c3d59;
	background-color: white;
  color: #3c3d59;
  padding: 5px 0px;
	margin: 0px;
	transition: 0.3s;
}

button.map.unactive {
  background-color: #3c3d59;
	border-color: #3c3d59;
	color: white;
	margin: 0px;
}

button.map.unactive:hover {
	border-color: #3c3d59;
	background-color: white;
  color: #3c3d59;
}

.map-display-options {
	padding: 10px;
}

input[type=text], input[type=number], input[type=password], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.switch {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 16px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #3c3d59;
}

input:focus + .slider {
  box-shadow: 0 0 1px #3c3d59;
}

input:checked + .slider:before {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(10px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 12px;
}

.slider.round:before {
  border-radius: 50%;
}