:root {
  --primary_blue: #002861;
  --blue: #003581;
  --dark_grey: #6c757d;
  --light_grey: #efefef;
  --yellow: #f1b545;
  --dark_blue: #0D123D;
  --mid_blue: #002861;
  --side_space: 32px;
}

body {
  top: 0;
  width: 100svw;
  overflow-x: hidden;
  /* overflow-y: hidden; */
  font-family: "Roboto", sans-serif !important;
  background-color: white;
}

body:has(#landing-tab.tab--selected),
body:has(#about-tab.tab--selected) {
  overflow-y: scroll;
}

#app-tabs {
  background-color: var(--primary_blue);
  color: white !important;
  display: flex;
  justify-content: flex-end;
  border: none !important;
  white-space: nowrap;
  gap: 2rem;
  align-content: center;
  flex-wrap: wrap;
  font-weight: 600;
  padding-right: calc(var(--side_space) + 140px);
  height: 50px;
  z-index: 10000;
}

#daily-tab,
#annual-tab,
#about-tab {
  width: fit-content;
}

#app-tabs-parent {
  background: white;
}

.tab {
  border: none !important;
  background-color: transparent !important;
  display: flex;
}

#app-tabs .tab {
  padding: 0px !important;
}

#landing-tab {
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  left: var(--side_space);
  top: 0px;
  display: flex;
  align-items: center;
  position: absolute;
  width: 258px;
  height: 50px;
}

.landing-tab-en {
  background-image: url('images/Respire-climate/respire-climate-white.svg') !important;
}

.landing-tab-es {
  background-image: url('images/Respire-climate/respire-clima-white.svg') !important;
}

.landing-observations {
  display: none;
}

.row {
  margin: 0;
}

#right-menu {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: var(--side_space);
  top: 0;
  height: 50px;
  padding-left: 25px;
  z-index: 100000;
  /* on top of app-tabs */
}

#lang-div {
  font-weight: 600;
  background-color: transparent !important;
  color: white;
}

#contact-button {
  background-image: url('./icons/contact.svg');
  background-repeat: no-repeat;
  background-position: 50%;
  height: 24px;
  width: 24px;
  background-color: transparent;
}

#lang-div .dropdown-menu.show {
  width: 5rem;
  min-width: 5rem;
  border-radius: 0;
  background-color: #003581;
  z-index: 1000000;
  border: none;
}

#lang-div .dropdown-item {
  color: white;
  border-radius: 0;
  padding-left: 10px;
  text-align: left;
  background-color: #003581;
}

#burger-menu {
  position: absolute;
  right: var(--side_space);
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('./icons/burger_menu_white.svg');
  background-repeat: no-repeat;
  background-position: 50%;
  height: 50px;
  width: 50px;
  background-color: transparent;
  z-index: 100000;
  /* on top of app-tabs */
}

.plot-container .tab-content {
  height: 74svh;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
}

.plot-container .tab-content:has(.download-csv-error-container:not([hidden])) {
  overflow-y: hidden !important;
}

.pie-chart .col>div:first-of-type,
.lower-chart .col>div:first-of-type {
  min-height: 360px;
}

.pie-chart,
.lower-chart {
  align-content: flex-start;
}

.compare-chart>div:nth-of-type(2) {
  min-height: 650px;
}

.plot-tabs {
  display: flex;
  justify-content: flex-start !important;
  flex-direction: row !important;
}

/* Apply to EXPLORE and COMPARE, not fullscreen and download */
.plot-tabs .tab:nth-child(1),
.plot-tabs .tab:nth-child(2) {
  width: fit-content !important;
}

.navbar-timebar {
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background-color: var(--blue) !important;
  padding: 0 !important;
}

.navbar-timebar:has(.show) {
  height: auto;
}

.centered-image>.layout-dropdown>#rgb-navbar>.container-fluid>.collapse>.navbar-nav {
  justify-content: center;
}

.rgb-layout-dropdown>.disclaimer {
  justify-content: flex-end !important;
}

.navbar-nav {
  margin: 0px;
  width: -webkit-fill-available;
  width: -moz-available;
}

.navbar-nav .form-label {
  font-size: 0.8rem;
  white-space: nowrap;
}

.navbar-nav p {
  white-space: nowrap;
  width: fit-content;
  margin-bottom: 0;
}

.navbar-nav .row {
  flex-wrap: nowrap;
}

.navbar>.container-fluid {
  padding: 0px !important;
}

.navbar-toggler {
  height: 5vh;
  border-radius: 0px !important;
  border-bottom: none !important;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

.disclaimer {
  display: flex;
  z-index: 1000;
  position: fixed;
  bottom: 3.5vh;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: -webkit-fill-available;
  width: -moz-available;
}

.header-button {
  border-radius: 0px;
  border: 0;
  background: transparent;
  height: 22px;
  width: 22px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-button span {
  width: max-content;
}

.header-button:hover:not([disabled]),
.tab .plot-tab-button:not([disabled]) .header-button:hover {
  color: white !important;
  background-color: var(--blue) !important;
}

#right-buttons {
  display: flex;
  gap: 1rem;
  position: absolute;
  right: 16px;
  margin-top: 22px;
}

.landing-logos {
  width: 100%;
  height: 300px;
  background-color: var(--light_grey);
}

.landing-logos-img {
  background-repeat: no-repeat;
  background-image: url("./images/logos-inline.png");
  background-size: contain;
  background-position: 50%;
  height: 60px;
}

#download-button:hover:not([disabled]),
#download-button-maps:hover:not([disabled]) {
  cursor: pointer;
}

.header-button:active,
.tab .plot-tab-button .header-button:active {
  box-shadow: 0 0 4px var(--blue) !important;
  border: 1px solid var(--blue) !important;
}

.timesliderline {
  display: inline-flex;
}

.timeslidergraph {
  width: 42rem;
  border-left: none;
}

.timeslider {
  position: absolute;
  top: 93%;
  left: 2%;
  z-index: 1002;
  display: flex;
  width: 47%;
}

.datepicker {
  width: 10%;
  min-width: 9rem;
  white-space: nowrap;
}

.datepicker .mantine-DatePickerInput-input {
  padding-bottom: 8px;
}

.return-to-date {
  display: inline-block;
  border: 0;
  margin-left: 100px;
  width: 14px;
  height: 14px;
  background: transparent;
  background-image: url('icons/return.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.slider-container {
  width: 77%;
}

.rc-slider-track,
.rc-slider-dot,
.rc-slider-handle,
.rc-slider-step {
  background-color: var(--blue) !important;
  color: var(--blue) !important;
  border-color: var(--blue) !important;
}

.rc-slider-mark-text {
  color: var(--blue) !important;
}

#date {
  color: var(--blue);
}

.SingleDatePickerInput__withBorder {
  border-radius: none;
  border: none;
}

.DateInput_input__focused {
  border-bottom: 2px solid var(--blue) !important;
}

.DateInput_fang {
  display: none;
}

.timesliderline.anim-buttons {
  /* padding-left: 10px; */
  display: none;
}

.timesliderline .fa-play,
.timesliderline .fa-pause {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  color: white;
  background: var(--blue);
  border: none;
  padding-left: 10px;
}

.timesliderline .fa-pause {
  padding-left: 6px;
}

/* Position the parent of the timeslider */
.layout-dropdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  left: 0;
  bottom: 30px;
  width: 100%;
}

.layout-dropdown .dropdown,
.layout-dropdown .timeslider {
  z-index: 1002 !important;
}

.views-layers-dropdown {
  border-right: 1px solid var(--dark_grey);
}

#layers-dropdown {
  width: 147px !important;
}

.views-layers-dropdown.dropup.dropdown.show {
  z-index: 1003 !important;
}

.views-layers-dropdown>.dropdown-toggle:after {
  display: inline-block;
  vertical-align: 10%;
  margin-left: 0.6rem;
  font-size: 1.5rem;
  color: var(--yellow);
}

.layout-dropdown .views-layers-dropdown {
  bottom: 0;
  width: 127px;
  height: 100%;
}

.btn-primary {
  box-shadow: none !important;
  border: 0 !important;
}

.layout-dropdown .views-layers-dropdown>button,
.layout-dropdown #map-layers-dropdown>button {
  border-radius: 0 !important;
  background-color: var(--blue) !important;
  background-repeat: no-repeat;
  background-position: 1rem;
  height: 1.75rem;
  padding-top: 0.6rem;
  text-align: right;
}

.layout-dropdown #map-view-dropdown>button {
  background-image: url("./images/map_icon.png");
  width: 100%;
  height: 100%;
}

.layout-dropdown #layers-dropdown>button {
  background-image: url("./images/layers_icon.png");
  background-size: 1.4rem;
  background-position: 1rem;
  width: 100%;
  height: 100%;
}

.layout-dropdown .views-layers-dropdown .dropdown-menu {
  min-width: 7.6rem;
}

.layout-dropdown #map-layers-dropdown .dropdown-menu {
  min-width: 8rem;
}

div.dropdown-menu.show {
  position: absolute;
  z-index: 100000;
}

.layout-dropdown .dropdown-menu {
  border-radius: 0 !important;
  background-color: #6c7b82;
  padding: 0;
  margin-top: 0;
}

.layout-dropdown .dropdown-item {
  text-align: center;
  text-transform: uppercase;
  font-size: smaller;
  color: #ffffff;
  padding: 0.25rem 0;
  border-top: 1px solid #9ea8ad;
}

/* This targets the map in daily tab */
#div-collection {
  height: 93vh !important;
}

#graph-collection {
  padding: 0 !important;
}

.graph-collection div:first-child:has(iframe) {
  position: relative !important;
}

#chart-collection,
#chart-collection-annual {
  height: 82vh;
  overflow-y: scroll;
}

.info {
  padding: 0.15rem 0.15rem !important;
  max-width: 79%;
}

.info>p {
  white-space: nowrap;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
}

.popup-map-point {
  z-index: 1001;
}

.leaflet-container .leaflet-popup-content-wrapper {
  font: 12px "Roboto", sans-serif !important;
  border-radius: 5px !important;
  display: inline-flex !important;
}

.leaflet-popup-content {
  margin: 0.5rem 0 0.5rem 0.5rem !important;
  line-height: 1.5 !important;
  width: max-content !important;
  text-align: left;
  padding-right: 0.5rem;
}

.leaflet-container .leaflet-popup-content {
  display: block;
}

.leaflet-container .leaflet-popup-content .popup-map-value {
  float: left;
  width: 4.5rem;
  background-color: var(--blue);
  color: #ffffff;
  padding-bottom: 1.4rem;
}

.leaflet-container .leaflet-popup-content .popup-map-value p {
  font: 16px "Roboto", sans-serif;
  text-align: center;
  display: block;
  vertical-align: middle;
}

.leaflet-container .leaflet-popup-content-wrapper .popup-map-body {
  float: left;
  padding-left: 0.5rem !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

.leaflet-container .leaflet-popup-content-wrapper .popup-map-eval-body {
  float: left;
  padding-left: 0.5rem;
  padding-right: 0 !important;
  margin-right: 0 !important;
}


.leaflet-control-attribution {
  display: none;
}

.leaflet-control-colorbar {
  top: 8px !important;
  font-size: 0.8em !important;
}

.leaflet-interactive {
  cursor: crosshair !important;
}

/*styles for 404 page*/
.background {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url(./images/img-bg-404.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.error_links {
  color: var(--yellow);
  text-decoration: underline;
  font-family: "Roboto", sans-serif;
  font-size: 1.3rem;
}

#error_title {
  font-family: "Libre Baskerville", serif;
  font-size: 5rem;
}

#error_div {
  text-align: center;
  color: white;
  font-size: 1.1rem;
}

td.column-0 {
  max-width: 100%;
  min-width: 10%;
}

.disable-photo {
  background-color: #616060;
  color: #616060;
  pointer-events: none;
  border: 1px solid #e9e9e9;
}

.close-modal {
  position: absolute;
  background-color: var(--blue);
  color: white;
  border-radius: 50% 50%;
  top: -11px;
  right: -11px;
  height: 24px;
  padding-top: 2px;
  width: 24px !important;
  font: 13px "Roboto", sans-serif;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.close-modal i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.modal-body {
  text-align: center;
}

canvas {
  overflow: hidden !important;
}

.modebar-container {
  top: -35px !important;
}

.dash-dropdown .VirtualSelectGrid {
  height: auto !important;
  overflow-y: visibile !important;
}

.legend {
  position: absolute;
  left: 50px;
  z-index: 1050;
}

.model-legend {
  position: absolute;
  left: 50px;
  z-index: 1050;
}

.model-legend-point {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: middle;
}

#small-map .model-legend,
#small-map .leaflet-control {
  display: none;
}

.vertically-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.horizontally-center,
.horizontally-center-reverse {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.side-padding {
  padding: 8.33%;
}

.blue-background {
  background-color: var(--primary_blue);
  color: white;
}

button.blue-background:hover {
  border: 1px solid var(--blue) !important;
  color: var(--blue) !important;
}

button.blue-background:active {
  box-shadow: 0 0 4px var(--blue);
  border: 1px solid var(--blue) !important;
}

.dark-blue-background {
  background-color: var(--dark_blue);
  color: white;
}

.font-blue {
  color: var(--blue);
}

.justify-content-center {
  justify-content: center;
}

.top-border {
  border-top: 1px solid #D8D8D8;
}

.gap-4 {
  gap: 1rem;
}

.gap-8 {
  gap: 2rem;
}

#landing-video {
  width: 100%;
  height: auto;
  max-width: 1066.66px;
  margin: 2rem 0rem;
}

.try-button {
  width: 12rem;
  background: #CEECFF;
  box-shadow: 5px 5px 25px 0 rgba(179, 179, 179, 0.25);
  border-radius: 0;
  background-image: url("icons/arrow_right.png");
  background-repeat: no-repeat;
  background-position: 90% 50%;
  color: var(--blue);
  padding-right: 25px;
}

.try-button:disabled {
  background-image: url("icons/arrow_right_white.png");
}

.try-button:hover {
  background: white;
  color: var(--blue);
  background-image: url("icons/arrow_right.png");
  background-repeat: no-repeat;
  background-position: 90% 50%;
}

.explore-button,
.explore-button:hover {
  background: #00448B;
  color: white;
  background-image: url("icons/arrow_right_white.png");
  background-repeat: no-repeat;
  background-position: 90% 50%;
  width: fit-content;
  padding: 10px 40px 10px 20px;
}

.explore-button:disabled {
  background-image: url("icons/arrow_right.png");
}

.bsc-logo {
  width: 50%;
}

.bsc-logo-container {
  display: flex;
  justify-content: left;
}

.landing-hero {
  background-image: url("./images/background_with_planet.png");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.light-blue-background {
  background-color: #CEECFF;
  color: #0044AE;
}

.btn-group-vertical .btn {
  text-align: left;
}

.download-position {
  margin-left: auto;
}

.plot-tabs {
  border: none;
  margin-top: 10px;
}

.plot-container .tab-content {
  border-left: 2px solid var(--blue) !important;
  border-right: 2px solid var(--blue) !important;
  border-bottom: 2px solid var(--blue) !important;
  border-top: none;
}

.tab-container {
  border: none;
  border-bottom: 2px solid var(--blue) !important;
  gap: 0.2rem;
}

.plot-tabs .tab {
  top: 2px;
  position: relative;
}

.plot-tabs .tab {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.plot-tabs .tab.tab--selected {
  padding: 15px 14px 12px 14px !important;
  color: var(--blue);
  font-weight: 600;
  border-top: 2px solid var(--blue) !important;
  border-left: 2px solid var(--blue) !important;
  border-right: 2px solid var(--blue) !important;
  border-bottom: 2px solid #ffffff !important;
}

.explore-icon.tab--selected span::before {
  background-image: url('icons/explore.svg');
}

.compare-icon.tab--selected span::before {
  background-image: url('icons/compare.svg');
}

.plot-tabs .tab:not(.tab--selected) {
  padding: 12px 14px 10px 14px !important;
  margin-top: 4px;
  color: #003581B3;
  border-top: 1px solid #003581B3 !important;
  border-left: 1px solid #003581B3 !important;
  border-right: 1px solid #003581B3 !important;
  border-bottom: 2px solid var(--blue) !important;
}

.explore-icon:not(.tab--selected) span::before {
  background-image: url('icons/explore_light_blue.svg');
}

.compare-icon:not(.tab--selected) span::before {
  background-image: url('icons/compare_light_blue.svg');
}

.plot-tab-button {
  border: 1px solid var(--blue) !important;
  border-radius: 0;
  padding: 4px 0px !important;
  margin-right: 10px;
  margin-top: 16px;
  margin-bottom: 13px;
}

#app-tabs .tab.tab--selected:not(.plot-tab-button)>span {
  color: var(--yellow) !important;
  border-bottom: 4px solid var(--yellow);
  padding-bottom: 0.8rem !important;
}

.tab.tab--selected:not(.plot-tab-button)>span {
  color: var(--blue) !important;
}

.title {
  font-size: 22px;
}

.sectors-selector button {
  padding: 0;
  border-radius: 4px;
}

.sectors-selector .dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 36px;
  background-color: var(--mid_blue);
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M31.3 192h257.3c28.4 0 42.7 34.5 22.6 54.6L182.6 374.6c-12.5 12.5-32.8 12.5-45.3 0L8.1 246.6C-12 226.5 2.3 192 31.3 192z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25%;
  border: none !important;
  vertical-align: middle;
}

.sectors-selector div:has(>.burning-info-icon) {
  display: inline-block;
}

.burning-info-icon {
  padding-left: 5px;
}

.burning-hovercard-dropdown {
  z-index: 1001 !important;
  background-color: var(--yellow) !important;
  color: black;
}

.icon {
  display: flex;
  justify-content: center;
}

.icon span {
  display: flex;
  gap: 0.5rem;
}

.icon span::before {
  content: "";
  position: relative;
  width: 22px;
  height: 22px;
  background-size: 21px;
  background-repeat: no-repeat;
  display: block;
}

h4.icon {
  justify-content: start;
}

.map-search-icon-blue span::before {
  background-image: url('icons/Home/map-search-blue.svg');
}

.monitor-icon-blue span::before {
  background-image: url('icons/Home/monitor-arrow-down-variant-blue.svg');
}

.map-search-icon-white span::before {
  background-image: url('icons/Home/map-search-white.svg');
}

.monitor-icon-white span::before {
  background-image: url('icons/Home/monitor-arrow-down-variant-white.svg');
}

.fullscreen-icon span::before {
  background-image: url('icons/FullScreen.svg');
}

.fullscreen-close-icon span::before {
  background-image: url('icons/FullScreenExit.svg');
}

.fullscreen-icon:active span:before,
.fullscreen-icon:hover span:before,
.fullscreen-icon span:active:before,
.fullscreen-icon span:hover:before {
  background-image: url('icons/FullScreen_white.svg');
}

.download-icon:not([disabled]) span::before {
  background-image: url('icons/Download.svg');
}

.download-icon[disabled] span::before {
  background-image: url('icons/Download_grey.svg');
}

.download-icon span {
  pointer-events: none;
}

.download-icon:active:not([disabled]) span:before,
.download-icon:hover:not([disabled]) span:before,
.download-icon:not([disabled]) span:active:before,
.download-icon:not([disabled]) span:hover:before {
  background-image: url('icons/Download_white.svg');
}


.annual-icon {
  width: 17%;
}

.daily-icon span::before {
  background-image: url('icons/Menu/DailyActivityBased_white.svg');
}

.annual-icon span::before {
  background-image: url('icons/Menu/Annual\ Georeferenced_white.svg');
}

.observations-icon span::before {
  background-image: url('icons/Menu/Observation_based_white.svg');
}

.about-icon span::before {
  background-image: url('icons/Menu/About_white.svg');
}

.footer-links {
  justify-content: flex-end;
  gap: 0.5rem;
}

.footer-links A {
  width: 30px;
  display: inline-table;
  white-space: nowrap;
  padding: 0;
  color: white;
}

.leaflet-control-zoom-fullscreen {
  display: none !important;
}

.dash-dropdown .Select-menu-outer {
  z-index: 1001;
}

.fullscreen-width {
  width: 100% !important;
}

div:has(>.dayPicker),
.year-picker {
  border: None;
  width: -webkit-fill-available;
}

.mantine-Input-input {
  font-size: 14px;
  color: #333;
  --input-bd: #ccc;
  --input-bd-focus: #ccc;
}

.mantine-YearPickerInput-calendarHeader,
.mantine-DatePickerInput-calendarHeader {
  display: inline-flex;
  color: var(--blue);
}

.mantine-YearPickerInput-calendarHeaderControl,
.mantine-DatePickerInput-calendarHeaderControl {
  display: inline-grid;
}

.mantine-YearPickerInput-calendarHeaderControlIcon[data-direction='previous'],
.mantine-DatePickerInput-calendarHeaderControlIcon[data-direction='previous'] {
  rotate: 90deg;
}

.mantine-YearPickerInput-calendarHeaderControlIcon[data-direction='next'],
.mantine-DatePickerInput-calendarHeaderControlIcon[data-direction='next'] {
  rotate: -90deg;
  margin-left: auto;
}

.mantine-YearPickerInput-yearsList,
.mantine-DatePickerInput-monthsList,
.mantine-DatePickerInput-yearsList,
.mantine-DatePickerInput-month {
  color: var(--blue);
  text-align-last: center;
  width: -webkit-fill-available;
}

/* ensure the disabled dates have a grey color */
.mantine-DatePickerInput-day[disabled],
.mantine-YearPickerInput-yearsListControl[disabled] {
  color: grey;
  opacity: 0.5;
}

.mantine-Popover-dropdown {
  z-index: 1000 !important;
}

.mantine-Switch-label {
  font-size: 1rem;
  text-wrap-mode: nowrap;
}

.emission-type-switch .mantine-SegmentedControl-label {
  margin-top: -1px;
}

.sectors-selector {
  width: 100%;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 4px;
  height: 37px;
}

.sectors-selector button {
  background: white !important;
  color: rgb(51, 51, 51) !important;
  border: none;
  width: 100%;
  height: 100%;
  text-align: left;
  overflow: hidden;
  font-size: 14.3px !important;
  display: inline-flex;
  align-items: center;
}

.sectors-selector button::after {
  color: gray;
}

.sectors-selector button span {
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 12px;
  margin-bottom: 2px
}


.sectors-selector .mantine-Switch-body {
  font-size: small !important;
  display: flex;
  padding-left: 0.5rem;
}

.sectors-selector .mantine-Switch-label {
  font-size: small !important;
}

.sectors-dropdown-values input {
  margin-right: 4px;
}

/* .sectors-dropdown-values label { */
/*   font-size: small; */
/* } */
/**/
/* .sectors-dropdown-values { */
/*   font-size: small; */
/* } */

.sectors-dropdown-values label:has(input[type="checkbox"]:checked) {
  color: var(--blue);
}

.dash-dropdown .Select-control {
  border: none;
}

.Select-arrow {
  border-color: #ffffff transparent transparent;
}

.Select-arrow-zone,
.mantine-Input-section {
  background-color: var(--mid_blue);
  padding-left: 12px;
  padding-right: 12px;
}

.mantine-Input-section {
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M31.3 192h257.3c28.4 0 42.7 34.5 22.6 54.6L182.6 374.6c-12.5 12.5-32.8 12.5-45.3 0L8.1 246.6C-12 226.5 2.3 192 31.3 192z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25%;
  border: none !important;
  vertical-align: middle;
  pointer-events: none;
}

/* remove the clearable arrow */
.mantine-focus-auto svg {
  display: none;
}

.modebar-container {
  left: 0px;
}

.modebar .modebar-btn .icon {
  padding: 0 !important;
}

.compare-tab {
  display: none !important;
}

@media screen and (max-width: 1349px) {

  #daily-tab,
  #annual-tab,
  #about-tab {
    display: none;
    font-size: 20px;
    margin-left: 20px;
    white-space: pre-wrap;
    text-align: left;
  }

  #right-menu {
    padding-right: 20px;
    margin-right: 0vw;
    border: none;
    right: 0vw;
    gap: 1vw
  }

  #burger-menu {
    position: static;
    right: 0vw;
    border-left: 1px solid white !important;
    border-radius: 0px;
  }

  #app-tabs {
    padding-right: 0;
    align-content: flex-start;
  }

  #app-tabs .tab.tab--selected:not(.plot-tab-button)>span {
    border-bottom: none;
  }

  .vertically-center {
    height: fit-content;
  }
}


@media screen and (min-width: 1350px) {
  #burger-menu {
    display: none;
  }

  #daily-tab,
  #annual-tab,
  #about-tab {
    display: block !important;
  }
}

@media screen and (max-width: 500px) {
  :root {
    --side_space: 5vw;
  }

  #landing-tab {
    background-size: contain;
    width: 50vw;
  }

  .bsc-logo {
    width: 100%;
  }

  .landing-logos {
    height: 150px;
  }

  .landing-logos-img {
    height: 85px;
    background-image: url("./images/logos.svg");
  }

  #contact {
    padding: 1rem !important;
  }

  #contact-message {
    height: 120px !important;
  }

  #contact-container {
    padding: 1rem;
  }
}

@media screen and (max-width: 787px) {
  .horizontally-center {
    flex-direction: column;
  }

  .horizontally-center-reverse {
    flex-direction: column-reverse;
  }

  .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-links {
    align-items: center;
    flex-direction: column;
  }

  .bsc-logo-container {
    justify-content: center;
    margin-bottom: 2rem;
  }
}

.navbar-selectors {
  padding-left: var(--side_space);
  padding-right: var(--side_space);
  background-color: #C4CDDB !important;
}

.map-container {
  padding-left: var(--side_space);
}

.plot-container {
  padding-right: var(--side_space);
  padding-bottom: 12px;
}

#scroll-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.map-header-title {
  white-space: nowrap;
}

#less-than {
  white-space: nowrap;
}

#graph-header {
  height: 5svh;
  font-size: 16px;
}

.hidden-map-for-colorbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hidden-map-for-colorbar .leaflet-control-colorbar {
  top: 11px !important;
  left: 30px !important;
  position: absolute;
  visibility: visible;
  z-index: 1051;
}

.secret-tooltip-switch {
  background: transparent;
  border: none !important;
  font-size: 0;
  opacity: 0;
}

#contact {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000000;
  color: black;
}

#contact-backdrop {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.75);
}

#contact-backdrop:hover {
  cursor: pointer;
}

#contact-container {
  background-color: white;
  padding: 2rem;
  border-radius: 5px;
  z-index: 3;
}

#contact-form {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

#contact-submit-button {
  color: white;
  background: var(--dark_blue) !important;
}

#contact-submit-button:hover {
  background: var(--blue) !important;
}

#contact-message {
  height: 200px;
}

#contact-info {
  border-radius: 10px;
  border: 1px solid var(--dark_blue);
  background-color: #ededed;
  padding: 10px;
}

.mantine-SegmentedControl-indicator {
  background: var(--mid_blue);
}

.mantine-SegmentedControl-label[data-active] .mantine-SegmentedControl-innerLabel {
  color: white !important;
}

.download-csv-error-container {
  background: rgba(255, 255, 255, 0.6);
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}

.download-csv-error-message {
  background-color: white;
  border: red 2px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 20px;
  height: 120px;
}

.download-csv-error-close {
  float: right;
  position: absolute;
  color: red;
  background-color: transparent;
  border: 0;
  top: 2px;
  right: 2px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#download-csv-warning-text {
  padding: 20px;
  font-size: 18px;
}

#download-csv-warning-icon {
  background-color: red;
  width: 120px;
  height: 100%;
  background-image: url(icons/warning.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75%;
}

/* Custom home control button styling */
.home-control-button {
  width: 34px !important;
  height: 35px !important;
  background: white !important;
  border: 2px solid #ccc !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  color: #333 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.home-button-container {
  position: absolute !important;
  top: 75px !important;
  right: 10px !important;
  z-index: 1000 !important;
}

/* Custom home control button styling for tile maps */
.home-control-button-tile {
  width: 32px !important;
  height: 35px !important;
  background: white !important;
  border: 2px solid #ccc !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  color: #333 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* No hover effects */
}

.home-button-container-tile {
  position: absolute !important;
  top: 83px !important;
  right: 16px !important;
  z-index: 1000 !important;
}

.tilemap-alert {
  position: absolute;
  top: 30%;
  width: 100%;
}

.tooltip-target {
  background-image: url('./icons/Icon_Info_Blue.svg');
  background-repeat: no-repeat;
  background-position: 50%;
  background-color: white;
  height: 20px;
  width: 20px;
}

.tooltip-target:hover {
  background-color: transparent;
}

.tooltip-inner {
  background-color: var(--blue);
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--blue);
}

.title-tooltip {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.navbar-toggler {
  background-color: white;
  color: black;
  border-radius: 4px;
}

.navbar-toggler::before {
  content: "Filters";
  margin-right: 6px;
  font-weight: 600;
  font-size: 1rem;
}

.navbar-toggler-icon {
  width: 1.2rem;
  height: 1.2rem;
}