#app-container {
    position: relative;
    width: 100%;
    /* Set the width according to your requirements */
    height: 90vh;
    /* Set the height according to your requirements */
    /* border: 1px solid #ccc; */
}

.panel-header {
    height: 5%;
    width: 100%;
    position: relative;
}

/* .info-buffer {
    width: 10%;
} */

.info-button {
    width: 5%;
    background-color: #FBD120;
    z-index: 10;
}

.panel-body {
    height: 95%;
    position: relative;
    top: -5%;
}

#configuration-container {
    width: 45%;
    height: 60%;
    float: left;
    box-sizing: border-box;
    /* border: 1px solid #ddd; */
    position: relative;
}

#configuration-controls {
    float: left;
    width:48%;
    height: 95%;
    margin-top: 2.5%;
    /* z-index: 10; */
    overflow: scroll;
    /* border: 0.5px solid black; */
    border: 1px solid #000000;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0.5rem 0.5rem black;
}

#configured-output-container {
    /* left: 10px; */
    margin-top: 2.5%;
    margin-left: 1%;
    float: left;
    width: 48%;
    height: 100%;
    /* background-color: red; */
}


#configuration-controls-info {
    margin: -1px;
    width: 10%;
    height: 100%;
    position: absolute;
    right: 0;
    border-radius: 0px 10px 0px 5px;
    transition: background-color 0.3s ease;
    cursor: help;
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;

}

#configuration-controls-info:hover {
    background-color: #000000;
    z-index: 100;
}

#configured-device-info{
    margin: -1px;
    width: 10%;
    height: 100%;
    position: absolute;
    right: 0px;
    border-radius: 0px 10px 0px 5px;
    transition: background-color 0.3s ease;
    cursor: help;
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;

}

#configured-device-info:hover {
    background-color: #000000;
    z-index: 100;
}


/* Initially hide the pop-up box */
#configuration-controls-popup {
    display: none;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #000;
    padding: 2px;
    border-radius: 5px;
    z-index: 25; 
    width: 80%;
    margin-top: 2.5%;
}

/* Show the pop-up box when hovering over the button */
#configuration-controls-info:hover + #configuration-controls-popup {
    display: block;
}


/* Initially hide the pop-up box */
#configured-device-popup {
    display: none;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #000;
    padding: 2px;
    border-radius: 5px;
    z-index: 25; 
    width: 80%;
    margin-top: 2.5%;
}

/* Show the pop-up box when hovering over the button */
#configured-device-info:hover + #configured-device-popup {
    display: block;
}

#configured-device-results {
    height: 84%;
    margin-left: 5%;
    display: block;
    margin-bottom: 3%;
    width: 89%;
    font-size: 12px;
    line-height: 15px;
    overflow: scroll;
    border: 1px solid #000000;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0.5rem 0.5rem black;
    /* text-align: justify; */
    /* text-justify: inter-word;
    justify-content: left; */
}

#configured-device-results-inner {
    margin: 3px;
}

#button-container {
    width: 95%;
    /* height: 20%; */
    margin-bottom: 0px;
}

.app-button {
    width: 45%;
    cursor: pointer;
    border: 1px solid #000000;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0.5rem 0.5rem black;
}

.app-button:hover{
    border: 1px solid #888;
    background-color: #ddd;
  }

#download-data {
    margin-left: 5%;
    /* background-color: rebeccapurple; */
}

#load-impact-charts {
    margin-left: 2%;
    margin-right: 1%;
    /* background-color: rebeccapurple; */
}


#curve-container {
    width: 55%;
    height: 60%;
    float: left;
    box-sizing: border-box;
    /* border: 1px solid #ddd; */
    position: relative;
}

.curve-chart {
    width: 100%;
    height: 90%;
}

.curve-control-panel {
    padding: 5px;
    height: 10%;
    width: 100%;
    /* border: 1px solid #ccc; */
    /* border-radius: 5px; */
    /* background-color: #f9f9f9; */
    /* z-index: 100; */
    /* position: absolute; */
    left: 0;
}

.curve-control-panel label {
    display: block;
    /* margin-bottom: 10px; */
}

.label-output-container {
    display: flex;
    /* Use flexbox to align items */
    align-items: center;
    /* Align items vertically */
}

.label-output-container output {
    margin-left: 10px;
    /* Add some space between the label and output */
    font-weight: bold;
    /* Optional: make the output value stand out */
}

.curve-control-panel input[type="range"] {
    width: 100%;
}

.curve-control-panel output {
    display: block;
    /* margin-top: 10px; */
    font-weight: bold;
}

.curve-control-panel-element {
    width: calc(100% / 3.1);
    margin-left: 5px;
    float: left;
}

#impact-container {
    width: 100%;
    height: 40%;
    box-sizing: border-box;
    /* border: 1px solid #ddd; */
    clear: both;
    /* Clear the float from previous children */
    position: relative;
    top: 2%;

}

#impact-loading {
    height: 15%;
    width: 100%;
}

#impact-legends {
    /* height: 90%; */
    width: 100%;
}

.configuration-primary-dropdown-container {
    position: relative;
    z-index: 10;
    margin: 10px;
    /* background-color: rgba(102, 102, 102, 0.05); */
}

.configuration-secondary-dropdown-container {
    position: relative;
    z-index: 10;
    margin: 10px;
    /* background-color: rgba(102, 102, 102, 0.05); */
}

#bipv-layers-selection {
    overflow: auto;
    /* overflow-y: scroll; */
}

.moduleTypeSelect {
    font-size: 12px;
    font-weight: 800;
}

.select-container {
    font-size: 9px;
}

.layer-option-select {
    font-size: 9px;
}

.layer-title {
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 0rem;
}

.layer-container {
    margin-bottom: 5px;
}

.select-container {
    margin-bottom: 0rem;
}

.select-container select {
    margin-right: 1px;
    margin-bottom: 0rem;
}


#stacked-bar-container {
    float: left;
    width: 90%;
    height: 100%;
}

#yAxisLabel {
    -webkit-transform-origin:right, top;
    transform-origin: right, top;
    -moz-transform-origin: right, top;
    -ms-transform-origin:right, top;
    -webkit-transform: rotate(-90deg) translate(-15%, -10%);
    transform: rotate(-90deg) translate(-15%, -10%);
    -moz-transform: rotate(-90deg) translate(-15%, -10%);
    -ms-transform: rotate(-90deg) translate(-15%, -10%);
}

#text-label-stack-x {
    -webkit-transform-origin:0% 0%;
    transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin:0% 0%;

    -webkit-transform: rotate(-90deg) translate(55%, -175%);
    transform: rotate(-90deg) translate(12rem, -2em);
    -moz-transform: rotate(-90deg) translate(12rem, -2em);
    -ms-transform: rotate(-90deg) translate(12rem, -2em);

    font-weight: 800;
} 



#impact-chart-column {
    float: left;
    width: 90%;
    height: 100%;
}

.impact-row {
    width: 100%;
    height: 50%;
    position: relative;
}

.impact-chart-container {
    float: left;
    width: calc(100%/7);
    height: 100%;
    /* background-color: #D95F0D; */
}

.impact-chart {
    /* float: left; */
    width: 80%;
    height: 80%;
    margin: 0 auto;
    /* padding: 15px; */
    /* background-color: #D95F0D; */
}

#impact-legend-column {
    float: left;
    width: 10%;
    height: 100%;
}