// out: ../../../dist/css/skins/skin-md-green.min.css, compress: true, sourceMap: false
/*
 * Skin: Material Green
 * -----------
 */
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../../less/variables.less";
@import "../../less/mixins.less";
@import "../../bootstrap-material-design-less/_variables.less";
@import "../../bootstrap-material-design-less/_mixins.less";

@md-green: #1ab394;
.skin-green {
  //Navbar
  .main-header {
    .navbar {
      .navbar-variant(@md-green; #fff);
      .sidebar-toggle {
        color: #fff;
        &:hover {
          background-color: darken(@md-green, 5%);
        }
      }
      @media (max-width: @screen-header-collapse) {
        .dropdown-menu {
          li {
            &.divider {
              background-color: rgba(255, 255, 255, 0.1);
            }
            a {
              color: #fff;
              &:hover {
                background: darken(@md-green, 5%);
              }
            }
          }
        }
      }
    }
    //Logo
    .logo {
      .logo-variant(darken(@md-green, 5%));
    }

    li.user-header {
      background-color: @md-green;
    }
  }

  //Content Header
  .content-header {
    background: transparent;
  }

  //Create the sidebar skin
  .skin-dark-sidebar(@md-green);

  .main-sidebar{
    .user-panel{
        background: url(../../img/patterns/user-panel-bg_green.jpg) no-repeat;
    }
  }
  .sidebar-menu > li {
    > a {
      border-left: 3px solid transparent;
    }    
    &:hover > a, &.active > a {
      color: #FFF;
      background: @md-green;
      border-left-color: @md-green;
    }
  }

  .sidebar-form{
    border: none;
    margin: 0;
    input[type="text"], input[type="text"]:focus,.btn,.btn:hover{
      background-color: transparent;
      color: #FFF;
    }
  }

  a, a:hover, a:focus {
    color: @md-green;
  }

  .togglebutton {
    label {
      input[type=checkbox]:checked {
        + .toggle {
          background-color: fade(@md-green, 50%); // Switch bg on
        }

        + .toggle:after {
          background-color: @md-green; // Handle on
        }

        + .toggle:active:after {
          box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@md-green, 10%); // Ripple on
        }
      }
    }
  }
  .dropdown-menu {
    li {
      a:hover {
        color: @md-green;
      }
    }
  }

  .form-control,
  .form-group .form-control {
    background-image: linear-gradient(@md-green, @md-green), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
  }

  .form-group {
    &.is-focused {
      .form-control {
        background-image: linear-gradient(@md-green, @md-green), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
        
        .material-input:after {
          background-color: @md-green;
        }
      }

      label,
      label.control-label {
        color: @md-green;
      }
    }
  }

  .progress {
    .progress-bar {
        .variations(~".progress-bar", ~"", background-color, @md-green);
    }
  }

  .nav-tabs {
    background: @md-green;
  }

  .text-primary {
    color: @md-green;
  }
  .slider {
    .variations(~".slider", ~".noUi-connect", background-color, @md-green);
    .variations(~".slider", ~" .noUi-connect", background-color, @md-green);
    .variations(~".slider", ~" .noUi-handle", background-color, @md-green);
    .variations(~".slider", ~" .noUi-handle", border-color, @md-green);
  }
  .checkbox, label.checkbox-inline {
    input[type=checkbox] {
      &:checked {
        & + .checkbox-material .check {
          color: @md-green;
          border-color: @md-green;
        }

        & + .checkbox-material .check:before {
          color: @md-green;
        }
      }
    }
  }
  .radio, label.radio-inline {
    .check {
      background-color: @md-green;
    }
  }
}