@charset "utf-8";

/*
--------------------------------------
themes
--------------------------------------
*/

/* font-family: 'Roboto Slab', serif; */
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto Slab Regular"), local("RobotoSlab-Regular"),
    url(./fonts/RobotoSlab.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* font-family: 'Montserrat', sans-serif; */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: local("Montserrat Regular"), local("Montserrat-Regular"),
    url(./fonts/Montserrat.woff2) format("woff2");
}

/* font-family: 'Raleway', sans-serif; */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Raleway"), local("Raleway-Regular"),
    url(./fonts/Raleway.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* theme variables */
:root {
  --theme-font-brand: "Roboto Slab", serif;
  --theme-font-primary: "Montserrat", sans-serif;
  --theme-font-secondary: "Raleway", sans-serif;
  --theme-primary-bg: #00264c;
  --theme-secondary-bg: #ccbcad;
  --theme-primary-text: white;
  --theme-timing-function-bounce: cubic-bezier(0.5, -0.7, 0.5, 1.7);
}

.theme-font-brand {
  font-family: var(--theme-font-brand);
}

.theme-font-secondary {
  font-family: var(--theme-font-secondary);
}

/*
--------------------------------------
global elements
--------------------------------------
*/
html,
body {
  font-family: var(--theme-font-primary);
  height: 100%;
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/*
--------------------------------------
header-footer
--------------------------------------
*/
header {
  font-family: var(--theme-font-brand);
}

header,
footer {
  background: var(--theme-primary-bg);
  color: var(--theme-primary-text);
}

footer a,
footer a:hover {
  color: var(--theme-primary-text);
}

/*
--------------------------------------
layout
--------------------------------------
*/

#left {
  background: var(--theme-secondary-bg);
  width: 30rem;
  transition: width 150ms;
  -webkit-transition: width 150ms;
  -moz-transition: width 150ms;
  -o-transition: width 150ms;
}

#left .nav-tabs .nav-item.show .nav-link,
#left .nav-tabs .nav-link.active {
  background-color: #67544d;
}

#left .fa-angle-double-left {
  -webkit-transition: -webkit-transform 600ms ease;
  -webkit-transition-timing-function: var(--theme-timing-function-bounce);
  transition: -webkit-transform 600ms ease;
  transition: transform 600ms ease, -webkit-transform 600ms ease;
  transition-timing-function: var(--theme-timing-function-bounce);
}

#left.closed .fa-angle-double-left {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

#left.closed {
  overflow: hidden;
  width: 2.2rem;
}

#left.closed > div:not(#left_top_tabs) {
  display: none !important;
}

#left.closed .border-bottom {
  border: none !important;
}

#right {
  -webkit-transition: all 150ms;
  transition: all 150ms;
  width: calc(100% - 28rem);
}

#right.closed {
  width: calc(100% - 2.2rem);
}

#left_top_tabs {
  color: var(--theme-primary-text);
}

#left .nav-link.active {
  color: var(----light) !important;
}

#left .nav-link:not(.active):hover {
  background-color: #bea392 !important;

  color: var(--light) !important;
}

/* width < 576px - left panel full width */
@media only screen and (max-width: 576px) {
  #left {
    width: 100%;
  }

  #right {
    width: 0;
  }
}

/* width < 768px - no left bar when closed and show top menu icon */
@media only screen and (max-width: 768px) {
  #left.closed {
    width: 0;
  }

  #right.closed {
    width: 100%;
  }
}

/*
--------------------------------------
collapsible sections
--------------------------------------
*/
.collapse-header,
.collapse .list-group-item {
  -webkit-transition: background 200ms linear;
  cursor: pointer;
  transition: background 200ms linear;
}

.collapse-header i {
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

.collapse-header.show i {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.collapse-header {
  cursor: pointer;
}

.collapse-header:hover {
  background: #e5e5e5 !important;
}

.collapse .list-group-item.checked {
  background: var(--success);
  border-color: #070;
  color: white;
}

.collapse .list-group-item:not(.checked):hover {
  background: #eafaee !important;
}

/*
--------------------------------------
map
--------------------------------------
*/
.project-polygon {
  fill-opacity: 0.2;
  -webkit-transition: fill-opacity 200ms linear;
  transition: fill-opacity 200ms linear;
}

.project-polygon:hover {
  fill-opacity: 0.5;
}

/*
--------------------------------------
bootstrap
--------------------------------------
*/

.btn {
  cursor: pointer;
}

/* border radius */
.btn,
.alert,
.modal-content,
.modal-header {
  border-radius: 0 !important;
}

/* modals */
.modal-header {
  background-color: var(--theme-primary-bg) !important;
  border: 1px solid white;
}

/* collapse speed */
.collapsing {
  -webkit-transition: height 150ms linear;
  transition: height 150ms linear;
}

/*
--------------------------------------
leaflet
--------------------------------------
*/

/* fonts */
.leaflet-container,
.leaflet-popup-content {
  font-family: var(--theme-font-primary);
}

/* tooltips */
.leaflet-tooltip {
  border-radius: 0;
}

/*
--------------------------------------
search api
--------------------------------------
*/
.search-api-container {
  border-radius: 0;
}

.search-api-menu-content {
  max-height: 50rem !important;
}

/*
--------------------------------------
rem unit scalability
px2rem converter: https://www.ninjaunits.com/converters/pixels/pixels-rem/
--------------------------------------
*/

/* < 576px: sm - small devices (landscape phones) */
@media (max-width: 576px) {
  html {
    font-size: 80%;
  }
}

/* >= 576px: sm - small devices (landscape phones) */
@media (min-width: 576px) {
  html {
    font-size: 80%;
  }
}

/*  >= 768px: md - medium devices (tablets, navbar toggle appears at this breakpoint) */
@media (min-width: 768px) {
  html {
    font-size: 80%;
  }
}

/* >= 992px: lg - large devices (desktops) */
@media (min-width: 992px) {
  html {
    font-size: 80%;
  }
}

/* >= 1200px: xl - extra large devices (large desktops) */
@media (min-width: 1200px) {
  html {
    font-size: 80%;
  }
}