/* Custom Colors */
:root {
  --custom-color: #6FA87F;
  --custom-color-dark: #3C744E;
  --custom-color-darker: #294e34;
  --custom-color-light: #6fa87f50;
  --custom-color-lighter: #6fa87f31;
}



/* Custom Shadow on-hover */
.custom-shadow-on-hover:hover {
  box-shadow: 0 5px 15px var(--custom-color-dark);
}



/* Custom Background Colors */
.bg-custom {
  background-color: var(--custom-color);
}
.bg-custom-dark {
  background-color: var(--custom-color-dark);
}
.bg-custom-light {
  background-color: var(--custom-color-light);
}



/* Custom Text Colors */
.text-custom {
  color: var(--custom-color);
}
.text-custom-dark {
  color: var(--custom-color-dark);
}



/* Custom Links */
.link-custom {
  color: var(--custom-color-dark);
  text-decoration: none;
}
.link-custom:hover {
  color: var(--custom-color);
  text-decoration: underline;
}
.link-custom:active {
  color: var(--custom-color);
}
.link-custom:focus {
  color: var(--custom-color);
}



/* Custom Nav-Links */
.nav-link-custom {
  color: var(--custom-color-dark);
  font-weight: 600; /* Bootstrap semibold */
  text-decoration: none;
}
.nav-link-custom:hover {
  color: var(--custom-color);
}
.nav-link-custom:active {
  color: var(--custom-color);
}
.nav-link-custom:focus {
  color: var(--custom-color);
}



/* Custom Dropdown-Links */
.dropdown-link-custom {
  color: var(--custom-color-dark);
  font-weight: 600; /* Bootstrap semibold */
  text-decoration: none;
}
.dropdown-link-custom:hover {
  color: #FFF;
  background-color: var(--custom-color);
}
.dropdown-link-custom:active {
  color: var(--custom-color-dark);
}
.dropdown-link-custom:focus {
  color: var(--custom-color-dark);                  
}



/* Custom Input */
.input-custom:focus {
  box-shadow: 0 0 0 .2rem var(--custom-color-light) !important;
  border-color: var(--custom-color)
}



/* Custom Button */
.btn-custom {
  color: #FFF;
  background-color: var(--custom-color-dark);
  border-color: var(--custom-color-dark)
}
.btn-custom:hover {
  color: #FFF;
  background-color: var(--custom-color-darker);
  border-color: var(--custom-color-darker)
}
.btn-custom:focus,
.btn-custom.focus {
  box-shadow: 0 0 0 .2rem var(--custom-color-light)
}
.btn-custom.disabled,
.btn-custom:disabled {
  color: #212529;
  background-color: var(--custom-color-darker);
  border-color: var(--custom-color-darker)
}
.btn-custom:not(:disabled):not(.disabled):active,
.btn-custom:not(:disabled):not(.disabled).active,
.show>.btn-custom.dropdown-toggle {
  color: #212529;
  background-color: var(--custom-color);
  border-color: var(--custom-color-dark)
}
.btn-custom:not(:disabled):not(.disabled):active:focus,
.btn-custom:not(:disabled):not(.disabled).active:focus,
.show>.btn-custom.dropdown-toggle:focus {
  box-shadow: 0 0 0 .2rem var(--custom-color-light)
}
/* Custom Button Light */
.btn-custom-light {
  color: #FFF;
  background-color: var(--custom-color);
  border-color: var(--custom-color)
}
.btn-custom-light:hover {
  color: #FFF;
  background-color: var(--custom-color-dark);
  border-color: var(--custom-color-dark)
}
.btn-custom-light:focus,
.btn-custom-light.focus {
  box-shadow: 0 0 0 .2rem var(--custom-color-light)
}
.btn-custom-light.disabled,
.btn-custom-light:disabled {
  color: #212529;
  background-color: var(--custom-color-dark);
  border-color: var(--custom-color-dark)
}
.btn-custom-light:not(:disabled):not(.disabled):active,
.btn-custom-light:not(:disabled):not(.disabled).active,
.show>.btn-custom-light.dropdown-toggle {
  color: #212529;
  background-color: var(--custom-color);
  border-color: var(--custom-color-dark)
}
.btn-custom-light:not(:disabled):not(.disabled):active:focus,
.btn-custom-light:not(:disabled):not(.disabled).active:focus,
.show>.btn-custom-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 .2rem var(--custom-color-light)
}
/* Custom Button Outline */
.btn-outline-custom {
  color: var(--custom-color-dark);
  background-color: transparent;
  background-image: none;
  border-color: var(--custom-color-dark)
}
.btn-outline-custom:hover {
  color: #FFF;
  background-color: var(--custom-color);
  border-color: var(--custom-color-dark)
}
.btn-outline-custom:focus,
.btn-outline-custom.focus {
  box-shadow: 0 0 0 .2rem var(--custom-color-light)
}
.btn-outline-custom.disabled,
.btn-outline-custom:disabled {
  color: var(--custom-color-darker);
  background-color: transparent
}
.btn-outline-custom:not(:disabled):not(.disabled):active,
.btn-outline-custom:not(:disabled):not(.disabled).active,
.show>.btn-outline-custom.dropdown-toggle {
  color: #212529;
  background-color: var(--custom-color-dark);
  border-color: var(--custom-color-darker)
}
.btn-outline-custom:not(:disabled):not(.disabled):active:focus,
.btn-outline-custom:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-custom.dropdown-toggle:focus {
  box-shadow: 0 0 0 .2rem var(--custom-color-light)
}/* END Custom Buttons */



/* Scroll-to-top Button */
#btn_top {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px;
  right: 20px;
  z-index: 98; /* Make sure it does not overlap */
}

/* Fixed-bottom Search Bar  */
.bottom-search-bar {
  position: fixed; /* Fixed/sticky position */
  bottom: 20px;
  z-index: 99; /* Make sure it does not overlap */
}



/* Navbar-Detectors */
#navbar_detector_inner {
  position: fixed; /* Fixed/sticky position */
  top: 0; /* Position the detector at the top of the page */
  width: 100%; /* Full width */
  height: 15px; /* slim area at the top of page */
  z-index: 98;
  /*
  background-color: blue;
  opacity: 0.5;
  */
}
#navbar_detector_outer {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  top: 0; /* Position the detector at the top of the page */
  width: 100%; /* Full width */
  height: 85px; /* slightly more than Navbar height */
  z-index: 97;
  /*
  background-color: red;
  opacity: 0.5;
  */
}
