.box_dashbord {
    background-color:#eee;
    width:80%;
    height:38px;
    text-align:center;
    border-width:2px;
    border-style:solid;
    border-radius:5px;
    margin:0px;
   font-size:19px;
   padding-top: 7px;
   margin-left: 100px;
   color:#444;
  }
  .text_dashbord {
    margin: 0px;
    color:#444;
    padding-top:20px;
  }

  .box_dashbord_active {
    background-color:#eee;
    width:80%;
    height:200px;
    text-align:right;
    border-width:2px;
    border-style:solid;
    border-radius:5px;
    margin:0px;
   font-size:19px;
   padding-top: 7px;
   padding-right: 7px;
   margin-left: 100px;
   color:#444;
  }
  .box_dashbord_active p {
    padding:0px;
    margin: 0px;
  }
  table {
      color:#333;
  }


  .leaflet-control-attribution {
      display: none !important;
  }

  a {
      text-decoration: none !important;
  }


  .close-jq-toast-single {
      left: 7px !important;
      text-align: left !important;
  }

  .jq-toast-single h2 {
      font-family: iransans-UltraLight !important;
  }

  .jq-toast-single p {
      font-size: 12px !important;
  }

  .leaflet-top {
      top: 70px !important;
  }

  label {
      color: #222222;
  }

  form label {
      color: #222222;
  }

  span {
      font-size: 13px !important;

  }

  label {
      line-height: 1 !important;
  }


  #refreshButton {
      position: absolute;
      top: 260px;
      left: 10px;
      padding: 10px;
      z-index: 400;
      background-color: white;
      border-radius: 3px;
      border-color: #ccc;
      border-style: solid;
      width: 33px;
      height: 33px;
      margin: 0px;
      padding: 5px;
  }

  .btn_leaflet_custom {
    width:40px !important;
    height:40px !important;
    border-radius: 50% !important;
    padding: 10px !important;
    opacity: 0.7 !important;
    background-color: white !important;
  }



#refreshButton:hover ,.refreshButton51:hover, .leaflet-control-zoom-in:hover ,.btn_leaflet_custom:hover, .leaflet-control-zoom-out:hover , .leaflet-control-zoom-fullscreen:hover
{
    background-color: white !important;
    opacity: 1 !important;
    animation: pulse 0.5s infinite ease-in-out alternate;
  }
  @keyframes pulse {
    from { transform: scale(0.9); }
    to { transform: scale(1.1); }
  }

  .leaflet-control-zoom-in ,.leaflet-control-zoom-out, .leaflet-control-zoom-fullscreen,.leaflet-control-measure-toggle{
    width:40px !important;
    height:40px !important;
    border-radius: 50% !important;
    padding: 5px !important;
    opacity: 0.7 !important;
    background-color: white !important;
    margin-bottom: 2px !important;
  }
  .leaflet-control-measure {
    background-color: rgba(255, 0, 0, 0) !important;

  }
  .leaflet-control-measure:hover {
    background-color: rgb(255, 255, 255) !important;

  }
  /* .leaflet-control-measure:hover {
    opacity: 1 !important;
    border-radius: 2px !important;
    width:250px !important;
    height:auto !important;
  } */

  .leaflet-control-measure-interaction:hover ,.js-measuringprompt:hover   {
    border-radius: 2px !important;
    width:100% !important;
    height:auto !important;
    background-color: white !important;
    opacity: 1 !important;

    /* padding: 10px 12px !important; */


  }
  .leaflet-control-measure-interaction:hover {
    /* padding:0px !important; */
    margin:0px !important;
  }
  .leaflet-control-measure-toggle {
    font-size: 200px !important;
  }

  .js-measuringprompt {
    border-radius: 2px !important;
    width:100% !important;
    height:auto !important;
    background-color: white !important;
    opacity: unset !important;
    padding: 10px 12px !important;


  }



  .icon-size-fullscreen {
    font-weight: 900 !important;
    color:black;
  }

  .leaflet-bar {
    border:none !important;
  }




  #refreshButton33 {
    position: absolute;
    top: 328px;
    left: 10px;
    padding: 10px;
    z-index: 400;
    background-color: white;
    border-radius: 3px;
    border-color: #ccc;
    border-style: solid;
    width: 33px;
    height: 33px;
    margin: 0px;
    padding: 5px;
}

  #refreshButton:hover {
      background-color: #eee;
  }


  #refreshButton3 {
      position: absolute;
      top: 256px;
      left: 10px;
      padding: 10px;
      z-index: 400;
      background-color: white;
      border-radius: 3px;
      border-color: #ccc;
      border-style: solid;
      width: 33px;
      height: 33px;
      margin: 0px;
      padding: 5px;
  }

  #refreshButton3:hover {
      background-color: #eee;
  }

  #refreshButton4 {
      position: absolute;
      top: 390px;
      right: 45px;
      padding: 10px;
      z-index: 400;
      background-color: white;
      border-radius: 3px;
      border-color: #ccc;
      border-style: solid;
      width: 33px;
      height: 33px;
      margin: 0px;
      padding: 5px;
      text-decoration: none;
      decoration: none;
      color: black;
  }

  #refreshButton5 {
      position: absolute;
      top: 45px;
      right: 290px;
      padding: 10px;
      z-index: 400;
      background-color: white;
      border-radius: 3px;
      border-color: #ccc;
      border-style: solid;
      width: 33px;
      height: 33px;
      margin: 0px;
      padding: 5px;
      text-decoration: none;
      decoration: none;
      color: black;
  }
  #refreshButton51 {
    position: absolute;
    top: 364px;
    right: 10px;
    padding: 10px;
    z-index: 400;
    background-color: white;
    border-radius: 3px;
    border-color: #ccc;
    border-style: solid;
    width: 33px;
    height: 33px;
    margin: 0px;
    padding: 5px;
    text-decoration: none;
    decoration: none;
    color: black;
}
#monitoring-extent {
    position: absolute;
    top: 364px;
    right: 10px;
    z-index: 400;
    background-color: rgb(254, 113, 18);
    border-radius: 3px;
    border-color: rgb(254, 113, 18);
    border-style: solid;

    width:40px !important;
    height:40px !important;
    border-radius: 50% !important;
    padding: 10px !important;
    opacity: 0.7 !important;

    margin: 0px;
    padding: 5px;
    text-decoration: none;
    decoration: none;
    color: black;
}
#monitoring-extent:hover {
    background-color: rgb(255, 102, 0);
    border-color: rgb(255, 102, 0);
}
#monitoring-extent:disabled,
#monitoring-extent[disabled]{
  background-color: #cccccc;
  border-color: #cccccc;
  cursor:context-menu;
  width:40px !important;
  height:40px !important;
  border-radius: 50% !important;
  padding: 10px !important;
  opacity: 0.7 !important;
}






#monitoring-users {
    position: absolute;
    top: 400px;
    right: 10px;
    z-index: 400;
    background-color: rgb(254, 113, 18);
    border-radius: 3px;
    border-color: rgb(254, 113, 18);
    border-style: solid;



    width:40px !important;
    height:40px !important;
    border-radius: 50% !important;
    padding: 10px !important;
    opacity: 0.7 !important;


    margin: 0px;
    padding: 5px;
    text-decoration: none;
    decoration: none;
    color: black;
}
#monitoring-users:hover {
    background-color: rgb(255, 102, 0);
    border-color: rgb(255, 102, 0);
}
#monitoring-users:disabled,
#monitoring-users[disabled]{
  background-color: #cccccc;
  border-color: #cccccc;
  cursor:context-menu;
  width:40px !important;
  height:40px !important;
  border-radius: 50% !important;
  padding: 10px !important;
  opacity: 0.7 !important;
}

#box_f {
    position: absolute;
    top: 100px;
    left: 100px;
    padding: 10px;
    z-index: 400;
    background-color: white;
    border-radius: 3px;
    border-color: rgb(19, 0, 0);
    border-style: solid;
    width: 400px;
    height: 300px;
    margin: 0px;
    padding: 5px;
}


  #refreshButton6 {
      position: absolute;
      top: 290px;
      right: 45px;
      padding: 10px;
      z-index: 400;
      background-color: white;
      border-radius: 3px;
      border-color: #ccc;
      border-style: solid;
      width: 33px;
      height: 33px;
      margin: 0px;
      padding: 5px;
      text-decoration: none;
      decoration: none;
      color: black;
  }

  #refreshButton4:hover {
      background-color: #eee;
  }

  #refreshButton5:hover {
      background-color: #eee;
  }

  #refreshButton6:hover {
      background-color: #eee;
  }



  .leaflet-tooltip-pane {
      direction: ltr !important;
  }

  #refreshButton1 {
      position: absolute;
      top: 252px;
      left: 10px;
      padding: 10px;
      z-index: 400;
      background-color: white;
      border-radius: 3px;
      border-color: #ccc;
      border-style: solid;
      width: 33px;
      height: 33px;
      margin: 0px;
      padding: 5px;
  }

  #refreshButton_filter {
    position: absolute;
    top: 252px;
    right: 10px;
    padding: 10px;
    z-index: 400;
    background-color: white;
    border-radius: 3px;
    border-color: #ccc;
    border-style: solid;
    width: 33px;
    height: 33px;
    margin: 0px;
    padding: 5px;
}

#refreshButton_delete {
    position: absolute;
    top: 390px;
    left: 10px;
    padding: 10px;
    z-index: 400;
    background-color: white;
    border-radius: 3px;
    border-color: #ccc;
    border-style: solid;
    width: 33px;
    height: 33px;
    margin: 0px;
    padding: 5px;
}

  .activeBtn {
    background-color: rgb(222, 222, 222) !important;

}

  #refreshButton1:hover {
      background-color: #eee;
  }


  #refreshButton2 {
      position: absolute;
      top: 45px;
      left: 45px;
      padding: 10px;
      z-index: 400;
      background-color: white;
      border-radius: 3px;
      border-color: #ccc;
      border-style: solid;
      width: 33px;
      height: 33px;
      margin: 0px;
      padding: 5px;
  }

  #refreshButton2:hover {
      background-color: #eee;
  }

  th a {
      color: #ccc;
  }


  .form-label {
      font-size: 13px;
      font-weight: 600;
  }
  .form-control{
      font-size:13px;
  }

  h6 {
      font-size:14px;
      font-weight: 600;
  }

  h5 {
      font-size:14px !important;
      font-weight: 600 !important;
  }

  h4 {
      font-size:15px !important;
      font-weight: 600;
  }

  .dz-default {
      margin-top: 0px !important;
  }

  .table th {
      font-size: 13px;
  }
  .table td {
      font-size: 13px;
      padding: 3px 5px 0px 0px;
  }

  .dataTables_info {
      font-size: 13px;
  }
  .dataTables_length , .dataTables_filter ,.dataTables_paginate {
      font-size: 13px;
  }
  p {
      font-size: 13px;
  }








  .table-report {
      width: 100%;
      border-color: #333;

  }

  .table-report td {
      border: 1px solid #333 !important;
  }

  .text-bold-600 {
      font-size: 14px !important;
      padding-bottom: 0px !important;
      margin-bottom: 0px !important;
  }
  .text-bold-400 {
      font-size: 14px !important;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }


  .scrollTop {
    position: fixed;
    right: 2%;
    bottom: 10px;
    background-color: #F69C00;
    padding: 10px;
    opacity: 0;
    transition: all 0.4s ease-in-out 0s;
    color: white;
}


.leaflet-control-mouseCoordinate {
    background-color: rgba(255, 255, 255, 0.688) !important;
    width: 210px !important;
}


.dataTables_filter {
    display: inline !important;
    float: left !important;
}



.dataTables_info {
    display: inline !important;
    float: right !important;

}

.offcanvas-start {
    width:253px !important;
}

.loader {
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 25px;
    height: 25px;
    animation: spin 2s linear infinite;
  }

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

  .table_feature td {
    font-size: 11px !important;
  }


  #refreshButton{
    top:230px !important;
  }


  #refreshButton_filter {
    top:430px !important;
  }


  #refreshButton1{
    top:270px !important;
  }
  #refreshButton3{
    top:310px !important;
  }
  #refreshButton33{
    top:350px !important;
  }
  #refreshButton51{
    top:390px !important;
  }

  #monitoring-extent{
    top:392px !important;
  }

  #monitoring-users {
    top:474px !important;
  }

  .request_box {
    width: auto;
    height: auto;
    background-color: white;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10000;
    border-radius: 5px;
    padding :4px 5px 4px 4px;
    border-color: #aaa;
    border-style: solid;
    border-width: 2px;
    opacity: 0.8;
  }
  .request_box:hover {
    opacity: 1;
  }
  .request_box label {
    padding-top:10px;
  }

  .leaflet-control-basemapsSwitcher {
    margin-right: 50px !important;
  }

  .close span {
    font-size: 25px !important;
  }
  .close1 span {
    font-size: 25px !important;
    line-height: 2px;
  }
  .close1 {

    left: 30px !important;
    top: 0px !important;
    width: 25px !important;
    height: 25px !important;
    border-style: none;
    border-style: 0;
    background-color: white;
    border: none;
  }
  .close1:hover {
    border: none;
    border-style: none;
    border-style: 0;
    background-color: white;
  }
  .close1:active {
    border: none !important;
    border-style: none  !important;
    border-style: 0  !important;
    background-color: white  !important;
  }
  .close1:visited {
    border: none  !important;
    border-style: none  !important;
    border-style: 0  !important;
    background-color: white  !important;
  }
  .close1:focus { outline: none; }
  .close:focus { outline: none; }




  /* box drag  */



.box {
    width:100%;
    margin:0 ;
    border:1px solid #AAA;
    height: auto;
  }

  .item {
    width:100%;
    height:35px;
    border:1px solid #DDD;
    font-size:13px;
    line-height:35px;
    text-align:center;
    color:#333;
    cursor:pointer;
    position:relative;
    transition:all .3s;
    user-select: none;
  }
  .item1 {
    width:100%;
    height:35px;
    border:1px solid #DDD;
    font-size:13px;
    line-height:35px;
    text-align:center;
    color:#333;
    cursor:pointer;
    position:relative;
    transition:all .3s;
    user-select: none;
  }



  .item.onDrag {
    /*transform: scale(1.05, 1.1);*/
    opacity:1;
    background-color:#F5F5F5;
    box-shadow:0 0 5px rgba(0,0,0,.1);
  }

  .item::before {
    content:"";
    position:absolute;
    width:15px;
    height:15px;
    top:50%;
    right:10px;
    transform:translateY(-50%);
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAADQklEQVR4Xu2bQXIjQQzD7J/56f5ZcnXNEdUtqorYu4YSgXT2sPt++ae6gXf19R7/UoByCRRAAcobKD/fF0AByhsoP98XQAHKGyg/3xdAAcobKD/fF0AByhsoP98XQAHKGyg/3xdAAcobKD/fF0AByhsoP98XQAHKGyg/3xdAAcobKD/fF0AByhsoP98XQAHKGyg/3xdAAcobKD/fF0AByhsoP98XQAHKGyg//9QL8FfeY/p8zBEPPi5WgKwCmCMeVIAs8Uc65ogHFUABfhvwV0DWB/yDjAd9AbLE/RWwqv/4MvgHGQ/6AsSh/y6AOeJBBVAA/xK4xwH8g4wHH7d/93RRucmHXn1KAJrvXLgBBQgDSMcrQJpAOF8BwgDS8QqQJhDOV4AwgHS8AqQJhPMVIAwgHa8AaQLhfAUIA0jHK0CaQDhfAcIA0vEKkCYQzleAMIB0vAKkCYTzTwnwCd/RHv+lBZwSwH8WTgmcmcMc8eBjbwU4A5J+BXPEgwpAWV2ZwxzxoAJcAUk/ijniQQWgrK7MYY54UAGugKQfxRzxoAJQVlfmMEc8qABXQNKPYo54UAEoqytzmCMeVIArIOlHMUc8+Nj0Qzd37kgDX/qVUwLQfOfCDShAGEA6XgHSBML5ChAGkI5XgDSBcL4ChAGk4xUgTSCcrwBhAOl4BUgTCOcrQBhAOl4B0gTC+QoQBpCOV4A0gXC+AoQBpOMVIE0gnH9KgG/4jvb4Dy3glAD+zyBK4Mwc5ogHH3srwBmQ9CuYIx5UAMrqyhzmiAcV4ApI+lHMEQ8qAGV1ZQ5zxIMKcAUk/SjmiAcVgLK6Moc54kEFuAKSfhRzxIMKQFldmcMc8aACXAFJP4o54kG6qXO7GlCAXTzGt1GA8cp3BSrALh7j2yjAeOW7AhVgF4/xbRRgvPJdgQqwi8f4NgowXvmuQAXYxWN8GwUYr3xXoALs4jG+jQKMV74rUAF28RjfRgHGK98VqAC7eIxvowDjle8KVIBdPMa3UYDxyncFKsAuHuPbKMB45bsCFWAXj/FtFGC88l2BCrCLx/g2CjBe+a5ABdjFY3wbBRivfFegAuziMb6NAoxXvitQAXbxGN9GAcYr3xX4D1NkIoFb64KVAAAAAElFTkSuQmCC);
    background-size:120% 120%;
    background-position:center center;
  }
  .item1::before {
    content:"";
    position:absolute;
    width:15px;
    height:15px;
    top:50%;
    right:10px;
  }

  .item:last-child {
    height:20px;
  }

  .item:last-child::before {
    border:none;
    height:0;
  }

  .itemClip {
    position: absolute;
    background-color:white;
    opacity:1;
    top:0;
    left:0;
    transform:translate(-50%, -50%);
    transition:none;
    background-color:white;
  }

  .hide {
    display:none;
  }


  /* end box drag */




  /* item layers gis */

  .box_gis {
    width: 100%;
    height: auto;
  }
  .item_gis {
    width: 100%;
    height: auto;
    margin-bottom: 2px;
    font-size: 13px;
    border-color: #ddd;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    padding:3px 4px 0px 2px;
    min-height: 30px;
  }
  .item_gis:hover {
   background-color: #f2f2f2;
  }
  .item_gis a {
    float: left;
    border-color: #888;
    color:#333 !important;
    background-color:#ddd;
    border-radius: 2px;
    padding: 5px 5px 5px 5px;
    line-height: 0px;
  }



  /* end item layers gis */

  .document_box_file {
    width:100%;
    height: 100px;
    border-radius: 2px;
    border-width: 2px;
    border-style: solid;
    border-color:#999;
    padding-top:25px;
    }
    .document_box_file p {
      text-align: center;
    }

    .overlay1 {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: #1768ac;
  }
  .container1 {
    position: relative;
    width: 100%;
  }


  .container1:hover .overlay1 {
    opacity: 0.96;
  }



  /* treeView */

  .tree{
    --spacing : 1.5rem;
    --radius  : 10px;
    padding:0px;
    font-size: 13px;
  }
  .tree li{
    display      : block;
    position     : relative;
    padding-right : calc(2 * var(--spacing) - var(--radius) - 2px);
  }

  .tree ul{
    margin-right  : calc(var(--radius) - var(--spacing));
    padding-right : 0;
  }

  .tree ul li{
    border-right : 2px solid #ddd;
  }

  .tree ul li:last-child{
    border-color : transparent;
  }

  .tree ul li::before{
    content      : '';
    display      : block;
    position     : absolute;
    top          : calc(var(--spacing) / -2);
    right         : -2px;
    width        : calc(var(--spacing) + 2px);
    height       : calc(var(--spacing) + 1px);
    border       : solid #ddd;
    border-width : 0 2px 2px 0;
  }


  .tree summary{
    display : block;
    cursor  : pointer;
  }

  .tree summary::marker,
  .tree summary::-webkit-details-marker{
    display : none;
  }

  .tree summary:focus{
    outline : none;
  }

  .tree summary:focus-visible{
    outline : 1px dotted #000;
  }

  .tree li::after,
.tree summary::before{
  content       : '';
  display       : block;
  position      : absolute;
  top           : calc(var(--spacing) / 2 - var(--radius));
  right          : calc(var(--spacing) - var(--radius) - 1px);
  width         : calc(2 * var(--radius));
  height        : calc(2 * var(--radius));
  border-radius : 50%;
  background    : #ddd;
}


.select1::after {
  background    : rgb(39, 126, 183) !important;
  color:#333 !important;
  font-weight: 900 !important;
}


.tree summary::before{
  content     : '+';
  z-index     : 1;
  background  : rgb(39, 126, 183);
  color       : rgb(255, 255, 255);
  line-height : calc(2 * var(--radius) - 2px);
  text-align  : center;
  padding-top:3px;
}

.tree details[open] > summary::before{
  content : '−';
}

.tree-white-box {
  min-height: 85vh ;
}
  /* end treeView */

  .btn-custom-property {
    margin: 0px 5px 0px 8px;
    color:#444 !important;
    font-size: 14px;
  }
  .btn-custom-property:hover {
    color:rgb(201, 201, 201) !important;
  }

  .disable-div {
    pointer-events: none;
    opacity: 0.5;
    filter: blur(2px);
  -webkit-filter: blur(2px);


}

.disable-div-text {
    width: auto;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    /* margin: -50px 0 0 -50px; */
    z-index: 1000;

  }