:root {
  --BaseItemColor: #E3F2FA;
  --BaseFontColor: #15435d;
  --BaseShadowColor: #F8F8F9;
  --BaseContentColor: #F4FCFF;
  --BaseButtonColor: #DAEDF7;
  --BoxShadowColor: #6BB0D5;
}

body, html {
	margin: 0px 0px 0px 0px;
	font-family: Arial;
	font-weight: normal;
	font-style: normal;
	font-size: 18px;
	color: var(--BaseFontColor);
	min-height: 45vw;
}

hr {
	width:95%;
	height: 1px;
	border-width: 0;
	color: gray;
	background-color: gray;
}

a {
	text-decoration: none;
	cursor: pointer;
	color: var(--BaseFontColor);
}
a:hover {
	color: var(--BoxShadowColor);
}

#MainLogo{
	width: 300px;
	max-width: 45vw;
	height: auto;
	border: 0;
}

#MainContainer{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 0;
}

#TopContainer{
	position: relative;
	width: 90%;
	margin: 0 auto;
	z-index: 3;
}

#ToolsContainer{
	position: relative;
	display: none; /* block */
	width: 98%;
	margin: 0 auto;
	z-index: 2;
	font-size: 20px;
	text-align: center;
}

#MainContent{
	max-height: 75vh;
	position: relative;
	display: block; /* block */
	margin: 0 auto;
	padding: 10px;
	width: 500px;
	/*width: 50vw;*/
	min-width: 50vw;
	max-width: 93vw;
	z-index: 2;
	overflow-y:auto;

	word-wrap: break-word;
	/*overflow-wrap: break-word;*/

	background-color: var(--BaseContentColor);
	border: 1px solid black;
	box-shadow: 0px 1px 5px 0px var(--BoxShadowColor);
}

#MainContentBar{
	top: 0;
	position: -webkit-sticky;
	position: sticky;
	display: none; /* flex, inline-block */
	width: 100%;
	margin: 0 auto;
	z-index: 12;
	text-align: right;
	justify-content: flex-end;
}
#ContentBurger{
	display: none; /* inline-block */
	z-index: 13;
	padding: 5px;
	width: 35px;
	height: 35px;
	max-width: 6vw;
	max-height: 6vw;
	cursor: pointer;
	box-shadow: 0px 0px 3px 3px var(--BaseShadowColor) inset;
	background-color: var(--BaseItemColor);
	border:1px solid black;
}
#ContentBurger:hover {
	opacity: 0.4;
}

#DownloadBurger{
	display: none; /* inline-block */
	z-index: 13;
	padding: 5px;
	width: 35px;
	height: 35px;
	max-width: 6vw;
	max-height: 6vw;
	cursor: pointer;
	box-shadow: 0px 0px 3px 3px var(--BaseShadowColor) inset;
	background-color: var(--BaseItemColor);
	border:1px solid black;
}
#DownloadBurger:hover {
	opacity: 0.4;
}
#GoBackBurger{
	display: none; /* inline-block */
	z-index: 13;
	padding: 5px;
	width: 35px;
	height: 35px;
	max-width: 6vw;
	max-height: 6vw;
	cursor: pointer;
	box-shadow: 0px 0px 3px 3px var(--BaseShadowColor) inset;
	background-color: var(--BaseItemColor);
	border:1px solid black;
}
#GoBackBurger:hover {
	opacity: 0.4;
}

#MenuContainer{
	position: absolute;
	float: right;
	top: 0;
	right: 0;
	z-index: 4;
}
#MenuBurger{
	float:right;
	z-index: 14;
	padding: 5px;
	width: 45px;
	height: 45px;
	max-width: 8vw;
	max-height: 8vw;
	cursor: pointer;
	box-shadow: 0px 1px 5px 0px var(--BoxShadowColor);
	background-color: var(--BaseItemColor);
	border:1px solid black;
}
#MenuTree{
	display: block;
	float:right;
	z-index: 14;
	font-size: 0px;
	border:0;
	min-width: 0;
	width: 0;
	box-shadow: 0px 1px 5px 0px var(--BoxShadowColor);
	transition: .1s linear;
	overflow-y:auto;
	max-height: 85vh;
}

#LangContainer{
	position: absolute;
	float:right;
	top: 2px;
	right: 30px;
	z-index: 13;
}
#LangBurger{
	float:right;
	z-index: 14;
	padding: 5px;
	width: 35px;
	height: 35px;
	max-width: 6vw;
	max-height: 6vw;
	cursor: pointer;
	box-shadow: 0px 1px 5px 0px var(--BoxShadowColor);
	background-color: var(--BaseItemColor);
	border:1px solid black;
}
#LangTree{
	display: block;
	float:right;
	z-index: 14;
	font-size: 0px;
	border:0;
	min-width: 0;
	width: 0;
	box-shadow: 0px 1px 5px 0px var(--BoxShadowColor);
	transition: .1s linear;
}

.TopItem{
	display: inline-block;
	vertical-align: top;
	box-shadow: 0px 1px 5px 0px var(--BoxShadowColor);
	background-color: var(--BaseItemColor);
	border:1px solid black;
	padding: 5px;
	width: 35px;
	height: 35px;
	max-width: 6vw;
	max-height: 6vw;
}

.MenuItem{
	display: inline-block;
	padding: 0;
	vertical-align: top;
	width: 100%;
	box-shadow: 0px 0px 3px 3px var(--BaseShadowColor) inset;
	background-color: var(--BaseItemColor);
}

.ToolsItem{
	display: inline-block;
	padding: 0.3vw;
	vertical-align: top;
	/*box-shadow: 0px 0px 3px 3px var(--BaseShadowColor) inset;*/
	box-shadow: 0px 1px 5px 0px var(--BoxShadowColor);
	background-color: var(--BaseItemColor);
	border:1px solid black;
	height: 24px;
}
.ToolsItem2{
	display: inline-block;
	padding: 6px;
	vertical-align: top;
	box-shadow: 0px 1px 5px 0px var(--BoxShadowColor);
	background-color: var(--BaseContentColor);
	border:1px solid black;
	height: 24px;
}

#ButtonItem{
	box-shadow: 0px 0px 3px 3px var(--BaseShadowColor) inset;
	background-color: var(--BaseButtonColor);
	border:1px solid black;
	padding: 5px;
	width: 90%;
	cursor: pointer;
	text-align: center;
	font-size: 25px;
	margin: auto;
}

#BottomContainer{
	display: none;
	z-index: 2;
	position: absolute;
	bottom: 1vw;
	left: 1vw;
	max-width: 83vw;
	background-color: var(--BaseContentColor);
	box-shadow: 0px 1px 5px 0px var(--BoxShadowColor);
	border: 1px solid black;
	padding: 5px;
	font-size: 16px;
	text-align: center;
}

#BottomContentBar{
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

#BottomContent{
	display: block;
	overflow: hidden;
}

#LoadingContainer{
	display: block;
	z-index: 15;
	position: absolute;
	left: calc(50% - 70px);
	top: calc(50% - 70px);
}

#UpLoadAjaxLoading{
	display: none;
	z-index: 15;
	position: absolute;
	white-space: nowrap;
	background-color: white;
	font-size: 20px;
}

#InternetStatus{
	display: none;
	z-index: 15;
	position: absolute;
	white-space: nowrap;
	font-size: 20px;
	left: calc(50% - 165px);
	top: calc(50% - 200px);
	box-shadow: 0px 1px 5px 0px var(--BoxShadowColor);
	background-color: var(--BaseContentColor);
	border:1px solid black;
	padding: 7px;
}

.IconSmall{
	display: inline-block;
	width: 30px;
	height: 30px;
	max-width: 7vw;
	max-height: 7vw;
	cursor: pointer;
	opacity: 0.7;
	padding: 7px;
}
.IconSmall:hover {
	opacity: 0.4;
}

/************** table **************/
table {
	border-collapse: collapse;
	width: 100%;
	/*word-wrap: break-word;*/
	/*word-break: break-all;*/
}
table tr {
}
table td {
	padding: 3%;
	text-align: center;
	font-size: 16px;
}
table th {
	padding: 4px;
	text-align: center;
	font-size: 17px;
	background-color: var(--BaseItemColor);
}
table input, table select, table textarea {
	width: 90%;
	min-width: 100px;
	font-size: 20px;
	background-color: white;
	background: white;
	border: 1px solid black;
}
table label {
	font-size: 23px;
}
table span {
	font-size: 18px;
}
input[type=datetime-local] {
	max-width: 44vw;
	background-color: white;
	background: white;
	font-size: 15px;
	border: 1px solid black;
}
input[type=checkbox] {
	width: 25px;
	height: 25px;
	min-width: 25px;
	font-size: 25px;
	background-color: white;
	background: white;
	border: 1px solid black;
}