.b-bron{
  color: @color-light;
  margin-top: 15px;
  margin-bottom: 15px;
  &--overslider{
    margin-top: -48px;
    margin-bottom: 48px;
    /*
      margin-top: 0;
      transform: translateY(-50%);
    */
    &.container{
      max-width: 945px;
    }
  }
  &--filter{
    margin-top: 30px;
    margin-bottom: 30px;
  }
  position: relative;
  &__frame{
    background: linear-gradient(119deg, #e6761c 0%,#f79100 100%);
    //background: red;
    padding: 10px 0 18px;
  }

  &__title.col-12{
    font-size: 18px;
    line-height: 20px;
    margin: 5px 0 0px;    //padding: 0 0 10px;
  }
  &__suptitle{
    letter-spacing: 0.45px;
    font-weight: 500;
  }
  &__subtitle{
    font-size: 12px;
    letter-spacing: 0.3px;
  }
  &__form{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 15px;
    *>{
      //padding:0;
    }
  }
  &__element{
    //flex-grow: 1;
    height: 40px;
    //width: (100% / 3);
    //margin: 0 8px;
    //margin: 5px -7px 0px;
    //margin: 5px 0 0px;
    margin: 0 0 0px;
    .b-btn{
      padding:0;
      width: 100%;
      height: 40px;
      font-size: 13px;
    }
  }
  &__field{
    background: @color-light;
    color: @color-dark;
    position: relative;
    padding: 6px 10px 2px;
    &--submit{
      padding: 0;
    }
  }
  &__field--range{
    .mdl-textfield{
      padding:0;
      &__input{
        //height: 24px;
        padding: 11px 0 0px;
        font-size: 14px;
        line-height: 21px;
        font-weight: 500;
        div&{
          cursor: pointer;
        }
      }

      &__label{
        bottom: auto;
        top: 0;
        font-size: 11px;
        line-height: 11px;
        overflow: visible;
        &:after{
          bottom: -21px;
        }
      }
      &--floating-label{
        &.is-focused,&.is-dirty{
          .mdl-textfield__label{
            top: 0;
            overflow: visible;
            font-size: 11px;
            line-height: 11px;
          }
          input{
            color: @color-dark;
          }
        }

      }
      .mdl-button{
        color: @color-dark;
        &:hover{
          color: @main_hover;
        }
      }
    }
    .mdl-button--icon{
      position: absolute;right: -8px; top:-2px;

      .mi{
        line-height: 32px;
        font-size: 18px;
      }
    }

    .mdl-textfield--floating-label.is-focused .mdl-textfield__label{
    }
  }
  &__label{
    font-size: 11px;
    line-height: 11px;
  }
  &__value{
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
  }
  &__picker.mi{
    position: relative;
    line-height: 28px;
    font-size: 18px;
    float: right;
    &:hover{
      color: @color-orange-hover;
    }
  }

  &__range{
    &-title{
      font-size: 13px;
      font-weight: 300;
      margin: -10px 0 10px;
    }
    &-label{
      background: url("../img/location_man.0.svg") repeat-x 0 50%;
      height: 22px; width: 15px;
      cursor: pointer;
      background-size: 15px 22px;
      &[data-value="2"]{width: 30px;}
      &[data-value="3"]{width: 45px;}
      &[data-value="4"]{width: 60px;}
      &[data-value="5"]{width: 75px;}
      &[data-value="6"]{width: 90px;}
      &[data-value="7"]{width: 105px;}
      &[data-value="8"]{width: 120px;}
      &[data-value="9"]{width: 135px;}
      &--chi{
        background: url("../img/chi.0.svg") repeat-x 0 50%;
        background-size: 15px 15px;
      }
    }
    &-value{
      //display: flex;
      &-overlays{
        position: relative;
        &:hover .b-bron__range-item{
          visibility: hidden;
          &:hover{
            visibility: visible;
          }
        }
      }
    }
    &-item{
      display: inline-block;
      margin: 0 .5ex 0 0;
    }
    &-item--overlay{
      position: absolute;
      left: 0;
      text-align: left;
      label{
        position: absolute;
        top:0;left:0;
      }
    }
    &-input{
      display: none;
    }
    &-input:checked + &-label{
      background: url("../img/location_man.1.svg") repeat-x 0 50%;
      background-size: contain;
      cursor: inherit;
      &--chi{
        background: url("../img/chi.1.svg") repeat-x 0 50%;
        background-size: 15px 15px;
      }
    }
  }
  &__textinput{
    border-style: none;
    width: 100%;
    padding: 11px 15px;
    font-size: 14px;
    font-weight: 400;
    line-height: 13px;
  }

  &--filter &__frame{
    padding: 0 15px 30px;
  }
  &--filter &__suptitle{
    margin: 30px 0 15px;
  }
  &--filter &__subtitle{
    font-size: 11px;
  }
  &--filter &__form{
    >:nth-child(10){
      // input{ width: 67%; }
    }

  }
}

@media(max-width: (@screen-tablet - 1)){
  .b-bron{
    &__title{
      &.col-md-3.col-lg-4{
        padding: 0 7.5px .5em;
      }
    }
    &__element{
      &.col-4.col-md-3{
        padding: 0 7.5px;
        &--first{padding-left: 0;}
        &--last{padding-right: 0;}
      }
    }

    &--filter &__subtitle{
      margin: 17px 0 -17px;
    }
    &--filter &__form{
      >:nth-child(10){
        input{ width: 66%; }
      }
      >:nth-child(11){ margin: 17px 0 0; max-width: 42%; } // last one 
    }

  }
}
@media(max-width: (@screen-smart - 1)){
  .b-bron{
    &__title{
      &.col-md-3.col-lg-4{
        padding: 0 0 .5em;
      }
    }
    &__form{
      flex-direction: column;
    }
    &__element{
      &.col-4.col-md-3{
        padding: 0 0;
        width: 100%;
        max-width: 100%;
      }
    }
    &__field{
      width: 100%;
      display: flex;
      justify-content: space-between;
      &--submit{
        text-align: center;
        background: transparent;
        .b-btn{
          width: auto;
          padding: 0 1em;
        }
      }
    }
    &__picker.mi{
      order:3;
      padding: 0 0 0 .5ex;
    }
    &__label, &__value{
      line-height: 28px;
      flex-grow: 1;
    }
    &__label{
      font-size: 14px;
      &:after{
        content:" :";
      }
    }
    &__value{
      text-align: right;
    }

    &--filter &__form{
      >:nth-child(10){
        input{ width: 100%; }
      }
      >*,
      >:nth-child(11){
        max-width: 100%; flex: 0 0 100%;
      }
    }
  }
}
@media(min-width: @screen-tablet){
  .b-bron{
    &__frame{
      padding: 23px 0 28px;
    }
  }
}

@media (min-width: @screen-tablet) {
  .b-bron{
    &--filter &__form{
      >:nth-child(1){order: 0;}
      >:nth-child(2){order: 1;}
      >:nth-child(3){order: 2;}
      >:nth-child(4){
        order: 3;
        //order: 0;
        align-self: center;
      }
      >:nth-child(5){
        order: 3;
      }
      >:nth-child(6){
        order: 5;
      }
      >:nth-child(7){
        order: 6;
      }
      >:nth-child(8){
        order: 9;
      }
      >:nth-child(9){
        order: 4;
      }
      >:nth-child(10){
        order: 8;
      }
      >:nth-child(11){
        order: 10;
      }
    }
  }
}

@media (min-width: @screen-desktop) {
  .b-bron{
    &--filter &__frame{
      padding: 0 15px 15px;
    }
    &--filter &__form{
      >:nth-child(1){ order: 0; max-width: 40%; flex: 0 0 40%;} // date 
      >:nth-child(2){ order: 3; max-width: 20%; flex: 0 0 20%; align-self: flex-end;} // date  1 input 
      >:nth-child(3){ order: 4; max-width: 20%; flex: 0 0 20%; align-self: flex-end;} // date  2 input 
      >:nth-child(4){ order: 8; max-width: 40%; flex: 0 0 40%; margin: 2em 0;} // dates caption 

      >:nth-child(5){ order: 1; max-width: 40%; flex: 0 0 40%;} // count title 
      >:nth-child(6){ order: 5; max-width: 24%; flex: 0 0 24%;} // range 1 
      >:nth-child(7){ order: 6; max-width: 16%; flex: 0 0 16%;} // range 2 
      >:nth-child(8){ order: 9; max-width: 40%; flex: 0 0 40%; margin: 2em 0;} // range 2 

      >:nth-child(9){ order: 2; max-width: 20%; flex: 0 0 20%;} // age 
      >:nth-child(10){order: 7; max-width: 20%; flex: 0 0 20%; align-self: flex-end;
        input{
          width: 100%;
        }
      } // age input 
      >:nth-child(11){ order: 10; max-width: 20%; flex: 0 0 20%; margin: 2em 0 0;} // age caption 
    }
    &__range-value{
      height: 30px;
      margin: 0 0 -8px;
    }
    &__range-label--chi{
      margin: 0;
      height: 22px;
    }
  }
}