*{
  padding: 0;
  margin: 0;
}
html,body{
  width: 100%;
   height: 100%;
}
.sidebar{
  position: relative !important;
   min-width: 17%; 
   padding-right: 20px !important;
   min-height: 500px  !important;
   padding-bottom: 85px !important;
   float: left;
}
.pusher{
    padding-top: 0px;
    margin: 0px 20px;
    float: left;
  }
  .menu{
    margin-bottom: 0px !important;
  }
  .navblue{
    background-color: #061148 !important;
  }
  .navblue a{
    color: #fff !important;
  }
   .leafgreen{
    background-color: #c0d06a !important;
  }
  .leafgreen a{
    color: #fff !important;
  }
   .deepleafgreen{
    background-color: #085D08 !important;
    color: #fff !important;
  }
  .deepleafgreen a{
    color: #fff !important;
  }

   .navblack{
     position: fixed !important;
     bottom: 0 !important;	 
	   width: 100% !important;
	   height: 30px !important;
     background-color: #000 !important;
	   text-align:center !important;
	   padding: 5px !important;
  }
  .navblack span{
	  padding:5px !important;
	  text-align:center !important;
      color: #fff !important;
  }

  .navgreen{
     position: fixed !important;
     z-index: 400  !important;
     bottom: 0 !important;   
     width: 100% !important;
     height: 30px !important;
     background-color: #085D08 !important;
     text-align:center !important;
     padding: 5px !important;
  }
  .navgreen span{
    padding:5px !important;
    text-align:center !important;
    color: #fff !important;
  }

  .white{
    background-color:#fff !important;
  }
  .naviconhover:hover{
   background: #fff1d6 !important;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
  .breadcrumb{
    margin: 10px !important;
    /* background-color:  #c8ccd3 ; */
   /* background-color: #061148; */
   /* box-shadow: rgba(232, 233, 235, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; */
    padding: 0px;
    width: 100% ;
  }
  .breadcrumb  a{
    /* color:#454545 !important; */
    color:#000 !important;
  }
  .breadcrumb  .active{
    /* color:#454545 !important; */
    color:#9e8f03 !important;
  }
  .breadcrumb  .chevron{
    color: #E5E5E5 !important;
  }
  .content_  form{
    margin-bottom: 10px;
    }
    .field_{
      display: inline-table !important;;
      margin: 5px !important;
      padding-top: 0px !important;
    }
    .field_ label{
       font-size: 12px !important;
    }
    ._input{
        width: 170px !important; 
        height: 30px !important;
        font-size: 12px !important;
    }
    .inpu_{
      font-size: 11px !important;
      height: 22px !important;
    }
    .inp{
      height: 20px !important;
    }

    .table_.dataTable th{
     background-color: #085d08 !important; 
     color: #fff  !important;
     text-align: center;
     border: 0;
     width: auto;  
     white-space: nowrap;
   }
    .table_.dataTable tbody tr td{
      border-bottom: 0.1px solid #c5c5c5 !important;
      border-left: 1px solid #c5c5c5 !important; 
       width: auto;  
      white-space: nowrap;
  } 
   .table_.dataTable tbody tr td:nth-last-child(2){
      border-right: 0.1px solid #c5c5c5 !important; 
  } 
    .table_.dataTable tbody tr:nth-child(even) {
      background-color: #FFFFCC; 
  }

    ._table.dataTable thead th,
    ._table.dataTable td{
       width: auto !important;
    }
   ._table th{
     padding: 5px !important;
     background-color: #c0d06a  !important; 
     color: #000  !important; 
   
   }
   ._table tbody tr:nth-child(even) {
    background-color: #FFFFCC; 
  }
   ._table tbody tr {
    font-size: 10px;
    padding: 5px !important;
    transition: background-color 0.3s ease;
  }
  ._table tbody tr:hover {
    background-color: #E5E5E5; /* You can change this color to your preference */
  }
   ._table tbody tr td{
     font-size: 14px;
     padding: 5px !important;
   }
   
  .edit_btn,.add_btn{
     cursor: pointer;
  }
  .edit_btn:hover{
      background-color: rgb(100, 99, 104);
      padding: 2px;
      color: #fff;
  } 
  .delete_btn:hover{
      background-color: rgb(255, 75, 84);
      color: #fff;
  } 
  #sub_row{
      background-color: #f4f6f5  !important;
       display: none; 
  } 
  .accordion{
    margin-top: 30px !important;
  }
  .Color{
    background-color: #faf6f0 !important;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  }
 
  .imgpreview_blob{
    display: none !important;
  }
  
  .file_transfer{
    display: none !important;

  }

  .ui.dropdown .menu {
    z-index: 999999 !important;
	
  }

  .cdropdown{
     border: 1px solid #fff;
  }
  .dropdown-content {
        display: none;
        position: absolute;
        z-index: 10;
        background-color: #fff;
        width: 170px;
        max-height: 150px;
        overflow-y: auto;
        border: 1px solid #fff;
        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);
		
      }
  
  .listview-content {
        background-color: #fff;
       /* width: 170px; */
        max-height: 150px;
        overflow-y: auto;
        border: 1px solid #fff;
        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);
		
      }
  
 .cdropdown:hover .dropdown-content {
        
  }


  
  .checkbox-label {
        display: block;
        margin: 5px;
   }
  
  .checkbox-label input {
        margin-right: 5px;
   }
  .menu{
        padding-left: 0px;
  }
 .tree {    
       background: #09544d;
       font-family: Arial, sans-serif;
       margin-top: 5px;
  }
      
 .parent_tree {
     list-style: none;
     padding: 0;
     margin: 0;
  }
 .top_dir{
       font-size: 13px;
       font-weight: bold;
	
  }
   
  .data_links li{
	display:inline-table;
  }

 .data_links li:nth-child(2){
	 max-width: 200px;
  }
  .sub_dir{
         font-size: 12px;
         font-weight: bold;
     }
  .parent_tree li {
          list-style: none;
   }
   .parent_link{
        margin-left: 10px;
   }
  .folder {
       cursor: pointer;
       padding-left: 5px;
	
	   
       /*overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       word-wrap: break-word; */
     
  }
      
  .folder .fa-angle-right {
          margin-right: 5px;
          font-size: 10px;
   }
      
   .folder .fa-angle-down {
          margin-right: 5px;
          font-size: 10px;
    }
      
      .folder .fa-folder {
          margin-right: 5px;
          font-size: 15px;
      }
      /* Hide child items by default */
      .parent_tree ul {
          display: block;
       }

      .parent_tree ul li:nth-child(2) {
          display: block;
      }

      .root_name{
              font-size: 13px;
              font-weight: bold;
              font-family: "Kanit";
              /* color: #1d1b1b; */
              color: rgb(0 47 101);
              margin-left: 5px;
          }
      .survey_name{
          font-size: 11px;
          font-weight: bold;
          font-family: "Open Sans";
          color: rgb(0, 0, 0);;
          /* margin-left: 5px; */
        }
        .mif-folder-open{
           color:#eb984e;
        }
      .survey_name_links{
        margin-left: 20px;
      }
      .hh_links{
          margin-left: 40px;
      }
      .hh_name{
              font-size: 10px;
              font-weight: bold;
              color: #1d1b1b;
              margin-left: 0px;
			  
			
          }
		  
	.hh_name:hover {
              color: blue !important;
          }

  .hover_{
	 width:50px;
	 word-wrap: break-word;
	 position: relative; 
	 background-color: #f9f9f9; /* Background color for hover text */
	 font-size: 10px;
     margin-left: 60px;
	 padding: 5px; /* Padding for hover text */
     border: 1px solid #ccc; /* Border for hover text */
     border-radius: 4px; /* Border radius */
  }
  
	 .surveyname_{
              font-size: 10px;
              font-weight: bold;
              color: #1d1b1b;
              margin-left:40px;
          }  
       ._section_cmenu{
           font-size: 12px;
           font-weight: bold;
           color: #1d1b1b;
           margin-left: 5px;
        }
      .contextMenu{
         background-color: #fffcfc;
         border-radius: 3px ;
         box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
         width: 150px;
         position: absolute;
         top: 10px;
         left: 174px;
         z-index: 10;
         display: none;
         padding: 0px !important;
      }
      
      .contextMenu ul li{
        color: black;
        list-style-type: none; 
        border: .5px solid #f3f3f3;
        padding: 5px;
      }
      .contextMenu ul li a{
        color: black;
        font-size: 12px;
        list-style-type: none;
        padding-left: 8px;
        display: block;
      }
      .contextMenu ul li:hover{
        background: #f3f2f2;
      }
      .contextMenu ul li a:hover{
        list-style: none;
        text-decoration: none;
      }
	   .contextMenu ul li ul{
		   background-color: #fffcfc !important;
           border-radius: 3px  !important;
           box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px !important;
           width: 150px !important;
           position: absolute !important;
		   z-index: 12 !important;
		   margin-left: 80px !important;
		   margin-bottom: 80px !important;
      }
	  #mySubMenu{
         display:none;
      }
      .inline_div{
        cursor: pointer;
        padding-left: 5px;
        display: inline-block ;
      }
      .inline_div .fa-angle-right {
        margin-right: 5px;
        font-size: 10px;
      }
    
     .inline_div  .fa-angle-down {
        margin-right: 5px;
        font-size: 10px;
    }
    
  .inline_div .fa-folder {
        margin-right: 5px;
        font-size: 15px;
    }
      .treeview_pagination{
         position: absolute;
         right: 0px;
         margin-left: 7px;
 
      }
      ._pagi_left i{
          font-size: 8px;
      }
      ._pagi_right i{
          font-size: 8px;
      }
      ._pagi_left{
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px !important;
         padding: 0px;
      }
      ._pagi_right{
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px !important;
        padding:  0px;
      }
      hr{
         border-bottom: 1px solid rgb(216, 213, 213);
      }
      #myMenu{
        width: 100%;
        margin: 0px !important;
      }
	  
      .close_context{
        padding-top: 8px;
        padding-left: 8px; 
      }
      .close_context:hover{
         color: #be1313;
      }
      
      .searchBox{
        background-color: #fffcfc;
        border-radius: 3px ;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
        position: absolute;
        top: 10px;
        left: 174px;
        z-index: 10;
        display: none;
        padding: 0px !important;  
      }

      #map { 
        width: 100%;
        height: 480px; 
      }

      #testy{
         position: absolute !important;
         z-index: 1200 !important;
         top: 250px !important;
         right: 500px !important;
      }

      #testy h3{
         display: none !important;
     }

     #testy hr{
        display: none !important;
  }
     #subtesty{
         position: absolute !important;
         z-index: 1200 !important;
		 top: 250px !important;
         right: 400px !important;
      }

      #subtesty h3{
         display: none !important;
     }

     #subtesty hr{
        display: none !important;
  }
  
   .longer.modal{
	  min-height: 890px !important;
  }
   .scrolling{
	  min-height: 890px !important;
  }
  #pagination {
	 margin-top: 5px !important;
	 margin-bottom: 5px !important;
     float: right;
  }

 #pagination .item {
    font-size: 10px; /* Adjust font size */
    padding: 4px 8px; /* Adjust padding */
  }
  
.hidemodal{
	 display: none !important;
}


   .zoom-in {
    opacity: 0 !important;
    transform: scale(0.5) !important;
    transition: transform 0.5s ease;
  }


.modColor{
  padding: 5px !important;
  color: #fff !important;
  background-color: #09544d !important;	
  border-bottom:1px solid #fff !important;
}
.modColor a{
  color: #fff !important;
}

.modSubColor{
  background-color: #c0d06a !important;	
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; !important;

}
.modSubColor a{
  color: #393D39 !important;
}
.select_option .item{
	font-size: 12px !important;
}
.text{
	font-size: 12px !important;
}
.marker-label{
	font-size: 5px !important;
}

.ui .step::before{
   font-size: 14px !important;
}
.ui .step .content .title{
   font-size: 14px !important;
   
}

.file-read{
  margin-top: 25px;

}

.file-read fieldset{
  border: 0 !important;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.modules_wrapper{
   margin-left: 0px;
 
}
.modules_wrapper ul{
   margin-bottom: 20px;
}
.modules_wrapper ul li {
   list-style-type: none;
   float: left;
   max-width: 220px !important;
   margin: 10px;

}

.modules_wrapper ul li ul{
    background: #fff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px !important;
}
.modules_wrapper ul li ul li {
   float: none;
   display: inline-block;
   margin: 2px;
   height: 10px;
}
.modules_wrapper ul li ul li a{
   color: #fff;
}

.modules_wrapper ul li ul li span{
   color: #fff;
   position: absolute;
   display: block;
   background: yellow;
   width: 220px !important; 
   box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
   padding: 5px;
   color: #000;
   display: none;
}

.mod_Color{
   padding: 10px !important;
   color: #000 !important;
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
   border:0px !important;
   max-width: 220px !important;
   height: 170px !important; 
   text-align: center;
   word-wrap: break-word;
}
.mod_Color h1{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  margin-top: 0px;
}
.mod_Color p{
  font-size: 12px;
}
.mod_Color a{
  color: #000 !important;
}

.mod_Color:hover{
   box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.menu_btn{
   display: block !important;
}
.ui.labeled.icon.sidebar{
   display: none;
   position: absolute !important;
   z-index: 100 !important;
   animation: fadeInAnimation ease 1s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
}
.navrp{
	 box-shadow:rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
	 text-align: center;
}
.navrp div{
	display: inline-block !important;
	margin-right: 20px; 
}
.hyper-link li{
	list-style-type: none !important;
	margin: 5px !important;
}

.hyper-link li a img{
	 width: 14px !important;
}

.mandatory{
	
}
.mandatory::after{
	 content: "*" !important;
	 color: red !important;
	 font-size: 19px !important;
}
.highlighted { 
   background-color: #fccec9 !important; 
}
.toast_error{
   max-width:350px;  min-height:50px;position: fixed; top: 10; 
   box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
   background: #F8ABB5;z-index: 400;text-align: center;
   margin-left: 20%; margin-top: 5%;
   padding: 10px;
  display: none;
}

.leaflet-control-attribution{
         display: none !important;
      }
@keyframes fadeInAnimation {
      0% {
          opacity: 0;
      }

      100% {
          opacity: 1;
      }
  }

.card-fadePopin{
      opacity: 0;
      transform: scale(0.1);
      animation: fadePopin  forwards;
}
  @keyframes fadePopin {
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
.uploadForm{
	display: none;
} 
.custom-file-upload { 
    display: inline-block; 
	padding: 10px 20px; 
	cursor: pointer; 
	color: white; 
	border-radius: 5px; 
	margin-top: 10px; 
    display: none;
 }
.hidden-file-input { 
    display: none; 
}  
  /* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 992px) {
  .menu_btn{
     display:none !important;
  }
  .modules_wrapper{
   margin-left: 10px;

}

   .ui.labeled.icon.sidebar{
      display: block;
      height: 200vh !important;
      position: relative !important;
      animation: fadeInAnimation ease 1s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
   }

    @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

}



/* Remove default list styling */
.ctree, .ctree ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Add dotted lines for hierarchy */
.ctree ul {
    margin-left: 20px; /* Adjust this value to control indentation */
    padding-left: 5px; /* Space for the vertical line */
    border-left: 1px dotted #999; /* Vertical dotted line */
}

/* Horizontal dotted line for each item */
.ctree li {
    position: relative;
    padding-left: 10px; /* Space for the horizontal line */
}

/* Horizontal dotted line */
.ctree li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px; /* Adjust to align with the text */
    width: 8px; /* Length of the horizontal line */
    border-top: 1px dotted #999; /* Horizontal dotted line */
}

/* Style the caret/button */
.c_caret {
    cursor: pointer;
    user-select: none; /* Prevent text selection */
    display: inline-block;
    padding: 2px ; /* Smaller padding for a compact button */
    margin-right: 5px;
    border-radius: 3px; /* Rounded corners */
    font-size: 12px; /* Smaller font size */
    text-align: center;
    width: 12px; /* Smaller fixed width for the button */
    height: 20px; 
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s, box-shadow 0.2s; 
    background: #DCDCDC;
}

/* Hover effect for the button */
.c_caret:hover {
    background-color: #e0e0e0; 
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); 
}

/* Create the plus/minus button */
.c_caret::before {
    content: "+"; /* Plus symbol for collapsed state */
    color: #333; /* Dark gray text */
}

/* Minus symbol for expanded state */
.c_caret-down::before {
    content: "-"; /* Minus symbol for expanded state */
}

.nested {
    display: none;
}

.active {
    display: block;
}


.c_label {
    cursor: pointer;
    display: block;
    padding: 5px 0; 
    position: relative;
    z-index: 1; 
}

.c_label .ccheckbox{
    margin-right: 5px;
}

 .ctree_content {
        max-height: 250px !important;
        overflow-y: auto !important;
        border: 1px solid #fff !important;
        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1) !important;
    
 }