/* SENSOR CHARTS */
.sensor_chart { position: relative; display: block;  width: calc(100% - 2rem); max-width: 1238px; margin: 0 auto;  }
.sensor_chart_outer { position: relative; display: flex; flex-direction: row;  flex-wrap: nowrap; width: 100%; height: 100%;   background-color: white;  transition: all 0s ease-in-out; border: 1px solid var(--dark-green);  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);  align-items: stretch;  overflow: hidden;}
.sensor_chart_inner { position: relative;   display: flex; flex-direction: column; gap: 1.25rem;  height: 100%;  padding: 1.25rem;   transition: all 0s ease-in-out;  flex: 1 1 auto; min-width: 0;  }
.sensor_chart_canvas { width: 100%;  flex-grow: 1; height: 25rem !important;   }

/* CHART UPPER CONTROLS */
.sensor_chart_upper {   flex-grow: 0; flex-shrink: 0;  position: relative; width: 100%; display: flex; flex-direction: row;  flex-wrap: nowrap; gap: 0rem 1rem; align-items: stretch;  justify-content: flex-start;}
.sensor_chart_outer .MuiTypography-root { font-family: var(--font-poppins); font-weight: 300; font-size: .875rem;  line-height: 1.2; letter-spacing: normal !important; }
.sensor_chart_outer .MuiFormControlLabel-root { margin-left: 0; padding-right: .5rem; margin-right: .5rem; }
/* POLLUTION TOGGLE */
.sensor_chart_outer .pollutionToggleControls { display: flex; flex-direction: column; justify-content: space-between;  flex-shrink: 0; background-color: #E6F5F2; border-radius: 0.625rem; padding: 0.625rem;   }
.pollutionToggleControls .MuiFormGroup-root { flex-grow: 1; justify-content: space-around;  }
.MuiFormLabel-root.chart_pollution_label { display: block; font-size: 0.75rem; line-height: 1;  font-family: "Poppins", serif; font-weight: 600; margin-left: 0.25rem; margin-bottom: 0.5rem; color: var(--dark-green);  letter-spacing: normal !important;  }
.MuiFormLabel-root.chart_pollution_label.Mui-focused { font-weight: 600; color: var(--dark-green);   }
.sensor_chart_outer .pollutionToggleControls .MuiButtonBase-root, .sensor_chart_outer .pollutionToggleControls .MuiButtonBase-root { padding: 0; margin-right: .5rem; color: var(--red); background-color: var(--white);  }

/* COMPARE TOGGLE */
.sensor_chart_outer .compareToggleControls { display: flex;  flex-direction: column; justify-content: space-between;  flex-shrink: 0; background-color: #E6F5F2; border-radius: 0.625rem; padding: 0.625rem;   }
.compareToggleControls .MuiFormGroup-root { flex-grow: 1; justify-content: space-around;  }
.MuiFormLabel-root.compare_label { display: block; font-size: 0.75rem; line-height: 1;  font-family: "Poppins", serif; font-weight: 600; margin-left: 0.25rem; margin-bottom: 0.5rem; color: var(--dark-green);  letter-spacing: normal !important;  }
.MuiFormLabel-root.compare_label.Mui-focused { font-weight: 600; color: var(--dark-green);   }
.sensor_chart_outer .compareToggleControls .MuiButtonBase-root, .sensor_chart_outer .compareToggleControls .MuiButtonBase-root { padding: 0; margin-right: .5rem; color: var(--red); background-color: var(--white);  }
.compareToggleControls .MuiFormGroup-root .MuiTypography-root { font-family: var(--font-poppins); font-weight: 300; font-size: .75rem;  line-height: 1.2; letter-spacing: normal !important; }


/* DATE RANGE FORM */
.chart_date_range { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; flex-grow: 0; gap: 0rem 1rem;  justify-content: flex-start; max-width: 24rem; background-color: #E6F5F2; border-radius: 0.625rem; padding: 0.625rem;  width: 24rem;   }
.chart_date_range_label { display: block; width: 100%; font-size: 0.75rem; line-height: 1;  font-family: "Poppins", serif; font-weight: 600; margin-left: 0.25rem; margin-bottom: 0.5rem; color: var(--dark-green);   }
.chart_date_middle { position: relative; display: flex; flex-direction: row; flex-wrap: wrap;  gap: 0rem 1rem;  }
.chart_dates_available p, .chart_dates_available li { font-size: 0.625rem; line-height: 1.4; font-weight: 300;  }
.chart_dates_available ul { list-style: none; margin-left: 0rem; }
.chart_form_group { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; margin-bottom: 0.25rem; margin-left: 0.25rem;  }
.chart_form_group label {  font-size: 0.75rem; line-height: 1;   font-family: "Poppins", serif; font-weight: 400; margin-right: 0.5rem; min-width: 2.5rem;  }
.max_range_note { position: relative; display: block; width: 100%; font-size: 0.625rem; line-height: 1; font-weight: 300; margin-top: .25rem; }
.error-message { color: var(--red);   }
.chart_form_field { width: 100%; max-width: 15rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; border-width: 0px; border-style: solid; border-radius: 0.625rem; background-color: var(--white); color: var(--red); transition: border-color 0.2s; font-family: "Poppins", serif; font-weight: 600; border-color: var(--dark-green);  }
.chart_form_field:focus { outline: 0px;   }
.chart_form_field[type="date"] { cursor: pointer;  caret-color: transparent;  }


/* GUIDELINE BUTTONS */
.guideline_buttons {  flex-grow: 0; flex-shrink: 0;  position: relative; width: 100%; display: flex; flex-direction: row;  align-self: flex-end; gap: 0rem 1.25rem;  }
.guideline_button { flex: 0 1 100%; background-color: var(--white); color: var(--dark-green); border-color: var(--dark-green);  text-align: center; border-width: 1px; border-style: solid; border-radius: 0.625rem;  font-size: 0.875rem; line-height: 1; padding: 0.5rem 1.125rem 0.5rem; font-family: "Poppins", serif; font-weight: 300;  }
.guideline_button:hover {  background-color: #E6F5F2;  }
.guideline_button.active { background-color: var(--dark-green); color: var(--white);   }
.guideline_button.active:hover {  background-color: #123F3A; }

/* COMPARE SENSORS BUTTON */
.sensor_compare_button_wrapper {  align-self: flex-start;   display: flex; flex-direction: column;  }
.sensor_compare_button { border: 1px solid  #E6F5F2; border-radius: 0.625rem; padding: 0.5625rem 0.625rem;  background-color:#E6F5F2; color: var(--dark-green);  font-size: 0.75rem; line-height: 1;  font-family: "Poppins", serif; font-weight: 600;  }
.sensor_compare_button:hover { background-color: white; border: 1px solid  var(--dark-green);  }
.sensor_compare_limit { font-size: 0.625rem; line-height: 1; font-weight: 300; margin-top: .25rem;  padding: 0.25rem 0.625rem;  width: 100%; max-width: 8rem; }
.sensor_compare_limit.error { color: var(--red);  font-weight: 600; }

/* SENSORS SIDEBAR */
.fakeSidebar { align-items: stretch; max-height: none; display: flex; flex-direction: column; height: 100%; width: 0px;   transition: width 0s 1s; }
.fakeSidebar.open { width: 21.25rem;  transition: none; width: 0px;  }
.sensor_sidebar { position: absolute; top: 0px; right: 0px; height: 100%;  width: 21.25rem;  background: #fff;  z-index: 10; padding: 1.25rem 1.25rem  0.625rem 1.25rem; transform: translateX(100%);   transition: transform 1s ease; max-height: 100vh;  }
.sensor_sidebar.open { transform: translateX(0); }
.sensor_sidebar_inner { display: flex; flex-direction: column; height: 100%;  background-color:#E6F5F2;  border-radius: 0.625rem; padding: 0.625rem;  }
.sensor_sidebar_list { flex: 1 1 auto; height: 100%;  min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--dark-green) transparent;   scrollbar-gutter: stable;  }
.sensor_sidebar_list .MuiListItem-root { cursor: pointer;  border-radius: 0.25rem;  }
.sensor_sidebar_footer { display: flex; justify-content: space-between; padding-top: 1rem; }
.sensor_sidebar_footer button { width: 40%;  font-size: 0.75rem; line-height: 1;  font-family: "Poppins", serif; font-weight: 400; color: var(--dark-green);  background-color: white; border: 1px solid var(--dark-green); border-radius: 0.625rem; padding: 0.5rem 1.125rem 0.5rem;   }
.sensor_sidebar_footer button:hover { background-color: #E6F5F2;   }
.sensor_sidebar_footer button:disabled { background-color: #E6F5F2; opacity: 0.5;   }
.sensor_sidebar_label { display: block; width: 100%; font-size: 0.75rem; line-height: 1;  font-family: "Poppins", serif; font-weight: 600; margin-left: 0.25rem; margin-bottom: 0.5rem; color: var(--dark-green);    }
.MuiListSubheader-root.chart_sensor_list_borough { color: var(--dark-green);  padding: 0.5rem 0rem 0.25rem;   font-family: "Poppins", serif; font-weight: 600;  font-size: 0.75rem;  line-height: 1.5; margin-left: 0.25rem;   }

/* CHART TOOLTIP */
.chart_tooltip { border-radius: 0.625rem !important;   width: 18rem;   }
.ctt_inner { position: relative; display: flex; flex-direction: column; flex-wrap: wrap;   }
.ctt_inner.comparison { flex-wrap: wrap; }
.ctt_top { width: 100%;  font-weight: 300; font-size: 0.75rem; line-height: 1.5;  color: var(--dark-green);  }
.ctt_top_left { flex-grow: 1;  font-weight: 300; font-size: 0.75rem; line-height: 1.5;  color: var(--dark-green); margin-bottom: 0.25rem;  }
.ctt_top_right { flex-grow: 1;  font-weight: 300; font-size: 0.75rem; line-height: 1.5;  color: var(--dark-green);  text-align: right; margin-bottom: 0.25rem;  }
.ctt_date { color: var(--dark-green);  }
.ctt_left { flex-grow: 1;  font-weight: 300; font-size: 0.75rem; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;   }
.ctt_right {  font-weight: 300; font-size: 0.75rem; line-height: 1.5;  text-align: right;  min-width: 4rem;   }
.ctt_bold { font-weight: 600;   }
.ctt_row { width: 100%; position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; color: var(--dark-green); }
.ctt_minor { font-size: 0.625rem;   }
.ctt_primary { color: var(--red) ;  }
.ctt_tip {  width: 40px; height: 20px; position: absolute; left: 50%; top: 100%;  margin-left: -20px; overflow: hidden; }
.ctt_tip:before { content: "";  display: block; position: relative; width: 17px; height: 17px; padding: 1px; margin: -10px auto 0; border-style: solid; border-color: #00b315; border-width: 0px 2px 2px 0px; background: #fff; transform: rotate(45deg);  }
.ctt_dot { display:inline-block; width:0.55rem; height:0.55rem; border-radius:50%; margin-right:0.5rem; vertical-align:middle; }
.ctt_row.weather {  position: relative; display: flex; flex-direction: row;  justify-content: space_between; gap: 0rem 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.25rem; }
.ctt_row.weather .aqap_weather_group { position: relative; display: flex; flex-direction: row; justify-content: flex-start; gap: 0rem 0rem; align-items: center; width: calc((100% / 3) - 1rem);   }

/* CHART */
.loadingChart { display: flex; flex-direction: row; height: 400px; justify-content: center;  color: var(--dark-green);  font-size: 0.75rem; line-height: 1; font-weight: 600; align-items: center; }
.sensor_chart_stack { display: grid; grid-template-rows: 0fr auto 0fr 0fr 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);  }
.sensor_chart_stack.comparing { grid-template-rows: 0.875rem auto 0.875rem 1fr 0fr; }
.sensor_chart_stack.legend { grid-template-rows: 0fr auto 0fr 0fr auto; }
.sensor_chart_stack.comparing.legend { grid-template-rows: 0.875rem auto 0.875rem 1fr auto;  }
.sensor_chart_container.bottom { overflow: hidden; opacity: 0; transform: translateY(-6px); transition:  opacity 0.35s ease, transform 0.35s ease; }
.sensor_chart_stack.comparing .sensor_chart_container.bottom { opacity: 1; transform: translateY(0); }
.sensor_chart_stack_current_title { overflow: hidden; opacity: 0; transform: translateY(-6px); transition:  opacity 0.35s ease, transform 0.35s ease;  text-transform: uppercase; font-size: 0.875rem; line-height: 1;  font-weight: 500;  }
.sensor_chart_stack.comparing .sensor_chart_stack_current_title  { opacity: 1; transform: translateY(0); } 
.sensor_chart_stack_previous_title { overflow: hidden; opacity: 0; transform: translateY(-6px); transition:  opacity 0.35s ease, transform 0.35s ease;  text-transform: uppercase; font-size: 0.875rem; line-height: 1;    font-weight: 500;   }
.sensor_chart_stack.comparing .sensor_chart_stack_previous_title  { opacity: 1; transform: translateY(0); } 
.sensor_chart_legend { overflow: hidden; opacity: 0; transform: translateY(-6px); transition:  opacity 0.35s ease, transform 0.35s ease;  padding: 0.625rem; width: 100%;  text-align: center;  }
.sensor_chart_stack.legend .sensor_chart_legend { opacity: 1; transform: translateY(0);  }  
.sensor_chart_legend_item { display: inline-block;  font-size: 0.75rem; line-height: 1; font-weight: 300; color: #16514B;  margin: 0rem 1rem 0.125rem;   }
.sensor_chart_legend_dot  { display:inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; margin-right: 0.5rem; vertical-align: middle; }
.sensor_chart_container { position: relative;   }
.sensor_chart_canvas {  min-height: 320px; }
.chart_loading_overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3);  display: flex; align-items: center; justify-content: center; z-index: 5; pointer-events: all;  }
.chart_loading_inner {  font-size: 0.75rem; line-height: 1; font-weight: 300; color: #16514B; }
.chart_comparison_notes {  border: 0px solid var(--dark-green); padding: 0.625rem 1rem; border-radius: 0.625rem;  background-color:#E6F5F2;    }
.chart_comparison_notes p { font-size: 0.875rem; line-height: 1.33; font-weight: 300;   }

.element--sensor_profile .row:has(.sensor_chart) {
    flex-direction: column;
}


.sensor_chart_weather_credit {   position: relative; display: block; width: calc(100% - 2rem); max-width: 1238px; margin: 1rem auto 0rem; }
.sensor_chart_weather_credit p { font-size: 0.75rem; line-height: 1.2;  }

.chart_date_range .error-message { color: var(--red) !important; display: inline !important; font-size: 0.625rem; line-height: 1; font-weight: 300; }


@media only screen and (max-width: 780px) { 
.sensor_chart_upper { flex-direction: column; flex-wrap: wrap;  gap: 1rem 1rem;  align-items: flex-start;  }
.pollutionToggleControls .MuiFormGroup-root {  flex-direction: row;  }
.chart_date_range {  max-width: 100%; width: 100%;  }
.chart_date_inputs { flex-grow: 1;  }
.compareToggleControls .MuiFormGroup-root {    flex-direction: row;  }
.sensor_compare_button_wrapper {  align-self: flex-start;  flex-direction: row;  }
}

@media only screen and (max-width: 500px) { 
.sensor_chart_upper { flex-direction: column; gap: 1rem 1rem;  align-items: stretch;  }
}