.navbar {
    padding-top: 0;
    padding-bottom: 0;
	margin-right: auto;
	margin-left: auto;
}

nav img {
    /* height: 4em; */
    padding-top: .3125rem;
    padding-bottom: .3125rem;
}

.navbar-light .navbar-nav .nav-link{
	color: black;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: black;
	background-color: #e6e6e6;
}

.nav-link {
	display: inline;
    padding: .5rem .5rem;
}

.dropdown-menu {
	padding: 0 0;
	margin: .4rem -5px 0;
    font-size: 13px;
	border-radius: 0px;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    text-decoration: none;
    background-color: #f4f4f4;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
	margin: .4rem 0 0;
    /*margin-top: -1px;*/
}

.dropdown-menu>li>a {
    display: block;
	padding: 3px 6px;
    clear: both;
    color: #212529;
    white-space: nowrap;
}

.charts-container {
    margin-top: 10px;
}

.chart-title {
    background-color: lightgray;
    border: solid 0px lightgray;
    border-radius: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    font-size: 14px;
    text-align: left;
}


.chart-title-icons {
    float: right;
    cursor: pointer;
    color: rgb(20, 20, 10);
    text-shadow: 0 1px 0 #fff;
    margin-right: 5px;
	margin-bottom: 1px;
    outline: none;
}

.chart-title-icons {
	cursor: default;
}

.chart-title-icon {
    margin-left: 5px;
    outline: none;
    width: 12px;
    height: 12px;
    opacity: .8;
}

.chart-info-icon {
    outline: none;
    width: 18px;
    height: 18px;
	margin-left: 2px;
	margin-right: -3px;
	margin-bottom: 0px;
    opacity: .6;
}

.copy-chart-data-icon {
    outline: none;
    width: 14px;
    height: 14px;
	opacity: .6;
}

.chart-title-icon:hover {
    opacity: 1;
}

.separator {
	color: darkgray;
	margin-left: 2px;
}

.chart-desc {
	padding-left: 5px;
	color: #717171;
	font-size: 13px;
}

.chart1-area {
	padding-left: 0px;
}

.chart2-area {
	padding-left: 0px;
}

.chart3-area {
	padding-left: 0px;
}

.caret-right {
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 4px solid;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
    margin-left: 4px;
    margin-right: 2px;
	margin-bottom: 2px;
}

.tooltip-inner {
	font-size: 12px;
}

a {
    color: rgb(20, 20, 10);
    text-decoration: none;
    opacity: .8;
}

a:focus,
a:hover {
    color: black;
    opacity: 1;
    text-decoration: none;
}

a:active,
a:hover {
    outline: 0;
}

body {
	font-size: 14px;
}

.runlist {
	display: flex;
	justify-content: center;
	margin: 2px auto;
	margin-top: 0px;
}

.runlist label {
    color: white;
    background-color: cyan;
    padding: 0 6px 0 6px;
    font-size: 13px;
}

.custom-control {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}

/* RATIO: ratio here must match viewBox in javascript (search for RATIO) */
.ratio4x3 {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  /* 16:9 -> 56.25%
     4:3  -> 75%
     3:2  -> 66.66%
     8:5  -> 62.5% */
}

.ratio4x3 > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

.mainGraphs .row, .mainSliders .row {
    margin-top: 0.5rem;
}

.mainGraphs .btn-group {
  width: 100%;
}

.mainGraphs .btn {
  text-align: left;  /* override .btn to left-justify text */
}

.mainGraphs .copytsv {
    flex: 0 1 auto;
}

.mainGraphs .chartinfo {
    text-align: right;
    flex: 0 1 auto;
}

/* put the dropdown triangle in ::before and reset ::after */
.mainGraphs .dropdown-toggle::after {
    display: inherit;
    margin-left: 0;
    vertical-align: inherit;
    content: "";
    border: 0;
}

.mainGraphs .dropdown-toggle::before {
    display: inline-block;
    margin-right: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

.submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -0.8em;
}

.dropdown-menu > li {
    position: relative;
}

.dropdown-menu > li:hover > .submenu {
    display: block;
}

.submenu-arrow {
    float: right;
}

.io-chart {
  background: white;
}

.io-chart g.xaxis,
.io-chart text.xunits,
.io-chart g.yaxis,
.io-chart text.yunits {
    font-size: 0.90rem;
}

.io-chart-tt {
  white-space: pre; /* preserves the "\n" in the tooltip */
}

.jumbotron {
    margin-bottom: 0rem;
}

.slider-group-title {
    background-color: lightgray;
    text-align: center;
    padding-bottom: 2px;
}

.slider-title {
    clear: both;
	font-size: 13px;
}

.slider-handle {
    width: 13px;
    height: 13px;
    background: rgb(1, 49, 85);
}

.slider-track {
    background: /*#bcbec0;*/ #abafac;
}


.slider.slider-vertical {
    height: 50px;   
}

.slider.slider-horizontal .slider-track {
    height: .50vw;
    top: .25vw;
    margin-top: 0;
}

.slider-selection {
    background: /*#00b6f1;*/ #b3a8a8;
}

.slider-dots {
    float: right;
    height: 20px;
    width: 12px;
    margin-top: 5px;
    display: inline-block;
    content: "";
    background-image: url("data:image/svg+xml,<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-three-dots-vertical' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/></svg>");
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
}

.slider-wrap {
    padding: 0 2px;
}

.slider.slider-horizontal {
    width: 100%;
}

.copyarea {
    position: fixed;
    top: 0;
    left: 0;
    width: 2em;
    height: 2em;
}


.details {
  font-size: small;
  margin: 12px;
}

.details > div {
  background-color: lightgray;
}

.details-close {
    float: right;
    width: 20px;
    height: 20px;
    margin-top: 5px;
    margin-right: -15px;
    display: inline-block;
    content: "";
    background-image: url("data:image/svg+xml,<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-x-circle' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path fill-rule='evenodd' d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/></svg>");
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
}
  
/*
.topBar {
  height: 15vh;
  width: 100%;
  overflow: auto;
}
*/
  
.column {
  height: 85vh;
  /* width: 50%; */
  float: left;
  overflow: auto;
}

/* Create artificial contecnt that extend past the viewport */
.content {
  width: 100%; 
  background: rgba(255, 255, 255, 0.7);
  height: 4000px;
  margin: 20px auto;
  line-height: 1.5em;
  padding: 10px;
}


/* Because we like pretty things */
.blue { background: #eef; width: 25%}
.green { background: #efe; width: 75%}

/** LIGHTBOX MARKUP **/

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}

table tr td:nth-child(2) {
    /* right alignment for 2nd column of score in jumbotron */
    text-align: right;
}