html {
  font-family: sans-serif;
}

.container {
  width: 100%;
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
}

@media screen and(max-width: 991px) {
  .container {
    padding-right: 30px;
    padding-left: 30px;
  }
}

.is-size-5 {
  font-size: 1.25rem !important;
}

.mb-5 {
  margin-bottom: 1.5rem !important;
}

.input {
  background-color: #fff;
  border-color: #dbdbdb;
  border-radius: 4px;
  color: #363636;
  box-shadow: inset 0 0.0625em 0.125em rgb(10 10 10 / 5%);
  max-width: 100%;
  width: 100%;
  padding: 5px;
}

.products-section {
  
  max-width: 100%;
  max-height: 700px;
  margin: 0;
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  overflow-y: scroll;
 border-radius: 4px;
 border: 1px solid rgba(0, 0, 0, 0.125);

 
}

@media only screen and (min-width: 1200px) {
.products-section{
  max-height: 900px;
}

}


.products-card-container {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

.products-card {
margin-top: 10px;
margin-bottom: 10px;
  width: 300px;
  height: 360px;
  text-decoration: none;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.125);

}

.fade-in {
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.appear {
  opacity: 1
}

.top-card {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 7px;
  margin-top: 10px;
  width: 50%;
  padding: 2px;
}

img {
  vertical-align: middle;
  border-style: none;
  height: 145px;
  width: 145px;
  display: inline-block;
}

.card-info {
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 18px;
  align-items: center;
  color: #1b1b1b;
}

.card-title {
  text-align: center;
  padding: 1rem;
  margin: 0px;
  margin-block-end: 0%;
  margin-block-start: 0px;
  border-bottom: thin solid lightgray;
  color: #00558c !important;
  font-size: x-large;
  font-weight: 500;
  background-color: #e9ecef;
}

.button {
  border-radius: 4px;
  margin-right: auto;
  margin-left: auto;
  display: block;
  background: #e9ecef;
  white-space: nowrap;
  padding: 8px 18px;
  font-size: 17px;
  text-align: center;
  color: #00558c !important ;
  outline: none;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  font-weight: 500;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 6px, rgba(0, 0, 0, 0.22) 0px 3px 6px;
  transition: 0.5s;
}

.button:hover {
  font-size: 16.5px;
  box-shadow: none;
}

.button-2 {
  background: white;
  padding: none;
}

.no-replacement-button {
  font-size: large;
  margin: auto;
  font-weight: 500;
  text-align: center;
  margin-top: 10px;
}

i {
  color: #00558c !important;
}

.table td {
  color: #00558c !important;
  padding: 0.5px !important;
}

.no-display {
  padding: 13px;
}

.card-footer {
  border-top: thin solid lightgray;
}

/*.card-footer-bg {
  background: #e9ecef;
  padding: 27px 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.125);
}*/

.myBtn {
  
  margin-top: 10px;
  margin-left: 5px;
  padding: 10px;
  float: right;
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #00558c !important;
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
 
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}