/*
https://www.fonts-online.ru/fonts/free?page=37
*/

:root {
	--border-green: #006633;
	--border-green2: #004422;
	--border-green3: #008844;
	--border-grey: #444444;
	--bg-green: #003315;
	--bg-green2: #004422;
	--bg-grey: #333333;
	--bg-black: #000000;
	--text-green: #00FF88;
	--text-green2: #00AA55;
	--text-green3: #006633;
	--text-info: #88BB00;
	--text-desc: #AABBCC;
	--body-bg: #222222;
	--marker_green: #44FF44;
	--marker_yellow: #FFFF44;
	--marker_red: #FF4444;
	--marker_blue: #4444FF;
	--marker_purple: #FF44FF;
	--marker_cyan: #44FFFF;
}

@font-face {
	font-family: 'pix_font';
    src: url('https://solvent-game.ru/cgi-bin/fonts/pix.ttf');
}
@font-face {
	font-family: 'main_font';
    src: url('https://solvent-game.ru/cgi-bin/fonts/main.otf');
}
@font-face {
	font-family: 'rst_font';
    src: url('https://solvent-game.ru/cgi-bin/fonts/rst.otf');
}
@font-face {
	font-family: 'sqr_font';
    src: url('https://solvent-game.ru/cgi-bin/fonts/sqr.ttf');
}
@font-face {
	font-family: 'dot_font';
    src: url('https://solvent-game.ru/cgi-bin/fonts/dot.ttf');
}

/*Base page styles*/

body {
	background: var(--body-bg);
	color: var(--text-green);
	font-family: 'main_font';
}

.body_bg {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) , rgba(34, 34, 34, 1) ), url('https://solvent-game.ru/IMG/MISC/BACKGROUND.jpg');
	top:0;
	left:0;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

.body_div {
	overflow:scroll;
	position:absolute;
	bottom:0;
	margin-right: -50%;
	overflow:hidden;
	background-color: var(--body-bg);
	padding: 10px;
	border-width: 5px;
	border-style: solid;
	border-image: linear-gradient(to bottom,  var(--text-green), rgba(0, 0, 0, 0) ) 10 stretch;
}
.page_header {
    position: absolute;
    left: 50px;
    bottom: 90%;
    height: 30px;
	transform:translate(0, -30px);
    font-size: 2vw; 
    font-weight: bold;
    padding: 10px;
    text-align: left;
    background-color: var(--text-green);
    color: black;
    font-family: 'pix_font';
    font-size: 250%;
    font-weight: 900;
    mix-blend-mode: screen;
}


/*Text styles*/
.pix_font {
	font-family: 'pix_font';
	font-size: 200%;
}

.title1 {
	font-family: 'rst_font';
	font-size: 200%;
}

.header {
	display: block;
	font-family: 'sqr_font';
	font-size: 100%;
	font-weight: 900;
	color: #0F7;
	text-shadow: 0px 0px 50px #09F;
}

.text_lvl1{
	color: var(--marker_green);
	text-shadow: 0px 0px 10px #00FF00;
}

.text_lvl2{
	color:  var(--marker_yellow);
	text-shadow: 0px 0px 10px #FFFF00;
}

.text_lvl3{
	color:  var(--marker_red);
	text-shadow: 0px 0px 10px #FF0000;
}

.text_lvl4{
	color:  var(--marker_blue);
	text-shadow: 0px 0px 10px #0000FF;
}

.text_lvl5{
	color:  var(--marker_purple);
	text-shadow: 0px 0px 10px #FF00FF;
}

.text_lvl6{
	color:  var(--marker_cyan);
	text-shadow: 0px 0px 10px #00FFFF;
}

.text_info {
	color: var(--text-info);
} 

.text_desc {
	color: var(--text-desc);
	font-size: 90%;
} 

.text_small_desc {
	color: var(--text-desc);
	font-size: 75%;
}

.text_highlight1 {
	/* nothing */
}

.text_highlight:hover {
	background-color: var(--text-green2);
}

.text_editable {
	color:#FFFF00;
	text-shadow: 0px 0px 10px #000000;
	background-color: var(--bg-green);
}

/*switch tabs*/
.tab {
	border: none;
	width: 100%;
	border-collapse: collapse;
	margin-top:5px;
}
.tab_body {
	vertical-align: top;
	width: 100%;
}
.tab_head {
	vertical-align: bottom;
	display: table-row;
	width: 100%;
}
.tab_off {
	padding: 2px;
	margin: 0px;
	vertical-align: top;
	height: 35px;
	border-top: solid 2px var(--border-green);
	border-left: solid 2px var(--border-green);
	border-right: solid 2px var(--border-green);
	border-bottom: solid 4px var(--border-green);
	color: var(--text-green);
	display: table-cell;
}
.tab_off:hover {
	background-color: var(--bg-green2);
	text-shadow: 0px 0px 10px #00FF00;
}
.tab_on {
	padding: 2px;
	margin: 0px;
	vertical-align: top;
	height: 35px;
	border-top: solid 2px var(--border-green);
	border-left: solid 2px var(--border-green);
	border-right: solid 2px var(--border-green);
	border-bottom: none;
	display: table-cell;
}
.tab_on:hover {
	text-shadow: 0px 0px 10px #00FF00;
}
.tab_btw {
	padding: 2px;
	margin: 0px;
	width: 20px;
	height: 35px;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: solid 4px var(--border-green);
	display: table-cell;
}
.tab_btw_L {
	padding: 2px;
	margin: 0px;
	width: 100%;
	height: 35px;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: solid 4px var(--border-green);
	display: table-cell;
}

/*border styles*/

.table0 {
	border: solid 1px var(--text-green);
	border-collapse: collapse;
}
.table0 td {
	border: solid 1px var(--text-green2);
	border-collapse: collapse;
}

.table1 {
	border: double 4px var(--border-green);
	border-collapse: collapse;
}
.table1 td {
	border: double 4px var(--border-green);
	border-collapse: collapse;
	padding: 2;
}

.table2 {
	border: solid 1px var(--border-green2);
	border-collapse: collapse;
}
.table2 td {
	border: solid 1px var(--border-green2);
	border-collapse: collapse;
	padding: 2;
}

.table3 {
	border: solid 2px var(--border-green2);
	border-collapse: collapse;
}
.table3 td {
	border: none;
	border-collapse: collapse;
	margin:0;
	padding:0;
}

/* Tooltips */
.tltp_cnt { /*tooltip container*/
	position: relative;
}
/* Tooltip text */
.tltp_cnt .tooltiptext {
  position: relative;
  z-index: 1;
  visibility: hidden;
  width: 225px;
  background-color: var(--bg-black);
  color: var(--text-green);
  opacity: 0.66 ;
  text-align: left;
  padding: 5px;
  border: solid 2px var(--border-green);
  border-radius: 6px;
  bottom: 50%;
  left: 10%; 
}
/* Show the tooltip text when you mouse over the tooltip container */
.tltp_cnt:hover .tooltiptext {
  visibility: visible;
}
.tltp_cnt:active .tooltiptext {
  visibility: hidden;
  width: 0px;
  height: 0px;
}

/*base objects*/
.cell {
	width: 25px; 
	height: 25px;  
	border: solid 1px var(--border-green);
	padding: 5px;
	background-color: var(--bg-green);
	font-size: 100%;
}

.item {
 /* position: relative;
  display: inline-block;*/
  width: 25px; 
  height: 25px;
  border: 1px var(--border-green); /* If you want dots under the hoverable text */
  border-radius: 5px;
}

/*Control elements*/
.ctrl_pan_div {
	border: solid 1px;
	border-radius: 5px;
	padding: 2px;
	margin: 2px;
	background-color: var(--bg-green);
	color: var(--text-green);
	text-align: left;
	/*display: block;*/
}

.ctrl_pan_block {
	border: solid 1px;
	border-radius: 5px;
	padding: 2px;
	margin: 2px;
	/*height: 150px;*/
	color: var(--text-green);
	text-align: left;
	display: inline-block;
	opacity: 0.66 ;
}

.menu_div {
	border: solid 1px;
	border-radius: 5px;
	padding: 3px;
	margin: 3px;
/*	height: 30px;*/
	background-color: var(--bg-green);
	color: var(--text-green);
	text-align: center;
	display: inline-block;
	box-shadow: 3px 3px 10px 5px black;
	margin-top:3px;
	margin-bottom:7px;
	margin-left:2px;
	margin-right:8px;
}
.menu_div:hover {
	background-color: var(--bg-green2);
	text-shadow: 0 0 10px #00FF00;
}
.menu_div:active {
	color: var(--bg-green);
	background-color: var(--text-green);
	text-shadow: 0 0 10px  #FFFFFF;
	box-shadow: 1px 1px 3px 2px black;
	margin-top:7px;
	margin-bottom:2px;
	margin-left:5px;
	margin-right:5px;
}

.control_div {
	border: solid 1px;
	border-radius: 5px;
	background-color: var(--bg-green);
	color: var(--text-green);
	text-align: center;
	box-shadow: 3px 3px 10px 5px black;
	margin-top:3px;
	margin-bottom:7px;
	margin-left:2px;
	margin-right:8px;
}
.control_div:hover {
	background-color: var(--bg-green2);
	text-shadow: 0 0 10px #00FF00;
}
.control_div:active {
	color: var(--bg-green);
	background-color: var(--text-green);
	text-shadow: 0 0 10px  #FFFFFF;
	box-shadow: 1px 1px 3px 2px black;
	margin-top:7px;
	margin-bottom:2px;
	margin-left:5px;
	margin-right:5px;
}

	/*border-image: linear-gradient(-45deg, var(--text-green3),  var(--text-green)) 2;*/

.stndrd_block {
	border: solid 1px var(--text-green);
	border-radius: 5px;
}

.stndrd_block2 {
	border: none;
	background-color: var(--bg-green);
	border: solid 1px var(--text-green3);
	border-radius: 10px;
}

.stndrd_block_3d1 {
	border: solid 3px var(--border-grey);
	border-radius: 10px;
	background-color: rgba(60,60,60,0.5);/*var(--bg-grey);*/
	backdrop-filter: blur(5px);
/*	background-color:var(--bg-grey);*/
	box-shadow: 3px 3px 10px 5px black, 0 0 30px 5px var(--border-grey) inset;
}

.stndrd_block_3d2 {
	border: solid 1px var(--border-grey);
	border-radius: 5px;
	background-color: rgba(40,40,40,0.5);/*var(--bg-grey);*/
	backdrop-filter: blur(5px);
	/*background-color: var(--body-bg);*/
	box-shadow: 2px 2px 10px 5px black inset, 0 0 30px 5px var(--border-grey);
}

.stndrd_block_line {
	display:inline-block;
	border: solid 1px var(--text-green);
	border-radius: 5px;
}


/*Custom buildin elements*/

/*scroll-bar*/
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color:var(--text-green2);
}
::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-corner { 
    background: rgba(0,0,0,0.0); 
}
::-webkit-resizer {
    /*border: solid 1px var(--text-green2);*/
    background: linear-gradient(-45deg, var(--text-green) 25%, var(--text-green) 40%, rgba(0,0,0,0.0) 60%);
}

/*inputs*/
input[type=text], input[type=number], input[type=password], input[type=search], input, datalist, select {
  margin: 2px;
  border: solid 2px var(--border-green);
  height: 30px;
  width: 170px;
  border-radius: 6px;
  background-color: var(--bg-green);
  color: var(--text-green);
/*  font-family: 'pix_font';
  font-size: 80%;*/
}
input[type=text]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input:focus {
  background-color: var(--bg-black);
}

textarea {
  margin: 2px;
  border: solid 2px var(--border-green);
  border-radius: 6px;
  background-color: var(--bg-green);
  color: var(--text-green);
/*  font-family: 'pix_font';
  font-size: 80%;*/
}
textarea:focus {
  background-color: var(--bg-black);
}

input[type=button], input[type=submit], input[type=reset], button {
  margin: 2px;
  border: solid 3px var(--border-green3);
  height: 30px;
  width: 150px;
  border-radius: 6px;
  background-color: var(--bg-green3);
  color: var(--text-green2);
  box-shadow: 0 0 30px 5px var(--border-green) inset;
  /*font-family: 'pix_font';*/
  /*font-size: 80%;*/
}
input[type=button]:focus, input[type=submit]:focus, input[type=reset]:focus, button:focus {
  background-color: var(--text-green2);
  border: solid 3px var(--bg-black);
  color: var(--bg-black);
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover {
  border: solid 3px var(--text-green);
  color: var(--text-green);
}
input[type=button]:disabled, input[type=submit]:disabled, input[type=reset]:disabled, button:disabled {
  border: solid 3px var(--border-grey);
  color: var(--border-grey);
}


/* Бегунок */
input[type=range] {
  -webkit-appearance: none;
  /*width: 100%;*/
  margin: 5px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #007f44;
  /*border-radius: 10px;*/
  border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 4.1px solid #00ff7f;
  height: 20px;
  width: 15px;
  border-radius: 10px;
  background: #007f44;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #00bc65;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #007f44;
  /*border-radius: 10px;*/
  border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 4.1px solid #00ff7f;
  height: 20px;
  width: 15px;
  /*border-radius: 5px;*/
  background: #007f44;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #004223;
  border: 0px solid #010101;
  /*border-radius: 20px;*/
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #007f44;
  border: 0px solid #010101;
  /*border-radius: 20px;*/
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 4.1px solid #00ff7f;
  height: 20px;
  width: 15px;
  /*border-radius: 5px;*/
  background: #007f44;
  cursor: pointer;
  height: 10px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #007f44;
}
input[type=range]:focus::-ms-fill-upper {
  background: #00bc65;
}


/*CUSTOM CHECKBOX*/

.chb_container {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  cursor: pointer;
  /*font-size: 22px;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default checkbox */
.chb_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */
.chb_checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  border: solid 1px var(--text-green);
  background-color: var(--body-bg);
}
/* On mouse-over, add a grey background color */
.chb_container:hover input ~ .chb_checkmark {
  background-color: black;
}
/* When the checkbox is checked, add a blue background */
.chb_container input:checked ~ .chb_checkmark {
  background-color: var(--text-green);
}
/* Create the checkmark/indicator (hidden when not checked) */
.chb_checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.chb_container input:checked ~ .chb_checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.chb_container .chb_checkmark:after {
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}