@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

:root {
  --theme-green: #154734;
  --theme-off-green: #72826d;
  --theme-bright-green: #57A334;
  --theme-light-green: #DAE0D7;
  --theme-dark-green: #2a2e2d;
  --theme-grey: #545756;
  --theme-light-grey: #c7c7c7;
  --theme-lighter-grey: #e8e8e8;
  --theme-white: #fff;
  --theme-background: #ecf0f5;
}
/* old off green #243f3f */

body {
  font-family: 'Lora', sans-serif !important;
}

h1, h2, h3, h4, h5 {
  font-family: 'Lora', sans-serif !important;
  text-align: center;
  font-weight: bold;
}
  
/* hyperlinks */
.content a {
  text-decoration: underline;
}
.content a:link {
  color: var(--theme-bright-green);
}
.content a:visited {
  color: var(--theme-off-green) !important;
}
.content a:hover {
  color: var(--theme-green) !important;
}

/* note to format sidebar links with .main-sidebar a {}

/* Link Blocks -------------------------------------------- */
/* for welcome page links */
div.link-block {
  background-color: var(--theme-white) !important;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  border: 1px solid #000000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

  border-radius: 4px;
  padding: 10px 10px 10px 10px; /* insides */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  margin: 0 auto 10px auto; /* outsides: top side bottom side */
  width: 100%;
}

div.link-block:hover {
  transform: translateY(-4px);
  background-color: var(--theme-light-green) !important;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* Thicker, darker shadow */
}
    
/* Header ------------------------------------------ */
/* Main title */
.main-header .logo {
  font-family: 'Lora', sans-serif !important;
  font-weight: bold;
}

.main-header .logo:hover {
  background-color: var(--theme-green) !important;
  color: white;
}
  
.skin-green .main-header .navbar {
  background-color: var(--theme-green);
}
.skin-green .main-header .logo {
  background-color: var(--theme-green);
}


/* Sidebar ----------------------------------------- */
.skin-green .main-sidebar {
  background-color: var(--theme-background);
  border-right: 1px solid #333 !important;
}

/* Static menu list links */
.skin-green .sidebar-menu > li > a {
  display: block;
  align-items: center;
  justify-content: center;
  border: 1px solid #333 !important;
  transition: all 0.3s ease;
  border-radius: 4px;
  color: #333;
  background-color: var(--theme-light-green) !important;
  margin: 1px;
}

/* :hover pseudo class */
.skin-green .sidebar-menu > li:hover > a { 
  color: #000;
  background-color: var(--theme-off-green) !important;
}

.skin-green .sidebar-menu > li.active > a {
  color: #fff;
  background-color: var(--theme-dark-green) !important;
}

/*
.body-header-1 {
  color: #2F4F4F !important;
  font-weight: bold !important;
  text-align: center !important;
}

.body-header-2 {
  color: #2F4F4F !important;
  font-weight: bold !important;
}

.body-header-3 {
  color: #2F4F4F !important;
  font-weight: bold !important;
}

.body-header-4 {
  color: #2F4F4F !important;
  font-weight: bold !important;
}
*/

/* Boxes ------------------------------------------ */
.dashboard {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
  gap: 1px !important;
  padding: 1px !important;
  margin: 1px !important;
}

.box {
  border: 1px solid #000 !important;
  /*
  padding: 0px !important;
  margin: 0px !important;
  */
}

.box.box-solid.box-primary > .box-header {
  /*
  padding: 10;
  */
  color: white;
  background: var(--theme-off-green);
  text-align: center;
}


/* Action Buttons --------------------------------- */
.button-box {
  border: 2px solid #000000;
  border-radius: 4px;
  padding: 10px 10px 10px 10px; /* insides */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  margin: 0 auto 10px auto; /* outsides: top left bottom right */
  width: 100%;
  border-width: 1px;
}

.btn.action-button {
  color: #fff;
  background-color: var(--theme-off-green) !important;
  border: 1px solid #000000 !important;
  border-radius: 3px;
  border-width: 1px,

  display: block;
  box-sizing: border-box;
  margin: 0 auto 10px auto;
  width: 100%;
}

.action-button:hover {
  background-color: var(--theme-dark-green) !important;
  color: #fff !important;
  border: 1.25px solid #000000 !important;
}

/*
.action-button:active {
  background-color: var(--theme-off-green) !important;
  background-color: '#fff';
  color: #fff !important;
  border: 1.25px solid #000000 !important;
}
*/


/* Regular Checkbox ----------------------------------------------- */
/* not sure we even have any of these, they are janky */
input[type="checkbox"] {
  accent-color: var(--theme-green);
}

input[type="checkbox"]:checked {
  accent-color: var(--theme-green);
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
}


/* Awesome Checkbox ----------------------------------------------- */
.awesome-checkbox label::before {
  border: 1px solid #000000;
  background-color: white;
}
/* Why does it still look like there is a blue border? */

.awesome-checkbox input:checked + label::before {
  background-color: var(--theme-off-green) !important;
  border-color: #000000;
}

/* Styled Checkbox - reusable class */
.styled-checkbox {
  display: block;
  margin-bottom: 10px;
}


/* Action bttn ------------------------------------------ */
.bttn-unite {
  font-size: 16px !important;
  padding: 5px !important;

  border-radius: 3px !important;
  background-color: var(--theme-off-green);
  color: white !important;
  border: 1px solid #000000 !important;

  display: block !important;
  box-sizing: border-box !important;
  margin: 0 auto 10px auto !important;
  width: 100% !important;

  transition: color .3s cubic-bezier(.02, .01, .47, 1),
  border-color .3s cubic-bezier(.02,.01,.47,1);
  transition-property: color, border-color;
    transition-duration: 0.3s, 0.3s;
    transition-timing-function: cubic-bezier(0.02, 0.01, 0.47, 1), cubic-bezier(0.02, 0.01, 0.47, 1);
    transition-delay: 0s, 0s;
}

.bttn-unite:hover { /* this doesnt last long if at all? */
  color: #fff !important;
  border-color: #000000 !important;
  background-color: #000000; /* right before animation */
}

.bttn-unite:hover::before {
  background-color: var(--theme-green) !important; /* comes in from left in animation */
}

.bttn-unite:hover::after {
  background-color: var(--theme-grey) !important; /* comes in from right in animation */
}

.bttn-unite:active {
  background-color: var(--theme-bright-green) !important; /* not sure? */
  border-color: #000000 !important;
}

.bttn-unite:active::before,
.bttn-unite:active::after {
  background: var(--theme-dark-green) !important; /* only while click is held down */
}

.bttn-unite:focus {
  outline: none !important;
  background-color: var(--theme-dark-green) !important; /* after click, before clicking elsewhere */
}

.bttn-unite:focus::before,
.bttn-unite:focus::after {
  background: var(--theme-dark-green) !important;
}


/* Slider Input ------------------------------------------ */
/* Change slider from blue to theme off-green */
/* Using high specificity selectors to override Shiny defaults */

body .irs--shiny .irs-bar,
body .irs .irs-bar,
.content .irs .irs-bar {
  background: var(--theme-off-green) !important;
  border-top: 1px solid var(--theme-off-green) !important;
  border-bottom: 1px solid var(--theme-off-green) !important;
}

body .irs--shiny .irs-from,
body .irs--shiny .irs-to,
body .irs--shiny .irs-single,
body .irs .irs-from,
body .irs .irs-to,
body .irs .irs-single,
.content .irs .irs-from,
.content .irs .irs-to,
.content .irs .irs-single {
  background: var(--theme-off-green) !important;
}

body .irs--shiny .irs-from:before,
body .irs--shiny .irs-to:before,
body .irs--shiny .irs-single:before,
body .irs .irs-from:before,
body .irs .irs-to:before,
body .irs .irs-single:before,
.content .irs .irs-from:before,
.content .irs .irs-to:before,
.content .irs .irs-single:before {
  border-top-color: var(--theme-off-green) !important;
}

body .irs--shiny .irs-handle,
body .irs .irs-handle,
.content .irs .irs-handle {
  border: 2px solid var(--theme-off-green) !important;
  background: white !important;
}

body .irs--shiny .irs-handle:hover,
body .irs .irs-handle:hover,
.content .irs .irs-handle:hover {
  background: var(--theme-light-green) !important;
}

body .irs--shiny .irs-handle.state_hover,
body .irs--shiny .irs-handle:hover,
body .irs .irs-handle.state_hover,
body .irs .irs-handle:hover,
.content .irs .irs-handle.state_hover,
.content .irs .irs-handle:hover {
  border-color: var(--theme-dark-green) !important;
}


/* Download Button ------------------------------------------ */
/* Style download button to match theme */
.btn-primary {
  font-size: 16px !important;
  padding: 8px 16px !important;
  border-radius: 3px !important;
  background-color: var(--theme-off-green) !important;
  color: white !important;
  border: 1px solid #000000 !important;
  transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
  background-color: var(--theme-dark-green) !important;
  color: white !important;
  border-color: #000000 !important;
}

.btn-primary:disabled,
.btn-primary[disabled] {
  background-color: var(--theme-light-grey) !important;
  color: #666 !important;
  border-color: #999 !important;
  cursor: not-allowed !important;
  opacity: 0.6;
}