/*Bottom container styles, including map view. */
.bottom-container {
   flex: 1 1 auto;
   display: flex;
   flex-direction: row;
   align-items: stretch;
   gap: 0px;
   min-height: 0;
}

.leftpanel {
   width: 200px;
   display: flex;
   flex-direction: column;
   flex: 0 0 200px;
   min-height: 0;
   padding-top: 10px;
   overflow-y: auto;
   overflow-x: hidden;
   box-sizing: border-box;
}

.report {
   width: 174px;
   height: auto;
   margin-left: 10px;
   margin-top: 10px;
   text-align: center;
   border: 0px solid black;
   border-radius: 10px;
}

.report-item {
   margin-left: 5px;
   margin-top: 5px;	
   color:black;
   text-align: left;
   outline: none;
   border: none;
}

.searchplace {
   width: 175px;
   margin-left: 10px;
   margin-top: 0px;
   padding: 5px;
   text-align: center;
   border: 0px solid black;
   border-radius: 10px;
   box-sizing: border-box;
}

.autocomplete {
   width: 100%;
   box-sizing: border-box;
}

.autocomplete input {
   width: 100%;
   box-sizing: border-box;
   font-size: 14px;
   padding: 5px;
   border: 1px solid black;
   border-radius: 4px;
}

.slider-container {
   margin-top: 5px;
   width:100%;
}

.STEMDemoyearslider-container {
   margin-top: 5px;
   width:200px;
}

#STEMDemoyear-slider {
   width: 200px;
   border: 1px solid black;   /* blue border around the slider */
   border-radius: 4px;           /* optional: rounded corners */
}

.STEMDemoyearslider-labels {
   display: flex;
   justify-content: space-between;
   width: 200px; 
   margin-top: 5px;
   font-size: 14px;
   color: #007bff;
   padding: 0;
}

input[type="range"] {
   width: 100%;
   appearance: none;
   height: 10px;
   background: #ddd;
   border-radius: 0px;
   margin: 0px;
   padding: 0;
}

input[type="range"]::-webkit-slider-thumb {
   appearance: none;
   width: 15px;
   height: 15px;
   background: #007bff;
   border-radius: 50%;
   cursor: pointer;
   margin-left: 0px;
   margin-right: 0px;
}

.slider-labels {
   display: flex;
   justify-content: space-between;
   padding: 0;
   font-size: 14px;
   color: #007bff;
   margin-top: 0px;
   margin-left: 5px;
}

.slider-labels span{
   text-align: center;
}

.map-container {
   flex: 1;
   display: flex;
   flex-direction:column;
   min-height: 0;
}

.top-margin {
   height: 0px;
   flex-shrink: 0;
}

.map {
   flex: 1;
   margin-top: 0px;
   border: 1px solid black;
   min-height: 0;
}

.legend-container {
   display: flex;
   align-items: flex-start;
   gap: 10px; /* space between legends */
}

.schoollegend{
   width: 60px;
   margin-left: auto;
   margin-top: 10px;
   margin-right: 10px;
   padding: 5px;
   padding-bottom: 10px;
   border: 1px solid black;
   border-radius: 10px;
   box-sizing: border-box;
   background: white;
}

.legend-item {
   display: flex;
   align-items: center;
   margin-top: 1px;
   margin-left: 0px;
   margin-bottom: 1px;
   flex-wrap: nowrap;
}

.legend-item .icon {
   width: auto;
   height: 24px;
   margin-left: 5px;
   margin-right: 5px;
   margin-top: 5px;
   margin-bottom: 5px;
   display: flex;
}

.legend-item .legend-text {
   color: black;
   display: flex;
   white-space: nowrap;
   margin-top: 5px;
   margin-bottom: 0px;
}

.schoolchangelegend{
   width: auto;
   margin-left: auto;
   margin-top: 10px;
   padding: 5px;
   padding-bottom: 10px;
   border: 1px solid black;
   border-radius: 10px;
   box-sizing: border-box;
   background: white;
}

.changelegend-item {
   display: flex;
   margin-top: 1px;
   margin-left: 0px;
   margin-bottom: 1px;
   flex-wrap: nowrap;
}

.changelegend-item .icon {
   width: 30px;
   height: 24px;
   margin-left: 5px;
   margin-right: 0px;
   margin-top: 5px;
   margin-bottom: 5px;
   display: flex;
}

.changelegend-item .legend-text {
   color: black;
   display: flex;
   white-space: nowrap;
   margin-top: 5px;
   margin-bottom: 0px;
}

.district-report-title {
   text-align: center;
   display: block;
   margin: 0; 
}