html {
    background-color: #455a64;
}

body{
  margin : 0px;
  font-family: Arial;
}

form {
  padding : 10px;
}

a {
  text-decoration: none;
}

button {
  border : none;
}

#top{
  height : 40px;
  width : 100%;
  padding-left: 10px;
  color : white;
  font-size : 20px;
  line-height: 40px;
  position : fixed;
  background-color: #263238;
  text-align:center;
  z-index : 10;
}

.main{
  padding-top: 40px;
}

.main-col{
  position : fixed;
}

.main-col-abs{
  position : absolute;
}

#tools{
  width : 200px;
  left : 0;
  bottom: 0;
  top : 40px;
  background-color: #37474f;
}

#menuBrowser{
  width : 200px;
  left : 0;
  bottom: 0;
  top : 40px;
  background-color: #37474f;
}

.iconTool {
  width :  60px;
  margin-top: 10px;
}

form {
  padding : 0;
}

button {
  width : 180px;
  height: 40px;
  background-color: #455a64;
  text-align: center;
  font-size: 16px;
}

#saveForm {
  display: none;
}

#nameDrawInput {
  display: none;
}

#nameInput {
  margin-left: -200px;
  width : 400px;
  height : 75px;
  background-color: #37474f;
  position : fixed;
  bottom : 0px;
  left : 50vw;
  z-index: 10;
}

#nameInput input {
  margin-top : 27px;
  margin-left: 51px;
  font-size: 24px;
}

.titleSection{
  color : white;
  padding-left: 10px;
  margin-top: 30px;
  border-bottom: 1px solid white;
}

.titleSection:first-child{
  margin-top : 10px;
}

.file{
  height : 150px;
}

.file div {
  color : white;
  width : 180px;
  height : 40px;
  line-height: 40px;
  text-align: center;
  margin-left: 10px;
  margin-top: 10px;
  cursor : pointer;
  background-color: #455a64;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.file button {
  color : white;
  cursor : pointer;
}

.file div:hover{
  background-color: #607d8b;
  transition : 0.2s;
}

.file button:hover{
  background-color: #607d8b;
  transition : 0.2s;
}

#toolsList>div{
  display : inline-block;
  width : 48px;
  height : 48px;
  line-height: 80px;
  text-align: center;
  margin-left: 10px;
  margin-top: 10px;
  cursor : pointer;
  background-color: #455a64;
  user-select: none;
  background-repeat:no-repeat;
}

#toolsList>div:hover{
  background-color: #607d8b;
  transition : 0.2s;
}

.checked{
  background-color: #607d8b!important;
}

#colorPreview{
  width :100px;
  height: 100px;
  margin-top : 20px;
  margin-bottom : 20px;
  margin-left: 45px;
  background-color: black;
  border: 5px solid #455a64;
}

.backgroundInput {
  border : 2px solid #455a64;
  margin-left: 20px;
  width : 160px;
  height: 22px;
  background-color: red;
}

.colorInput{
  width : 160px;
  margin-left: 0px;
}

.colorInputDecimal{
  width : 40px;
  margin-left: 10px;
}

.colorInputDecimal:first-child{
  margin-left: 20px;
}

#historyColor{
  margin-left: 10px;
  margin-top: 20px;
  width : 175px;
}

#historyColor div{
  border : 4px solid #455a64;
  margin-left: 10px;
  margin-top: 5px;
  display : inline-block;
  background : black;
  height : 25px;
  width : 25px;
  cursor: url(../img/cursor/pipette.png) 0 18, pointer;
}

.stickySection{
  display: table;
  height: 100%;
  width: 100%;
}

.verticalCentered {
  display: table-cell;
  vertical-align: middle;
}

#view {
  left : 200px;
  right : 200px;
  top : 40px;
  bottom: 0;
}

#viewGallery {
  left : 200px;
  top : 40px;
  bottom: 0;
}

#layers{
  width : 200px;
  right: 0;
  bottom : 0;
  top : 40px;
  background-color: #37474f;
  color : white;
}

#transform{
  height : 58px;
}

#transform>div {
  display : inline-block;
  width : 38px;
  height : 38px;
  line-height: 40px;
  text-align: center;
  margin-left: 10px;
  margin-top: 10px;
  cursor : pointer;
  background-color: #455a64;
  user-select: none;
}

#transform>div:hover{
  background-color: #607d8b;
  transition : 0.2s;
}

#luminosity>div {
  display : inline-block;
  width : 38px;
  height : 38px;
  line-height: 40px;
  text-align: center;
  margin-left: 40px;
  margin-top: 10px;
  cursor : pointer;
  background-color: #455a64;
  user-select: none;
}

#luminosity>div:hover{
  background-color: #607d8b;
  transition : 0.2s;
}

.iconTransform{
  width : 28px;
  margin : 5px;
}

#sheet {
  display : block;
  margin-left: auto;
  margin-right: auto;
  user-select: none;
}

.rowSheet{
  display : inline-block;
}

.pixel:hover {
  filter: brightness(0.7);!important;
}

.drawPreview {
  margin : 20px;
  display : inline-block;
  user-select: none;
  width : 240px;
  height : 260px;
  background-color: #37474f;
}

.rowDrawPreview{
  margin-left : 20px;
  width : 200px;
  height: 4px;
}

.pixelDrawPreview {
  display : inline-block;
  width : 4px;
  height : 4px;
}

.titleDraw {
  margin-top: 10px;
  color : white;
  text-align : center;
}


#pencilTool{
  background-image: url("../img/icon/pencil.png");
}

#eraserTool{
  background-image: url("../img/icon/eraser.png");
}

#bucketTool{
  background-image: url("../img/icon/bucket.png");
}

#superBucketTool{
  background-image: url("../img/icon/superBucket.png");
}

#pipetteTool{
  background-image: url("../img/icon/pipette.png");
}

#pencilMirrorVTool{
  background-image: url("../img/icon/mirpencilV.png");
}

#pencilMirrorHTool{
  background-image: url("../img/icon/mirpencilH.png");
}

#brightenTool{
  background-image: url("../img/icon/brighten.png");
}

#darkenTool{
  background-image: url("../img/icon/darken.png");
}