html, body {
	position: relative;
	
	width: 100%;
	height: 100%;
  background-color: #222;
  
  
  
}




body {
	color: #333;
	margin: 0;
	padding: 8px;
	box-sizing: border-box;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	
	
	
	
}

h1 {
  color: #ccc;
}

#wrap, #content {
  color: rgb(120, 157, 194); 

  
  
}


.wrapV2 {
  color: rgb(120, 157, 194);
  z-index: 1;
  position: absolute;
  top: 165px;
  left: 0px;
  width:100%;
}

.wrapV2 > div:first-of-type {
  display: flex;
  justify-content: center;
}

.wrapV2 > div:first-of-type > div:first-of-type {
  width: 100%;
  max-width: 800px;
  
}

#scale_div {
  position: relative;
}


.header {
  
	
	
	
  
  

  background-color: #444;
  color: #ccc;
  text-align: center;
  padding: 3px 0px;
  z-index:3;
  position: absolute;
  width: 100%;
}

.header h1 {
  display: inline;
  margin:0px;
  padding: 0px;
  font-size: 1em
}

.main_section {
  z-index: 5;
  position: absolute;
  width:100%;
}

.main_section > div {
  display: flex;
  justify-content: center;
}

.main_section > div > div {
  width: 100%;
  max-width: 800px;
}

#description {
  height: 50px;
}

.description-wrap, #description-wrap {
  color: #ccc;
  border: 1px solid #ccc;
  
  margin: 10px;
  padding: 5px 10px;
  border-radius: 5px;   
  height: 85px;
  
}

.slidecontainer {
  margin-top: 25px;
  width: 100%; 
  
}


.slider {
  -webkit-appearance: none;  
  appearance: none;
  width: 100%; 
  height: 15px;
  border-radius: 5px;
  background: #444;
  outline: none; 
  opacity: 1; 
  -webkit-transition: .2s; 
  transition: opacity .2s;
}


.slider:hover {
  opacity: 1; 
}


.slider::-webkit-slider-thumb {
  -webkit-appearance: none; 
  appearance: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid white;
  background: #555; 
  cursor: pointer; 
}

.slider::-moz-range-thumb {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-color: white;
  background: #555; 
  cursor: pointer; 
}

.scrollWindow {
  z-index: 2;
  position: absolute;
  opacity: 50%;
}

.scrollWindow div {
  height:20000px;
}

a {
	color: rgb(120, 157, 194);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}



label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 1px solid #888;
	border-radius: 2px;
}



input {
  color: #888;
  background-color: #333
}

input:disabled {
	color: #ccc;
}



button:disabled {
	color: #999;
}

button:not(:disabled):active {
	background-color: #ddd;
}

button:focus {
	border-color: #666;
}

button {
  
  
  
  background-color: #558b4b;
  color: black;
  cursor: hand; cursor:pointer;
  border: none;
  border-radius: 5px; 
  padding: 0.4em 0.8em; 
}

.work_part {
  margin: 0 3px;
}

.arrow-left {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #888;
}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #888;
}

.gray {
    color: gray;
}

.gray_paren {
    color: gray;
}

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

.show-work-text {
  font-size: .5em;
  color: #8A8A8A;
}



.dropbtn {
  color: white;
  border: none;
  cursor: pointer;
  opacity: .5;
}


.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}


.dropdown {
  float: right;
  position: relative;
  display: inline-block;
  z-index: 9999;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #555;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  right: 0;
  z-index: 9999;
}


.dropdown-content a, .dropdown-content div {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  cursor: hand; cursor: pointer;
}


.dropdown-content a:hover, .dropdown-content div:hover {background-color: #333;}


.show {display:block;}

.strikethrough {
  position: relative;
}

.strikethrough:before {
  position: absolute;
  content: "";
  opacity: .5;
  left: -10px;
  top: 50%;
  right: -10px;
  border-top: 3px solid;
  border-color: pink;
  -webkit-transform:rotate(-30deg);
  -moz-transform:rotate(-30deg);
  -ms-transform:rotate(-30deg);
  -o-transform:rotate(-30deg);
  transform:rotate(-30deg);
}

.explanation {
  
  color: #8A8A8A;
  font-size: .7em;
}

.noselect {
  -webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none; 
}




.pulse {
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0px 0px 0px 1px #666;
  }
  50% {
    box-shadow: 0px 0px 0px 1px #222;
  }
  100% {
    box-shadow: 0px 0px 0px 1px #666;
  }
}

.appear-box {
  border: 1px solid #789dc2;
  background-color: #789dc2;
  padding: 10px 5px 10px 5px;
  border-radius: 5px;
  position: relative;
  top: -11px; 
  left: -6px;
}

.appear-box-wrap {
  opacity: .2;
}

.appear-box-gone {
  padding: 6px 6px 2px 6px;
}

.solver-description-wrap-outer {
  opacity: 0;
  
  
  padding: 5px;
  border-radius: 5px;
}

.solver-description-wrap {
  padding: 10px;
  margin: 10px 0px;
  opacity: 1;
  color: gray;
}