/* -----------------------------------------------------------------------
/* GENERAL STYLING 
/* ----------------------------------------------------------------------- */

html
{
/*background-image: url(gfx/bcg.png);*/
/*color: #FFffff;*/
height: 100%;
margin: 0;
background-color: #000;
color: #000;
/*font-family: "Jura", 'imagine font', Verdana, Arial, Helvetica, sans-serif;*/
/*font-family: 'Source Code Pro', monospace;*/
/*font-family: 'Nova Mono', monospace;*/
/*font-family: 'Space Mono', monospace;*/
font-family: 'Rajdhani', sans-serif;
font-size: 16px;
filter: hue-rotate(90deg);
/*filter: hue-rotate(190deg);*/
/*filter: hue-rotate(270deg);*/
overflow: scroll;
overflow-x: hidden;
}

.playfield{
position: absolute;
background-color: rgba(0,250,128,0.12);
/*background-image: url(../lib/gfx/tileTypeA.png);*/
width: 100%;
height: 100%;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
overflow: hidden;
}

.playfield2{
position: absolute;
background-color: rgba(0,250,128,0.12);
/*background-image: url(../lib/gfx/tileTypeA.png);*/
width: 100%;
height: 100%;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
overflow: hidden;
}


.color-theme-selector{
opacity: 1;
}

#color-theme-selector-info-panel{
position: absolute;
top: 30px;
right: 10px;
width: 480px;
height: 50px;
text-align: right;
color: #ffffff;
opacity: 0.57;
}

#kernel-panel-info{
position: absolute;
top: 24px;
left: 12px;
width: 640px;
height: 240px;
text-align: left;
font-size: 20px;
line-height: 26px;
background-color: rgba(0,0,0,0.57);
color: rgba(150,250,200,1);
border-radius: 16px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
padding-left: 17px;  /* FIX or REMOVE THIS */
padding-top: 12px;  /* FIX or REMOVE THIS */
visibility: hidden;
opacity: 0.75;
z-index: 12;
}

.color-box-element{
float: left;
}

.mandala-set{
position: relative;
background-color: rgba(0,250,128,0.57);
border-radius: 24px;
margin: 0 auto;
margin-top: -24px;
max-width: 560px;
top: 50%;
transform: translateY(-50%);
}

.mandala-set-panel-info{
position: absolute;
width: 100%!important;
border-radius: 24px;
bottom: 60px;
width: 100%;
height: 57px;
}

.mandala-set-panel-info-text{
text-align: center;
color: #ccc;
font-size: 20px;
opacity: 0.75;
}

.noise-layer{
border-radius: 24px;
width: 100%;
}

.info-line{
position: fixed;
bottom: 0px;
width: 100%;
height: 17px;
color: #fff;
text-align: center;
background-color: rgba(0,0,0,0.5);
font-size: 13px;
margin-left: -8px;
/*margin-bottom: 40px;*/
}

.button-main{
left: 12px;
bottom: 12px;
width: 200px;
height: 40px;
background-color: #e9c600;
border-radius: 12px;
}

@keyframes dazzle{
from { opacity: 0.5; }
to {opacity: 1; }
}

/* misc gfx assets */

#proto{
position: absolute;
right: 10%;
top: 10%;
width: 419px;
height: 98px;
background-image: url(gfx/proto.png);
visibility: visible;
}

#kickstart-controls{
position: absolute;
right: 10%;
top: 20%;
width: 340px;
height: 190px;
background-image: url(gfx/kickstart-controls.png);
visibility: hidden;
}

#fix{
position: absolute;
right: 10%;
bottom: 2%;
width: 337px;
height: 264px;
background-image: url(gfx/fix.png);
visibility: hidden;
}

.sprite{
-webkit-transform-origin: 52%  50%;
/*background-color: #fff;*/
cursor: pointer;
}

.lyrics-title-container{
width: 320px;
height: auto;
}

.lyrics-title{
position: relative;
float: left;
width: 100%;
height: 26px;
line-height: 26px;
font-size: 20px;
background-color: rgba(0,0,0,0.24);
color: rgba(180,255,180,0.75);
margin-bottom: 6px;
cursor: pointer;
border-radius: 3px;
padding-left: 4px;
}

.lyrics-split{
position: relative;
float: left;
width: 100%;
height: 26px;
background-color: rgba(0,0,0,0.36);
margin-bottom: 6px;
border-radius: 3px;
padding-left: 4px;
}

.lyrics-title:hover{
background-color: rgba(255,255,255,0.24);
}

.lyrics-writer-container{
position: absolute;
right: 12px;
/*top: 6px;*/
/*width: 50%;*/
width: calc(100% - 320px - 36px);
height: calc(100% - 36px);
background-color: rgba(0,0,0,0.24);
color: rgba(180,255,180,0.75);
border-radius: 3px;
font-size: 20px;
text-align: center;
overflow-y: scroll;
}

::-webkit-scrollbar{
width: 0px;
background: transparent;
}

::-webkit-scrollbar-thumb{
background: #ffffff;
}