/* main */

body {
	background:#404040;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	margin-left: 0px;
}

.divJXGBox{
	width:800px;
	height:800px;
}

.divJXGBoxHidden{
	width:800px;
	height:0px;
}

/* width */
::-webkit-scrollbar {
width: 10px;
background: #202020; 
}

::-webkit-scrollbar-corner {
	background: #202020; 
}
	
/* Track */
::-webkit-scrollbar-track {
background: #404040; 
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #282828; 
border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #202020; 
}

.ctrlTable{
	display: table;
	text-align: left;
	margin: 10px;
	white-space: nowrap;
}

.ctrlTableHidden{
	display: none;
}

.inputField{
	height: 15px;
	background-color: #404040;
	color: #fff;
}

.ctrlRow{
	display: table-row;
}

.ctrlRowHidden{
	display: none;
}
	
.ctrlCell{
	display: table-cell;
	vertical-align: top;
}

.stemsCounter{
	width: 30px;
	padding: 0px;
	margin: 0px;
	background-color: #404040;
	color: #fff;
}

.stemItem{
	display: block;
	color: #fff;
	background-color: #404040;
}

.ctrlCellReducedWidth{
	width: 80%;
}
.draggableForm {
	position: absolute;
	background-color: #404040;
	text-align: center;
	color: #fff;
	border: 1px solid #000000;
	overflow-y: auto;
	resize: vertical;
}

.draggableFormHeader {
	padding: 5px;
	cursor: move;
	background-color: #282828;
	color: #fff;
	font-size:14px;
	border: 1px solid #000000;
}

.linkButton {
	padding: 5px;
	cursor: pointer;
	left: 90%; 
}

.pos_TableInput{
	top: 0px;
	left: 801px;
	width: 350px;
	max-height: 200px;
}

.pos_TableOutput{
	top: 197px;
	left: 801px;
	width: 350px;
	max-height: 280px;
}

.pos_TableProperties{
	top: 477px;
	left: 801px;
	width: 350px;
	height: 352px;
	max-height: 490px;
}

.pos_jxgbox{
	top: 0px;
	left: 0px;
	color: #000;
	background-color: #fff;
	resize: none;
}

/* switch slider checkbox */
.switch {
  position: relative;
  display: inline-block;
  width: 40px; /* 60px; */
  height: 20px; /* 34px */
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 2px; /* 0 */
  left: 2px; /* 0 */
  right: 2px; /* 0 */
  bottom: 2px; /* 0 */
  background-color: #999;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px; /* 26px */
  width: 12px; /* 26px */
  left: 2px; /* 4px */
  bottom: 2px; /* 4px */
  background-color: #4b6e1a;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #a0ec36;
}

input:focus + .slider {
  box-shadow: 0 0 1px #a0ec36;
}

input:checked + .slider:before {
  -webkit-transform: translateX(24px); /* 26px */
  -ms-transform: translateX(24px); /* 26px */
  transform: translateX(24px); /* 26px */
}

/* Rounded sliders */
.slider.round {
  border-radius: 20px; /* 34px */
  width: 40px;
}

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

.colorpicker{
	border:0;
	background:none;
	padding:0px;
	height: 20px;
	line-height: 0;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.colorpickerHidden{
	border: 0;
	background:none;
	background-color: #404040;
	padding:0px;
	height: 20px;
	line-height: 0;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.colorpickerHidden::-webkit-color-swatch {
    border: none;
}

.jsxgTitle{
	font-weight: bold;
}