/* GENERAL */
body {
  --main-bg-color-dark: #111211;
	--main-bg-color: #181917;
	--main-bg-color-light: #232422;
  --accent-color-dark: #518418;
  --accent-color: #66a61e;
  --accent-color-light: #84b74a;
	--font-color: #ddd;
	margin: 0;
  background-color: var(--main-bg-color-dark);
	color: var(--font-color);
	font-family: "Roboto Condensed";
  overflow: hidden;
}

#logo {
  margin-left:16px;
  font-size: 2em;
  color: var(--font-color);
  font-family: "Roboto Condensed";
}

h2 {
  border-bottom: 1px solid var(--accent-color);
}

h3 {
	margin: 0.2em 0;
}

h4 {
  letter-spacing: 0.1em;
  margin-top: -1em;
  font-weight: 300;
}

a {
  color: var(--font-color);
}

a:visited {
  color: var(--font-color);
  text-decoration: ;
}

a:hover {
  color: var(--accent-color);
}

button {
  text-transform: uppercase;
  background-color: var(--main-bg-color);
  color: var(--font-color);
  border: 1px solid var(--font-color);
  margin: 0 0.4em;
  padding: 0.4em;
  min-width: 5em;
}

button.disabled {
  background-color: var(--main-bg-color-light);
  color: var(--main-bg-color);
  cursor: not-allowed;
}

button img {
  display: block;
  padding-bottom: 0.6em;
  margin: auto;
}

button.small {
  min-width: 2em;
}

button:hover {
  background-color: var(--main-bg-color-light);
}

button:focus {
  border: 1px solid var(--accent-color);
  outline: none;
}

button.disabled:hover {
  background-color: var(--main-bg-color-light); 
}

button.disabled:focus {
  border: 1px solid var(--main-bg-color-light);
  outline: none;
}

ul.example {
  list-style: none;
  padding-left: 1em;
  padding-right: 0.4em;
  padding-bottom: 0.4em;
  /*border-left: 4px solid var(--accent-color);
  border-bottom: 4px solid var(--accent-color);*/
  background-color: var(--main-bg-color-light);
}

ul.example::before {
  content: "EXAMPLE";
  font-family: "Roboto Condensed";
  font-weight: 700;
  display: block;
  font-size: 0.6em;
  background-color: var(--accent-color);
  margin-left: -1.7em;
  padding-left: 1em;
  margin-right: -0.7em;
  margin-bottom: .7em;
}

ul.example ul {
  list-style: square;
}

ul.attention {
  list-style: none;
  position: relative;
  padding: .4em;
  background-color: var(--main-bg-color-light);
  border-left: 1.1em solid #e6ab02;
}

ul.attention::before {
  content: "!";
  position: absolute;
  top: 0;
  left: -1.1em;
  font-family: "Roboto Condensed";
  font-weight: 700;
  padding-left: .4em;
  padding-right: .4em;
  margin-right: .4em;
}

/* CONTAINER */
#metacontainer,
#container { 
  /*width: calc(100% - 2em);*/
  width: 100%;
  /*max-width: 1200px;*/
  margin: 0 auto;
  height: calc(100vh - 2.6em);
  display: flex;
  background-color: var(--main-bg-color);
   /*"settings overview vis";*/
}

/*#container>div {
	padding: 4px 1em;
}*/

/* TEXT */
#text {
  background-color: var(--main-bg-color);
  width: 35vw;
}

p, #text-content li {
  font-family: "Merriweather";
  /*font-family: 'Roboto';*/
  font-weight: 300;
}

#text-content {
  padding: 4px 1em;
  overflow: hidden;
  overflow-y: scroll;
  height: calc(100% - 8px);
  line-height: 1.65em;
}

#brushhover,#proxihover,#cphover,.hover {
/*  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--accent-color);*/
  padding-bottom: 0.1em;
  border-bottom: 1px dashed var(--accent-color);
  white-space: nowrap;
}

#brushhover:hover,#proxihover:hover,#cphover:hover,.hover:hover {
  color: var(--accent-color);
}

/* VIS */
#vis-overview {
  width: 10vw;
  background-color: var(--main-bg-color);
  padding: 4px 1em;
  overflow-y: scroll;
}

#vis-overview-caption {
}

#vis-overview-svg {
	background-color: var(--main-bg-color-light);
}

#vis-overview-text {
  height: 2.5em;
  overflow-y: hidden;
}

#vis {
  width: 55vw;
  display: grid;
  flex-wrap: wrap;
  justify-content: space-around;
}

#metavis {
  width: 50vw;
}

#metacontrol {
  width: 400px;
  padding-right: 5px;
}

#metadetails {
  width: calc(50vw - 400px);
  padding-left: 5px;
}

#vis.twoRows {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

#vis.threeRows {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.vis-item {
  margin: 5px;
	background-color: var(--main-bg-color);
	padding: 4px;
  position: relative;
}

.vis-item-indicator {
  position: absolute;
  right: 4px;
  top: calc(4px + 0.2em);
}

.vis-dr {
  margin: auto;
}

canvas {
	background-color: var(--main-bg-color-light);
}

/* SETTINGS */
#settings {

}

/* INPUT */
input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: var(--main-bg-color-light);
  border-radius: 0px;
  border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #656564;
  border: 0px solid #000000;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: var(--font-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: var(--main-bg-color-light);
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: var(--main-bg-color-light);
  border-radius: 0px;
  border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #656564;
  border: 0px solid #000000;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: var(--font-color);
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: var(--main-bg-color-light);
  border: 0px solid #000000;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
  background: var(--main-bg-color-light);
  border: 0px solid #000000;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #656564;
  border: 0px solid #000000;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: var(--font-color);
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: var(--main-bg-color-light);
}
input[type=range]:focus::-ms-fill-upper {
  background: var(--main-bg-color-light);
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 2.5em;
  height: 1.2em;
  margin: 0 0.4em;
  top: .2rem;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--main-bg-color-light);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1em;
  width: 1em;
  left: 0.2em;
  bottom: 0.1em;
  background-color: var(--font-color);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--main-bg-color-light);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--main-bg-color-light);
}

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

/* Rounded sliders */
.slider.round {
  border-radius: 1em;
}

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

/* on off slider
/* The switch - the box around the slider */
.switch2 {
  position: relative;
  display: inline-block;
  width: 2.5em;
  height: 1.2em;
  margin: 0 0.4em;
  top: .2rem;
}

/* Hide default HTML checkbox */
.switch2 input {display:none;}

/* The slider */
.slider2 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--main-bg-color-light);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider2:before {
  position: absolute;
  content: "";
  height: 1em;
  width: 1em;
  left: 0.2em;
  bottom: 0.1em;
  background-color: var(--font-color);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider2 {
  background-color: var(--accent-color);
}

input:focus + .slider2 {
  box-shadow: 0 0 1px var(--main-bg-color-light);
}

input:checked + .slider2:before {
  -webkit-transform: translateX(1.2em);
  -ms-transform: translateX(1.2em);
  transform: translateX(1.2em);
}

/* Rounded sliders */
.slider2.round {
  border-radius: 1em;
}

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

/* SCROLLBAR */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: var(--accent-color-dark);
  border: 0px none #ffffff;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}
::-webkit-scrollbar-thumb:active {
  background: var(--accent-color-light);
}
::-webkit-scrollbar-track {
  background: var(--main-bg-color-light);
  border: 0px none #ffffff;
}
::-webkit-scrollbar-track:hover {
  background: var(--main-bg-color-light);
}
::-webkit-scrollbar-track:active {
  background: var(--main-bg-color-light);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* NAVBAR */
#navbar {
  /*width: calc(100% - 2em);*/
  width: 100%;
  margin: 0 auto;
  height: calc(2.5em - 3px);
  padding: 1em auto;
  background-color: var(--main-bg-color);
  border-bottom: 3px solid var(--accent-color);
}

/*#navbar>div {
  height: calc(2.5em - 3px);
  margin: 0 auto;
}*/

/* UPLOAD BUTTON */
.navbarRight {
  height: calc(2.5em - 3px);
  float: right;
}

.navbarLeft {
  height: calc(2.5em - 3px);
  float: left;
}

.fileupload {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

/*.navbarLeft + button,
.fileupload + label {
  display: inline-block;
  text-transform: uppercase;
  background-color: var(--main-bg-color);
  color: var(--font-color);
  border: 1px solid var(--font-color);
  margin: 0 0.4em;
  padding: 0.4em;
  min-width: 5em;
}*/

/*.fileupload:focus + label,
.fileupload + label:hover {
  background-color: var(--main-bg-color-light);
}*/

/* DROPDOWN */
/* Style The Dropdown Button */
.fileupload,
.dropbtn {
  display: block;
  font-family: 'Roboto Condensed';
  font-size: 16px;
  background-color: var(--main-bg-color);
  color: var(--font-color);
  margin: 0;
  padding: 0.57em;
  min-width: 5em;
  border: none;
  cursor: pointer;
  height: calc(2.5em - 3px);
}

#linklist {
  list-style-type: none;
  margin: 0;
  font-size: 1em;
}

#linklist li,
.navbarRight ul li {
  float:left;
  border-left: 1px solid var(--accent-color);
}

#linklist li {
  height: calc(2.5em - 3px);
}

#linklist li div a {
  display: block;
  text-decoration: none;
  padding: 0.57em;
}

#linklist li div a img{
  vertical-align: middle;
}

#linklist li:last-child/*,
.navbarRight ul li:last-child*/ {
  border-right: 1px solid var(--accent-color);
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    left: -1px;
    /*margin-top:3px;*/
    background-color: var(--main-bg-color-light);
    border: 1px solid var(--accent-color);
    border-top-width: 4px;
    min-width: 160px;
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
    z-index: 10;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: var(--font-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: var(--accent-color)
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
#linklist li:hover,
.dropdown:hover .dropbtn {
    background-color: var(--main-bg-color-light);
}



/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted var(--accent-color);
    cursor: help;
}

.tooltip:after {
  content: "?";
  vertical-align: sub;
  font-size: 70%;
  border-bottom: none;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 10em;
    background-color: var(--main-bg-color-dark);
    border: 1px solid var(--accent-color);
    color: var(--font-color);
    text-align: center;
    padding: .5em;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-top: 3px; 
    margin-left: -5em;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

::selection {
  background-color: var(--accent-color);
}


kbd {
  text-transform: uppercase;
  border: 1px solid var(--font-color);
  border-radius: 2px;
  margin: .2em;
  padding: .2em;
}

.ctrl.active, .shift.active {
  background-color: var(--main-bg-color-light);
  color: var(--accent-color);
}