* {
	padding: 0;
	margin: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
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;
}

.canvas-container
{
	position:absolute!important;
	pointer-events:none;
	z-index:9999;
	margin-top:100px;
}

.clickable {
	cursor: pointer;
}
#logo {
    position: fixed;
    color: white;
    font-size: 15px;
    margin-left: 1%;
    bottom: 1%;
	z-index:99999;
}
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 {
	position: absolute;
	height: 100%;
	width: 100%;
	min-width:530px;
}
#frame-left, #frame-right {
	position: absolute;
	width: 63PX;
	height: 364PX;
	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: 224px;
	left: 52px;
	right: 52px;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
}
#frame-top, #frame-bottom {
	position: absolute;
	height: 22px;
	background-repeat: repeat;
	background-size: contain;
	width: 100%;
}
#frame-top {
	background-image: url(../media/topBar.png);
	top: -20px;
}
#frame-bottom {
	background-image: url(../media/bottomBar.png);
	bottom: -20px;
}
#workspace{
	height:100%;
}
.rack {
	position: absolute;
	left: 0px;
	width: 100%;
	height: 74px;
}
#rack0 {
	top: 90px;
}
.rod {
	position:absolute;
	top:0;
	bottom:0;
	height:14px;
	width:100%;
	margin:auto;
	background-repeat: repeat;
	background-size: contain;
	background-image: url(../media/rod.png);
}
.bead {
    position: absolute;
    top: 0;
    height: 74px;
    width: 40px;
    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);
}

#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: 10px;
	 z-index:9999999;
	 left:50%;
	 margin-left:-100px;
}


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

 #eraser {
	/*  width:50px; */
	 display:inline-block;
	 margin-left:16px;
	 margin-top:6px;
	 z-index:9999999;
	 opacity:0.6;
	  vertical-align:top;
}

#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-width: 900px) 
{
	
	
	 
}
@media screen and (max-height:500px)
{
	
	#stage
	{
		height:190px;
	}
	#frame-top
	{
		top:-5px;
	}
	.rack
	{
		top:23.5px;
	}
	#toolBox
	{
		margin-top:3px;
		height:62px;
		width:180px;
		
	}
	 #pencil{
	 width:69.15px;
	 height:50px;
	}
	  #eraser{
	 width:52.50px;
	 height:50px;
	 margin-left:22px;
	}
	#frame-left, #frame-right
	{
		width:45px;
		height:260px;
	}
	#stage
	{
		left:37px;
		right:37px;
	}
}
@media screen and (max-width: 400px) 
{
	.game-body
	{
		min-width:375px;
	}
	.bead
	{
		width:25px;
		top:13px;
	}
}