@charset "UTF-8";

html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px;}

h2 {
  font-weight: normal;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 16px;
  color:white;
  background-color: #555;
  margin: 0px 0px 0px 0px;
  padding: 3px;
  height:22px;
}

h3 {
  display: table;
  width: 100%;
  right: 0px;
  font-family: Verdana, sans-serif;
  font-size: 12px;
  padding: 2px 0px 2px 3px;
  font-weight: normal;
  color: rgb(255, 254, 254);
  background-color: rgb(122, 121, 121); 
  text-align: left;
  margin: 0px;
}


  /************ MENU */
/* TOOLBAR */
#rightPanel_show{
  position: fixed;
  right:0px;
  width: 25px;
  height: 25px;
  
  z-index:750;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;  
  background-color: #555;
  opacity: 0.97;
  color: white;
  font-size: 17px;
  cursor:pointer;
  display: block;
  text-align: center;
  padding: 5px;
}

#rightPanel ul {
    font-family:Arial, Helvetica, sans-serif;
    position: fixed;
    height: 42px;
    width: 300px;
    right:0px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #555;
    opacity: 0.97;
    z-index:750 ;
}

#rightPanel li {
    float: left;
}

#rightPanel li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px 13px;
    padding-right:0px;
    padding-left:15px;
    
    text-decoration: none;
   
}
#rightPanel_show {
  visibility: visible;
}

#rightPanel_hide{
  display: block;
  color: white;
  padding-top: 6px;
  border: none;
  background: #555;
  color: white;
  cursor: pointer;
  margin:10px,13px;

}
#rightPanel_hide:focus { outline: none; }

#rightPanel .active {
    color: rgb(237, 165, 113);
}


#ikalinks {
  position: absolute;
  right: 0;
  top: 41px;
  z-index: 1200;
  margin-right: 0;
  border: 1px solid #555;
  background-color: white;
}

/* ******* MAPA */ 
#map {
          position: absolute;
          width: 100%;
          height: 100%;
          top:0px;
          bottom: 0px;
      }
#top {  
          position: absolute;        
          top:0px;
          height:50px;
          width: 100%;
          background-color: #587658;
      }
#bottom {  
    position: absolute;        
    bottom:0px;
    height:50px;
    width: 100%;
    background-color: #896243;
} 

/*  SEARCH */
div.search {position:relative;z-index:750;max-width: 268px;background:#f1f1f1;border: 0px solid #555;border-left:none;}
div.search input {             width: 216px; height: 28px;margin: 0px;padding: 2px; padding-right:0px; padding-left:4px;background: #f1f1f1;font-size: 16px;border: none;}
div.search button[type=cancel] {width: 15px;height: 28px; margin: 0px;padding: 0px;color:#555;font-size: 12px;border: none;cursor: pointer;background:none;}
div.search button[type=submit] {padding:1px; height: 28px;background: #f1f1f1;font-size: 16px;color:  rgb(66, 85, 112);cursor: pointer;border: none;}
div.search input:focus { outline: none; }
div.search button:focus { outline: none; }


/* vertical-list */
.list {
  display: block;
  z-index: 100;
  padding: 0;
  margin: 0;
 
  border-top: none;
  background: #fff;
  max-width: 360px; /* Ensure the list container has a max width */
  width: auto; /* Allow the container to adjust its width */
  outline: none; /* Remove default focus outline */
}

/* Focus styles for the .list container */
.list:focus, .list:focus-visible {
  outline: none; /* Remove default focus outline */
 /* border-right: 2px solid rgb(66, 85, 112);  */
  /*border-left: 2px solid rgb(66, 85, 112);  */
}

/* List item */
.list .item {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-top: 0.5px solid #d1d1d1;
}

.list .item.selected,.list .item:hover {
  background: #f3f3f3;
  cursor: pointer
}
/* List text */
.list .item .text {
  display: inline-block;
  padding: 8px ;
  font-family:Arial, Helvetica, sans-serif;
  white-space: normal; /* Allow text to wrap */
  word-break: break-word; /* Break long words and wrap to the next line */
}

.list .item .text em,.list .item .text strong {
  display: block;
  font-size: 14px;
}

.list .item .text em {
  font-size: 10px;
  font-style: normal;
  color: grey;
}


/* TOOLBAR */
.icon-bar {
  position: fixed;
  width: 50px;
  z-index:750;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;  
}
.icon-bar div        {
  background-color: rgba(85, 85, 85, 0.96);
  color: white;
  font-size: 17px;
  cursor:pointer;
  display: block;
  text-align: center;
  padding: 10px;
}
  
.panel{
      position: relative;
      width: 268px;
      left:50px;
      top:0px; /*41px;*/
      background-color:white;
      z-index:750;
      border: 1px solid #555;
      overflow: hidden;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      max-height: 50vh; /* Limit height to 60% of the viewport */
      overflow-y: auto; /* Enable vertical scrolling if content overflows */
      box-sizing: border-box; /* Include padding in height calculations */
  }

  .closeBtn {
    position: absolute;
    right: 0px;
    top: 4px;
    border: none;
    background: #555;
    padding: 0px;
    color: white;
    cursor: pointer;
}
.closeBtn:focus { outline: none; }

.resetBtn {
  position: absolute;
  right: 26px;
  top: 6px; 
  border: none;
  background: #555;
  padding: 0px;
  color: white;
  cursor: pointer;
}
.resetBtn:focus { outline: none; }

.exportBtn {
  position: absolute;
  right: 56px;
  top: 4px; 
  border: none;
  background: #555;
  padding: 0px;
  color: white;
  cursor: pointer;
}
.exportBtn:focus { outline: none; }

 /* ---------------------- LAYERS --------------------------------*/

.layerLabel {
      display: block;
      position: relative;
      padding-left: 30px;
      margin: 12px;
      cursor: pointer;
      font-size: 16px;
      color:#555555;
      margin-left:10px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .layerLabel input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
   }
  
  /* Create a custom checkbox */
  .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 20px;
      width: 20px;
      background-color: #eee;
  }
  
  /* Create a custom radiomark */
  .radiomark {
      position: absolute;
      top: 0;
      left: 0;
      height: 20px;
      width: 20px;
      background-color: #eee;
      border-radius: 50%;
     }
  
  /* On mouse-over, add a grey background color */
  .layerLabel:hover input ~ .checkmark,.layerLabel:hover input ~ .radiomark  {    background-color: #ccc; }
  /* When the checkbox is checked, add a blue background */
  .layerLabel input:checked ~ .checkmark, .layerLabel input:checked ~ .radiomark{background-color: rgb(115, 162, 203);}
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after,.radiomark:after {  content: ""; position: absolute; display: none; }
  /* Show the checkmark when checked */
  .layerLabel input:checked ~ .checkmark:after,.layerLabel input:checked ~ .radiomark:after  {   display: block; }
  
  /* Style the checkmark/indicator */
  .layerLabel .checkmark:after {
      left: 6px;
      top: 3px;
      width: 5px;
      height: 10px;
      border: solid white;
      border-width: 0 3px 3px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  
  /* Style the indicator (dot/circle) */
  .layerLabel .radiomark:after {
       top: 6px;
      left: 6px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: white;
  }

  
  /* INFO PANEL*/
  .info-bar {
    position: fixed;
    width: 50px;
    bottom: 0px;
    z-index:1100;
  
    
  }
  .info-bar div        {
    background-color: #555;
    opacity: 0.97;
    color: white;
    font-size: 17px;
    cursor:pointer;
    display: block;
    text-align: center;
    padding: 10px; 
  }

  
   .infoPanel{
        position: absolute;
        min-width: 320px;
        max-width: 375px;
        width:100%;
        left:50px;
        bottom:0px;
        background-color:white;
        z-index: 1100;
        border: 1px solid #555;
        transition: all 0.25s ease-in-out;
    }
    .scrollable{
  /* to fix height and enable scrolling
      overflow-y:auto;
      max-height:204px;
  */
    }
    #captureBtn {
      position: absolute;
      right: 56px;
      top: 4px; 
      border: none;
      background: #555;
      padding: 0px;
      color: white;
      cursor: pointer;
    }
    #captureBtn:focus { outline: none; }

    /*------- SELECT --------------*/
    select::-ms-expand{
        display:none;
    }
    select{
     border: solid 1px whitesmoke;

    }
    .custom-select {
        font-size: 16px;
        position: relative;
        display: inline-block;
      }
    
    .custom-select select {
      outline: none;
      -webkit-appearance: none;
      display:inline-block;
      padding: 0.05em 1.25em 0.0em 0.5em;
      margin: 0;
      background: #555;
      color: #fff;
      line-height: normal;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      /* min-width:170px; */
    }

    
    .custom-select .downArrow {
      background: #fff;
      bottom: 5px;
      position: absolute;
      right: 0px;
      top: 5px;
      pointer-events: none;
    }
    .custom-select .downArrow:before {
      content: '';
      position: absolute;
      top: 70%;
      right: 4px;
      margin-top: -5px;
      pointer-events: none;
      border-top: 6px solid #fff;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
    }
    
    .custom-select .downArrow:after {
      content: '';
      position: absolute;
      top: 70%;
      right: 6px;
      margin-top: -5px;
      pointer-events: none;
      border-top: 4px solid #555;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
    }
    option:hover {
      background-color: var(--selectHoverCol);
      color: #fff;
    }
    
    option:checked {
      box-shadow: 0 0 1em 100px var(--selectedCol) inset;
    }
   

 
    table {
      border-collapse: collapse;
      border-spacing: 0;
      padding-top:0px;
      width: 100%;
      font-size:14px;
      font-family:Verdana, sans-serif;
      color:#555555;
      border: 1px solid #ddd;
      }
  
   td {
       height:22px;
   }   
  
  th, td {
      text-align: left;
      padding: 4px;
  }
  
  tr:nth-child(even) {
      background-color: #f2f2f2
  }
  /*position panel*/
  .positionPanel{
    position: fixed;
    width: 268px;
    left:50px;
    top:81px;
    background-color:white;
    z-index:750;
    border: 1px solid #555;
    overflow: hidden;
}

.crosshair-cursor-enabled {
  cursor:crosshair;
}


.pointer-cursor-enabled {
  cursor:pointer;
}
/* LEAFLET */ 
.leaflet-measure-path-measurement {
  position: absolute;
  font-size: 14px;
  color: black;
  text-shadow: -1px  0 0 white,
               -1px -1px 0 white,
                0 -1px 0 white,
                1px -1px 0 white,
                1px  0 0 white,
                1px  1px 0 white,
                0  1px 0 white,
               -1px  1px 0 white;
  white-space: nowrap;
  transform-origin: 0;
  pointer-events: none;
  z-index: 10000;
}


.leaflet-measure-path-measurement > div {
  position: relative;
  margin-top: -25%;
  left: -50%;
}
/* leaflet_measure*/
.leaflet-draw-tooltip {
  background: rgba(0, 0, 0, 0.5) !important;
  color: #fff !important;
  font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/* MODULES*/

.module {


}
.module > a{
    display: table;
    padding:5px;
  
}

.module .icon {
  float: left;
  margin-left: 0px;
  padding: 0;
  width: 50px;
  height: 50px;
  border-radius: 5px;
 
 }
 
 .module img{
  max-width: 100%;
  max-height: 100%;
}

.module hr {
  display: block;
  height: 1px;
  width :228px;
  border: 0;
  border-top: 1px solid #ccc;
  margin:0px;
  margin-left: 65px;
  padding: 0;
}
.module .label {
  display: table;
  width: 289px;
  right: 0px;
  font-family:Verdana, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: rgb(255, 254, 254);
  background-color: rgb(122, 121, 121);
  text-align: left;
  margin:0px;
 }

.module .textbox {
  float: left;
  margin-left: 10px;
  padding: 0;
  width: 228px;
  height: 50px;
  border-radius: 5px;
 }

.module h1 {
  display: block;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 16px;
  padding:5px;
  color: black;
  padding:0px;
  margin: 0px;
  padding-left:5px;
  margin-top:0px;
}
.module h2 {
  display: block;
  font-family:Verdana, sans-serif;
  font-size: 11px;
  font-weight: normal;
  padding:5px;
  color: grey;
  background-color: rgb(255, 255, 255);
  padding:0px;
  margin: 0px;
  padding-top:3px;
  padding-left:5px;
  margin-bottom:5px;
}
/* two columns for archive */  
.two-columns {
    column-count: 2;
    column-gap: 30px; /* Adjust column spacing as needed */
    padding-top: 0; /* Remove any default padding */
    margin-top: 12px; /* Add top margin */
    margin-left: 10px; /* Add left margin */
    position: relative; /* For positioning the divider */
  }
  .two-columns::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 48%; /* Center the line */
    width: 1px; /* Line thickness */
    background-color: #ccc; /* Line color */
  }

  .two-columns .layerLabel {
    display: block;
    margin: 0 0 12px 0; /* Uniform margin for all labels */
  }

/* ---------------------- FONT --------------------------------*/
  @font-face {
    font-family: "ikicons";
    src: url("fonts/ikatastr.woff") format("woff");
    font-weight: normal;
    font-style: normal;
  }
  
  [class^="icon-"]:before,
  [class*=" icon-"]:before {
    font-family: "ikicons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
   
  }
  
  .icon-location-arrow:before {  content: "\61";}
  .icon-search:before         {  content: "\62";}
  .icon-map:before            {  content: "\63";}
  .icon-cancel:before         {  content: "\64";}
  .icon-question:before {  content: "\65"; }
  .icon-minus:before {  content: "\66";}
  .icon-plus:before {  content: "\67";}
  .icon-comment:before { font-size:19px; content: "\68";}
  .icon-measure:before {  content: "\69";}
  .icon-annotate:before { font-size:19px; content: "\6a";}
  .icon-flow-line:before {  content: "\6b";}
  .icon-left-open-mini:before { font-size:20px; content: "\6c";}
  .icon-right-open-mini:before {  font-size:25px; content: "\6d";}
  .icon-reset:before         {  font-size:16px; content: "\64";}
  
  .icon-up-open-mini:before {  content: "\6e";}
  .icon-download:before {  content: "\6f";}
  .icon-down-open-big:before {  content: "\70";}
  .icon-down-open-mini:before {  content: "\71";}
  .icon-download-1:before {  content: "\72";}
  .icon-export:before { font-size:18px; content: "\73";}



#fm_next {border-bottom: 1px solid rgb(0,199,101);color:rgb(56,199,101);}
#mn_next {border-bottom: 1px solid rgb(51,92,161);color:rgb(51,92,161);}
#im_next {border-bottom: 1px solid rgb(40,92,247);color:rgb(40,92,247);}


@media screen and (max-width: 760px) 
{
    #kn,#agreement
    {
        left:0px;
    }
}