:root {
  --primary: #008b6a;
  --secondary: #009d84;
  --tertiary: #006655;
  --complementary: #5f575a;
  --light-gray: #d9d9d9;
  --shady: #00544B;
  --darker: #212529;
  --aqua: #E0F7F4;
  --opp: #9D003A;
}
body {
  font-family: Lato !important;
}

.btn-primary {
  background-color: var(--primary) !important;
  color: white;
  border: 0 !important;
  padding-left: 30px;
  padding-right: 30px;
}

.btn-primary:hover {
  opacity: 0.85 !important;
}
.btn-shady {
  background-color: var(--shady) !important;
  color: white;
  border: 0 !important;
  padding-left: 30px;
  padding-right: 30px;
}

.btn-shady:hover {
  opacity: 0.85 !important;
  color:white;
}
.btn-opp {
  background-color: var(--opp) !important;
  color: white;
  border: 0 !important;
  padding-left: 30px;
  padding-right: 30px;
}

.btn-opp:hover {
  opacity: 0.85 !important;
  color:white
}

.btn-primary-outline {
  background-color: transparent !important;
  color: var(--primary);
  border: 2px solid var(--primary) !important;
  padding-left: 30px;
  padding-right: 30px;
}

.btn-primary-outline:hover {
  background-color: var(--primary) !important;
  color: white !important;
  opacity: 0.85 !important;
}

.btn-shady-outline {
  background-color: transparent !important;
  color: var(--shady);
  border: 2px solid var(--shady) !important;
  padding-left: 30px;
  padding-right: 30px;
}

.btn-shady-outline:hover {
  background-color: var(--shady) !important;
  color: white !important;
  opacity: 0.85 !important;
}

.btn-opp-outline {
  background-color: transparent !important;
  color: var(--opp);
  border: 2px solid var(--opp) !important;
  padding-left: 30px;
  padding-right: 30px;
}

.btn-opp-outline:hover {
  background-color: var(--opp) !important;
  color: white !important;
  opacity: 0.85 !important;
}


/* Navigation */
.navbar {
  background-color: #eceef1 !important;
  border-bottom: 1px solid #5f575a;
  padding: 2em 1em;
}

.main-header {
  font-size: 2em;
  font-weight: bold;
  margin: 5px 0 1em 0;
  text-align: center;
}

.sec-header {
  font-size: 1.2em;
  font-weight: bold;
  margin: 5px 0 1em 0;
  text-align: center;
}

.info-container,
.flexible-text {
  font-size: min(calc(3vw + 2px), 16px) !important ;
}
.info-container > div {
  font-size: min(calc(3vw + 2px), 16px) !important ;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.main-form {
  max-width: 600px;
  margin: 1em auto !important;
}

.form-input > input {
  /* height: 50px !important;
  background-color: black !important; */
}

.primary {
  color: var(--primary)
}
.bg-primary {
  background-color: var(--primary)
}

.shady {
  color: var(--shady)!important;
}

.bg-shady {
  background-color: var(--shady) !important;
}
.darker {
  color: var(--darker)!important;
}

.bg-darker {
  background-color: var(--darker) !important;
}
.bg-aqua {
  background-color: var(--aqua)
}
.aqua {
  color: var(--aqua)
}
.bg-opp {
  background-color: var(--opp)
}
.opp {
  color: var(--opp)
}
.complementary{
  color: var(--complementary)
}
.bg-complementary {
  background-color: var(--complementary)
}
#star-rating span {
    font-size: 1em;
    color: gold;
    padding: 0 3px;
    transition: transform 0.1s;
}
#star-rating span:hover {
    transform: scale(1.2);
}
#star-rating {
    user-select: none;       /* Prevent text selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.mapbox-gl-draw_ctrl-draw-btn.active {
  background-color: #008b6a !important; 
  color: #ffffff !important; 
  border: 1px solid #008b6a !important ;
}