html, body, #viewer, #container {
    padding: 0;
    margin: 0;
    height: 100%;
    font-size: 11px !important;
}

#viewer {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100% !important;
}

.viewerSelected {
    background-color: #066E62;
}

#toolbar button, a, button {
    cursor: pointer !important;
}

#toolbar {
     position: absolute;
    top: 10px;
    right: 20px;
    z-index: 40;
    padding: 1px 3px;
    transition: all 0.9s ease 0s;
    border-radius: 0px;
    opacity: 0.9;
    border-right: 0px solid #69BAC3;
    border-bottom: 0px solid #6ABEC2;
    width: 100%;
    text-align: right;
    height: 0px;
}


 
    #toolbar h1, #toolbar h6 {
        display: none;
    }

    #toolbar button {
    border: 0px;
    padding: 0px;
    background-color: rgba(255, 255, 255, 0.8);
    width: 34px;
    height: 34px;
    display: inline;
    position: relative;
    margin-right: 1px;
    /* margin-top: 38%; */
    /* top: -20px; */
    border: 1px solid #ccc;
    }


    #toolbar .active {
            background: #FFFFFF!important;
    border: 1px solid #ccc;
    }

    #toolbar button:hover {
           background: #FFFFFF!important;
    border: 1px solid #ccc;
    }

    #toolbar button:active {
          background: #759437!important;
    }

    #toolbar button:hover:after {
    background: #fff;
    border-radius: 5px;
    top: 100%;
    content: attr(alt);
    left: 0%;
    padding: 5px 15px;
    position: absolute;
    z-index: 999;
  
    clip: auto;
  
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: .2em .5em;
    margin-top: -.2em;
    border-radius: 4px;
    text-shadow: 0 0 1px #000;
    z-index: 9000;
    }

    #toolbar button:hover:before {
            border: solid;
    border-color: rgba(0, 0, 0, 0.6) transparent;
    border-width: 0px 6px 6px 6px;
    bottom: 0px;
    content: "";    
    position: absolute;
    z-index: 99;
        left: 40%;
    }

    #toolbar h6 {
        margin-bottom: 10px;
        display: none;
    }
 

        #toolbar button img {
              width: 23px !important;
    height: 23px !important;
        }

 


.scroll150 {
    border: solid 0px #A6C9E2;
    scrollbar-face-color: orange !important;
}

    .scroll150::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
    }

    .scroll150::-webkit-scrollbar {
        width: 12px;
    }

    .scroll150::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    }

#btnZoomIn img:hover, #btnZoomIn img:active, #btnZoomIn img:focus {
    content: url("../img/icon/zoomin_hover.png");
}

#btnZoomIn img:after:hover, #btnZoomIn img:after:active, #btnZoomIn img:after:focus {
    content: url("../img/icon/zoomin_hover.png");
}

#btnPan img:hover, #btnPan img:active, #btnPan img:focus {
    content: url("../img/icon/pan_hover.png");
}

#btnInitialExtent img:hover, #btnInitialExtent img:active, #btnInitialExtent img:focus {
    content: url("../img/icon/initialextent_hover.png");
}

#btnZoomOut img:hover, #btnZoomOut img:active, #btnZoomOut img:focus {
    content: url("../img/icon/zoomout_hover.png");
}

#btnPreviousExtent img:hover, #btnPreviousExtent img:active, #btnPreviousExtent img:focus {
    content: url("../img/icon/previousextent_hover.png");
}

#btnNextExtent img:hover, #btnNextExtent img:active, #btnNextExtent img:focus {
    content: url("../img/icon/nextextent_hover.png");
}

#divFeatures, #divFeatureDetail {
    border: 0px;
    overflow-x: auto;
}

    #divFeatures ul {
        padding: 0px;
    }

        #divFeatures ul li span::before {
            display: inline-block;
            font: normal normal normal 8px/1 FontAwesome;
            content: "\f054";
            margin-right: 4px;
        }

        #divFeatures ul ul {
            padding: 0 0 0 10px;
        }

            #divFeatures ul ul ul {
                padding: 0 0 0 20px;
            }

        #divFeatures ul li ul li span::before {
            display: inline-block;
            font: normal normal normal 12px/1 initial;
            content: none;
        }

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#divMeasureUnitLength, #divMeasureUnitArea {
    width: 100%;
}

#divClear {
display: inline-block;
text-indent: -1000px;
width: 30px !important;
float: right;
    margin-right: 5px !important;
}



 #divClear a {
    width: 30px;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
cursor: pointer;
 
overflow: inherit;
border: 0px none;
height: 30px !important;
border-radius: 36px;


padding: 0px !important;
   color:white;
 
background-image: url("../img/icon/btn/Limpiar.png");
display: block;
position: relative;
text-indent: -9990px;


width: 30px;
   height: 27px;
background-color: #43601C !important;
border: 2px solid #2D4417;
background-size: 25px 25px !important;
}
    #divClear a:hover {
        background-color: #fff !important;
    }

    #btnGraphicPoliticalDivision,   
    #btnPoint,
    #btnPolyline,
    #btnFreeHandPolyline,
    #btnRectangle,
    #btnCircle,
    #btnEllipse,
    #btnPolygon,
    #btnFreeHandPolygon,
    #btnText,  #btnLimpiar, #btnClear
    {
    color: #333;
      background-color: #fff !important;
    border-color: #ccc;
        width: 38px!important;
            height: 32px !important;
               transition: all 0.6s ease 0s;
    }


       #btnGraphicPoliticalDivision:hover,   
    #btnPoint:hover,
    #btnPolyline:hover,
    #btnFreeHandPolyline:hover,
    #btnRectangle:hover,
    #btnCircle:hover,
    #btnEllipse:hover,
    #btnPolygon:hover,
    #btnFreeHandPolygon:hover,
    #btnText:hover,  #btnLimpiar:hover ,#btnClear:hover
    {
     
          background-color: #EEEEEE !important;
   
        width: 38px!important;
            height: 32px !important;
    }



 

 #btnGraphicPoliticalDivision:hover:after ,
    .btnRemove:hover:after ,
    #btnAdd:hover:after ,
    #btnBusca:hover:after ,

   
    #btnPoint:hover:after ,
    #btnPolyline:hover:after ,
    #btnFreeHandPolyline:hover:after ,
    #btnRectangle:hover:after ,
    #btnCircle:hover:after ,
    #btnEllipse:hover:after ,
    #btnPolygon:hover:after ,
    #btnFreeHandPolygon:hover:after ,
    #btnText:hover:after , 
	#btnBuscar:hover:after , 
	#btnLimpiar:hover:after, #btnClear:hover:after 

 {
    background: #fff;
    border-radius: 5px;
    top: 100%;
    content: attr(title);
    left: 0%;
    padding: 5px 15px;
    position: absolute;
    z-index: 999;
  
    clip: auto;
  
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: .2em .5em;
    margin-top: -.2em;
    border-radius: 4px;
    text-shadow: 0 0 1px #000;
    z-index: 9000;
    }


 #btnGraphicPoliticalDivision:hover:before ,
    .btnRemove:hover:before ,
    #btnAdd:hover:before ,
    #btnBusca:hover:before,
    #btnPoint:hover:before ,
    #btnPolyline:hover:before ,
    #btnFreeHandPolyline:hover:before ,
    #btnRectangle:hover:before ,
    #btnCircle:hover:before ,
    #btnEllipse:hover:before ,
    #btnPolygon:hover:before ,
    #btnFreeHandPolygon:hover:before ,
    #btnText:hover:before , 
	#btnBuscar:hover:before , 
	#btnLimpiar:hover:before  ,
 #btnClear:hover:before

    {
            border: solid;
    border-color: rgba(0, 0, 0, 0.6) transparent;
    border-width: 0px 6px 6px 6px;
    bottom: 0px;
    content: "";    
    position: absolute;
    z-index: 99;
        left: 40%;
    }




#btnPoint {
    background:  url("../img/icon/btn/Point.png") no-repeat;
 
   
}

#btnPolyline {
    background: url("../img/icon/btn/PolyLine.png") no-repeat;
 
 
}

#btnFreeHandPolyline {
    background: url("../img/icon/btn/FreeHandPolyLine.png") no-repeat;
 
 
}

#btnRectangle {
    background:  url("../img/icon/btn/Rectangle.png") no-repeat;
 
   
}

#btnCircle {
    background:  url("../img/icon/btn/Circle.png") no-repeat;
  
 
}

#btnEllipse {
    background:  url("../img/icon/btn/Ellipse.png") no-repeat;
 
}

#btnPolygon {
    background:  url("../img/icon/btn/Polygon.png") no-repeat;
 
}

#btnFreeHandPolygon {
    background: url("../img/icon/btn/FreeHandPolygon.png") no-repeat;
 
         
}

#btnText {
    background: url("../img/icon/btn/Text.png");
   
   
}
#btnLimpiar,#btnClear {
    background: url("../img/icon/btn/Limpiar.png")no-repeat;
   
}
  

#btnBuscar  {
    background:  url("../img/icon/btn/Buscar.png");
    /* text-indent: -1e+7px; */
    overflow: hidden;
    padding-left: 26px;
    background-repeat: no-repeat;
    LINE-HEIGHT: 6PX;
    margin: 10px 0;
    background-size: 24px 24px;
    color:white;
}
 
#btnAdd {
  /*  background:#75A033 url("../img/icon/btn/Add.png")no-repeat;
  text-indent: 0;
margin: 3px 10px 3px 5px;
padding: 6px 12px 10px 28px !important;
   height: 27px;
line-height: inherit;
  color:white;*/
}

#btnGraphicCoordinate{
 
  color:white;
}
#btnGenerate, #btnSearch{

  color:white;
}



.btnRemove {
 
 
margin: 3px 10px 3px 5px;
padding: 5px 12px 5px 10px !important;
 
color: white;
border-radius: 3px;
}


#btnGraphicPoliticalDivision {
    background:#75A033 url("../img/icon/btn/Graphic.png")no-repeat;
 text-indent: 0;
}

#divMeasureUnitLength, #divMeasureUnitArea {
    display: block;
    clear: both;
    width: 100%;
}

@media (min-width: 1200px) and (max-width: 1366px) {
}

@media (min-width: 992px) and (max-width: 1199px) {
}

@media (min-width: 768px) and (max-width: 991px) {
}

@media (max-width: 767px) {
    #divSplash {
        display: block;
        width: auto;
        max-height: 250px !important;
        /* height: auto; */
        overflow-y: hidden;
    }

    .derecha {
        float: right !important;
        
        /* clear: both !important; */
    }

    #toolbar button {
        width: 30px;
        height: 30px;
        font-size: 12px;
         top: 0;
    }
 
        #toolbar button img {
            width: 30px;
            height: 30px;
        }

        #toolbar {
    
      top: 80px;
    right: 0;
    left: 38px; 
    text-align: left;
   
}
.buttonleft {
    float: left;
    display: block !important;
    clear: both;
    top: 0px;
    left: -10px;
    margin-bottom: 5px;
   
}
}

#divMousePosition {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 40;
    height: auto;
    padding: 1px 3px 1px 3px;
    transition: all 0.9s ease 0s;
    width: auto;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    opacity: 0.9;
}

@media (max-width: 320px) {
    #divSplash {
        display: block;
        width: auto;
        max-height: 150px !important;
        /* height: auto; */
        overflow-y: hidden;
    }

    #divMousePosition {
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 40;
        height: auto;
        padding: 1px 3px 1px 3px;
        transition: all 0.9s ease 0s;
        width: 100%;
        border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        opacity: 0.9;
    }
    #toolbar button {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

        #toolbar button img {
            width: 30px;
            height: 30px;
        }
}