/*Top level controls styles. */

.controls-container {
  width: 100%;
  margin-left: 2px;
  border-radius: 10px;
  flex: 0 0 auto;
}

/*Set the GUI layout based on device type, with mobile as the default. */

/* Mobile default */
.filter-row {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  font-size: 24px;
}

/* Desktop */
@media (min-width: 1024px) {
  .filter-row {
    flex-direction: row;
    align-items: flex-start;
    font-size: 16px;
  }
}

/* Mobile usability improvement. For mobile screen sizes, set full width for
   for all child components. */
@media (max-width: 1023px) {
  .filter-row > * {
    width: 100%;
  }
}

.maplayer{
   display: inline-block;
   padding: 5px;
   font-weight: normal;
   font-family: calibri;
}

.districtvariable{
   display: inline-block;
   padding: 5px;
}

.mapdata{
   display: inline-block;
   padding: 5px;
}

.schoolsearch{
   display: inline-block;
   padding: 5px;
}

.schoolfilter{
   display: inline-block;
   padding: 5px;
}

.districtslider-container {
   margin-top: 5px;
   margin-left: 5px;
   display: flex; 
   flex-direction: column;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: 0px;
}

.districtspendslider {
   width: 125px;
}

.zipcodeslider-container {
   margin-top: 10px;
   margin-left: 5px;
   display: flex; 
   flex-direction: column;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: 0px;
}

.zipcodeincomeslider {
   width: 150px;
}

.noUi-handle {
   background-color: #007bff;     
   border-radius: 50%;            
   width: 16px !important;        
   height: 16px !important;       
   top: -4px !important;   
   transform: translateX(-50%); /* Center handles on track.*/       
   cursor: pointer;
   box-shadow: none; /* Remove default shadow if needed */
}

/* Track background (full range bar) */
.noUi-target {
   background: #ddd;
   border: 1px solid black;
   border-radius: 4px;
   height: 10px;
   box-shadow: none;
}

/* Filled part between handles (connect) */
.noUi-connect {
   background: #007bff;
}

.noUi-handle::before,
.noUi-handle::after {
   display: none !important;
}

.row-item {
   margin-top: 0px;
   display: flex;
   align-items: center;
}

.row-item.range-label {
   margin-top: 0px;
   padding-top: 0px;
}