*{
	margin: 0;
	padding: 0;
	/*font-family: AvantGarde;*/
}

/*@font-face {
	font-family: 'AvantGarde';
	src: url('fonts/avantgarde.eot');
	src: local('AvantGarde'), 
	url('fonts/avantgarde.woff') format('woff'), 
	url('fonts/avantgarde.ttf') format('truetype'), 
	url('fonts/avantgarde.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}*/

@font-face {
	font-family: 'Schoolnet5H';
	src: url('fonts/Schoolnet5HN.eot');
	src: /*local('Schoolnet 5H'), */
	url('fonts/Schoolnet5HN.woff') format('woff'), 
	url('fonts/Schoolnet5HN.ttf') format('truetype'), 
	url('fonts/Schoolnet5HN.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'HP0014HN';
	src: url('fonts/HP0014HN.eot');
	src: /*local('HP001 4H'),*/
	url('fonts/HP0014HN.woff') format('woff'), 
	url('fonts/HP0014HN.ttf') format('truetype'), 
	url('fonts/HP0014HN.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'SchoolnetTD';
    src: url('fonts/SchoolnetTD.eot'); /* IE9 Compat Modes */
    src: url('fonts/SchoolnetTD.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/SchoolnetTD.woff') format('woff'), /* Modern Browsers */
         url('fonts/SchoolnetTD.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/SchoolnetTD.svg#SchoolnetTapDo-Normal') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

body{
	width: 100%;
	height: 100%;
	/*background-image: url('../img/bg.jpg');
	background-repeat: no-repeat;
	background-size: 100% 100%;*/
	background-color: #DFF9FE;
	overflow: hidden;
}

#header{
	width:100%;
	height: 10%;
	text-align: center;
}

#main{
	width: 90%;
	height: 85%;
	margin: auto;
	text-align: center;
}

#wrapButton{
	width: 90%;
	height: 100%;
	margin: auto;
	/*border: 1px solid;*/
	
}

#wrapCanvas{
	width: 100%;
	height: 100%;
	border: 1px solid #989E9F;
	overflow-y: auto;
}

#footer{
	width: 100%;
	height: 5%;
}


#NhapDL{
	height: 30px;
	width: 95%;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1.8em;
	text-align: center;
	margin: 0px;
	/*line-height: 50px;*/
	color: #EC1E06;
	text-shadow: 1px 1px #EDE82C;
}


#canvas{
	/*width:1024px;
	height: 100%;*/
	/*border: 1px solid;*/
}

#title{
	float: left;
	height: 76%;
	text-align: center;
}

#title p{
	color: #E6610D;
	text-shadow: 1px 1px 0px #453B45;
	font-weight: bolder;
	font-size: 30pt;
}

#wrapPopup{
	display: none;
	position: fixed;
	width: 90%;
	height: 99%;
	text-align: center;
	top: 0.5%;
	/*left: 5%;*/
	
	background-color: #14741a;
	background: @include filter-gradient(#14741a, #14741a, vertical);
	background: @include background-image(linear-gradient(top, #14741a 0%, #14741a 100%));

	
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	/*overflow-x: hidden ;
	overflow-y: auto;*/
}

#settingText{
	width: 100%;
	height: 45%;
	/*border: 1px solid;*/
}

#inputOption{
	width: 100%;
	height: 70%;
	/*margin-top: 1%;*/
/*	border: 1px solid;*/
}

#contentInput{
	/*display: none;*/
	font-size:1.4em;
	font-family: "Arial";
	width: 94%;
	height: 35%;
	margin: auto;
	overflow-y: auto;
}

#wrapImport{
	width:100%;
	height: 25px;
	margin-top: 5px;
	/*border:1px solid;*/
}

#tipInputText{
	font-size:1.0em;
	color: red;
	font-weight: bold;
	background-color: #ffffff;
}

#wrapBtnInput{
	position: relative;
	width: 100%;
	height: 45px;
	clear: both;
	/*min-height: 40px;
	margin-top: 10px;*/
	/*border: 1px solid;*/
}

.cls-btnInput{
	float: left;
	margin-left: 1%;
	/* top: auto;
	bottom: 5px; */
	width: 10%;
	height: 40px;
	line-height: 40px;
	background-color: #fd5bf9;
	
	-moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
	-webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
	box-shadow: 0px 1px 0px 0px #f0f7fa;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ed34ed), color-stop(1, #d102a8));
	background:-moz-linear-gradient(top, #ed34ed 5%, #d102a8 100%);
	background:-webkit-linear-gradient(top, #ed34ed 5%, #d102a8 100%);
	background:-o-linear-gradient(top, #ed34ed 5%, #d102a8 100%);
	background:-ms-linear-gradient(top, #ed34ed 5%, #d102a8 100%);
	background:linear-gradient(to bottom, #ed34ed 5%, #d102a8 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed34ed', endColorstr='#d102a8',GradientType=0);
	background-color:#ed34ed;
	
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #fafafa;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	/*padding:6px 24px;*/
	font-weight:bold;
}

.cls-btnInput:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f381f3), color-stop(1, #ed34ed));
	background:-moz-linear-gradient(top, #f381f3 5%, #ed34ed 100%);
	background:-webkit-linear-gradient(top, #f381f3 5%, #ed34ed 100%);
	background:-o-linear-gradient(top, #f381f3 5%, #ed34ed 100%);
	background:-ms-linear-gradient(top, #f381f3 5%, #ed34ed 100%);
	background:linear-gradient(to bottom, #f381f3 5%, #ed34ed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f381f3', endColorstr='#ed34ed',GradientType=0);
	background-color:#ed34ed;
}
.cls-btnInput:active {
	bottom:6px;
}

#contentInput{
	margin-top: 10px;
}

.cls-button{
	float: right;
	/*width: 80px;*/
	max-width: 45px;
	max-height: 45px;
	height: 76%;
	margin-left: 5px;
	/*margin-top: 1%;*/

	background-repeat: no-repeat;
	background-size: contain;
	background-position: center right;
}

.cls-button:hover{
	transform: scale(1.1);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
}

#zoomIn{
	background-image: url('../img/bt/btnZoom.png')
}

#zoomOut{
	background-image: url('../img/bt/btnZoomIn2.png');
}

#inputText{
	background-image: url('../img/bt/btnInput.png');
}

#printText{
	background-image:url('../img/bt/btnPr.png');
}

#nextText{
	background-image:url('../img/bt/btnNext.png');
}

#backText{
	background-image:url('../img/bt/btnBack.png');
}

.cls-fieldset{
	width: 30%;
	float: left;
	margin-left: 2%;
	margin-right: 0;
	text-align: center;
}

.cls-fieldset legend{
	font-size: 1.3em;
	margin-left:5px;
	color: #F0F60B;
	font-weight: bold;
}

.cls-fieldset label{
	font-size: 1.3em;
	color: #06E4F5;
	font-weight: bold;
}

.cls-gridSetting{
	width: 22%;
	margin-left: 2%;
	margin-right: 0;
}

#wrapSetText label {
	font-size: 1.3em;
	float: left;
	margin-left: 2%;
	color: #06FBE9;
	font-weight: bold;
}
#wrapSetText select{
	font-size: 1.3em;
	float: left;
	margin-left: 2%;
	color: #0c0f83;
	font-weight: bold;
}
#lblTextAlign{
	clear: left;
	margin-top: 15px;
}

#textAlign{
	margin-top: 15px;
}

#inputOption p{
	font-size: 16pt;
	text-align: left;
	margin-left: 2%;
}

#wrapLinkType,#wrapLinkType input {
	/*width: 100%;
	clear: both;
	text-align: left;
	margin-left: 1%;
	margin-top: 5px;*/
	/*border: 1px solid;*/
	float: left;
	margin-left: 5px;
	margin-top: 10px;
	display: inline;
}


#linkType{
	transform: scale(1.8);
	-webkit-transform: scale(1em);
	display: inline;
	float: left;
	margin-left: 30px;
}

#wrapLinkType{
	margin-left: 50px;
}

#wrapLinkType label{
	font-size: 1.3em;
	margin-left: 15px;
}

#circularG{
	display: none;
	position: fixed;
	width:128px;
	height:128px;
	left: 46%;
	top: 35%;
}

.circularG{
	position:absolute;
	background-color:#ce0fc0;
	width:29px;
	height:29px;
	-moz-border-radius:19px;
	-moz-animation-name:bounce_circularG;
	-moz-animation-duration:0.96s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:linear;
	-webkit-border-radius:19px;
	-webkit-animation-name:bounce_circularG;
	-webkit-animation-duration:0.96s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:linear;
	-o-border-radius:19px;
	-o-animation-name:bounce_circularG;
	-o-animation-duration:0.96s;
	-o-animation-iteration-count:infinite;
	-o-animation-direction:linear;
	-ms-border-radius:19px;
	-ms-animation-name:bounce_circularG;
	-ms-animation-duration:0.96s;
	-ms-animation-iteration-count:infinite;
	-ms-animation-direction:linear;
	border-radius:19px;
	animation-name:bounce_circularG;
	animation-duration:0.96s;
	animation-iteration-count:infinite;
	animation-direction:linear;
}

#circularG_1{
	left:0;
	top:50px;
	-moz-animation-delay:0.36s;
	-webkit-animation-delay:0.36s;
	-o-animation-delay:0.36s;
	-ms-animation-delay:0.36s;
	animation-delay:0.36s;
}

#circularG_2{
	left:14px;
	top:14px;
	-moz-animation-delay:0.48s;
	-webkit-animation-delay:0.48s;
	-o-animation-delay:0.48s;
	-ms-animation-delay:0.48s;
	animation-delay:0.48s;
}

#circularG_3{
top:0;
left:50px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-o-animation-delay:0.6s;
-ms-animation-delay:0.6s;
animation-delay:0.6s;
}

#circularG_4{
right:14px;
top:14px;
-moz-animation-delay:0.72s;
-webkit-animation-delay:0.72s;
-o-animation-delay:0.72s;
-ms-animation-delay:0.72s;
animation-delay:0.72s;
}

#circularG_5{
right:0;
top:50px;
-moz-animation-delay:0.84s;
-webkit-animation-delay:0.84s;
-o-animation-delay:0.84s;
-ms-animation-delay:0.84s;
animation-delay:0.84s;
}

#circularG_6{
right:14px;
bottom:14px;
-moz-animation-delay:0.96s;
-webkit-animation-delay:0.96s;
-o-animation-delay:0.96s;
-ms-animation-delay:0.96s;
animation-delay:0.96s;
}

#circularG_7{
left:50px;
bottom:0;
-moz-animation-delay:1.08s;
-webkit-animation-delay:1.08s;
-o-animation-delay:1.08s;
-ms-animation-delay:1.08s;
animation-delay:1.08s;
}

#circularG_8{
left:14px;
bottom:14px;
-moz-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s;
animation-delay:1.2s;
}

@-moz-keyframes bounce_circularG{
0%{
-moz-transform:scale(1)}

100%{
-moz-transform:scale(.3)}

}

@-webkit-keyframes bounce_circularG{
0%{
-webkit-transform:scale(1)}

100%{
-webkit-transform:scale(.3)}

}

@-o-keyframes bounce_circularG{
0%{
-o-transform:scale(1)}

100%{
-o-transform:scale(.3)}

}

@-ms-keyframes bounce_circularG{
0%{
-ms-transform:scale(1)}

100%{
-ms-transform:scale(.3)}

}

@keyframes bounce_circularG{
0%{
transform:scale(1)}

100%{
transform:scale(.3)}

}

@media screen and (max-width: 1024px) {
  .cls-btnInput{
		height: 30px;
		line-height: 30px;
	}
	
	#wrapSetText option, #wrapSetText select {
		font-size: 12pt;
	}
	
	#linkType label{
		font-size: 14pt;
	}
	
}

/*@page {
  size: A4;
  margin: 0;
}

@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
 
 .cls-title{
 	font-family: 'Schoolnet5H';
 	display: table-header-group;
 }
 
}*/