html{
	font-family:Arial,Helvetica;
	color:#4e6470;
}
body{
	background:#e9f0f4;
}

#xyz{
    overflow: hidden;
    height: 80%;
    width: 96%;
    border: 1px solid #ccc;
    position: fixed;
    background: #d0e1eb;
}
#xyz p{
    position: absolute;
    top: 0;
    left: 0;
    background: #4b940b;
    padding: .2em 1em;
    border-radius: 1em;
    margin: 0;
}
#xyz a{
	color:#fff;
	text-decoration:none;
}
svg{
	height:inherit;
}
#men{
	position:absolute;
	right:0;
	top:0;
	padding:1em;
}
#men a,
#minimize,
.closeBtn{
	cursor:pointer;
}
#DATA{
	border: 1px solid #ccc;
    background: #fff;
    padding: 0em 1.7em;
    display: inline-block;
    margin-bottom: 10px;
	position:absolute;
	top:0;
	z-index:9;
	height:90%;
	overflow:auto;
}
#DATA table{
	background:#ccc;
}
#DATA td{
	background:#fff;
	padding:.3em;
}
pre{
	font-size: 1.1em;
}
h2{    
	font-size: 1em;
	color: blue;
}
hr{
	border:.4px solid #ccc;
}
input[type="submit"],
#subm{
    padding: .2em .4em;
    background: #8b959b;
    color: #fff;
    border-radius: .4em;
	border: none;
    font-size: 1em;
}
input[type="submit"]{
	margin-left:.5em;
}
#mainMenu a.close,
.closeBtn,
#minimize{
	background: red;
    border-radius: 100%;
    box-sizing: border-box;
    color: #fff;
    display: block;
    float: right;
    font-size: 1.4em;
    height: 30px;
    margin: -20px -20px 0 10px;
    text-align: center;
    width: 30px;
}
.closeBtn{
	margin-top:.5em;
}
#minimize span.open{
	display:none;
	font-size: 1.6em;
    margin: -4px 0 0 1px;
}
[data-menu="1"] #mainMenu a.close,
.hidden #minimize span.open{
	display:block;
}
[data-menu="1"] #mainMenu a.close:after{
	content:'X';
    font-weight: bold;
    line-height: 1.3em;
}
#mainMenu a.close,
.hidden #minimize span.close{
		display:none;
}
.hidden #minimize{
    margin: -16px -16px 0 0;
    width: 33px;
    border-radius: 0;
    height: 33px;
    background: #4b940b;
}
#form{
    background:rgba(255, 255, 255, 0.84);
    border-radius: .5em;
    padding: 1em;
    position: absolute;
    top: 10px;
    right: 69px;
	-webkit-box-shadow: 10px 4px 18px -6px rgba(0,0,0,0.31);
	-moz-box-shadow: 10px 4px 18px -6px rgba(0,0,0,0.31);
	box-shadow: 10px 4px 18px -6px rgba(0,0,0,0.31);
	max-width:500px;
}
#form.hidden{
	width:0;
	height:0;
	overflow:hidden;
}
.hidden form{
	display:none;
}
label{
	margin-right:10px;
}
em,
label.w1{
	display:inline-block;
}
label.w1{
		width:60px;
}
em{
	font-style:normal;
	color:#009fff;
	width:60px;
}
select{
	font-size:1.1em;
}
#f1,#f2,.rs,.f1{
    width: 50px;
    text-align: center;
    margin: 0 5px 0 0;
    height: 20px;
}
.rs{
	width:50px;
}
.checkbox,
#buttonadd,
#buttonminus{
    width: 22px;
    height: 22px;
    background: #009fff;
    margin: 0 5px 0 5px;
    border: none;
    display: block;
    color: #fff;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid #009fff;
    float: left;
	font-size: 1.5em;
    line-height: 1em;
}
#buttonadd,
#buttonminus{
	float:right;
}
#buttonminus{
	line-height:.8em;
}
.checkbox {
    font-size: 1.1em;
    line-height: 1.4em;
}
#subm{cursor:pointer;}
.checkbox.off{
	background: #fff;
	border:1px solid #ccc;
}
.checkbox.off span{
	display:none;
}
div.CB{
    float: left;
    width: 33%;
    margin-top: .5em;
	cursor:pointer;
}

#form p{
	margin: .9em 0 0 0;
    border-top: 1px solid #ccc;
    padding: .3em;
    font-size: .7em;
    color: #aaa;
}
#newFileName{
	padding: .3em .7em;
    width: 60%;
    color: blue;
}
#men a{
    background: #a1bece;
    padding: .2em .4em;
    color: #fff;
    border-radius: .3em;
    text-decoration: none;
    margin: .05em;
    display: inline-block;
}
#men a.active{background:#009fff;}
.clear{clear:both;}

/**	--------------------------------------------- max 500 ---------------------------------- */
@media (max-width: 500px) {
	#download,
	#men{
		display:none;
	}
	#form{
		right:5px;
	}
	div.CB{
		width:50%;
		font-size:1.2em;
	}
	.checkbox {
		font-size:1em;
	}
	input[name=searchball]{
		font-size:1.2em;
	}
}