/* Custom About dialog styles for shinyalert */
html body.stop-scrolling div.sweet-alert.alert-size-l.showSweetAlert.visible {
  height: 95vh !important;
  max-height: 95vh !important;
}
html body.stop-scrolling div.sweet-alert.alert-size-l.showSweetAlert.visible .sa-html-container {
  height: 95vh !important;
  overflow-y: auto !important;
}
.nalcab-about-dialog p,
.nalcab-about-dialog h1,
.nalcab-about-dialog h2,
.nalcab-about-dialog h3,
.nalcab-about-dialog h4,
.nalcab-about-dialog h5,
.nalcab-about-dialog h6 {
  text-align: left !important;
  color: #575757 !important;
}
#dummy_dt { display: none !important; }
/* Custom styling for progress_table shiny tables to match DT styling */
.progress_table table {
  background: #333 !important;
  color: white !important;
  border: 1px solid #111 !important;
  font-size: 0.95em !important;
  width: 100% !important;
}
.progress_table table thead th {
  background: #333 !important;
  color: white !important;
  padding: 3px !important;
  font-weight: normal !important;
  border: 1px solid #111 !important;
  text-align: right !important;
}
/* Override inline styles applied by Shiny's renderTable */
.progress_table table thead th[style] {
  text-align: right !important;
  background: #333;
  color: white;
}
.progress_table table tbody td {
  padding: 3px !important;
  font-weight: normal !important;
  border: 1px solid #111 !important;
  text-align: right !important;
}
/* Override any inline styles from Shiny */
.progress_table table thead th[style*="text-align"],
.progress_table table tbody td[style*="text-align"] {
  text-align: right !important;
}
/* Aggressively override inline styles with maximum specificity */
.progress_table table thead th[style*="text-align: left"] {
  text-align: right !important;
}
.progress_table table tbody td[style*="text-align: left"] {
  text-align: right !important;
}
/* Header gray, first row dark green, second row yellow */
.progress_table table thead th {
  background-color: #333333 !important;
  color: white !important;
}
.progress_table table tbody tr:nth-child(1),
.progress_table table tbody tr:nth-child(1) td {
  background-color: #0e4017 !important;
  color: white !important;
}
.progress_table table tbody tr:nth-child(2),
.progress_table table tbody tr:nth-child(2) td {
  background-color: #fcca3a !important;
  color: black !important;
}
:root {
  --header-bg-col: #ecebe4;
  --left-panel-width: 350px;
  --right-panel-width: 350px;
  --panel-col: #969696CC;
}
.leaflet-top.leaflet-left {
  left: calc(10px + var(--left-panel-width));
}
.transparent-panel {
  background: var(--panel-col);
  top: 10px;
  color: white !important;
}
.left-panel {
  width: var(--left-panel-width);
}
.right-panel {
  width: var(--right-panel-width);
}
#title {
  color: #0D4017;
  background: var(--header-bg-col);
  padding-left: 20px;
  font-size: 20px;
  display: flex;
  align-items: center;
}
#title span {
  flex: 1;
}
#logo {
  height: 40px;
}
.panel-main-area {
  padding: 20px;
}
#getdata_btn, #about {
  text-decoration: underline !important;
  color: white !important;
}
#about {
  float: right;
}

.outputs_area .nav {
  display: flex;
  justify-content: space-between;
}
.outputs_area .nav>li {
  flex: 1;
  text-align: center;
  margin-left: 0;
  background: transparent;
}
.outputs_area .nav>li:not(.active) {
  background: #666;
}
.outputs_area .nav>li>a {
  border-radius: 0;
  color: white !important;
}
.outputs_area .nav>li>a:focus,
.outputs_area .nav>li>a:hover {
  background: #777;
}
.outputs_area .nav>li.active>a,
.outputs_area .nav>li.active>a:focus,
.outputs_area .nav>li.active>a:hover {
  font-weight: bold;
  background: transparent;
}

.percent_change_label {
  font-style: italic;
  margin: 25px -20px 5px;
  border-top: 3px dashed #ccc;
  padding: 5px 10px 0;
}
.progress_plot {
  margin-top: 25px;
  padding-top: 7px;
  border-top: 1px dashed #CCC;
  margin-left: -20px;
  margin-right: -20px;
  padding-bottom: 13px;
}
.progress_plot:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.progress_plot:last-child {
  margin-bottom: 15px;
}
.progress_plot_inner {
  padding: 0 20px;
}
.progress_plot .progress_bar {
  height: 25px;
  position: relative;
  width: 100%;
  outline: 1px solid #444;
  display: flex;
  justify-content: space-evenly;
}
.progress_plot .progress_bar .tick::before,
.progress_plot .progress_bar .tick::after {
  content: ' ';
  height: 5px;
  background: #444;
  width: 1px;
  position: absolute;
}
.progress_plot .progress_bar .tick::before {
  top: 0;
}
.progress_plot .progress_bar .tick::after {
  bottom: 0;
}
.progress_plot .tick_labels {
  display: flex;
  top: -15px;
  position: relative;
  color: black;
  font-size: 0.6em;
  height: 0px;
}
.progress_plot .tick_label {
  text-align: center;
  flex: 1;
}
.progress_plot .progress_marker {
  font-size: 25px;
  font-family: monospace;
  line-height: 0.5;
  margin-left: -7px;
  position: relative;
  text-shadow: 0 0 1px black;
  display: none;
}
.progress_plot .progress_marker.marker1 {
  top: -3px;
  color: var(--tract1-col);
  /* color: black; */
}
.progress_plot .progress_marker.marker1:before {
  content: "\25BC";
}
.progress_plot .progress_marker.marker2 {
  margin-top: -12px;
  top: 12px;
  color: var(--tract2-col);
  /* color: yellow; */
}
.progress_plot .progress_marker.marker2:before {
  content: "\25B2";
}
.progress_plot .progress_labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  margin-top: -20px;
  position: relative;
  color: #111;
  padding: 0 2px;
  font-weight: bold;
  height: 0;
}
.progress_plot .progress_labels .progress_label {
  flex: 1;
  text-align: center;
}
.progress_plot .progress_labels .progress_label:first-child {
  text-align: left;
}
.progress_plot .progress_labels .progress_label:last-child {
  text-align: right;
}

.progress_table {
  margin-top: 20px;

}
.progress_table:first-child {
  margin-top: 0;
}
.progress_table .label-unit {
  font-weight: normal;
  font-size: 0.75em;
  margin-left: 5px;
}
.progress_table table.dataTable {
  font-size: 0.95em;
  background: #333;
  color: white;
  border: 1px solid #111;
}
.progress_table .dataTable tbody td,
.progress_table .dataTable thead th {
  padding: 3px;
  font-weight: normal;
}

/* Consistent style for capture and download buttons */
button.btn-capture, a.btn-capture {
  background-color: #246abe !important;
  color: #fff !important;
  border: 1px solid #246abe !important;
  min-width: 220px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(36,106,190,0.08);
}
button.btn-capture:active, a.btn-capture:active,
button.btn-capture:focus, a.btn-capture:focus {
  background-color: #1e599c !important;
  border-color: #1e599c !important;
}
button.btn-capture.btn-capture-screenshot, a.btn-capture.btn-capture-screenshot {
  background-color: #246abe !important;
  color: #fff !important;
  border: 1px solid #246abe !important;
  min-width: 220px;
  font-weight: bold;
}

.btn-capture.btn-capture-screenshot {
  background-color: #AEDEF4;
  color: #fff;
  border: none;
  box-shadow: none;
  font-size: 17px;
  font-weight: 500;
  -webkit-border-radius: 4px;
  border-radius: 5px;
  padding: 10px 32px;
  margin: 26px 5px 0;
  cursor: pointer;
}

/* Logo styling when in map attribution */
#map-logo img {
  transition: opacity 0.2s ease;
}
#map-logo img:hover {
  opacity: 1 !important;
}