body,
* {
  margin: 0;
  padding: 0;
}

.search-input:focus {
  outline: none;
  border-color: #14466c;
}

#searchForm {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

@media (min-width: 1080px) {
  .container-tabla {
    width: 95%;
    margin-top: 7%;
    overflow-x: none;
  }

  .container-tabla {
    width: 90%;
    padding: 10px;
  }

  .input-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 30%;
    padding: 15px;
    margin-right: 5px;
    margin-bottom: 20px;
    border: 2px solid #7b9ec3;
    font-size: 16px;
    border-radius: 10px;
    background-color: #f9f9f9;
  }
  .search-input {
    width: 90%;
    border: none;
    font-size: 16px;
    background-color: #f9f9f9;
  }
  .clear-btn {
    display: none;
    cursor: pointer;
    color: #b32424;
  }
}

@media (min-width: 600px) and (max-width: 1079px) {
  .container-tabla {
    width: 95%;
    margin-top: 15%;
    overflow-x: auto;
  }

  .container-tabla {
    width: 90%;
    padding: 15px;
  }

  .input-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 40%;
    padding: 10px;
    margin-right: 5px;
    margin-bottom: 20px;
    border: 2px solid #7b9ec3;
    font-size: 16px;
    border-radius: 10px;
    background-color: #f9f9f9;
  }
  .search-input {
    width: 90%;
    border: none;
    font-size: 16px;
    background-color: #f9f9f9;
  }
  .clear-btn {
    display: none;
    cursor: pointer;
    color: #b32424;
  }
}

@media (max-width: 599px) {
  .container-tabla {
    width: 95%;
    margin-top: 25%;
    overflow-x: auto;
  }

  .container-tabla {
    width: 95%;
    padding: 10px;
  }

  .input-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 60%;
    padding: 10px;
    margin-right: 5px;
    margin-bottom: 20px;
    border: 2px solid #7b9ec3;
    font-size: 16px;
    border-radius: 10px;
    background-color: #f9f9f9;
  }
  .search-input {
    width: 90%;
    border: none;
    font-size: 16px;
    background-color: #f9f9f9;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  }
  .search-input::placeholder {
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  }
  .clear-btn {
    display: none;
    cursor: pointer;
    color: #b32424;
  }
}

@media (min-width: 600px) and (max-width: 1079px) and (orientation: landscape) {
  .container-tabla {
    width: 95%;
    margin-top: 15%;
    overflow-x: auto;
  }

  .container-tabla {
    width: 90%;
    padding: 0 15px;
  }

  .input-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 40%;
    padding: 10px;
    margin-right: 5px;
    margin-bottom: 20px;
    border: 2px solid #7b9ec3;
    font-size: 16px;
    border-radius: 10px;
    background-color: #f9f9f9;
  }
  .search-input {
    width: 90%;
    border: none;
    font-size: 16px;
    background-color: #f9f9f9;
  }
  .clear-btn {
    display: none;
    cursor: pointer;
    color: #b32424;
  }
}