/* APP GRID LAYOUTS */
.app-navbar {
  height: 50px;
  padding: 0rem 1rem;
  width: 100% !important;
  max-width: 98vw !important;
}

#box-home-header {
  position: relative;
  z-index: 9;
}
.home-header-container::after {
  content: "";
  clear: both;
  display: table;
}

#home-select-site-button {
  float: right;
  z-index: 1000;
}

#home-select-site-button >button {
  /* width: 200px; */
  padding-right: 1rem;
  text-align: right;
  background-color: transparent !important;
  border-color: transparent !important;
}

#page_content {
  padding: 0px 0.25rem;
}

.search-btn::before {
  display: none;
}

.search-btn::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.0rem;
	content: "\f002";
}

.dropdown-menu.show {
  overflow-y: auto;
  max-height: 300px;
}

#box-home-mapbox {
  position: relative;
  z-index: 0;

}

.main-menu-dropdown.nav-link::after {
    display: none;
}

.main-menu-dropdown.nav-link::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.5rem;
	content: "\f0c9";
}

#highlight-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.5rem 0.5rem;
  background-color: rgba(38, 38, 38, 0.277);
}

.highlight-img {
  height:40px;
  width: 40px;
  text-align: center;
}
.highlight-card {
  min-width: 120px;
  /* max-width: 250px; */
  text-align: center;
  flex-grow: 2;
  box-shadow: 3px 1px 2px rgba(0,0,0,0.5);
  background-color: rgba(19, 26, 41, 0.8);
}

.box-options {
  display: inline-block;
  padding-right: 1rem;
  vertical-align: top;
}

.chartdata {
  padding: 0.25rem 0.8rem;
}

.home-tabledata {
  width: 100%;
  text-align: center;
}

.home-tabledata td:first-child,
.home-tabledata th:first-child {
text-align: left;
padding-left: 0.3rem;
max-width: 10rem;
min-width: 5rem;
width: 5rem;
word-break: break-all;
}

.home-tabledata table,
.home-tabledata th,
.home-tabledata td {
border: 1px solid rgba(50,50,50,1);
border-collapse: collapse;
font-size: calc(max(0.6rem,min(0.9rem,0.9vw))) !important;
word-break: break-all;
}

.home-tabledata th,
.home-tabledata td {
min-width: 4rem;
word-break: break-word;
}

.home-table-div {
  overflow: auto;
  padding-top: 1rem;
}



.homecharts-grid {
  display: grid;
  grid-template-columns: minmax(auto, 1200px);
  grid-template-rows: auto auto;
  grid-gap: 0rem;
}

.nav-tooltips {
  font-size: 1.2rem;
}

/* #fy-site-dropdown {
  margin: auto 5px;
  width: 100%;
  min-width: 500px;
  max-width: 1000px;
} */

#main-home-dropdown {
  border: solid 1px rgb(250, 240, 97);
  font-size: large;
}

#main-home-dropdown > .Select--single > .Select-control .Select-value, .Select-placeholder {
  top: 0.3rem;
}

#grid-ma-b-a, #grid-ma-b-b, #grid-ma-b-c, #grid-ma-b-d {
  overflow: auto;
} 

#grid-ma-b-a, #grid-ma-b-b {
  max-height: 450px;
}



div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}


.custom-row-gap .mantine-Group-root {
  row-gap: 5px;
}

.kpi-group-title {
  font-size: 1.5rem;
  line-height: 1.4rem;
}

.home-tablecontainer {
  display: none;
}


.ag-theme-alpine-dark.ranking-table {
  --ag-font-size: 0.8rem;
  /* --ag-font-family: monospace; */
}

.fy-dropdown-wrapper .mantine-Input-input,
.fy-year-dropdown-wrapper .mantine-Input-input {
  min-height: 30px;
  height:40px;
}

.fy-dropdown-wrapper{
  min-width: 350px;
  max-width: 500px;
  width: 100%;
}

.fy-year-dropdown-wrapper{
  width: 200px;
}

.grid-ma-2-expand-1 {
  grid-template-areas:
  'one one'
  'two two'
  'three three'
  'four four';
}

.grid-ma-2-expand-2 {
  grid-template-areas:
  'two two'
  'one one'
  'three three'
  'four four';
}


table.fytable0 {
  width: auto;
  table-layout: auto; 
  border-collapse: collapse; 
  margin: 0 auto;
}

.fytable0 tr:nth-child(even) {
  background-color: #171717;
}



.fytable0 th, .fytable0 td {
    border: 1px solid rgb(91, 91, 91); 
    padding: 1px 15px;
    text-align: center; 
    font-size: min(max(0.6rem, 0.75vw), 1.5rem);
}

.fytable0 td {
  max-width: 150px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
}

.fytable0 tr:hover {
  color: #ffffff;
  font-weight: bold;
  border: 2px solid rgb(255, 255, 255) !important; 
}

#sub-tabs .mantine-Tabs-tab[data-active="true"] {
  background-color: rgb(25, 113, 194); 
}

.mapboxgl-control-container {
  display: none;
}

/* Mobile Devices */
@media (min-width: 1px) {
/* METER ANALYSIS LAYOUT 2*/
.grid-ma-2 {
  grid-template-columns: repeat(1, minmax(1px, 1fr));
  grid-template-areas:
  'one'
  'two'
  'three'
  'four'
  'five'
  'six'
  'seven';
}

}
/* Tablet Devices */
@media (min-width: 720px) {
  #page_content {
    padding: 0px 0.5rem;
  }

  /* HOME LAYOUT */
  #grid-home-layout {
    grid-gap: 0.1rem;
    grid-template-columns: minmax(1px, 1fr);
    grid-template-rows: minmax(auto, auto) 
    repeat(2,minmax(200px,auto))
    minmax(auto, auto)
    ;
    /* grid-template-areas:
    'one one one'
    'two two two'
    'two two two'
    'five five five'
    'six six six'
    'seven seven seven'
    ; */
    position: relative;
  }
  #box-home-header{
    grid-column: 1 / 3;
  }
  #box-home-mapbox {
    grid-column: 1 / 3;
    grid-row: 2 / span 2;
  }
  #box-home-highlights {
    grid-column: 1 / 3;
    grid-row: 2 / span 2;
    position: absolute; 
    right: 0;
    top: 0.2rem;
    z-index: 2; 
    width: 40%; 
    min-width: 300px;
    max-width: 600px;
    max-height: 100%; 
    overflow: auto;
  }
  .home-tablecontainer {
    display: block;
  }

  #box-home-box3 {
    z-index: 2;
  }

  /* FINANCIALS LAYOUT */
  #grid-fi-layout {
    grid-template-columns: repeat(1, minmax(1px, 1fr));
    grid-template-rows: repeat(1, minmax(auto, auto))
    minmax(auto, auto)
    ;
    grid-template-areas:
    'one'
    'two'
    'three'
    'four'
    'five'
    'six'
    'seven'
    ;
  }

  /* RANKINGS LAYOUT */
  #grid-rankings-layout {
    grid-template-columns: minmax(250px, 1fr) minmax(1px, 3fr);
    grid-template-rows: repeat(1, minmax(auto, auto))
    minmax(650px, auto);
    grid-template-areas:
    'one one'
    'two three'
    'four four'
    'five five'
    'six six'
    'seven seven'
    ;
  }

  /* METER DATA LAYOUT */
  #grid-meterdata-layout {
    grid-template-columns: repeat(1, minmax(1px, 1fr));
    grid-template-rows: repeat(1, minmax(auto, auto))
    minmax(auto, auto)
    ;
    grid-template-areas:
    'one'
    'two'
    'three'
    'four'
    'five'
    'six'
    'seven'
    ;
  }


  /* METER ANALYSIS LAYOUT */
  #grid-meteranalysis-layout {
    grid-template-columns: repeat(1, minmax(1px, 1fr));
    grid-template-rows: repeat(1, minmax(auto, auto))
    minmax(auto, auto)
    ;
    grid-template-areas:
    'one'
    'two'
    'three'
    'four'
    'five'
    'six'
    'seven'
    ;
  }
 
  /* WATER GAS OTHER LAYOUT */
  #grid-watergas-layout {
    grid-template-columns: repeat(1, minmax(1px, 1fr));
    grid-template-rows: repeat(1, minmax(auto, auto))
    minmax(auto, auto)
    ;
    grid-template-areas:
    'one'
    'two'
    'three'
    'four'
    'five'
    'six'
    'seven'
    ;
  }

}

  /* Standard Desktop */
@media (min-width: 1000px) {
  #page_content {
    padding: 0px 1rem;
  }

  .homecharts-grid {
    grid-template-columns: 2fr minmax(0px, 1fr);
    grid-template-rows: auto;
    max-height: 520px;
  }

  .home-table-div {
    overflow: auto;
    margin-top: 0rem;
    max-height: 400px;
  }
  
  .home-table-title {
    text-align: center;
  }

  .grid-ma-2 {
    grid-template-columns: minmax(auto,3fr) minmax(auto,3fr);
    grid-template-rows: 550px minmax(200px,auto) minmax(200px,auto);
    grid-template-areas:
    'one two'
    'three three'
    'four four';
  }
  #grid-ma-b-a, #grid-ma-b-b {
    max-height: 800px;
  }

}