@tableTextPrimaryColor: white;
@tableTextSecondaryColor: #91b9cd;

@inputBackgroundColor: #2c363f;
@inputPlaceholderColor: lightgray;

@hipaaRibbonBgColor: #151a1f;

#hipaaRibbon {
  background-color: @hipaaRibbonBgColor;
  border-bottom: solid 1px #6fbde2;
  color: @tableTextPrimaryColor; 
  margin: 0 0 2px;
  padding: 20px 5%;

  .filter {
    > span {
      font-size: 15px;
      display: block;
      padding: 5px;
    }

    min-height: 70px;

    &:first-child {
      padding-left: 0;
    }

    &:last-child {
      padding-right: 0;
    }

    &:not(:last-child) {
      padding-right: 0;
    }
  }

  input[type="date"] {
    padding-left: 10px;
  }

  select {
    display: inline-block;
  }

  input, select {
    height: 40px;
    padding: 20px;
    cursor: pointer;
    border: none;
    background-color: @inputBackgroundColor;
    color: @inputPlaceholderColor;
    font-size: 10pt;
    font-weight: normal;
    width: 100%;
    border-radius: 4px;
    box-sizing: border-box;

    transition: all 0.15s ease;
    -webkit-transition: all 0.15s ease;

    &:active, &:hover {
      background-color: @inputBackgroundColor;
    }
  }

  .btn-group {
    width: 100%;

    #hipaaSearchFilter{
      padding-right: 35px;
    }

    #searchClear {
      position: absolute;
      right: 14px;
      top: 0;
      bottom: 0;
      height: 14px;
      margin: auto;
      font-size: 14px;
      cursor: pointer;
      color: #ccc;
    }
  }
}


@media only screen and (max-width: 1161px) {
  #hipaaRibbon {
    padding: 20px 3%;
  }
}

@media only screen and (max-width: 991px) {
  #hipaaRibbon {
    padding: 20px 1%;
  }
}

@media only screen and (max-width: 767px) {
  #hipaaRibbon {
    .filter {
      &:first-child {
        padding-bottom: 15px;
      }

      &:nth-child(2) {
        padding-left: 0;
      }
    }
  }
}