/*
** Light Background Section - .ls
*/
.ls {
  background-color: $lightColor;
  color: $fontColor;
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select,
  .form-control {
    background-color: $lightColor;
  }
  .breadcrumb{
    background: $darkgreyColor;
    .breadcrumb-item{
      color: $lightColor !important;
      &:before{
        color: $lightColor;
      }
      a{
        color: $lightColor !important;
      }
    }
  }
  .top-includes{
    color: $fontColor;
    li{
      a{
        color: $fontColor;
        &.bg-gradient{
          color: $lightColor;
        }
      }
    }
  }
  &.transparent_bg{
    background-color: transparent;
  }
  .border-right, .border-left{
  border-color: $borderColor !important;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $darkgreyColor;
    a {
      color: inherit;
      &:hover {
        //color: $colorMain;
       color:$fontColor;
      }
    }
  }

  //buttons

  .btn-maincolor:hover {
    background-color: transparent;
    border-color: $colorMain;
    color: $darkgreyColor;
  }

  .btn-maincolor2:hover {
    background-color: transparent;
    border-color: $colorMain2;
    color: $darkgreyColor;
  }

  .btn-maincolor3:hover {
    background-color: transparent;
    border-color: $colorMain3;
    color: $darkgreyColor;
  }

  .btn-darkgrey:hover {
    background-color: transparent;
    border-color: $darkgreyColor;
    color: $darkgreyColor;
  }

  .btn-outline-maincolor:hover {
    background-color: $colorMain;
    color: $lightColor;
  }

  .btn-outline-maincolor2:hover {
    background-color: $colorMain2;
    color: $lightColor;
  }

  .btn-outline-maincolor3:hover {
    background-color: $colorMain3;
    color: $lightColor;
  }

  .btn-outline-darkgrey:hover {
    background-color: $greyColor;
    color: $darkgreyColor;
  }

  .links-maincolor a:hover {
    opacity: 0.7;
  }
}

/*
** Grey Background Section - light section, muted section - .ls.ms
*/
.ls.ms {
  background-color: $greyColor;
  color: darken($fontColor, 7%);
  [role="tablist"] .card-header{
    background: $backgroundColor;
    border-color: $backgroundColor;
    &:hover{
      background-color: transparent;
    }
  }
  .btn-darkgrey{
    background-color: $lightColor;
    &:hover{
      background-color: $greyColor;
    }
  }
  .btn-outline-darkgrey{
    border-color: $lightColor;
    &:hover{
      border-color: $lightColor;
      background: $lightColor;
    }
  }

  .links-grey a {
    color: darken($fontColor, 7%);
  }

  .hero-bg {
    background-color: $lightColor;
    hr {
      background-color: $borderColor;
    }
  }

  hr {
    background-color: $lightColor;
  }

  //forms
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select,
  .form-control {
    background-color: transparent;
    border-color: $backgroundColor;
  }

  // .ls:not(.ms),
  .hero-bg {
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select,
    .form-control {
      border-color: $borderColor;
      background-color: $greyColor;
    }
  }
  td,
  th,
  .bordered {
    border-color: darken($borderColor, 5%);
  }

  .btn-secondary {
    border-color: $lightColor;
    &:hover {
      border-color: darken($greyColor, 6%);
      background-color: darken($greyColor, 6%);
    }
  }

}