.searchsubmit {
  &:not(:disabled) {
    .mat-icon {
      &:hover {
        color: $ochre;
      }
    }
  }
}

.error-container {
  border: 2px solid $input-error-border-color !important;
  margin-bottom:2rem !important;
}

.error-container-text {
  color: $input-error-border-color !important;
  font-weight: bold;
  font-size: 0.875rem;
  padding-top: 5px;

  min-height: 2rem;

  position :absolute;
  top:100%;
  left:0;

  & span {
    width:1000px;

    @media print, (max-width:1310px) {
      width: 900px;
    }

    @media print, (max-width:1010px) {
      width: 720px;
    }
    @media print, (max-width:887px) {
      width: 620px;
    }
    @media print, (max-width:750px) {
      width: 550px;
    }
  }
}


.main-search-form {
  background-color: $white;
  border: 1px solid $input-border-color;
  margin-bottom :0 !important;
  position: relative;

  &:focus-within {
    border: 1px solid $ochre;
  }

  input {
    border-left: none;
    border-top: none;
    border-bottom: none;
    border-right: none;
    width: 85%;

    &:focus {
      border: none;
      box-shadow: none;
    }
  }

  select {
    border-right: none;
    border-top: 1px solid $grey-1;
    border-bottom: none;
    border-left: none;
    width:85%;

    &:focus {
      border: none;
      border-top: 1px solid $grey-1;
      box-shadow: none;
    }
  }

  button {
    position:absolute;
    top: 0.75rem;
    right:0.5rem;
  }
}

.form-control {
  &:disabled {
    background-color: $white;
    opacity: 1;
    color: $grey-2;
  }

}

.pb-6{
  padding-bottom: 6rem !important;
}

@media print,(max-width:575px)
{
  .searchsubmit{
    width: auto;
  }
}

@media print,(min-width:576px) {
  .main-search-form {
    input {
      width: 88%;
    }

    select {
      width: 88%;
    }
    button {
      top:1.25rem;
      right:1rem;
    }
  }
}

@media print,(min-width:768px) {
  .main-search-form {
    input {
      width: 300px;
    }
    &.error-container {
      input {
        width: 300px;
      }
    }

    select {
      width: auto;
      border-top:none;
      border-left: 1px solid $grey-1;

      &:focus {
        border: none;
        border-left: 1px solid $grey-1;
        box-shadow: none;
      }
    }
    button {
      position: relative;
      top:auto;
      right:auto;
    }
  }
}

@media print,(min-width:992px) {
  .main-search-form {
    input {
      width: 500px;
    }
    &.error-container {
      input {
        width: 498px;
      }
    }
  }
}

@media print,(min-width:1310px) {
  .main-search-form {
    input {
      width: 600px;
    }

    &.error-container {
      input {
        width: 598px;
      }
    }
  }
}