#index {
  width: 100%;
  padding: clamp(10px, 3vw, 20px);
  color: var(--text-color);
}
#index > div:not(#pop-up, #user_parts) {
  width: 100%;
  display: grid;
  gap: clamp(10px, 3vw, 20px);
  grid-template-columns: clamp(300px, 19vw, 550px) 1fr clamp(300px, 19vw, 550px);
  grid-template-rows: auto;
  grid-template-areas: "left-window main right-window";
}
#index > #user_parts {
  width: 100%;
  display: grid;
  gap: clamp(10px, 3vw, 20px);
  grid-template-columns: clamp(320px, 19vw, 550px) 1fr clamp(320px, 19vw, 550px);
  grid-template-rows: auto 1fr;
  grid-template-areas: "left-upper-window main right-window" "left-lower-window main right-window";
}
#index > #user_parts > .sticky {
  position: sticky;
  top: clamp(10px, 3vw, 20px);
}
#index > div > .sticky {
  position: sticky;
  top: clamp(10px, 3vw, 20px);
}
@media (max-width: 1250px) {
  #index > div:not(#pop-up, #user_parts) {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    grid-template-areas: "main" "right-window" "left-window";
  }
  #index > #user_parts {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    grid-template-areas: "main" "left-upper-window" "left-lower-window" "right-window";
  }
  #index > #part_search {
    grid-template-areas: "left-window" "right-window" "main";
  }
  #index > div > .sticky {
    position: static;
  }
}

.main-table {
  width: 100%;
  grid-area: main;
  padding: 0 15px 15px;
  background-color: var(--background-darker);
  border-radius: 8px;
  height: -moz-fit-content;
  height: fit-content;
}
.main-table .header {
  display: flex;
  padding: 10px 0;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  background-color: var(--background-darker);
}
.main-table .header .go-back {
  background-color: var(--background-light);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: var(--text-color);
  padding: 0.5rem;
}
.main-table .header .go-back svg {
  width: 90%;
  height: auto;
  margin-left: 1px;
}
.main-table .header .go-back path {
  fill: var(--text-color-hover);
}
.main-table .header .go-back:hover {
  background-color: var(--background-darker-hover);
  cursor: pointer;
}
.main-table .header span {
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  opacity: 0.8;
}
.main-table .header .total-price {
  font-size: 1.5rem;
}
.main-table .try-again {
  color: var(--text-color);
  width: 100%;
  white-space: pre;
}
.main-table .try-again.hidden {
  display: none;
}
.main-table .try-again p:not(.inline) {
  display: inline;
  color: var(--orange);
  text-decoration: underline;
}
.main-table .try-again p:not(.inline):hover {
  cursor: pointer;
}
.main-table .try-again .inline {
  display: inline;
}

.window {
  background-color: var(--background-darker);
  border-radius: 8px;
  padding: 10px 15px 15px;
  color: var(--text-color);
  flex: 1;
  height: -moz-fit-content;
  height: fit-content;
}
.window .btn {
  transition: transform 0.2s;
}

.sticky-top {
  background-color: var(--background-darker);
  position: sticky;
  z-index: 1;
}
.sticky-top hr {
  display: block;
  color: var(--text-color);
  width: 100%;
  margin: 0;
  margin-top: 10px;
}

#user_parts {
  width: 100%;
}
#user_parts > div {
  max-width: calc(100vw - 2 * clamp(10px, 3vw, 20px));
}
#user_parts .comp {
  grid-area: left-upper-window;
}
#user_parts .comp h3 {
  margin-top: 10px;
  margin-bottom: -5px;
}
#user_parts .comp .empty {
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}
#user_parts .comp .empty svg {
  width: 90%;
  height: auto;
  margin-top: 5px;
  margin-bottom: 15px;
}
#user_parts .comp .empty svg path {
  fill: var(--background-light);
  stroke: var(--background-light);
}
#user_parts .comp .suggest {
  display: none;
  width: 100%;
  border: 1px solid var(--orange);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  font-weight: normal;
  text-decoration: none;
  color: var(--text-color);
  padding: 5px;
}
#user_parts .comp .suggest:hover {
  background-color: var(--orange);
}
#user_parts .comp .suggest:not(:last-child) {
  margin-bottom: 7px;
}
#user_parts .comp .missing {
  display: none;
}
#user_parts .comp .missing a {
  color: var(--text-color);
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  padding: 10px 8px;
  margin-top: 10px;
  background-color: var(--background-light);
}
#user_parts .comp .missing a:hover {
  background-color: var(--orange);
}
#user_parts .comp:hover .header, #user_parts .comp.mobile .header {
  color: var(--orange);
}
#user_parts .comp:hover .header path, #user_parts .comp:hover .header polygon, #user_parts .comp.mobile .header path, #user_parts .comp.mobile .header polygon {
  fill: var(--orange);
}
#user_parts .comp:hover .suggest, #user_parts .comp.mobile .suggest {
  display: flex;
}
#user_parts .comp:hover .missing, #user_parts .comp.mobile .missing {
  display: block;
}
#user_parts .comp .header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2%;
  margin-right: 5px;
}
#user_parts .comp .header svg {
  height: clamp(45px, 4.5vw, 60px);
  width: auto;
}
#user_parts .comp .header path {
  fill: var(--text-color);
}
#user_parts .comp .message {
  margin-top: 10px;
  background-color: var(--background-light);
  padding: 10px;
  padding-bottom: 5px;
  border-radius: 8px;
  border: 2px solid var(--background-light);
}
#user_parts .comp .message .name {
  line-height: 1.3rem;
  font-size: 1.2rem;
  color: var(--text-color);
  text-decoration: none;
}
#user_parts .comp .message .name:hover {
  color: var(--orange);
  text-decoration: underline;
}
#user_parts .comp .message p.sub {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 5px 0 5px 0;
  overflow: hidden;
  cursor: pointer;
}
#user_parts .comp .message p.sub:hover {
  color: var(--orange);
  opacity: 1;
}
#user_parts .partid-not-found {
  background-color: var(--background-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: var(--orange) 2px solid;
  border-radius: 8px;
  text-align: center;
  padding: 10px;
  color: var(--text-color);
  margin-top: 10px;
}
#user_parts .partid-not-found svg {
  height: 30px;
  width: auto;
  margin: 0 5px;
}
#user_parts .partid-not-found svg path {
  fill: var(--orange);
}
#user_parts .partid-not-found button {
  margin: 0 5px;
  border-radius: 8px;
  background: rgb(255, 86, 86);
  color: var(--text-color);
}
#user_parts .partid-not-found button.active {
  background: rgb(255, 121, 121);
}
#user_parts .partid-not-found button:hover {
  background: rgb(255, 100, 100);
}
#user_parts .header {
  padding-bottom: 0;
}
#user_parts .header > div {
  display: flex;
}
#user_parts .header button {
  width: 20px;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background-light);
  padding: 0;
}
#user_parts .header svg {
  width: 20px;
  height: auto;
}
#user_parts .header path {
  fill: var(--text-color);
}
#user_parts .header .total-price, #user_parts .header .title {
  transition: display 1s;
}
@media (min-width: 1300px) {
  #user_parts .header .total-price, #user_parts .header .title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
#user_parts .header .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
}
#user_parts .header .title svg {
  height: 30px;
  width: auto;
  cursor: pointer;
}
#user_parts .header .title path {
  fill: var(--orange);
}
#user_parts .header .btn {
  height: clamp(20px, 10vw, 40px);
  min-width: clamp(20px, 5.9vw, 30px);
  border-radius: 8px;
}
#user_parts .header .setSelect {
  gap: clamp(2px, 0.8vw, 5px);
}
#user_parts .header .setSelect > div {
  display: flex;
  gap: clamp(2px, 0.8vw, 5px);
}
#user_parts .header .setSelect span {
  opacity: 1;
  background-color: var(--background-light);
  display: inherit;
  padding: 5px;
  border-radius: 8px;
  color: var(--text-color);
}
#user_parts .header .setSelect span.active {
  border: 2px solid var(--orange);
}
#user_parts .header .setSelect.mobile span:hover {
  background-color: var(--orange);
}
#user_parts .header .addSet {
  width: auto;
  justify-content: left;
}
#user_parts .header .addSet:hover {
  background-color: var(--orange);
}
#user_parts .header .addSet.wide:hover p {
  display: inline;
}
#user_parts .header .addSet p {
  display: none;
  width: -moz-max-content;
  width: max-content;
  margin-left: 5px;
  margin-right: 10px;
}
#user_parts .header .addSet svg {
  position: relative;
  padding: 2.5px;
  width: 30px;
}
#user_parts .header .share {
  margin-right: clamp(2px, 0.8vw, 5px);
  padding: 4px;
  width: auto;
  justify-content: flex-start;
}
#user_parts .header .share:hover {
  background: rgb(143, 212, 233);
}
#user_parts .header .share.wide:hover p {
  display: inline;
}
#user_parts .header .share p {
  display: none;
  width: -moz-max-content;
  width: max-content;
  margin-left: 5px;
  margin-right: 5px;
}
#user_parts .delete {
  padding: 0;
}
#user_parts .delete.active {
  background-color: rgb(255, 86, 86);
}
#user_parts .delete.desktop:hover {
  background-color: rgb(255, 86, 86);
}
#user_parts .delete-all {
  margin-left: clamp(2px, 1vw, 5px);
  padding: 0;
}
#user_parts .delete-all:hover {
  background: rgb(202, 49, 49);
}
#user_parts .mobile-delete {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 25px;
  margin: 15px 0;
  gap: 5px;
}
#user_parts .mobile-delete button {
  width: 100%;
  padding: 3px;
  background-color: var(--background-light);
}
#user_parts .mobile-delete svg {
  height: 25px;
}
#user_parts .mobile-delete .delete svg {
  transform: scale(1.2);
}
#user_parts .mobile-delete path {
  fill: var(--text-color);
}
@keyframes pulse-orange-border {
  0% {
    border-color: var(--orange);
  }
  20% {
    border-color: var(--orange);
  }
  100% {
    border-color: var(--background-light);
  }
}
#user_parts .buildgen-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(5px, 2%, 10px);
  height: 45px;
  width: 100%;
  margin-top: 10px;
}
#user_parts .buildgen-input .btn-warning.filled {
  background-color: var(--orange);
  border-color: var(--orange);
}
#user_parts .buildgen-input .btn-warning.filled:hover {
  transform: scale(1.1);
}
#user_parts .buildgen-input .btn-warning:hover:not(.filled) {
  background-color: var(--background-darker-hover);
  border-color: var(--background-darker-hover);
}
#user_parts .buildgen-input input {
  box-sizing: border-box;
  position: relative;
  height: 100%;
  width: 100%;
  padding: 10px;
  background-color: var(--background-light);
  color: var(--text-color);
  border-color: var(--background-light);
  border-width: 2px;
}
#user_parts .buildgen-input input.pulse {
  animation: pulse-orange-border 2s ease-in-out 1s 2;
}
#user_parts .buildgen-output {
  display: block;
  margin-top: 10px;
  background-color: var(--background-light);
  padding: 10px;
  border-radius: 8px;
}
#user_parts .buildgen-output .status {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
#user_parts .buildgen-output .loading {
  margin: 10px 0;
}
#user_parts .buildgen-output span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 28px;
  right: 1%;
  padding: 3px;
  border-radius: 50%;
  aspect-ratio: 1;
  cursor: pointer;
}
#user_parts .buildgen-output span:hover {
  background-color: var(--background-darker-hover);
}
#user_parts .buildgen-output svg {
  transform: rotate(45deg);
}
#user_parts .buildgen-output path {
  fill: var(--text-color);
}
#user_parts .container {
  color: var(--text-color);
  min-width: 100%;
  max-width: 100%;
  display: block;
  background-color: var(--background-light);
  animation: fade-in 0.5s 1 forwards;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 10px;
  margin-bottom: 12px;
}
#user_parts .container > h3 {
  display: inline-block;
  margin: 0 0 5px 0;
}
#user_parts .container > p {
  display: inline-block;
  margin: 0 0 5px 0;
}
#user_parts .container .name-link {
  color: var(--text-color);
  text-decoration: none;
  display: inline-block;
}
#user_parts .container .name-link:hover {
  text-decoration: underline;
}
#user_parts .container .part {
  padding: 3px 3px 3px 0;
  margin: 0;
}
#user_parts .container.hidden {
  display: none;
}
#user_parts .container .full {
  white-space: wrap;
  overflow: wrap;
  text-overflow: wrap;
}
#user_parts .container > .btn {
  border: var(--orange) 2px solid;
  background-color: var(--background-light);
  border-radius: 8px;
  width: 100%;
  height: clamp(40px, 5vw, 55px);
  display: block;
}
#user_parts .container > .btn.hidden {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: clamp(21px, 2.5vw, 26px);
  height: clamp(21px, 2.5vw, 26px);
  padding: 0;
  border-radius: 50%;
  border: 1px var(--orange) solid;
  transform: translateY(-3px);
  margin-left: 7px;
}
#user_parts .container > .btn.hidden svg {
  width: 80%;
  height: auto;
}
#user_parts .container > .btn:hover {
  background-color: var(--orange);
}
#user_parts .container > .btn svg {
  height: 100%;
  width: auto;
}
#user_parts .container > .btn path {
  fill: var(--text-color);
}
#user_parts .container > div:not(:last-child) {
  margin-bottom: 5px;
}
#user_parts .container > span {
  margin-bottom: 6px;
  font-size: clamp(16px, 6vw, 1.7rem);
  font-weight: 800;
}
#user_parts .container:last-child {
  margin-bottom: 0;
}
#user_parts .container .extra-url svg {
  width: 90%;
}
#user_parts .prices {
  grid-area: right-window;
}
#user_parts .prices .empty {
  margin-top: 10px;
}
#user_parts .prices h3 {
  margin-top: 10px;
  margin-bottom: 5px;
}
#user_parts .prices .btn-warning {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
  color: var(--text-color);
  background-color: var(--orange);
  border-color: var(--orange);
  border-width: 2px;
  border-radius: 8px;
  transition: transform 0.2s;
}
#user_parts .prices .btn-warning:hover {
  transform: scale(1.1);
}
#user_parts .prices .btn-warning span {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 80%;
  width: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2.5px solid var(--text-color);
}
#user_parts .prices .btn-warning span.not-full {
  border-style: dashed;
}
#user_parts .prices .btn-warning svg {
  height: 90%;
  width: auto;
  aspect-ratio: 1;
}
#user_parts .prices .btn-warning svg path {
  stroke: var(--text-color);
  fill: var(--text-color);
  stroke-miterlimit: 10;
  stroke-width: 20px;
  fill-rule: evenodd;
}
#user_parts .prices .lowest {
  margin: 5px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background-color: var(--background-light);
  border-radius: 8px;
}
#user_parts .prices .lowest .btn-warning {
  height: 45px;
  width: auto;
  padding: 5px;
}
#user_parts .prices .lowest h3 {
  margin: 0;
}
#user_parts .prices .seller {
  border-radius: 8px;
  padding: 5px 10px;
  background-color: var(--background-light);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#user_parts .prices .seller:not(:last-child) {
  margin-bottom: 10px;
}
#user_parts .prices .seller > div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
#user_parts .prices .seller .extra-url {
  align-self: center;
  padding: 2px;
  margin-left: 10px;
  border-radius: 8px;
  height: 80%;
}
#user_parts .prices .seller .extra-url span {
  height: 90%;
  border-width: 2px;
  font-size: 0.9rem;
}
#user_parts .prices .expand-from-one-seller {
  cursor: pointer;
  margin-top: 10px;
  margin-left: 5px;
  height: 30px;
  width: 100%;
  gap: 15px;
  display: flex;
  align-items: center;
  justify-content: left;
}
#user_parts .prices .expand-from-one-seller p.bold {
  margin: 0;
}
#user_parts .prices .expand-from-one-seller svg {
  width: auto;
  height: 80%;
  transition: transform 0.2s;
  justify-self: center;
  align-self: center;
  cursor: pointer;
}
#user_parts .prices .expand-from-one-seller svg path {
  fill: var(--orange);
}
#user_parts .prices .expand-from-one-seller svg.rotated {
  transform: rotate(90deg);
}
#user_parts .speed {
  grid-area: left-lower-window;
}
#user_parts .speed .empty a {
  color: var(--text-color);
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  padding: 10px 8px;
  margin-top: 10px;
  background-color: var(--background-light);
}
#user_parts .speed .empty a:hover {
  background-color: var(--orange);
}
#user_parts .speed .select-input-wrap {
  margin-bottom: 10px;
  display: block;
}
#user_parts .speed .select-input-wrap p {
  margin-top: 5px;
}
#user_parts .speed .game-test:not(:last-child) {
  margin-bottom: 10px;
}
#user_parts .speed .game-test > div {
  width: 100%;
  display: grid;
  justify-content: space-between;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 4.2rem;
  grid-template-areas: "image name name" "image results switch";
  -moz-column-gap: 5px;
       column-gap: 5px;
}
#user_parts .speed .game-test > div.searching {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "name" "results";
}
#user_parts .speed .game-test > div .name {
  grid-area: name;
  padding: 8px 10px;
}
#user_parts .speed .game-test > div .name a {
  color: var(--text-color);
  text-decoration: none;
  text-wrap: wrap;
}
#user_parts .speed .game-test > div .name a:hover {
  text-decoration: underline;
  color: var(--orange);
}
#user_parts .speed .game-test > div .results {
  grid-area: results;
  flex: 0;
  margin-left: 10px;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  grid-template-areas: "fps" "txt";
  justify-content: space-between;
  align-items: center;
}
#user_parts .speed .game-test > div .results .fps {
  gap: 5px;
  grid-area: fps;
  display: flex;
  align-items: flex-start;
  justify-self: left;
}
#user_parts .speed .game-test > div .results .fps > div {
  margin-top: 5px;
}
#user_parts .speed .game-test > div .results .txt {
  grid-area: txt;
}
#user_parts .speed .game-test > div .big-cover {
  grid-area: image;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: auto;
  min-height: 100%;
  pointer-events: none;
}
#user_parts .speed .game-test > div .big-cover svg {
  width: 100%;
  height: 100%;
}
#user_parts .speed .game-test > div .big-cover path {
  fill: var(--background-light);
}
#user_parts .speed .game-test > div .blank-img {
  border: var(--background-light) 3px solid;
}
#user_parts .speed .switch {
  grid-area: switch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  background-color: var(--background-light);
  height: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
}
#user_parts .speed .switch:hover {
  background-color: var(--orange);
}
#user_parts .speed .switch svg {
  height: 90%;
  width: auto;
}
#user_parts .speed .switch path {
  fill: var(--text-color);
}
#user_parts .speed .run-test {
  border: 2px solid var(--orange);
  border-radius: 8px;
}
#user_parts .speed .run-test svg {
  height: 80%;
  width: auto;
}
#user_parts .speed .run-test:hover {
  background-color: var(--orange);
}
#user_parts .speed .search {
  grid-area: name;
  position: relative;
  display: flex;
  align-items: center;
}
#user_parts .speed .search input {
  display: inline;
  width: 100%;
  padding: 8px 10px;
  background-color: var(--background-light);
  color: var(--text-color);
  border-color: var(--background-darker);
}
#user_parts .speed .search span {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: auto;
  height: 70%;
  right: 1%;
  padding: 3px;
  border-radius: 50%;
  aspect-ratio: 1;
  cursor: pointer;
}
#user_parts .speed .search span:hover {
  background-color: var(--background-darker-hover);
}
#user_parts .speed .search svg {
  transform: rotate(45deg);
}
#user_parts .speed .search path {
  fill: var(--text-color);
}
#user_parts .speed .search-results {
  display: block;
  max-height: 200px;
  overflow-y: auto;
  background-color: var(--background-light);
  border-radius: 5px;
  margin-top: 5px;
  width: 100%;
}
#user_parts .speed .search-results.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}
#user_parts .speed .search-results .game {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-rows: auto;
  align-items: center;
  padding: 10px;
  max-width: 100%;
  gap: 10px;
  cursor: pointer;
}
#user_parts .speed .search-results .game:hover {
  background-color: var(--orange);
}
#user_parts .speed .search-results .game .game-search-name {
  grid-column: 2;
  max-width: 100%;
}
#user_parts .speed .search-results .game img {
  grid-column: 1;
  height: 40px;
  width: auto;
  border-radius: 5px;
}
#user_parts .speed .search-results .game p {
  grid-column: 3;
  width: -moz-max-content;
  width: max-content;
}

#part_search .filter {
  grid-area: left-window;
}
#part_search .filter .highlight > p.bold {
  animation: pulse-orange 2s ease-out 1;
}
#part_search .filter p.bold {
  margin-top: 10px;
}
#part_search .filter .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#part_search .filter .header span {
  padding: 8px;
  border-radius: 50%;
  aspect-ratio: 1;
  background-color: var(--background-light);
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
#part_search .filter .header span:hover {
  background-color: var(--background-darker-hover);
}
#part_search .filter .header svg {
  height: 100%;
  width: auto;
}
#part_search .filter .header path {
  fill: var(--text-color);
  stroke-width: 10px;
}
#part_search .filter .current-filters {
  display: flex;
  width: 100%;
  height: -moz-min-content;
  height: min-content;
  flex-wrap: wrap;
  justify-content: left;
  margin-top: 5px;
  gap: 5px;
}
#part_search .filter .current-filters span {
  padding: 5px 10px;
  background-color: var(--background-light);
  border-radius: 5px;
  cursor: pointer;
}
#part_search .filter .current-filters span:hover {
  background-color: var(--background-darker-hover);
}
#part_search .filter .form-check-input {
  background-color: transparent;
  border: 2px solid var(--orange);
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  position: relative;
  cursor: pointer;
  outline: none;
}
#part_search .filter .form-check-input:focus {
  box-shadow: none;
  border-color: var(--orange);
}
#part_search .filter .form-check-input:checked {
  background-color: var(--orange);
  border-color: var(--orange);
}
#part_search .filter .form-check-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: text;
}
#part_search .filter .form-check-label p {
  padding-top: 2px;
  height: 100%;
  display: inherit;
  align-items: center;
  justify-content: space-between;
}
#part_search .filter .form-check-label .num {
  justify-content: flex-end;
  text-align: right;
  width: 3ch;
}
#part_search .filter .expand-options {
  cursor: pointer;
  margin-left: 3px;
  height: 1.4em;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 10px;
}
#part_search .filter .expand-options .rotated {
  transform: rotate(-90deg);
}
#part_search .filter svg {
  width: auto;
  height: 80%;
  transition: transform 0.2s;
  justify-self: center;
  align-self: center;
  cursor: pointer;
}
#part_search .filter svg path {
  fill: var(--orange);
}
#part_search .filter .rotated {
  transform: rotate(90deg);
}
#part_search .filter hr {
  margin: 10px 0;
}
#part_search .filter .show-other-filters {
  cursor: pointer;
  margin-top: 10px;
  margin-left: 5px;
  height: 30px;
  width: 100%;
  gap: 15px;
  display: flex;
  align-items: center;
  justify-content: left;
}
#part_search .filter .show-other-filters p.bold {
  margin: 0;
}
#part_search .not-found {
  text-align: center;
  margin-top: 15px;
}
#part_search .search-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1%;
  height: 45px;
}
#part_search .search-control .btn-warning {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 3px;
  background-color: var(--background-light);
  border-color: var(--orange);
  border-width: 2px;
  transition: transform 0.2s;
}
#part_search .search-control .btn-warning:focus {
  box-shadow: none;
}
#part_search .search-control .btn-warning svg {
  height: 70%;
  width: auto;
}
#part_search .search-control .btn-warning svg path {
  fill: var(--text-color);
}
#part_search .search-control .btn-warning.filters-changed {
  background-color: var(--orange);
}
#part_search .search-control .btn-warning:hover {
  background-color: var(--orange);
  border-color: var(--orange);
}
#part_search .search-control [type=text] {
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: var(--background-light);
  color: var(--text-color);
  border-color: var(--background-darker);
}
#part_search .search-control [type=text]::-moz-placeholder {
  opacity: 0.5;
  color: var(--text-color);
  font-family: "Varela Round", sans-serif;
}
#part_search .search-control [type=text]::placeholder {
  opacity: 0.5;
  color: var(--text-color);
  font-family: "Varela Round", sans-serif;
}
#part_search .search-control [type=text]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
#part_search .main-table .nextBatch {
  margin-top: 10px;
  border: var(--orange) 2px solid;
  background-color: var(--background-light);
  border-radius: 8px;
  width: 100%;
  height: clamp(40px, 5vw, 55px);
  display: block;
}
#part_search .main-table .nextBatch.loading {
  visibility: hidden;
  height: 10px;
}
#part_search .main-table .nextBatch:hover {
  background-color: var(--orange);
}
#part_search .main-table .nextBatch > p {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
#part_search .try-again {
  margin-top: 10px;
}
#part_search .show {
  grid-area: right-window;
}
#part_search .show .price-change {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: left;
  gap: 2%;
}
#part_search .show .price-change span {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 5px;
}
#part_search .show .price-change p {
  padding-bottom: 5px;
}
#part_search .show .sign {
  color: var(--orange);
}
#part_search .show h2 {
  margin-bottom: 10px;
}
#part_search .check {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}
#part_search .check .switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}
#part_search .check .switch input {
  display: none;
}
#part_search .check.blank {
  color: var(--text-color-sub);
}
#part_search .check.blank .switch-slider:before, #part_search .check.blank input:checked + .switch-slider:before {
  background-color: var(--background-light);
  border-color: var(--background-light);
}
#part_search .check .switch-slider {
  background-color: var(--background-light);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: transform 0.4s;
  border-radius: 5px;
  cursor: pointer;
}
#part_search .check .switch-slider:hover {
  background-color: var(--background-darker-hover);
}
#part_search .check .switch-slider:before {
  cursor: pointer;
  height: 26px;
  width: 26px;
  background-color: var(--background-light);
  bottom: 4px;
  content: "";
  left: 4px;
  position: absolute;
  transition: 0.3s;
  border-radius: 8px;
  border: 3px solid var(--orange);
}
#part_search .check input:checked + .switch-slider:before {
  transform: translateX(26px);
  background-color: var(--orange);
}
#part_search .go-up {
  z-index: 5;
  position: fixed;
  top: 85vh;
  left: 78vw;
  background-color: var(--background-darker-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 40px;
  aspect-ratio: 1;
  color: var(--text-color);
  padding: 0.5rem;
  transition: transform 0.2s;
}
#part_search .go-up svg {
  width: 90%;
  height: auto;
  margin-left: 1px;
}
#part_search .go-up path {
  fill: var(--text-color-hover);
}
#part_search .go-up:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.double-thumb-slider {
  display: grid;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  row-gap: 5px;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "title title" "slider slider" "left-input right-input";
}
.double-thumb-slider .label {
  grid-area: title;
  margin-bottom: 5px;
}
.double-thumb-slider .value-container {
  display: flex;
  align-items: center;
}
.double-thumb-slider .value {
  cursor: pointer;
  padding: 5px 10px;
}
.double-thumb-slider .input-field {
  line-height: 1.2;
  font-size: 1.2rem;
  background-color: var(--background-darker);
  color: var(--text-color);
  width: 80%;
  background-color: var(--background-light);
  border-color: var(--background-light);
  padding: 5px 10px;
  padding-left: 10px;
}
.double-thumb-slider .input-field:focus {
  border-color: var(--background-light);
}
.double-thumb-slider input[type=number]::-webkit-inner-spin-button,
.double-thumb-slider input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}
.double-thumb-slider .min-input {
  grid-area: left-input;
  justify-self: left;
}
.double-thumb-slider .max-input {
  grid-area: right-input;
  justify-self: right;
}
.double-thumb-slider .slider-container {
  grid-area: slider;
  margin: 0 10px;
  position: relative;
  height: 6px;
  background: var(--background-light);
  border-radius: 3px;
}
.double-thumb-slider .slider-track {
  position: absolute;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
  background: var(--background-light);
  border-radius: 3px;
  padding: 0 5px;
}
.double-thumb-slider .slider-track:before {
  right: 14px;
  background-color: var(--background-light);
  border-radius: 3px;
  display: block;
  content: "";
  position: relative;
  width: 19px;
  height: 6px;
}
.double-thumb-slider .slider-range {
  position: absolute;
  height: 100%;
  background: var(--orange);
}
.double-thumb-slider .slider-thumb {
  box-sizing: content-box;
  position: absolute;
  top: 50%;
  width: 17px;
  height: 17px;
  background-color: var(--orange);
  border: 2px solid var(--orange);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
.double-thumb-slider .slider-thumb:hover {
  border-width: 3px;
}

#part_page .sellers {
  grid-area: right-window;
}
#part_page .sellers .empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: clamp(100px, 10vw, 300px);
  margin-top: 5px;
}
#part_page .sellers .seller-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}
#part_page .sellers .seller-header > div {
  display: flex;
  flex-direction: column;
}
#part_page .sellers .seller-header .btn-warning {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--orange);
  border-color: var(--orange);
  border-width: 2px;
}
#part_page .sellers .seller-header .btn-warning:hover {
  background-color: var(--orange);
  border-color: var(--orange);
  transform: scale(1.1);
}
#part_page .sellers .seller-header .btn-warning svg {
  width: 26px;
  height: auto;
}
#part_page .sellers .seller-header .btn-warning svg path {
  stroke: var(--text-color);
  fill: var(--text-color);
  stroke-miterlimit: 10;
  stroke-width: 20px;
  fill-rule: evenodd;
}
#part_page .sellers > div {
  background-color: var(--background-light);
  border-radius: 8px;
  padding: 5px 10px;
}
#part_page .sellers > div:nth-child(2) {
  margin-top: 10px;
}
#part_page .sellers .seller {
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#part_page .sellers .seller .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#part_page .sellers .seller > div {
  display: flex;
  align-items: center;
  gap: 5%;
}
#part_page .sellers .seller .extra-url {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 55px;
  padding: 0 3px;
  background-color: var(--orange);
  border-color: var(--orange);
  border-radius: 8px;
}
#part_page .sellers .seller .extra-url svg {
  width: 90%;
}
#part_page .sellers .seller .extra-url svg path {
  fill: var(--text-color);
}
#part_page .sellers .seller .extra-url.sold-out {
  background-color: var(--background-light);
  border-color: var(--background-light);
  cursor: default;
}
#part_page .sellers .seller .extra-url.sold-out:hover {
  transform: none;
}
#part_page .sellers .seller .extra-url:hover {
  transform: scale(1.1);
}
#part_page .sellers .seller:nth-child(1) {
  margin: 0;
}
#part_page .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0;
  font-size: clamp(6px, 5vw, 26px);
  text-align: center;
  font-weight: bold;
  background-color: var(--background-darker);
  gap: 2%;
}
#part_page .header .btn-warning {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 3px;
  background-color: var(--orange);
  border-color: var(--orange);
  border-width: 2px;
  transition: transform 0.2s;
}
#part_page .header .btn-warning:hover {
  transform: scaleX(1.1) scaleY(1.1);
}
#part_page .header .btn-warning svg {
  width: 26px;
  height: auto;
}
#part_page .header .btn-warning svg path {
  fill: var(--text-color);
}
#part_page .header .btn-warning.sold-out {
  background-color: var(--background-light);
}
#part_page .header .btn-warning.sold-out:hover {
  background-color: var(--background-light);
}
#part_page .header .goback {
  display: flex;
  align-items: center;
  justify-content: center;
}
#part_page .header span {
  opacity: 1;
}
#part_page .content {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  flex-wrap: wrap;
  flex: 1;
  margin-top: 15px;
  row-gap: 15px;
}
#part_page .desc {
  background-color: var(--background-light);
  border-radius: 8px;
  padding: 10px;
  grid-area: desc;
  display: block;
  width: auto;
}
#part_page .desc h2 {
  margin-bottom: 5px;
}
#part_page .desc .sorry {
  margin-bottom: 5px;
}
#part_page .gallery-container {
  background-color: var(--background-light);
  border-radius: 8px;
  padding: 10px 0;
  position: relative;
  overflow: hidden; /* Prevents overflow of images outside the container */
  margin: 0;
  width: 100%; /* Or set a specific width, e.g., 600px */
  height: 25vh; /* Set the height explicitly */
}
#part_page .gallery-slider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2%;
  width: 100%;
  height: 100%; /* Ensures it fills the container */
}
#part_page .gallery-image {
  max-width: 100%; /* Restrict the image to the width of the container */
  max-height: 100%; /* Restrict the image to the height of the container */
  -o-object-fit: contain;
     object-fit: contain; /* Ensures the image scales while preserving aspect ratio */
  border-radius: 8px;
}
#part_page .gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--background-darker);
  opacity: 0.8;
  color: white;
  border: none;
  font-size: 20px;
  padding: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
#part_page .gallery-arrow svg {
  width: 30px;
  height: auto;
}
#part_page .gallery-arrow path {
  fill: var(--text-color);
}
#part_page .gallery-arrow:hover {
  opacity: 1;
}
#part_page .gallery-arrow:hover path {
  fill: var(--orange);
}
#part_page .left-arrow {
  left: 10px;
}
#part_page .right-arrow {
  right: 10px;
}
#part_page .right-arrow svg {
  transform: rotate(180deg);
}
#part_page .gallery-pagination {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
#part_page .dot {
  width: 10px;
  height: 10px;
  background-color: #ddd;
  border-radius: 50%;
  cursor: pointer;
}
#part_page .dot.active {
  background-color: #333;
}
#part_page .specs {
  grid-area: left-window;
}
#part_page .specs .h2-with-tooltip {
  margin-bottom: 10px;
}
#part_page .specs h3 {
  margin-top: 10px;
}
#part_page .specs .spec {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas: "data flags" "explanation explanation";
  justify-content: space-between;
  align-items: center;
  background-color: var(--background-light);
  border-radius: 8px;
  padding: 5px 10px;
  margin-top: 5px;
}
#part_page .specs .spec > span:nth-child(1) {
  font-weight: 650;
}
#part_page .specs .spec > span:nth-child(2) {
  opacity: 0.9;
}
#part_page .specs .spec .data {
  grid-area: data;
  flex: 1;
}
#part_page .specs .spec .flags {
  cursor: pointer;
  grid-area: flags;
  width: 28px;
}
#part_page .specs .spec .flags path {
  fill: var(--orange);
}
#part_page .specs .spec .flags polygon {
  fill: var(--background-light);
}
#part_page .specs .spec .flags:hover:not(.active) polygon {
  fill: var(--orange);
}
#part_page .specs .spec .flags:hover:not(.active) .mark {
  fill: var(--background-light);
}
#part_page .specs .spec .explanation {
  grid-area: explanation;
  width: 100%;
  display: block;
}
#part_page .specs .btn-split {
  margin: 10px 0;
}
#part_page .specs .spec-btn {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  color: var(--text-color);
  text-decoration: none;
}
#part_page .specs .spec-btn svg {
  height: 32px;
  width: auto;
}
#part_page .specs .spec-btn path {
  fill: var(--text-color);
}
#part_page .specs .spec-btn:hover {
  background-color: var(--orange);
}
#part_page .specs .group {
  display: block;
}
#part_page .specs .group span {
  display: block;
}/*# sourceMappingURL=index.css.map */