@import './mixins';
@import './colors';

a, a:hover  {
  color: $todos-palette2;
}

.bg-dark {
  background-color: $todos-palette1 !important;
}

h4.page-header {
  line-height: 2em;
}

@include breakpoint(mobile) {
  h4.page-header {
    line-height: 1.3em;
  }
}

.App > .container { // Because of fixed header, previously page-header {
  /* margin-top: 30px; */
}

h4.page-header {
  font-size: 2em;
}

.page-header {
  margin-top: 0;
}

@include breakpoint(tablet) {
  .page-header {
    margin-top: 10px;
  }
}

#react-root > div > div.container > div > div.alert {
  margin-top: 20px;
}

div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > p,
div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > p > a {
  font-size: 12px;
}

div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > p > a:hover,
div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > p > a {
//   color: $todos-palette2;
}