// out: ../../../dist/css/skins/skin-md-red.min.css, compress: true, sourceMap: false
/*
 * Skin: Material Red
 * -----------
 */
 @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-red: #f44336;
 .skin-red {
   //Navbar
   .main-header {
     .navbar {
       .navbar-variant(@md-red; #fff);
       .sidebar-toggle {
         color: #fff;
         &:hover {
           background-color: darken(@md-red, 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-red, 5%);
               }
             }
           }
         }
       }
     }
     //Logo
     .logo {
       .logo-variant(darken(@md-red, 5%));
     }
 
     li.user-header {
       background-color: @md-red;
     }
   }
 
   //Content Header
   .content-header {
     background: transparent;
   }
 
   //Create the sidebar skin
   .skin-dark-sidebar(@md-red);
 
   .main-sidebar{
     .user-panel{
         background: url(../../img/patterns/user-panel-bg_red.jpg) no-repeat;
     }
   }
   .sidebar-menu > li {
     > a {
       border-left: 3px solid transparent;
     }    
     &:hover > a, &.active > a {
       color: #FFF;
       background: @md-red;
       border-left-color: @md-red;
     }
   }
 
   .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-red;
   }
 
   .togglebutton {
     label {
       input[type=checkbox]:checked {
         + .toggle {
           background-color: fade(@md-red, 50%); // Switch bg on
         }
 
         + .toggle:after {
           background-color: @md-red; // Handle on
         }
 
         + .toggle:active:after {
           box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@md-red, 10%); // Ripple on
         }
       }
     }
   }
   .dropdown-menu {
     li {
       a:hover {
         color: @md-red;
       }
     }
   }
 
   .form-control,
   .form-group .form-control {
     background-image: linear-gradient(@md-red, @md-red), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
   }
 
   .form-group {
     &.is-focused {
       .form-control {
         background-image: linear-gradient(@md-red, @md-red), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
         
         .material-input:after {
           background-color: @md-red;
         }
       }
 
       label,
       label.control-label {
         color: @md-red;
       }
     }
   }
 
   .progress {
     .progress-bar {
         .variations(~".progress-bar", ~"", background-color, @md-red);
     }
   }
 
   .nav-tabs {
     background: @md-red;
   }
 
   .text-primary {
     color: @md-red;
   }
   .slider {
     .variations(~".slider", ~".noUi-connect", background-color, @md-red);
     .variations(~".slider", ~" .noUi-connect", background-color, @md-red);
     .variations(~".slider", ~" .noUi-handle", background-color, @md-red);
     .variations(~".slider", ~" .noUi-handle", border-color, @md-red);
   }
   .checkbox, label.checkbox-inline {
     input[type=checkbox] {
       &:checked {
         & + .checkbox-material .check {
           color: @md-red;
           border-color: @md-red;
         }
 
         & + .checkbox-material .check:before {
           color: @md-red;
         }
       }
     }
   }
   .radio, label.radio-inline {
     .check {
       background-color: @md-red;
     }
   }
 }