body{
		height:100%;
		/*overflow-x: hidden;
		overflow-y: hidden;*/
	}
	label{
		/*color:#d10303;*/
		font-size:15px;
		font: 400 13.3333px Arial;
	}
	.colorFliping {
		/*background-color: red;*/
		-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
		-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
		animation-name: example;
		animation-duration: 4s;
		animation-iteration-count: infinite;
	}
	.comment{
		border: 0px;
		position: relative;
		background:transparent;
		height:20px;
		width:100%;
		font-size:15px;
		/*color:#d10303;*/
		top:5px;
	}

	/* Safari 4.0 - 8.0 */
	@-webkit-keyframes example {
		0%   {background-color: violate;}
		15%  {background-color: indigo;}
		30%  {background-color: blue;}
		45% {background-color: green;}
		60% {background-color: yellow;}
		80% {background-color: orange;}
		100% {background-color: red;}
	}

	/* Standard syntax */
	@keyframes example {
		0%   {background-color: violate;}
		15%  {background-color: indigo;}
		30%  {background-color: blue;}
		45% {background-color: green;}
		60% {background-color: yellow;}
		80% {background-color: orange;}
		100% {background-color: red;}
	}
	
	/* do not group these rules */
	input::-webkit-input-placeholder {
		color: gray;
	}
	input*:-moz-placeholder {
		/* FF 4-18 */
		color: gray;
	}
	input*::-moz-placeholder {
		/* FF 19+ */
		color: gray;
	}
	input:-ms-input-placeholder {
		/* IE 10+ */
		color: gray;
	}
	
	
	
	
	a { position:relative;left:10px;color: blue; font-size: 17px;}
	a:hover {  position:relative;left:10px;text-decoration: underline;font-size: 17px; }
	a:active {  position:relative;left:10px;color: red;font-size: 18px; }
	
	.stmt{
		position:relative;
		font-size:17px;
		left:10px;
		/*color:#d10303;*/
	}
	.degree{
		position:relative;
		font-size:9px;
		top:-5px;
	}
	.headerSection{
		position:fixed;
	}
	.head_1{
		width: 1540px;
		height: 28px;
	}
	
	.head_logo{
		width:20px;
		height:20px;
		border-radius:20px 20px 20px 20px;
		border:2px solid;
		margin-bottom:2px;
	}
	
	#header_logo:after{
		position:relative;
		content: '\205D';
		font-size:20px;
		font-weight:1000;
		left:6.2px;
		top:-1.5px;
	}
	#header_play:after{
		position:relative;
		content: '\25B7';
		font-size:15px;
		font-weight:1000;
		left:3.5px;
		top:1px;
		border:2px;
	}
	#header_import{
		-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	#header_import:after{
		position:relative;
		content: '\21b7';
		font-size:20px;
		font-weight:1000;
		left:2px;
		border:2px;
	}
	#header_export:after{
		position:relative;
		content: '\21b7';
		font-size:20px;
		font-weight:1000;
		left:2px;
		border:2px;
	}
	#header_clear:after{
		position:relative;
		content: '\267A';
		font-size:18px;
		font-weight:1000;
		left:2px;
		border:2px;
		top:-3px;
	}
	
	.head_filter_cls{
		color:#fff;
		width: 98%;
		height:350px;
		position:relative;
		border:1px solid;
	}
	
	marquee{
		position:relative;
		top:3px;
		font-size: 20px;
		font-family:raleway;
	}
	
	#myCanvas{
		border:3px solid;/* #d10303;*/
	}
	.canvasLayer{
		position:absolute;
		border:3px solid;/* #d10303;*/
		top:2px;
		left:2px;
	}
	
	.leftPanel{
		position:fixed;
		left:30px;
		top:2px;
		background-color: #f0f0f0;
		width:368px;
		height:95%;
		display:none;
	}
	
	#animationSpeed, #zoomSpeed, #thicknessSpeed, #noOfDots{
		color:#000;
		width: 200px;
		height:10px;
		position:relative;
		left:20px;
	}
	
	.paramLabel{
		border:0px;
		background:transparent; 
		position:relative;
		left:20px;
	}
	.paramWidth{
		width:200px;
		top:10px;
	}
	
	.paramTop{
		top:-5px;
	}
	
	.lavelLT{
	}

	div#drawingCtrlPanel{
		height:490px;
		float:left;
		overflow-y: auto;
		width:100%;
	}
	.responsiveH{
		height:600px;
	}
	
	/* For chrome browser */
	@supports (-webkit-appearance:none) {   
		.head_logo{
			/*position:fixed;*/
			width:20px;
			height:20px;
			border-radius:20px 20px 20px 20px;
			border:2px solid;
			margin-bottom:2px;
		}
	
		.paramTop{
			top:3px;
		}
		
		.lavelLT{
			left:222px;
			top:-12px;
		}
		
		div#drawingCtrlPanel{
			height:400px;
			float:left;
			overflow-y: auto;
			width:100%;
		}
		
		#animationSpeed, #zoomSpeed, #thicknessSpeed, #noOfDots{
			color:#000;
			width: 200px;
			height:5px;
			position:relative;
			left:20px;
		}
	
		.slider {
			-webkit-appearance: none;
			width: 100%;
			height: 10px;
			border-radius: 5px;   
			background: #d3d3d3;
			outline: none;
			opacity: 0.7;
			-webkit-transition: .2s;
			transition: opacity .2s;
		}

		.slider::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			width: 15px;
			height: 15px;
			border-radius: 50%; 
			/*background-color: #d10303;*/
			cursor: pointer;
		}
	}
	


	
	#zoomControl, #animationSpeedControl, #gridColor, #lineColor, #dotsControl, #thicknessControl{
		height: 30px;
	}
	#animateSBS, #animateSPU{
		position:relative;
		height: 30px;
		top:10px;
		display:inline-flex;
	}
	
	.gridColor{
		top: 10px;
		position: relative;
		height: 10px;
		width: 10px;
		border: 1px solid black;
		right:1px;
	}
	
	#gridColorCode, #lineColorCode{
		top:10px;
		left: 50px;
	}
	#ifAnimateSBS, #ifSpeakUp{
		position:relative;
		top:-10px;
		left: 224px;
	}
	.head_cls{
		position:relative;
		width:98%;
		height:25px;
		/*background:#d10303;*/
		color: #fff;
		font-family:raleway;
		margin:1px 1px 1px 1px;
	}
	.head_prompt{
		width:100%; 
		margin:0px 0px 0px 0px;
	}
	.insideHead{ 
		top:3px; 
		left:5px;
		position:relative;
	}
	
	#rCtrlPanel, #lineCtrlPanel, #selectFunctionPanel, #searchPanel, #ctrlDisplay{
		height:85%;
	/*	background-color: rgba(10, 20, 30, 0.01);
		color:white;*/
	}
	
	.filterButton{
		top:2px;
		width:30%;
		left:2px;
		position:relative;
		text-decoration:none;
		text-align:center;
		background:transparent;
		/*color:#d10303;*/
		border:2px solid;/* #d10303;*/
		padding:7px 0;
		font-size:15px;
		cursor:pointer;
		border-radius:5px;
		font-family:sans-serif;
	}
	
	.paramBtn{
		top:30px;
	}
	
	
	hr{
		border-top:2px solid;/* #d10303;*/
	}
	
	img#addRow, img.addImgRow {
		margin-top:0px;
		margin-left:-1px;
		max-width: 20px;
		min-width: 20px;
		border:2px solid;/* #d10303;*/
		position:relative;
		cursor:pointer;
		border-radius:15px;
	}
	
	img.addRow {
		margin:1px 1px 1px 1px;
		max-width: 18px;
		min-width: 18px;
		border:2px solid;/* #d10303;*/
		position:relative;
		cursor:pointer;
		border-radius:15px;
		top:-2px;
		left:40px;
	}
	
	.tdltRow{
		position:relative;
		/*width:330px;*/
		width:100%;
		/*height:60px;
		border:1px solid blue;*/
	}
	.tdrtRow{
		poition:relative;
		/*width:30px;*/
		width:0px;
	}
	.trTopRow{
		display: block;
		border-bottom: 2px solid;/* #d10303;*/
		/*border: 1px solid black;*/
	}
	
	.genCtrl{
		border-left: 0px;
		border-right: 0px;
		border-top: 0px;
		border-bottom: 1px solid;/* #d10303;*/
		position: relative;
		background:transparent;
		height:20px;
		font-size:15px;
		/*color:#d10303;*/
	}
	
	.fxCtrl{
		border-left: 0px;
		border-right: 0px;
		border-top: 0px;
		border-bottom: 2px solid;/* #d10303;*/
		position: relative;
		background:transparent;
		height:20px;
		font-size:15px;
		/*color:#d10303;*/
		top:-8px;
		width:46%;
	}
	.genPos{
		position:relative;
		top:-5px;/*-10px*/
		left:0px;
	}
	
	.txtInput{
		width:50px;
	}
	.degInput{
		width:30px;
		text-align:center;
	}
	.selInput{
		width:70px;
		top:2px;
	}
	
	.txtDescription{
		position:relative;
		top:-5px;/*-10px*/
		left:20px;
		width:150px;
	}
	
	table#drawingUtensils{
		width:100%;
	}
	
	div#filterPanel{
		position:relative;
		top:10px;
		left:5px;
	}
	div#displayPanel{
		position:relative;
		top:20px;
		left:5px;
		width:350px;
		height:70%;
		border: 2px solid;/* #d10303;*/
	}
	
	div#popUpProp, div#popUpPropDwn, div#saveToDB{
		position:absolute;
		top:10%;
		left:25%; 
		width:500px;
		height:400px;
		border:2px solid;/* #d10303;*/
		display:none;
		border-radius:15px;
		opacity:0.2;
		/*background-color:#d3d3d3;*/
	}
	div#propHeader{
		position:relative;
		width:500px; 
		height:40px;
		border-radius:12px 12px 0px 0px;
		/*background-color:#d10303;*/
		font-size:30px;
		color:#FFF;
		text-align:center;
		opacity:0.75;
	}
	div#propFooter{
		position:relative;
		width:500px; 
		height:40px;
		border-radius:0px 0px 12px 12px;
		/*background-color:#d10303;*/
		text-align:center;
		opacity:0.75;
	}
	.propButton{
		top:5px;
		position:relative;
		border: 1px solid;/* #d3d3d3;*/
		border-radius:5px 5px 5px 5px;
		height:30px;
		width:75px;
		font-size:15px;
		/*color:#d3d3d3;*/
		background:transparent;
		margin: 1px 1px 1px 1px;
		border-color:#FFF;
		color:#FFF;
	}
	.strongButton{
		color:#FFF;
		border:0px;
		background:darkorange;
	}
	#xmlPath, #xmlPathDwn{
		position:relative;
		top:10px;
		left:10px;
		width:480px;
		height:22px;
	}
	#xmlData{
		position:relative;
		top:20px;
		left:10px;
		width:475px;
		height:260px;
		/*background-color:#d3d3d3;	*/
		border: 1px solid gray;		
	}
	#xmlDataDwn{
		position:relative;
		top:7px;
		left:7px;
		width:480px;
		height:300px;
		/*background-color:#d3d3d3;	*/
		border: 1px solid gray;		
	}
	div#cellIndicator{
		position:absolute;
		top:0px;
		left:0px;
		width:75px;
		height:20px;
		background-color:transparent;
		/*color:#d10303;*/	
		font-size:15px;
		display:none;
	}
	
	div.checkBoxContainer{
		/*color:#d10303;*/
		font: 400 15px Arial;
		display:inline-flex;
	}
	
	.errStyle{
		position:relative;
		top:5px;
		width:100%;
		font-weight:1000;
		text-align:center;
	}
	
	/*
	Check box and radio button css
	*/
	/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 22px;
  padding-right: 13px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide thebrowser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarkC {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: transparent;
  border: 1px solid;
}



/* When thecheckbox is checked, add a red background */
.container input:checked ~.checkmarkC {
 /* background-color: #d10303;
  border: 2px solid #FFF;
  */
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkC:after {
  content: "";
  position: absolute;
  display: none;
}



/* Style the checkmark/indicator */
.container .checkmarkC:after, .container .checkmarkR:after {
  top:-14px;
  left:2px;
  /*color:#d10303;*/
  content:'\2713';
  font-size:25px;
} 

/* The container for radio button*/

/* Create a custom radio button */
.checkmarkR {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid;
}

/* On mouse-over, add a grey background color */
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmarkR, .container:hover input ~ .checkmarkC {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmarkR {
  background-color: transparent;
  border: 1px solid;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmarkR:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
/* Show the checkmark when checked */
.container input:checked ~ .checkmarkR:after, .container input:checked ~ .checkmarkC:after  {
  display: block;
}

/* Style the indicator (dot/circle) */
/*
.container .checkmarkR:after {
 	top: 3px;
	left: 3px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #FFF;
}
*/

/* CSS for buttons */


/*********************************/
div.btn{
	width:24px;
	height:24px;
	background-color:transparent;
	border: 2px solid;
	border-radius:15px;
}
.playA {
	position:relative;
	top:3px;
	left:7px;
	box-sizing: border-box;
    border-top: 8px solid transparent;
    border-left: 12px solid #d10303;
    border-bottom: 8px solid transparent; 
}
.playA:hover{
	border-top: 8px solid transparent;
    border-left: 12px solid #ccc;
    border-bottom: 8px solid transparent;
}
.playB:after {
	position:relative;
	left:3px;
    content: '\25BA';
	font-size:21px;
	/*color:#d10303;*/
	font-weight:1000; 
}
.playC:after {
	position:relative;
	left:3px;
    content: '\25BA';
	font-size:15px;
	/*color:#d10303;*/
	font-weight:1000; 
}

.pause {
	position:relative;
	top:4.5px;
	left:5.5px;
	width: 4px;
    height: 14px;
    border-right: 4px solid #d10303;
    border-left: 4px solid #d10303;
}
.pause:hover{
	border-right: 4px solid #ccc;
    border-left: 4px solid #ccc;
}
.plus:after{
	position:relative;
	top:-6px;
	left:1px;
    content: '\271A';/*;'\002B'*/
	font-size:25px;
	/*color:#d10303;*/
}
.close:after{
	position:relative;
	top:-7px;
	left:1.5px;
    content: '\2718';/*;'\271A'*/
	font-size:25px;
	/*color:#d10303;*/
}
.closeB:after{
	position:relative;
	left:3px;
    content: '\2716';/*;'\271A'*/
	font-size:13px;
	/*color:#d10303;*/
	font-weight:1000;
}


.upload{
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}
.upload:after{
	position:relative;
	top:9px;
    content: '\21b7';/*;'\21B6'*/
	font-size:30px;
	/*color:#d10303;*/
	font-weight:1000;
}

.download:after{
	position:relative;
	top:-3px;
    content: '\21b7';/*;'\21B6'*/
	font-size:30px;
	/*color:#d10303;*/
	font-weight:1000;
}

.save:after{
	position:relative;
	top:-2px;
    content: '\225A';/*;'\2711'*/
	font-size:25px;
	/*color:#d10303;*/
	left:2.5px;
	font-weight:1000;
}

.clear:after{
	position:relative;
	top:-7px;
    content: '\267A';/*;'\267B'*/
	font-size:23px;
	/*color:#d10303;*/
	left:1px;
	font-weight:1000;
}

.info:after{
	position:relative;
    content: 'i';/*;'\2757'*/
	font-size:16px;
	/*color:#d10303;*/
	left:6px;
	font-weight:1000;
}