/* -- 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;
    }
  }
}