/* You can add global styles to this file, and also import other style files */

@import 'assets/scss/typography';
@import 'assets/scss/color';
@import 'assets/scss/breakpoint';
@import 'assets/scss/icons';
@import '../node_modules/leaflet.locatecontrol/dist/L.Control.Locate.css';

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: $grey-6;
}

a {
  color: $default-link-color;
  text-decoration: none;
  background-color: transparent;
  @include cn-regular-14;
  cursor: pointer;
  &:focus {
    text-decoration: none;
  }
  &:hover {
    text-decoration: underline;
  }
}

.clickable {
  cursor: pointer;
}

.bold {
  font-weight: bold !important;
}

// Containers
.content-container {
  margin: 0;
  padding: 30px 0 30px 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  &.medium-pt {
    padding: 25px 0 30px 0;
  }
  &.small-pt {
    padding: 10px 0 30px 0;
  }
  &.no-pt {
    padding: 0 0 30px 0;
  }
  @media #{$phone} {
    padding-top: 30px;
  }
}
.section-container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  @media #{$tablet} {
    width: 95%;
    max-width: unset;
  }
  &.no-max-width {
    max-width: unset;
    margin-bottom: 1rem;
    width: unset;
  }
}

// Layout
.w-100 {
  width: 100%;
}