:root {
  --primary-color: #96AE00; /* primary color */
  --secondary-color: #ff7e0d; /* secondary color */
  --theme-text-body: #4D5574;
  --size-wheel: 25rem;
}

.primary-light {
  /* Mix the original color with white to make it 30% lighter */
  background-color: color-mix(in srgb, var(--primary-color) 30%, white);
  color:var(--primary-color);
}
.secondary-light {
  /* Mix the original color with white to make it 30% lighter */
  background-color: color-mix(in srgb, var(--secondary-color) 30%, white);
  color:var(--secondary-color);
}
body {
    font-family: 'Roboto' !important;
    color:var(--theme-text-body) !important;
}
/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: #dddddd;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 20px;
  border: 2px solid #dddddd;
}

.bootstrap-tagsinput .tag {
      margin-right: 2px;
      color: white !important;
      background-color: var(--primary-color) !important;
      padding: 0.2rem;
    }

.theme-btn-outline{
    margin-top: 5px;
    padding: 8px 18px;
    text-align: center;
    font-weight: normal;
    background: transparent !important;
    color: var(--primary-color);
    text-decoration: none;
    border: 1px solid var(--primary-color) !important;
}

.theme-btn-primary {
    margin-top: 5px;
    padding: 8px 18px;
    text-align: center;
    font-weight: normal;
    transition: 0.5s;
    background-color: var(--primary-color)!important;
    color: white;            
    /*box-shadow: 0 2px 10px #eee;*/
    border-radius: 5px;
}

.theme-btn-primary:hover {
    background: transparent !important;
    color: var(--primary-color);
    text-decoration: none;
    border: 1px solid var(--primary-color) !important;
}


.theme-btn-secondary {
    margin-top: 5px;
    padding: 8px 18px;
    text-align: center;
    font-weight: normal;
    transition: 0.5s;
    background-color: var(--secondary-color)!important;
    color: white;            
    /*box-shadow: 0 2px 10px #eee;*/
    border-radius: 5px;
}

.theme-btn-secondary:hover {
    background: transparent !important;
    color: var(--secondary-color);
    text-decoration: none;
    border: 1px solid var(--secondary-color) !important;
}


.theme-btn-gradient {
    margin-top: 5px;
    padding: 6px 12px;
    text-align: center;
    font-weight: normal;
    transition: 0.5s;
    background-image: linear-gradient(145deg, var(--primary-color) 0%, var(--secondary-color) 100%)!important;
    color: white;
    border-radius: 5px;
}

.theme-btn-gradient:hover {
    background: #fff !important;
    color: var(--primary-color);
    text-decoration: none;
    border: 1px solid var(--primary-color) !important;
}
.theme-bg {
    background: transparent !important;
    color:var(--theme-text-body);
    text-decoration: none;
    border: 2px solid var(--primary-color) !important;
}
.theme-bg-primary{
    background-color:var(--primary-color);
    color:#FFF;
}

.theme-bg-secondary{
    background-color:#ff7e0d;
    color:#fff;
}

.theme-bg-gradient{
    background-image: linear-gradient(145deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color:#FFF;
}

.theme-bg-primary-light{
    color:#ffffff;
    background: #96AE00;
    border-color: transparent;
    opacity: 0.4;
}

.theme-border{
    border-color:#96AE00 !important;
}
.theme-border-hover:hover{
    border-color:#96AE00 !important;
}
.theme-primary-text{
    color:#96AE00 !important;
}
.theme-secondary-text{
    color:#ff7e0d !important;
}

.theme-carousel {
    width: 100%;
    height: 100%;
    background: #96AE00;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ff7e0d, #96AE00);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #ff7e0d, #96AE00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}


.nav-scroller .nav {
  /*color: rgba(255, 255, 255, .75);*/
}

.nav-scroller .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, .75) !important;
}

.nav-scroller .nav-link:hover {
  color: #ff7e0d !important;
}

.nav-scroller .active {
  font-weight: 500;
  color: #343a40;
}