/* -- import Roboto Font ---------------------------- */
@import "https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic";

/* -- import Material Icons Font -------------------- */
@font-face {
    font-family: 'Material Design Iconic Font';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/Material-Design-Iconic-Font.eot?v=1.0');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/Material-Design-Iconic-Font.eot?#iefix&v=1.0') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/Material-Design-Iconic-Font.woff?v=1.0') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/Material-Design-Iconic-Font.ttf?v=1.0') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/Material-Design-Iconic-Font.svg?v=1.0#Material-Design-Iconic-Font') format('svg');
    font-weight: normal;
    font-style: normal;
}

 /* // For more information about Material Design Iconic Font (examples and downloads) visit website: https://zavoloklom.github.io/material-design-iconic-font/*/

[class^="md-"], [class*=" md-"] {
    display: inline-block;
    font: normal normal normal 14px/1 'Material Design Iconic Font';
    font-size: inherit;
    speak: none;
    text-rendering: auto;
    /*// Better Font Rendering -webkit-font-smoothing: antialiased;*/
    -moz-osx-font-smoothing: grayscale;
}

.md {
    line-height: inherit;
    vertical-align: bottom;
}

.md-inbox:before {
    content: "\f10c";
}

.md-star:before {
    content: "\f2e5";
}

.md-send:before {
    content: "\f119";
}

.md-drafts:before {
    content: "\f107";
}

.md-arrow-back:before {
    content: "\f297";
}

.md-arrow-forward:before {
    content: "\f298";
}

/* -- You can use this sidebar in Bootstrap (v3) projects. HTML-markup like Navbar bootstrap component will make your work easier. -- */
// @import "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css";
/* -- Box model ------------------------------- */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* -- Demo style ------------------------------- */
html, body {
    position: relative;
    min-height: 100%;
    height: 100%;
}

body {
    font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.4;
    color: #212121;
    background-color: #f5f5f5;
    // Font Rendering -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.sidebar-overlay {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    background: #000;
    z-index: @zindex-sidebar-fixed - 1;
    -webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
    -moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
    transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

    .sidebar-overlay.active {
        opacity: 0.5;
        visibility: visible;
        -webkit-transition-delay: 0;
        -moz-transition-delay: 0;
        transition-delay: 0;
    }

.top-bar {
    height: 25px;
    background: rgba(0, 0, 0, 0.1);
}

/* -- Google typography ------------------------------- */
.headline {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.1;
    color: #212121;
    text-transform: inherit;
    letter-spacing: inherit;
}

.subhead {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.1;
    color: #212121;
    text-transform: inherit;
    letter-spacing: inherit;
}

/* -- Bootstrap-like style ------------------------------- */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.dropdown-menu {
    display: none;
}

/* -- Constructor style ------------------------------- */
.constructor {
    position: relative;
    margin: 0;
    padding: 0 50px;
    .transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1));
}

// Positioning layout: default
.sidebar, .wrapper {
    display: table-cell;
    vertical-align: top;
}

// Positioning layout: stacked
.sidebar-stacked.open + .wrapper .constructor {
    margin-left: @sidebar-desktop-width;
}

@media (max-width: @screen-tablet) {
    .sidebar-stacked.open + .wrapper .constructor {
        margin-left: @sidebar-width;
    }
}


// Base variables
// --------------------------------------------------
@screen-tablet: 768px;

@gray-darker: #212121; // #212121 - text
@gray-dark: #757575; // #757575 - secondary text, icons
@gray: #bdbdbd; // #bdbdbd - hint text
@gray-light: #e0e0e0; // #e0e0e0 - divider
@gray-lighter: #f5f5f5; // #f5f5f5 - background

// Pink Material Colors
@pink-50: #fce4ec;
@pink-100: #f8bbd0;
@pink-200: #f48fb1;
@pink-300: #f06292;
@pink-400: #ec407a;
@pink-500: #e91e63;
@pink-600: #d81b60;
@pink-700: #c2185b;
@pink-800: #ad1457;
@pink-900: #880e4f;
@pink-A100: #ff80ab;
@pink-A200: #ff4081;
@pink-A400: #f50057;
@pink-A700: #c51162;

// Base mixins
// --------------------------------------------------
.clearfix() {
    &:before, &:after

{
    content: " ";
    // 1 display: table;
    // 2
}

&:after {
    clear: both;
}

}

.text-overflow() {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.translate3d(@x; @y; @z) {
    -webkit-transform: translate3d(@x, @y, @z);
    transform: translate3d(@x, @y, @z);
}

.transition(@transition) {
    -webkit-transition: @transition;
    -o-transition: @transition;
    transition: @transition;
}

.box-shadow(@shadow) {
    -webkit-box-shadow: @shadow;
    // iOS <4.3 & Android <4.1 box-shadow: @shadow;
}

.background-size(@background-size) {
    -webkit-background-size: @background-size;
    -moz-background-size: @background-size;
    -o-background-size: @background-size;
    background-size: @background-size;
}

/* -- Sidebar style ------------------------------- */

// Sidebar variables
// --------------------------------------------------
@zindex-sidebar-fixed: 1035;

@sidebar-desktop-width: 280px;
@sidebar-width: 240px;


@sidebar-padding: 16px;
@sidebar-divider: @sidebar-padding/2;

@sidebar-nav-height: 48px;

@sidebar-icon-width: 40px;
@sidebar-icon-size: 20px;

@sidebar-badge-size: @sidebar-nav-height/2;
@sidebar-badge-font-size: 10px;

@sidebar-brand-color: @gray-dark;
@sidebar-icon-color: @gray-dark;
@sidebar-menu-color: @gray-darker;


@sidebar-font-weight: 500;

// Sidebar mixins
// --------------------------------------------------

// Sidebar horizontal block
//
// This settings will extended by .sidebar-text, .sidebar-brand and .sidebar-nav > li > a
.sidebar-block() {
    display: block;
    height: @sidebar-nav-height;
    line-height: @sidebar-nav-height;
    padding: 0;
    padding-left: @sidebar-padding;
    padding-right: (@sidebar-padding + @sidebar-badge-size) + @sidebar-padding;
    text-decoration: none;
    clear: both;
    font-weight: @sidebar-font-weight;
    .text-overflow();
    .transition(all .2s ease-in-out);
    &:hover, &:focus

{
    .box-shadow(none);
    outline: none;
}

// positioning caret in sidebar block
.caret {
    position: absolute;
    right: @sidebar-padding + @sidebar-badge-size/2 - 4px;
    // caret centered by badge position;
    4px - caret width top: @sidebar-nav-height/2;
}

// positioning badge in sidebar block
.sidebar-badge {
    position: absolute;
    right: @sidebar-padding;
    top: (@sidebar-nav-height - @sidebar-badge-size)/2;
}

}

// Sidebar design template
//
// You can make own sidebar style with this template
.sidebar-template( @color, @bg, @header-bg, @brand-color, @brand-bg, @brand-hover-color, @brand-hover-bg, @divider, @badge-color, @badge-bg, @icon-color, @icon-hover-color, @link-color, @link-bg, @link-hover-color, @link-hover-bg, @link-active-color, @link-active-bg, @link-disabled-color, @link-disabled-bg ) {
    background-color: @bg;
    .sidebar-header

{
    background-color: @header-bg;
}

.sidebar-toggle {
    color: @brand-hover-color;
    background-color: transparent;
}

.sidebar-brand {
    color: @brand-color;
    background-color: @brand-bg;
    &:hover, &:focus

{
    color: @brand-hover-color;
    background-color: @brand-hover-bg;
}

}

.sidebar-badge {
    color: @badge-color;
    background-color: @badge-bg;
}

.sidebar-divider, .sidebar-nav .divider {
    background-color: @divider;
}

.sidebar-text {
    color: @color;
}

.sidebar-nav {
    li > a

{
    color: @link-color;
    background-color: @link-bg;
    i

{
    color: @icon-color;
}

}

li:hover > a, li > a:hover {
    color: @link-hover-color;
    background-color: @link-hover-bg;
    i

{
    color: @icon-hover-color;
}

}

li:focus > a, li > a:focus {
    color: @link-color;
    background-color: @link-bg;
    i

{
    color: @icon-hover-color;
}

}

> .open > a {
    &, &:hover, &:focus

{
    color: @link-hover-color;
    background-color: @link-hover-bg;
}

}

> .active > a {
    &, &:hover, &:focus

{
    color: @link-active-color;
    background-color: @link-active-bg;
}

}

> .disabled > a {
    &, &:hover, &:focus

{
    color: @link-disabled-color;
    background-color: @link-disabled-bg;
}

}

> li > .ink {
    //background: #80d8ff;
    //opacity: 0.5;
}

// Dropdown menu items > .dropdown {
    // Remove background color from open dropdown > .dropdown-menu

{
    background-color: @link-hover-bg;
    > li > a

{
    &:focus

{
    background-color: @link-hover-bg;
    color: @link-hover-color;
}

&:hover {
    background-color: darken(@link-hover-bg, 7%);
    color: @link-hover-color;
}

}

> .active > a {
    &, &:hover, &:focus

{
    color: @link-active-color;
    background-color: @link-active-bg;
}

}
}
}
}
}

//
// Sidebars
// --------------------------------------------------

// Wrapper and base class
//
// Provide a static sidebar from which we expand to create other sidebar variations.
.sidebar {
    position: relative;
    display: block;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border: none;
    .transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1));
    // Prevent floats from breaking the sidebar // &:extend(.clearfix all);
    .clearfix();
    // Scrollbar style for webkit browsers &::-webkit-scrollbar-track

{
    border-radius: 2px;
}

&::-webkit-scrollbar {
    width: 5px;
    background-color: #F7F7F7;
}

&::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #BFBFBF;
}

}

// Sidebar Elements
//
// Basic style of sidebar elements
.sidebar {
    / /** Sidebar heading
  //----------------
  .sidebar-header {
    position: relative;
    height: @sidebar-desktop-width * 9/16; // 16:9 header dimension
    margin-bottom: @sidebar-divider;
    .transition(all .2s ease-in-out);

    // Brand/project cover
    // Addition class for sidebar header
    &.header-cover {
      background-repeat: no-repeat;
      background-position: center center;
      .background-size(cover);
    }

    &:hover {
      .sidebar-toggle {
        opacity: 1;
      }
    }
  }

  //** Sidebar toggle
  //
  // You can bind click on this button and toggle sidebar via javascript
  .sidebar-toggle {
    position: relative;
    float: right;
    margin: @sidebar-padding;
    padding: 0;
    background-image: none; // Reset unusual Firefox-on-Android default style;
    border: none;
    height: @sidebar-icon-width;
    width: @sidebar-icon-width;
    font-size: @sidebar-icon-size;
    opacity: 0.7;
    .transition(all .2s ease-in-out);
    .clearfix();
  }

  //** Sidebar arrow
  //----------------
  .icon-material-sidebar-arrow:before {
    content: "\e610"; // icon-material-arrow-back
  }

  //** Brand/project image
  //
  // In google guideline used for user profile image
  .sidebar-image {
    img {
      width: @sidebar-desktop-width/4 - @sidebar-padding;
      height: @sidebar-desktop-width/4 - @sidebar-padding;
      margin: @sidebar-padding;
      border-radius: 50%;
      .transition(all .2s ease-in-out);
    }
  }

  //** Brand/project name
  //
  // In google guideline used for email dropdown
  .sidebar-brand {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    .sidebar-block();

    &:hover,
    &:focus {
      text-decoration: none;
    }
  }

  //** Sidebar badge
  //----------------
  .sidebar-badge {
    display: inline-block;
    min-width: @sidebar-badge-size;
    height: @sidebar-badge-size;
    line-height: @sidebar-badge-size;
    padding: 0 3px;
    font-size: @sidebar-badge-font-size;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    &.badge-circle {
      border-radius: 50%;
    }
  }

  //** Sidebar divider
  //----------------
  .sidebar-divider, .sidebar-nav .divider {
    position: relative;
    display: block;
    height: 1px;
    margin: @sidebar-divider 0;
    padding: 0;
    overflow: hidden;
  }

  //** Sidebar text
  //----------------
  .sidebar-text {
    .sidebar-block();
  }

  //** Sidebar icons
  //----------------
  .sidebar-icon {
    display: inline-block;
    margin-right: @sidebar-padding;
    min-width: @sidebar-icon-width;
    width: @sidebar-icon-width;
    text-align: left;
    font-size: @sidebar-icon-size;

    &:before, &:after {
      vertical-align: middle;
    }
  }
}



// Sidebar navigation class
// ------------------------
.sidebar .sidebar-nav {
  margin: 0;
  padding: 0;

  //** Links
  //----------------
  li {
    position: relative;
    list-style-type: none;

    a {
      position: relative;
      cursor: pointer;
      user-select: none;
      .sidebar-block();

      &:hover {
        background: transparent;
      }
    }
  }

  //** Dropdown menu
  //----------------
  .dropdown-menu {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    .box-shadow(none);
  }
}

// Sidebar color theme variations
//
// ------------------------
.sidebar-default {
  .sidebar-template(
  @color: @gray-darker,
  @bg: #fff,
  @header-bg: #eceff1,
  @brand-color: @gray-dark,
  @brand-bg: transparent,
  @brand-hover-color: @gray-darker,
  @brand-hover-bg: rgba(0, 0, 0, 0.10),
  @divider: @gray,
  @badge-color: #fff,
  @badge-bg: @gray,
  @icon-color: @gray-dark,
  @icon-hover-color: @gray-dark,
  @link-color: @gray-darker,
  @link-bg: transparent,
  @link-hover-color: @gray-darker,
  @link-hover-bg: @gray-light,
  @link-active-color: @gray-darker,
  @link-active-bg: @gray-light,
  @link-disabled-color: @gray-light,
  @link-disabled-bg: transparent
  );
}
.sidebar-inverse {
  .sidebar-template(
  @color: @gray-lighter,
  @bg: @gray-darker,
  @header-bg: #eceff1,
  @brand-color: @gray-dark,
  @brand-bg: transparent,
  @brand-hover-color: @gray-darker,
  @brand-hover-bg: rgba(0, 0, 0, 0.10),
  @divider: @gray,
  @badge-color: @gray-darker,
  @badge-bg: @gray-light,
  @icon-color: @gray,
  @icon-hover-color: @gray,
  @link-color: @gray-lighter,
  @link-bg: transparent,
  @link-hover-color: @gray,
  @link-hover-bg: #000,
  @link-active-color: @gray-lighter,
  @link-active-bg: #000,
  @link-disabled-color: @gray-dark,
  @link-disabled-bg: transparent
  );
}
.sidebar-colored {
  .sidebar-template(
  @color: @gray-darker,
  @bg: #fff,
  @header-bg: @pink-500,
  @brand-color: @gray-light,
  @brand-bg: transparent,
  @brand-hover-color: @gray-lighter,
  @brand-hover-bg: rgba(0, 0, 0, 0.10),
  @divider: @gray,
  @badge-color: #fff,
  @badge-bg: @pink-400,
  @icon-color: @gray-dark,
  @icon-hover-color: @pink-300,
  @link-color: @gray-darker,
  @link-bg: transparent,
  @link-hover-color: @pink-500,
  @link-hover-bg: @gray-light,
  @link-active-color: @gray-darker,
  @link-active-bg: @gray-lighter,
  @link-disabled-color: @gray-light,
  @link-disabled-bg: transparent
  );
}
.sidebar-colored-inverse {
  .sidebar-template(
  @color: @gray-light,
  @bg: @pink-500,
  @header-bg: #eceff1,
  @brand-color: @gray-dark,
  @brand-bg: transparent,
  @brand-hover-color: @gray-darker,
  @brand-hover-bg: rgba(0, 0, 0, 0.10),
  @divider: @gray,
  @badge-color: @gray-darker,
  @badge-bg: @gray-light,
  @icon-color: @gray-light,
  @icon-hover-color: @gray-lighter,
  @link-color: @gray-lighter,
  @link-bg: transparent,
  @link-hover-color: @gray-lighter,
  @link-hover-bg: rgba(0, 0, 0, 0.10),
  @link-active-color: @gray-lighter,
  @link-active-bg: rgba(0, 0, 0, 0.20),
  @link-disabled-color: @gray,
  @link-disabled-bg: transparent
  );
}

// Sidebar toggling
//
// Hide sidebar
.sidebar {
  width: 0;
  .translate3d(-@sidebar-desktop-width, 0, 0);

  &.open {
    min-width: @sidebar-desktop-width;
    width: @sidebar-desktop-width;
    .translate3d(0, 0, 0);
  }
}

// Sidebar positions: fix the left/right sidebars
.sidebar-fixed-left,
.sidebar-fixed-right,
.sidebar-stacked {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: @zindex-sidebar-fixed;
}
.sidebar-stacked {
  left: 0;
}
.sidebar-fixed-left {
  left: 0;
  box-shadow: 2px 0px 15px rgba(0,0,0,0.35);
  -webkit-box-shadow: 2px 0px 15px rgba(0,0,0,0.35);
}
.sidebar-fixed-right {
  right: 0;
  box-shadow: 0px 2px 15px rgba(0,0,0,0.35);
  -webkit-box-shadow: 0px 2px 15px rgba(0,0,0,0.35);

  .translate3d(@sidebar-desktop-width, 0, 0);
  &.open {
    .translate3d(0, 0, 0);
  }
  .icon-material-sidebar-arrow:before {
    content: "\e614"; // icon-material-arrow-forward
  }
}

// Sidebar size
//
// Change size of sidebar and sidebar elements on small screens
@media (max-width: @screen-tablet) {
  .sidebar.open {
    min-width: @sidebar-width;
    width: @sidebar-width;
  }

  .sidebar .sidebar-header {
    height: @sidebar-width * 9/16; // 16:9 header dimension
  }

  .sidebar .sidebar-image {
    img {
      width: @sidebar-width/4 - @sidebar-padding;
      height: @sidebar-width/4 - @sidebar-padding;
    }
  }
}