/*

define your layers from bottom to top:

$layers: (
  background,
  content,
  dropdown,
  subnav,
  mobile-nav,
  header,
  overlay,
  modal,
  modal-background,
  modal-content
);



//////////use:

.test {
  z-index: -z(content);
}




//////////go one layer above content

.test-2 {
  z-index: -z(content, 1);
}



///////////go one layer below content

.test-2 {
  z-index: -z(content, -1)
}

*/
body {
  background: #232125;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 14px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer */
  -khtml-user-select: none;
  /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none;
  /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none;
  /* Disable Android and iOS callouts*/ }

#layer-properties-menu {
  visibility: hidden;
  margin: 0;
  padding: 0;
  top: 0;
  right: 0;
  width: 120px;
  text-align: center;
  margin-right: 200px;
  /*border:1px solid $basetext;*/
  list-style: none;
  position: relative;
  z-index: 1200;
  list-style-type: none;
  background-color: #332f35;
  position: fixed;
  overflow: visible; }
  #layer-properties-menu li button {
    color: #b3adb6;
    height: 100%;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%; }
  #layer-properties-menu li button:hover {
    background-color: #433d45; }

.preview-canvas {
  image-rendering: optimizeSpeed;
  /* Legal fallback */
  image-rendering: -moz-crisp-edges;
  /* Firefox        */
  image-rendering: -o-crisp-edges;
  /* Opera          */
  image-rendering: -webkit-optimize-contrast;
  /* Safari         */
  image-rendering: optimize-contrast;
  /* CSS3 Proposed  */
  image-rendering: crisp-edges;
  /* CSS4 Proposed  */
  image-rendering: pixelated;
  /* CSS4 Proposed  */
  -ms-interpolation-mode: nearest-neighbor;
  /* IE8+           */ }

#layers-menu {
  scrollbar-color: #332f35 #232125;
  scroll-behavior: smooth;
  width: 200px;
  top: 48px;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: 0;
  background-color: #332f35;
  box-sizing: border-box;
  position: fixed;
  z-index: 1120;
  list-style-type: none;
  overflow-y: scroll;
  overflow-x: hidden; }
  #layers-menu::-webkit-scrollbar {
    background: #232125;
    width: 1em; }
  #layers-menu::-webkit-scrollbar-track {
    margin-top: -0.125em;
    width: 1em; }
  #layers-menu::-webkit-scrollbar-thumb {
    background: #332f35;
    border-radius: 0.25em;
    border: solid 0.125em #232125; }
  #layers-menu::-webkit-scrollbar-corner {
    background: #232125; }
  #layers-menu #add-layer-button {
    position: relative;
    justify-content: center;
    display: flex;
    align-items: center;
    margin-top: 2px;
    font-size: 1.2em;
    color: #b3adb6;
    height: 100%;
    width: 100%;
    padding: 17px;
    background: none;
    border: none;
    cursor: pointer; }
    #layers-menu #add-layer-button path {
      fill: #746b79; }
    #layers-menu #add-layer-button svg {
      position: relative;
      margin-right: 10px; }
  #layers-menu #add-layer-button:hover {
    color: #ccc8ce;
    background-color: #433d45; }

.selected-layer {
  color: #fefefe;
  background-color: #5a535e !important; }
  .selected-layer ul.layer-buttons li.layer-button {
    visibility: visible; }
    .selected-layer ul.layer-buttons li.layer-button button svg path {
      fill: #b3adb6; }
    .selected-layer ul.layer-buttons li.layer-button:hover button svg path {
      fill: #e5e3e6; }

.layerdragover {
  margin-top: 5px;
  border-top: 3px solid #ccc8ce; }

.layers-menu-entry {
  cursor: pointer;
  margin-top: 2px;
  font-size: 1em;
  color: #b3adb6;
  background-color: #3d3940;
  display: inline-block;
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center; }
  .layers-menu-entry ul.layer-buttons {
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    height: 100%;
    list-style: none; }
    .layers-menu-entry ul.layer-buttons path {
      fill: #9a929e; }
    .layers-menu-entry ul.layer-buttons li:hover path {
      fill: #ccc8ce; }
    .layers-menu-entry ul.layer-buttons .layer-button {
      visibility: hidden;
      height: 50%; }
  .layers-menu-entry .lock-layer-button,
  .layers-menu-entry .hide-layer-button {
    background: none;
    border: none;
    cursor: pointer;
    height: 100%;
    position: relative; }
  .layers-menu-entry canvas {
    display: inline-block;
    height: 50px;
    width: 50px;
    background-color: lightgrey;
    left: 4px; }
  .layers-menu-entry p {
    right: 0;
    display: inline-block;
    padding-left: 10px;
    height: 18px;
    overflow: hidden;
    position: relative; }

.layers-menu-entry:hover {
  color: #ccc8ce;
  background-color: #433d45; }
  .layers-menu-entry:hover ul.layer-buttons li {
    visibility: visible !important; }

svg {
  pointer-events: none; }
  svg path {
    pointer-events: none; }

*:focus {
  outline: 0 !important; }

.weak {
  font-size: 0.8em;
  color: #817786; }

.drawingCanvas {
  cursor: url("/pixel-art-where-to-start/pencil-tool-cursor.png");
  border: solid 1px #fff;
  image-rendering: optimizeSpeed;
  /* Legal fallback */
  image-rendering: -moz-crisp-edges;
  /* Firefox        */
  image-rendering: -o-crisp-edges;
  /* Opera          */
  image-rendering: -webkit-optimize-contrast;
  /* Safari         */
  image-rendering: optimize-contrast;
  /* CSS3 Proposed  */
  image-rendering: crisp-edges;
  /* CSS4 Proposed  */
  image-rendering: pixelated;
  /* CSS4 Proposed  */
  -ms-interpolation-mode: nearest-neighbor;
  /* IE8+           */
  width: 400px;
  height: 400px;
  position: fixed;
  display: none;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.64);
  background-color: transparent; }

#checkerboard {
  z-index: 1; }

#pixel-canvas {
  z-index: 2;
  background: transparent; }

#tmp-canvas {
  z-index: 3;
  background: transparent; }

#vfx-canvas {
  z-index: -5000;
  background: transparent; }

#eyedropper-preview {
  position: absolute;
  width: 45px;
  height: 45px;
  border-radius: 30px;
  border: solid 10px red;
  z-index: 1200;
  display: none;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25), inset 0 0 6px 0 rgba(0, 0, 0, 0.2);
  pointer-events: none; }
  #eyedropper-preview.dark {
    box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.5), inset 0 0 6px 0 rgba(255, 255, 255, 0.5); }

#brush-preview {
  position: absolute;
  border: solid 1px #fff;
  z-index: 1200;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 0 2px 0 rgba(0, 0, 0, 0.5);
  pointer-events: none;
  left: -500px; }
  #brush-preview.dark {
    border: solid 1px #000;
    box-shadow: 0 0 3px 0 rgba(255, 255, 255, 0.8), inset 0 0 3px 0 rgba(255, 255, 255, 0.8); }

#canvas-view {
  bottom: 0px;
  left: 64px;
  right: 48px;
  top: 48px;
  cursor: none;
  position: fixed;
  display: block; }

#canvas-view-shadow {
  box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.4);
  position: fixed;
  bottom: 0px;
  left: 64px;
  right: 48px;
  top: 48px;
  display: block;
  pointer-events: none; }

#main-menu {
  height: 48px;
  left: 0;
  right: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #332f35;
  position: fixed;
  z-index: 1110;
  overflow: visible; }
  #main-menu > li {
    float: left;
    height: 100%; }
  #main-menu li button,
  #main-menu li a {
    color: #b3adb6;
    height: 100%;
    padding: 17px;
    background: none;
    border: none;
    cursor: pointer; }
  #main-menu li.selected {
    background-color: #433d45; }
    #main-menu li.selected > button {
      color: #ccc8ce; }
    #main-menu li.selected ul {
      display: block; }
  #main-menu li ul {
    display: none;
    position: absolute;
    top: 48px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: #433d45;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
    padding-bottom: 2px; }
    #main-menu li ul li {
      width: 100%; }
      #main-menu li ul li button,
      #main-menu li ul li a {
        width: 100%;
        text-align: left;
        padding: 8px 32px 8px 16px;
        font-size: 1em; }
        #main-menu li ul li button:hover,
        #main-menu li ul li a:hover {
          background-color: #5a535e;
          color: #fefefe; }
      #main-menu li ul li a {
        display: block;
        text-decoration: none;
        box-sizing: border-box; }
  #main-menu .disabled {
    color: #6f6e70 !important; }

/*app title*/
.logo {
  color: #675f6b;
  text-transform: uppercase;
  font-weight: bold;
  padding: 17px 10px 0;
  cursor: default;
  box-sizing: border-box; }

#data-holders {
  display: none; }

#tools-menu,
#colors-menu {
  list-style-type: none;
  top: 48px;
  bottom: 0;
  padding: 0;
  margin: 0;
  background-color: #332f35;
  box-sizing: border-box;
  position: fixed;
  z-index: 1120; }

#tools-menu {
  left: 0;
  width: 64px; }

#colors-menu {
  right: 200px;
  width: 48px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column; }
  #colors-menu li {
    width: 48px;
    flex-basis: 48px; }
    #colors-menu li:not(.noshrink) {
      flex-grow: 1; }
    #colors-menu li.noshrink {
      flex-grow: 0;
      flex-shrink: 0; }

#duplicate-color-warning {
  display: inline-block;
  visibility: hidden;
  margin-left: 5px;
  opacity: 0.75;
  cursor: help; }
  #duplicate-color-warning:hover {
    opacity: 0.9; }

.shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  position: relative; }

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0); }
  20%,
  80% {
    transform: translate3d(1px, 0, 0); }
  30%,
  50%,
  70% {
    transform: translate3d(-2px, 0, 0); }
  40%,
  60% {
    transform: translate3d(2px, 0, 0); } }

.color-edit-button {
  position: absolute;
  top: 3px;
  left: 0px;
  background: #332f35;
  padding: 6px 10px 3px 6px;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  transition: left 0.25s;
  z-index: -1;
  box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.2); }
  .color-edit-button path {
    fill: #746b79; }
  .color-edit-button:hover {
    background: #433d45; }
    .color-edit-button:hover path {
      fill: #9a929e; }
  .color-edit-button.hidden {
    left: 0px !important; }

#colors-menu li:hover .color-edit-button {
  display: block;
  left: -32px; }

#colors-menu li.selected:hover .color-edit-button {
  display: block;
  left: -35px; }

#tools-menu li,
#colors-menu li {
  position: relative; }

#colors-menu li button {
  height: 100%;
  display: block; }

.color-value {
  display: none; }

#add-color-button {
  background: #332f35; }
  #add-color-button path {
    fill: #6f6873; }

#tools-menu li button:first-child {
  text-align: center;
  border: none;
  background: none;
  width: 100%;
  padding: 0;
  cursor: pointer;
  height: 64px; }

#tools-menu li button path {
  fill: #746b79; }

#tools-menu li:hover button:first-child path {
  fill: #9a929e; }

#colors-menu li button {
  border: none;
  width: 100%;
  cursor: url("/pixel-editor/eyedropper.png"), auto; }

#colors-menu li.selected button::before {
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  left: -3px;
  border: solid 3px #fff;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.15);
  z-index: 10; }

#colors-menu li.selected button::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: solid 1px rgba(0, 0, 0, 0.15);
  width: 100%;
  height: 100%;
  box-sizing: border-box; }

#colors-menu li.noshrink button {
  cursor: pointer; }

#tools-menu li.selected {
  background: #5a535e !important; }

#tools-menu li.selected button:first-child path {
  fill: #b3adb6; }

#tools-menu li.selected.expanded {
  padding-bottom: 10px; }

#tools-menu li:hover,
#main-menu li button:hover,
#add-color-button:hover,
#main-menu li.open {
  background: #433d45; }

.tools-menu-sub-button {
  text-align: center;
  border: none;
  background: none;
  cursor: pointer;
  width: 50%;
  height: 22px;
  display: none;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  bottom: 0; }
  .tools-menu-sub-button path {
    fill: #b3adb6 !important; }
  .tools-menu-sub-button:hover {
    background: #746b79 !important; }
    .tools-menu-sub-button:hover path {
      fill: #e5e3e6 !important; }

#tools-menu li button#pencil-bigger-button,
#tools-menu li button#zoom-in-button,
#tools-menu li button#eraser-bigger-button,
#tools-menu li button#rectangle-bigger-button {
  left: 0; }

#tools-menu li button#pencil-smaller-button,
#tools-menu li button#zoom-out-button,
#tools-menu li button#eraser-smaller-button,
#tools-menu li button#rectangle-smaller-button {
  right: 0; }

#tools-menu li.selected button#pencil-bigger-button,
#tools-menu li.selected button#pencil-smaller-button,
#tools-menu li.selected button#zoom-in-button,
#tools-menu li.selected button#zoom-out-button,
#tools-menu li.selected button#eraser-bigger-button,
#tools-menu li.selected button#eraser-smaller-button,
#tools-menu li.selected button#rectangle-bigger-button,
#tools-menu li.selected button#rectangle-smaller-button {
  display: block; }

#pop-up-container {
  position: fixed;
  z-index: 2000;
  width: 100%;
  height: 100%;
  background-color: rgba(35, 32, 36, 0.75);
  display: none;
  color: #b3adb6;
  cursor: default; }
  #pop-up-container > div {
    background: #332f35;
    border-radius: 3px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    width: 400px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; }
  #pop-up-container h1 {
    margin: 0 0 10px;
    color: white;
    text-transform: uppercase;
    font-size: 1.5em; }
  #pop-up-container h2 {
    margin: 25px 0 10px;
    color: #e5e3e6;
    text-transform: uppercase;
    font-size: 1em; }
  #pop-up-container a {
    color: white;
    border-bottom: dotted 1px transparent;
    text-decoration: none; }
    #pop-up-container a:hover {
      border-bottom: dotted 1px #b3adb6; }
  #pop-up-container .close-button {
    width: 32px;
    height: 32px;
    position: absolute;
    right: 0;
    top: 0;
    background: transparent;
    border: none;
    color: #746b79;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    border-radius: 0 3px 0 0; }
    #pop-up-container .close-button path {
      fill: #746b79; }
    #pop-up-container .close-button:hover {
      background: #433d45; }
      #pop-up-container .close-button:hover path {
        fill: #9a929e; }
  #pop-up-container button.default {
    float: right;
    background: #433d45;
    border: none;
    border-radius: 4px;
    color: #ccc8ce;
    padding: 10px 20px;
    cursor: pointer;
    margin: 20px 0 0 10px; }
    #pop-up-container button.default:hover {
      background: #5a535e; }
  #pop-up-container input {
    background: #262327;
    border: none;
    border-radius: 4px;
    color: #b3adb6;
    padding: 10px 20px;
    margin: 0;
    width: 60px;
    text-align: center; }
  #pop-up-container .dropdown-button {
    background: #433d45 url("/pixel-editor/dropdown-arrow.png") right center no-repeat;
    border: none;
    border-radius: 4px;
    color: #ccc8ce;
    padding: 5px 20px 5px 5px;
    cursor: pointer;
    margin: 0;
    width: 200px;
    text-align: left; }
    #pop-up-container .dropdown-button:hover {
      background: #5a535e url("/pixel-editor/dropdown-arrow-hover.png") right center no-repeat;
      color: #fefefe; }
    #pop-up-container .dropdown-button.selected {
      border-radius: 4px 4px 0 0; }
  #pop-up-container .dropdown-menu {
    background: #433d45;
    border: none;
    color: #ccc8ce;
    padding: 0;
    margin: -1px 0 0 0;
    width: 200px;
    text-align: left;
    position: absolute;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    display: none; }
    #pop-up-container .dropdown-menu.selected {
      display: block; }
    #pop-up-container .dropdown-menu button {
      background: #433d45;
      border: none;
      color: #ccc8ce;
      padding: 5px 20px 5px 5px;
      cursor: pointer;
      margin: 0;
      width: 100%;
      text-align: left; }
      #pop-up-container .dropdown-menu button:hover {
        background: #5a535e; }

.keyboard-key {
  background: #675f6b;
  box-shadow: 0 3px 0 2px #524c55;
  padding: 0 4px;
  border-radius: 2px;
  margin: 6px;
  display: inline-block;
  color: #c0bfc1; }

#settings-container {
  display: flex;
  align-items: baseline; }
  #settings-container label {
    flex: 1; }
  #settings-container input {
    width: 90px !important;
    display: block;
    box-sizing: border-box; }

.preload {
  display: none; }

#new-pixel-warning {
  display: none;
  text-align: center;
  margin: 20px 0 0;
  font-style: italic; }

.dimentions-x {
  margin: -2px 7px; }
  .dimentions-x path {
    fill: #746b79; }

.jscolor-picker-bottom {
  display: none;
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -7px;
  color: #b3adb6; }
  .jscolor-picker-bottom span {
    margin-left: 5px; }
  .jscolor-picker-bottom input {
    width: 64px;
    background: #262327;
    color: #b3adb6;
    border-radius: 4px;
    border: none;
    margin: 0;
    padding: 3px 12px;
    margin-left: 5px; }

.delete-color-button {
  background: none;
  padding: 0px;
  border: none;
  text-align: center;
  cursor: pointer;
  float: right; }
  .delete-color-button path {
    fill: #746b79; }
  .delete-color-button:hover path {
    fill: #9a929e; }
  .delete-color-button.disabled {
    cursor: not-allowed; }
    .delete-color-button.disabled path {
      fill: #4d4750 !important; }

#no-palette-button {
  display: none; }

#cookies-disabled-warning {
  display: none;
  color: #817786;
  font-style: italic; }

#editor-mode-info {
  font-style: italic; }

#editor-mode {
  display: none; }

#compatibility-warning {
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  z-index: 3000;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(35, 32, 36, 0.92);
  color: #b3adb6; }
  #compatibility-warning div {
    position: relative;
    width: 100%;
    height: 100%; }
    #compatibility-warning div div {
      width: 400px;
      background-color: #332f35;
      padding: 20px;
      width: 400px;
      height: 200px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -120px 0 0 -220px; }
  #compatibility-warning a {
    color: white;
    border-bottom: dotted 1px transparent;
    text-decoration: none; }
    #compatibility-warning a:hover {
      border-bottom: dotted 1px #b3adb6; }
  #compatibility-warning button {
    background: #433d45;
    border: none;
    border-radius: 4px;
    color: #ccc8ce;
    padding: 10px 20px;
    cursor: pointer;
    margin: 0 auto;
    display: block; }
    #compatibility-warning button:hover {
      background: #5a535e; }