*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Prevent zooming using CSS */
body {
  touch-action: none;
}


/* .main{
    position: relative;
    height: 100vh;
    
} */
.main{
  width: calc(100% - 150px);
}

.main svg{
    position: absolute;
    width: 100%;
    
}
h1{
    font-family: Calibri, Helvetica, sans-serif;
    text-align: center;
    font-size: 25px;
    font-weight:bold;
    margin-top: 20px;
    text-decoration: underline;
}
h2{
    font-family: Calibri, Helvetica, sans-serif;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    margin-top: 20px;
    
}
.excel{
    float:left;

}

.date {
    direction: rtl;    
}
.projects_stations{
    font-family: Calibri, Helvetica, sans-serif;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    margin-top: 20px;
    direction: rtl;   
}
.navigation {
  height: 100%;
  position: fixed;
  top: 0;
  right: 0; /* Position the navbar at the right of the page */
  padding: 10px 0;
  background-color: #006ba8;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 99;
  direction: rtl; /* Set the direction to right-to-left */
}


.nav-menu {
  display: grid;
  flex-direction: column;
  align-items: flex-end;
}

.toggle {
  display: none;
}

.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
 text-align: center;
}

.nav-menu ul li {
  margin: 4px 0;
}

.brand {
  display: grid;
  align-items: center;
}

.brand .logout {
  margin-right: 20px;
}

.brand .logo-image {
  margin-right: auto;
  margin-left: 20px;
}

.logout{
    display: inline-block;
    direction: rtl;
    margin-left: 30;
   
}

.toggle, .close{
    display: none;
}

.nav-menu li{
    display: inline-block;
    margin: 0 0 0 30px;
    font-size: 20px;
    color: #fff;
    position: relative; /* Added position relative */
  }
  


.nav-menu li a{
    text-decoration: none;
    color: #fff;
    font-family: Calibri, Helvetica, sans-serif;
}
.dropdown {
  display: none; 
    position: relative;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 20px;
    border: none;
    outline: none;
    color: white;
    background-color: inherit;
    font-family: Calibri, Helvetica, sans-serif;
    /* pointer-events: none; */
}

  .nav-menu li a:hover, .dropdown:hover:not(.disabled) .dropbtn {
   color: #7baecc;
  }
/* 
  .nav-menu li a:hover, .dropdown.menu:active:not(.disabled) .dropbtn {
    color: #7baecc;
  } */
  
  
  /* Dropdown content (hidden by default) */
  .dropdown-content , .projectslist {
    display: none;
    position: absolute;
    background-color: #006ba8;
    /* min-width: 250px; */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    top: 100%;
    left: 0;
    max-height: 400px; /* Set max height for scrolling */
    overflow-y: auto;
    width: 100%; /* Enable vertical scrolling */
}

  

  .dropdown-content li 
  {
    width: 100%;
    margin: 0;
  }
  /* Links inside the dropdown */
  .dropdown-content a , .projectslist option {
    color: black;
    /* padding: 12px 16px; */
    margin-right: 10px;
    text-decoration: none;
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    color: #7baecc;
  }

  /* Show the dropdown menu on hover */
  .dropdown:hover:not(.disabled) .dropdown-content.projectList {
    display: block;
  }

  /* .dropdown.menu:active:not(.disabled) .dropdown-content {
    display: block;
  } */
  
  .dropdown.disabled button{
    color: gray;
  }

  .dropdown-content-menu.show {
    display: block;
    background-color: #62bbef6b;
   

}
.dropdown-content-menu{
  display: none;
}
.container{
    height: 80vh;
    width: 90vw;
    color: #fff0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    padding: 70px 0 30px 0;
}

.photo{
    position: relative;
    width: 45%;
    height: 100%;
    padding: 0 20px;
}
 
.photo img{
    position: relative;
    width: 100%;
    height: 100%;
}

.form-cont{
    background-color: #006ba8;
    opacity: 0.7;
    width: 35%;
    height: 100%;
    border-radius: 20px;
    margin-right: 10%;
}
/* .boxBackground{
  background-color: #004166;
  opacity: 0.7;
  width: 35%;
  margin: auto;
  border-radius: 20px;

} */

.inner-form{
    width: 60%;
    height: 100%;
    position: relative;
    display: block;
    margin: 0 auto;
    margin-top: 10%;
}
.inner-form h1 {
    text-decoration: none;
    color: #fff;
    font-family: Calibri, Helvetica, sans-serif;
    text-align: center;
    margin-bottom: 15%;
}
.social-login{
    position: relative;
    margin: 10px 0;
    text-align: center;
}

.social-login span{
    color: #fff;
    padding: 5px 0;
    font-size: 20px;
    font-weight: 700;
}

.social-login ul li{
    display: inline;
    color: #fff;
    font-size: 30px;
    padding: 5px;
    margin: 5px 0;
}

.social-login ul>li>a{
    color: #fff;
    text-decoration: none;
}

.inner-form .imput-area{
    margin: 10px 0;
}

.input-area i{
    position: absolute;
    margin: 10px 0px;
    color: #fff;
}

.input-area input{
    position: relative;
    background: transparent;
    width: 100%;
    border: none;
    border-bottom: 2px solid #fff;
    margin: 5px 0;
    padding: 5px 18px;
    color: white;
    font-weight: 700;
    font-size: 25px;
    box-sizing: border-box;
}


.password-input{

    position: relative;
  }
  .password-input input[type="password"],
  .password-input input[type="text"]{
    width: 100%;
    padding: 12px 36px 12px 12px;
    box-sizing: border-box;
  }
  .eye_login{
    position: absolute;
    top: 28%;
    right: 4%;
    cursor: pointer;
    color: lightgray;
  }
  .eye_td{

    height: 25px;
    cursor: pointer;
    color: lightgray;
    ;
  }
  .PASSWORD_UM input{
    border: none;
    text-align: right;
    font-family: Calibri, Helvetica, sans-serif;
    font-size: 15px;
   
  }
::placeholder{
    color: #fff;
    opacity: 0.7;
}

.btn{
    position: relative;
    display: block;
    margin: 10px auto;
    font-size: 20px;
    background: transparent;
    box-shadow: none;
    border:  2px solid #fff;
    color: #fff;
    padding: 5px 15px;
    border-radius: 10px;
}

.btn:hover{
    border: 2px solid #006ba8;
    background-color: #fff;
    cursor: pointer;
    color: #006ba8;
}
/* #report6 img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 50%;
} */
#maps img{
    display: block;
    margin-left: auto;
    margin-right: auto;
   
    width: 75%;
}
.r{
  position: relative;
  top:10%;
}
/* .navigation{
  position: fixed; 
  top: 0; 
  width: 100%;
  padding: 10px 100px;
 background-color: #004166;
} */


/* דשבורד */
#filters {
  margin-bottom: 5px;
  direction:rtl;
  font-family: Calibri, Helvetica, sans-serif;
  font-weight: bold;
  color: #004166;

}

.selectedPROJ {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-family: Calibri, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 25px;
  text-decoration: underline;
}


#dashboardTable {
  width: 50%;
  float: right;
  margin-top: 0;
}



#dashboardTable th,
#dashboardTable td {
  padding: 0;
}

#todayKWHGraph {
  width: 45%;
  display: inline-block;
  /* margin: 10px; */
  margin-top: -40px;
  height:300px
}
#pastWeekKWHGraph {
  width: 45%;
  margin-top: -20px;
  height: 350px;
  float: left;
}

.gauges {
  /* width: 45%;
  float: right; */
  margin-top: -80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* This will evenly space the gauges in a row */
}

.gauge {
  width: calc(25% - 16px); /* Adjust the width to fit 4 gauges in a row */
  height: 150px;
  margin: 8px;
  box-sizing: border-box;
}
/* .js-plotly-plot .plotly,
.js-plotly-plot .plotly div {
  direction: rtl !important;
  text-align:right !important;
} */


.squares {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  margin-top: 10px;
  direction: rtl;
}
.square {
  width: 200px;
  height: 60px;
  background-color: #f2f2f2;
  margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px; /* Adjust the value to control the roundness of the corners */
}

.square-content {
  text-align: center;
  direction: rtl;

}

.square-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  font-family: Calibri, Helvetica, sans-serif;
  /* display: inline-block; */
}

.square-quantity {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
}
.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  width: 70px;
  font-family: Calibri, Helvetica, sans-serif;
}

.selected {
  border: 2px solid #006ba8;
}

/* 

@media(max-width: 990px){
  #logout_btn{
    
      position: relative;
      display: block;
      margin: 10px auto;
      font-size: 14px;
      background: transparent;
      box-shadow: none;
      border:  2px solid #fff;
      color: #fff;
      padding: 4px 10px;
      border-radius: 10px;

  }
  .logo-image{
    margin-left: -90;
  }

  .toggle{
      display: flex;
      color:#fff;
      cursor: pointer;
  }

  .close{
      display: block;
      position: absolute;
      color: #fff;
      right: 0;
      font-size: 30px;
      cursor: pointer;
      margin: 50px;
  }

  .nav-menu ul>li>a,  .dropdown .dropbtn {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 30px;
    color: #ffffff;
    display: block;
    border: none;
    background: none;
    width:100%;
    text-align: center;
    cursor: pointer;
    outline: none;
  }
  .nav-menu{
      display: none;
      position: absolute;
      width: 100%;
      height: 100vh;
      background-color: #004166;
      left: 0;
      top: 0;
      transition: all 3s ease;
  }

  .nav-menu ul{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: inline-grid;
  }

  .nav-menu ul>li>a:hover{
      color: #fff;
      padding-bottom: 5px;
      border-bottom: 2px solid #fff;
  }
  .container{
      height: 75vh;
      top: 50%;
      margin: 10px;
  }

  .photo{
      display: none;
  }

  .form-cont{
      width: 100%;
      max-height: 100%;
  }
  .navigation{
    position: fixed; 
    top: 0; 
    padding: 10px 100px;
   background-color: #004166;
  }
  .logout{
    width: max-content;
    margin-left: 0;
    padding-right: 10;
  }
  .mapFrame{
    width:100%;
    height:700px;
    margin:0;
    padding:0;
  }



  #filters {
    margin-bottom: 10px;

  }
  #dashboardTable {
    width: 100%;
    float: none;
    margin-top: 10px;
    clear: both;
  }

  
#dashboardTableContainer {
  height: 400px; 
  overflow-y: auto;
}

#dashboardTable th,
#dashboardTable td {
  padding: 0;
}

  #todayKWHGraph {
    width: 100%;
    display: block;
    margin-top: 10px;
    height: auto;
  }

  #pastWeekKWHGraph {
    width: 100%;
    margin-top: 10px;
    height: auto;
    float: none;
    clear: both;
  }
  .gauges {
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
  }

  .gauge {
    width: 50%; 
    height: auto;
    margin: 8px 0;
    box-sizing: border-box;
  }
  .js-plotly-plot .plotly,
  .js-plotly-plot .plotly div {
    direction: rtl !important;
  }
  
  #squares {
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
  
  }

  .square {
    width: 60%;
    height: 30px;
    margin: 2px 0;
  
  }

  .square-content {
    text-align: center;
    direction: rtl;

  }

  .square-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 2px;
   
  }

  .square-quantity {
    font-size: 16px;
    font-weight: bold;
 
  }

  .selected {
    border: 2px solid #004166;
  }
} */

table {
    border-collapse: collapse;
    width: 100%;
    direction: rtl;
    font-family: Calibri, Helvetica, sans-serif;
    margin-top: 20px;
    
  }
  
  th,
  td {
    text-align: right;
    padding: 5px;
  }
  
  tr:nth-child(even) {
    background-color: #d6e6ee;
  }
  thead.thead-dark tr:nth-child(even) {
    background-color: white;
  }
  .table_title{
    background-color: #006ba8!important;
    opacity: 0.7;
    color: #fff;
}
.report3d_G{
  background-color: #e3e3e3;
}
.imgShowMaps{
  width: 35px;
  height: 25px;
}

#table_report6 {
  font-family: Arial, Helvetica, sans-serif;

}

#table_report6 img {
  width: 90px;
  height: 60px;
}

.export{
  width: 100%;
  height: 100%;
}
.Export-table{
  color: black;
  background-color: white;
  border: 1px solid black;
}

.table_title_Export,
.table_title_Export th,
.table_title_Export td,
.Export-table th,
.Export-table td
{
  color: black;
  background-color: white;
  border: 1px solid black;
}
#tableContainer {
  height: 50vh; /* Adjust the height as needed */
  overflow-y: auto;
  border: 1px solid #ccc; /* Optional: Add a border to the container for styling */
  position: relative; /* Add this to create a positioning context */
}

#table_prices {
  width: 100%; /* Optional: Make the table width 100% */
  margin-top: 0;
}

/* Style the header row */
#table_prices thead th {
  background-color: #006ba8;
  color: white;
  position: sticky;
  top: 0; /* Stick to the top of the container */
  z-index: 1; /* Ensure it's above the scrolling content */
}


#table_client_prices {
  width: 100%; /* Optional: Make the table width 100% */
  margin-top: 0;
}
#table_client_prices thead th {
  background-color: #006ba8;
  color: white;
  position: sticky;
  top: 0; /* Stick to the top of the container */
  z-index: 1; /* Ensure it's above the scrolling content */
}
h3{
  color: #006ba8;
  font-family: Calibri, Helvetica, sans-serif;
  text-align: center;
}
.pie_plotly {
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}
.pie_plotly .row {
  display: flex;
  /* justify-content: center; */
  margin-bottom: 20px;
  overflow-x: auto; 
  min-width: 100%; /* Set minimum width to prevent disappearing */
}


.pie_plotly .row > .col {
  /* flex: 1; */
  margin: 0 10px;
}

.pie_plotly .row > .col > div {
  /* padding: 20px; */
  /* background-color: #ababab; */
  border-radius: 5px;
  /* margin-bottom: 20px; */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  /* height: 500px;
  width: 600px; */
}

.pie_plotly .row > .col > div > div {
  height: 100%;
  width: 100%;
}

#tableSearchInput{
  font-size: 25px;
  text-align: center;
  margin-left: 10px;
  border-radius: 10px;
  font-family: Calibri, Helvetica, sans-serif;

}
.searchbtn{
  font-size: 20px;
  background: #006ba8;
  box-shadow: none;
  border:  2px solid #5591b4;
  color: white;
  padding: 5px 15px;
  border-radius: 10px;
}
/* ---------------------------------------------------------------- */
.table-sortable th {
  cursor: pointer;
}

.table-sortable .sorted-asc::after {
  content: "\25b4"; /* Up arrow */
}

.table-sortable .sorted-desc::after {
  content: "\25be"; /* Down arrow */
}

.table-sortable .sorted-asc,
.table-sortable .sorted-desc {
  background: rgba(0, 0, 0, 0.1);
}

.communicationQualityBtn{
  position: relative;
  display: block;
  font-size: 18px;
  background: transparent;
  border: transparent;
  color: #fff;
  padding: 5px 15px;
  font-family: Calibri, Helvetica, sans-serif;

}
#communicationQualityContant {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 20px; */
  background-color: rgb(251, 249, 249);
  /* height: 100%; */
 
}


.reportsMenuBtn{
  position: relative;
  display: block;
  font-size: 18px;
  background: transparent;
  border: transparent;
  color: #fff;
  padding: 5px 15px;
  font-family: Calibri, Helvetica, sans-serif;

}

.row {
  display: flex;
  width: 100%;
  justify-content: space-between;
}



.row > div, .row > table {
  flex: 1;
  margin: 10px;
  max-width: 50%;
}


#table_CQ_report {
  width: 100%;
  /* max-width: 900px; */
  overflow-y: auto;
  height: 400px; /* Set the desired height for scrolling */
  display: block;
  overflow-x: auto;
}

 
/* #table_CQ_report thead {
  display: block; 
} */

#table_CQ_report thead th {
  position: sticky;
  top: 0;
  background-color: #006ba8;
  color: #fff;
  z-index: 1;
} 


/* 
#table_yeshuvSummary_report {
  width: 100%;
  /* max-width: 900px; 
  overflow-y: auto;
  height: 400px; 
  display: block;
  overflow-x: auto;
}



#table_yeshuvSummary_report thead th {
  position: sticky;
  top: 0;
  background-color: #006ba8;
  color: #fff;
  z-index: 1;
}  */

.table-container {
  width: 100%;
  max-width: 900px; /* התאמה אם צריך מגבלת רוחב */
  overflow-x: auto;
}

.solarytable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0px;
}

.solarytable thead th {
  position: sticky;
  top: 0;
  background-color: #006ba8;
  color: #fff;
  z-index: 1;
  text-align: center;
}

.solarytable tbody {
  text-align: center;
  display: block;
  max-height: 150px; /* גובה מקסימלי לגלילה אנכית */
  overflow-y: auto;
  width: 100%;
}

.solarytable thead,
.solarytable tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed; /* פריסה קבועה */
}
.solarytable th, 
.solarytable td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.rounded-border {
  border-radius: 10px; /* Adjust as needed */
  border: 1px solid #ddd; /* Adjust color and thickness as needed */
  overflow: hidden; /* Ensures content doesn't overflow outside the border */
}


.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#excelCQ {
  align-self: flex-start;
}

.header-text {
  display: flex;
  flex-direction: column;
  text-align: center;
  flex-grow: 1;
}

.header-text h2 {
  margin: 0;
}


.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.grid-container .col{
  height: 380px;
}

/* ------------------כפתור on-off----------- */

.chooseTime {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Space between the text and switch */
  width: 200px; /* Adjust width as needed */
  margin: 0 auto; /* Center the element horizontally if needed */
}

.label-text {
  font-size: 16px; /* Adjust size if needed */
  margin: 0 10px; 
  font-family: Calibri, Helvetica, sans-serif;
 font-size: 16px;
 font-weight: bold;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/* ---------------------------- */

.navbar-time-selection {
  display: flex;
  justify-content: left;
  align-items: center;
  background-color: #8d8d8d1f;
  padding: 5px;
  direction: rtl;
  font-family: Calibri, Helvetica, sans-serif;
}

.navbar-time-selection select, .navbar-time-selection input[type="date"], .navbar-time-selection button {
  margin: 0 10px;
  font-family: Calibri, Helvetica, sans-serif;
  /* padding: 8px;
  font-size: 16px; */
}

.navbar-time-selection button {
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

.navbar-time-selection button:hover {
  background-color: #45a049;
  /* background-color:rgb(228, 244, 141) */
}


/* בהתחלה תפריט החודשים מוסתר */
.full-month {
  display: none;
}
.year-select {
  display: none;
}

#loading-spinner {
  margin: 0 auto;
    text-align: center;
    font-family: Calibri, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 25px;
    direction: rtl;
    /* text-decoration: underline; */
    /* position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px; */
    color: #333;
    /* אפשר להוסיף אנימציה או צורה אחרת לפי הצורך */
}
#spinner {
    position: fixed; /* מיקם מעל כל האלמנטים האחרים */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* מיקום אופקי במרכז */
    align-items: center; /* מיקום אנכי במרכז */
    background-color: rgba(255, 255, 255, 0.8); /* רקע שקוף למחצה */
    z-index: 9999; /* לוודא שהוא מעל כל התוכן */
}
.spinner {
  position: fixed; /* מיקם מעל כל האלמנטים האחרים */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /* מיקום אופקי במרכז */
  align-items: center; /* מיקום אנכי במרכז */
  background-color: rgba(255, 255, 255, 0.8); /* רקע שקוף למחצה */
  z-index: 9999; /* לוודא שהוא מעל כל התוכן */
}

/* הסגנון של ה-loader (שעון מסתובב) */
.loader {
  margin-top: 30%;
  margin-left: 50%;
    border: 6px solid #f3f3f3; /* צבע רקע של השעון */
    border-top: 6px solid #3498db; /* צבע החלק המסתובב */
    border-radius: 50%; /* מעגל */
    width: 50px; /* גודל השעון */
    height: 50px; /* גודל השעון */
    animation: spin 1s linear infinite; /* אנימציה */
}

/* אנימציית הסיבוב */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* גרף דליפה */
.flex-container { 
  display: flex;
  background-color: rgb(202, 202, 202);
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 10px;

}	
/* 
.leakage-form {
  display: flex;
  gap: 40px;
  padding: 30px;
  background:#ececf1;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-family: 'Segoe UI', sans-serif;
  max-width: 900px;
  margin: auto;
  flex-wrap: wrap;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 200px;
}

.form-section label {
  font-weight: 600;
  color: #4a4a4a;
  margin-bottom: 4px;
}

.form-section input[type="text"],
.form-section input[type="checkbox"] {
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 12px;
  border: 1px solid #dcdfe6;
  background-color: #ffffff;
  transition: all 0.2s ease;
}

.form-section input[type="text"]:focus {
  border-color: #a0c4ff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(160, 196, 255, 0.3);
}

.form-section input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.button-section {
  display: flex;
  align-items: end;
  justify-content: center;
  min-width: 180px;
} */
.leakage-form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* אפשר גם nowrap אם אתה רוצה כפיית שורה אחת */
  gap: 20px;
  /* align-items: flex-end; */
  /* padding: 20px; */
  background: #ececf1;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-family: 'Segoe UI', sans-serif;
  max-width: 100%;
  overflow-x: auto;
  direction: rtl;
}
#table_meter_report{
  margin-top: 0;
}
#table_meter_report thead th {
  position: sticky;
  top: 0;
  background-color: #006ba8;
  color: white;
  z-index: 2; /* כדי שתישאר מעל שורות התוכן */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* אופציונלי: הצללה קטנה */
}
.form-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-right: 5px;
}

.form-item label {
  font-weight: 600;
  color: #4a4a4a;
}

.form-item input[type="text"],
.form-item input[type="checkbox"] {
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.form-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.form-item button {
  padding: 10px 16px;
  background-color: rgb(119, 162, 255);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.table-leakage {
  border: 1px solid #ccc; /* מסגרת */
  border-radius: 8px;      /* פינות מעוגלות (אופציונלי) */
  overflow-x: auto;        /* גלילה אופקית אם צריך */
  overflow-y: auto;  
  width: 100%;      /* גלילה אנכית אם צריך */
  max-height: 200px;       /* גובה מקסימלי לפני הופעת גלילה */
  background-color: #f9f9f9; /* רקע בהיר (אופציונלי) */
}
#responsetext{
  text-align: center;
  color: #006ba8;
  padding: 5px;
  direction: rtl;
  font-size: 20;
  font-family: Calibri, Helvetica, sans-serif;
}

/* --------------------Ai------------------ */
.Ai-form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* אפשר גם nowrap אם אתה רוצה כפיית שורה אחת */
  gap: 20px;
  /* align-items: flex-end; */
  padding: 20px;
  background: #ececf1;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-family: 'Segoe UI', sans-serif;
  max-width: 100%;
  overflow-x: auto;
  direction: rtl;
}
#table_Ai_report{
  margin-top: 0;
}
#table_Ai_report thead th {
  position: sticky;
  top: 0;
  background-color: #006ba8;
  color: white;
  z-index: 2; /* כדי שתישאר מעל שורות התוכן */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* אופציונלי: הצללה קטנה */
}

.table-Ai {
  border: 1px solid #ccc; /* מסגרת */
  border-radius: 8px;      /* פינות מעוגלות (אופציונלי) */
  overflow-x: auto;        /* גלילה אופקית אם צריך */
  overflow-y: auto;  
  width: 100%;      /* גלילה אנכית אם צריך */
  max-height: 200px;       /* גובה מקסימלי לפני הופעת גלילה */
  background-color: #f9f9f9; /* רקע בהיר (אופציונלי) */
}


#flowGraphDiv {
  position: relative;
}

/* הזזת סרגל הכלים לאמצע */
#flowGraphDiv .modebar {
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  top: 10px !important;
  position: absolute !important;
  justify-content: center !important;
}

#myDiv {
  position: relative;
}

/* הזזת סרגל הכלים לאמצע */
/* #myDiv .modebar {
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  top: 10px !important;
  position: absolute !important;
  justify-content: center !important;
} */

#myDiv .modebar-container {
  display: flex !important;
  justify-content: center !important;
  top: 10px !important;
  left: 0 !important;
  right: 0 !important;
  position: absolute !important;
}

#myDiv .modebar {
  position: static !important;
  transform: none !important;
}

.searchContainerWrapper {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  width: 100%;
  gap: 10px; /* רווח בין האלמנטים */
  flex-wrap: wrap; /* אם המסך קטן, האלמנטים יעברו לשורה הבאה */
}

.searchContainer {
  display: flex;
  align-items: center;
  gap: 5px;
}

.leakageBtn {
  background-color: #d18978; 
  font-family: Calibri, Helvetica, sans-serif;
  border:  2px solid #a1a1a1;
  margin-right: 5px;
}

.leakageBtn:hover {
  background-color: #bb6c5a;

}

.total-box {
  background: #f5f5f5;
  border: 1px solid #ccc;
  padding: 8px 15px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  font-family: Calibri, Helvetica, sans-serif;
}
/* #totalsBox {
  display: flex;
  gap: 15px;
  margin: 10px 0;
  justify-content:center;
} */

#totalsBox {
  display: flex;
  justify-content: space-between; /* צד שמאל + צד ימין */
  align-items: center;
  margin: 10px 0;
}

#totalsCenter {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex: 1; /* יתפוס מקום מרכזי */
}

.pdf-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.textDiv{
  font-family: Calibri, Helvetica, sans-serif;
  align-items: center;
  font-size: 16px;
  white-space: pre-line;
  line-height: 1.6; /* רווח בין שורות */
  direction: rtl;
  text-align: center;
}