html, body {
    font: 12px sans-serif;
    scrollbar-width: none !important;
    margin-top: 3px;
    margin-left: 3px;
    margin-right: 0px;
    background-color: #6a6a6a;
}

/* Banner */
.mynav {
    padding: 5px;
    background: #6a6a6a;
    background-color: #353535;
    margin-right: 5px;
    margin-bottom: 5px;
    font-weight: bold;
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    font-size: 25px;
    color: #ababab;

}

.mynav a {
  text-decoration-line: none;
  text-decoration-style: none;
  color: #6a6a6a; 
  cursor: pointer;
}

/* hamburger menu; dd=dropdown */
.containerdd {
    vertical-align: text-bottom;
    display: inline-block;
    /* cursor: pointer; */
}

.bar1, .bar2, .bar3 {
    width: 30px;
    height: 4px;
    background-color: #6a6a6a;
    margin: 5px 5px;
    transition: 0.1s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-6px, 6px);
    transform: rotate(-45deg) translate(-6px, 6px);
}

.change .bar2 {
    opacity: 0;
    transition: 0.3s;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -7px);
  transform: rotate(45deg) translate(-6px, -7px);
}


/* dropdown on banner */
/* 
.dropdown {
  position: relative;
  display: inline-block;
} */

.dropdown-content {
  display: none;
  /* left: auto; */
  /* right: 0; */
  position: absolute;
  background-color: #ababab;
  /* min-width: 160px; */
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  font: 16px sans-serif;
  z-index: 1;
}

.dropdown-content a {
  color: #3a3a3a;
  padding: 6px 50px 6px 12px;
  display: block;
  text-decoration-line: none;
  text-decoration-style: none;
}

.dropdown-content a:hover {
    /* background-color: #ababab; */
    color: #fafafa;
    text-decoration-line: none;
    text-decoration-style: none;
}

.hide {display: block;}

/* ******************************************************************** */

/*  */
.grid-stack {
    background: #6a6a6a; /* lightgoldenrodyellow;*/
}

.grid-stack-item-content {
    /* text-align: center; */
    overflow-y: hidden!important;
    color: #ababab; /* text color */
    border: solid #565656 1px;
    overflow: hidden;
    scrollbar-width: none !important;
    background-color: #6a6a6a;
    /* box-shadow: 2px 2px 2px lightgrey; */
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.title-bar {
    padding: 3px;
    background: #606060;
}

.graph-title {
    font: 16px sans-serif;
    text-anchor: start;
    text-align: left;
    /* background-color: #6a6a6a; */
    /* color: #988; */
}

.grid-stack-item-content::-webkit-scrollbar {
    width: 0 !important
}



/* #state_map-content {
    height: calc(100% - 30px);
    width: 100%;
}

#US_map-content {
    height: calc(100% - 30px);
    width: 100%;
}

#world_map-content {
    height: calc(100% - 30px);
    width: 100%;
} */


/* slightly increase the contrast between ocean and graticule 
 * using overlaying of the same color with low opacity. 
 * Makes a great sense of ocean with land flowing on top.
 * With a small hint of blue too!
 */
.ocean {
    fill: #f0f0ff; /* #bfd7e4; */
    /* fill: none; */
    fill-opacity: 0.2;

}
.graticule {
  fill: none;
  stroke: #f0f0ff; /* #e5e5e5; */
  stroke-width: 0.3;
  stroke-opacity: 0.2;
}


.tutorial-highlight {
  color: red;
  font-weight: bold;
}
/* circle symbols */

.world_symbol, .state_symbol, .US_symbol {
  fill: #de2d26;
  fill-opacity: 0.85;
  stroke-width: 0.3;
  stroke: #dadada;
}

.world_symbol.highlight, .US_symbol.highlight, .state_symbol.highlight {
	stroke-width: 3;
	fill-opacity: 0.95;
	stroke-opacity: 0.8;
}

.world_symbol.locked, .US_symbol.locked, .state_symbol.locked {
  stroke: #ffffff;
  stroke-width: 3;
  fill-opacity: 1;
  stroke-opacity: 1;
}

/* hoverline for timeline charts */
.hover-line {
    stroke: #353535;
    fill: none;
    stroke-width: 2px;
    shape-rendering: crispEdges;
    opacity: 0.5;
}

.text-label {
	font: 12px Helvetica, sans-serif;
	fill: #ababab;
}

.hover-text  {
  font: 22px Helvetica, sans-serif;
}

.hover-text.grey {
	fill: #ababab;
}

.hover-text.highlight {
  fill: white;
}

.hover-text.red  {
	/* font: 18px Helvetica, sans-serif; */
	fill: red;
}


.land {
	stroke: #cacaca;
}

/* time line */
.line{
    fill: none;
    stroke: #ababab;
    stroke-width: 1;
}

/* world curves highlight */
.world_highlight, .US_highlight, .state_highlight {
    stroke: red;
    stroke-width: 3;
}

.world_highlight_locked, .US_highlight_locked, .state_highlight_locked {
  stroke: white;
  stroke-width: 2;
}

.confirmed{
    stroke: #de2d26;
    stroke-width: 3;
}

.deaths{
  stroke: #1e1e1e;
  stroke-width: 3;
}

.recovered{
  stroke: #30a326;
  stroke-width: 3;
}

.overlay {
  fill: none;
  pointer-events: all;
}

/* Style the dots by assigning a fill and stroke */
.dot {
    fill: #ffab00;
    stroke: #fff;
}
  
.focus circle {
	fill: none;
	stroke: steelblue;
}


/* w3 schools */
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* clickable text for parallel coords and scatter plot */
.text-button {
  cursor:pointer;
  color: #ababab;
}

.text-button-down{
  cursor:pointer;
  color: #888;
}

/* Modal Content */
.modal-content {
  background-color: #3f3f3f;
  color: #bfbfbf;
  font-size: 16px;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 65%;
}

.modal-content a {
  text-decoration-line: none;
  text-decoration-style: none;
  color: #eaeaea;
  font-weight: normal;
  cursor: pointer;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: 200;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.grid-container{
  height: 100%; 
  /* calc(100% - 0px); */
  width: 100%;
}

.map-content{
  /* height: 100%; */
  width: 100%;
}

.map-affiliation-content{
  height: 25%;
  width: 100%;
}

.plot-content{
  height: 100%;
  width: 100%;
}

.plot-affiliation-content{
  height: 0%;
  width: 100%;
}

.plot-affiliation-content{
  height: 0%;
  width: 100%;
}

/* class applies to select element itself, not a wrapper element */
.select-css {
	display: inline-block;
	font-size: 13px;
	font-family: sans-serif;
	font-weight: bold;
	color: #ababab; /* font color */
	/* line-height: 1.3; */
	/* padding: .6em 1.4em .5em .8em; */
    padding-left: 20px;
	width: 100%;
	max-width: 100%; /* useful when width is set to anything other than 100% */
	/* box-sizing: border-box; */
    /* margin: 0; */
    margin-left: 5px;
	border: 1px solid #6a6a6a;
	box-shadow: 0;
	border-radius: 0em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #6a6a6a; /* as same as the page color */
	/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
		for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
	*/
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ababab%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat, repeat;
	/* arrow icon position (1em from the right, 50% vertical) , then gradient position */
	background-position: left .7em top 50%, 0 0;
	/* icon size, then gradient */
	background-size: .65em auto, 100%;
    cursor:pointer;

}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
	display: none;
}
/* Hover style */
.select-css:hover {
    border: 1px solid #6a6a6a;
	/* border-color: #606060; */
}
/* Focus style -- hard to control the border of the dropdown box*/
.select-css:focus {
    /* background: red; */
	/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
	box-shadow: 0 0 0 0px #606060;
	box-shadow: 0 0 0 0px -moz-mac-focusring;
	/* outline-color: #ababab; */ /* no use */ 
  /* outline: 0px; */
}

/* Set options to normal weight */
.select-css option {
  font-weight: normal;
  /* border: 0px solid white; */
}

/* TITLE bar select (for states) */
select {
    font: 16px sans-serif;
    font-weight: normal;
	  color: #ababab; /* font color */
    padding-left: 30px;
    padding-right: 5px;
    border: 0;
    outline: none;
    border-radius: 0px;
    background: #606060;
    /* background: #f0f0f0 url(imgs/br_down_tiny_x.png) no-repeat left; */
    /* background-size: 10px 10px; */
    -webkit-appearance: none;
    -moz-appearance:none;
    appearance:none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ababab%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position */
    background-position: left .7em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: .65em auto, 100%;
    /* -webkit-box-shadow: 0 1px 0 #ccc;
    -moz-box-shadow: 0 1px 0 #ccc;
    box-shadow: 0 1px 0 #ccc; */
    cursor:pointer;
}


/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
	background-position: left .7em top 50%, 0 0;
	padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
	color: gray;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

.select-css:disabled:hover, .select-css[aria-disabled=true] {
	border-color: #aaa;
}

.theme {
  width: auto;
  margin-top: 10px;
}

.choropleth-legend {
    color: red;
}

.legend {
    font-size: 13px;
    fill: #ababab;
    padding: 50px;
}