img {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none; 
    user-select: none;
}

.appContainer{
    position: fixed;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;

    width: 100%;
    height: 100%;

    /* border-style: solid;
    border-color:#6494FA;
    border-width: 1px; */

    /* display: table;
    vertical-align: top; */
}

.BarraSuperior{
position: fixed;
/* top: calc(1vh); */

width: calc(100%);
/* height: auto;  */
height: 8%;

display: flex;
align-items: center;

position: relative;
z-index: 2;

/* esto sirve para poder difuminar el fondo */
/* backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
-moz-backdrop-filter: blur(3px); */

}

.FondoBarra{
    position: absolute;
    top: 0px;
    left: 0px;
    height:  100%;
    width: 100%;
    background-color: rgba(60, 60, 60,1);
    opacity: 0.8;

}

#BarraSuperiorFlex{
    display: inline-flex;
    width: auto;
    margin: auto;

    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    
}
/* #BarraSuperiorFlex{ */

.mapContainer {
    

    z-index: 2;
    position: fixed;
    top: 0px;
    width: 100%; 
    /* height: calc(85.9% - 3px); */
    height: 100%;
}


.BarraInferior{
z-index: 3;
position: fixed;
bottom: 0px;
width: 100%;
/* height: 6%; */
height: 40px;
background-color: #65E1F0;

display: inline-flex;
align-items: center;
justify-content: space-between;
vertical-align: middle;

}

/* .wrapper { } */

#layerDisplayContainer{
    overscroll-behavior: none;
    pointer-events:none;
    position: fixed;

    left: -1;
    top: 8%;
    
    width: calc(7% + 220px);
    height: calc(100% - 8% - 40px);

    display: flex;
}

.LayerDisplay {
    overscroll-behavior: none;
    touch-action: pan-y;
    pointer-events: all;
    display: inline;
    
    width: 100%;
    height: 100%;
    /* background-color: rgba(101, 225, 240, 0.6); */
    
    direction: rtl;
    
    overflow-y: auto;
    overflow-x: hidden;

    position: relative;
}
    
.ol-attribution{
bottom: 100px;    
}

.LayerElement{
    /* cursor: grab; */
    touch-action: pan-y;
    -webkit-user-drag: element;

    direction: ltr;

    /* background-color: rgba(101, 225, 240, 0.3); */
    line-height: 30px;

    vertical-align: center;    
    height: auto;
    width: auto;

    max-width: 100%;

    border-top: 1px;
    border-top-style: solid;
    border-bottom: 1px;
    border-bottom-style: solid;
    border-color:#6494FA;

    display: flex;    
}

/* .LayerElement:hover{
    background-color: rgba(88, 165, 214, 0.6);
} */

.LE_Checkbox_Container{
    /* cursor: pointer; */

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 30px;
    
    display: flex;
    align-items: center; 
    justify-items: center;
    justify-content: center;

    overflow: visible;
    
    border: 2px;
    border-top: 0px;
    border-bottom: 0px;
    border-style: solid;
    border-color: rgba(105, 105, 105, 0.3);
}

.LE_Checkbox_Container:hover{
    border-style: solid;
    border-color:#6494FA;
    background-color: rgba(100, 148, 250, 0.3);
}

.LE_Checkbox_Container:active{
    border-style: solid;
    border-color:#6494FA;
    background-color: rgba(57, 102, 197, 0.3);
}

.LE_Options_Container{

    cursor: alias;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 10%;

    background-color: rgba(101, 225, 240, 0.3);
    margin-left: auto;

    display: flex;
    align-items: center; 
    justify-items: center;
    justify-content: center;

    border: 2px;
    border-top: 0px;
    border-bottom: 0px;
    border-style: solid;
    background-color: rgba(100, 148, 250, 0.3);
}

.LE_Options_Container:hover{
    background-color: rgba(100, 148, 250, 0.3);
}

.LE_Options_Container:active{
    background-color: rgba(57, 102, 197, 0.3);
}

.LE_Options_Buton{

    color: #244488;

    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    padding-left: 5px;
    padding-right: 5px;

    text-align: center;
    align-content: center;
    vertical-align: middle;    
}

.LE_Name_Container{
    user-select: none;
    -webkit-user-select: none;

    padding-left: 5px;
    padding-right: 5px;

    padding-top: 3px;
    padding-bottom: 3px;
    
    line-height : 22px;

    max-width: 70%;
    word-wrap: break-word;

}

.LE_Name_Container.LE_Name_Disabled{
    opacity: 0.45;
}


.LE_Name_Text{
    
    pointer-events: none;

    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: medium; 
    font-weight: normal;
}


.LE_Name_Text_Imput{

    cursor: text;

    pointer-events: all;

    overflow-y: visible;

    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: medium;     
    
    /* font-weight: bold; */

    width: 100%;
    min-height: 17px;
    border: 1px solid #ccc;
    max-height: 150px;
    overflow-x: hidden;
    overflow-y: hidden;

    resize: vertical;

    background-color: #696969;
}

.Draggable{
    
    -webkit-user-drag: element;
}

.NoDraggable{
    -webkit-user-drag: none;
}

.LE_Format_Text{
    
    pointer-events: none;

    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    
    /* color: rgba(255, 255, 255, 0.4);; */
    
    opacity: 0.4;
    line-height: 0px;

    font-size: small; 
    text-align: left;
}

.LE_Fuente_Text{
    
    /* pointer-events: none; */

    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    
    color: rgb(255, 255, 255);    
    opacity: 0.6;
    line-height: 0px;

    font-size: small; 
    text-align: left;
}

.FuenteLink{
    /* pointer-events: none; */
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;    
    color: rgb(255, 255, 255);
    font-weight: bold;
}

.LE_State_Text{
    
    pointer-events: none;

    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    
    /* color: rgba(255, 255, 255, 0.4);; */
    
    opacity: 0.6;
    line-height: 0px;

    font-size: small; 
    text-align: left;
}

.editando{
    color: rgb(208, 255, 0);
}

.descargando{
    color: rgb(0, 255, 98);
}

.eliminando{
    color: rgb(255, 0, 0);
}

.LE_Checkbox_Container{
    background-color: rgba(101, 225, 240, 0.6);
}

.LE_Checkbox{
    display: none;
    pointer-events: none;

    width: 15px;
    height: 15px;

    align-self: center;
    justify-self: center;
}

.LE_Icon{
    pointer-events: none;
    width: 80%;
}
.hideLayerDisplay{

    touch-action: none;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;

    pointer-events: all;

    white-space: pre-line;

    background-color: rgba(101, 225, 240, 0.6);

    color: #244488;

    border-color:#6494FA;
    font-weight: bolder;
    
    height: 40px;
    width: 40px;
    
    border-right-width: 2px;
    border-left-width: 0px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;

    display: flex;
    text-align: center;
    vertical-align: middle;
    align-items: center;
    justify-content: center;

}

.hideLayerDisplay:hover{
    background-color: rgba(88, 165, 214, 0.6);
    border-color:#6494FA;
}

.hideLayerDisplay:active{
    background-color: rgba(100, 148, 250, 0.6);
    border-color:#6494FA;
}

.ContextMenu{
    touch-action: pan-x;

    z-index: 5;

    display: block;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    font-family: Arial, Helvetica, sans-serif;

    position: absolute;
    top: calc(11.5vh);
    /* left: calc( ((7% + 200px)/10)*9 ); */
    left: calc((7% + 220px - 36px));

    width: auto;
    height: auto;

    pointer-events: all;
    background-color: rgba(101, 225, 240, 0.5);
    
    padding: 5px;
    
    border-style: solid;
    border-radius: 5px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-color:#6494FA;
    border-width: 2px; 
    border-left-width: 0px; 
}

/* para esconder el selector  de tab de google */
*,*:focus,*:hover{
    outline:none; 
}

.CM_ToolTip{
    touch-action: pan-x;
    display: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    margin-bottom: 5px;
    border-bottom: 1px;
    border-bottom-style: solid;
    border-color:#6494FA;
}

.CM_Buton{
    touch-action: pan-x;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    pointer-events: fill;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;

    margin-left: 1px;
    margin-right: 1px;

    padding: 2px;

    border-radius: 5px;
    background-color: rgba(101, 225, 240, 0.5);
  
    height: auto;
    width: auto;

    /* border: 1px;
    border-style: solid;
    border-color:#6494FA; */
    
    display: inline-flex;
}

.CM_Buton:hover{
    background-color: rgba(100, 148, 250, 0.5);
}

.CM_Buton:active{
    
    background-color: rgba(57, 102, 197, 0.5);
}

.CM_icon{
    align-self: center;

    padding: 1px;
    height: 30px;
    width: 30px;
}

.CM_Transparencia{
    height: auto;
    width: auto;
    border: 1px;
    border-top: 1px;
    border-top: 1px;

    border-style: solid;
    border-color:#6494FA;

    align-content: center;
    align-items: center;
}

.CM_TransText_Container{
    height: 25px;
    width: 150px;

    padding-top: 5px;
    padding-left: 20px;

    display: inline-flex;

    align-items: center;
    vertical-align:bottom;
}

.CM_TextoTransparencia{
    position: relative;
    align-self: top;
}

.CM_TransBarra_Container{
    height: 20px;
    width: 150px;
    padding: 5px;
    padding-top: 6px;
    display: inline-flex;
    
}

#CM_BarraTransparenciaInput0{
    position: relative;
    left:5px;
    /* top: -2px; */
    width: 150px;
    align-self: top;
}

#CM_BarraTransparenciaInput1{
    position: relative;
    /* left:-15px; */
    top: 1px;
    width: 150px;
    align-self: top;
}


.M_Separator{    
    margin:0.9%;
    margin-top:1vh;
    margin-bottom:1vh;

    padding-right: 2px;


    width: .05vh;
    height: 4vh;
    min-height: 1vh;
    min-width: 0.05vh;
    max-height: 4vw;
    max-width: 0.05vw;

    /* width: 0px;
    height: 4.3vh; */

    background-color: rgba(255, 255, 255, 0.5);
}

.M_Buton{    
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    margin-left: 3px;
    margin-right: 3px;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    pointer-events: fill;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;

    background-color: rgba(101, 225, 240, 0.5);
  
    width: 6.5vh;
    height: 6vh;
    min-height: 50%;
    min-width: auto;
    max-height: 90%;
    max-width: 10%;

    border-radius: 5px;

    align-self: center;

    display: flex;
    align-items: center;
    justify-content: center;
    
}

.M_icon{
    /* padding: 1px; */
    height: 80%;

    align-self: center;

    padding: 1px;
}

.LD_icon{
    /* padding: 1px; */
    height: 80%;
}

/* 
.M_Buton:hover{
    box-shadow: 2.5px 2.5px 10px rgba(0, 0, 0, 0.3);
    background-color: rgba(100, 148, 250, 0.5);
}

.M_Buton:active{
    box-shadow: 0.5px 0.5px 5px rgba(0, 0, 0, 0.2);
    background-color: rgba(57, 102, 197, 0.5);
} */

.BI_Div{
    font-size: smaller;
    width: auto;
    /* padding-right: 10px; */
    margin-left: 10px;
    margin-right: 10px;
    
}

.Bi_Coordenadas{
    white-space:pre;
    font-size: smaller;
    padding-top: 2px;    
}

.BI_Div_Container{
    height: 100%;

    display: inline-flex;
    justify-content: start;
    align-items: center;
}

#BI_CoordenadasLabel{
    padding-right: 5px ;
}



/* select {
    height: 70%;
    background-color: rgba(132, 235, 247, 0.8);
 }

 select:hover {
    background-color: rgba(100, 148, 250, 0.5);
 }

 select:active {
    background-color: rgba(100, 148, 250, 0.5);
 }

 option {    
    background-color: rgba(132, 235, 247, 0.8);
 }

 option:hover {
    background-color: rgba(100, 148, 250, 0.5);
 }

 option:active {
    background-color: rgba(100, 148, 250, 0.5);
 } */


 /* =========================== slider2 ============================= */

 input[type=range].slider2 {
    
    width: 100%;
    margin: -2px 0;
    background-color: transparent;
    -webkit-appearance: none;
  }

  input[type=range].slider2::-webkit-slider-runnable-track {
    background: rgba(120, 120, 120, 0.5);
    border: 2px solid rgba(140, 140, 140, 0.5);
    border-radius: 5px;
    width: 100%;
    height: 24px;
    cursor: pointer;
  }

  input[type=range].slider2:active::-webkit-slider-runnable-track {
    background: rgba(200, 200, 200, 0.5);
  }

  input[type=range].slider2:hover:-webkit-slider-runnable-track {
    background: rgba(200, 200, 200, 0.5);
  }

  input[type=range].slider2:focus:-webkit-slider-runnable-track {
    background: rgba(200, 200, 200, 0.5);
  }

  input[type=range].slider2::-webkit-slider-thumb {
    margin-top: 0px;
    width: 22px;
    height: 20px;
    background: rgba(60, 60, 60, 0.8);
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    -webkit-appearance: none;
  }

  input[type=range].slider2::-moz-range-track {
    background: rgba(120, 120, 120, 0.5);
    border: 2px solid rgba(140, 140, 140, 0.5);
    border-radius: 5px;
    width: 100%;
    height: 24px;
    cursor: pointer;
  }

  input[type=range].slider2:active::-moz-range-track {
    background: rgba(200, 200, 200, 0.5);
  }

  input[type=range].slider2:hover:-moz-range-track {
    background: rgba(150, 150, 150, 0.5);
  }

  input[type=range].slider2:focus:-moz-range-track {
    background: rgba(150, 150, 150, 0.5);
  }

  input[type=range].slider2::-moz-range-thumb {
    width: 22px;
    height: 20px;
    background: rgba(60, 60, 60, 0.8);
    border: 0;
    border-radius: 5px;
    cursor: pointer;
  }
  input[type=range].slider2::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: 0 0;
    color: transparent;
    width: 100%;
    height: 24px;
    cursor: pointer;
  }

  input[type=range].slider2:active::-ms-track {
    background: rgba(200, 200, 200, 0.5);
  }

  input[type=range].slider2:hover::-ms-track {
    background: rgba(150, 150, 150, 0.5);
  }

  input[type=range].slider2:focus::-ms-track {
    background: rgba(150, 150, 150, 0.5);
  }

  input[type=range].slider2::-ms-fill-lower {
    background: #5c5c5c;
    border: 2px solid rgba(140, 140, 140, 0.5);
    border-radius: 10px;
  }
  input[type=range].slider2::-ms-fill-upper {
    background: rgba(120, 120, 120, 0.5);
    border: 2px solid rgba(140, 140, 140, 0.5);
    border-radius: 10px;
  }

  input[type=range].slider2:active::-ms-fill-upper {
    background: rgba(200, 200, 200, 0.5);
  }

  input[type=range].slider2:hover::-ms-fill-upper {
    background: rgba(150, 150, 150, 0.5);
  }

  input[type=range].slider2:focus::-ms-fill-upper {
    background: rgba(150, 150, 150, 0.5);
  }

  input[type=range].slider2::-ms-thumb {
    width: 22px;
    height: 20px;
    background: rgba(60, 60, 60, 0.8);
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 0px;
    /*Needed to keep the Edge thumb centred*/
  }

  /*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
  how to remove the virtical space around the range input in IE*/
  @supports (-ms-ime-align:auto) {
    /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
    input[type=range].slider2 {
      margin: 0;
      /*Edge starts the margin from the thumb, not the track as other browsers do*/
    }
  }

   /* =========================== slider2 ============================= */

/*# sourceMappingURL=LayoutStyle.2ae8ae07.css.map */