html,
 body {
     height: 100%;
     padding: 0;
     margin: 0;
     font-family: arial;

 }

 #map {
     position: absolute;
    // left: 0%;
     width: 100%;
     height: 100%;
     //  border-style: solid;
     // border-color: black;
     // border-width: thin;

 }

 #query_tab {   
    position: absolute;      
     top: 45px;
     right: 390px !important;
     border: 1px solid grey;
     border-radius:2px;
     z-index: 6;
     //padding: 2px 4px;     
     
     height: 0%;
     overflow: scroll;
     min-width: 300px;
     right: 10px;
     
     background-color: #ffffff;    
     font-weight: bold;
     visibility: hidden;
 }

 #nav_wms {   
    position: absolute;      
     top: 45px;
     right: 350px !important;
     border: 1px solid grey;
     border-radius:2px;
     z-index: 6;
     //padding: 2px 4px;     
     
     height: 0%;
     overflow: scroll;
     min-width: 300px;
     right: 10px;

     background-color: #ffffff;    
     font-weight: bold;
     visibility: hidden;

     #nav-attributes,
     #nav-draw {
         padding: 10px;
         background-color: #FFFFFF;
         width: 100%;

         select,
         input {
             width: 100%;
             background-color: #F2F2F2;
         }         

         label {
             color: #505050;
             font-weight: 700;
             font-size: 13px;
         }
     }
 }
 .container-btn-wms{
    display: flex;    
    justify-content: space-between;
    .btn-load-layer {
        background-color: #e40412;
        border: none;
        border-radius: 3px;
        font-weight: 600;
        padding: 5px;
        color: #FFFFFF;
        font-size: 13px;
        width: 45%;
    }

    .btn-load-primary{
       background-color: #74992e;
       border: none;
       border-radius: 3px;
       font-weight: 600;
       padding: 5px;
       color: #FFFFFF;
       font-size: 13px;
       width: 45%;
    }
 }

 .input-disabled {
    background-color: #eee;
    color: #888;
    pointer-events: none;
    opacity: 0.6;
  }

 #legend {
     z-index: 6;
     padding: 2px 4px;
     border: 1px solid grey;
     position: absolute;
     top: 40%;
     height: auto !important;
     overflow: scroll;
     min-width: 240px;
     left: 10px;
     min-height: auto !important;
     max-height: 450px;
     background-color: #ffffff;    
     font-weight: bold;
     visibility: visible;
     img{
        display: block;   
     }
 }
 

 #layer {
     position: relative;
     width: 85%;
 }

 #attributes {
     position: relative;
     width: 85%;
 }

 #operator {
     position: relative;
     width: 85%;
 }

 #value {
     position: relative;
     width: 85%;
 }

 #wmsExtern {
    position: relative;
    width: 85%;
}

 #layer1 {
     position: relative;
     width: 85%;
 }

 #draw_type {
     position: relative;
     width: 85%;
 }


 #table_data {
     position: absolute;
     bottom: 0%;
     overflow: scroll;
     left: 0%;
     right: 0%;
     height: 0%;
    
     /* border: 1px solid #4CAF50; */     
     z-index: 7;
     #table{
        //height: 500px;
        width: 99vw;
        tbody{
            width: 99vw;
            //background-color: red !important;            
        }
     }
 }

 #table {    
    //display: grid;
    width: 99vw;
     white-space: nowrap;
     grid-template-areas: "head-fixed" "body-scrollable";
     font-size: 11px;
     background-color: #FFF;
     border: 1px solid grey; 
     padding: 5px 1px;
 }

 #caption { 
//position: sticky;
//right: 0;            /* Se fija al inicio (arriba) del contenedor */
z-index: 20;    
width: 99vw;
padding-right: 10px;
text-align: end;
background: linear-gradient(to left, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 50%);
     .btn-descargar {
         background-color: rgb(122, 209, 100);
         color: #fff;
         padding: 4px 6px;
         margin-left: 5px;
         border: none;
         border-radius: 2px;
         font-size: 10px;
         width: 110px;
     }

     .btn-alert {        
        background-color: red;
        color: #fff;
        padding: 4px 6px;
        margin-left: 5px;
        border: none;
        border-radius: 2px;
        font-size: 10px;
        width: 110px;
    }

    .btn-blue {        
        background-color: blue;
        color: #fff;
        padding: 4px 6px;
        margin-left: 5px;
        border: none;
        border-radius: 2px;
        font-size: 10px;
        width: 180px;
    }

    .btn-blue i {
        color: #fff;
        margin-right: 5px;
        font-size: 10px;
    }

    .btn-blue:hover {
        filter: brightness(1);
        /* transform: scale(1.05);   */
        /* filter: brightness(1.2) blur(1px);  */
    }

    .btn-alert i {
        color: #fff;
        margin-right: 5px;
        font-size: 10px;
    }

    .btn-alert:hover {
        filter: brightness(1);
        /* transform: scale(1.05);   */
        /* filter: brightness(1.2) blur(1px);  */
    }

     .btn-descargar i {
         color: #fff;
         margin-right: 5px;
         font-size: 10px;
     }

     .btn-descargar:hover {
         filter: brightness(1);
         /* transform: scale(1.05);   */
         /* filter: brightness(1.2) blur(1px);  */
     }
     
 }

 #table th {
     position: -webkit-sticky;
     /* for Safari */
     position: sticky;
     top: 0px;
     background-color: #8c8c8c;
     color: #FFF;
     /* background-color: rgb(122, 209, 100); */
     padding: 2px;
     text-align: center;
 }
 #table td {

    padding: 2px;
 }

/*  #legend_btn {
     position: absolute;
     z-index: 600;
     bottom: 2%;
     right: 0%;
 } */


 #table_wms_layers {
     white-space: nowrap;
     grid-template-areas: "head-fixed" "body-scrollable";
 }

 #table_wms_layers th {
     position: -webkit-sticky;
     /* for Safari */
     position: sticky;
     top: 0px;
     background-color: #8c8c8c;
     color: #FFF;
     /* background-color: rgb(122, 209, 100); */
 }


 .modal-dialog {
     max-width: 600px !important;
     height: 400px !important;
     top: 18% !important;
     .modal-content {
        text-align: justify;
        padding: 20px 20px;
        background-color: rgba(255, 255, 255, 0.7);
        .modal-header{  
            
            .modal-title{
                font-size: 20px;  
                font-weight: 700;
                color: #444;          
            }
        }
        .modal-body{  
            .img-modal-container{
                width: 100%;                
                text-align: center;
                img{
                    width: 100px;
                    height: 100px;
                    pointer-events: none;
                    user-select: none;
                }
            }
          
            .modal-title{
                font-size: 18px;   
                text-align: center; 
                font-weight: 700;
                color: #444;                 
            }
            span{
                font-size: 12px;
                font-weight: 200;                     
                color: #444;
            }
            .btn-footer{
                text-align: end;                                
            }
        }
     }
 }

 /*.form-select {
     left: 0%;
     width: 85% !important;

 }*/

 /*.form-control {
     left: 0%;
     width: 85% !important;

 }*/
 #query_panel_btn {
     position: absolute;
    
     top: 60%;
     left: 1%;
     min-width: 200px;
 }

 #info_btn {
     position: absolute;
     
     top: 65%;
     left: 1%;
     min-width: 200px;
 }

 /*  #clear_btn {
     position: absolute;
     z-index: 500;
     top: 70%;
     left: 1%;
     min-width: 200px;
     background-color: #e40412;
     color: #FFF;
     border: none;
 } */

  #scale_bar {
     position: absolute;
     z-index: 500;
     bottom: 10%;
     left: 20%;
 }

 #scale_bar1 {     
     font-weight: bold;
     position: absolute;
     z-index: 500;
     top: 35vh;
     left: 0.5em;
     font-size:13px;
 }

#btn_manual{
    display: flex;
    flex-direction: row;
    background-color: blue;
    img{
        width: 30px; height: 30px; margin-right: 5px;
    }
}

 #logo2 {
     position: absolute;     
     top: 1%;
     left: 220px;
     width: 200px;
     height: 3%;
     background-color: #74992e;
 }





 .ol-popup-content {
     overflow: auto !important;
     scrollbar-width: thin;
     max-width: 500px;
     height: auto;
     max-height: 450px;
 }

 .ol-scale-step-text {
     //color: red;
 }

 .ol-scale-text {
     //color: red;
     font-weight: bold;
 }

 .layer-switcher.shown {
     max-height: 465px;
 }

 .ol-control {
     background-color: transparent;     
 }

 .ol-control button {
    background-color: rgba(4, 60, 20);
    border-radius: 4px;
    background-color:green !important;
 }

 .ol-control button:hover {
    background-color: rgba(40, 40, 40, 1) !important;
 }



 .ol-control:hover{
    background-color: transparent;
 }

.ol-mouse-position {
     top: 95%;
     left: 1%;
     position: absolute;
     font-size: 14px;
     font-weight: bold;
 }
 .ol-control.ol-layerswitcher{
    top: 50px;
 }

 .ol-control.ol-print {
    top: 50px;
    left: 0.5em;
}

 .ol-zoom-extent {    
     top: 80px;
     left: 0.5em;
     position: absolute;
 }

 .ol-zoom {    
    top: 110px;
}

 .ol-zoomslider {    
     top: 170px;
     left: 0.5em;
     position: absolute;
     height: 120px;
     background-color: rgba(255, 255, 255, .4) !important;
 }

 .ol-zoomslider:hover{
    background-color: rgba(255, 255, 255, .4);
 }

 .ol-geocoder.gcd-gl-container {
     top: 21.875em;
     left: 0.5em;
     position: absolute;

 }

 .ol-layerswitcher > button::after{
    background: red !important;
    background: #fff !important;
 }

 .ol-layerswitcher > button::before{
    background: yellow !important;
    background: greenyellow !important;
 }

 .tooltip {
     position: relative;
     background: rgba(0, 0, 0, 0.5);
     border-radius: 4px;
     color: white;
     padding: 4px 8px;
     opacity: 0.7;
     white-space: nowrap;
 }

 .tooltip-measure {
     opacity: 1;
     font-weight: bold;
 }

 .tooltip-static {
     background-color: #ffcc33;
     color: black;
     border: 1px solid white;
 }

 .tooltip-measure:before,
 .tooltip-static:before {
     border-top: 6px solid rgba(0, 0, 0, 0.5);
     border-right: 6px solid transparent;
     border-left: 6px solid transparent;
     content: "";
     position: absolute;
     bottom: -6px;
     margin-left: -7px;
     left: 50%;
 }

 .tooltip-static:before {
     border-top-color: #ffcc33;
 }

 #nav-tab {
     button {
         background-color: #F0F0F0;
         width: 50%;
     }
 }

 .tab-content {
     display: flex;
     flex-direction: row;
     background-color: #FFFFFF;
     padding: 10px;

     #nav-attributes,
     #nav-draw {
         padding: 10px;
         background-color: #FFFFFF;
         width: 100%;

         select,
         input {
             width: 100%;
             background-color: #F2F2F2;
         }

         .btn-load-layer {
             background-color: #e40412;
             border: none;
             border-radius: 3px;
             font-weight: 600;
             padding: 10px;
             color: #FFFFFF;
             font-size: 14px;
             width: 60%;
         }

         label {
             color: #505050;
             font-weight: 700;
             font-size: 13px;
         }
     }
 }

 .nav-link {
     color: #505050;
     padding: 5px 0;
 }

 .nav-tabs .nav-item.show .nav-link,
 .nav-tabs .nav-link.active {
     color: #043c14;
     background-color: green !important;     
     color: #fff;
     border: 0;
     border-radius: 0;
 }

 .header-princ {
     position: absolute;
     top: 0%;
     height: 45px;
     background-color: rgba(4, 60, 20, 0.5);
     z-index: 5;
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 10px;
     padding: 0 10px;

     #logo {
         height: 30px;
     }
     #logo3 {                
        height: 30px;
        border: 0;
    }

     #wms_layers_btn {
         height: 28px;
         padding: 0 2px;

     }

     #measuretype {
         height: 28px;
         width: 120px;
     }

     #selectWms {
        height: 28px;
        max-width: 200px;
    }

     .icon-head {
         padding: 0px;
         color: #FFF;
         cursor: pointer;
         height: 23px;
         font-size: 23px;
     }
 }

 .spacer-flex-end {
     flex: 1 1 auto;
 }

 .btn-head {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 3px;
     height: 32px;
 }


 #loaderInitial {
    position: fixed;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    z-index: 9999;
    gap: 10px;
    .imgLoading{
        width: auto;
        height: 80px;
    }
    .spinner {
        width: 50px;
        height: 50px;
        border: 6px solid #ccc;
        border-top-color: #333;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    p{
        font-size: 14px;
    }
}

/* Ocultar el mapa inicialmente */
#mapLoader {    
    width: 100%;
    height: 100vh;
}

@media (max-width: 899px) {
    #loaderInitial {
        .imgLoading {
            width: auto;
            height: 30px;
        }
    }

    .header-princ {         
        top: 0%;
        height: auto;
        justify-content: center;
        flex-wrap: wrap;        
        padding: 5px;

        #logo {
            height: 25px;
        }

        #logo3 {
            height: 25px;
            border: 0;
        }

        #wms_layers_btn {
            height: 28px;
            padding: 0 2px;
        }

        #measuretype {
            height: 18px;
            width: 170px;
            display: none;
        }

        #selectWms {
            display: none !important;
            height: 18px;
            max-width: 200px;
        }

        .icon-head {
            height: 18px;
            font-size: 18px;
        }
    }

    .btn-head {
        padding: 3px;
        height: 23px;
    }

    .spacer-flex-end {
        display: none;
    }

    .modal-dialog {
        max-width: 500px !important;
        height: 65vh !important;
        overflow-y: auto;

        .modal-content {
            text-align: justify;
            padding: 1px 1px;
            background-color: rgba(255, 255, 255, 0.9);

            .modal-header {              
                padding-bottom: 0;
                padding-top: 0;
                margin-bottom: 0;
                .modal-title {
                    font-size: 12px;
                    font-weight: 700;
                    color: #444;
                }
            }

            .modal-body {
                padding-top: 0;
                margin-top: 0;

                .img-modal-container {
                    display: none;
                }

                span {
                    font-size: 9px;
                    font-weight: 200;
                    color: #444;
                }

                .btn-footer {
                    text-align: end;
                }
            }
        }
    }
 .ol-control.ol-layerswitcher{
    top: 70px;
 }
    .ol-control.ol-print {
        top: 70px;
        left: 0.5em;
    }
    
     .ol-zoom-extent {    
         top: 110px !important;
         left: 0.5em;
         position: absolute;
     }
    
     .ol-zoom {    
        top: 150px !important;
    }
    
     .ol-zoomslider {    
         top: 220px !important;
         left: 0.5em;
         position: absolute;
         height: 120px;
         background-color: rgba(255, 255, 255, .4) !important;
     }

}