* {
  box-sizing: border-box;
}

body{
  overflow: hidden;
}

#painting {
    /*
  display: grid;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  grid-gap: 10px;
  grid-template-areas: "btn1 btn2 btn3 btn4 btn5 btn6"
                       "lmain1 lmain2 lmain3 lmain4 lmain5 lmain"
                       "foot1 foot1 foot2 foot2 foot3 foot3";
  grid-template-rows: 1fr 90% 1fr; 
  grid-template-columns: 5% 5% 40% 20% 10% 10%;
 /* background-image: url("background.svg");*/
  /*background-position: center; */
  /*background-repeat: no-repeat;
  background-size: cover;*/
}

.botones {
  grid-area: btn3;
  display: flex;
  position:relative;
  z-index: 900000;
  justify-content: center;
  align-content: center;
 /*border:2px solid green;*/
 
}

.botonSlider {
  grid-area: btn4;
  display: flex;
  position:relative;
  z-index: 900000;
  justify-content: center;
  align-content: center;
 /*border:2px solid green;*/
 
}


.lado1 {
  grid-area: lmain3;
 /* position:relative;*/
  z-index: 900000;
 
 
}

.lado2 {
  grid-area: lmain4;
  position:relative;
  z-index: 800000;
 /* border:2px solid blue;
  background-image: url("palette-icon_ok.svg");
  background-position: right;
  background-repeat: no-repeat;*/

  
}



#canvas-container>canvas {
  position:absolute;
  right:0;
  top:0;

  border:2px solid black;
  

  
}

#dibujandoTodoCanvas{
  border:2px solid red;
}

#paletaCanvas {
  display:block;
  position:absolute;
  left:0;
  top:0;
  max-width: 100%;
  height: auto;
}
#paletaCanvasSide {
  display:none;
  position:absolute;
  left:0;
  top:0;
}


#imagenCanvas {
  background-color: #fff;
  
  /*z-index: 900000;*/
  }


/*****************************************/

  .container {
    width: 100%;
    /*margin: 50px auto;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  input[type=range] {
    width: 100%;
  }
  
  .buttonbtn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: white;
    font-size: 1rem;
    border: 1px solid lightgrey;
    cursor: pointer;
    -webkit-appearance: none;
    /*margin: 0 10px;*/
  }
  .containersvgpincel{
    /*width: 100%;*/
    margin: auto 5px;
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
    background-color: #fff;
    border: 1px solid black;
    border-radius: 5px;
  }
/**************************************/  










@media (orientation: portrait) {
    #painting {
    
      /*display: grid;
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      grid-gap: 10px;
      grid-template-areas: "btn1 btn2 btn3"
                           "slider1 slider2 slider3"
                           "lmain1 lmain2 lmain3"
                           "foot1 foot2 foot3";
      grid-template-rows: 10% 10% 75% 5%; 
      grid-template-columns: 1fr 90% 1fr;*/

    }
    
    .botones {
      grid-area: btn2;
      display: flex;
      position:relative;
      z-index: 900000;
      justify-content: center;
      align-content: center;
    
     
    }
    
    .botonSlider {
      grid-area: slider2;
      display: flex;
      position:relative;
      z-index: 900000;
      justify-content: center;
      align-content: center;
     /*border:2px solid green;*/
     
    }
    /*
    .container {
      grid-area: foot2;
      display: flex;
      position:relative;
      z-index: 900000;
      justify-content: flex-end;
      align-content: center;
    
     
    }
    
    */
    .lado1 {
      grid-area: lmain2;
    /*  position:relative;*/
      z-index: 900000;
     
     
    }
    
    .lado2 {
      grid-area: foot2;
     /* position:relative;*/
      z-index: 800000;
      right:0;
      top:0;

    
      
    }


    #canvas-container>canvas {
      position:absolute;
      left:0;
      top:0;
      width: auto;
      max-height: 100%;

      border:2px solid black;

      
    }
    
    #paletaCanvas {
      display:none;
      position:absolute;
      left:0;
      top:0;
    }

    #paletaCanvasSide {
      display:block;
      position:absolute;
      left:0;
      top:0;
    }

}