:root{
	--gui-color-text: rgb(222, 222, 222);
	--gui-color-bg: #2E3192;
	--gui-color-border: #191D56;
}

*{
	margin:0;
	padding:0;
	box-sizing:border-box;		
}

body{
	display:flex;
	color: var(--gui-color-text);
	background-color: black;
	font-family: Arial, Helvetica, sans-serif;
}

label, fieldset{
	font-size:.8rem;
}

h1{
 font-size:1.5rem;
 line-height: 2rem;
}

label input[type="number"]{
   width:3rem;
}

section{
   display: flex; 
   position:fixed;
   width:250px;
   height: 100vh;
   gap:1rem;
   flex-direction: column;
   background-color: var(--gui-color-bg);
   padding:0.2rem;  
   overflow: scroll;
}

label{
  display: flex; 
  flex-direction: row;
  padding: .25rem;
  justify-content: space-between;
}

fieldset{
	margin:0.4rem 0.2rem 0.4rem 0.2rem;
	padding:0.5rem 0.1rem 0.1rem 0.1rem;
}

details, #sliceOptions{	
   display: flex; 
   flex-direction: column;
   background-color: var(--gui-color-border);
   border-radius:0.1rem;
}

header{
	padding:0.25rem;
	background-color: black;
	border-radius:0.5rem;
}

header a{
   color:var(--gui-color-text);
   text-decoration: none;
   width:100%;
   font-size:0.8rem;
}

#logo{
	margin-top:0.5rem;
	margin-bottom:0.5rem;
    width:100%;
    border-radius:0.25rem;
}
#logo img{
    width:30%;
}

#logo div{
	text-align: center;
	margin-top: -1.25rem;
	padding-left:1rem;
}


#sliceOptions{
	display:none;
}

.actionButton{
	width:100%;
}

#spriteSheetImage
{
  display:none;
}

#spriteSheetThumbnail{
  width:100%;
}

.tileButton{
	width:3rem;
	height:3rem;
	padding:0;
	margin:0.1rem;
}

.tileButton img{
	width:100%;
}

#tileButtonContainer{
	flex-wrap:wrap;
	padding:0.2rem;
}

.options{
	margin:.5rem;
	font-size:0.8rem;
}
main{
	display:block;
	overflow: auto;
    width:100%;
}
main div{
	display:block;
	margin:0;
	padding:0;
}

.levelTile{
	position: absolute;
	border:1px solid lightgrey;
	background-color: transparent;
	z-index:-1;
}

.levelTile img{
  width:100%;
  height:100%;
}

.checkbox{
	position:absolute;
}

.tagLabel{
	border-radius: 0.25rem;
	position:absolute;
	background-color: white;
	width:2.5rem;
	height:0.8rem;
	font-size:0.6rem;
	background-color: lightgrey;
	border-radius: 0.25rem;
	color:blue;
	z-index:1000;
	overflow:hidden;
}

main div{
	position:absolute;
	background-size:contain;
	width:100%;
	z-index:-10000;
}

.highlight{	
	outline: 2px solid blue;
}

.collider{
   outline: 2px solid lime; 
}

::-webkit-scrollbar {
	width: 0;
  }
  
  ::-webkit-scrollbar-track {
	background: var(--gui-color-bg);
  }
  
  ::-webkit-scrollbar-thumb {
	background: #5463D1;
  }
  
  ::-webkit-scrollbar-thumb:hover {
	background: var(--gui-color-border);
  }

  a{
	color: white;
  }

  #imprint{
	display:block;
	font-size: 0.7rem;
  }