@font-face {
  font-family: 'Raleway';
  src: url('../assets/fonts/Raleway/Raleway-Medium.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Raleway';
  src: url('../assets/fonts/Raleway/Raleway-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: bold;
}

@font-face {
  font-family: 'Raleway';
  src: url('../assets/fonts/Raleway/Raleway-SemiBold.ttf') format('truetype');
  font-weight: 600;
}

@font-face {
  font-family: 'Raleway';
  src: url('../assets/fonts/Raleway/Raleway-Medium.ttf') format('truetype');
  font-weight: 500;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #dddddd;

  border-left: 2px solid var(--highlight-color);
  border-right: 2px solid var(--highlight-color);
  border-top: 2px solid var(--highlight-color);
  border-bottom: 2px solid var(--highlight-color);
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--text-color-faded2);
  border-radius:8px;
  cursor:pointer;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--text-color-faded);
  border-radius:8px;
}


* {
  transition: color 0.5s ease;
  transition: background-color 0.5s ease;
  -webkit-transition: background-color 0.5s linear;
}
html{
  width:100vw;
  height:100vh;
}
body{
  margin:0px;
  padding:0px;
  position:relative;
  overflow:hidden;
  background-color: var(--bg-color);
  width:100%;
  height:100%;
  z-index:-10;
}
canvas{
  position:relative;
  z-index:-3;
  /*top: 50%;
  left: calc(50%);
  transition: left 0.25s ease-in;
  transform: translate(-50%, -50%); */
}
main{
  position:relative;
  background-color: var(--bg-color); /* #979797; */
  display: flex;
  justify-content: center;
  z-index:-2;
  top: var(--top-height);
  left: var(--sidebar-width); /*16.4rem;*/
  max-width: calc(100% - var(--sidebar-width));
  max-height:calc(100% - var(--top-height));
  width:auto;
  height:calc(100vh - var(--top-height));
  overflow:hidden;
  transition: top 0.25s ease-in,  left 0.25s ease-in, max-width 0.25s ease-in, max-height 0.25s ease-in;
  cursor:default;
  display:flex;
  align-items: center;
  justify-content: center;
  z-index:0;
}

#mainInside{
  /*position:absolute; */
  width:auto;
  height: auto;
  max-width:100%;
  max-height:100%;
  display: flex;
  overflow:hidden;
  justify-content: center;
  align-items: center;
  animation: growPixel var(--anim-canvas) ;
  animation-iteration-count: 1;
}


#mainHome{
  position:fixed;
  height:100%;
  width:100%;
  z-index:-4;
  background-color:white;
  top:0px;
  left:0px;
  max-width: none;
  max-height: none;
  -webkit-transition-property: none;
  -moz-transition-property: none;
  -o-transition-property: none;
  transition-property: none;

  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}



h1{
  font-family: var(--main-font);
  font-size: var(--main-font-size-h1);
  color: var(--text-color);
}

h2{
  font-family: var(--main-font);
  font-weight: var(--main-font-bold);
  font-size: var(--main-font-size-h2);
  color: var(--text-color);
  cursor:pointer;
}

.topsubtitle{
  margin:0px;
  position:relative;
  height:100%;
  padding-left:calc( var(--space-2) / 2);
  padding-right: calc( var(--space-2) / 2);
  display:flex;
  justify-content: center;
  align-items: center;
}
.topsubtitle:hover{
  background-color: var(--text-color-dark);
  cursor:pointer;
}


#topbarHome .topsubtitle {
  color: black;
  width: 3rem;
  height: 2rem;
  margin-left:1.2rem;
        box-sizing: border-box;
        border-bottom: 2px solid transparent;
}

#topbarHome .topsubtitle:hover{
  background-color: white;
  cursor: pointer;
  border-bottom: 2px solid black;
}
#topbarHome .tbSelected2{
  background-color: white;
  cursor: pointer;
  border-bottom: 2px solid black;
}
.tbSelected{
  background-color: rgba(255,255,255,0.1);
  border-bottom: 2px solid white;
  box-sizing: border-box;
}

label{
  font-family: var(--main-font);
  font-weight: normal;
  font-size: var(--main-font-size-h3);
  color: var(--text-color);
}
h3{
  font-family: var(--main-font);
  font-weight: normal;
  font-size: var(--main-font-size-h3);
  margin-bottom:var(--space-0-8);
  color: var(--text-color);
}
div{
  font-family: var(--main-font);
  font-size: var(--main-font-size-h4);
  color: var(--text-color);
}


/*---------------------------------------------------------------------- BAR  */
/*---------------------------------------------------------------------- BAR  */
/*---------------------------------------------------------------------- BAR  */

#topbarNormal{
  position:fixed;
  width:calc(100% );
  height: var(--top-height);
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  color: var(--main-color);
  background-color: var(--text-color);
  z-index: 1;
  top:0px;
  transition: top 0.25s ease-in,  background-color 0.5s linear;
  align-items: center;
  box-shadow: 0px 2px 16px rgba(104, 104, 104, 0.25);
  animation: waitFor 1.8s 0s, faceAppear 1s 1s ;
  animation-iteration-count: 1;
  z-index:5;

}
#topbarHome{
  position:fixed;
  width:calc(100vw );
  height: var(--top-height);
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  color: black;
  background-color: transparent;
  z-index: 1;
  top:0px;
  transition: top 0.25s ease-in,  background-color 0.5s linear;
  align-items: center;
  z-index:5;
}
#topbar h2{
  color: var(--main-color);
}

.topright{
  display:flex;
  flex-direction: row;
  margin-right:var(--space-2);
  position:relative;
  height:100%;
  align-items: center;
}


/*--------------------------------------------------------------------------- */
#title{
  margin:0px;
  cursor:pointer;

}
#title svg{
  height:var(--space-1);
  margin-left: var(--space-2);
}
/*--------------------------------------------------------------------------- */
#sidebar{
  position:absolute;
  padding-top: var(--top-height);
  width: var(--sidebar-width);
  height: calc(100% - var(--top-height));
  left:0px;
  top:0px;
  background-color: var(--main-color);
  transition: left 0.25s ease-in,  background-color 0.5s linear;
  box-shadow: 2px 0px 16px rgba(104, 104, 104, 0.1);
  animation: goRight var(--anim-sidebar);
  animation-iteration-count: 1;
  z-index:3;
}

#inputbar{
  position:fixed;
  bottom:var(--space-4);
  z-index:10;
}

.footnote{
  position:absolute;
  bottom: var(--space-1-5);
  left:var(--space-2);
  color: var(--text-color-faded2);
}
/*--------------------------------------------------------------------------- */
.section{
  cursor:pointer;
  position:relative;
  width:calc(100% );
  min-height:var(--space-3);
  border-bottom: 0.5px solid var(--text-color-light);
  overflow: hidden;
  transition: margin 0.35s ease-in;
  max-height:var(--space-2);;
  transition: max-height 0.45s ease 0s;
}
.section:hover {
  background-color:var(--highlight-color) ;
}
.section:hover .sectiontitle{
  color:var(--text-color) ;
}
.section:hover .sectionSVG rect{
  fill:var(--text-color) ;
}
/*--------------------------------------------------------------------------- */

.sectionSelected{
  background-color:var(--highlight-color);
  box-shadow: 0px 8px 16px 0px rgba(20,20,20,0.08);
}
.sectionSelected:hover .sectiontitle{
  color:var(--text-color) ;
}

.sectiontitle{
  width: calc(100% - 2rem);
  padding-left: 2rem;
  padding-bottom:var(--space-1-5);
  padding-top:var(--space-0-6);
  margin:0;
  margin-bottom:var(--space-1);
  color: var(--text-color-faded);
}
#sectiontitleSelected{
  color:var(--text-color) ;
}
#sectionSVGSelected  rect{
  fill:var(--text-color) ;
}
/*--------------------------------------------------------------------------- */
.sectionContent{
  padding-right:2rem;
  padding-left:2rem;
  cursor:context-menu;
  color: var(--text-color-faded);
}

.sectionSVG rect{
  fill: var(--text-color-faded);
}

.sectionSVG{
  margin-right: 1rem;
  bottom:-4px;
  position:relative;
  width:var(--space-1-2);
}


#Upload{
  /*border-bottom: 1px solid var(--text-color); */
}


.contentBar{
  margin-bottom:var(--space-2);
}


.inputContainer{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items: center;
  width: calc(100% );
  margin-bottom:0.4rem;
  height:1rem;
  /*border: 1px solid #555; */
}
.inputLabel{
  /*text-align:center; */
  width:5rem;
}

.bottomcontainer{
  position:absolute;
  bottom:1.4rem;
  width:auto;
  display:flex;
  flex-direction: row;
  background-color:var(--main-color);
    padding:0.4rem;
  box-shadow: 0px 2px 8px var(--text-color-faded2);
  animation: goUp var(--anim-botbar) ;
  animation-iteration-count: 1;
}
.bottomcontainerFade{
  position:absolute;
  bottom:1.4rem;
  width:auto;
    height: calc(18px + var(--space-0-8));
  display:flex;
  flex-direction: row;
  background-color:var(--main-color);
  transition: opacity 0.8s linear 0s;
  padding:0.4rem;
  opacity:0;
}
.bottomcontainerFade:hover{
  opacity:1;
  transition: opacity 0s linear 0s;
}

.groupbot{
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#gBs{
  border-left: 1px solid var(--text-color-light);
  border-right: 1px solid var(--text-color-light);
  margin-right:0.3rem;
  margin-left:0.3rem;
  padding-right:0.3rem;
  padding-left:0.3rem;
}

.botbutton{
  fill: var(--text-color-faded);
  cursor:pointer;
  margin:0.2rem;
  margin-right:0.3rem;
  margin-left:0.3rem;
}
.botbutton:hover {
  fill: #000000;
}


/*---------------------------------------------------------------- TILES LIST */
/*---------------------------------------------------------------- TILES LIST */
/*---------------------------------------------------------------- TILES LIST */

#tileCust{
  margin-bottom: var(--space-0-8);
}

.tileListInd{
  width:18px;
  height:18px;
  display:inline-block;
  box-shadow:  0 0 0 0.5px var(--text-color);
  transition: box-shadow .1s;
  margin: 4px;
  z-index:20;
  cursor: pointer;
  opacity:0.6;
}

.tileListInd:hover{
  box-shadow:  0 0 0 3px var(--text-color);
  opacity:1;
}
#tileListContainer{
  position:relative;
  height: calc(100% + 4px);

  max-height:5.4rem;
  overflow-y:scroll;
  margin-bottom:0.4rem;

}

.tileListIndSelected{
  width:18px;
  height:18px;
  display:inline-block;
  box-shadow:  0 0 0 3px var(--text-color);
  transition: box-shadow .1s;
  margin: 4px;
  z-index:20;
  cursor: pointer;
  opacity:1;
}

/*---------------------------------------------------------------- settings */
/*---------------------------------------------------------------- settings */
/*---------------------------------------------------------------- settings */
.miniContainer{
  border: 1px solid var(--text-color);
  padding:var(--space-0-75);
  padding-left:var(--space-1-6); padding-right:var(--space-1-6);
  /*  padding-left:22px; padding-right:22px; */
}

.miniContainerTitle{
  position:relative;
  display: inline-block;
  width:auto;
  top:calc( -1 * var(--space-0-75) - var(--space-0-5));
  background-color: var(--highlight-color);
  color: var(--text-color);
  margin-left: -8px;
  padding-left:10px; padding-right:10px;/*  padding-left:8px; padding-right:8px; */
}

.miniContainerLabel{
  color: var(--text-color-faded);
  padding-left:2px;
  align:center;
  font-weight:500;
}
.miniContainerLabelLong{
  color: var(--text-color-faded);
  font-weight: 500;
  padding-left:2px;
  align:center;
  width:100%;
  position:relative;
}
.miniContainerSVG path{
  fill: var(--text-color-faded2);
  position relative;
  height:100%;
  width:auto;
}

/*---------------------------------------------------------------- DRAW */
/*---------------------------------------------------------------- DRAW */
/*---------------------------------------------------------------- DRAW */


.brushes{
  display:flex;
  margin-bottom: var(--space-2);
  position: relative;
  width:100%;
  justify-content: center;
}

.brushesIcon{
  margin-right:var(--space-0-8);
  height:var(--space-1);
}
.brushesIcon rect{
  fill: var(--text-color-semi);
}

.BSS .brushesIcon rect{
  fill: var(--highlight-color);
}
.BSS .brushesIcon path{
  fill: var(--highlight-color);
}


/*---------------------------------------------------------------- TEXT */
/*---------------------------------------------------------------- TEXT */
/*---------------------------------------------------------------- TEXT */
.textNumInp{
  position:relative;
  right:0px;
  width:3rem;
}

.textboxGroup{
  margin-bottom:2rem;
  max-height: calc((1.2rem + 8px + 0.5rem) * 3 - 8px);
  overflow:scroll;
  overflow-x: hidden;
  padding-left: 8px;
  box-shadow: inset 0px 0px 8px var(--text-color-light2);
}


.textbox{
  height: calc(1.2rem + 8px);
  width:95%;
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 0.5rem;
  align-items: center;
  border: 1px solid var(--text-color-light2);
  box-sizing: border-box;
  padding:4px;
  transition: background-color 0.2s;
  transition: border 0.2s;
  background-color: var(--text-color-light2);
  box-shadow: inset 0px 0px 4px rgba(120,120,120,0.1);
}

.NTBS:hover {
  border: 1px solid var(--text-color);
  box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
}
.TBS{
  border: 2px solid var(--focus-color);
  border-left: 4px solid var(--focus-color);
  background-color: var(--hightlight-color);
}
.TBS:hover{
}

.TBS input[type=text]{
  background-color: var(--hightlight-color);
}



.textbox input[type=text] {
  position:relative;
  width:85%;
  text-align: left;
  height: 1.2rem;
  font-size:0.8rem;
  border:0;
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  transition: background-color 0.2s;
  transition: border 0.2s;
  background-color: var(--text-color-light2);
}
.textbox:focus-within {
  border-left: 4px solid var(--focus-color);
  background-color: var(--hightlight-color);
}

.textbox input[type=text]{
  background-color: var(--hightlight-color);
}



.settingsAlign{
  display:flex;
  flex-direction: row;
  justify-content: space-around;
  position:relative;
  width:55%;
  height:1.5rem;
  left:-2px;
}

.settingsAlignson{
  position:relative;
  width:auto;
  height:auto;
}


.align{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  padding:1px;
  padding-right:2px;
  padding-left:2px;
  cursor:pointer;
  transition: background-color 0.1s;
  text-align: center;

}
.align svg{
  width:22px;
  height:22px;
}
.settingsItem label svg{
  width:22px;
  height:22px;
}

.align:hover{
  background-color: var(--text-color-light2);
}
.align:hover svg path{
  fill: var(--text-color-faded2);

}

.AS{  /*align selected*/
  background-color: #dedede;
}
.AS svg path{
  fill: var(--text-color-semi);
}

.deleteTB{
  cursor: pointer;
}

/*---------------------------------------------------------------- TEXT */
/*---------------------------------------------------------------- TEXT */
/*---------------------------------------------------------------- TEXT */
.textFontCont{
  position:relative;
  width:100%;
  display:flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;

}
.textFontCont select{
  border-radius: 0px;
  height:1.2rem;
  position:relative;
  width:75%;
  text-align: center;
  padding-left:2px;
    border:none;
  appearance: none;
    -moz-appearance: none;
-webkit-appearance: none;
  box-sizing: border-box;
}
.textFontCont select:hover{
  appearance: auto;
  -moz-appearance: auto;
  -webkit-appearance: auto;
  border-radius: 0px;
  height:1.2rem;
  position:relative;
  text-align: center;
  padding-left:2px;
  border: 1px solid var(--text-color-faded);
  box-sizing: border-box;
}