:root {
 --color-primary-1st: #2a363b;
 --color-primary-2nd: #364d57;
 --color-secondary-2: #cad2d8;
 --color-secondary-3: #f4f7f8;
 --color-secondary-4: #cbd2d8;
 --color-secondary-5: #e2e2e2;
 --color-secondary-6: #c1bb58;
 --color-secondary-7: #8d9698;
 --color-secondary-8: #f2f4f5;
 --color-secondary-9: #fff;
 --color-secondary-10: #5e727b;
 --color-secondary-11: #ff0015;
 --color-secondary-12: #fcee21;

 --color-secondary-13: #f2f5f4;
 --color-secondary-14: #b3b3b3;
 --color-secondary-15: #808080;
 --color-secondary-16: #666;

 --color-text: #1a1a1a;
 --padding-size: 0 9%;
}

.producer-filter-card {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 20px;
}

.producer-list {
 display: flex;
 align-items: center;
 width: 100%;
 gap: 20px;
 flex-wrap: wrap;
}

.producer-list-card {
 margin-top: 20px;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 width: 100%;
 grid-auto-rows: auto;
 gap: 20px;
}

.producer-list-card .producer {
 width: 100%;
 min-width: 200px;
}

.producer-card {
 position: relative;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 25px 5px 15px 5px;
 min-height: 313px;
 border: 1px solid #ccc;
 border-radius: 8px;
 cursor: pointer;
 transition: ease-in-out 0.5s;
}

.prod-footer-card {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

.producer-card:hover {
 background-color: #f2f4f5;
 transform: scale(1.05);
}

.producer-card-title {
 max-width: 190px;
 text-align: center;
 font-size: calc(14px + var(--font-size-changer));
 min-height: 2.7rem;
 font-weight: 600;
 color: var(--color-primary-1st);
 overflow: hidden;
 text-overflow: ellipsis;
 -webkit-line-clamp: 2;
 display: -webkit-box;
 -webkit-box-orient: vertical;
}

.producer-card-number {
 text-align: center;
 font-size: calc(16px + var(--font-size-changer));
 font-weight: 600;
 line-height: 20px;
}

.producer-card-number::after {
 display: block;
 content: " ";
 background-color: #f00;
 height: 5px;
 width: 27px;
}

.producer-card-data {
 max-width: 190px;
 font-size: calc(14px + var(--font-size-changer));
 font-weight: lighter;
}

select {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;

 background: url("data:image/svg+xml,<svg height='18px' width='18px' viewBox='0 0 20 20' fill='%23CCCCCC' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>")
  var(--color-secondary-13) no-repeat calc(100% - (100% - 10px)) !important; /* Better placement regardless of input width */
}

select::-ms-expand {
 display: none;
}

.select {
 height: 45px;
 border-radius: 8px;
 width: 100%;
 padding: 0px 12px !important;
 color: rgb(142, 141, 141);
}

.input-form:focus,
.input-form:active {
 border: none !important;
 box-shadow: none !important;
 outline: none !important;
}

.producer-filter-card .d-flex .flex-row:focus-within {
 outline: 1px solid var(--color-primary-2nd) !important;
 border-radius: 9px;
}

@media only screen and (max-width: 1440px) {
 .producer-list-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  /*    justify-content: center !important; */
 }
}

@media (min-width: 1200px) {
 .col-xl-2 {
  flex: 0 0 auto;
  width: 20%;
 }
}

@media only screen and (max-width: 1200px) {
 .reuse-filter-container {
  gap: 1rem;
  flex-wrap: wrap;
 }
}

@media only screen and (max-width: 992px) {
 .row {
  gap: 0px;
 }
 .producer-list-card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  /*    justify-content: center !important; */
 }
}

@media only screen and (max-width: 992px) {
 .row {
  gap: 0px;
 }

 @media only screen and (max-width: 520px) {
  .producer-list-card {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   width: 100%;
   /*    justify-content: center !important; */
  }
 }
}