@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');

#auctionList .auctionListFilter .vue-select .vue-input input {height: 40px;padding: 10px;font-size: 14px;}

#auctionList .auctionsWrap {font-family: Lato, sans-serif;}
#auctionList .auctionsWrap > .state {margin-bottom: 50px;}
#auctionList .auctionsWrap > .state h3 {color:#111111;font-size: 21px;font-weight: bold;margin: 0 0 20px 0;display: flex;gap:10px;align-items:center;}
#auctionList .auctionsWrap > .state h3 img {width: 30px;}
#auctionList .auctionsWrap > .state .auctions {border-radius: 6px;background-color: rgb(245, 248, 250);display: flex;gap:20px 10px;flex-wrap: wrap;padding: 30px;}
#auctionList .auctionsWrap > .state.no_data .auctions {justify-content: center;font-size: 16px;}
#auctionList .auctionsWrap > .state .auctions a {font-size: 18px;color: rgb(204, 41, 46);font-weight: bold;line-height: 1.778;text-decoration: none;flex: 0 0 32.8%;min-width: 400px;gap: 12px;padding-right: 10px;line-height: 1.4;position: relative;display: flex;}
#auctionList .auctionsWrap > .state .auctions a:hover {text-decoration: underline;color: #ff3340;}

#auctionList .auctionsWrap > .state .auctions a .vCount {flex-shrink: 0; background: #ccc;color: #fff;display: inline-block;text-align: center;border-radius: 5px;margin: 0;display: flex;align-items: center;width: 67px;color: #000;justify-content: center;height: 25px;}
#auctionList .auctionsWrap > .state .auctions a .vCount .material-design-icon {margin: 2px 4px 0 0;font-size: 14px;}
#auctionList .auctionsWrap > .state .auctions a .vCount .t {display: inline-flex;font-size: 14px;}

#auctionList .auctionsWrap > .state .auctions a:hover .vCount,
#auctionList .auctionsWrap > .state .auctions a:hover .vCount .t {text-decoration: none;}
#auctionList .vue-dropdown-item img {width:50px}

#auctionList .loader {text-align: center;}

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

#auctionList .lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
#auctionList .lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #cacaca transparent transparent transparent;
}
#auctionList .lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
#auctionList .lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
#auctionList .lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


#auctionList .auctionListFilter {margin-bottom: 50px;display: flex;gap: 50px;justify-content: center;}
#auctionList .auctionListFilter .line {position: relative;z-index: 2;}
#auctionList .auctionListFilter .line button {position: absolute;border: none;background: #999999;border-radius: 3px;top: 14px;right: 10px;padding: 0px 7px;color: #fff;z-index: 2;}
#auctionList .auctionListFilter .line .vue-select + button {right: 20px;}
#auctionList .auctionListFilter input {width: 300px;border:1px solid #999999;height: 50px;border-radius: 5px;padding: 10px;}
#auctionList .auctionListFilter .vue-select[aria-expanded="true"],
#auctionList .auctionListFilter input:focus {box-shadow: 0 0 10px rgb(0 0 0 / 20%);outline: none;}
#auctionList .auctionListFilter .vue-select {align-self: center;width: 300px;}

.list-move, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
    transition: all .2s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(10px);
}

/* ensure leaving items are taken out of layout flow so that moving
   animations can be calculated correctly. */
.list-leave-active {
  position: absolute;
}

.slide-up-enter-active {
  transition: all 0.3s ease-out;
}

.slide-up-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-up-enter-from,
.slide-up-leave-to {
  transform: translateY(10px);
  opacity: 0;
}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(-10px);
  opacity: 0;
}

@media (max-width: 1339px) {
    #auctionList .auctionsWrap > .state .auctions a {flex: 0 0 49%;min-width: auto;}
}
@media (max-width: 859px) {
    #auctionList .auctionsWrap > .state .auctions a {flex: 0 0 100%;}
}
@media (max-width: 669px) {
    #auctionList .auctionListFilter {flex-direction: column;justify-content: center;gap: 20px;align-items: center;}
}

#auctionList .stateFilter {border: 1px solid #999;
    border-radius: 4px;
    position: absolute;
    width: 100%;
    background: #fff;
    top: 0;
    z-index: 2;
}

#auctionList .title {position: relative;}
#auctionList .title a.closeSearch {position: absolute;left: 20px;top: -9px;font-size: 26px;background: #e8eef3;border-radius: 50px;width: 30px;height: 30px;}
#auctionList .title a.closeSearch .chevron-down-icon {transform: translate(2px, -2px);color: #484848;}
#auctionList .title h3 {font-size: 14px;text-align: center;font-weight: bold;    margin-top: 20px;margin-bottom: 10px;}

#auctionList .search {margin-bottom: 10px;padding: 20px;position: relative;}
#auctionList .search .material-design-icon {position: absolute;left: 30px;top: 30px;font-size: 26px;color: #484848;}
#auctionList .search input {width: 100%;border: none;height: 50px;padding: 10px;padding-left: 45px; border-radius: 5px;background: rgb(245, 249, 252);color: rgb(60, 74, 91);}
#auctionList .search input:hover {background-color: rgb(228, 234, 242);color: rgb(60, 74, 91);}
#auctionList .search input:focus {background: rgb(245, 249, 252);color: rgb(60, 74, 91);}

#auctionList .list {height: 400px;overflow: auto;}
#auctionList .list .item {padding: 5px;display: flex;align-items: center;gap: 10px;padding: 0 20px;height: 40px;cursor: pointer;}
#auctionList .list .item.selected,
#auctionList .list .item:hover {background: rgb(245, 249, 252);}
#auctionList .list .item img {width: 30px;}
#auctionList .list .item p {font-size: 14px;margin: 0;}