*{
padding:0;
margin:0;
box-sizing:border-box;
font-family:KG_Primary_Penmanship_2,  MyriadPro-Regular;
 

}
body
{
	background-color:#022a42;
    overflow: hidden;
	
	-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#container
{
position:relative;
width:100%;
height:428px;
opacity:0;
top:-90px;
  
 
  
}
#line
{
width:100%;
}
#startpt, #endpt
{

width:50px;
height:50px;
position:absolute;


}
#showAns
{
	    margin-left: 22px;
     
    vertical-align: top;
    margin-top: 25px;
    float: left;
}
 
#linebar
{
width:100%;
height:100px;

position:absolute;
top:300px;
left:0px;
z-index:1;

}
.bar
{
border-left:2px solid;
height:80px;
display: inline-block;
position:absolute;
color:white;
top:-15px;
cursor:pointer;
width:30px;
z-index:10;
}
.bartxt
{
display: table;
position:absolute;
top:76px;
color:white;
font-family:KG_Primary_Penmanship_2;
font-size:25px;
text-align:center;
 
}

#dragLeft, #dragRight, #dragLeft1, #dragRight1
{
width:20px;
height:20px;
display:inline-block;
position: absolute;
 
z-index:1;
top:315px;
 
}
#dragInnerBar, #dragInnerBar1
{
     display: inline-block;
    width: 100%;
    height: 50px;
    background: #dacb08;
    position: absolute;
    opacity: 1;
    left: 25px;
    top: 300px;

}

#dragbar
{
    position: relative;
    width: 255px;
    left: 25px;
    height: 200px;
    display: inline-block;
    z-index:1;
    /* overflow:hidden; */
    top: 149px;
}

.dragcurve, #dragcurve1
{
    width: 103px;
    height: 100px;
    border: solid 5px #000;
    border-color: #ff0000;
    border-radius: 50%/100px 100px 0 0;
    top: 229px;
    position: absolute;
    left: 123PX;
    z-index: 1;
	 display:none;
	 border-bottom:0px;
	}
	#clearbtn
	{
	width: 40px;
    height: 40px;     
    cursor: pointer;     
    display: inline-block;
    margin-top: 13px;
    float: left;
    margin-left: 40px;
	}
 #clearbtn>img
 {
	 width:100%;
	 height:100%;
 }
.dragcurve>input
{
margin: auto;
    display: block;
    text-align: center;
    position: relative;
    top: -35px;
    font-size: 30px;
	margin: auto;
    display: block;
    text-align: center;
    position: relative;
    top: -35px;
    font-size: 30px;
    border: none;
    background: transparent;
    color: white;
    width: 56px;
	pointer-events:none;
}
.handle
{
	      width: 15px;
    height: 15px;
    border: 1px solid #ffffff;
    position: absolute;
    top: 317px;
    z-index: 5;
    border-radius: 12px;
    background-color: #ffffff;
	display:none;
	 
}
#dragBottomCon
{
position: relative;
    top: 151px;
}

.grid
{
border:1px solid red;
width:50px;
height:50px;
display:inline-block;
position:absolute;
background:skyblue;
opacity:0.2;
    top: 0px;
	z-index: -1;
	 
}	
	
.gridCont
	{
		position:relative;
	}
#gridcont
{
   top: 0px;
    position: absolute;
    left: 25px;
    
}	

#circleRight
{
	    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: white;
    left: 0px;
    position: absolute;
    top: 0px;
	cursor:pointer;
}
#circleLeft
{
	    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: white;
   left: 0px;
    position: absolute;
    top: 0px;
	cursor:pointer;
}
 
#dragcurveOverlay, #dragcurveOverlay1
{
	    width: 100%;
    height: 182px;
	left:25px;
    overflow: hidden;
    position: absolute;
	top:150px;
	z-index:1;
	text-align:center;
}


#txtBox, #txtBox1
{
	
	 
}
 #ansTxt, #ansTxt1
{
	    width: 50px;
    height: 50px;
 margin:auto;
 
     top:149px;
	text-align:center;
	 
  
 border:1px solid black;
	font-size:20px;
	border:none;
	 
	 position:absolute;
	 z-index:100;
	  display:none;
}
#addDragBar, #addDragBar1
{
	width: 20px;
    height: 20px;
	cursor:pointer;
	margin-top:0px;
}

 label
{
	color:white;
	margin-left:10px;
}
#scrollbar
{
	    width: 100%;
    height: 30px;
    background-color: #355568;
    margin-top: 10px;
    position: fixed;
    z-index: 9;
    left: 0px;
}
#dragscrollbar
{
width: 200px;
    height: 19px;
    border-radius: 20px;
    background-color: white;
    top: 5px;
	cursor:pointer;
	opacity:0.65;
}

.div1
{
	height: 100px;
}
#logo {
    position: fixed;
    color: white;
    font-size: 15px;
    margin-left: 5%;
    bottom: 10px;
}
#scrollLeft
{
	position:absolute;
	margin-left:10px;
}
#numberTxt
{
	    position: absolute;
    width: 100%;
    color: red;
    margin-top: -39px;
   
	z-index:10;
}
#numCenter
{
 
    left: 50%;
    position: absolute;
}
#scrollRight
{
	position:absolute;
	right:30px;
}
.num
{
	display:inline-block;
	color: white;
    font-size: 40px;
    font-family: MyriadPro-Regular;
    cursor:pointer;
	top:-10px;
}
 
 
 .toolbox
 {
    width: 310px;
    height: 276px;
    border: 3px solid #355568;
    border-radius: 10px;
    position: relative;
    float: right;
    margin-right: 40px;
    bottom: 95px;
 }
.toolboxCont
{
background-color:#365569;
margin:5px;
 border-radius:10px;
    height: 180px;
	border:3px solid #323c42;
}
.sText
{
display:inline-block;
margin-top:20px;
font-family:MyriadPro-Regular;
font-size:15px;


}
label
 {
 color:white;
 font-size: 15px;
    font-family: MyriadPro-Regular;
 }
 .inputTxt
 {
  border-radius: 20px;
    float: right;
    margin-top: 18px;
    margin-right: 41px;
    height: 18px;
    font-family: KG_Primary_Penmanship_2;
    font-size: 18px;
    width: 89px;
    box-shadow: inset 1px 1px 1px 1px rgb(191, 192, 193);
    text-align: center;
 }
 .goBtn
 {      
    width:69px;   
    left: 38%;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: MyriadPro-Regular;
    font-size: 15px;
    line-height: 21px;     
    cursor:pointer;
 }
 
 img{
	 width:100%;
	 height:100%;
 }
 #undobtn
 {
	     width: 40px;
    height: 40px;
    
    float: right;
    margin-right: 20px;
    margin-top: 15px;
opacity:0.5;
 }
 #undobtn>img
 {
	 width:100%;
	 height:100%;
 }
 
 input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

@media only screen and (max-height: 600px) {
	#container {
   
    height: 275px;
    top: -199px;
}
.bar
{
	    height: 52px;
		top:0px;
}
.bartxt
{
	top:59px;
}
.toolbox {
    width: 260px;
	margin-right:10px;
	bottom:76px;
}
.sText
{
	font-size:12px;
}
.inputTxt
{
	    margin-top: 18px;
		height:17px;
		width:80px;
		font-size:10px;
}
.toolboxCont
{
	height:174px;
}
#showAns {
    margin-left: 10px;
}
#clearbtn
{
	 margin-left: 22px;
}
}



 @media only screen and (max-height: 500px) {
	 .bartxt
	 {
		 font-size:15px;
	 }
	 .dragcurve>input
	 {
		 font-size:20px;
		 top:-25px;
	 }
#container {
   
    height: 275px;
    top: -173px;
}
#clearbtn {
    width: 25px;
    height: 25px;
	margin-left:27px;
    
}
#undobtn {
    width: 30px;
    height: 30px;
}
.toolbox {
    width: 246px;
    height: 183px;   
    margin-right: 40px;
    bottom: 60px;
}

.toolboxCont {
    
    margin: 5px;  
    height: 130px;   
}
.sText {
    
    margin-top: 13px;    
    font-size: 12px;
}

.inputTxt {
   
    margin-top: 11px;
    margin-right: 41px;
    height: 14px;
 
    width: 57px;
 
    text-align: center;
}
.goBtn {
    padding: 3px;
    width: 57px;
    left: 38%;
    
    margin-top: 0px;
   
    
   
    padding: 5px;
    cursor: pointer;
}

#showAns, #clearbtn, #undobtn {
    margin-top: 4px;
}

label
{
	font-size:12px;
	vertical-align:top;
}
#scrollbar
{
	margin-top:5px;
	height:20px;
}
.num
{
	font-size:28px;
}
 }
 
 @media only screen and (max-height: 400px) 
 {
	 #container 
	 {
		 top:-203px;
	 }
	 .dragcurve, #dragcurve1 
	 {    
		height: 70px;  
		border-radius: 50%/70px 70px 0 0;   
		top:259px;
	}
	.toolbox {
    height: 185px;
    bottom: 95px;
}
	 .toolboxCont
	 {
		 height:135px;
	 }
	 .sText {
    margin-top: 15px;
    font-size: 12px;
	 }
	 .inputTxt {
    margin-top: 13px;
	 }
 }
@media only screen and (max-height: 350px) {
	
	
	#container {
    top: -242px;
    height: 165px;
}
	
 .bar {
   
    height: 40px;    
    top: 8px;
     
}

.dragcurve, #dragcurve1 {
    
    height: 40px;
    
    border-color: #ff0000 transparent transparent transparent;
    border-radius: 50%/40px 40px 0 0;
    top: 290px;
  
}
.bartxt
{
	top: 57px;
	font-size:15px;
}

#clearbtn {
    width: 30px;
    height: 40px;
  
    font-size: 14px;
}

.toolbox {
    width: 218px;
    height: 130px;
	bottom:33px;
}
 .toolboxCont
	 {
		 height:95px;
	 }
.sText{
	font-size:10px;
	margin-top:7px;
}
.dragcurve>input
{
	font-size:15px;
	top:-21px;
}
.inputTxt
{
	    height: 12px;
    width: 49px;
	margin-right:40px;
	margin-top:7px;
}
label
{
font-size:10px;	
vertical-align:top;
}

#showAns, #clearbtn, #undobtn {
    margin-top: 0px;
}
#clearbtn {
    width: 20px;
    height: 20px;
}
.toolbox
{
	height:139px;
}



}