html,
 body {
   /* font-family: 'Roboto', sans-serif !important; */
   font-family: 'Lato', sans-serif;
 }

 .bg-panel {
   background: #fff;
   color: #255d00;
 }

 .title {
   font-size: 12px;
   padding-left: 5PX;
   font-weight: 700;
   color: #00993a;
   margin-bottom: 2px;
   padding-top: 4px;
   width: 40%;

 }
 .info-panel{
  max-width: 300px; 
  width: 300px;
 }
 .info-panel-element{
  max-width: 300px; 
  width: 300px;
 }
.locate-btn{
  width: 10%;
}
 .as-box-container{
  padding: 5px;
 }
 .as-box {
   display: flex;
   flex-direction: row;
   /* flex-flow: row; */
   justify-content: normal;
   flex-wrap: wrap;
   border-bottom: 1px solid #d0d0d0;
   cursor: pointer;
   width: 100%;
 }

 .as-box:hover {
   /*color: #fff;*/
   /*background: #255d00;*/
   /* border-right: 10px solid #255d00; */
   background: #f6fff0;
 }

 .linked {
   color: purple;
 }

 .linked:hover {
   color: red;
 }

 .zoomBtn {
   padding: 4px;
   font-size: 10px;
   background-color: darkcyan;
   border: 1px solid darkcyan;
   color: white;
 }

 input#slide {
   padding: 5px;
 }

 .leaflet-sidebar-header {
   background: linear-gradient(#009432, #009f43);
 }

 .leaflet-sidebar-tabs>li.active,
 .leaflet-sidebar-tabs>ul>li.active {
   background: linear-gradient(#009432, #009f43);
 }

 .leaflet-sidebar-tabs>li:hover,
 .leaflet-sidebar-tabs>ul>li:hover {
   border-radius: 4px;
 }

 .leaflet-popup-content-wrapper,
 .leaflet-popup-tip {
   background: #fff;
   color: #009432;
   border-radius: 4px;
   z-index: 1001;
   /* box-shadow: 0 3px 14px rgb(255 255 255 / 0%); */
 }

 .leaflet-popup-pane {
   z-index: 1005;
 }

 .leaflet-touch .leaflet-control-layers-toggle {
   width: 30px;
   height: 30px;
 }

 .leaflet-control-layers-toggle {
   background-image: url(../images/layers.png);
   width: 30px;
   height: 30px;
 }

 .leaflet-retina .leaflet-control-layers-toggle {
   background-image: url(../images/layers-2x.svg);
   background-size: 26px 26px;
 }

 .box {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
 }

 .box>div {
   padding: 0 0.5rem;
 }

 .slider {
   width: 90px;

 }
 input[type=range]::-webkit-slider-thumb {
  background: #255d00!important;
}

input[type=range]::-moz-range-thumb {
  background: #255d00!important;
}

input[type=range]::-moz-range-thumb::-ms-thumb {
  background: #255d00!important;
}
input[type=range]::-webkit-slider-thumb:active {
  background-color: #255d00!important;
}
input[type=range]::-webkit-slider-thumb,
input[type=range]:focus::-webkit-slider-thumb, 
input[type=range]::-moz-range-thumb,
input[type=range]:focus::-ms-thumb {
  box-shadow: #255d00;
}

 .btn-outline-disable {
   border: 1px solid #c0c0c0;
 }

 #logo-fgeha {
   position: absolute;
   bottom: 10px;
   z-index: 1010;
   width: 300px;
   left: 25px;
 }

 #logo-fgeha>img {
   width: 200px;
   OPACITY: 0.9;
 }

 .label-tag {
   color: #28a745;
 }

 .disable-btn {
   color: #c0c0c0;
 }
 .as-panel, .as-panel__element ,as-panel--right{
  max-width: 450px;
    width: 450px;
    overflow: auto;

}
#panelContentModal{
  padding: 32px;
}
td {
    font-size: 14px;
    text-align: left;
    
}
td:first-child { 
    font-size: 12px;
    color: #444;
    width: 40%;
}
.table-hover > tbody > tr:hover {
  background-color: #f6fff0;;
  cursor: pointer;
}
.nav-tabs{
  width: 100%;
}
.nav-item {
  width: 100%;
  text-align: center;
  letter-spacing: 4px;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: #fff;
  background-color: #28a745;
  border-color: #dee2e6 #dee2e6 #fff;
}
.leaflet-tooltip-pane {
  z-index: 9990;
}

a {
  color: #28a745;
  text-decoration: none;
  background-color: transparent;
}
 .leaflet-sidebar-content {
   overflow: hidden;
   -webkit-transition: all .8s ease;
   -moz-transition: all .8s ease;
   -ms-transition: all .8s ease;
   -o-transition: all .8s ease;
   transition: all .8s ease;
 }
 .mobile-panel, .mobile-btn{
  display: none;
 }

 #home {
   height: 100%;
   padding: 10px 5px;
 }

 .list-container {
  height: 84%;
  overflow-y: auto !important;
  padding: 0px;
  width: 100%;
  padding-bottom: 12px;
  max-height: 76vh;
 }

 #sidebar {
   -webkit-transition: all .8s ease;
   -moz-transition: all .8s ease;
   -ms-transition: all .8s ease;
   -o-transition: all .8s ease;
   transition: all .8s ease;

 }
 .plot-title{
  padding-bottom: 5px;
 }
.d-plot-no{
    font-size: 24px;
    color: rgba(203, 5, 5, 0.795);
    /* width: 100px; */
    border-radius: 4px;
    /* height: 100px; */
    text-align: center;
    vertical-align: middle;
    /* padding-top: 20px; */
    padding: 0px 4px;
    border: 1px dashed;
}
.d-label{
  /* display : flex; */
   font-size: 10px;
    color: #8b8b8b;
    padding: 2px;
}
.d-plot-address{
    font-size: 18px;
    padding-left: 7px;
    font-weight: 700;
}
.d-label-address{
  font-size: 13px;
    padding-left: 7px; 
    color: #525252;
}

.d-plot-price{
  font-size: 16px;
  flex: 1;
}
.d-plot-value{
  font-size: 16px;
  flex: 1;
  padding-top: 6px;
  font-weight: 700;
}

.icon-img{
  text-align: center;
  padding: 2px;
  width: 24px;
  height: 24px;

}
.row{
  margin-bottom: 9px;
  margin-left: 0px;
  margin-right: 0px;
  
}
.d-icon{
  display: flex;    
  width: 100%;
  height: 24px;
    justify-content: center;
    text-align: center;
}
.pb-15 {
  padding-bottom: 15px;
}
.d-plot-landuse{
  font-size: 16px;
  background-color: #ffffff;
  color: #19911D;
  text-transform: uppercase;
  padding: 2px;
  border-left: 5px solid #19911D;
  /* box-shadow: 0 5px 10px rgb(0 0 0 / 10%); */
  padding-left: 6px;
  width: 80%;
}
.modal{
  top: 70px;
  z-index: 10001;
}
.modal-backdrop {
  z-index: 10000;
}
hr {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border: 0;
  border-top: 1px solid rgba(0,0,0,.1);
}
.page-link{
  color: #28a745;
}
.page-item.active .page-link {
  z-index: 3;
  color: #000;
  background-color: #8bc53f;
  border-color: #8bc53f;
}

 @media (min-width: 812px) {

   .leaflet-sidebar-tabs,
   .leaflet-sidebar-tabs>ul {
     position: absolute;
     width: 40px;
     margin: 0;
     padding: 0;
     list-style-type: none;
     background: transparent;
     box-shadow: none;
   }

   .leaflet-sidebar.leaflet-touch {
     border: none;
   }

   .leaflet-sidebar-left .leaflet-sidebar-content {
     left: 0px;
   }

   .leaflet-sidebar-tabs>li>a,
   .leaflet-sidebar-tabs>ul>li>a {
     background-color: white;
     border-radius: 4px;
     color: #009b3d;
   }

   #homeTab:hover {
     background-color: #009b3d;
     color: white;

   }

   .leaflet-sidebar-tabs>li.active,
   .leaflet-sidebar-tabs>ul>li.active {
     background-color: #009b3d;
     color: white;
   }

   .leaflet-sidebar-tabs {
     display: none;
   }

   .leaflet-sidebar-close {
     display: none;
   }
   .as-panel__element .as-box {
    padding: 4px;
}


 }

 @media (max-width: 812px) {
   .as-panel--top {
     top: 24px;
     max-height: calc(100% - 200px);
   }

   .leaflet-sidebar-tabs,
   .leaflet-sidebar-tabs>ul {
     position: absolute;
     width: 40px;
     margin: 0;
     padding: 0;
     list-style-type: none;
     /*background: transparent;
    box-shadow: none;*/
   }

   .leaflet-sidebar-tabs {
     display: none;
     height: 40px;
   }

   .leaflet-sidebar-close {
     display: none;
   }

   .list-container {

     width: 100%;
   }
 }

 .leaflet-sidebar.leaflet-touch {
   border: none;

 }

 input#slide {
  padding: 5px;
}

.slider-div{
 bottom: 5px;
 position: absolute;
 z-index: 9999;
 background-color: rgb(255 254 254 / 87%);
 margin: 0 auto;
 left: 46%;
 padding: 5px;
 border-radius: 10px;
 display: grid;
}
.notice-div{
  top: 5px;
 position: absolute;
 z-index: 9999;
 background-color: rgb(255 254 254 / 87%);
 margin: 0 auto;
 left: 46%;
 padding: 5px;
 border-radius: 10px;
 display: grid;
}
.label-tag-slider{
 color:#000;
 font-size: 10px;
}
@-webkit-keyframes greenRed {  
  0% { color: #026208; }
  50% { color: rgb(70, 152, 55); }
  51% { color: rgb(157, 211, 31); }
  100% { color: rgb(203, 110, 17); }
}
.label-notice-div{
  color:#026208;
  font-size: 14px;
}


.slider {
  width: 140px;
}


 @media (min-width: 1200px) {
   .leaflet-sidebar {
     width: 400px;
     max-width: 460px;
     /*background-color: black;*/
   }

   .leaflet-sidebar-pane {

     min-width: 360px;
   }
 }

 .list-container::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
   background-color: #F5F5F5;
   border-radius: 1px;
 }

 .list-container::-webkit-scrollbar {
   width: 4px;
   background-color: #F5F5F5;
 }

 .list-container::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background-color: #FFF;
   background-image: -webkit-gradient(linear,
       40% 0%,
       75% 84%,
       from(#4D9C41),
       to(#19911D),
       color-stop(.6, #54DE5D))
 }

 .leaflet-sidebar {
   box-shadow: none;
 }

 .leaflet-sidebar-left .leaflet-sidebar-content {
   left: 0;
 }

 .leaflet-sidebar-header {
   cursor: pointer;
 }

 

 .project-title {
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 0.1rem;
 }

 .search-bar {
   border-bottom: 1px solid #009b3d;
   margin-bottom: 10px;
   padding: 10px 0;

 }

 .md-form input:not([type]),
 .md-form input[type="text"]:not(.browser-default),
 .md-form input[type="password"]:not(.browser-default),
 .md-form input[type="email"]:not(.browser-default),
 .md-form input[type="url"]:not(.browser-default),
 .md-form input[type="time"]:not(.browser-default),
 .md-form input[type="date"]:not(.browser-default),
 .md-form input[type="datetime"]:not(.browser-default),
 .md-form input[type="datetime-local"]:not(.browser-default),
 .md-form input[type="tel"]:not(.browser-default),
 .md-form input[type="number"]:not(.browser-default),
 .md-form input[type="search"]:not(.browser-default),
 .md-form input[type="phone"]:not(.browser-default),
 .md-form input[type="search-md"],
 .md-form textarea.md-textarea {
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
   background-color: transparent;
   border: none;
   border-bottom: 1px solid #ced4da;
   border-radius: 0;
   outline: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
   transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
 }

 .leaflet-tooltip-left:before {
   right: 0;
   margin-right: -12px;
   border-left-color: rgba(0, 0, 0, 0.4);
 }

 .leaflet-tooltip-right:before {
   left: 0;
   margin-left: -12px;
   border-right-color: rgba(0, 0, 0, 0.4);
 }

 .leaflet-tooltip-own {
   position: absolute;
   text-align: center;
   padding: 2px;
   background-color: transparent;
   /* border: 0px solid #000; */
   color: #fff;
   font-size: 11px;
   white-space: nowrap;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   pointer-events: none;
   /* box-shadow: 0 1px 3px rgba(0,0,0,0.4); */
   z-index: 9999;
   border: none;
   box-shadow: none;
 }
 
 .leaflet-tooltip-green{
  position: absolute;

   text-align: center;
   padding: 3px;
   background-color: #fff;
   /* border: 0px solid #000; */
   color: #003818;
   font-size: 13px;
   white-space: nowrap;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   pointer-events: none;
   /* box-shadow: 0 1px 3px rgba(0,0,0,0.4); */
   z-index: 9999;
   border: none;
   box-shadow: none;
  
 }
 .landuse-label {
   /* color: #F5F5F5; */
   color: #000;
   font-size: 12px;
  font-weight: 700;

 }
 .landuse-label-white-text{
  color: #fff;
  
  font-size: 12px;
  font-weight: 700;

 }

 .area-label {
   color: #000;
   font-size: 12px;
   font-weight: 700;

 }
 .plot-label{
  color: #000;
  font-size: 12px;
  font-weight: 700;
 }
 .plot-label-white{
  color: #fff;
  font-size: 12px;
  font-weight: 700;
 }
 .area-label-white {
  color: #fff;
  font-size: 12px;
  font-weight: 700;

}
 .area-label-sm{
  color: #000;
   font-size: 9px;
   font-weight: 700;
 }
 .area-label-sm-white{
  color: #fff;
   font-size: 10px;
   font-weight: 700;

 }
 .plot-no-sm{
  color: #000;
  font-size: 10px;
  font-weight: 700;
  padding-bottom: 1px;
 }
 .plot-no-sm-white{
  color: #fff;
  font-size: 11px;
  font-weight: 700;
 }
 div.dataTables_wrapper div.dataTables_paginate ul.pagination{
  margin: 2px 0;
  white-space: initial;
  font-size: 11px;
  padding: 0px;
  /* width: 10%; */
  /* align-items: end; */
  justify-content: flex-end;
 }
 .page-link{
  padding: 0.25rem 0.5rem;
 }
 #plotProfile{
  padding: 2px 8px;;
 }
 table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting_asc_disabled, table.dataTable thead>tr>th.sorting_desc_disabled, table.dataTable thead>tr>td.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting_asc_disabled, table.dataTable thead>tr>td.sorting_desc_disabled{
  font-size: 13px;

 }
 table.dataTable.nowrap th, table.dataTable.nowrap td{
  font-size: 12px;
    padding: 6px 1px;
 }
 .subtitle {
  width: 50%;
    color: #292929;
    background-color: #f8f8f8;
    /* border: 1px solid #255d00; */
    font-variant: all-small-caps;
    font-size: 12px;
    padding: 0px;
    border-radius: 4px;
    font-style: unset;
    /* padding-top: 5px; */
    padding: 5px 7px;
 }
 .ma{
  color: #cc5d8f;
 }
 .mkz{
  color: #2c28ff;
 }
 .sc{
  color: rgb(3 166 217);
 }
 .sc-tt{
  background: rgb(220 53 69 / 55%);
  color: white;
 }
 .project-title {
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 0.1rem;
 }

 .search-bar {
   border-bottom: 1px solid #009b3d;
   margin-bottom: 10px;
   padding: 10px 0;

 }

 .md-form input:not([type]),
 .md-form input[type="text"]:not(.browser-default),
 .md-form input[type="password"]:not(.browser-default),
 .md-form input[type="email"]:not(.browser-default),
 .md-form input[type="url"]:not(.browser-default),
 .md-form input[type="time"]:not(.browser-default),
 .md-form input[type="date"]:not(.browser-default),
 .md-form input[type="datetime"]:not(.browser-default),
 .md-form input[type="datetime-local"]:not(.browser-default),
 .md-form input[type="tel"]:not(.browser-default),
 .md-form input[type="number"]:not(.browser-default),
 .md-form input[type="search"]:not(.browser-default),
 .md-form input[type="phone"]:not(.browser-default),
 .md-form input[type="search-md"],
 .md-form textarea.md-textarea {
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
   background-color: transparent;
   border: none;
   border-bottom: 1px solid #ced4da;
   border-radius: 0;
   outline: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
   transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
 }
 .icon-wrap{
  padding: 0px 5px;
  flex: 0.5;
  text-align: center;
 }
  .show-auction{
    display:block;
  }
 .hide-auction{
  display: none;
 }
 .flex-h{
  flex: 0.5;
 }
 .flex-f{
  flex: 1;
 }
 .as-app .as-toolbar{
 color: lemonchiffon;
 padding: 17px;
}
.as-toolbar{
  height: 100px;
  align-items: center;
  text-align: center;
  background: white;
}
.logo-off{
  height: 80px;

}
.nav-flex{
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.main-title{
  background: white;
  color: #00993a;
  font-size: 26px;
}
.close-button {
  padding: 6px;
    top: 0;
    left: 0;
  cursor: pointer;
  width: 30px;
  height: 30px;
  overflow: hidden;
  position: absolute;
}
.pp-name{
  color: #007bff;
  font-weight: 400;
  font-size: 11px;
  background: #edf8ff;
  padding: 1px 3px;
  margin: 0px 1px;
  border-radius: 4px;
  
}
.plot-image{
  text-align: center;
}
.display-image{
  height: 200px      ;
  padding: 5px;
  width: auto;
  cursor: pointer;
  max-width: 100%;

}
 @media (min-width: 812px){

}
@media  (max-width: 800px) {
  .logo-off{
    height: 40px;
  }
  .main-title{    
    font-size: 0.8rem;
  }

  .as-toolbar{
    height: 6vh;
  }
  .as-content{
    height: 94vh;
  }
  .as-map-panels{
    /* display: flex!important; */
    left: 4px;
    position: absolute;
    height: auto;
    top: 50%;
    bottom: 5px;
  }
  .info-panel{
    width: 100%;
    height: 100%;
  }
  .info-panel-element{
    width: 100%;
    height: 100%;
  }
  .as-panel{
    display: flex;
  }
  .mobile-panel{
    display: none;
    position: absolute;
    top: 120px;
    left: 3vw;
    width: auto;
    height: auto;
    z-index: 9999;
    background: white;
    border-radius: 4px;
  }
  .mobile-btn{
    display: block;
    position: absolute;
    top: 70px;
    left: 2%;;
    background-color: #fff;
    color: #009345;
    z-index: 10000;
    width: 48px;
    height: 50px;
    border-radius: 50%;
    
  }
  div.dataTables_wrapper div.dataTables_paginate ul.pagination{
    margin: 2px 0;
    white-space: initial;
    font-size: 11px;
    padding: 0px;
    width: 50%;
    /* align-items: end; */
    justify-content: center;
   }
   .slider-div{
    left: 10px;
   }
   .notice-div{
    left: 35%;
   }
}
@media(max-width: 370px){
  .logo-off{
    height: 30px;
  }
  .main-title{    
    font-size: 0.7rem;
  }
}


.info-panel::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.199);
  background-color: #c1c1c1;
  border-radius: 10px;
}

.info-panel::-webkit-scrollbar {
  width: 4px;
  background-color: #255d00;
}

.info-panel::-webkit-scrollbar-thumb {
  border-radius: 1px;
  background-color: #255d00;
  background-image: -webkit-gradient(linear,
      40% 0%,
      75% 84%,
      from(#255d00),
      to(#388903),
      color-stop(.9, #00f466))
}
.legend-color{
  background-color: #2f35e0;
  padding: 0px;
  margin-right: 8px;
}
.text-legend{
  font-size: 10px;
}