* {
	padding: 0;
	margin: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}


.canvas-container
{
	position:absolute!important;
	pointer-events:none;
	z-index:9999;
	margin-top:100px;
}
/* media query for ipad air  */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) 
 {
   #frame-left, #frame-right {
   
    width: 27PX !important;
   height: 571PX!important; 
		
	}

   
   #stage {
    height: 474px!important;
    left: 24px!important;
    right: 24px!important;
   }
   
   .bead {
    height: 39px!important;
    width: 22px!important;
    height: 40px!important;
   }
   .rack {
   
    height: 42px!important; 
}
 .game-body { min-width:340px !important;}  
}
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation : landscape) {

#stage {
    height:550px !important;
    top: 0;
}

#frame-left, #frame-right {
   height: 644px !important;
   top: 0;
}
   .game-body { min-width:340px !important;}     
}
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { 

	#stage { 
	
    left: 13px !important;
    right: 15px !important;
    height: 290px !important;
	margin-left:0px !important;
	
	
	}
	#frame-left, #frame-right {height: 344px !important;width: 17PX!important;}
	.rack {height: 25px!important;}   
	.bead{ height: 25px!important;width: 14px!important;}
	.rod { height: 5px!important;}   
	#frame-top, #frame-bottom {height: 6px !important;}
	
	div#frame-left {left: 0px!important;}
	div#frame-right {/* right: 35px!important; */}
	#frame-top {top: -9px!important;}
	#frame-bottom {bottom: -10px!important;}
	   .game-body { min-width:340px !important;}     
	 
	}


@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
#stage {
    height:550px !important;
    top: 0;
}

#frame-left, #frame-right {
   height: 644px !important;
   top: 0;
}
}


/* media query for ipad */


html {
	background-color: #032b43;
}
body {
	font-family: sans-serif;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow:hidden;
}
.clickable {
	cursor: pointer;
}
img {
	pointer-events: none;
}
[acc-id='app-container'] {
	position: absolute;
	width: 1024px;
	height: 768px;
	overflow: hidden;
}
[acc-id="global-loader"] {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgb(255, 255, 255);
	z-index: 100;
}

.loadingText {
	position: absolute;
	height: 50px;
	width: 220px;
	text-align: center;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	font-size: 40px;
	color: #888888;
}
.game-body {
	 min-width:340px; 
	position: absolute;
	height: 100%;
	width: 100%;
	
}
#frame-left, #frame-right {
	position: absolute;
	width: 33PX;
	height: 707PX;
	top: 0;
	bottom: 0;
	margin: auto;
	background-size: contain;
	background-repeat: no-repeat;
}
#frame-left {
	background-image: url(../media/leftBar.png);
	left: 0;
}
#frame-right {
	background-image: url(../media/rightBar.png);
	right: 0;
}
#stage {
	position: absolute;
	height: 600px;
	left: 27px;
	right: 29px;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
	/* margin-left: -85px; */
}
#frame-top, #frame-bottom {
	position: absolute;
	height: 13px;
	background-repeat: repeat;
	background-size: contain;
	width: 100%;
}
#frame-top {
	background-image: url(../media/topBar.png);
	top: -22px;
}
#frame-bottom {
	background-image: url(../media/bottomBar.png);
	bottom: -20px;
}
#workspace{
	height:100%;
}
.rack {
	position: absolute;
	left: 0px;
	width: 100%;
	height: 52px;
}
#rack0 {
	top: 90px;
}
.rod {
	position:absolute;
	top:0;
	bottom:0;
	height: 10px;
	width:100%;
	margin:auto;
	background-repeat: repeat;
	background-size: contain;
	background-image: url(../media/rod.png);
}
.bead {
	position: absolute;
	top: 0;
	height: 49px;
	width: 26px;
	background-repeat: no-repeat;
	background-size: contain;
	cursor:pointer;
}
.bead.red{
	background-image: url(../media/bead_red.png);
}
.bead.white{
	background-image: url(../media/bead_white.png);
}
div#frame-left {
	/* left: 24px; */
}
div#frame-right {
	/* right: -9px; */
}
#logo {
    position: fixed;
    color: white;
    font-size: 15px;
    margin-left: 1%;
    bottom: 1%;
	z-index:9999;
}





#canvas
{
	/* width:1920px;
	height:1080px; */
	overflow:hidden;
	pointer-events:none;
}
#toolBox
{
	position:absolute;
	border: 3px solid #2b6791;
    border-radius: 20px;
    width: 200px;
    height: 70px;
    margin: auto;
    margin-top: 8px;
	 z-index:9999999;
	 left:50%;
	 margin-left:-100px;
}


#pencil {
	 /* width:55px; */
	 display:inline-block;
	 margin-left:16px;
	 margin-top:6px;
	 z-index:9999999;
	 opacity:0.6;
}

 #eraser {
	 /* width:50px; */
	 display:inline-block;
	 margin-left:16px;
	 margin-top:6px;
	 z-index:9999999;
	 opacity:0.6;
}
#info
{
	position:fixed;
	color:white;
	font-size:15px;
	right: 1%;
	bottom: 1.5%;
	width: 25px;
	height: 25px;
	cursor:pointer;
	 z-index:99999;
	
}
#info>img
{
width:100%;
height:100%;
}
#infopopup
{
	position:fixed;
	color:white;
	font-size:15px;
	right: 2%;
	bottom: 8%;
	display:none;
	width:350px;
	transform-origin:right bottom;
	 z-index:99999;
	
}
.infoClicked {
    opacity: 0.4;
}


#infopopupclosebtn
{
/*	position: absolute;right: 5%;width: 3%;top: 4%;cursor: pointer; */
	
	position: absolute;
    right: 10px;
    width: 31px;
    top: 11px;
    cursor: pointer;
	opacity:0;
	pointer-events:auto;
	
}
.addcursor {

  cursor: url(../media/eraser.cur), auto !important;;
}

.addcursorPencil {

  cursor: url(../media/draw_tool.cur), auto !important;;
  
}
.defaultCursor
{
	cursor:pointer!important;
}

@media screen and (max-height: 700px) 
  {
	  #toolBox
	  {
		  margin-top:-10px;
		  transform: scale(0.7);
	  }
	  
	  .canvas-container
{
	 
	margin-top:50px;
}
  }
  
    @media screen and (max-height: 695px) 
  {
	  
	  #toolBox
	  {
		  margin-top:-4px;
	  }
	   #stage
	   {
		   height:450px!important;
	   }
	    .bead {
    width: 16.50px!important;
    height: 30px!important;
		}
		.rod
		{
			top:-20px;
		}
		
		#frame-left, #frame-right
	  {
		  transform:scaleY(0.85);
	  }
	  #frame-bottom
	  {
		  bottom:-3px;
	  }
  }
  
  @media screen and (max-height: 635px) 
  {
	   #stage
	   {
		   height:398px!important;
	   }
	   
	   .bead {
    
    width: 19px!important;
    height: 34px!important;
		}
		
		.rod
		{
			height:5px;
			top:-5px;
		}
		
		#frame-left, #frame-right
	  {
		  transform:scaleY(0.9);
	  }
	  
	  
  
  }
   @media screen and (max-height: 550px) 
  {
	   #stage
	   {
		   height:350px!important;
	   }
	    .bead {
    width: 16.50px!important;
    height: 30px!important;
		}
		.rod
		{
			top:-10px;
		}
		
		#frame-left, #frame-right
	  {
		  transform:scaleY(0.75);
	  }
  }
  
    @media screen and (max-height: 500px) 
  {
	  
		
	  #frame-top
	  {
		  top:-25px;
	  }
	  #frame-bottom
	  {
		  bottom:-8px;
	  }
	  #frame-top, #frame-bottom
	  {
		  height:9px;
	  }
	    #stage
	   {
		   height:220px!important;
		   transform:scaleY(1.1);
	   }
	    .bead {
    width: 11px!important;
    height: 24px!important;
		}
		.rod
		{
			top:-18px;
			height:3px;
		}
  }
  
   @media screen and (max-height: 425px) 
  {
	  
	   #frame-left, #frame-right
	  {
		  transform:scaleY(0.6)!important;
	  }
	  
	   #stage
	   {
		   
		   transform:scaleY(1.0);
	   }
  }
  
    @media screen and (max-height: 400px) 
  {
	   #toolBox
	  {
		  
		  transform: scale(0.5);
	  }
	  
	   #frame-left, #frame-right
	  {
		  transform:scaleY(0.55)!important;
	  }
  }
   
     @media screen and (max-height: 374px) 
  {
	   #toolBox
	  {
		  top:-13px;
		  transform: scale(0.35);
	  }
	 /*  #stage
	  {
		  transform:scaleY(0.6)
	  } */
	  
	   #frame-left, #frame-right
	  {
		  transform:scaleY(0.5)!important;
	  }
	  

  }
  
    @media screen and (max-height: 350px) 
  {
	  
	   #stage
	  {
		  transform:scaleY(0.8);
	  }

  }
  
    @media screen and (max-height: 286px) 
  {
	 #frame-left, #frame-right
	  {
		  transform:scaleY(0.4)!important;
	  }
	  
  }
     @media screen and (max-height: 286px) 
  {
	   #stage
	  {
		  transform:scaleY(0.7)
	  }
  }
    @media screen and (max-height: 244px) 
  {
	   #toolBox
	  {
		  top:-14px;
		  transform: scale(0.3);
	  }
	  #stage
	  {
		  transform:scaleY(0.6)
	  }
	   #frame-left, #frame-right
	  {
		  transform:scaleY(0.33)!important;
	  }
	  
	  	  	  .canvas-container
{
	 
	margin-top:30px;
}
  }
  
  @media screen and (max-height: 225px) 
  {
	  #stage
	  {
		  transform:scaleY(0.5)
	  }
  }
  
   @media screen and (max-height: 188px) 
  {
	  #stage
	  {
		  transform:scaleY(0.4)
	  }
	  
	  #frame-left, #frame-right {
    width: 24PX !important;
    height: 497PX!important;
}
  }
  
  
  @media screen and (max-height: 170px) 
  {
	  #stage
	  {
		  transform:scaleY(0.2)
	  }
 
  }