.grid-container-emissions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    grid-gap: 10px;
    margin-left: 0px;
    padding-left: 0px;
}

.grid-container-cost {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    grid-gap: 10px;
    margin-left: 0px;
    padding-left: 0px;
}
  
.kpi {
    background-color: #1E3C8C;
    color: white;
    border-radius: 4px;
    text-align: center;
    justify-self: center;
    align-self: center;
    width: 245px;
    height: fit-content;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: 'Open Sans', sans-serif;
}

.kpi2 {
    background-color: #1E3C8C;
    color: white;
    border-radius: 4px;
    text-align: center;
    justify-self: center;
    align-self: center;
    width: 320px;
    height: fit-content;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: 'Open Sans', sans-serif;
}

.kpi2 h1 {
    font-size: 20px;
    margin: 0px;
}
  
.kpi2 h2 {
    font-size: 16px;
    margin: 0px;
}
  
.kpi2 p {
    font-size: 48px;
    margin: 0px;
}

#Graph1Div {
    height: 30px;
}

#Graph2Div {
    height: 250px;
}

#Graph3Div{
    height: 400px;
    width: 99%;
}

#HeadingIcons {
    font-size: 30px;
    vertical-align: middle;
    margin: 0px;
    margin-right: 10px;
}

#InventorySettingsmodal{
    background-color: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10;
    bottom: 10;
    left: 10;
    right: 10;
    width: 1100px;
    margin: 0;
}

#InventorySettingsmodal > div {
    /* Style the inner container of the modal */
    background-color: #f1f1f1;
    /* Set a fixed width for the container */
    width: 1000px;
    /* Add some padding to the container */
    padding: 20px;
    /* Add a border */
    border: 1px solid #888;
    /* Add some rounded corners */
    border-radius: 4px;
    /* Center the inner container horizontally */
    margin: 20px auto;
    height: 800px;
    overflow-y: scroll;
}


#Inputsmodal{
    background-color: rgba(0,0,0,0.4);
    /* Center the modal vertically and horizontally */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Set the modal to take up the full screen */
    position: fixed;
    top: 10;
    bottom: 10;
    left: 10;
    right: 10;
    /* Set the width of the modal background to match the webpage */
    width: 1100px;
    /* Align the modal background with the webpage */
    margin: 0;
}

 #Inputsmodal > div {
    /* Style the inner container of the modal */
    background-color: #f1f1f1;
    /* Set a fixed width for the container */
    width: 1000px;
    /* Add some padding to the container */
    padding: 20px;
    /* Add a border */
    border: 1px solid #888;
    /* Add some rounded corners */
    border-radius: 4px;
    /* Center the inner container horizontally */
    margin: 10px auto;

    height: 800px;
    overflow-y: scroll;
}




#InventoryDataTable{
  border-collapse: collapse;
          width: 800px;
          border-radius: 4px;
}

#InventoryDataTable th, td {
  padding: 0px;
}

.resultstable > th, td {
  padding: 5px;
}




.TwoGraphcontainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  width: 100%;
}

#chartleft {
  width: 100%;
  height: 330px;
  page-break-inside: avoid;
}

#chartright {
  width:  100%;
  height: 330px;
  page-break-inside: avoid;
}

#EmissionsPerSectorSourceChart {
  width: 99%;
  height: 400px;
}

#EnergyHistoricChart {
  width: 99%;
  height: 400px;
  page-break-inside: avoid;
}

#energychartleft {
  width: 100%;
  height: 330px;
  page-break-inside: avoid;
}

#energychartright {
  width:  100%;
  height: 330px;
  page-break-inside: avoid;
 
}

#costchartleft {
  width: 100%;
  height: 330px;
  page-break-inside: avoid;
 
}

#costchartright {
  width:  100%;
  height: 330px;
  page-break-inside: avoid;
 
}

#EnergyPerSectorSourceChart{
  width: 99%;
  height: 400px;
}

#CostPerSectorSourceChart{
  width: 99%;
  height: 400px;
}


#SettingsWindow label {
  width: 500px;
}

#HistoricDataTable {
  width: 100%; /* Fill the entire width of the container */
  border-collapse: collapse; /* Remove cell spacing */
}

#HistoricDataTable th, #HistoricDataTable td {
  width: 25%; /* Each column takes up 25% of the table width */
  text-align: center; /* Center the text within the cells */
  border: 1px solid black; /* Add a border around each cell */
}

#HistoricDataTable input {
  width: 100%; /* Make the input fill the entire cell */
 margin: 0px;
}


#SectorHistoricTable {
  width: 100%; /* Fill the entire width of the container */
  border-collapse: collapse; /* Remove cell spacing */
}

#SectorHistoricTable th, #SectorHistoricTable td {
  width: 15%; /* Each column takes up 25% of the table width */
  text-align: center; /* Center the text within the cells */
  border: 1px solid black; /* Add a border around each cell */
}

#SectorHistoricTable input {
  width: 100%; /* Make the input fill the entire cell */
 margin: 0px;
}


#SankeyPlot {
    height: 320px;
}

#SankeyEnergyPlot {
    height: 320px;
}


.dropdown2 {
    position: relative;
    display: inline-block;
}
  
.dropdown2-button {
    background-color: #cccccc;
    color: #5f6368;
    font-size: 20px;
    font-weight: 500;
    border: none;
    font-family: 'Open Sans', sans-serif;
    margin: 0 15px;
}
  
.dropdown2-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    left: 0; /* Align the menu options to the left */
}
  
.dropdown2-content a {
    color: #5f6368;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left; /* Align the menu options to the left */
    margin: 0px;
}
  
.dropdown2-content a:hover {
    background-color: #ddd;
}
  
.dropdown2:active .dropdown2-content {
    display: block;
}
  
.dropdown2-button:focus + .dropdown2-content {
    display: block;
}

#IntroductionHidden{
    display: none;
}

#result-textarea {
    width: 99%;
    border: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    min-height: 300px;
}

/* TRENDS TABLE */

#EmissionsBuildingtrend {
    font-size: 50px;
    color: red;
}

#EmissionsFleettrend {
    font-size: 50px;
    color: red;
}

#EmissionsStreetlightingtrend {
    font-size: 50px;
    color: red;
}

#EmissionsWatertrend {
    font-size: 50px;
    color: red;
}

#EmissionsTotaltrend {
    font-size: 50px;
    color: red;
}


#EnergyBuildingtrend {
    font-size: 50px;
    color: red;
}

#EnergyFleettrend {
    font-size: 50px;
    color: red;
}

#EnergyStreetlightingtrend {
    font-size: 50px;
    color: red;
}

#EnergyWatertrend {
    font-size: 50px;
    color: red;
}

#EnergyTotaltrend {
    font-size: 50px;
    color: red;
}

#TwoGraphContainer {
  page-break-inside: avoid;
}