body{
    padding:0;
    margin:0;
    font-family:arial;
    color:#333333;
}

.header{
    background:#fcfcfc;
    border-bottom:1px solid #e3e3e3;
    padding:12px;
    width:100%;
    box-sizing:border-box;
}

.content{
    min-height:calc(100vh - 147px);
    box-sizing:border-box;
    padding:12px;
}

.footer{
    background:#fcfcfc;
    border-top:1px solid #e3e3e3;
    padding:12px;
    width:100%;
    box-sizing:border-box;
}
    
    
    
    
    
    
    
    
    
    
    
/*
* Battle grid css
*/

	.utility-container{
		display: inline-block;
		width:100%;

	}

	.utility-container .drop-spot{
		background:#fcfcfc;
		margin:10px 0px;
		padding:20px;
		max-width:80vh;
		border:1px solid #e3e3e3;
		display:inline-block;
		box-sizing:border-box;
		float:left;

	}
	.utility-container .drop-spot span{
		float:left;
		display:inline-block;

		margin-right:12px;
	}

	.utility-container .trash{
		background:#fcfcfc;
		box-sizing:border-box;
		padding:30px;
		display:inline-block;
        border:1px solid #e3e3e3;
        color:#333;
	}

	.utility-container .drop-spot .grid-token{
		display:inline-block;
		width:auto;
		margin-right:10px;

	}

	.utility-container .trash .grid-token{
		display:inline-block;
		width:auto;
		margin-right:10px;
		height:20px !important;
		display:none;
	}

	.utility-container .grid-token .grid-token-inner{
		position:relative;
	}
	.grid-container{
		width:100%;
		position:relative;
		display: inline-block;
		border:1px solid #e3e3e3;
		box-sizing:border-box;
		margin-bottom:20px;
		background:#fcfcfc;
	}
	.grid-row{
        float:left;
        width:100%;
        position:relative;

	}
    .grid-tile{
            float:left;
            
            box-sizing:border-box;
            position:absolute;
            border:2px solid #e3e3e3;
            transition-duration:0.3s;
    	}

    .grid-token{
    		position:relative;
    		box-sizing:border-box;
    		border:1px solid #fffffff;
    		border-radius: 10px 10px 10px 10px;
    		padding:5px;
    		float:left;
    		width:100%;
    		cursor:grab;
    		transition-duration:0.3s;
    	}

    	.grid-token:hover{
    		filter: brightness(110%);
    	}

    	.utility-container .grid-token{
    		min-height:30px;
    	}
    	.grid-token-inner{
    	    width:auto;	
    	    position:absolute;
    	}

    	.too-big{
    		visibility:hidden;
    	}

    	.grid-tile .grid-token:nth-child(n+5){
            display:none;
    	}
    	.grid-token:hover{
    		z-index:3;
    	}
    	.grid-token:hover .grid-token-inner.too-big{
    		visibility: visible;
position: absolute;
color: #333333;
background: #fcfcfc;
border: 2px solid #959595;
box-sizing: border-box;
padding: 3px;
width: auto;
display: inline-block;
top: 0;
left: 0;
transform: translate3d(50%,-107% ,0);
z-index: 4;
    	}

    	.grid-tile.too-many:hover{
    		width: 200px !important;
    		height: 200px !important;
    		z-index: 3;
    		background: #fff;
    		box-shadow: 0px 0px 10px 5px #33333357;
    		padding: 5px 5px;
    		overflow-y: scroll;
    	}

    	.grid-tile.too-many:hover .grid-token{
    		width: 100% !important;
    		height: auto !important;
    		min-height:20px;
    		margin-bottom:5px;
    	}
    	.grid-tile.too-many:hover .grid-token .grid-token-inner{
    		position:relative;
    	}

    	.grid-tile.too-many:hover .grid-token:nth-child(n+5){
            display:inline-block;
    	}