//@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/*@import url('https://fonts.googleapis.com/css?family=@font-roboto:300,500,700|@font-ubuntu');*/

@main_color: #2c2b2a;
@main_hover: @color-orange;//darken(@main_color, 20%);
@main_error: #c6122e;
@text_light: @color-grey;
@text_orange: #e97a18;
@text_link: #e86d00;
@light_link: #232323;
@text_middle: @main_color;

@color-orange: #e67600;
@color-orange-hover: #e37000;
@color-grey: #8a8a8a;
@color-black: #000000;
@color-dark: @main_color;
@color-light: #FFFFFF;
@color-grey: #919191;
@color-greybg: #d8d8d8;

@font-ubuntu: 'Ubuntu', 'iskra', sans-serif;//,
@font-roboto: 'Roboto', 'iskra', sans-serif;//,

@color-ogra: linear-gradient(45deg, #f69d28 0%,#ea7c19 100%);
@color-ogra90: linear-gradient(180deg, #cb6000 0%,#fb9a00 100%);
@color-ogra29: linear-gradient(119deg, #e6761c, #f79100);

@screen-large: 1200px;
@screen-desktop: 992px;
@screen-tablet: 768px;
@screen2: 640px;
@screen-smart: 480px;
@screen-mobile: 360px;
@screen-feature: 320px;

@url_logo_white: '../img/logo_236_white.png';

.shadow(){
  box-shadow: 0 0 21px rgba(0, 0, 0, 0.28);
}

a{
  color: @main_color;
  &:hover{
    color: @main_hover;
  }
  @media(max-width: (@screen-desktop - 1)){
    text-decoration: underline;
    footer &,header &{
      text-decoration: none;
    }
  }
}
h2{
  font-family: @font-ubuntu;
  font-size: 18px;
  font-weight: 400;
}
body{
  font-family: @font-roboto;
  font-size: 14px;
}

.b--small{
  font-size: 10pt !important;
}

.b-ovalbutton{
  border-radius: 15px;
  display: block; text-align: center;
  height:29px; line-height:29px; padding: 0 12px;
  white-space: nowrap;
  &:hover{cursor: pointer;}
  &--dark{
    background: @color-dark;
  }
  &--ogra{
    background: @color-ogra;
    color: @color-light;
    &:hover{
      background: @color-orange-hover;
    }
  }
  .mi{
    width:20px;
  }
}

.b-btn{
  font-size: 15px;
  line-height: 21px;
  padding:15px;
  border: none;
  a&{
    display: inline-block;
  }
  &,&--orange{
    background: @color-orange;
    /*background: @color-ogra29;*/
    color: @color-light;
    &:hover,a&:hover{
      background: @color-orange-hover;
      color: @color-light;
      box-shadow: 0 0 14px rgba(0, 0, 0, 0.28);
      text-decoration: none;
    }
  }
  &--grey{
    background: @color-greybg;
    color: @color-dark;
    &:hover,a&:hover{
      background: @color-greybg;
      color: @color-dark;
      box-shadow: 0 0 7px rgba(0, 0, 0, 1);
    }
  }
  &--dark{
    background: @color-dark;
    color: @color-light;
    &:hover,a&:hover{
      background: @color-dark;
      color: @color-light;
    }
  }
  &--slimm{
    padding:0 1.5em;
    /*margin:0 1ex;*/
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    a&{
      line-height: 40px;
    }
  }
  &--noborder{
    padding-left:0;
    padding-right:0;
  }
  &--space{
    background: transparent;
    color: @color-dark;
    text-decoration: underline;
    &:hover,a&:hover{
      color: @color-dark;
      background: transparent;
      box-shadow: none;
      color: @main_hover;
      text-decoration: underline;
    }
  }
}

.mi{
  &-fiber_new:before{
    content: "\e05e";
  }
  &-local_drink:before{
    content: "\e544";
  }
}

.b-title{
  font-family: @font-ubuntu;
  font-size: 24px;
  font-weight: 400;
  line-height: 22px;
  padding: 15px 0;
  text-align: center;
}

.i-textarea{
  min-height: 34px;
}
.mdl-textfield{
  &__label{
    font-size:13px;
    color: @color-grey;
    &:after{
      background: #ff9001;
    }
  }
  &:not(.is-dirty):hover input[value=""]{ /**/
    color:transparent;
  }
  &.is-focused input,&:not(.is-dirty).is-focused:hover input{
    color: #ff9001;
  }
  /*input:not([value=""])+label{
    color: green;
  }*/
}

div[id^=wait_] {
  background: #e67600b3 !important;
  border-radius: 50%;
  //width: 45px;
  //height: 45px;
  font-size: 0 !important;
  padding: 0px !important;
  animation: fa-spin 1s infinite linear;

}
div[id^=wait_]:before{
  font: normal normal normal 25px/1 'Material Icons';
  content: "\e863";
  color: #FFFFFF;
  text-shadow: 0 0 1px #000;
}
div.waitwindow,#wait_window_div{
  width: auto;
}

.mdl-checkbox__input[required] ~ .mdl-textfield__error{
  visibility: visible;
}