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