.tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}