body {
	background-color: #0d0d0d;
	color: #c7c7c7;
}

input, textarea {
	background-color: rgb(255 255 255 / 10%);
	color: #ffffff;
	border: solid 1px #808080;
	border-radius: 5px;
	padding-left: 3px;
	/*margin-bottom: 16px;*/
}

textarea {
	width: 100%;
	height: 8em;
	margin-top: 4px;
}

label {
	margin-bottom: 0;
}

h1 {
	font-family: 'JetBrains Mono', monospace;
	color: #1e90ff;
	margin-top: 4px;
}

h2 {
	color: #fffafa;
}

.svg-btn.add {
	stroke: #00ff00;
}

.bdr-right {
	border-right: 1px solid #2f2f2f;
	border-bottom: none;
}

.btn {
	background-color: #1e90ff;
	color: #000000;
	padding: 2px 10px;
	border-radius: 5px;
	border: none;
	font-weight: 600;
	margin-bottom: 16px;
}

.btn-wrap:hover .tooltips {
	display: block;
}

.btn-wrap.inline {
	display: inline-block;
}

.carrot {
	padding: 0 5px 0 5px;
    width: 25px;
    cursor: pointer;
    fill: #212c21;
    stroke: #ffffff;
    stroke-width: 16;
    stroke-dashoffset: 0; 
    stroke-dasharray: 0;
    stroke-linecap: round; 
    stroke-linejoin: round; 
}

.control-title {
	background-color: black;
	border: none;
}

.gtjs {
	display: none;
	padding: 0;
}

.svg-btn.info {
	width: 20px;
	margin: 0 5px;
}

.inPut, .outPut {
	padding: 0 2em;
}

.inPut .row {
	margin-bottom: 16px;
}

.margin-5-right {
	margin-right: 5px;
}

.newVar {
	border-top: solid 2px #a9a9a926;
	padding-top: 20px;
}

.no-pad{
	padding: 0;
}

.one-px-left {
	margin-left: 1px;
}

.outLined {
	font-family: 'JetBrains Mono', monospace;
	color: #000000;
	-webkit-text-fill-color: #000000;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #1e90ff;
}

.outPut {
	display: none;
}

.outPut form {
	margin-bottom: 8px;
}

.own {
	color: #2f2f2f;
	border-top: dashed 1px #2f2f2f;
	font-size: .75em;
}

.own p {
	padding-top: 1em;
	float: right;
}

.pad-btm-8 {
	padding-bottom: 8px;
}

.svg-btn.remove {
	stroke: #ff0000;
}

.right {
	float: right;
}

.rotate-me {
	transform: rotateZ(90deg);
}

.section-header {
	display: inline-flex;
	background-color: #1e90ff;
	color: black;
	font-weight: 600;
	width: 100%;
	border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 3px 0 3px 3px;
    margin-bottom: 16px;
}

.section-header div {
    cursor: pointer;
}

.svg-btn {
	width: 32px; 
	fill: transparent; 
	stroke: #1e90ff; 
	stroke-width: 8;
	stroke-dashoffset: 0; 
	stroke-dasharray: 0; 
	stroke-linecap: round; 
	stroke-linejoin: round;
	background-color: transparent;
	border: none;
	margin: -2px -2px 0 16px;
	cursor: pointer;
}

.tooltips {
    position: absolute;
    display: none;
    max-width: 250px;
    margin-top: -24px;
    margin-left: 32px;
    background-color: #d3d3d3;
    z-index: 1;
    padding: 8px;
    color: black;
    border-radius: 5px;
    font-size: 12px;
}

.varName, #testName {
	width: 50%;
}

#more, #less {
	color: #1e90ff;
}

#more:hover, #less:hover {
	color: #1e90ff;
	text-decoration: none;
}

#footer {
	padding-top: 24px;
}

#results {
	height: 20em;
}

#submit {
	margin-top: -8px;
	margin-bottom: 20px;
}

#trackjs {
	height: 4em;
}

@media only screen and (max-width: 470px) {
	.varNameWrapper {
		width: 100%;
		margin-bottom: 4px;
	}

	.varName, #testName {
		width: 65%;
	}
}

@media only screen and (max-width: 767px) {
  .add, .remove {
    margin: -2px -2px 0 8px;
  }

  .bdr-right {
  	border-right: none;
  	border-bottom: 1px solid #2f2f2f;
  	padding-bottom: 16px;
  }

  .tool-wrapper h2 {
  	padding-top: 16px;
  }
}