@charset "UTF-8";

@font-face {
  font-family: "irsans";
  font-style: normal;
  font-weight: 900;
  src: url(/fonts/irsans-b.eot?67d2920ac1e0164c957e884da0b1fc2b);
  src: url(/fonts/irsans-b.eot?67d2920ac1e0164c957e884da0b1fc2b) format("embedded-opentype"), url(/fonts/irsans-b.woff?a6c7f37a03e19d237de343688a10330f) format("woff"), url(/fonts/irsans-b.ttf?3c04bd57fa8240b0ec575d8c1ff80dbb) format("truetype");
}

@font-face {
  font-family: "irsans";
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/irsans-m.eot?3953f2446de46ca0a52f371df635a547);
  src: url(/fonts/irsans-m.eot?3953f2446de46ca0a52f371df635a547) format("embedded-opentype"), url(/fonts/irsans-m.woff?7698268f336a35d87bbf591a0fe5f41d) format("woff"), url(/fonts/irsans-m.ttf?2ae855f1c7b7756f2aba76f0915b20b8) format("truetype");
}

@font-face {
  font-family: "irsans";
  font-style: normal;
  font-weight: 500;
  src: url(/fonts/irsans.eot?4f3cd08001a912553842788147e162c2);
  src: url(/fonts/irsans.eot?4f3cd08001a912553842788147e162c2) format("embedded-opentype"), url(/fonts/irsans.woff?ba2fd9dab30cd8771aa3b53aa6b036e3) format("woff"), url(/fonts/irsans.ttf?71617be58eaec728ca3b9d4d5da8b11d) format("truetype");
}

@font-face {
  font-family: "irsans";
  font-style: normal;
  font-weight: 300;
  src: url(/fonts/irsans-l.eot?c3e2315906102c635b02db3a6666299b);
  src: url(/fonts/irsans-l.eot?c3e2315906102c635b02db3a6666299b) format("embedded-opentype"), url(/fonts/irsans-l.woff?ef7595542cb1d899cefcabddb3a59f7f) format("woff"), url(/fonts/irsans-l.ttf?2fd2464904104b41ac006f718c6de468) format("truetype");
}

@font-face {
  font-family: "irsans";
  font-style: normal;
  font-weight: 100;
  src: url(/fonts/irsans-u.eot?c6348f2607ffbf9f301e2a2bd6bfba4c);
  src: url(/fonts/irsans-u.eot?c6348f2607ffbf9f301e2a2bd6bfba4c) format("embedded-opentype"), url(/fonts/irsans-u.woff?c2cac1dd087e299cd537621798bd50eb) format("woff"), url(/fonts/irsans-u.ttf?cbc29f4ae7f67bce75b49ee6f69678ff) format("truetype");
}

i,
i:before {
  font-family: laravel;
}

html {
  margin: 0;
  padding: 0;
  line-height: normal;
  font-family: "irsans", irsans, sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  height: 100%;
}

* {
  border: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  line-height: normal;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  display: inline-block;
}

input,
textarea,
select,
select option,
button {
  outline-style: none;
  font-family: "irsans", irsans, sans-serif;
}

button,
input[type=submit] {
  cursor: pointer;
}

input:focus {
  outline: 0;
}

li,
a {
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  outline: 0;
}

li {
  transition: none;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.siteMeta {
  position: fixed;
  visibility: hidden;
}

body {
  direction: rtl;
  font-size: 12px;
  margin: 0;
  padding: 0;
  text-align: right;
  overflow-x: hidden;
  height: 100%;
  background: #f5f5f5;
}

body .allHome .allPostPanel {
  margin: 0;
}

body .allHome .allPostPanel .allTable .allTableContainer .postItem .postTop .postOptions {
  grid-template-columns: 1fr;
}

body .allHome .allPostPanel .allTable .allTableContainer .postItem .postTop .postOptions a {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  color: #475569;
  font-size: 0.8rem;
  font-weight: 300;
  grid-gap: 0.5rem;
}

body .allHome .allShowPostPanel .allShowPostPanelTop {
  margin: 0;
  margin-bottom: 1rem;
}

body .allHome .allShowPostPanel .allShowPostPanelComment {
  margin: 0;
  margin-bottom: 1rem;
}

body .allHome .allShowPostPanel .allShowPostPanelPays {
  margin: 0;
}

body .allHome .allCreatePost .allPostPanelTop {
  margin: 0;
}

body .allHome .allCreatePost .allCreatePostData {
  margin: 1rem 0;
}

body .allHome .searches input {
  width: 100%;
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 0.1px;
}

body .hidden {
  position: absolute;
  opacity: 0;
  top: 0;
}

body .width {
  width: 70%;
}

@media screen and (max-width: 1800px) {
  body .width {
    width: 85%;
  }
}

@media screen and (max-width: 1600px) {
  body .width {
    width: 90%;
  }
}

@media screen and (max-width: 1400px) {
  body .width {
    width: 97%;
  }
}

@media screen and (max-width: 700px) {
  body .width {
    width: 95%;
  }
}

body .en {
  font-family: Trebuchet MS, sans-serif;
}

.allRepair .repairIndex {
  background: #fff;
  padding: 1rem;
  width: 35%;
  margin: auto;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.allRepair .repairIndex .pic {
  display: grid;
  justify-content: center;
  margin-bottom: 1rem;
}

.allRepair .repairIndex .pic svg {
  width: 100%;
  height: 8rem;
}

.allRepair .repairIndex h3 {
  color: #475569;
  font-weight: 500;
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: 1rem;
  border-bottom: 2px solid #eee;
  padding-bottom: 1rem;
}

.allRepair .repairIndex h5 {
  color: #475569;
  font-weight: 500;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 1rem;
}

.allRepair .repairIndex .timer {
  direction: ltr;
}

.allRepair .repairIndex .timer .flip-card[data-v-78efe7f6] {
  font-size: 1.4rem;
}

.allRepair .repairIndex .timer .flip-card__top[data-v-78efe7f6],
.allRepair .repairIndex .timer .flip-card__bottom[data-v-78efe7f6],
.allRepair .repairIndex .timer .flip-card__back-bottom[data-v-78efe7f6],
.allRepair .repairIndex .timer .flip-card__back[data-v-78efe7f6]::before,
.allRepair .repairIndex .timer .flip-card__back[data-v-78efe7f6]::after {
  padding: 0;
}

.allRepair .repairIndex .timer .flip-card__top[data-v-78efe7f6],
.allRepair .repairIndex .timer .flip-card__top-4digits[data-v-78efe7f6],
.allRepair .repairIndex .timer .flip-card__bottom-4digits[data-v-78efe7f6],
.allRepair .repairIndex .timer .flip-card__back-bottom-4digits[data-v-78efe7f6],
.allRepair .repairIndex .timer .flip-card__back-4digits[data-v-78efe7f6]::before,
.allRepair .repairIndex .timer .flip-card__back-4digits[data-v-78efe7f6]::after,
.allRepair .repairIndex .timer .flip-card__bottom[data-v-78efe7f6],
.allRepair .repairIndex .timer .flip-card__back-bottom[data-v-78efe7f6],
.allRepair .repairIndex .timer .flip-card__back[data-v-78efe7f6]::before,
.allRepair .repairIndex .timer .flip-card__back[data-v-78efe7f6]::after {
  background: #e3342f;
  color: white;
}

.allRepair .repairIndex .timer .flip-card__bottom[data-v-78efe7f6],
.allRepair .repairIndex .timer .flip-card__back-bottom[data-v-78efe7f6],
.allRepair .repairIndex .timer .flip-card__bottom-4digits[data-v-78efe7f6],
.allRepair .repairIndex .timer .flip-card__back-bottom-4digits[data-v-78efe7f6] {
  background: #e3342f;
  border-top: 0;
  color: white;
}

.allRepair .repairIndex .timer .flip-clock__slot[data-v-78efe7f6] {
  position: absolute;
  top: 0;
  visibility: hidden;
}

@media screen and (max-width: 800px) {
  .allRepair .repairIndex {
    width: 95%;
  }
}

.allHeaderHome {
  position: fixed;
  width: 100%;
  padding-top: 1rem;
  background: #fff;
  z-index: 998;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.allHeaderHome .headerHomeContent {
  margin: auto;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop {
  display: grid;
  grid-template-columns: 1fr 14rem;
  align-items: center;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 1rem;
  align-items: center;
  justify-content: right;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem:nth-child(5) {
  justify-content: left;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentLogo img {
  height: 2rem;
  width: 8rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch {
  position: relative;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch label {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  align-items: center;
  background: #f5f5f5;
  border-radius: 5px;
  padding: 0.7rem;
  cursor: text;
  position: relative;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch label input {
  width: 35rem;
  font-size: 0.8rem;
  color: #6b6f80;
  height: 100%;
  background: transparent;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch label i svg {
  width: 1rem;
  height: 1rem;
  fill: #6b6f80;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch label .load {
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  display: grid;
  align-items: center;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch label .load .loading {
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch .searchLists {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: #fff;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
  border-radius: 5px;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch .searchLists .searchList .item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch .searchLists .searchList .item .pic {
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.07);
  padding: 0.5rem;
  background: #fff;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch .searchLists .searchList .item .pic img {
  width: 2rem;
  height: 2rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch .searchLists .searchList .item a {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch .searchLists .searchList .item:nth-child(even) {
  background: #f5f5f5;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch .searchLists ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0.5rem;
  align-items: center;
  border-top: 2px dashed #DFE3E7;
  padding: 0.5rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch .searchLists ul li {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch .searchLists ul li a {
  background: #f21111;
  padding: 0.3rem 0.5rem;
  display: grid;
  width: 100%;
  font-size: 0.7rem;
  border-radius: 5px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  color: white;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .loginTopHeader {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 10px;
  background: #f5f5f5;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  border-bottom: 2px solid #e1e0ea;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .loginTopHeader i svg {
  fill: #475569;
  width: 1.1rem;
  height: 1.1rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .loginTopHeader span {
  color: #475569;
  font-weight: 300;
  font-size: 0.8rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .loginTopHeader:hover {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.01), 0 1px 5px 0 rgba(0, 0, 0, 0.01);
}

@media screen and (max-width: 920px) {
  .allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .loginTopHeader span {
    font-size: 0.5rem;
  }

  .allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .loginTopHeader i svg {
    fill: #475569;
    width: 0.5rem;
    height: 0.5rem;
  }
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .user {
  position: relative;
  cursor: pointer;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .user .pic {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 5rem;
  overflow: hidden;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.07), 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 1px 5px 0 rgba(0, 0, 0, 0.04);
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .user .pic img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .user ul {
  background: #fff;
  position: absolute;
  top: 130%;
  left: -0.5rem;
  display: grid;
  grid-template-columns: 1fr;
  width: 13rem;
  border-radius: 10px;
  visibility: visible;
  opacity: 1;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e0ea;
  z-index: 100;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .user ul li {
  color: #475569;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .user ul li .picUser {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 5rem;
  overflow: hidden;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .user ul li .picUser img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .user ul li .infoUser {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.2rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .user ul li .infoUser span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 300;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .user ul li a {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.7rem;
  background: transparent;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 300;
  width: 10rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .user ul li a i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .user ul li a i svg {
  width: 1rem;
  height: 1rem;
  fill: #475569;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .user ul li:hover {
  background: #f5f5f5;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .user ul li:first-child {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  background: transparent;
  grid-gap: 0.5rem;
  border-bottom: 1px solid #e1e0ea;
  padding: 0.5rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .user ul li:first-child {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  overflow: hidden;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart {
  position: relative;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart i {
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: rgba(255, 0, 0, 0.03);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border-bottom: 2px solid #f21111;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart i svg {
  fill: #f21111;
  width: 1rem;
  height: 1rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart i:hover {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.01), 0 1px 5px 0 rgba(0, 0, 0, 0.01);
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart h5 {
  display: grid;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -0.3rem;
  left: -0.5rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 5rem;
  background: red;
  font-size: 0.6rem;
  color: white;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart {
  background: #fff;
  border-radius: 10px;
  width: 17rem;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 0;
  top: 130%;
  border: 1px solid #e1e0ea;
  overflow: hidden;
  z-index: 700;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart ul {
  direction: ltr;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart ul .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 15rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart ul li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0.3rem;
  padding: 1rem;
  border-bottom: 1px solid #e1e0ea;
  direction: rtl;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart ul li .cartPic {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 4rem;
  overflow: hidden;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart ul li .cartPic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart ul li .cartText {
  display: grid;
  grid-template-columns: 1fr;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart ul li .cartText .cartTitle {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.4rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart ul li .cartText .cartTitle h4 {
  font-size: 0.75rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart ul li .cartText .cartTitle i {
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 0.3rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 5rem;
  box-shadow: 0 0 0 0;
  cursor: pointer;
  border: 0;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart ul li .cartText .cartTitle i svg {
  fill: #f21111;
  width: 0.85rem;
  height: 0.85rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart ul li .cartText .cartTextItem {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 0.8rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart ul li .cartText .cartTextItem .cartPrice span {
  color: #475569;
  font-weight: 500;
  font-size: 0.82rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart ul li .cartText .cartTextItem .cartCount {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
  color: #475569;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart ul li .cartText .cartTextItem .cartCount button {
  display: grid;
  justify-content: center;
  align-items: center;
  background: #f21111;
  padding: 0 0.5rem;
  height: 1rem;
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
  font-size: 0.8rem;
  color: white;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart ul li .cartText .cartTextItem .cartCount button:first-child {
  font-size: 0.7rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart ul li:last-child {
  border-bottom: 0;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart .showCartEmpty {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  padding: 1rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart .showCartEmpty span {
  display: grid;
  justify-content: center;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart .showCartEmpty span svg {
  width: 2rem;
  height: 2rem;
  fill: #00C58D;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart .showCartEmpty h3 {
  font-weight: 500;
  font-size: 0.85rem;
  color: #475569;
  margin-top: 0.5rem;
  text-align: center;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart .loaderCheck {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 10rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart .loaderCheck svg {
  fill: #475569;
  width: 2rem;
  height: 2rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart .showCartBot {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 1rem;
  align-items: center;
  background: #f5f5f5;
  padding: 0.5rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart .showCartBot a {
  background: #f21111;
  padding: 0.2rem 1rem;
  color: white;
  border-radius: 0.2rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart .showCart .showCartBot .showCartBotLoader svg {
  fill: #f21111;
  width: 1.2rem;
  height: 1.2rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentBotTheme,
.allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentBotLang {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
}

@media screen and (max-width: 920px) {
  .allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentCart i svg {
    fill: #475569;
    width: 0.75rem;
    height: 0.75rem;
  }

  .allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .user {
    position: absolute;
    opacity: 0;
    visibility: hidden;
  }
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .searchData {
  position: fixed;
  top: -5rem;
  right: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
  background: white;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  height: 4rem;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .searchData svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: #b3b3b3;
  margin-left: 1rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .searchData svg:hover {
  fill: black;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .searchData i {
  padding: 1rem;
  display: grid;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #f2f2f2;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .searchData i svg {
  margin-left: 0;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .searchData input {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .searchData ul {
  z-index: 900;
  position: absolute;
  top: 3.8rem;
  right: 0;
  left: 0;
  background: #fff;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .searchData ul li {
  border-top: 1px solid #f2f2f2;
  padding: 0.5rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .searchData ul li a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 1rem;
  align-items: center;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .searchData ul li a .pic {
  width: auto;
  height: auto;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .searchData ul li a .pic img {
  width: 3rem;
  height: 3rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .searchData ul li a .subject h3 {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .searchData ul li a .subject h5 {
  font-size: 0.75rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .searchData ul li a .price {
  color: black;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.1px;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .resIcon {
  position: absolute;
  right: 0;
  opacity: 0;
  visibility: hidden;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .resIcon i svg {
  fill: #475569;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}

.allHeaderHome .headerHomeContent .headerHomeContentTop .resIconSearch i svg {
  width: 1rem;
  height: 1rem;
}

@media screen and (max-width: 800px) {
  .allHeaderHome .headerHomeContent .headerHomeContentTop {
    grid-template-columns: auto 1fr auto auto;
    grid-gap: 1rem;
    padding: 0.5rem 0;
  }

  .allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem {
    display: block;
  }

  .allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentLogo img {
    width: 100%;
    height: 3rem;
  }

  .allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch {
    margin: 0;
    padding: 0;
    position: absolute;
    opacity: 0;
    visibility: hidden;
  }

  .allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .headerHomeContentSearch label input {
    width: auto;
  }

  .allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem .loginTopHeader {
    position: absolute;
    top: 0;
    opacity: 0;
    visibility: hidden;
  }

  .allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem:first-child {
    display: block;
  }

  .allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentTopItem:nth-child(2) {
    justify-content: space-between;
  }

  .allHeaderHome .headerHomeContent .headerHomeContentTop .resIcon {
    position: relative;
    right: auto;
    opacity: 1;
    visibility: visible;
  }

  .allHeaderHome .headerHomeContent .headerHomeContentTop .searchData {
    opacity: 1;
    visibility: visible;
  }

  .allHeaderHome .headerHomeContent .headerHomeContentTop .headerHomeContentBotCats {
    visibility: visible;
    position: relative;
    top: auto;
  }
}

.allHeaderHome .headerHomeContent .headerHomeContentBot {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  grid-gap: 1rem;
  margin-top: 1.5rem;
  margin-right: 1rem;
  position: relative;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5px, auto));
  justify-content: right;
  grid-gap: 2rem;
  transition: all 0.3s ease-in-out;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li {
  transition: all 0.3s ease-in-out;
  padding-bottom: 1rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li:hover .allListContainer {
  visibility: visible;
  opacity: 1;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li a {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  color: #475569;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.1px;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li a i {
  display: grid;
  justify-content: right;
  align-items: center;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li a i svg {
  fill: #f21111;
  width: 0.7rem;
  height: 0.7rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li span {
  cursor: pointer;
  color: #475569;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.1px;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li .allListContainer {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  right: 0;
  top: 100%;
  transition: all 0.3s ease-in-out;
  background: #fff;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5px, auto));
  justify-content: right;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li .allListContainer li {
  padding: 0.5rem;
  padding-left: 0;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li .allListContainer li a {
  display: block;
  border-radius: 0.2rem;
  padding: 0.3rem 1.5rem;
  background: #f5f5f5;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li .allListContainer li:hover {
  padding-bottom: 0;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li .allListContainer li:hover a {
  margin-top: 0.5rem;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li .allListContainer li:hover .listsContainer {
  visibility: visible;
  opacity: 1;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li .allListContainer li .listsContainer {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  right: 0;
  top: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5px, 1fr));
  justify-content: right;
  grid-gap: 0.5rem;
  background: #f5f5f5;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li .allListContainer li .listsContainer li a {
  box-shadow: 0 0 0 0;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  font-weight: 500;
  font-size: 0.8rem;
  color: #475569;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li .allListContainer li .listsContainer li a:before {
  border-radius: 10px;
  width: 5px;
  height: 5px;
  background-color: #475569;
  content: "";
  display: inline-block;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li .allListContainer li .listsContainer li .listContainer {
  transition: all 0.3s ease-in-out;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li .allListContainer li .listsContainer li .listContainer li {
  padding: 0;
  padding-bottom: 0.5rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li .allListContainer li .listsContainer li .listContainer li a {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  font-weight: 300;
  font-size: 0.8rem;
  color: #475569;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li .allListContainer li .listsContainer li .listContainer li a:before {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li .allListContainer li .listsContainer li .listContainer li a i {
  display: grid;
  justify-content: right;
  align-items: center;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotContainer li .allListContainer li .listsContainer li .listContainer li a i svg {
  fill: #475569;
  width: 0.5rem;
  height: 0.5rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotLang {
  display: grid;
  justify-content: left;
  grid-template-columns: repeat(auto-fit, minmax(1rem, auto));
  align-items: center;
  grid-gap: 1rem;
  margin-bottom: 1rem;
  width: 5rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotLang .headerHomeContentBotLangPic {
  border-radius: 5rem;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.2);
  width: 2rem;
  height: 2rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotLang .headerHomeContentBotLangPic svg {
  width: 2rem;
  height: 2rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme {
  display: grid;
  align-items: end;
  width: 6rem;
  margin-bottom: 1rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__input:checked ~ main,
.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__input:checked ~ label {
  --text: white;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__input:checked ~ main {
  --gradDark: hsl(198, 44%, 11%);
  --gradLight: hsl(198, 39%, 29%);
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__input,
.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__label {
  position: relative;
  z-index: 1;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__input {
  opacity: 0;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__input:hover + .theme-switch__label,
.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__input:focus + .theme-switch__label {
  background-color: lightSlateGray;
  cursor: pointer;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__input:hover + .theme-switch__label span::after,
.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__input:focus + .theme-switch__label span::after {
  background-color: #d4ebf2;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__label {
  transition: background-color 200ms ease-in-out;
  width: 50px;
  height: 20px;
  border-radius: 50px;
  text-align: center;
  background-color: slateGray;
  box-shadow: -4px 4px 15px inset rgba(0, 0, 0, 0.4);
  margin-top: -0.5rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__label::before,
.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__label::after {
  font-size: 1.5rem;
  position: absolute;
  transform: translate3d(0, -20%, 0);
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__label::before {
  content: "\263C";
  right: 100%;
  margin-right: 10px;
  color: orange;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__label::after {
  content: "\263E";
  left: 100%;
  margin-left: 10px;
  color: lightSlateGray;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__label span {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 100%;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__label span::after {
  position: absolute;
  top: calc(100% + 15px);
  left: 5px;
  width: 12px;
  height: 12px;
  content: "";
  border-radius: 50%;
  background-color: lightBlue;
  transition: transform 200ms, background-color 200ms;
  box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.4);
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__input:checked ~ .theme-switch__label {
  background-color: lightSlateGray;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__input:checked ~ .theme-switch__label::before {
  color: lightSlateGray;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__input:checked ~ .theme-switch__label::after {
  color: turquoise;
}

.allHeaderHome .headerHomeContent .headerHomeContentBot .headerHomeContentBotTheme .theme-switch__input:checked ~ .theme-switch__label span::after {
  transform: translate3d(30px, 0, 0);
}

.allHeaderHome .headerHomeContent .headerHomeContentBotCats {
  visibility: hidden;
  position: absolute;
  top: 0;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
}

.allHeaderHome .headerHomeContent .headerHomeContentBotCats i svg {
  fill: #475569;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}

.allHeaderHome .headerHomeContent .headerHomeContentBotCats .homeRes {
  color: #475569;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats {
  position: fixed;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  z-index: 999;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul {
  background: #fff;
  width: 15rem;
  min-height: 100%;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li {
  margin-top: 1rem;
  padding: 0.5rem;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li span {
  color: #475569;
  font-weight: 700;
  font-size: 0.85rem;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .pic img {
  width: 100%;
  height: 3rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .titleCat {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 1rem;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #e1e0ea;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .titleCat i {
  display: grid;
  align-items: center;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .titleCat i svg {
  width: 1rem;
  height: 1rem;
  fill: #f21111;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .topCat {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .topCat svg {
  width: 1rem;
  height: 1rem;
  fill: #f21111;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .topCat a {
  font-weight: 700;
  font-size: 0.85rem;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li a {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  color: #475569;
  font-weight: 500;
  font-size: 0.75rem;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li a i {
  display: grid;
  justify-content: right;
  align-items: center;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li a i svg {
  fill: #475569;
  width: 0.7rem;
  height: 0.7rem;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resLang {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resLang .resLangPic {
  border-radius: 5rem;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.2);
  width: 2rem;
  height: 2rem;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resLang .resLangPic svg {
  width: 2rem;
  height: 2rem;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme {
  display: grid;
  align-items: end;
  justify-items: center;
  margin-top: 1rem;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:checked ~ main,
.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:checked ~ label {
  --text: white;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:checked ~ main {
  --gradDark: hsl(198, 44%, 11%);
  --gradLight: hsl(198, 39%, 29%);
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input,
.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__label {
  position: absolute;
  z-index: 1;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input {
  opacity: 0;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:hover + .theme-switch__label,
.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:focus + .theme-switch__label {
  background-color: lightSlateGray;
  cursor: pointer;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:hover + .theme-switch__label span::after,
.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:focus + .theme-switch__label span::after {
  background-color: #d4ebf2;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__label {
  transition: background-color 200ms ease-in-out;
  width: 50px;
  height: 20px;
  border-radius: 50px;
  text-align: center;
  background-color: slateGray;
  box-shadow: -4px 4px 15px inset rgba(0, 0, 0, 0.4);
  margin-top: -0.5rem;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__label::before,
.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__label::after {
  font-size: 1.5rem;
  position: absolute;
  transform: translate3d(0, -20%, 0);
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__label::before {
  content: "\263C";
  right: 100%;
  margin-right: 10px;
  color: orange;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__label::after {
  content: "\263E";
  left: 100%;
  margin-left: 10px;
  color: lightSlateGray;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__label span {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 100%;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__label span::after {
  position: absolute;
  top: calc(100% + 15px);
  left: 5px;
  width: 12px;
  height: 12px;
  content: "";
  border-radius: 50%;
  background-color: lightBlue;
  transition: transform 200ms, background-color 200ms;
  box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.4);
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:checked ~ .theme-switch__label {
  background-color: lightSlateGray;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:checked ~ .theme-switch__label::before {
  color: lightSlateGray;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:checked ~ .theme-switch__label::after {
  color: turquoise;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li .resTheme .theme-switch__input:checked ~ .theme-switch__label span::after {
  transform: translate3d(30px, 0, 0);
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li ul {
  padding: 0;
  width: auto;
  min-height: auto;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li ul li {
  display: block;
  margin-top: 1rem;
  margin-right: 0.8rem;
  padding: 0;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li ul li a {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  color: #475569;
  font-weight: 300;
  font-size: 0.7rem;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li ul li a i svg {
  width: 0.4rem;
  height: 0.4rem;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li ul li:first-child {
  padding-bottom: 0;
  border-bottom: 0;
  margin-top: 1rem;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
  cursor: pointer;
}

.allHeaderHome .headerHomeContent .allHeaderHomeContentBotCats ul li:first-child {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e1e0ea;
}

@media screen and (max-width: 920px) {
  .allHeaderHome .headerHomeContent .headerHomeContentBot {
    position: absolute;
    opacity: 0;
    right: 0;
    width: 0;
    visibility: hidden;
  }
}

@media screen and (max-width: 920px) {
  .allHeaderHome {
    padding-top: 0;
    position: relative;
  }
}

.allSendTicket {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

.allSendTicket .sendTicket {
  background: #fff;
  padding: 1rem;
  width: 35%;
  margin: auto;
  border-radius: 0.3rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.allSendTicket .sendTicket .sendTicketPic {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 1rem;
}

.allSendTicket .sendTicket .sendTicketPic svg {
  width: 100%;
  height: 8rem;
}

.allSendTicket .sendTicket .sendTicketTitle {
  color: #475569;
  font-weight: 700;
  font-size: 1.1rem;
  text-align: right;
  margin-bottom: 1rem;
}

.allSendTicket .sendTicket textarea {
  height: 10rem;
  padding: 0.5rem;
  background: #e1e0ea;
  border: 1px solid #e1e0ea;
  border-radius: 0.2rem;
  width: 100%;
  font-size: 0.75rem;
  font-weight: 300;
  resize: vertical;
  outline-style: unset;
}

.allSendTicket .sendTicket .sendTicketButtons {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}

.allSendTicket .sendTicket .sendTicketButtons button {
  display: grid;
  background: #f21111;
  color: white;
  align-items: center;
  grid-template-columns: auto;
  justify-content: center;
  border-radius: 0.2rem;
  padding: 0.4rem 1rem;
  width: auto;
}

.allSendTicket .sendTicket .sendTicketButtons button:first-child {
  background: #00C58D;
}

.allSendTicket .sendTicket .sendTicketButtons .loading {
  fill: white;
  width: 1.2rem;
  height: 1.2rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 800px) {
  .allSendTicket .sendTicket {
    width: 95%;
  }
}

.allIndexHome {
  padding-top: 8.2rem;
}

.allIndexHome .allDownloadApp {
  background: rgba(0, 0, 0, 0.8);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}

.allIndexHome .allDownloadApp .downloadApp {
  width: 30%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}

.allIndexHome .allDownloadApp .downloadApp .pic {
  display: grid;
  justify-content: center;
  margin-bottom: 1rem;
}

.allIndexHome .allDownloadApp .downloadApp .pic img {
  width: 100%;
  height: 4rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allIndexHome .allDownloadApp .downloadApp .details {
  background: #fff;
  border-radius: 0.4rem;
  padding: 1rem;
}

.allIndexHome .allDownloadApp .downloadApp .details .topDetail {
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f5f5f5;
  color: black;
}

.allIndexHome .allDownloadApp .downloadApp .details .topDetail span {
  color: #e3342f;
}

.allIndexHome .allDownloadApp .downloadApp .details .detailBody {
  margin-top: 1rem;
}

.allIndexHome .allDownloadApp .downloadApp .details .detailBody ul li {
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.9);
  margin-bottom: 1rem;
}

.allIndexHome .allDownloadApp .downloadApp .details .detailBody ul li span {
  font-weight: 700;
  color: black;
}

.allIndexHome .allDownloadApp .downloadApp .details .detailBody ul li i {
  margin-top: 0.1rem;
}

.allIndexHome .allDownloadApp .downloadApp .details .detailBody ul li i svg {
  width: 1.5rem;
  fill: dodgerblue;
  height: 1.5rem;
}

.allIndexHome .allDownloadApp .downloadApp .details button {
  background: dodgerblue;
  box-shadow: 0 0 10px rgba(35, 205, 191, 0.8);
  width: 100%;
  padding: 0.5rem;
  text-align: center;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
}

@media screen and (max-width: 920px) {
  .allIndexHome {
    padding-top: 0;
  }

  .allIndexHome .allDownloadApp .downloadApp {
    width: 90%;
  }
}

.homeTopAdvertise {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  margin: auto;
  margin-bottom: 3rem;
}

.homeTopAdvertise .advertiseSlider .hooper {
  overflow: hidden;
  height: 25rem;
  position: relative;
}

.homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-navigation {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-navigation .hooper-next {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  background: transparent;
}

.homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-navigation .hooper-next svg {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.07), 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 1px 5px 0 rgba(0, 0, 0, 0.04);
  background: white;
  border-radius: 5rem;
  fill: black;
  font-size: 1.2rem;
}

.homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-navigation .hooper-prev {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  background: transparent;
}

.homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-navigation .hooper-prev svg {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.07), 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 1px 5px 0 rgba(0, 0, 0, 0.04);
  background: white;
  border-radius: 5rem;
  fill: black;
  font-size: 1.2rem;
}

.homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-pagination {
  position: absolute;
  right: 1rem;
}

.homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-pagination .hooper-indicators li {
  position: relative;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 5rem;
  background: white;
  overflow: hidden;
  color: white;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  margin-bottom: 1rem;
}

.homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-pagination .hooper-indicators button {
  background: white;
  overflow: hidden;
  color: white;
  position: absolute;
  width: 5rem;
  height: 2rem;
  top: 0;
  right: -4rem;
}

.homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-pagination .hooper-indicators .hooper-indicator.is-active {
  background: #f21111;
  color: #f21111;
}

.homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-pagination .hooper-indicators .hooper-indicator.is-active span {
  width: 0.7rem;
  height: 0.7rem;
  background: #f21111;
  color: #f21111;
}

.homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-track {
  display: grid;
}

.homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-track .hooper-slide {
  border-radius: 10px;
  overflow: hidden;
  height: 25rem;
  width: 100%;
}

.homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-track .hooper-slide a {
  position: relative;
}

.homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-track .hooper-slide a .over {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: transparent;
}

.homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-track .hooper-slide a img {
  width: 100%;
  height: 25rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.homeTopAdvertise .advertiseItems {
  display: grid;
  grid-gap: 1rem;
  width: 24rem;
  height: 25rem;
}

.homeTopAdvertise .advertiseItems .advertiseItem {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.homeTopAdvertise .advertiseItems .advertiseItem img {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 920px) {
  .homeTopAdvertise {
    grid-template-columns: 1fr;
  }

  .homeTopAdvertise .advertiseSlider {
    margin-top: 1rem;
  }

  .homeTopAdvertise .advertiseSlider .hooper {
    height: 100%;
  }

  .homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-track .hooper-slide {
    height: auto;
  }

  .homeTopAdvertise .advertiseSlider .hooper .hooper-list .hooper-track .hooper-slide a img {
    height: 100%;
  }

  .homeTopAdvertise .advertiseItems {
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 1fr;
  }
}

.siteProperties {
  margin: auto;
  margin-bottom: 3rem;
}

.siteProperties .sitePropertiesItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  justify-content: space-around;
  grid-gap: 1rem;
  background: #fff;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.siteProperties .sitePropertiesItems .sitePropertiesItem {
  display: grid;
  justify-content: center;
}

.siteProperties .sitePropertiesItems .sitePropertiesItem .sitePropertiesItemPic {
  width: 100%;
  display: grid;
  margin-bottom: 0.5rem;
  justify-content: center;
}

.siteProperties .sitePropertiesItems .sitePropertiesItem .sitePropertiesItemPic svg {
  width: 4rem;
  height: 4rem;
}

.siteProperties .sitePropertiesItems .sitePropertiesItem span {
  color: #475569;
  font-size: 0.9rem;
  font-weight: 700;
}

@media screen and (max-width: 920px) {
  .siteProperties .sitePropertiesItems {
    padding: 1rem;
  }

  .siteProperties .sitePropertiesItems .sitePropertiesItem span {
    font-size: 0.75rem;
  }
}

.container_shop {
  margin: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  margin-bottom: 3rem;
}

.container_shop .container_shop_right {
  height: 39rem;
  width: 13rem;
  display: grid;
  grid-gap: 1rem;
}

.container_shop .container_shop_right .container_shop_right_item {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
}

.container_shop .container_shop_right .container_shop_right_item img {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  height: 100%;
  width: 100%;
}

.container_shop .container_shop_left {
  display: grid;
  grid-gap: 1rem;
}

.container_shop .container_shop_left .container_shop_left_top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  height: 15rem;
  grid-gap: 1rem;
}

.container_shop .container_shop_left .container_shop_left_top .container_shop_left_top_item {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
}

.container_shop .container_shop_left .container_shop_left_top .container_shop_left_top_item a {
  display: grid;
}

.container_shop .container_shop_left .container_shop_left_top .container_shop_left_top_item a img {
  border-radius: 10px;
  width: 100%;
  height: 15rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.container_shop .container_shop_left .container_shop_left_bot {
  background: #fff;
  display: grid;
  grid-template-columns: 3fr 1fr;
  border-radius: 10px;
  overflow: hidden;
  border-top: 4px solid #f21111;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  position: relative;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_pic {
  position: relative;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_pic span {
  padding: 0.4rem;
  position: absolute;
  color: #ffffff;
  font-size: 1rem;
  text-align: center;
  top: 0;
  width: 100%;
  opacity: 0.9;
  background: #f21111;
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
  z-index: 3;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_pic .container_shop_suggest_pic_img {
  padding: 1rem;
  margin-top: 2rem;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_pic .container_shop_suggest_pic_img img {
  width: 100%;
  height: 90%;
  -o-object-fit: contain;
     object-fit: contain;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation {
  padding: 1rem;
  position: relative;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation .container_shop_suggest_price {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 0.5rem;
  justify-content: right;
  margin-bottom: 1rem;
  align-items: center;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation .container_shop_suggest_price h3 {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.571;
  color: #f21111;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation .container_shop_suggest_price h3 span {
  font-size: 0.8rem;
  letter-spacing: 0.1px;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation .container_shop_suggest_price s {
  line-height: 1.571;
  color: #a0a0a0;
  font-size: 0.8rem;
  font-weight: 300;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation .container_shop_suggest_price h5 {
  font-size: 1rem;
  line-height: 1.571;
  font-weight: 500;
  background-color: #f21111;
  color: #fff;
  border-radius: 16px;
  padding: 0 0.5rem;
  text-align: center;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation h4 {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.571;
  color: #475569;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  letter-spacing: 0.1px;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation h6 {
  font-size: 0.8rem;
  color: #4a5f73;
  font-weight: 300;
  margin-top: 1rem;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation ul {
  margin-top: 0.5rem;
  overflow: hidden;
  height: 10rem;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation ul li {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 0.4rem;
  align-items: center;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation ul li:before {
  border-radius: 10px;
  width: 6px;
  height: 6px;
  background-color: #777;
  content: "";
  display: inline-block;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation ul li span {
  font-size: 0.8rem;
  color: #777;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation .timer {
  direction: ltr;
  bottom: 3rem;
  right: 0.5rem;
  display: grid;
  justify-content: right;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation .timer .flip-clock {
  display: grid;
  justify-content: right;
  grid-template-columns: repeat(4, auto);
  align-items: center;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation .timer .flip-clock span span {
  font-size: 1.5rem;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation .timer .flip-clock span span:nth-child(2) {
  font-size: 0;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_suggest .container_shop_suggest_explanation .timer .flip-clock span span b {
  font-size: 1.5rem;
  padding: 0;
  color: white;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_list {
  display: grid;
  padding: 1rem;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_list ul {
  height: 17.2rem;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_list ul li {
  display: grid;
  align-items: center;
  color: #475569;
  font-size: 0.7rem;
  font-weight: 300;
  padding: 0.4rem 1rem;
  border-bottom: 1px solid #e1e0ea;
  height: 2.5rem;
  cursor: pointer;
  position: relative;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_list ul li span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_list ul li .active {
  position: absolute;
  top: 98%;
  width: 100%;
  height: 1px;
  background: #f21111;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_list ul li:hover {
  background: #f21111;
  color: #fff;
  border-radius: 0.3rem;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_list ul li:last-child {
  border-bottom: 0;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_list .container_shop_list_see_all {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 1rem;
  align-items: center;
  justify-content: right;
  background: #f21111;
  padding: 0 0.5rem;
  border-radius: 0.3rem;
  height: 2.5rem;
  margin-top: 1rem;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_list .container_shop_list_see_all i {
  width: 1rem;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_list .container_shop_list_see_all i svg {
  fill: #ffffff;
  width: 1rem;
  height: 1rem;
}

.container_shop .container_shop_left .container_shop_left_bot .container_shop_list .container_shop_list_see_all a {
  text-align: right;
  font-size: 0.8rem;
  background: #f21111;
  font-weight: 300;
  color: #ffffff;
}

.container_shop .container_shop_left .container_shop_left_bot .overLoad {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 20;
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.container_shop .container_shop_left .container_shop_left_bot .overLoad svg {
  fill: white;
  width: 3rem;
  height: 3rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 1200px) {
  .container_shop {
    display: block;
  }

  .container_shop .container_shop_right {
    visibility: hidden;
    position: absolute;
    top: 0;
    opacity: 0;
  }

  .container_shop .container_shop_left .container_shop_left_bot {
    display: block;
  }
}

@media screen and (max-width: 920px) {
  .container_shop .container_shop_left .container_shop_left_top {
    height: auto;
  }

  .container_shop .container_shop_left .container_shop_left_top .container_shop_left_top_item a img {
    height: auto;
  }

  .container_shop .container_shop_left .container_shop_left_bot {
    position: absolute;
    top: 0;
    visibility: hidden;
    opacity: 0;
  }
}

.allSearchAdvance {
  margin: auto;
  margin-bottom: 3rem;
}

.allSearchAdvance .searchAdvance {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  margin: auto;
}

.allSearchAdvance .searchAdvance .searchAdvanceTitle {
  background: #fff;
  margin: auto;
  width: 70%;
  padding: 1rem;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  margin-bottom: -0.3rem;
  text-align: center;
  z-index: 2;
}

.allSearchAdvance .searchAdvance .searchAdvanceTitle span {
  font-size: 1rem;
  color: #475569;
  font-weight: 700;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer {
  background: #fff;
  padding: 1rem;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight {
  display: grid;
  grid-gap: 1rem;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, auto));
  justify-content: right;
  align-items: center;
  grid-gap: 1.5rem;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  justify-content: right;
  grid-gap: 0.5rem;
  align-items: center;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem label {
  line-height: 40px;
  text-align: right;
  white-space: nowrap;
  font-weight: 300;
  font-size: 0.8rem;
  color: #475569;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem input {
  border-radius: 5px;
  padding: 0.5rem;
  width: 15rem;
  font-size: 0.8rem;
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  color: #475569;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel {
  position: relative;
  margin-top: 0.5rem;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel .categoryShow {
  background: #f5f5f5;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  border-radius: 0.3rem;
  cursor: pointer;
  width: 15rem;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel .categoryShow h4 {
  font-weight: 450;
  font-size: 0.7rem;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel .categoryShow i {
  position: relative;
  display: grid;
  align-items: center;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel .categoryShow i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #f21111;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel .categoryShow ul {
  position: relative;
  box-shadow: 0 0 0;
  background: transparent;
  border-radius: 0;
  height: auto;
  direction: rtl;
  top: auto;
  right: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, auto));
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  z-index: 1;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel .categoryShow ul li {
  position: relative;
  padding: 0;
  z-index: 1;
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel .categoryShow ul li i {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  height: 0.7rem;
  justify-content: center;
  align-items: center;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel .categoryShow ul li i svg {
  width: 0.6rem;
  height: 0.6rem;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel .categoryShow ul li span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.1rem 0.5rem;
  background: white;
  border-radius: 0.2rem;
  color: #475569;
  font-size: 0.8rem;
  font-weight: 300;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel .categoryShow ul li:hover {
  background: transparent;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel ul {
  position: absolute;
  top: 110%;
  right: 0;
  box-shadow: rgba(0, 0, 0, 0.16) 0 1px 3px;
  background: #f5f5f5;
  border-radius: 0.2rem;
  width: 100%;
  z-index: 100;
  direction: ltr;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel ul .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  height: 10rem;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel ul li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  direction: rtl;
  padding: 0.5rem;
  padding-right: 1rem;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  color: #475569;
  font-weight: 300;
  font-size: 0.8rem;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel ul li i svg {
  width: 0.5rem;
  height: 0.5rem;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel ul li input {
  padding: 0.3rem;
  background: #f5f5f5;
  border: 2px solid #f5f5f5;
  border-radius: 0.2rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
  font-size: 0.75rem;
  font-weight: 300;
  box-shadow: 0 0 0 0;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel ul li input:focus {
  border: 2px solid #5A8DEE;
  background: #F6F6F6;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel ul .searchUser {
  display: grid;
  grid-template-columns: 1fr;
  cursor: auto;
  border-bottom: 2px solid #f5f5f5;
  padding-right: 0.5rem;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel ul .searchUser button {
  height: 1.8rem;
  width: 1.8rem;
  font-size: 1rem;
  border-radius: 0.2rem;
  background: transparent;
  font-weight: 300;
  transition: all 0.3s ease-in-out;
  color: rgba(0, 0, 0, 0.87);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel ul .searchUser button:hover {
  background: rgba(246, 246, 246, 0.4);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel ul .searchUser:hover {
  background: white;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItemRange {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  justify-content: right;
  grid-gap: 0.5rem;
  align-items: center;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItemRange label {
  font-weight: 300;
  font-size: 0.8rem;
  color: #475569;
  line-height: 40px;
  text-align: right;
  white-space: nowrap;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItemRange .simple-range-slider .simple-range-slider-bg-bar .simple-range-slider-bar[data-v-06329002] {
  background: #f21111;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItemRange .simple-range-slider .simple-range-slider-popover[data-v-06329002] {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItemRange .simple-range-slider .simple-range-slider-bg-bar {
  width: 15rem;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItemRange .simple-range-slider .simple-range-slider-bg-bar .simple-range-slider-anchor[data-v-06329002] {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerLeft button {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  color: #fff;
  background: #f21111;
  border-radius: 10px;
  padding: 0.75rem 2rem;
  font-size: 0.75rem;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerLeft button i {
  display: grid;
  align-items: center;
  justify-content: center;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerLeft button i svg {
  fill: white;
  width: 1rem;
  height: 1rem;
}

.allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerLeft button i .loading {
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allSearchAdvance .containerCategories {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  padding-left: 1rem;
  margin-top: 1rem;
}

.allSearchAdvance .containerCategories .containerCategoriesTitle {
  display: grid;
  grid-template-columns: auto 1fr;
}

.allSearchAdvance .containerCategories .containerCategoriesTitle label {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 31px;
  white-space: nowrap;
  border-bottom: 2px solid #f21111;
  padding: 1rem;
  padding-right: 0;
  margin-right: 1rem;
  color: #475569;
}

.allSearchAdvance .containerCategories .containerCategoriesTitle .moreProduct {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: left;
  grid-gap: 0.4rem;
  color: #616161;
  padding: 1rem;
  padding-left: 0;
  border-bottom: 2px solid #f5f5f5;
}

.allSearchAdvance .containerCategories .containerCategoriesTitle .moreProduct a {
  color: #616161;
  font-size: 0.85rem;
  font-weight: 300;
}

.allSearchAdvance .containerCategories .containerCategoriesTitle .moreProduct i {
  color: #616161;
  font-weight: 300;
  font-size: 1rem;
  display: grid;
  align-items: center;
  justify-content: left;
}

.allSearchAdvance .containerCategories .containerCategoriesTitle .moreProduct i svg {
  fill: #616161;
  width: 0.6rem;
  height: 0.6rem;
}

.allSearchAdvance .containerCategories .hooper {
  display: grid;
  overflow: hidden;
  height: auto;
}

.allSearchAdvance .containerCategories .hooper .hooper-list {
  padding: 1rem 0;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-navigation.is-rtl .hooper-next {
  left: -0.75rem;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-navigation.is-rtl .is-disabled {
  visibility: hidden;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-navigation.is-rtl .hooper-prev {
  right: 0;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-navigation.is-rtl button svg {
  background: white;
  width: 2rem;
  height: 4rem;
  padding: 0.1rem;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  fill: #475569;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide {
  padding-right: 1rem;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem {
  overflow: hidden;
  padding: 1rem;
  transition: all 0.2s ease-in-out;
  border-radius: 10px;
  position: relative;
  display: grid;
  border: 1px solid #f5f5f5;
  height: 100%;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .offProduct {
  position: absolute;
  top: 0;
  right: 1.5rem;
  z-index: 100;
  background-color: rgb(252, 92, 99);
  color: white;
  line-height: 2;
  font-weight: 300;
  font-size: 13px;
  width: 1.7rem;
  height: 3.9rem;
  text-align: center;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .offProduct span:before {
  content: "";
  border-color: transparent rgb(252, 92, 99) transparent transparent;
  border-top: 12px solid #FC5C63;
  border-left: 12px solid transparent;
  position: absolute;
  top: 100%;
  right: 0;
  color: white;
  font-size: 12px;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .offProduct span:after {
  content: "";
  border-color: transparent transparent rgb(252, 92, 99);
  width: 0;
  height: 0;
  border-top: 12px solid #FC5C63;
  border-right: 12px solid transparent;
  position: absolute;
  top: 100%;
  left: 0;
  color: white;
  font-size: 12px;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .pic {
  overflow: hidden;
  height: 14rem;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .pic img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: center;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postTitle {
  margin-top: 0.5rem;
  height: 3rem;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postTitle a {
  text-align: right;
  max-width: 90%;
  font-size: 0.85rem;
  line-height: 25px;
  color: #475569;
  font-weight: 300;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  opacity: 0.7;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.4rem;
  align-items: center;
  margin-top: 1rem;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: left;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem .offPrice {
  display: grid;
  justify-content: left;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem .offPrice s {
  font-size: 0.8rem;
  line-height: 1.692;
  font-weight: 300;
  color: #ababab;
  display: flex;
  width: 100%;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem h3 {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.3rem;
  text-align: left;
  width: 100%;
  color: #475569;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.5;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem h3 span {
  font-size: 0.8rem;
  letter-spacing: 0.1px;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i {
  color: white;
  padding: 0.3rem;
  border-radius: 5px;
  display: grid;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.2);
  border-top: 2px solid rgba(255, 0, 0, 0.5);
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i svg {
  width: 1rem;
  height: 1rem;
  fill: #f21111;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i .loading {
  fill: #f21111;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .checkCount {
  border-bottom: 1px solid #e1e0ea;
  z-index: 2;
  height: 27px;
  position: relative;
  width: 100%;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .checkCount span {
  color: #475569;
  font-size: 1rem;
  line-height: 1.222;
  font-weight: 400;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 115%;
  background: #fff;
  padding: 0 1rem;
  height: 21px;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions {
  position: absolute;
  left: -0.5rem;
  top: 0;
  display: grid;
  justify-content: left;
  background: white;
  width: 2.5rem;
  padding: 0.5rem;
  border: 1px solid #f5f5f5;
  margin-left: 0.5rem;
  transition: all 0.3s ease-in-out;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  border-bottom-right-radius: 10px;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption {
  margin-top: 1rem;
  cursor: pointer;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.4rem;
  height: 1.3rem;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption i svg {
  fill: #535353;
  width: 1.3rem;
  height: 1.3rem;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption i .loading {
  fill: #9b9b9b;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption .active svg {
  fill: #F71938;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption:first-child {
  margin-top: 0.5rem;
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.allSearchAdvance .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem:hover .productOptions {
  visibility: visible;
  opacity: 1;
  left: -0.5rem;
}

@media screen and (max-width: 720px) {
  .allSearchAdvance .searchAdvance .searchAdvanceTitle {
    width: 90%;
  }

  .allSearchAdvance .searchAdvance .searchAdvanceTitle span {
    font-size: 0.8rem;
  }

  .allSearchAdvance .searchAdvance .searchAdvanceContainer {
    grid-template-columns: 1fr;
  }

  .allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight {
    grid-template-columns: 1fr;
  }

  .allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems {
    grid-template-columns: 1fr;
  }

  .allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem {
    padding: 0 1rem;
    grid-template-columns: 1fr;
  }

  .allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem input {
    width: 100%;
  }

  .allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel {
    position: relative;
    margin-top: 0.5rem;
  }

  .allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItem .allCategoryPanel .categoryShow {
    width: 100%;
  }

  .allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItemRange {
    padding: 0 1rem;
    grid-template-columns: 1fr;
  }

  .allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerRight .searchAdvanceItems .searchAdvanceItemRange .rangeContainer .simple-range-slider .simple-range-slider-bg-bar {
    width: 100%;
    min-width: 1px;
  }

  .allSearchAdvance .searchAdvance .searchAdvanceContainer .searchAdvanceContainerLeft {
    display: grid;
    justify-content: center;
  }
}

.containerCategoriesSuggest {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  margin: auto;
  margin-bottom: 3rem;
}

.containerCategoriesSuggest .containerCategories {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  padding-right: 1rem;
}

.containerCategoriesSuggest .containerCategories .containerCategoriesTitle {
  display: grid;
  grid-template-columns: auto 1fr;
}

.containerCategoriesSuggest .containerCategories .containerCategoriesTitle label {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 31px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border-bottom: 2px solid #f21111;
  padding: 1rem;
  padding-right: 0;
  color: #475569;
}

.containerCategoriesSuggest .containerCategories .containerCategoriesTitle .moreProduct {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: left;
  grid-gap: 0.4rem;
  color: #616161;
  padding: 1rem;
  padding-left: 0;
  border-bottom: 2px solid #f5f5f5;
  margin-left: 1rem;
}

.containerCategoriesSuggest .containerCategories .containerCategoriesTitle .moreProduct a {
  color: #475569;
  font-size: 0.85rem;
  font-weight: 300;
}

.containerCategoriesSuggest .containerCategories .containerCategoriesTitle .moreProduct i {
  color: #475569;
  font-weight: 300;
  font-size: 1rem;
  display: grid;
  align-items: center;
  justify-content: left;
}

.containerCategoriesSuggest .containerCategories .containerCategoriesTitle .moreProduct i svg {
  fill: #616161;
  width: 0.6rem;
  height: 0.6rem;
}

@media screen and (max-width: 700px) {
  .containerCategoriesSuggest .containerCategories .containerCategoriesTitle label {
    font-size: 1rem;
  }

  .containerCategoriesSuggest .containerCategories .containerCategoriesTitle .moreProduct a {
    font-size: 0.7rem;
  }
}

.containerCategoriesSuggest .containerCategories .hooper {
  overflow: hidden;
  min-height: 24rem;
  margin: 0.5rem;
  margin-right: 0;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-navigation.is-rtl .hooper-next {
  left: 0.2rem;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-navigation.is-rtl .is-disabled {
  visibility: hidden;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-navigation.is-rtl .hooper-prev {
  right: -0.8rem;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-navigation.is-rtl button svg {
  background: #f5f5f5;
  width: 2rem;
  height: 4rem;
  padding: 0.1rem;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  fill: #475569;
}

@media screen and (max-width: 700px) {
  .containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-navigation.is-rtl button svg {
    height: 2rem;
  }
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track {
  padding: 0.5rem 0;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide {
  padding-left: 1rem;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem {
  overflow: hidden;
  padding: 1rem;
  transition: all 0.2s ease-in-out;
  border-radius: 10px;
  position: relative;
  display: grid;
  border: 1px solid #f5f5f5;
  height: 100%;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .offProduct {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 100;
  background-color: #f21111;
  color: white;
  line-height: 2;
  font-weight: 300;
  font-size: 13px;
  width: 2.4rem;
  height: 2.4rem;
  text-align: center;
  border-radius: 5rem;
  display: grid;
  align-items: center;
  justify-content: center;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .pic {
  overflow: hidden;
  height: 14rem;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .pic img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: center;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postTitle {
  margin-top: 0.5rem;
  height: 3rem;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postTitle a {
  text-align: right;
  max-width: 90%;
  font-size: 0.85rem;
  line-height: 25px;
  color: #475569;
  font-weight: 300;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  opacity: 0.7;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.4rem;
  align-items: center;
  margin-top: 1rem;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: left;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem .offPrice {
  display: grid;
  justify-content: left;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem .offPrice s {
  font-size: 0.8rem;
  line-height: 1.692;
  font-weight: 300;
  color: #ababab;
  display: flex;
  width: 100%;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem h3 {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.3rem;
  text-align: left;
  width: 100%;
  color: #475569;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.5;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem h3 span {
  font-size: 0.8rem;
  letter-spacing: 0.1px;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i {
  color: white;
  padding: 0.3rem;
  border-radius: 5px;
  display: grid;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.2);
  border-top: 2px solid rgba(255, 0, 0, 0.5);
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i svg {
  width: 1rem;
  height: 1rem;
  fill: #f21111;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i .loading {
  fill: #f21111;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .checkCount {
  border-bottom: 1px solid #e1e0ea;
  z-index: 2;
  height: 27px;
  position: relative;
  width: 100%;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .checkCount span {
  color: #475569;
  font-size: 1rem;
  line-height: 1.222;
  font-weight: 400;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 115%;
  background: #fff;
  padding: 0 1rem;
  height: 21px;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions {
  position: absolute;
  left: -0.5rem;
  top: 0;
  display: grid;
  justify-content: left;
  background: #fff;
  width: 2.5rem;
  padding: 0.5rem;
  border: 1px solid #f5f5f5;
  margin-left: 0.5rem;
  transition: all 0.3s ease-in-out;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  border-bottom-right-radius: 10px;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption {
  margin-top: 1rem;
  cursor: pointer;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.4rem;
  height: 1.3rem;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption i svg {
  fill: #535353;
  width: 1.3rem;
  height: 1.3rem;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption i .loading {
  fill: #535353;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption .active svg {
  fill: #F71938;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption:first-child {
  margin-top: 0.5rem;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem:hover .productOptions {
  visibility: visible;
  opacity: 1;
  left: -0.5rem;
}

@media screen and (max-width: 700px) {
  .containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .pic {
    height: auto;
  }

  .containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .pic img {
    height: 8rem;
  }

  .containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postTitle a {
    font-size: 0.7rem;
  }

  .containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem s {
    font-size: 0.7rem;
  }

  .containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem h3 {
    font-size: 0.8rem;
  }

  .containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem h3 span {
    letter-spacing: 0.1px;
    font-size: 0.6rem;
  }

  .containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i svg {
    width: 0.7rem;
    height: 0.7rem;
  }

  .containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i .loading {
    width: 0.7rem;
    height: 0.7rem;
  }
}

@media screen and (max-width: 700px) {
  .containerCategoriesSuggest .containerCategories .hooper {
    min-height: 18rem;
  }
}

.containerCategoriesSuggest .containerCategoriesSuggestItem {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.12);
  overflow: hidden;
  width: 17rem;
}

.containerCategoriesSuggest .containerCategoriesSuggestItem .hooper {
  overflow: hidden;
  height: auto;
}

.containerCategoriesSuggest .containerCategoriesSuggestItem .hooper .hooper-list .hooper-track .hooper-slide {
  padding: 1rem;
  border-radius: 0.3rem;
}

.containerCategoriesSuggest .containerCategoriesSuggestItem .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesSuggestItemTitle {
  text-align: center;
  font-size: 1.1rem;
  padding-bottom: 1rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 13px;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.containerCategoriesSuggest .containerCategoriesSuggestItem .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesSuggestItemTitle:before {
  height: 1px;
  background: #f5f5f5;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  box-sizing: inherit;
}

.containerCategoriesSuggest .containerCategoriesSuggestItem .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesSuggestItemTitle:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #f5f5f5, rgb(255, 0, 0));
  content: "";
  transition: all 11s ease-in-out;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.1);
}

.containerCategoriesSuggest .containerCategoriesSuggestItem .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesSuggestItemPic img {
  width: 100%;
  height: 15rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.containerCategoriesSuggest .containerCategoriesSuggestItem .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesSuggestItemSubject {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 0.5rem;
}

.containerCategoriesSuggest .containerCategoriesSuggestItem .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesSuggestItemSubject a {
  text-align: right;
  max-width: 90%;
  font-size: 0.9rem;
  line-height: 25px;
  color: #475569;
  font-weight: 300;
  opacity: 0.7;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  height: 3rem;
}

.containerCategoriesSuggest .containerCategoriesSuggestItem .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesSuggestItemSubject span {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 0.3rem;
  justify-content: left;
  align-items: center;
  text-align: left;
  color: #475569;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.5;
  margin-top: 1.5rem;
}

.containerCategoriesSuggest .containerCategoriesSuggestItem .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesSuggestItemSubject span span {
  font-size: 0.8rem;
  letter-spacing: 0.1px;
  margin-top: 0;
  display: block;
}

.containerCategoriesSuggest .containerCategoriesSuggestItem .hooper .hooper-list .hooper-track .hooper-slide.is-active.is-current .containerCategoriesSuggestItemTitle:after {
  width: 100%;
}

.containerCategoriesSuggest .containerCategories .hooper .hooper-list .hooper-track .hooper-slide:hover .productOption {
  left: -0.5rem;
}

@media screen and (max-width: 920px) {
  .containerCategoriesSuggest {
    grid-template-columns: 1fr;
  }

  .containerCategoriesSuggest .containerCategoriesSuggestItem {
    width: auto;
  }
}

.containerBrands {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin: auto;
  margin-bottom: 3rem;
}

.containerBrands .containerBrandsTitle {
  display: grid;
  grid-template-columns: auto 1fr;
}

.containerBrands .containerBrandsTitle label {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 31px;
  white-space: nowrap;
  border-bottom: 2px solid #f21111;
  padding: 1rem;
  padding-right: 0;
  margin-right: 1rem;
  color: #475569;
}

.containerBrands .containerBrandsTitle .moreProduct {
  border-bottom: 2px solid #f5f5f5;
}

.containerBrands .hooper {
  overflow: hidden;
  height: auto;
}

.containerBrands .hooper .hooper-list {
  padding: 1rem 0;
}

.containerBrands .hooper .hooper-list .hooper-navigation.is-rtl .hooper-next {
  left: -0.75rem;
}

.containerBrands .hooper .hooper-list .hooper-navigation.is-rtl .is-disabled {
  visibility: hidden;
}

.containerBrands .hooper .hooper-list .hooper-navigation.is-rtl .hooper-prev {
  right: 0;
}

.containerBrands .hooper .hooper-list .hooper-navigation.is-rtl button svg {
  background: #f5f5f5;
  width: 2rem;
  height: 4rem;
  padding: 0.1rem;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  fill: #475569;
}

.containerBrands .hooper .hooper-list .hooper-track .hooper-slide {
  padding-left: 1rem;
  border-radius: 10px;
  position: relative;
}

.containerBrands .hooper .hooper-list .hooper-track .hooper-slide a {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #f5f5f5;
  display: grid;
  height: 100%;
}

.containerBrands .hooper .hooper-list .hooper-track .hooper-slide a .pic {
  overflow: hidden;
  height: 14rem;
}

.containerBrands .hooper .hooper-list .hooper-track .hooper-slide a .pic img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: center;
}

.containerBrands .hooper .hooper-list .hooper-track .hooper-slide a span {
  position: absolute;
  left: 1rem;
  top: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
  padding: 0.2rem 1rem;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.1);
}

.containerBrands .hooper .hooper-list .hooper-track .hooper-slide a span svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: #f21111;
}

.containerBrands .hooper .hooper-list .hooper-track .hooper-slide a:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

.containerBrands .hooper .hooper-list .hooper-track .hooper-slide.is-active.is-current a {
  margin-right: 1rem;
}

.allBackProduct {
  height: 31rem;
  margin-bottom: 4rem;
}

.allBackProduct .allBackProductBlocks {
  height: 24rem;
  background-attachment: fixed;
  position: relative;
  background-size: cover;
  padding: 2rem 0;
}

.allBackProduct .allBackProductBlocks:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  content: "";
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock {
  margin: auto;
  position: relative;
  z-index: 100;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .allBackProductTitle {
  text-align: center;
  margin-bottom: 3rem;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .allBackProductTitle h3 {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .allBackProductTitle p {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .allBackProductTitle p a {
  color: #f21111;
  font-size: 1rem;
  border-bottom: 1px dashed #f21111;
  font-weight: 500;
}

@media screen and (max-width: 720px) {
  .allBackProduct .allBackProductBlocks .allBackProductBlock .allBackProductTitle h3 {
    font-size: 1.1rem;
  }

  .allBackProduct .allBackProductBlocks .allBackProductBlock .allBackProductTitle p {
    font-size: 0.65rem;
  }

  .allBackProduct .allBackProductBlocks .allBackProductBlock .allBackProductTitle p a {
    font-size: 0.65rem;
  }
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper {
  overflow: hidden;
  min-height: 22rem;
  outline: transparent;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-navigation.is-rtl .hooper-next {
  left: -0.8rem;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-navigation.is-rtl .is-disabled {
  visibility: hidden;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-navigation.is-rtl .hooper-prev {
  right: -0.8rem;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-navigation.is-rtl button svg {
  background: #f5f5f5;
  width: 2rem;
  height: 4rem;
  padding: 0.1rem;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  fill: #475569;
}

@media screen and (max-width: 700px) {
  .allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-navigation.is-rtl button svg {
    height: 2rem;
  }
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide {
  padding: 0 0.5rem;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a {
  display: grid;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
  transition: all 0.2s ease-in-out;
  position: relative;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .pic {
  overflow: hidden;
  height: 11rem;
  position: relative;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .pic img {
  width: 100%;
  height: 11rem;
  -o-object-fit: contain;
     object-fit: contain;
  transition: all 0.6s ease-in-out;
  padding-top: 1rem;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .pic img:nth-child(2) {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .postTitle a {
  text-align: center;
  max-width: 90%;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 25px;
  color: #475569;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  opacity: 0.7;
  padding: 0;
  height: auto;
  box-shadow: 0 0 0 0;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .postPrice {
  display: grid;
  grid-gap: 0.4rem;
  align-items: center;
  margin-top: 0.5rem;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem s {
  font-size: 0.8rem;
  line-height: 1.692;
  font-weight: 300;
  color: #ababab;
  text-align: center;
  width: 100%;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem h3 {
  text-align: center;
  width: 100%;
  color: #475569;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem h3 span {
  letter-spacing: 0.1px;
  font-size: 0.8rem;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem i {
  color: white;
  padding: 0.5rem;
  border-radius: 0.4rem;
  display: grid;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem i svg {
  width: 1rem;
  height: 1rem;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .checkCount {
  border-bottom: 1px solid #e1e0ea;
  z-index: 2;
  height: 27px;
  position: relative;
  width: 100%;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .checkCount span {
  color: #475569;
  font-size: 1rem;
  line-height: 1.222;
  font-weight: 400;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 115%;
  background: #fff;
  padding: 0 1rem;
  height: 21px;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .productOption {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 100;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .productOption i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.55rem;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .productOption i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .productOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .productOption i .loading {
  fill: #9b9b9b;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a:hover .pic img:nth-child(1) {
  top: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  position: absolute;
}

.allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a:hover .pic img:nth-child(2) {
  position: relative;
  top: auto;
  visibility: visible;
  opacity: 1;
  right: auto;
}

@media screen and (max-width: 700px) {
  .allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .pic {
    height: auto;
  }

  .allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .pic img {
    height: 8rem;
  }

  .allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .postTitle a {
    font-size: 0.7rem;
  }

  .allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem s {
    font-size: 0.7rem;
  }

  .allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem h3 {
    font-size: 1rem;
  }

  .allBackProduct .allBackProductBlocks .allBackProductBlock .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem h3 span {
    letter-spacing: 0.1px;
    font-size: 0.6rem;
  }
}

@media screen and (max-width: 700px) {
  .allBackProduct .allBackProductBlocks .allBackProductBlock .allBackProductTitle {
    margin-bottom: 4rem;
  }

  .allBackProduct .allBackProductBlocks .allBackProductBlock .hooper {
    min-height: 17rem;
  }
}

@media screen and (max-width: 700px) {
  .allBackProduct {
    height: 24rem;
  }

  .allBackProduct .allBackProductBlocks {
    height: 20rem;
  }
}

.bigSlider {
  margin-bottom: 4rem;
}

.bigSlider .hooper {
  overflow: hidden;
  height: auto;
  position: relative;
}

.bigSlider .hooper .hooper-list .hooper-navigation .hooper-next {
  background: transparent;
}

.bigSlider .hooper .hooper-list .hooper-navigation .hooper-next svg {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.07), 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 1px 5px 0 rgba(0, 0, 0, 0.04);
  background: white;
  border-radius: 5rem;
  fill: #f21111;
  width: 2.5rem;
  height: 2.5rem;
}

.bigSlider .hooper .hooper-list .hooper-navigation .hooper-prev {
  background: transparent;
}

.bigSlider .hooper .hooper-list .hooper-navigation .hooper-prev svg {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.07), 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 1px 5px 0 rgba(0, 0, 0, 0.04);
  background: white;
  border-radius: 5rem;
  fill: #f21111;
  width: 2.5rem;
  height: 2.5rem;
}

.bigSlider .hooper .hooper-list .hooper-pagination .hooper-indicators li {
  position: relative;
  width: 0.7rem;
  height: 0.7rem;
  margin-left: 0.5rem;
  border-radius: 5rem;
  background: white;
  overflow: hidden;
  color: white;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  margin-bottom: 1rem;
}

.bigSlider .hooper .hooper-list .hooper-pagination .hooper-indicators button {
  background: white;
  overflow: hidden;
  color: white;
  width: 5rem;
  height: 2rem;
  position: absolute;
  right: -2rem;
}

.bigSlider .hooper .hooper-list .hooper-pagination .hooper-indicators .hooper-indicator.is-active {
  background: #f21111;
  color: #f21111;
}

.bigSlider .hooper .hooper-list .hooper-pagination .hooper-indicators .hooper-indicator.is-active span {
  width: 0.7rem;
  height: 0.7rem;
  background: #f21111;
  color: #f21111;
}

.bigSlider .hooper .hooper-list .hooper-track .hooper-slide a img {
  width: 100%;
  min-height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 700px) {
  .bigSlider .hooper .hooper-list .hooper-track .hooper-slide a img {
    min-height: auto;
  }
}

.mainCategory .allHomeHooper {
  margin: auto;
  margin-bottom: 3rem;
}

.mainCategory .allHomeHooper .containerCategories {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  padding-left: 1rem;
}

.mainCategory .allHomeHooper .containerCategories .containerCategoriesTitle {
  display: grid;
  grid-template-columns: auto 1fr;
}

.mainCategory .allHomeHooper .containerCategories .containerCategoriesTitle label {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 31px;
  white-space: nowrap;
  border-bottom: 2px solid #f21111;
  padding: 1rem;
  padding-right: 0;
  margin-right: 1rem;
  color: #475569;
}

.mainCategory .allHomeHooper .containerCategories .containerCategoriesTitle .moreProduct {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: left;
  grid-gap: 0.4rem;
  color: #616161;
  padding: 1rem;
  padding-left: 0;
  border-bottom: 2px solid #f5f5f5;
}

.mainCategory .allHomeHooper .containerCategories .containerCategoriesTitle .moreProduct a {
  color: #475569;
  font-size: 0.85rem;
  font-weight: 300;
}

.mainCategory .allHomeHooper .containerCategories .containerCategoriesTitle .moreProduct i {
  font-weight: 300;
  font-size: 1rem;
  display: grid;
  align-items: center;
  justify-content: left;
}

.mainCategory .allHomeHooper .containerCategories .containerCategoriesTitle .moreProduct i svg {
  fill: #616161;
  width: 0.6rem;
  height: 0.6rem;
}

@media screen and (max-width: 700px) {
  .mainCategory .allHomeHooper .containerCategories .containerCategoriesTitle label {
    font-size: 1rem;
  }

  .mainCategory .allHomeHooper .containerCategories .containerCategoriesTitle .moreProduct a {
    font-size: 0.7rem;
  }
}

.mainCategory .allHomeHooper .containerCategories .hooper {
  display: grid;
  overflow: hidden;
  height: auto;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list {
  padding: 1rem 0;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-navigation.is-rtl .hooper-next {
  left: -0.75rem;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-navigation.is-rtl .is-disabled {
  visibility: hidden;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-navigation.is-rtl .hooper-prev {
  right: 0;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-navigation.is-rtl button svg {
  background: #f5f5f5;
  width: 2rem;
  height: 4rem;
  padding: 0.1rem;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  fill: #475569;
}

@media screen and (max-width: 700px) {
  .mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-navigation.is-rtl button svg {
    height: 2rem;
  }
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide {
  padding-right: 1rem;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem {
  overflow: hidden;
  padding: 1rem;
  transition: all 0.2s ease-in-out;
  border-radius: 10px;
  position: relative;
  display: grid;
  border: 1px solid #f5f5f5;
  height: 100%;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .offProduct {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 100;
  background-color: #f21111;
  color: white;
  line-height: 2;
  font-weight: 300;
  font-size: 13px;
  width: 2.4rem;
  height: 2.4rem;
  text-align: center;
  border-radius: 5rem;
  display: grid;
  align-items: center;
  justify-content: center;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .pic {
  overflow: hidden;
  height: 14rem;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .pic img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: center;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postTitle {
  margin-top: 0.5rem;
  height: 3rem;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postTitle a {
  text-align: right;
  max-width: 90%;
  font-size: 0.85rem;
  line-height: 25px;
  color: #475569;
  font-weight: 300;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  opacity: 0.7;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.4rem;
  align-items: center;
  margin-top: 1rem;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: left;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem .offPrice {
  display: grid;
  justify-content: left;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem .offPrice s {
  font-size: 0.8rem;
  line-height: 1.692;
  font-weight: 300;
  color: #ababab;
  display: flex;
  width: 100%;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem h3 {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.3rem;
  text-align: left;
  width: 100%;
  color: #475569;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.5;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem h3 span {
  font-size: 0.8rem;
  letter-spacing: 0.1px;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i {
  color: white;
  padding: 0.3rem;
  border-radius: 5px;
  display: grid;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.2);
  border-top: 2px solid rgba(255, 0, 0, 0.5);
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i svg {
  width: 1rem;
  height: 1rem;
  fill: #f21111;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i .loading {
  fill: #f21111;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .checkCount {
  border-bottom: 1px solid #e1e0ea;
  z-index: 2;
  height: 27px;
  position: relative;
  width: 100%;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .checkCount span {
  color: #475569;
  font-size: 1rem;
  line-height: 1.222;
  font-weight: 400;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 115%;
  background: #fff;
  padding: 0 1rem;
  height: 21px;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions {
  position: absolute;
  left: -0.5rem;
  top: 0;
  display: grid;
  justify-content: left;
  background: #fff;
  width: 2.5rem;
  padding: 0.5rem;
  border: 1px solid #f5f5f5;
  margin-left: 0.5rem;
  transition: all 0.3s ease-in-out;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  border-bottom-right-radius: 10px;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption {
  margin-top: 1rem;
  cursor: pointer;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.4rem;
  height: 1.3rem;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption i .loading {
  fill: #475569;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption .active svg {
  fill: #F71938;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption:first-child {
  margin-top: 0.5rem;
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem:hover .productOptions {
  visibility: visible;
  opacity: 1;
  left: -0.5rem;
}

@media screen and (max-width: 700px) {
  .mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .pic {
    height: auto;
  }

  .mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .pic img {
    height: 8rem;
  }

  .mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postTitle a {
    font-size: 0.7rem;
  }

  .mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem s {
    font-size: 0.7rem;
  }

  .mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem h3 {
    font-size: 0.8rem;
  }

  .mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem h3 span {
    letter-spacing: 0.1px;
    font-size: 0.6rem;
  }

  .mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i svg {
    width: 0.7rem;
    height: 0.7rem;
  }

  .mainCategory .allHomeHooper .containerCategories .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i .loading {
    width: 0.7rem;
    height: 0.7rem;
  }
}

.allFileIndex {
  margin: auto;
  margin-bottom: 3rem;
}

.allFileIndex .allFileTitle {
  position: relative;
}

.allFileIndex .allFileTitle h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 0.5rem;
}

.allFileIndex .allFileTitle a {
  font-size: 0.8rem;
  font-weight: 300;
  color: #909090;
}

.allFileIndex .allFileTitle:before {
  width: 40px;
  height: 2px;
  content: "";
  background: #475569;
  border-radius: 5rem;
  position: absolute;
  top: 100%;
  margin-top: 0.5rem;
  right: 0;
}

.allFileIndex .hooper {
  display: grid;
  height: auto;
  margin-top: 1rem;
}

.allFileIndex .hooper .hooper-list {
  padding: 1rem 0;
}

.allFileIndex .hooper .hooper-list .hooper-navigation button {
  top: auto;
  bottom: 100%;
  display: grid;
  align-items: center;
}

.allFileIndex .hooper .hooper-list .hooper-navigation button svg {
  width: 2rem;
  height: 2rem;
}

.allFileIndex .hooper .hooper-list .hooper-navigation .hooper-prev {
  right: auto;
  left: 2rem;
  padding: 0;
  overflow: hidden;
  border-left: 2px dashed #000;
}

.allFileIndex .hooper .hooper-list .hooper-navigation .hooper-next {
  padding: 0;
  overflow: hidden;
}

.allFileIndex .hooper .hooper-list .hooper-track .hooper-slide {
  padding-left: 1rem;
}

.allFileIndex .hooper .hooper-list .hooper-track .hooper-slide .fileItem {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.07);
  padding: 1rem;
  display: grid;
}

.allFileIndex .hooper .hooper-list .hooper-track .hooper-slide .fileItem .pic img {
  width: 100%;
  height: 10rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}

.allFileIndex .hooper .hooper-list .hooper-track .hooper-slide .fileItem .titleTop {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  margin: 1rem 0;
  grid-gap: 0.5rem;
}

.allFileIndex .hooper .hooper-list .hooper-track .hooper-slide .fileItem .titleTop i {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100%;
  background: rgba(255, 0, 0, 0.1);
  display: grid;
  justify-content: center;
  align-items: center;
}

.allFileIndex .hooper .hooper-list .hooper-track .hooper-slide .fileItem .titleTop i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #f21111;
}

.allFileIndex .hooper .hooper-list .hooper-track .hooper-slide .fileItem .titleTop .title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allFileIndex .hooper .hooper-list .hooper-track .hooper-slide .fileItem .titleTop .title h3 {
  font-size: 0.85rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #475569;
  margin-bottom: 0.3rem;
}

.allFileIndex .hooper .hooper-list .hooper-track .hooper-slide .fileItem .titleTop .title h4 {
  font-size: 0.8rem;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #475569;
  opacity: 0.8;
}

.allFileIndex .hooper .hooper-list .hooper-track .hooper-slide .fileItem p {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.8rem;
  color: #475569;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  opacity: 0.7;
}

.allFileIndex .hooper .hooper-list .hooper-track .hooper-slide .fileItem .options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  margin-top: 1rem;
}

.allFileIndex .hooper .hooper-list .hooper-track .hooper-slide .fileItem .options .option span {
  text-align: right;
  font-size: 1.2rem;
  font-weight: 300;
  color: black;
}

.allFileIndex .hooper .hooper-list .hooper-track .hooper-slide .fileItem .options .option span:last-child {
  font-size: 0.8rem;
  letter-spacing: 0.1px;
}

.allFileIndex .hooper .hooper-list .hooper-track .hooper-slide .fileItem .options .option i svg {
  width: 0.65rem;
  height: 0.65rem;
  fill: #777;
}

.allFileIndex .hooper .hooper-list .hooper-track .hooper-slide .fileItem .options .option h4 {
  font-size: 0.75rem;
  font-weight: 300;
  color: #777;
}

.allFileIndex .hooper .hooper-list .hooper-track .hooper-slide .fileItem .options .option:last-child {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  grid-gap: 0.5rem;
}

.professionalCategory {
  margin-bottom: 3rem;
  padding: 1rem 0;
}

.professionalCategory .professionalCategoryContainer {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  align-items: center;
  margin: auto;
}

.professionalCategory .professionalCategoryContainer .professionalCategoryTitle {
  display: grid;
}

.professionalCategory .professionalCategoryContainer .professionalCategoryTitle img {
  width: 10rem;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.professionalCategory .professionalCategoryContainer .professionalCategoryTitle a {
  border: 1px solid white;
  padding: 0.5rem;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  border-radius: 5px;
  margin-top: 0.5rem;
}

.professionalCategory .professionalCategoryContainer .professionalCategoryTitle a:hover {
  background: white;
  color: rgba(0, 0, 0, 0.5);
}

.professionalCategory .professionalCategoryContainer .hooper {
  overflow: hidden;
  min-height: 25rem;
  outline: transparent;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-navigation.is-rtl .hooper-next {
  left: -0.8rem;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-navigation.is-rtl .is-disabled {
  visibility: hidden;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-navigation.is-rtl .hooper-prev {
  right: -0.8rem;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-navigation.is-rtl button svg {
  background: #f5f5f5;
  width: 2rem;
  height: 4rem;
  padding: 0.1rem;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  fill: #475569;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide {
  padding: 0 0.5rem;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a {
  display: grid;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
  transition: all 0.2s ease-in-out;
  position: relative;
  height: 100%;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .pic {
  overflow: hidden;
  height: 14rem;
  position: relative;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .pic img {
  width: 100%;
  height: 14rem;
  -o-object-fit: contain;
     object-fit: contain;
  transition: all 0.6s ease-in-out;
  padding-top: 1rem;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .pic img:nth-child(2) {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .postTitle a {
  text-align: center;
  max-width: 90%;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 25px;
  color: #475569;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  opacity: 0.7;
  padding: 0;
  height: auto;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .postPrice {
  display: grid;
  grid-gap: 0.4rem;
  align-items: center;
  margin-top: 0.5rem;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem s {
  font-size: 0.8rem;
  line-height: 1.692;
  font-weight: 300;
  color: #ababab;
  text-align: center;
  width: 100%;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem h3 {
  text-align: center;
  width: 100%;
  color: #475569;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem h3 span {
  letter-spacing: 0.1px;
  font-size: 0.8rem;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem i {
  color: white;
  padding: 0.5rem;
  border-radius: 0.4rem;
  display: grid;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem i svg {
  width: 1rem;
  height: 1rem;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .checkCount {
  border-bottom: 1px solid #e1e0ea;
  z-index: 2;
  height: 27px;
  position: relative;
  width: 100%;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .checkCount span {
  color: #475569;
  font-size: 1rem;
  line-height: 1.222;
  font-weight: 400;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 115%;
  background: #fff;
  padding: 0 1rem;
  height: 21px;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .productOption {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 100;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .productOption i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.6rem;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .productOption i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .productOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a .productOption i .loading {
  fill: #9b9b9b;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a:hover .pic img:nth-child(1) {
  top: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  position: absolute;
}

.professionalCategory .professionalCategoryContainer .hooper .hooper-list .hooper-track .hooper-slide a:hover .pic img:nth-child(2) {
  position: relative;
  top: auto;
  visibility: visible;
  opacity: 1;
  right: auto;
}

@media screen and (max-width: 700px) {
  .professionalCategory .professionalCategoryContainer {
    grid-template-columns: 1fr;
  }

  .professionalCategory .professionalCategoryContainer .professionalCategoryTitle {
    justify-content: center;
    margin-bottom: 1rem;
  }
}

.allHorizontalProduct {
  margin: auto;
  margin-bottom: 3rem;
}

.allHorizontalProduct .allHorizontalProductTitle h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #475569;
}

.allHorizontalProduct .allHorizontalProducts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  padding: 1rem;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalImage img {
  width: 5rem;
  height: 7rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalText {
  display: grid;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalText h3 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  opacity: 0.7;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalText .allHorizontalOption {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalText .allHorizontalOption h5 {
  font-size: 1.1rem;
  font-weight: 500;
  color: #475569;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalText .allHorizontalOption h5 span {
  font-size: 0.8rem;
  letter-spacing: 0.1px;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalText .allHorizontalOption .allHorizontalLike {
  display: grid;
  align-items: center;
  justify-content: left;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalText .allHorizontalOption .allHorizontalLike i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.4rem;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalText .allHorizontalOption .allHorizontalLike i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalText .allHorizontalOption .allHorizontalLike i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalText .allHorizontalOption .allHorizontalLike i .loading {
  fill: #9b9b9b;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalData {
  width: 100%;
  margin-top: 0.5rem;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalData .allHorizontalDataTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalData .allHorizontalDataTitle h4,
.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalData .allHorizontalDataTitle span {
  font-size: 0.75rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalData .allHorizontalDatas {
  height: 3px;
  width: 100%;
  background: #f5f5f5;
  border-radius: 5rem;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalData .allHorizontalDatas .allHorizontalDataItem {
  height: 100%;
  background: #f21111;
  border-radius: 5rem;
  position: relative;
}

.allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalData .allHorizontalDatas .allHorizontalDataItem div {
  width: 0;
  height: 100%;
  background: #fff;
  opacity: 0.5;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
  border-radius: 5rem;
  transition: all 0.3s ease-in-out;
  animation: arrow-anim5 2.5s ease infinite;
}

@keyframes arrow-anim5 {
  0% {
    width: 0%;
  }

  5% {
    width: 5%;
  }

  10% {
    width: 10%;
  }

  15% {
    width: 15%;
  }

  20% {
    width: 20%;
  }

  25% {
    width: 25%;
  }

  30% {
    width: 30%;
  }

  35% {
    width: 35%;
  }

  40% {
    width: 40%;
  }

  45% {
    width: 45%;
  }

  50% {
    width: 50%;
  }

  55% {
    width: 55%;
  }

  60% {
    width: 60%;
  }

  65% {
    width: 65%;
  }

  70% {
    width: 70%;
  }

  75% {
    width: 75%;
  }

  80% {
    width: 80%;
  }

  85% {
    width: 85%;
  }

  90% {
    width: 90%;
  }

  95% {
    width: 95%;
  }

  100% {
    width: 100%;
  }
}

@media screen and (max-width: 700px) {
  .allHorizontalProduct .allHorizontalProducts {
    grid-template-columns: 1fr 1fr;
  }

  .allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop {
    grid-template-columns: 1fr;
  }

  .allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalImage img {
    width: 100%;
    height: 8rem;
  }

  .allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalText h3 {
    font-size: 0.7rem;
  }

  .allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalText .allHorizontalOption {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalText .allHorizontalOption h5 {
    font-size: 0.8rem;
  }

  .allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalText .allHorizontalOption h5 span {
    font-size: 0.65rem;
  }

  .allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalText .allHorizontalOption .allHorizontalLike i {
    width: 1.1rem;
  }

  .allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalProductItemTop .allHorizontalText .allHorizontalOption .allHorizontalLike i svg {
    width: 1rem;
    height: 1rem;
  }

  .allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalData .allHorizontalDataTitle {
    grid-template-columns: auto;
  }

  .allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalData .allHorizontalDataTitle h4,
  .allHorizontalProduct .allHorizontalProducts .allHorizontalProductItem .allHorizontalData .allHorizontalDataTitle span {
    font-size: 0.55rem;
  }
}

.imageWidget {
  position: relative;
  margin-bottom: 3rem;
  background: #fff;
  background-size: cover;
  background-attachment: fixed;
}

.imageWidget .imageWidgetBlock {
  margin: auto;
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: auto 1fr;
}

.imageWidget .imageWidgetBlock .imageWidgetPic img {
  width: 15rem;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper {
  display: grid;
  overflow: hidden;
  height: auto;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list {
  padding: 1rem 0;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-navigation.is-rtl .hooper-next {
  left: -0.8rem;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-navigation.is-rtl .is-disabled {
  visibility: hidden;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-navigation.is-rtl .hooper-prev {
  right: -0.8rem;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-navigation.is-rtl button svg {
  background: #fff;
  width: 2rem;
  height: 4rem;
  padding: 0.1rem;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  fill: #475569;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide {
  padding: 0 0.5rem;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem {
  overflow: hidden;
  padding: 1rem;
  transition: all 0.2s ease-in-out;
  border-radius: 10px;
  position: relative;
  display: grid;
  background: #fff;
  height: 100%;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .offProduct {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  background-color: #f21111;
  color: white;
  line-height: 2;
  font-weight: 300;
  font-size: 13px;
  width: 2rem;
  height: 2rem;
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .pic {
  overflow: hidden;
  height: 14rem;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .pic img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: center;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .postTitle {
  margin-top: 0.5rem;
  height: 3rem;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .postTitle h3 {
  text-align: right;
  max-width: 90%;
  font-size: 0.9rem;
  line-height: 25px;
  color: #475569;
  font-weight: 300;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  opacity: 0.7;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .postPrice {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .postPrice s {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.6;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .postPrice span {
  font-size: 1.1rem;
  font-weight: 500;
  color: #475569;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .postPrice span span {
  font-size: 0.8rem;
  letter-spacing: 0.1px;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .productOptions {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  grid-gap: 0.5rem;
  transition: all 0.3s ease-in-out;
  margin-top: 1rem;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .productOptions .productOption {
  cursor: pointer;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .productOptions .productOption i {
  display: grid;
  justify-content: left;
  align-items: center;
  width: 1.5rem;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .productOptions .productOption i svg {
  fill: #475569;
  width: 1.1rem;
  height: 1.1rem;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .productOptions .productOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .productOptions .productOption i .loading {
  fill: #475569;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .productOptions .productOption .active svg {
  fill: #F71938;
}

@media screen and (max-width: 700px) {
  .imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .pic {
    height: auto;
  }

  .imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .pic img {
    height: 8rem;
  }

  .imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .postTitle h3 {
    font-size: 0.7rem;
  }

  .imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .postPrice {
    grid-template-columns: auto;
    grid-gap: 0;
  }

  .imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .postPrice s {
    font-size: 0.7rem;
  }

  .imageWidget .imageWidgetBlock .imageWidgetPosts .hooper .hooper-list .hooper-track .hooper-slide .imageWidgetItem .postPrice span {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 700px) {
  .imageWidget {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: unset;
  }

  .imageWidget .imageWidgetBlock {
    grid-template-columns: 1fr;
  }

  .imageWidget .imageWidgetBlock .imageWidgetPic {
    display: grid;
    justify-content: center;
  }

  .imageWidget .imageWidgetBlock .imageWidgetPic img {
    height: 13rem;
    width: 100%;
  }
}

.allGuideIndex {
  margin: auto;
  margin-bottom: 3rem;
  background: #e3342f;
  border-radius: 10px;
  padding: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  align-items: center;
}

.allGuideIndex .right h4 {
  font-size: 1rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
}

.allGuideIndex .right p {
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
}

.allGuideIndex ul {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.3rem;
}

.allGuideIndex ul li {
  padding: 0.5rem;
  background: white;
}

.allGuideIndex ul li a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5rem;
  align-items: center;
  cursor: pointer;
}

.allGuideIndex ul li a h4 {
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
}

.allGuideIndex ul li a .pic img {
  width: 100%;
  height: 4rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allGuideIndex ul li:first-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.allGuideIndex ul li:last-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

@media screen and (max-width: 700px) {
  .allGuideIndex {
    display: block;
  }

  .allGuideIndex ul {
    grid-template-columns: 1fr;
  }

  .allGuideIndex ul li {
    border-radius: 5px;
  }
}

.newsIndex {
  margin: auto;
  margin-bottom: 3rem;
  background: #fff;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.newsIndex .title {
  display: grid;
  grid-template-columns: 1fr auto;
  margin-bottom: 1rem;
}

.newsIndex .title h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #475569;
}

.newsIndex .title a {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  grid-gap: 1rem;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.newsIndex .title a svg {
  width: 1rem;
  height: 1rem;
  height: auto;
  cursor: pointer;
  fill: #f21111;
  overflow: visible;
}

.newsIndex .title a svg polygon,
.newsIndex .title a svg path {
  transition: all 0.5s ease;
}

@keyframes arrow-anim3 {
  0% {
    opacity: 1;
    transform: translateX(0);
    fill: #f21111;
  }

  5% {
    transform: translateX(-0.1rem);
    fill: black;
  }

  100% {
    transform: translateX(1rem);
    opacity: 0;
    fill: #f21111;
  }
}

@keyframes arrow-fixed-anim3 {
  5% {
    opacity: 0;
    fill: #f21111;
  }

  20% {
    opacity: 0.4;
    fill: black;
  }

  100% {
    fill: #f21111;
    opacity: 1;
  }
}

.newsIndex .title a polygon,
.newsIndex .title a path {
  transition: all 1s ease;
}

.newsIndex .title a .arrow {
  animation: arrow-anim3 1s ease infinite;
}

.newsIndex .title a .arrow-fixed {
  animation: arrow-fixed-anim3 1s ease infinite;
}

@media screen and (max-width: 700px) {
  .newsIndex .title h3 {
    font-size: 1rem;
  }

  .newsIndex .title a {
    font-size: 0.7rem;
  }
}

.newsIndex .newsIndexItems {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 2px;
}

.newsIndex .newsIndexItems .right {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2px;
}

.newsIndex .newsIndexItems .left .hooper {
  display: grid;
  height: 100%;
}

.newsIndex .newsIndexItems .left .hooper .hooper-list .hooper-navigation {
  height: 100%;
}

.newsIndex .newsIndexItems .left .hooper .hooper-list .hooper-navigation .hooper-next svg {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.07), 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 1px 5px 0 rgba(0, 0, 0, 0.04);
  background: white;
  border-radius: 5rem;
  fill: black;
  font-size: 1.2rem;
}

.newsIndex .newsIndexItems .left .hooper .hooper-list .hooper-navigation .hooper-prev svg {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.07), 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 1px 5px 0 rgba(0, 0, 0, 0.04);
  background: white;
  border-radius: 5rem;
  fill: black;
  font-size: 1.2rem;
}

.newsIndex .newsIndexItems .newsItem {
  position: relative;
  display: grid;
  height: 100%;
}

.newsIndex .newsIndexItems .newsItem img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.newsIndex .newsIndexItems .newsItem .over {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: grid;
  align-items: end;
  padding: 1rem;
}

.newsIndex .newsIndexItems .newsItem .over .detail {
  display: grid;
  align-items: end;
}

.newsIndex .newsIndexItems .newsItem .over .detail h3 {
  font-size: 0.95rem;
  font-weight: 500;
  color: white;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.newsIndex .newsIndexItems .newsItem .over .detail ul {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  grid-gap: 1rem;
  justify-content: right;
  margin-top: 0.5rem;
  opacity: 0;
  margin-bottom: -5rem;
  transition: all 0.3s ease-in-out;
}

.newsIndex .newsIndexItems .newsItem .over .detail ul li {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  grid-gap: 0.3rem;
  justify-content: right;
  font-size: 0.7rem;
  font-weight: 300;
  color: white;
}

.newsIndex .newsIndexItems .newsItem .over .detail ul li svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: white;
}

.newsIndex .newsIndexItems .newsItem .over:hover .detail ul {
  margin-bottom: 0;
  opacity: 0.8;
}

.newsIndex .newsIndexItems .newsItem span {
  position: absolute;
  left: 1rem;
  top: 1rem;
  background: #f21111;
  border-radius: 5px;
  color: white;
  font-size: 0.7rem;
  font-weight: 300;
  padding: 0.2rem 1rem;
}

@media screen and (max-width: 700px) {
  .newsIndex .newsIndexItems {
    grid-template-columns: 1fr;
  }
}

.allSites {
  margin: auto;
  margin-bottom: 3rem;
}

.allSites ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, auto));
  grid-gap: 1rem;
  justify-content: space-around;
  align-items: center;
}

.allSites ul li .pic {
  display: grid;
  justify-content: center;
  margin-bottom: 0.3rem;
}

.allSites ul li .pic img {
  width: 4rem;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.allSites ul li h4 {
  font-size: 0.7rem;
  font-weight: 500;
  text-align: center;
  color: #475569;
}

.offerIndex {
  margin: auto;
  padding: 1rem;
  background: #EDEFED;
  border-radius: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 3rem;
}

.offerIndex .right img {
  width: 15rem;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.offerIndex .left {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 1rem;
}

.offerIndex .left ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  grid-gap: 1rem;
  align-items: center;
  justify-content: left;
  direction: ltr;
}

.offerIndex .left ul li {
  direction: rtl;
  border-radius: 50%;
  padding: 0.5rem;
  display: grid;
  justify-content: center;
  align-items: center;
  position: relative;
  background: white;
}

.offerIndex .left ul li a {
  overflow: hidden;
  border-radius: 50%;
}

.offerIndex .left ul li a .pic {
  overflow: hidden;
  width: 58px;
  height: 58px;
}

.offerIndex .left ul li a .pic img {
  width: 3.5rem;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.offerIndex .left ul li a .offProduct {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 0.4rem;
  border-radius: 5rem;
  background: #e3342f;
  color: white;
  font-weight: 300;
  font-size: 0.75rem;
}

.offerIndex .left .next {
  background: white;
  padding: 1rem;
  border-radius: 5rem;
  font-size: 0.8rem;
  font-weight: 300;
  color: #00C58D;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: auto auto;
  grid-gap: 0.5rem;
}

.offerIndex .left .next i {
  display: grid;
  align-items: center;
}

.offerIndex .left .next i svg {
  width: 1rem;
  height: 1rem;
  fill: #00C58D;
}

@media screen and (max-width: 700px) {
  .offerIndex {
    display: block;
  }

  .offerIndex .left {
    grid-template-columns: 1fr;
  }

  .offerIndex .left ul {
    margin: 2rem 1rem;
  }
}

.AllPopUpIndex {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

.AllPopUpIndex .AllPopUpData {
  padding: 1rem;
  width: 35%;
  margin: auto;
  border-radius: 0.3rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.AllPopUpIndex .AllPopUpData .pic {
  display: grid;
  justify-content: center;
  margin-bottom: 1rem;
}

.AllPopUpIndex .AllPopUpData .pic img {
  width: 100%;
  height: 3rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.AllPopUpIndex .AllPopUpData h3 {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: black;
}

.AllPopUpIndex .AllPopUpData p {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
  margin-top: 0.5rem;
}

.AllPopUpIndex .AllPopUpData .timer {
  direction: ltr;
  margin: 2rem 0;
}

.AllPopUpIndex .AllPopUpData .timer .flip-card[data-v-78efe7f6] {
  font-size: 1.1rem;
}

.AllPopUpIndex .AllPopUpData .timer .flip-card__top[data-v-78efe7f6],
.AllPopUpIndex .AllPopUpData .timer .flip-card__bottom[data-v-78efe7f6],
.AllPopUpIndex .AllPopUpData .timer .flip-card__back-bottom[data-v-78efe7f6],
.AllPopUpIndex .AllPopUpData .timer .flip-card__back[data-v-78efe7f6]::before,
.AllPopUpIndex .AllPopUpData .timer .flip-card__back[data-v-78efe7f6]::after {
  padding: 0;
}

.AllPopUpIndex .AllPopUpData .timer .flip-card__top[data-v-78efe7f6],
.AllPopUpIndex .AllPopUpData .timer .flip-card__bottom[data-v-78efe7f6],
.AllPopUpIndex .AllPopUpData .timer .flip-card__back-bottom[data-v-78efe7f6],
.AllPopUpIndex .AllPopUpData .timer .flip-card__back[data-v-78efe7f6]::before,
.AllPopUpIndex .AllPopUpData .timer .flip-card__back[data-v-78efe7f6]::after {
  background: #e3342f;
  color: white;
}

.AllPopUpIndex .AllPopUpData .timer .flip-card__bottom[data-v-78efe7f6],
.AllPopUpIndex .AllPopUpData .timer .flip-card__back-bottom[data-v-78efe7f6],
.AllPopUpIndex .AllPopUpData .timer .flip-card__bottom-4digits[data-v-78efe7f6],
.AllPopUpIndex .AllPopUpData .timer .flip-card__back-bottom-4digits[data-v-78efe7f6] {
  background: #e3342f;
  border-top: 0;
  color: white;
}

.AllPopUpIndex .AllPopUpData .timer .flip-clock__slot[data-v-78efe7f6] {
  position: absolute;
  top: 0;
  visibility: hidden;
}

.AllPopUpIndex .AllPopUpData .buttons {
  display: grid;
  justify-content: center;
}

.AllPopUpIndex .AllPopUpData .buttons button {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
  padding: 0.2rem 1rem;
  border-radius: 5px;
}

@media screen and (max-width: 920px) {
  .AllPopUpIndex .AllPopUpData {
    width: 90%;
  }
}

.allAdsIndex {
  margin: auto;
  margin-bottom: 3rem;
}

.allAdsIndex .adsItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 2rem;
}

.allAdsIndex .adsItems .adsItem {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 12px 0 hsla(0, 0%, 71%, 0.11);
}

.allAdsIndex .adsItems .adsItem img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 700px) {
  .allAdsIndex .adsItems {
    grid-template-columns: 1fr 1fr;
  }
}

.allVoteIndex {
  margin: auto;
  margin-bottom: 3rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  background-color: #ED232B;
  background-image: url("/img/backVote.png");
}

.allVoteIndex .right {
  display: grid;
  align-items: center;
  align-self: center;
}

.allVoteIndex .right .top {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-bottom: 1rem;
}

.allVoteIndex .right .top i {
  display: grid;
  align-items: center;
}

.allVoteIndex .right .top i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
}

.allVoteIndex .right .top h4 {
  font-size: 1.3rem;
  font-weight: 700;
  color: white;
}

.allVoteIndex .right p {
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
}

.allVoteIndex .right .buttons {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  margin-top: 2rem;
}

.allVoteIndex .right .buttons a {
  display: grid;
  padding: 0.5rem;
  border-radius: 5px;
  width: 7rem;
  text-align: center;
  font-weight: 300;
}

.allVoteIndex .right .buttons a:first-child {
  background: white;
  color: #e3342f;
}

.allVoteIndex .right .buttons a:last-child {
  border: 1.5px solid #fff;
  color: white;
  background: #EE232B;
}

.allVoteIndex .left #pie-chart {
  height: 250px;
}

@media screen and (max-width: 700px) {
  .allVoteIndex {
    display: block;
  }

  .allVoteIndex .left {
    position: absolute;
    top: 0;
    opacity: 0;
    visibility: hidden;
  }
}

.allVoteIndex2 {
  background: #fff;
  border-radius: 0.3rem;
  margin: auto;
  padding: 1rem;
  margin-top: 9.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.allVoteIndex2 h1 {
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  color: #475569;
}

.allVoteIndex2 p {
  font-size: 1rem;
  font-weight: 300;
  text-align: center;
  color: #475569;
}

.allVoteIndex2 .voteItems {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allVoteIndex2 .voteItems .voteItem {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 5px;
}

.allVoteIndex2 .voteItems .voteItem .right {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
}

.allVoteIndex2 .voteItems .voteItem .right .pic {
  padding: 0.5rem;
  border-radius: 5px;
  background: #fff;
}

.allVoteIndex2 .voteItems .voteItem .right .pic img {
  width: 4rem;
  height: 4rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allVoteIndex2 .voteItems .voteItem .right h3 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
}

.allVoteIndex2 .voteItems .voteItem .left {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
}

.allVoteIndex2 .voteItems .voteItem .left span {
  color: #475569;
  font-weight: 300;
  font-size: 1rem;
  text-align: center;
}

.allVoteIndex2 .voteItems .voteItem .left button {
  color: white;
  background: #00C58D;
  padding: 0.3rem 1rem;
  border-radius: 5px;
}

@media screen and (max-width: 700px) {
  .allVoteIndex2 .voteItems .voteItem {
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
  }

  .allVoteIndex2 .voteItems .voteItem .right {
    grid-template-columns: 1fr;
  }

  .allVoteIndex2 .voteItems .voteItem .right .pic img {
    width: 100%;
  }
}

.allFooterIndex {
  background: #fff;
  margin-top: 1rem;
  padding: 2rem 0;
  border-top: 1px solid #e1e0ea;
}

.allFooterIndex .blockFooter {
  margin: auto;
}

.allFooterIndex .blockFooter .topFooterIndex {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  align-items: center;
  grid-gap: 1rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #f5f5f5;
}

.allFooterIndex .blockFooter .topFooterIndex .topFooterIndexItem {
  display: grid;
  grid-template-columns: 1fr;
}

.allFooterIndex .blockFooter .topFooterIndex .topFooterIndexItem .topFooterIndexItemPic {
  display: grid;
  justify-content: center;
}

.allFooterIndex .blockFooter .topFooterIndex .topFooterIndexItem .topFooterIndexItemPic svg {
  width: 4rem;
  height: 4rem;
}

.allFooterIndex .blockFooter .topFooterIndex .topFooterIndexItem span {
  text-align: center;
  margin-top: 1rem;
  color: #475569;
  font-weight: 500;
  font-size: 0.85rem;
}

.allFooterIndex .blockFooter .botFooterIndex {
  padding: 2rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  justify-content: space-between;
  grid-gap: 2.5rem;
}

.allFooterIndex .blockFooter .botFooterIndex .botFooterIndexItem {
  justify-self: center;
}

.allFooterIndex .blockFooter .botFooterIndex .botFooterIndexItem .footerPic img {
  width: 100%;
  height: 4rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allFooterIndex .blockFooter .botFooterIndex .botFooterIndexItem p {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 300;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 1rem;
}

.allFooterIndex .blockFooter .botFooterIndex .botFooterIndexItem span {
  color: #475569;
  font-size: 1rem;
  font-weight: 700;
}

.allFooterIndex .blockFooter .botFooterIndex .botFooterIndexItem ul {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
}

.allFooterIndex .blockFooter .botFooterIndex .botFooterIndexItem ul li a {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.7;
}

.allFooterIndex .blockFooter .botFooterIndex .communicationFooter {
  justify-self: left;
}

.allFooterIndex .blockFooter .botFooterIndex .communicationFooter span {
  color: #475569;
  font-size: 1rem;
  font-weight: 700;
}

.allFooterIndex .blockFooter .botFooterIndex .communicationFooter .communicationFooterItem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2rem, auto));
  align-items: center;
  justify-content: right;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
}

.allFooterIndex .blockFooter .botFooterIndex .communicationFooter .communicationFooterItem a {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.6rem;
  background: #f5f5f5;
  border-radius: 5px;
}

.allFooterIndex .blockFooter .botFooterIndex .communicationFooter .communicationFooterItem a i {
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease-in-out;
}

.allFooterIndex .blockFooter .botFooterIndex .communicationFooter .communicationFooterItem a i svg {
  width: 1rem;
  height: 1rem;
  fill: #79788d;
}

.allFooterIndex .blockFooter .botFooterIndex .communicationFooter .trustFooter {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allFooterIndex .blockFooter .botFooterIndex .communicationFooter .trustFooter a {
  height: 5rem;
  width: 5rem;
}

.allFooterIndex .blockFooter .botFooterIndex .communicationFooter .trustFooter a img {
  height: 100%;
  width: 100%;
  -o-object-fit: fill;
     object-fit: fill;
}

@media screen and (max-width: 700px) {
  .allFooterIndex .blockFooter .botFooterIndex {
    grid-template-columns: 1fr;
  }

  .allFooterIndex .blockFooter .botFooterIndex .botFooterIndexItem:nth-child(2) {
    justify-self: right;
  }

  .allFooterIndex .blockFooter .botFooterIndex .botFooterIndexItem:nth-child(3) {
    justify-self: right;
  }

  .allFooterIndex .blockFooter .botFooterIndex .communicationFooter {
    justify-self: right;
  }
}

.allFooterIndex .blockFooter .footerContact {
  padding-top: 2rem;
  border-top: 1px solid #f5f5f5;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, auto));
  justify-content: right;
  align-items: center;
  grid-gap: 2rem;
}

.allFooterIndex .blockFooter .footerContact span {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 500;
}

.allFooterIndex .blockFooter .footerContact span:first-child {
  font-weight: 300;
}

.allFooterIndex .floatContact {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 900;
}

.allFooterIndex .floatContact .contentsFloat {
  position: relative;
}

.allFooterIndex .floatContact .contentsFloat .content {
  position: absolute;
  bottom: 100%;
  border-radius: 5px;
  text-align: center;
  background: white;
  margin-bottom: 1rem;
  width: 20rem;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  left: 0;
}

.allFooterIndex .floatContact .contentsFloat .content .titleFloat {
  background: #f21111;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 300;
  color: white;
}

.allFooterIndex .floatContact .contentsFloat .content ul li a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem;
  text-align: right;
}

.allFooterIndex .floatContact .contentsFloat .content ul li a h3 {
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
}

.allFooterIndex .floatContact .contentsFloat .content ul li a i {
  display: grid;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: #f21111;
  border-radius: 5rem;
}

.allFooterIndex .floatContact .contentsFloat .content ul li a i svg {
  width: 1.5rem;
  fill: white;
  height: 1.5rem;
}

.allFooterIndex .floatContact .contentsFloat .contactBtn .btnItem {
  display: grid;
  padding: 0.8rem 0;
  background: linear-gradient(to right, red 20%, #FF0 40%, #FF0 60%, red 80%);
  background-size: 200% auto;
  animation: shine 1s linear infinite;
  border-radius: 100%;
  width: 4.5rem;
  height: 4.5rem;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

.allFooterIndex .floatContact .contentsFloat .contactBtn .btnItem i {
  display: grid;
  align-items: center;
  justify-content: center;
}

.allFooterIndex .floatContact .contentsFloat .contactBtn .btnItem i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
}

.allFooterIndex .floatContact .contentsFloat .contactBtn .btnItem h3 {
  font-size: 0.7rem;
  color: white;
}

.allSingleSeller {
  margin: auto;
  margin-top: 9rem;
}

.allSingleSeller .topSeller {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  overflow: hidden;
  background: white;
}

.allSingleSeller .topSeller .detail .sellers {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
  border-bottom: 2px dashed #eee;
  padding: 1rem;
}

.allSingleSeller .topSeller .detail .sellers .pic img {
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
}

.allSingleSeller .topSeller .detail .sellers .sellerName h1 {
  font-size: 1.2rem;
  font-weight: 500;
  color: #475569;
}

.allSingleSeller .topSeller .detail .sellers .sellerName h4 {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
}

.allSingleSeller .topSeller .detail p {
  padding: 1rem;
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  line-height: 2rem;
}

.allSingleSeller .productItems {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 1rem;
  background: white;
}

.allSingleSeller .productItems .titleDetail {
  padding: 1rem;
  padding-bottom: 0;
  font-size: 1.3rem;
  font-weight: 500;
  color: #475569;
}

.allSingleSeller .productItems .hooper {
  display: grid;
  overflow: hidden;
  height: auto;
}

.allSingleSeller .productItems .hooper .hooper-list {
  padding: 1rem 0;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-navigation.is-rtl .hooper-next {
  left: -0.75rem;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-navigation.is-rtl .is-disabled {
  visibility: hidden;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-navigation.is-rtl .hooper-prev {
  right: 0;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-navigation.is-rtl button svg {
  background: #eee;
  width: 2rem;
  height: 4rem;
  padding: 0.1rem;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  fill: #475569;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide {
  padding: 0 0.5rem;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem {
  overflow: hidden;
  padding: 1rem;
  transition: all 0.2s ease-in-out;
  border-radius: 10px;
  position: relative;
  display: grid;
  border: 1px solid #eee;
  height: 100%;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .offProduct {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 100;
  background-color: red;
  color: white;
  line-height: 2;
  font-weight: 300;
  font-size: 13px;
  width: 2.4rem;
  height: 2.4rem;
  text-align: center;
  border-radius: 5rem;
  display: grid;
  align-items: center;
  justify-content: center;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .pic {
  overflow: hidden;
  height: 14rem;
  margin-top: 0;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .pic img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: center;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postTitle {
  margin-top: 0.5rem;
  height: 3rem;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postTitle a {
  text-align: right;
  max-width: 90%;
  font-size: 0.85rem;
  line-height: 25px;
  color: #475569;
  font-weight: 300;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  opacity: 0.7;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.4rem;
  align-items: center;
  margin-top: 1rem;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: left;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem .offPrice {
  display: grid;
  justify-content: left;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem .offPrice s {
  font-size: 0.8rem;
  line-height: 1.692;
  font-weight: 300;
  color: #ababab;
  display: flex;
  width: 100%;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem h3 {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.3rem;
  text-align: left;
  width: 100%;
  color: #475569;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.5;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem h3 span {
  font-size: 0.8rem;
  letter-spacing: 0.1px;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i {
  color: white;
  padding: 0.3rem;
  border-radius: 5px;
  display: grid;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.2);
  border-top: 2px solid rgba(255, 0, 0, 0.5);
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i svg {
  width: 1rem;
  height: 1rem;
  fill: red;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i .loading {
  fill: red;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .checkCount {
  border-bottom: 1px solid #DFE3E7;
  z-index: 2;
  height: 27px;
  position: relative;
  width: 100%;
}

.allSingleSeller .productItems .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .checkCount span {
  color: #475569;
  font-size: 1rem;
  line-height: 1.222;
  font-weight: 400;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 115%;
  background: white;
  padding: 0 1rem;
  height: 21px;
}

.allSingleIndex {
  margin: 9rem auto auto auto;
}

.allSingleIndex .allSingleVar {
  background: white;
  padding: 1rem;
  margin-top: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

.allSingleIndex .allSingleVar .allVarieties {
  margin-bottom: 0;
}

.allSingleIndex .allSingleVar .allVarieties .allVarietiesTitle {
  border-bottom: 2px solid #eee;
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 0;
}

.allSingleIndex .allSingleVar .allVarieties .allVarietiesTitle span {
  padding: 1rem;
  border-bottom: 2px solid #f21111;
  margin-bottom: -2px;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.1px;
  color: #475569;
  padding-top: 0;
}

@media screen and (max-width: 920px) {
  .allSingleIndex {
    margin-top: 1rem;
  }
}

.allComment {
  padding: 1rem;
}

.allComment .allCommentContainerSend .allCommentContainerTop {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopPic {
  width: 15rem;
  height: 15rem;
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsTitle {
  margin-bottom: 1rem;
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsTitle h3 {
  font-size: 1rem;
  line-height: 24px;
  font-weight: 300;
  color: #475569;
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  margin-top: 1rem;
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem label {
  font-size: 0.75rem;
  line-height: 1.692;
  color: #475569;
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .rateItemsCount {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2rem, auto));
  justify-content: right;
  align-items: center;
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .rateItemsCount .rateItemsCountItem {
  position: relative;
  height: 5px;
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .rateItemsCount .rateItemsCountItem .rateItemsCountItemBar {
  width: 5rem;
  height: 5px;
  background: #D5D5D5;
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .rateItemsCount .rateItemsCountItem .rateItemsCountItemBarActive {
  width: 5rem;
  height: 5px;
  background: #EF394E;
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircle {
  position: absolute;
  width: 12px;
  height: 12px;
  z-index: 2;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid #fcfcfc;
  background-color: #D5D5D5;
  cursor: pointer;
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActives {
  background-color: #EF394E;
  position: absolute;
  width: 12px;
  height: 12px;
  z-index: 2;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid #fcfcfc;
  cursor: pointer;
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActive {
  width: 19px;
  position: absolute;
  background: #EF394E;
  height: 19px;
  top: -7px;
  display: flex;
  justify-content: center;
  -webkit-box-align: center;
  border-radius: 50%;
  border: none;
  z-index: 4;
  align-items: center;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .rateItemsCount span {
  font-size: 0.7rem;
  font-weight: 300;
  color: #475569;
}

@media screen and (max-width: 700px) {
  .allComment .allCommentContainerSend .allCommentContainerTop {
    grid-template-columns: 1fr;
  }

  .allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate {
    grid-template-columns: 1fr;
  }
}

.allComment .allCommentContainerSend .allCommentContainerBottom {
  border-top: 1px solid #e1e0ea;
  margin-top: 1rem;
  padding-top: 1rem;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomCoercion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomCoercion .allCommentContainerBottomCoercionItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  margin-bottom: 1rem;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomCoercion .allCommentContainerBottomCoercionItem input {
  padding: 0.5rem;
  border: 2px solid #e1e0ea;
  border-radius: 0.2rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
  font-size: 0.75rem;
  font-weight: 300;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomCoercion .allCommentContainerBottomCoercionItem label {
  font-size: 0.95rem;
  line-height: 1.692;
  color: #475569;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  margin-bottom: 1rem;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem input {
  padding: 0.5rem;
  border: 2px solid #e1e0ea;
  border-radius: 0.2rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
  font-size: 0.75rem;
  font-weight: 300;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem textarea {
  padding: 0.5rem;
  border: 2px solid #e1e0ea;
  border-radius: 5px;
  width: 100%;
  outline-style: unset;
  transition: all 0.3s ease-in-out;
  font-size: 0.75rem;
  font-weight: 300;
  height: 15rem;
  resize: vertical;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem .allCommentContainerBottomItemTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 0.5rem;
  align-items: center;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem .allCommentContainerBottomItemTitle i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem .allCommentContainerBottomItemTitle i svg {
  fill: #00C58D;
  width: 0.6rem;
  height: 0.6rem;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem label {
  font-size: 0.95rem;
  line-height: 1.692;
  color: #475569;
  position: relative;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem label i {
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem label i svg {
  width: 1.2rem;
  height: 1.2rem;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem span {
  margin-top: 0.5rem;
  width: 100%;
  border: 1px solid #00C58D;
  background: #EDF6F7;
  position: relative;
  padding: 0.5rem;
  color: #00C58D;
  border-radius: 5px;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem span i {
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem span i svg {
  width: 1rem;
  height: 1rem;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem:nth-child(3) .allCommentContainerBottomItemTitle i svg {
  fill: #fb3449;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem:nth-child(3) input:focus {
  border: 2px solid #EF394E;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem:nth-child(3) span {
  border: 1px solid #fb3449;
  background: #FFF3F4;
  color: #fb3449;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomSuggest {
  margin-bottom: 1rem;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomSuggest label {
  font-size: 0.95rem;
  line-height: 1.692;
  color: #475569;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomSuggest .allCategoryPanel {
  position: relative;
  margin: 1rem 0;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomSuggest .allCategoryPanel .categoryShow {
  background: #f5f5f5;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem;
  border-radius: 0.1rem;
  cursor: pointer;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomSuggest .allCategoryPanel .categoryShow h4 {
  font-weight: 450;
  font-size: 0.8rem;
  letter-spacing: 1px;
  line-height: 1.833;
  color: #56595e;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomSuggest .allCategoryPanel .categoryShow i {
  position: relative;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomSuggest .allCategoryPanel .categoryShow i svg {
  width: 0.8rem;
  height: 0.8rem;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomSuggest .allCategoryPanel ul {
  position: absolute;
  top: 110%;
  right: 0;
  box-shadow: rgba(0, 0, 0, 0.16) 0 1px 3px;
  background: white;
  border-radius: 0.2rem;
  width: 100%;
  margin: 0;
  z-index: 9000;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomSuggest .allCategoryPanel ul li {
  padding: 0.5rem;
  padding-right: 1rem;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  font-weight: 450;
  font-size: 0.8rem;
  letter-spacing: 1px;
  line-height: 1.833;
  color: #56595e;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomSuggest .allCategoryPanel ul li:hover {
  background: #F6F6F6;
}

.allComment .allCommentContainerSend .allCommentButtons {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
}

.allComment .allCommentContainerSend .allCommentButtons button {
  display: grid;
  grid-template-columns: auto 4rem auto;
  justify-content: right;
  align-items: center;
  color: #fff;
  background: #f21111;
  padding: 0.5rem 1rem;
  border-radius: 0.2rem;
}

.allComment .allCommentContainerSend .allCommentButtons button i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allComment .allCommentContainerSend .allCommentButtons button i svg {
  fill: white;
  width: 1rem;
  height: 1rem;
}

.allComment .allCommentContainerSend .allCommentButtons button i .loading {
  fill: #fff;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allComment .allCommentContainerSend .allCommentButtons button img {
  width: 4rem;
  height: 1rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.allComment .allCommentContainerSend .allCommentButtons button:last-child {
  display: block;
  background: #7A7A7A;
}

.allComment .allCommentAllow .allCommentAllowTitle {
  font-size: 1.65rem;
  line-height: 1.571;
  letter-spacing: -0.6px;
  color: #475569;
}

.allComment .allCommentAllow .allCommentAllowItem {
  display: grid;
  grid-template-columns: 30rem 1fr;
  grid-gap: 2rem;
  margin-top: 20px;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate ul {
  background: #f5f5f5;
  padding: 2rem;
  border-radius: 0.2rem;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate ul li {
  display: grid;
  grid-template-columns: 10rem auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  margin: 1rem;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate ul li span {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate ul li .allSingleHomeDetailBodyItemRate {
  height: 5px;
  width: 10rem;
  background: #d5d5d5;
  position: relative;
  border-radius: 3px;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate ul li .allSingleHomeDetailBodyItemRate .allSingleHomeDetailBodyItemRateValue {
  position: absolute;
  height: 5px;
  top: 0;
  background: #EF394E;
  border-radius: 3px;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemBtn h5 {
  font-size: 1.15rem;
  line-height: 1.158;
  color: #475569;
  letter-spacing: -0.4px;
  margin-bottom: 20px;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemBtn p {
  font-size: 0.9rem;
  line-height: 2.27;
  margin-bottom: 20px;
  color: #475569;
  width: 100%;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemBtn button {
  width: 13rem;
  padding: 1rem 3rem;
  color: white;
  background: #7A7A7A;
  border-radius: 0.2rem;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemBtn button:hover {
  background: #969696;
}

@media screen and (max-width: 1000px) {
  .allComment .allCommentAllow .allCommentAllowItem {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 700px) {
  .allComment .allCommentAllow .allCommentAllowItem {
    grid-template-columns: 1fr;
  }

  .allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate ul li {
    grid-template-columns: auto auto auto;
    margin: 0.5rem;
  }

  .allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate ul li span {
    font-size: 0.7rem;
  }
}

.allComment .allCommentContainerGet .allCommentContainerGetTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  padding-bottom: 1rem;
  grid-gap: 0.5rem;
  border-bottom: 1px solid #e1e0ea;
  margin: 3rem 0;
}

.allComment .allCommentContainerGet .allCommentContainerGetTitle i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allComment .allCommentContainerGet .allCommentContainerGetTitle i svg {
  fill: #EF394E;
  width: 0.8rem;
  height: 0.8rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetTitle span {
  color: #475569;
  font-size: 1.1rem;
  font-weight: 300;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .showGetLoader {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .showGetLoader .loading {
  fill: #f21111;
  width: 3rem;
  height: 3rem;
  animation: arrow-anim2 0.45s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(25deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  35% {
    transform: rotate(130deg);
  }

  50% {
    transform: rotate(180deg);
  }

  60% {
    transform: rotate(220deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 3rem;
  padding-top: 4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e1e0ea;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerUser {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerUser .allCommentContainerUserPic {
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border-radius: 5rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerUser .allCommentContainerUserPic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerUser .allCommentContainerUserName {
  font-size: 1.1rem;
  line-height: 1.375;
  font-weight: 700;
  color: #475569;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerUser .allCommentContainerUserOnline {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerUser .allCommentContainerUserOnline span {
  color: #475569;
  font-size: 0.7rem;
  font-weight: 300;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerCreated {
  margin-top: 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerCreated span {
  font-size: 0.88rem;
  line-height: 1.692;
  color: #475569;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerStatusUnknown {
  font-size: 0.9rem;
  line-height: 2.23;
  background-color: #fff9f2;
  border: 1px solid #fcdfbf;
  border-radius: 3px;
  color: #dd7e19;
  padding: 7px 12px;
  text-align: right;
  margin-top: 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerStatusBad {
  font-size: 0.9rem;
  line-height: 2.23;
  background-color: #fff8f9;
  border: 1px solid #ffbcc7;
  border-radius: 3px;
  color: #ff637d;
  padding: 7px 40px 7px 12px;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerStatusBad i {
  display: grid;
  justify-content: right;
  align-items: center;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerStatusBad i svg {
  fill: #ff637d;
  width: 1rem;
  height: 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerStatusGood {
  font-size: 0.9rem;
  line-height: 2.23;
  background-color: #f1feff;
  border: 1px solid #c2f2f7;
  border-radius: 3px;
  color: #1599a9;
  padding: 7px 40px 7px 12px;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerStatusGood i {
  display: grid;
  justify-content: right;
  align-items: center;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerStatusGood i svg {
  fill: #1599a9;
  width: 1rem;
  height: 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerRate {
  margin-top: 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerRate label {
  color: #475569;
  font-size: 0.85rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerRate .allCommentContainerRateContainer {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerRate .allCommentContainerRateContainer .allCommentContainerRateContainerItem {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerRate .allCommentContainerRateContainer .allCommentContainerRateContainerItem span {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerRate .allCommentContainerRateContainer .allCommentContainerRateContainerItem .allSingleHomeDetailBodyItemRate {
  height: 5px;
  width: 10rem;
  background: #d5d5d5;
  position: relative;
  border-radius: 3px;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerRate .allCommentContainerRateContainer .allCommentContainerRateContainerItem .allSingleHomeDetailBodyItemRate .allSingleHomeDetailBodyItemRateValue {
  position: absolute;
  height: 5px;
  top: 0;
  background: #EF394E;
  border-radius: 3px;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentTitle {
  font-size: 1.357rem;
  line-height: 1.158;
  color: #475569;
  font-weight: 500;
  border-bottom: 1px solid #e1e0ea;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentBody {
  font-size: 1rem;
  line-height: 2.71;
  color: #505050;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentGoodItemsContainer,
.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentBadItemsContainer {
  display: grid;
  grid-template-columns: 3rem 1fr;
  grid-gap: 2rem;
  margin-top: 20px;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentGoodItemsContainer label,
.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentBadItemsContainer label {
  flex-shrink: 0;
  color: #00bfd6;
  font-size: 0.85rem;
  line-height: 1.571;
  white-space: nowrap;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentGoodItemsContainer .allCommentGoodItems,
.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentBadItemsContainer .allCommentGoodItems {
  display: grid;
  grid-gap: 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentGoodItemsContainer .allCommentGoodItems .allCommentGoodItem,
.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentBadItemsContainer .allCommentGoodItems .allCommentGoodItem {
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  color: #475569;
  font-weight: 400;
  font-size: 0.8rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentGoodItemsContainer .allCommentGoodItems .allCommentGoodItem i,
.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentBadItemsContainer .allCommentGoodItems .allCommentGoodItem i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentGoodItemsContainer .allCommentGoodItems .allCommentGoodItem i svg,
.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentBadItemsContainer .allCommentGoodItems .allCommentGoodItem i svg {
  fill: #00bfd6;
  width: 0.5rem;
  height: 0.5rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentBadItemsContainer label {
  color: #FF637D;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentBadItemsContainer .allCommentBadItems {
  display: grid;
  grid-gap: 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentBadItemsContainer .allCommentBadItems .allCommentBadItem {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  justify-content: right;
  align-items: center;
  color: #475569;
  font-weight: 400;
  font-size: 0.8rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentBadItemsContainer .allCommentBadItems .allCommentBadItem i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentBadItemsContainer .allCommentBadItems .allCommentBadItem i svg {
  fill: #FF637D;
  width: 0.5rem;
  height: 0.5rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer {
  margin-top: 5rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer .allCommentContainerAnswerTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-right: 2rem;
  width: 4rem;
  cursor: pointer;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer .allCommentContainerAnswerTitle span {
  color: #475569;
  font-size: 14px;
  line-height: 1.692;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer .allCommentContainerAnswerTitle i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer .allCommentContainerAnswerTitle i svg {
  fill: #475569;
  width: 1rem;
  height: 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer .allCommentContainerAnswerBody {
  background: #fff;
  border-radius: 0.2rem;
  overflow: hidden;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer .allCommentContainerAnswerBody .allCommentContainerAnswerBodyBtn {
  display: grid;
  grid-template-columns: 4rem 1fr;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer .allCommentContainerAnswerBody .allCommentContainerAnswerBodyBtn .allCommentContainerAnswerBodyBtnItem {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.5rem;
  background: #fff;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer .allCommentContainerAnswerBody .allCommentContainerAnswerBodyBtn .allCommentContainerAnswerBodyBtnItem span {
  color: #475569;
  font-size: 14px;
  line-height: 1.692;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer .allCommentContainerAnswerBody .allCommentContainerAnswerBodyBtn .allCommentContainerAnswerBodyBtnItem i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer .allCommentContainerAnswerBody .allCommentContainerAnswerBodyBtn .allCommentContainerAnswerBodyBtnItem i svg {
  fill: #475569;
  width: 1rem;
  height: 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer .allCommentContainerAnswerBody .allCommentContainerAnswerBodyBtn .allCommentContainerAnswerBodyBtnItem button {
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  color: white;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer .allCommentContainerAnswerBody .allCommentContainerAnswerBodyBtn .allCommentContainerAnswerBodyBtnItem button:first-child {
  background: #FB3449;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer .allCommentContainerAnswerBody .allCommentContainerAnswerBodyBtn .allCommentContainerAnswerBodyBtnItem button:last-child {
  background: #7A7A7A;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer .allCommentContainerAnswerBody textarea {
  color: #475569;
  font-size: 0.9rem;
  line-height: 2.25;
  padding: 0.5rem;
  outline-style: unset;
  width: 100%;
  resize: vertical;
  background: #fff;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerReply .allCommentContainerReplyItem {
  padding: 0.5rem;
  background: #fff;
  margin-top: 1rem;
  border-radius: 0.2rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerReply .allCommentContainerReplyItem .allCommentContainerReplyItemUser {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: right;
  grid-gap: 0.5rem;
  align-items: center;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerReply .allCommentContainerReplyItem .allCommentContainerReplyItemUser .allCommentContainerReplyItemUserPic {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 5rem;
  overflow: hidden;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerReply .allCommentContainerReplyItem .allCommentContainerReplyItemUser .allCommentContainerReplyItemUserPic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerReply .allCommentContainerReplyItem .allCommentContainerReplyItemUser .allCommentContainerReplyItemUserName {
  font-size: 1.1rem;
  line-height: 1.375;
  font-weight: 500;
  color: #475569;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerReply .allCommentContainerReplyItem .allCommentContainerReplyItemUser .allCommentContainerReplyItemUserOnline {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerReply .allCommentContainerReplyItem .allCommentContainerReplyItemUser .allCommentContainerReplyItemUserOnline span {
  color: #475569;
  font-size: 0.7rem;
  font-weight: 300;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerReply .allCommentContainerReplyItem .allCommentContainerReplyItemP p {
  color: #475569;
  font-size: 0.85rem;
  line-height: 2.25;
  width: 100%;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem:nth-last-child(1) {
  border-bottom: 0;
}

@media screen and (max-width: 700px) {
  .allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem {
    grid-template-columns: 1fr;
  }
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .paginate {
  margin: 0 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .paginate:first-child {
  margin-bottom: 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .paginate:last-child {
  margin-top: 1rem;
}

.allSingleIndexItems {
  border-radius: 10px;
  overflow: hidden;
  padding: 1rem;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.allSingleIndexItems .allSingleHomeTop {
  display: grid;
  grid-template-columns: 1fr auto;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 1rem;
}

.allSingleIndexItems .allSingleHomeTop .allSingleHomeAddress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2px, auto));
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingleIndexItems .allSingleHomeTop .allSingleHomeAddress span {
  color: #475569;
  font-size: 1rem;
}

.allSingleIndexItems .allSingleHomeTop .allSingleHomeAddress a {
  color: #475569;
  font-size: 0.7rem;
  font-weight: 300;
}

@media screen and (max-width: 700px) {
  .allSingleIndexItems .allSingleHomeTop .allSingleHomeAddress {
    visibility: hidden;
    position: absolute;
    top: 0;
  }
}

.allSingleIndexItems .allSingleHomeTop .allSingleHomeProperties {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  grid-gap: 0.5rem;
  font-size: 0.929rem;
  line-height: 1.692;
  color: #475569;
}

.allSingleIndexItems .allSingleHomeInfo {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1.8fr auto;
  grid-gap: 1rem;
  background: #fff;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoImages .allSingleHomeInfoImagesTop {
  border: 1px solid #f5f5f5;
  border-radius: 10px;
  padding: 1rem;
  position: relative;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoImages .allSingleHomeInfoImagesTop .allSingleHomeInfoImagesTopOptions {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 20;
  display: grid;
  grid-template-columns: auto;
  justify-content: left;
  align-items: center;
  grid-gap: 1rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoImages .allSingleHomeInfoImagesTop .allSingleHomeInfoImagesTopOptions .allSingleHomeInfoImagesTopOption {
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid #e1e0ea;
  opacity: 0.5;
  background: #fff;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoImages .allSingleHomeInfoImagesTop .allSingleHomeInfoImagesTopOptions .allSingleHomeInfoImagesTopOption i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoImages .allSingleHomeInfoImagesTop .allSingleHomeInfoImagesTopOptions .allSingleHomeInfoImagesTopOption i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoImages .allSingleHomeInfoImagesTop .allSingleHomeInfoImagesTopOptions .allSingleHomeInfoImagesTopOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoImages .hooper {
  overflow: hidden;
  height: auto;
  outline: transparent;
  margin-top: 0.5rem;
  display: grid;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoImages .hooper .hooper-list .hooper-navigation.is-rtl button svg {
  background: #fff;
  border-radius: 100%;
  width: 1.5rem;
  height: 1.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  fill: #524c96;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoImages .hooper .hooper-list .hooper-track .hooper-slide {
  cursor: pointer;
  padding-right: 0.5rem;
  width: auto;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoImages .hooper .hooper-list .hooper-track .hooper-slide img {
  width: 100%;
  height: 6rem;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0.3rem;
  overflow: hidden;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoImages .hooper .hooper-list .hooper-track .hooper-slide.is-active.is-current {
  padding-right: 0;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectTitle h1 {
  font-size: 1.1rem;
  line-height: 34px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 1px;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectTitle h1 span {
  padding: 0.1rem 0.8rem;
  font-size: 0.8rem;
  border-radius: 5px;
  font-weight: 300;
  margin-right: 0.5rem;
  letter-spacing: 0.1px;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectTitle h1 .original {
  color: #fff;
  background: #FFD300;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectTitle h1 .used {
  color: #fff;
  background: #f21111;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoItem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2px, auto));
  justify-content: right;
  align-items: center;
  grid-gap: 1.5rem;
  margin-top: 0.5rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoItem .allSingleHomeInfoItemRate {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoItem .allSingleHomeInfoItemRate i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoItem .allSingleHomeInfoItemRate i svg {
  width: 0.8rem;
  height: 0.8rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoItem .allSingleHomeInfoItemRate span {
  font-size: 0.75rem;
  line-height: 1.692;
  color: #475569;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoItem .allSingleHomeInfoItemComment {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoItem .allSingleHomeInfoItemComment i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoItem .allSingleHomeInfoItemComment i svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: #475569;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoItem .allSingleHomeInfoItemComment span {
  font-size: 0.75rem;
  line-height: 1.692;
  color: #475569;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject label {
  color: #475569;
  font-size: 0.9rem;
  font-weight: 300;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectBrand {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 2rem;
  margin-top: 2rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectBrand .allSingleHomeInfoSubjectBrandItem {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.4rem;
  align-items: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectBrand .allSingleHomeInfoSubjectBrandItem ul li a {
  border-bottom: 1px dashed #f21111;
  color: #f21111;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectColor {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 2rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectColor i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectColor i svg {
  width: 1.2rem;
  height: 1.2rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectColor ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4rem, auto));
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectColor ul .unActive {
  display: grid;
  grid-template-columns: 1fr auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  border: 1.5px solid #f5f5f5;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectColor ul .active {
  display: grid;
  grid-template-columns: 1fr auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  border: 1.5px solid #00C58D;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectColor ul i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 0.9rem;
  height: 0.9rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectColor ul i svg {
  width: 0.9rem;
  height: 0.9rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectColor ul span {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 300;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectSize {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 2rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectSize i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectSize i svg {
  width: 1.2rem;
  height: 1.2rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectSize .allCategoryPanel {
  position: relative;
  width: 10rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectSize .allCategoryPanel .categoryShow {
  border: 1.4px solid #e1e0ea;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0.4rem 0.5rem 0.4rem 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectSize .allCategoryPanel .categoryShow h4 {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 400;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectSize .allCategoryPanel .categoryShow i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectSize .allCategoryPanel .categoryShow i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #475569;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectSize .allCategoryPanel ul {
  position: absolute;
  top: 94%;
  right: 0;
  width: 100%;
  background: #fff;
  border-radius: 0.3rem;
  max-height: 10rem;
  direction: ltr;
  overflow: hidden;
  border: 1.4px solid #e1e0ea;
  z-index: 80;
  display: block;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectSize .allCategoryPanel ul .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 10rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectSize .allCategoryPanel ul li {
  direction: rtl;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.4rem;
  padding-right: 0.5rem;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectSize .allCategoryPanel ul li:hover {
  background: #f5f5f5;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectAbility {
  margin-top: 2rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectAbility label {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 0.5rem;
  align-items: center;
  list-style: none;
  line-height: 1.833;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectAbility label i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectAbility label i svg {
  width: 1.2rem;
  height: 1.2rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectAbility ul {
  display: grid;
  grid-template-columns: auto auto;
  margin-top: 0.5rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectAbility ul li {
  color: #475569;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectAbility ul li i {
  display: grid;
  align-items: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectAbility ul li i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #00C58D;
}

@media screen and (max-width: 700px) {
  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoSubjectAbility ul {
    grid-template-columns: 1fr;
  }
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomePrice {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomePrice .allSingleHomePriceNext {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  border-radius: 10px;
  overflow: hidden;
  background: #23bf53;
  box-shadow: -46px 0px 0px 0px rgba(0, 0, 0, 0.12) inset;
  width: 13rem;
  padding: 0 1rem;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  height: 3rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomePrice .allSingleHomePriceNext i .loading {
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomePrice .allSingleHomePriceNext i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: white;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomePrice .allSingleHomePriceNext button {
  font-size: 1rem;
  color: #fff;
  font-weight: 300;
  overflow: hidden;
  text-align: center;
  padding: 0.5rem;
  background: transparent;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomePrice .allSingleHomePriceNext:hover {
  box-shadow: -250px 0px 0px 0px rgba(0, 0, 0, 0.12) inset;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomePrice .abilityPostToolTip {
  background: rgba(255, 0, 0, 0.1);
  padding: 0 0.5rem;
  border-radius: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
  height: 3rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomePrice .abilityPostToolTip i svg {
  fill: #e3342f;
  width: 1.2rem;
  height: 1.2rem;
  animation: arrow-anim 1s ease infinite;
  margin-bottom: 0;
}

@keyframes arrow-anim {
  0% {
    margin-bottom: 0;
  }

  10% {
    margin-bottom: 0.5rem;
  }

  30% {
    transform: rotate(-40deg);
  }

  50% {
    transform: rotate(40deg);
  }

  60% {
    transform: rotate(-40deg);
  }

  70% {
    transform: rotate(-20deg);
  }

  80% {
    transform: rotate(0);
    margin-bottom: 1rem;
  }

  100% {
    margin-bottom: 0.5rem;
  }
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomePrice .abilityPostToolTip p {
  font-size: 0.8rem;
  font-weight: 300;
  color: #f21111;
  height: 3rem;
  display: grid;
  align-items: center;
}

@media screen and (max-width: 700px) {
  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomePrice {
    grid-template-columns: 1fr;
  }
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoPriceCheck2 {
  margin-top: 2rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .allSingleHomeInfoPriceCheck2 span {
  display: grid;
  background: #f5f5f5;
  color: #475569;
  border-radius: 8px;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.9rem;
  width: 13rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .reportSingle {
  display: grid;
  grid-template-columns: auto;
  justify-content: right;
  align-items: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .reportSingle .reportSingleItem {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 2rem;
  border-bottom: 1px dashed #e1e0ea;
  padding-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .reportSingle .reportSingleItem i {
  display: grid;
  align-items: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .reportSingle .reportSingleItem i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #475569;
  transition: all 0.3s ease-in-out;
  opacity: 0.6;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .reportSingle .reportSingleItem span {
  transition: all 0.3s ease-in-out;
  font-size: 0.75rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.6;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .reportSingle .reportSingleItem:hover {
  border-bottom: 1px dashed #475569;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .reportSingle .reportSingleItem:hover svg {
  opacity: 1;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoSubject .reportSingle .reportSingleItem:hover span {
  opacity: 1;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions {
  width: 18rem;
  position: relative;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  background: #f5f5f5;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 10px;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeText {
  text-align: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeText h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #475569;
  opacity: 0.9;
  letter-spacing: 1px;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeText h5 {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.5;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem {
  direction: ltr;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem .flip-card[data-v-78efe7f6] {
  font-size: 1.1rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem .flip-card__top[data-v-78efe7f6],
.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem .flip-card__bottom[data-v-78efe7f6],
.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem .flip-card__back-bottom[data-v-78efe7f6],
.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem .flip-card__back[data-v-78efe7f6]::before,
.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem .flip-card__back[data-v-78efe7f6]::after {
  padding: 0;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem .flip-card__top[data-v-78efe7f6],
.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem .flip-card__bottom[data-v-78efe7f6],
.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem .flip-card__back-bottom[data-v-78efe7f6],
.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem .flip-card__back[data-v-78efe7f6]::before,
.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem .flip-card__back[data-v-78efe7f6]::after {
  background: #fff;
  color: #475569;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem .flip-card__bottom[data-v-78efe7f6],
.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem .flip-card__back-bottom[data-v-78efe7f6],
.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem .flip-card__bottom-4digits[data-v-78efe7f6],
.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem .flip-card__back-bottom-4digits[data-v-78efe7f6] {
  background: #fff;
  border-top: 0;
  color: #475569;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoTime .allSingleHomeInfoTimeItem .flip-clock__slot[data-v-78efe7f6] {
  position: absolute;
  top: 0;
  visibility: hidden;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoOptionPrice {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  grid-gap: 0.5rem;
  align-items: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoOptionPrice h4 {
  font-size: 0.9rem;
  line-height: 24px;
  font-weight: 500;
  opacity: 0.9;
  color: #475569;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoOptionPrice h5 {
  font-size: 1.6rem;
  font-weight: 500;
  color: #f21111;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoOptionPrice h5 span {
  font-size: 0.8rem;
  letter-spacing: 0.1px;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoRates {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 1rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoRates .allSingleHomeInfoItemRate {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
  opacity: 0.7;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoRates .rateItems {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: left;
  grid-gap: 0.5rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoRates .rateItems .rateItem {
  cursor: pointer;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoRates .rateItems .rateItem i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoRates .rateItems .rateItem i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoRates .rateItems .rateItem i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoDatas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoDatas .allSingleHomeInfoData {
  border: 2px dashed #e1e0ea;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoDatas .allSingleHomeInfoData h5 {
  font-size: 0.75rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoDatas .allSingleHomeInfoData .allSingleHomeInfoDataItem i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoDatas .allSingleHomeInfoData .allSingleHomeInfoDataItem i svg {
  fill: #475569;
  width: 1.2rem;
  height: 1.2rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoDatas .allSingleHomeInfoData .allSingleHomeInfoDataItem i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoDatas .allSingleHomeInfoData .loading {
  fill: #475569;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoOption {
  padding: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  background: #f5f5f5;
  border-radius: 10px;
  margin-top: 1rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoOption span {
  font-size: 0.85rem;
  line-height: 24px;
  font-weight: 500;
  opacity: 0.9;
  color: #475569;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoOption i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoOption i svg {
  width: 1.4rem;
  height: 1.4rem;
  opacity: 0.9;
  fill: #475569;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee {
  padding: 1rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  background: #f5f5f5;
  border-radius: 10px;
  margin-top: 1rem;
  position: relative;
  cursor: pointer;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee span {
  font-size: 0.85rem;
  line-height: 24px;
  font-weight: 500;
  opacity: 0.9;
  color: #475569;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee i svg {
  width: 1.4rem;
  height: 1.4rem;
  opacity: 0.9;
  fill: #475569;
  transform: rotate(0);
  transition: all 0.3s ease-in-out;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee i .active {
  transform: rotate(180deg);
  width: 0.8rem;
  height: 0.8rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee i:last-child svg {
  width: 0.8rem;
  height: 0.8rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems {
  position: absolute;
  top: 88%;
  right: 0;
  left: 0;
  background: #f5f5f5;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 1rem;
  z-index: 500;
  box-shadow: 0 8px 1px rgba(0, 0, 0, 0.04);
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem {
  direction: rtl;
  margin-top: 1rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem:first-child {
  margin-top: 0;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem label {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  cursor: pointer;
  color: #475569;
  letter-spacing: 0.1px;
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.571;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem span {
  font-size: 0.75rem;
  font-weight: 300;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox],
  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=radio] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox]:after,
  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: all 0.3s ease-in-out;
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox]:checked,
  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox]:disabled,
  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox]:disabled:checked,
  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox]:disabled + label,
  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=radio]:disabled + label {
    cursor: not-allowed;
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox]:hover:not(:checked):not(:disabled),
  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox]:focus,
  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox]:not(.switch),
  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=radio]:not(.switch) {
    width: 21px;
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox]:not(.switch):after,
  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox]:not(.switch):checked,
  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=radio]:not(.switch):checked {
    --o: 1;
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox] + label,
  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=radio] + label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px;
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=radio] {
    border-radius: 50%;
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=radio]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .allSingleHomeInfoGuarantee .allSingleHomeOptionItems .allSingleHomeOptionItem input[type=radio]:checked {
    --s: .5;
  }
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .scoreSingle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 1.5rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .scoreSingle .rightScore {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.2rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .scoreSingle .rightScore svg {
  width: 1.5rem;
  height: 1.5rem;
}

.allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions .scoreSingle span {
  font-size: 0.85rem;
  font-weight: 300;
  color: #f6993f;
}

@media screen and (max-width: 1300px) {
  .allSingleIndexItems .allSingleHomeInfoPrice {
    height: 22rem;
  }
}

@media screen and (max-width: 1000px) {
  .allSingleIndexItems .allSingleHomeInfo {
    grid-template-columns: 0.6fr 1fr;
  }
}

@media screen and (max-width: 700px) {
  .allSingleIndexItems .allSingleHomeInfo {
    grid-template-columns: 1fr;
    grid-gap: 2rem;
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoImages .allSingleHomeInfoImagesTop .allSingleHomeInfoImagesTopOption ul li .rateItems .rateItem {
    visibility: visible;
    opacity: 1;
    margin-top: 0;
  }

  .allSingleIndexItems .allSingleHomeInfo .allSingleHomeInfoOptions {
    width: 100%;
  }
}

.allSingleTop2 .address {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2px, auto));
  justify-content: right;
  align-items: center;
}

.allSingleTop2 .address i {
  margin-left: 0.5rem;
}

.allSingleTop2 .address i svg {
  width: 1rem;
  height: 1rem;
  fill: #475569;
  opacity: 0.7;
}

.allSingleTop2 .address a {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
  opacity: 0.7;
}

.allSingleTop2 .address a:after {
  content: "/";
  padding: 0 0.5rem;
}

.allSingleTop2 .address a:last-child:after {
  content: "";
  padding: 0;
}

.allSingleTop2 .containerSingle {
  border-radius: 10px;
  padding: 1rem;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 25rem 1fr;
}

.allSingleTop2 .containerSingle .right .options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  justify-content: center;
  align-items: center;
  grid-gap: 2rem;
  background: #f5f5f5;
  border-radius: 5rem;
  height: 3rem;
}

.allSingleTop2 .containerSingle .right .options .option {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  justify-content: center;
  grid-gap: 0.5rem;
  align-items: center;
  transition: all 0.3s ease-in-out;
  padding: 0.3rem 0;
  border-radius: 5rem;
  width: 1.4rem;
  cursor: pointer;
}

.allSingleTop2 .containerSingle .right .options .option .loading {
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allSingleTop2 .containerSingle .right .options .option i {
  display: grid;
  align-items: center;
  justify-content: center;
}

.allSingleTop2 .containerSingle .right .options .option i svg {
  width: 1.45rem;
  height: 1.4rem;
  fill: #475569;
  opacity: 0.7;
}

.allSingleTop2 .containerSingle .right .options .option i svg:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allSingleTop2 .containerSingle .right .options .option i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allSingleTop2 .containerSingle .right .options .option .active svg {
  fill: #f21111;
}

.allSingleTop2 .containerSingle .right .options .option h4 {
  opacity: 0;
  color: #475569;
  font-size: 0;
  font-weight: 500;
  position: absolute;
  top: 0;
  visibility: hidden;
}

.allSingleTop2 .containerSingle .right .options .option:hover {
  width: 6rem;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  background: #fff;
}

.allSingleTop2 .containerSingle .right .options .option:hover h4 {
  opacity: 0.7;
  font-size: 0.85rem;
  visibility: visible;
  position: relative;
}

.allSingleTop2 .containerSingle .right .pic {
  margin-top: 1rem;
}

.allSingleTop2 .containerSingle .right .hooper {
  overflow: hidden;
  height: auto;
  outline: transparent;
  margin-top: 0.5rem;
}

.allSingleTop2 .containerSingle .right .hooper .hooper-list .hooper-navigation.is-rtl button svg {
  background: #fff;
  border-radius: 100%;
  width: 1.5rem;
  height: 1.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  fill: #524c96;
}

.allSingleTop2 .containerSingle .right .hooper .hooper-list .hooper-track .hooper-slide {
  cursor: pointer;
  padding-right: 0.5rem;
  width: auto;
}

.allSingleTop2 .containerSingle .right .hooper .hooper-list .hooper-track .hooper-slide img {
  width: 100%;
  height: 6rem;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0.3rem;
  overflow: hidden;
}

.allSingleTop2 .containerSingle .right .hooper .hooper-list .hooper-track .hooper-slide.is-active.is-current {
  padding-right: 0;
}

.allSingleTop2 .containerSingle .left .titleProduct {
  position: relative;
  overflow: hidden;
}

.allSingleTop2 .containerSingle .left .titleProduct h1 {
  padding-right: 1rem;
  font-size: 1.1rem;
  font-weight: 300;
  margin-bottom: 10px;
  letter-spacing: 1px;
  color: #475569;
}

.allSingleTop2 .containerSingle .left .titleProduct h1 span {
  padding: 0.1rem 0.8rem;
  font-size: 0.8rem;
  border-radius: 5px;
  font-weight: 300;
  margin-right: 0.5rem;
  letter-spacing: 0.1px;
}

.allSingleTop2 .containerSingle .left .titleProduct h1 .fake {
  color: #fff;
  background: #FFD300;
}

.allSingleTop2 .containerSingle .left .titleProduct h1 .original {
  color: #fff;
  background: #00C58D;
}

.allSingleTop2 .containerSingle .left .titleProduct h1 .used {
  color: #fff;
  background: orange;
}

.allSingleTop2 .containerSingle .left .titleProduct span {
  color: #524c96;
  font-size: 0.7rem;
  background: #fff;
  position: relative;
  font-weight: 300;
  padding: 10px;
  padding-right: 1rem;
  z-index: 10;
  line-height: 1.5rem;
}

.allSingleTop2 .containerSingle .left .titleProduct::after {
  content: "";
  width: 100%;
  left: 0;
  bottom: 0.6rem;
  margin-left: 20rem;
  height: 0.08rem;
  background: #e1e0ea;
  position: absolute;
}

.allSingleTop2 .containerSingle .left .productDetail {
  display: grid;
  grid-template-columns: 1fr auto;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight {
  padding: 1rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightCats {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightCats .detailCatsRight {
  display: grid;
  grid-gap: 0.5rem;
  align-items: center;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightCats .detailCatsRight .singleComment {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightCats .detailCatsRight .singleComment h4 {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightCats .detailCatsRight .singleCategory {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.3rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightCats .detailCatsRight .singleCategory h4 {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightCats .detailCatsRight .singleCategory ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightCats .detailCatsRight .singleCategory ul li a {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightCats .singleBrand {
  margin-top: 1rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightCats .singleBrand ul li a {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  border: 1px dashed #e1e0ea;
  padding: 0.5rem;
  border-radius: 10px;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightCats .singleBrand ul li a .picBrand {
  display: grid;
  justify-content: center;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightCats .singleBrand ul li a .picBrand img {
  width: 3rem;
  height: 2rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightCats .singleBrand ul li a h5 {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 300;
  color: #475569;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .singleAbility {
  margin-top: 1rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .singleAbility h4 {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .singleAbility ul {
  display: grid;
  grid-template-columns: 1fr;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .singleAbility ul li {
  color: #475569;
  font-size: 0.8rem;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .singleAbility ul li i {
  display: grid;
  align-items: center;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .singleAbility ul li i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #00C58D;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .allSingleHomePrice {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .allSingleHomePrice .allSingleHomePriceNext {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  border-radius: 10px;
  overflow: hidden;
  background: #23bf53;
  box-shadow: -46px 0px 0px 0px rgba(0, 0, 0, 0.12) inset;
  width: 13rem;
  padding: 0 1rem;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  height: 3rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .allSingleHomePrice .allSingleHomePriceNext i .loading {
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .allSingleHomePrice .allSingleHomePriceNext i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: white;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .allSingleHomePrice .allSingleHomePriceNext button {
  font-size: 1rem;
  color: #fff;
  font-weight: 300;
  overflow: hidden;
  text-align: center;
  padding: 0.5rem;
  background: transparent;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .allSingleHomePrice .allSingleHomePriceNext:hover {
  box-shadow: -250px 0px 0px 0px rgba(0, 0, 0, 0.12) inset;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .allSingleHomePrice .abilityPostToolTip {
  background: rgba(255, 0, 0, 0.1);
  padding: 0 0.5rem;
  border-radius: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
  height: 3rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .allSingleHomePrice .abilityPostToolTip i svg {
  fill: #e3342f;
  width: 1.2rem;
  height: 1.2rem;
  animation: arrow-anim 1s ease infinite;
  margin-bottom: 0;
}

@keyframes arrow-anim {
  0% {
    margin-bottom: 0;
  }

  10% {
    margin-bottom: 0.5rem;
  }

  30% {
    transform: rotate(-40deg);
  }

  50% {
    transform: rotate(40deg);
  }

  60% {
    transform: rotate(-40deg);
  }

  70% {
    transform: rotate(-20deg);
  }

  80% {
    transform: rotate(0);
    margin-bottom: 1rem;
  }

  100% {
    margin-bottom: 0.5rem;
  }
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .allSingleHomePrice .abilityPostToolTip p {
  font-size: 0.8rem;
  font-weight: 300;
  color: #f21111;
  height: 3rem;
  display: grid;
  align-items: center;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .allSingleHomeInfoPriceCheck2 {
  margin-top: 2rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .allSingleHomeInfoPriceCheck2 span {
  display: grid;
  background: #f5f5f5;
  color: #475569;
  border-radius: 8px;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.9rem;
  width: 13rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .reportSingle {
  display: grid;
  grid-template-columns: auto;
  justify-content: right;
  align-items: center;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .reportSingle .reportSingleItem {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 2rem;
  border-bottom: 1px dashed #e1e0ea;
  padding-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .reportSingle .reportSingleItem i {
  display: grid;
  align-items: center;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .reportSingle .reportSingleItem i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #475569;
  transition: all 0.3s ease-in-out;
  opacity: 0.6;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .reportSingle .reportSingleItem span {
  transition: all 0.3s ease-in-out;
  font-size: 0.75rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.6;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .reportSingle .reportSingleItem:hover {
  border-bottom: 1px dashed #475569;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .reportSingle .reportSingleItem:hover svg {
  opacity: 1;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .reportSingle .reportSingleItem:hover span {
  opacity: 1;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .scoreSingle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 1.5rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .scoreSingle .rightScore {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.2rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .scoreSingle .rightScore svg {
  width: 1.5rem;
  height: 1.5rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .scoreSingle span {
  font-size: 0.85rem;
  font-weight: 300;
  color: #f6993f;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightOptions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  grid-gap: 1rem;
  margin-top: 2rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightOptions .detailRightOption {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightOptions .detailRightOption i svg {
  width: 2.5rem;
  height: 2.5rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightOptions .detailRightOption .detailRightOptionText h4,
.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightOptions .detailRightOption .detailRightOptionText h5 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
}

.allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightOptions .detailRightOption .detailRightOptionText h5 {
  font-weight: 300;
  opacity: 0.7;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft {
  width: 21rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle {
  background: linear-gradient(to right, #f5f5f5 20%, #FF0 40%, #FF0 60%, #f5f5f5 80%);
  background-size: 200% auto;
  animation: shine 1s linear infinite;
  padding: 1rem;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleText {
  text-align: center;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleText h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #475569;
  opacity: 0.9;
  letter-spacing: 1px;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleText h5 {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.5;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem {
  direction: ltr;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem .flip-card[data-v-78efe7f6] {
  font-size: 1.1rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem .flip-card__top[data-v-78efe7f6],
.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem .flip-card__bottom[data-v-78efe7f6],
.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem .flip-card__back-bottom[data-v-78efe7f6],
.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem .flip-card__back[data-v-78efe7f6]::before,
.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem .flip-card__back[data-v-78efe7f6]::after {
  padding: 0;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem .flip-card__top[data-v-78efe7f6],
.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem .flip-card__bottom[data-v-78efe7f6],
.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem .flip-card__back-bottom[data-v-78efe7f6],
.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem .flip-card__back[data-v-78efe7f6]::before,
.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem .flip-card__back[data-v-78efe7f6]::after {
  background: #fff;
  color: #475569;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem .flip-card__bottom[data-v-78efe7f6],
.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem .flip-card__back-bottom[data-v-78efe7f6],
.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem .flip-card__bottom-4digits[data-v-78efe7f6],
.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem .flip-card__back-bottom-4digits[data-v-78efe7f6] {
  background: #fff;
  border-top: 0;
  color: #475569;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .timeSingle .timeSingleItem .flip-clock__slot[data-v-78efe7f6] {
  position: absolute;
  top: 0;
  visibility: hidden;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .detailRightOptions {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-gap: 1rem;
  align-items: center;
  margin-top: 1rem;
  padding: 1rem;
  background: #fff;
  border-radius: 20px;
  position: relative;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .detailRightOptions .sellerIcon {
  border-radius: 100%;
  background: #e3342f;
  width: 3rem;
  height: 3rem;
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .detailRightOptions .sellerIcon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .detailRightOptions .description h4 {
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .detailRightOptions .description h5 {
  font-size: 0.65rem;
  font-weight: 300;
  color: #475569;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .detailRightOptions span {
  font-size: 1rem;
  font-weight: 300;
  color: black;
  writing-mode: vertical-lr;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData {
  background: #f5f5f5;
  margin-top: 1rem;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem h4 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
  opacity: 0.7;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singlePrice {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singlePrice h5 {
  font-size: 1.2rem;
  font-weight: 300;
  color: #f21111;
  letter-spacing: 1px;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singlePrice h5 span {
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.1px;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleRate {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 1rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleRate .singleRateItem {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
  opacity: 0.7;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleRate .rateItems {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: left;
  grid-gap: 0.5rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleRate .rateItems .rateItem {
  cursor: pointer;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleRate .rateItems .rateItem i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleRate .rateItems .rateItem i svg {
  fill: #9b9b9b;
  width: 1.3rem;
  height: 1.3rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleRate .rateItems .rateItem i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee {
  display: grid;
  grid-template-columns: auto 1fr auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  border-radius: 10px;
  position: relative;
  padding: 1rem;
  cursor: pointer;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee span {
  font-size: 0.85rem;
  line-height: 24px;
  font-weight: 500;
  opacity: 0.9;
  color: #475569;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee i svg {
  width: 1.4rem;
  height: 1.4rem;
  opacity: 0.9;
  fill: #475569;
  transform: rotate(0);
  transition: all 0.3s ease-in-out;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee i .active {
  transform: rotate(180deg);
  width: 0.8rem;
  height: 0.8rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee i:last-child svg {
  width: 0.8rem;
  height: 0.8rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems {
  position: absolute;
  top: 88%;
  right: 0;
  left: 0;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 1rem;
  z-index: 500;
  box-shadow: 0 8px 1px rgba(0, 0, 0, 0.04);
  background: #f5f5f5;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem {
  direction: rtl;
  margin-top: 1rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem:first-child {
  margin-top: 0;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem label {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  cursor: pointer;
  color: #475569;
  letter-spacing: 0.1px;
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.571;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem span {
  font-size: 0.75rem;
  font-weight: 300;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox],
  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=radio] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox]:after,
  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: all 0.3s ease-in-out;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox]:checked,
  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox]:disabled,
  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox]:disabled:checked,
  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox]:disabled + label,
  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=radio]:disabled + label {
    cursor: not-allowed;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox]:hover:not(:checked):not(:disabled),
  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox]:focus,
  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox]:not(.switch),
  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=radio]:not(.switch) {
    width: 21px;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox]:not(.switch):after,
  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox]:not(.switch):checked,
  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=radio]:not(.switch):checked {
    --o: 1;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox] + label,
  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=radio] + label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=radio] {
    border-radius: 50%;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=radio]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleGuarantee .singleGuaranteeItems .singleGuaranteeItem input[type=radio]:checked {
    --s: .5;
  }
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleCount {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleCount span {
  font-size: 0.85rem;
  line-height: 24px;
  font-weight: 500;
  opacity: 0.9;
  color: #475569;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleColor {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 1rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleColor ul {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 1rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleColor ul .unActive {
  display: grid;
  grid-template-columns: 1fr auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 20px;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleColor ul .active {
  display: grid;
  grid-template-columns: 1fr auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 20px;
  cursor: pointer;
  background: #00C58D;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleColor ul .active span {
  color: white;
  opacity: 1;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleColor ul i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.1rem;
  height: 1.1rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleColor ul i svg {
  width: 1.1rem;
  height: 1.1rem;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem .singleColor ul span {
  color: #475569;
  font-size: 0.8rem;
  opacity: 0.7;
  font-weight: 300;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem:nth-child(even) {
  background: #fff;
}

.allSingleTop2 .containerSingle .left .productDetail .detailLeft .singleData .singleDataItem:last-child {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

@media screen and (max-width: 1250px) {
  .allSingleTop2 .containerSingle {
    display: block;
  }
}

@media screen and (max-width: 800px) {
  .allSingleTop2 .address {
    opacity: 0;
    position: absolute;
  }

  .allSingleTop2 .address a {
    font-size: 0.7rem;
  }

  .allSingleTop2 .containerSingle .left .productDetail {
    grid-template-columns: 1fr;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailLeft {
    width: 100%;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightCats {
    grid-template-columns: 1fr;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailRight .allSingleHomePrice {
    grid-template-columns: 1fr;
  }

  .allSingleTop2 .containerSingle .left .productDetail .detailRight .detailRightOptions {
    grid-template-columns: 1fr;
  }
}

.allAddVariety {
  background: #fff;
  padding: 1rem;
  border-radius: 10px;
}

.allAddVariety .allAddVarietyTop {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
}

.allAddVariety .allAddVarietyTop .allAddVarietyPic img {
  width: 10rem;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.allAddVariety .allAddVarietyTop .allAddVarietySubject h1 {
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
}

.allAddVariety .allAddVarietyTop .allAddVarietySubject ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  justify-content: right;
  grid-gap: 2rem;
  align-items: center;
  margin-top: 2rem;
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 10px;
  overflow: hidden;
}

.allAddVariety .allAddVarietyTop .allAddVarietySubject ul li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allAddVariety .allAddVarietyTop .allAddVarietySubject ul li span {
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.1px;
  color: #475569;
}

.allAddVariety .allCreateVariety {
  padding: 1rem;
  margin-top: 1rem;
  border: 1px solid #f5f5f5;
  border-radius: 10px;
}

.allAddVariety .allCreateVariety .allVarietiesTitle {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-bottom: 1rem;
}

.allAddVariety .allCreateVariety .allVarietiesTitle span {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: #475569;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
  margin-bottom: 1rem;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem h3 {
  color: #475569;
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allCategoryPanel {
  position: relative;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allCategoryPanel .categoryShow {
  border: 1.4px solid #e1e0ea;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0.4rem 0.5rem 0.4rem 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allCategoryPanel .categoryShow h4 {
  color: #475569;
  font-size: 0.75rem;
  font-weight: 400;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allCategoryPanel .categoryShow i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allCategoryPanel .categoryShow i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #475569;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allCategoryPanel ul {
  position: absolute;
  top: 94%;
  right: 0;
  width: 100%;
  background: #fff;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  max-height: 15rem;
  direction: ltr;
  overflow: hidden;
  border: 1.4px solid #e1e0ea;
  border-top: 0;
  z-index: 80;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allCategoryPanel ul .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 15rem;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allCategoryPanel ul li {
  direction: rtl;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.4rem;
  padding-right: 1rem;
  color: #524c96;
  font-size: 0.75rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  height: 2rem;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allCategoryPanel ul li:hover {
  background: #f5f5f5;
  color: #475569;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes {
  position: relative;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .taxShow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1.4px solid #e1e0ea;
  border-radius: 0.3rem;
  cursor: pointer;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .taxShow h4 {
  color: #475569;
  font-size: 0.75rem;
  font-weight: 300;
  height: 2rem;
  display: grid;
  align-items: center;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .taxShow ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, auto));
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .taxShow ul li {
  position: relative;
  padding: 0.4rem;
  background: #f5f5f5;
  border-radius: 0.2rem;
  color: #475569;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .taxShow ul li i {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  justify-content: center;
  align-items: center;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .taxShow ul li i svg {
  fill: #475569;
  width: 0.7rem;
  height: 0.7rem;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .taxShow ul li span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 300;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .taxShow svg {
  width: 0.65rem;
  height: 0.65rem;
  fill: #475569;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .showAllTaxes {
  position: absolute;
  top: 94%;
  right: 0;
  width: 100%;
  display: grid;
  background: #fff;
  grid-template-columns: 1fr;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  direction: ltr;
  overflow: hidden;
  border: 1.4px solid #e1e0ea;
  border-top: 0;
  z-index: 80;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .showAllTaxes .searchTax {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  cursor: auto;
  height: 3rem;
  border-bottom: 2px solid #f5f5f5;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .showAllTaxes .searchTax input {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transition: all 0.3s ease-in-out;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .showAllTaxes .searchTax input:focus {
  border: 1px solid #5A8DEE;
  box-shadow: 0 0 0 0;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .showAllTaxes .searchTax button {
  width: 2.3rem;
  border: 1px solid #e1e0ea;
  border-right: 0;
  font-size: 1.1rem;
  background: transparent;
  border-radius: 0.3rem;
  font-weight: 300;
  transition: all 0.3s ease-in-out;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  height: 100%;
  color: #524c96;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .showAllTaxes .searchTax button:hover {
  background: #5A8DEE;
  color: white;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .showAllTaxes .searchTax:hover {
  background: #fff;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .showAllTaxes .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 15rem;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .showAllTaxes li {
  direction: rtl;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.4rem;
  color: #524c96;
  font-size: 0.75rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  height: 2rem;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .showAllTaxes li:hover {
  background: #5A8DEE;
  color: white;
}

.allAddVariety .allCreateVariety input {
  border: 1px solid #e1e0ea;
  padding: 0.3rem 0.5rem;
  color: #475569;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  width: 100%;
  height: 2.8rem;
  transition: all 0.3s ease-in-out;
}

.allAddVariety .allCreateVariety input:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #5A8DEE;
}

.allAddVariety .allCreateVariety .abilityPost {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 10px;
  margin-top: 1rem;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  grid-gap: 0.5rem;
  align-items: center;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTitle i {
  cursor: pointer;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTitle i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #524c96;
  transition: all 0.3s ease-in-out;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTitle i:hover svg {
  fill: black;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable {
  display: grid;
  grid-template-columns: 1fr;
  margin: 1rem 0;
  box-shadow: 0 0 0 0;
  border-radius: 0.3rem;
  overflow: hidden;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  text-align: right;
  align-items: center;
  grid-gap: 1rem;
  background: #fff;
  padding: 0 1rem;
  min-height: 3.5rem;
  border-bottom: 0;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr th {
  font-weight: 300;
  color: #475569;
  font-size: 0.75rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 1rem;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td {
  display: grid;
  grid-template-columns: 1fr;
  color: #524c96;
  font-size: 0.7rem;
  font-weight: 200;
  overflow: hidden;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td i {
  cursor: pointer;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td i svg {
  width: 1rem;
  height: 1rem;
  fill: #524c96;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td textarea {
  border: 1px solid #e1e0ea;
  padding: 0.3rem 0.5rem;
  color: #475569;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  width: 100%;
  height: 2rem;
  transition: all 0.3s ease-in-out;
  resize: vertical;
  height: 2rem;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td textarea:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #5A8DEE;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td *,
.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td *:before,
.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td *:after {
  box-sizing: border-box;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td body {
  font-family: sans-serif;
  padding: 60px 20px;
}

@media (min-width: 600px) {
  .allAddVariety .allCreateVariety .abilityPost .abilityTable tr td body {
    padding: 60px;
  }
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td .range-slider {
  margin: 60px 0 0 0%;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td .range-slider {
  width: 100%;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td .range-slider__range {
  -webkit-appearance: none;
  width: calc(100% - (73px));
  height: 10px;
  border-radius: 5px;
  background: #d7dcdf;
  outline: none;
  padding: 0;
  margin: 0;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td .range-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  -webkit-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td .range-slider__range::-webkit-slider-thumb:hover {
  background: #4dc0b5;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td .range-slider__range:active::-webkit-slider-thumb {
  background: #4dc0b5;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td .range-slider__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  -moz-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td .range-slider__range::-moz-range-thumb:hover {
  background: #4dc0b5;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td .range-slider__range:active::-moz-range-thumb {
  background: #4dc0b5;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td .range-slider__range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #4dc0b5;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td .range-slider__value {
  display: inline-block;
  position: relative;
  width: 60px;
  color: #fff;
  line-height: 20px;
  text-align: center;
  border-radius: 3px;
  background: #2c3e50;
  padding: 5px 10px;
  margin-left: 8px;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td .range-slider__value:after {
  position: absolute;
  top: 8px;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-right: 7px solid #2c3e50;
  border-bottom: 7px solid transparent;
  content: "";
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td ::-moz-range-track {
  background: #d7dcdf;
  border: 0;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td input::-moz-focus-inner,
.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td input::-moz-focus-outer {
  border: 0;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr:nth-child(2) {
  border-top: 2px solid #e1e0ea;
}

.allAddVariety .allCreateVariety .abilityPost .abilityPostToolTip {
  background: rgba(255, 0, 0, 0.1);
  padding: 0 0.5rem;
  border-radius: 5px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
  height: 3rem;
}

.allAddVariety .allCreateVariety .abilityPost .abilityPostToolTip i svg {
  fill: #e3342f;
  width: 1.2rem;
  height: 1.2rem;
  animation: arrow-anim 1.5s ease infinite;
  margin-bottom: 0;
}

@keyframes arrow-anim {
  0% {
    margin-bottom: 0;
  }

  10% {
    margin-bottom: 0.5rem;
  }

  30% {
    transform: rotate(-40deg);
  }

  50% {
    transform: rotate(40deg);
  }

  60% {
    transform: rotate(-40deg);
  }

  70% {
    transform: rotate(-20deg);
  }

  80% {
    transform: rotate(0);
    margin-bottom: 1rem;
  }

  100% {
    margin-bottom: 0.5rem;
  }
}

.allAddVariety .allCreateVariety .abilityPost .abilityPostToolTip p {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
  height: 3rem;
  display: grid;
  align-items: center;
}

.allAddVariety .allCreateVariety .abilityPost:nth-last-child(3) .abilityTable tr {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto;
}

.allAddVariety .buttons {
  display: grid;
  justify-content: left;
  margin-top: 1rem;
}

.allAddVariety .buttons button {
  background: #5A8DEE;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 300;
  color: white;
}

.allVarieties {
  margin-bottom: 3rem;
}

.allVarieties .allVarietiesTitle {
  border-bottom: 2px solid #e1e0ea;
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 1rem;
}

.allVarieties .allVarietiesTitle span {
  padding: 1rem;
  border-bottom: 2px solid #f21111;
  margin-bottom: -2px;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.1px;
  color: #475569;
}

.allVarieties ul li {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  grid-gap: 1rem;
  align-items: center;
  border-bottom: 1px solid #e1e0ea;
  padding-bottom: 1rem;
  margin-top: 1rem;
}

.allVarieties ul li .sellerProfile {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allVarieties ul li .sellerProfile img {
  width: 2.5rem;
  height: 2.5rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.allVarieties ul li .sellerProfile span {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 0.1px;
}

.allVarieties ul li .sellerSize .allCategoryPanel {
  position: relative;
}

.allVarieties ul li .sellerSize .allCategoryPanel .categoryShow {
  border: 1.4px solid #e1e0ea;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.allVarieties ul li .sellerSize .allCategoryPanel .categoryShow h4 {
  color: #475569;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.2rem;
  letter-spacing: 0.2px;
}

.allVarieties ul li .sellerSize .allCategoryPanel .categoryShow i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allVarieties ul li .sellerSize .allCategoryPanel .categoryShow i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #475569;
}

.allVarieties ul li .sellerSize .allCategoryPanel ul {
  position: absolute;
  top: 94%;
  right: 0;
  width: 100%;
  background: #fff;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  max-height: 15rem;
  direction: ltr;
  overflow: hidden;
  border: 1.4px solid #e1e0ea;
  border-top: 0;
  z-index: 80;
}

.allVarieties ul li .sellerSize .allCategoryPanel ul .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 15rem;
}

.allVarieties ul li .sellerSize .allCategoryPanel ul li {
  direction: rtl;
  padding: 0.4rem;
  padding-right: 1rem;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 300;
  cursor: pointer;
  margin-top: 0;
  transition: all 0.3s ease-in-out;
}

.allVarieties ul li .sellerSize .allCategoryPanel ul li:hover {
  background: rgb(22, 31, 106);
  color: white;
}

.allVarieties ul li .sellerSize:nth-last-child(3) {
  grid-column: span 2/span 2;
}

.allVarieties ul li .sellerPrice {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 0.1px;
}

.allVarieties ul li .sellerAdd {
  display: grid;
  justify-content: center;
}

.allVarieties ul li .sellerAdd button {
  font-size: 0.85rem;
  font-weight: 300;
  color: #f21111;
  border: 1px solid #f21111;
  padding: 0.5rem 1rem;
  background: transparent;
  border-radius: 5px;
  display: grid;
  justify-content: center;
  align-items: center;
}

.allVarieties ul li .sellerAdd button .loading {
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allVarieties ul li .sellerAdd button svg {
  width: 1.45rem;
  height: 1.4rem;
  fill: #f21111;
  opacity: 0.7;
}

.allVarieties ul li .sellerAdd button svg:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allVarieties ul li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

@media screen and (max-width: 800px) {
  .allTableContainer .postTop {
    display: block !important;
  }

  .allTableContainer .postBot ul {
    grid-template-columns: 1fr !important;
  }
}

.allSingleHomeRel2 {
  overflow: hidden;
  margin-top: 2rem;
}

.allSingleHomeRel2 .title {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-bottom: 1rem;
}

.allSingleHomeRel2 .title label {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 31px;
  white-space: nowrap;
  color: #475569;
}

.allSingleHomeRel2 .hooper {
  overflow: hidden;
  min-height: 22rem;
  outline: transparent;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide {
  padding-right: 1rem;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a {
  display: grid;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
  transition: all 0.2s ease-in-out;
  position: relative;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .pic {
  overflow: hidden;
  height: 11rem;
  position: relative;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .pic img {
  width: 100%;
  height: 11rem;
  -o-object-fit: contain;
     object-fit: contain;
  transition: all 0.6s ease-in-out;
  padding-top: 1rem;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .pic img:nth-child(2) {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .postTitle a {
  text-align: center;
  max-width: 90%;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 25px;
  color: #475569;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  opacity: 0.7;
  padding: 0;
  height: auto;
  box-shadow: 0 0 0 0;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .postPrice {
  display: grid;
  grid-gap: 0.4rem;
  align-items: center;
  margin-top: 0.5rem;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem s {
  font-size: 0.8rem;
  line-height: 1.692;
  font-weight: 300;
  color: #ababab;
  text-align: center;
  width: 100%;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem h3 {
  text-align: center;
  width: 100%;
  color: #475569;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem h3 span {
  letter-spacing: 0.1px;
  font-size: 0.8rem;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem i {
  color: white;
  padding: 0.5rem;
  border-radius: 0.4rem;
  display: grid;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .postPrice .postPriceItem i svg {
  width: 1rem;
  height: 1rem;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .checkCount {
  border-bottom: 1px solid #969696;
  z-index: 2;
  height: 27px;
  position: relative;
  width: 100%;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .checkCount span {
  color: #ababab;
  font-size: 1rem;
  line-height: 1.222;
  font-weight: 400;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 115%;
  background: white;
  padding: 0 1rem;
  height: 21px;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .productOption {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 100;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .productOption i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .productOption i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .productOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a .productOption i .loading {
  fill: #9b9b9b;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a:hover .pic img:nth-child(1) {
  top: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  position: absolute;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide a:hover .pic img:nth-child(2) {
  position: relative;
  top: auto;
  visibility: visible;
  opacity: 1;
  right: auto;
}

.allSingleHomeRel2 .hooper .hooper-list .hooper-track .hooper-slide.is-current {
  padding-right: 0;
}

.allSingleDownload {
  margin: auto;
  margin-top: 8rem;
}

.allSingleDownload .address {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: right;
  align-items: center;
  margin-top: 1rem;
}

.allSingleDownload .address a {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
  letter-spacing: 0.5px;
}

.allSingleDownload .address a:after {
  content: "/";
  padding: 0 0.5rem;
}

.allSingleDownload .address a:last-child:after {
  content: "";
  padding: 0;
}

@media screen and (max-width: 1000px) {
  .allSingleDownload .address a {
    font-size: 0.6rem;
  }
}

.allSingleDownload h1 {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 2.3rem;
  color: #475569;
  letter-spacing: 1px;
  text-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  margin-top: 2rem;
}

.allSingleDownload h1 span {
  padding: 0.3rem 0.8rem;
  border-radius: 5px;
  background: rgba(255, 0, 0, 0.1);
  color: #f21111;
  font-size: 0.8rem;
  font-weight: 300;
}

.allSingleDownload .singleTop {
  display: grid;
  grid-template-columns: 1fr 22rem;
  grid-gap: 1rem;
  margin-top: 2rem;
}

.allSingleDownload .singleTop .right .rightItems {
  background: #fff;
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  padding: 1rem;
}

.allSingleDownload .singleTop .right .rightItems .pic {
  background: #fff;
  border-radius: 5px;
  padding: 1rem;
}

.allSingleDownload .singleTop .right .rightItems .pic .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}

.allSingleDownload .singleTop .right .tabs {
  background: #fff;
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  padding: 0.5rem;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.allSingleDownload .singleTop .right .tabs .tab {
  text-align: center;
}

.allSingleDownload .singleTop .right .tabs .tab a {
  cursor: pointer;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 10px;
  font-weight: 500;
  color: #475569;
}

.allSingleDownload .singleTop .right .tabs .tab a span {
  background: #f21111;
  color: white;
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 300;
}

.allSingleDownload .singleTop .right .tabs .tab .active {
  background: rgba(255, 0, 0, 0.1);
  color: #f21111;
}

.allSingleDownload .singleTop .right .review,
.allSingleDownload .singleTop .right .comment,
.allSingleDownload .singleTop .right .allSingleQuestion {
  background: #fff;
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  padding: 2rem;
  margin-top: 1rem;
}

.allSingleDownload .singleTop .right .review p {
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.2px;
  line-height: 2.2rem;
  color: #475569;
}

.allSingleDownload .singleTop .right .review p h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #475569;
}

.allSingleDownload .singleTop .right .review p h3 {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.allSingleDownload .singleTop .right .review .cats {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px dashed #e1e0ea;
  align-items: center;
}

.allSingleDownload .singleTop .right .review .cats h4 {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
  letter-spacing: 0.5px;
}

.allSingleDownload .singleTop .right .review .cats ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  grid-gap: 1rem;
  align-items: center;
}

.allSingleDownload .singleTop .right .review .cats ul li {
  background: #f5f5f5;
  padding: 0.3rem 1rem;
  border-radius: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}

.allSingleDownload .singleTop .right .review .cats ul li a {
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  color: #475569;
  letter-spacing: 0.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allSingleDownload .singleTop .right .allSingleQuestion {
  display: grid;
  grid-template-columns: 15rem 1fr;
  grid-gap: 1rem;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend {
  border: 1px solid #e1e0ea;
  border-radius: 10px;
  padding: 1rem;
  position: sticky;
  top: 1rem;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend i {
  display: grid;
  justify-content: center;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend i svg {
  width: 4rem;
  height: 4rem;
  fill: #475569;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend p {
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
  text-align: center;
  margin-top: 1rem;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend h3 {
  margin-top: 1rem;
  border: 1px solid #f21111;
  padding: 0.5rem;
  color: #f21111;
  font-size: 0.8rem;
  font-weight: 300;
  text-align: center;
  transition: all 0.3s ease-in-out;
  border-radius: 10px;
  cursor: pointer;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend h3:hover {
  background: #f21111;
  color: white;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem {
  padding: 1rem 0;
  border-bottom: 1px solid #e1e0ea;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionTitle {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionTitle i {
  display: grid;
  align-items: center;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionTitle i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #f21111;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionTitle p {
  font-size: 0.95rem;
  font-weight: 500;
  color: #475569;
  letter-spacing: 0.1px;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionAnswers .allSingleQuestionAnswer {
  padding: 1rem;
  border-radius: 10px;
  background: #f5f5f5;
  margin-top: 1rem;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionAnswers .allSingleQuestionAnswer h4 {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionAnswers .allSingleQuestionAnswer p {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.9;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionItemSend {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
  margin: 0.5rem;
  margin-bottom: 0;
  cursor: pointer;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionItemSend span {
  font-size: 0.9rem;
  font-weight: 500;
  color: #f21111;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionItemSend i {
  display: grid;
  align-items: center;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionItemSend i svg {
  width: 0.6rem;
  height: 0.6rem;
  fill: #f21111;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionEmpty {
  display: grid;
  align-items: center;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionEmpty i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionEmpty i svg {
  width: 5rem;
  height: 5rem;
  fill: #475569;
  opacity: 0.8;
}

.allSingleDownload .singleTop .right .allSingleQuestion .allSingleQuestionBody .allSingleQuestionEmpty p {
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.8;
  color: #475569;
  text-align: center;
  margin-top: 0.5rem;
}

@media screen and (max-width: 700px) {
  .allSingleDownload .singleTop .right .allSingleQuestion {
    grid-template-columns: 1fr;
  }
}

.allSingleDownload .singleTop .right .related {
  margin-top: 2rem;
}

.allSingleDownload .singleTop .right .allShowCategory {
  margin-top: 1rem;
  border-radius: 10px;
  padding: 1rem;
  padding-bottom: 0;
}

.allSingleDownload .singleTop .right .allShowCategory .hooper .hooper-list .hooper-track {
  padding: 0;
  padding-bottom: 1.5rem;
}

.allSingleDownload .singleTop .left .detail {
  background: #fff;
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  padding: 1rem;
}

.allSingleDownload .singleTop .left .detail .detailPrice {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.allSingleDownload .singleTop .left .detail .detailPrice .item h4 {
  font-size: 1rem;
  font-weight: 300;
  color: #f21111;
  text-align: center;
  margin-bottom: 0.5rem;
}

.allSingleDownload .singleTop .left .detail .detailPrice .item h5 {
  font-size: 1.3rem;
  font-weight: 500;
  color: #475569;
  text-align: center;
}

.allSingleDownload .singleTop .left .detail .detailPrice .item h5 span {
  font-size: 0.9rem;
  letter-spacing: 0.1px;
}

.allSingleDownload .singleTop .left .detail .detailPrice .item:first-child {
  border-left: 2px dashed #e1e0ea;
}

.allSingleDownload .singleTop .left .detail .detailPrice .item:first-child h4 {
  color: #00C58D;
}

.allSingleDownload .singleTop .left .detail .rates {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  grid-gap: 1rem;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid #e1e0ea;
}

.allSingleDownload .singleTop .left .detail .rates .top {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingleDownload .singleTop .left .detail .rates .top span {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
  opacity: 0.7;
}

.allSingleDownload .singleTop .left .detail .rates .top span span {
  color: #00C58D;
  font-size: 1rem;
}

.allSingleDownload .singleTop .left .detail .rates .top h4 {
  text-align: left;
  color: #00C58D;
  font-weight: 300;
  font-size: 1rem;
}

.allSingleDownload .singleTop .left .detail .rates .top h4 span {
  color: #475569;
  font-size: 0.8rem;
}

.allSingleDownload .singleTop .left .detail .rates .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
  direction: ltr;
}

.allSingleDownload .singleTop .left .detail .rates .container .rating {
  display: flex;
  width: 100%;
  justify-content: center;
  overflow: hidden;
  flex-direction: row-reverse;
  position: relative;
  direction: rtl;
}

.allSingleDownload .singleTop .left .detail .rates .container .rating-0 {
  filter: grayscale(100%);
}

.allSingleDownload .singleTop .left .detail .rates .container .rating > input {
  display: none;
}

.allSingleDownload .singleTop .left .detail .rates .container .rating > label {
  cursor: pointer;
  width: 30px;
  height: 30px;
  margin-top: auto;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 76%;
  transition: 0.3s;
}

.allSingleDownload .singleTop .left .detail .rates .container .rating > input:checked ~ label,
.allSingleDownload .singleTop .left .detail .rates .container .rating > input:checked ~ label ~ label {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}

.allSingleDownload .singleTop .left .detail .rates .container .rating > input:not(:checked) ~ label:hover,
.allSingleDownload .singleTop .left .detail .rates .container .rating > input:not(:checked) ~ label:hover ~ label {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}

.allSingleDownload .singleTop .left .detail .rates .container .feedback {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

.allSingleDownload .singleTop .left .addCart {
  background: #fff;
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
}

.allSingleDownload .singleTop .left .addCart a {
  background: #00C58D;
  padding: 0.5rem 1rem;
  display: grid;
  color: #475569;
  font-size: 1rem;
  font-weight: 500;
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.07);
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  opacity: 0.7;
  cursor: pointer;
}

.allSingleDownload .singleTop .left .addCart a svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: white;
}

.allSingleDownload .singleTop .left .addCart a:hover {
  opacity: 1;
}

.allSingleDownload .singleTop .left .addCart p {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.6;
  line-height: 1.9rem;
  text-align: center;
}

.allSingleDownload .singleTop .left .addCart .options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 1rem;
}

.allSingleDownload .singleTop .left .addCart .options .option h3 {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
}

.allSingleDownload .singleTop .left .addCart .options .option i {
  display: grid;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

.allSingleDownload .singleTop .left .addCart .options .option i i {
  margin-top: 0;
  position: absolute;
  visibility: hidden;
  top: 0;
}

.allSingleDownload .singleTop .left .addCart .options .option i i svg {
  width: 1.8rem;
  height: 1.7rem;
  fill: #475569;
}

.allSingleDownload .singleTop .left .addCart .options .option i i:nth-child(1) {
  position: relative;
  visibility: visible;
  top: auto;
}

.allSingleDownload .singleTop .left .addCart .options .option i .loading {
  width: 1.7rem;
  height: 1.7rem;
  fill: #475569;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allSingleDownload .singleTop .left .description {
  background: #fff;
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
}

.allSingleDownload .singleTop .left .description .item {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 1rem;
}

.allSingleDownload .singleTop .left .description .item h4,
.allSingleDownload .singleTop .left .description .item span,
.allSingleDownload .singleTop .left .description .item a {
  font-size: 0.9rem;
  letter-spacing: 0.3px;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
}

.allSingleDownload .singleTop .left .description .item span,
.allSingleDownload .singleTop .left .description .item a {
  opacity: 1;
}

.allSingleDownload .singleTop .left .description .item:first-child {
  margin-top: 0;
}

.allSingleDownload .singleTop .left .description .problem {
  margin-top: 1rem;
  display: grid;
  justify-content: center;
}

.allSingleDownload .singleTop .left .description .problem button {
  background: transparent;
  font-size: 0.8rem;
  font-weight: 300;
  opacity: 0.5;
  color: red;
  border-bottom: 1px dashed red;
  padding: 0.5rem;
  padding-top: 0;
  transition: all 0.3s ease-in-out;
}

.allSingleDownload .singleTop .left .description .problem button:hover {
  opacity: 1;
}

.allSingleDownload .singleTop .left .property {
  background: #fff;
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.07);
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
}

.allSingleDownload .singleTop .left .property .propertyTitle {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  padding: 0 0.5rem;
}

.allSingleDownload .singleTop .left .property .item {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  grid-gap: 0.5rem;
  background: #fff;
  border-radius: 5px;
  padding: 0.5rem;
}

.allSingleDownload .singleTop .left .property .item .itemTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingleDownload .singleTop .left .property .item .itemTitle span {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
}

.allSingleDownload .singleTop .left .property .item .itemTitle span:last-child {
  color: #f21111;
}

.allSingleDownload .singleTop .left .property .item .datas {
  height: 10px;
  width: 100%;
  border-radius: 5rem;
  background: #f5f5f5;
  direction: ltr;
}

.allSingleDownload .singleTop .left .property .item .datas .data {
  background: #f21111;
  height: 10px;
  border-radius: 5rem;
}

.allSingleDownload .singleTop .left .checkHeight {
  position: sticky;
  top: 6rem;
}

@media screen and (max-width: 1000px) {
  .allSingleDownload h1 {
    font-size: 1rem;
  }

  .allSingleDownload h1 span {
    font-size: 0.7rem;
    padding: 0.3rem;
  }

  .allSingleDownload .singleTop {
    display: block;
  }

  .allSingleDownload .singleTop .right .rightItems {
    padding: 0;
    overflow: hidden;
  }

  .allSingleDownload .singleTop .right .rightItems .pic {
    grid-template-columns: 1fr;
  }

  .allSingleDownload .singleTop .right .rightItems .pic .picOptions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .allSingleDownload .singleTop .right .rightItems .pic .picOptions .picOption .icons div {
    position: absolute;
    right: auto;
    opacity: 0.3;
    top: -0.5rem;
    transform: rotate(50deg);
    height: 5rem;
    width: 2px;
    background: #ffc64b;
    z-index: 10;
    left: 4.5rem;
  }

  .allSingleDownload .singleTop .right .rightItems .pic .image .show {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: left;
    align-items: center;
    grid-gap: 1rem;
  }

  .allSingleDownload .singleTop .right .rightItems .pic .image .show button,
  .allSingleDownload .singleTop .right .rightItems .pic .image .show a {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    grid-gap: 0.6rem;
    color: #475569;
    font-weight: 500;
    font-size: 0.8rem;
    margin-top: 1rem;
    background: #FAFAFA;
    padding: 0.5rem;
    border-radius: 5px;
  }

  .allSingleDownload .singleTop .right .rightItems .pic .image .show button svg,
  .allSingleDownload .singleTop .right .rightItems .pic .image .show a svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #475569;
  }

  .allSingleDownload .singleTop .right .rightItems .pic .image .show a {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
    color: white;
    background: #f21111;
  }

  .allSingleDownload .singleTop .right .rightItems .pic .image .show a svg {
    fill: white;
  }

  .allSingleDownload .singleTop .right .discussion {
    display: block;
  }

  .allSingleDownload .singleTop .right .discussion .allSingleQuestionBody {
    margin-top: 1rem;
  }

  .allSingleDownload .singleTop .right .support {
    padding: 1rem;
  }

  .allSingleDownload .singleTop .right .support .toolTip {
    padding: 0.5rem;
  }

  .allSingleDownload .singleTop .right .support .toolTip p {
    height: auto;
    font-size: 0.8rem;
  }

  .allSingleDownload .singleTop .right .tabs {
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
  }

  .allSingleDownload .singleTop .left {
    margin-top: 1rem;
  }

  .allSingleDownload .singleTop .left .checkHeight {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 0;
  }

  .allSingleDownload .singleTop .left .checkHeight .addCart {
    width: 1px;
    height: 0;
    visibility: hidden;
    opacity: 0;
  }
}

.showAllShare {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}

.showAllShare .showAllShareHome {
  width: 30%;
  margin: auto;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 0.4rem;
  overflow: hidden;
}

.showAllShare .showAllShareHome .showAllShareTop {
  display: grid;
  grid-template-columns: 1fr auto;
  background: #f5f5f5;
  border-bottom: 2px solid #e1e0ea;
}

.showAllShare .showAllShareHome .showAllShareTop i {
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
}

.showAllShare .showAllShareHome .showAllShareTop i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.showAllShare .showAllShareHome .showAllShareTop h4 {
  font-size: 0.8rem;
  font-weight: 300;
  padding: 1rem;
  color: #475569;
}

.showAllShare .showAllShareHome .showAllShareItems {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
  background: #fff;
  padding: 1rem;
  padding-bottom: 0;
}

.showAllShare .showAllShareHome .showAllShareItems .showAllShareItem {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-content: space-between;
  grid-gap: 0.4rem;
  text-align: center;
  border: 1px solid #e1e0ea;
  padding: 0.5rem;
  border-radius: 5px;
}

.showAllShare .showAllShareHome .showAllShareItems .showAllShareItem .showAllShareItemName h4 {
  font-size: 1rem;
  text-align: right;
  color: #475569;
  font-weight: 300;
}

.showAllShare .showAllShareHome .showAllShareItems .showAllShareItem .showAllShareItemName a {
  text-align: right;
  width: 100%;
  display: block;
  color: #475569;
  opacity: 0.5;
  font-size: 0.7rem;
  font-weight: 300;
  margin-top: 0.3rem;
  height: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.showAllShare .showAllShareHome .showAllShareItems .showAllShareItem a {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
}

.showAllShare .showAllShareHome .showAllShareItems .showAllShareItem a i svg {
  width: 2.5rem;
  height: 2.5rem;
}

.showAllShare .showAllShareHome .showAllShareTag {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-content: left;
  direction: ltr;
  grid-gap: 0.5rem;
  margin: 1rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid #e1e0ea;
}

.showAllShare .showAllShareHome .showAllShareTag i {
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.showAllShare .showAllShareHome .showAllShareTag i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.showAllShare .showAllShareHome .showAllShareTag i .copy {
  fill: #00C58D;
}

.showAllShare .showAllShareHome .showAllShareTag h4 {
  color: #475569;
  text-align: left;
  font-weight: 300;
}

.showAllShare .showAllShareHome .showAllShareTag input {
  visibility: hidden;
  position: absolute;
  opacity: 0;
}

@media screen and (max-width: 1200px) {
  .showAllShare .showAllShareHome {
    width: 50%;
  }
}

@media screen and (max-width: 1000px) {
  .showAllShare .showAllShareHome {
    width: 55%;
  }
}

@media screen and (max-width: 800px) {
  .showAllShare .showAllShareHome {
    width: 98%;
    display: block;
  }
}

.AllQuestions {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  width: 100%;
  height: 100%;
}

.AllQuestions .AllQuestion {
  width: 35%;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 10px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 1rem;
  transform: translate(-50%, -50%);
}

.AllQuestions .AllQuestion .AllQuestionTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.AllQuestions .AllQuestion .AllQuestionTitle h3 {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.AllQuestions .AllQuestion .AllQuestionTitle i {
  cursor: pointer;
  display: grid;
  align-items: center;
}

.AllQuestions .AllQuestion .AllQuestionTitle i svg {
  width: 1.3rem;
  height: 1.4rem;
  fill: #475569;
}

.AllQuestions .AllQuestion textarea {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  border: 1px solid #e1e0ea;
  background: #f5f5f5;
  padding: 0.5rem;
  resize: vertical;
  border-radius: 10px;
  outline-style: unset;
  transition: all 0.3s ease-in-out;
}

.AllQuestions .AllQuestion textarea:focus {
  border: 1px solid #00C58D;
}

.AllQuestions .AllQuestion p {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.7;
  color: #475569;
  margin-top: 1rem;
}

.AllQuestions .AllQuestion .buttons {
  display: grid;
  justify-content: left;
  margin-top: 1rem;
}

.AllQuestions .AllQuestion .buttons button {
  background: #00C58D;
  padding: 0.3rem 1rem;
  border-radius: 5px;
  font-size: 0.85rem;
  font-weight: 500;
  color: white;
  display: grid;
  align-items: center;
  grid-template-columns: auto auto;
  justify-content: center;
  height: 2.5rem;
  grid-gap: 0.5rem;
}

.AllQuestions .AllQuestion .buttons button svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: white;
}

.AllQuestions .AllQuestion .buttons button .loading {
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 800px) {
  .AllQuestions .AllQuestion {
    width: 90%;
  }
}

.singleNotification {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

.singleNotification .singleNotificationItems {
  background: #fff;
  padding: 1rem;
  width: 35%;
  margin: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
}

.singleNotification .singleNotificationItems i {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 1rem;
}

.singleNotification .singleNotificationItems i svg {
  width: 100%;
  height: 6rem;
}

.singleNotification .singleNotificationItems .singleNotificationTitle {
  margin-bottom: 1rem;
}

.singleNotification .singleNotificationItems .singleNotificationTitle h3 {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.singleNotification .singleNotificationItems .singleNotificationData {
  margin-top: 2rem;
}

.singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem {
  direction: rtl;
  margin-top: 0.5rem;
}

.singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem label {
  display: grid;
  padding: 0.5rem;
  grid-gap: 0.5rem;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  cursor: pointer;
  color: #475569;
  letter-spacing: 0.1px;
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.571;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox],
  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:after,
  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: all 0.3s ease-in-out;
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:checked,
  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:disabled,
  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:disabled:checked,
  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:disabled + label,
  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:disabled + label {
    cursor: not-allowed;
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:hover:not(:checked):not(:disabled),
  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:focus,
  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:not(.switch),
  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:not(.switch) {
    width: 21px;
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:not(.switch):after,
  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:not(.switch):checked,
  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:not(.switch):checked {
    --o: 1;
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox] + label,
  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio] + label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px;
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio] {
    border-radius: 50%;
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }

  .singleNotification .singleNotificationItems .singleNotificationData .singleNotificationItem input[type=radio]:checked {
    --s: .5;
  }
}

.singleNotification .singleNotificationItems .singleNotificationButtons {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  margin-top: 2rem;
}

.singleNotification .singleNotificationItems .singleNotificationButtons button {
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  background-color: #5A8DEE;
  color: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(90, 141, 238, 0.5);
  transition: all 0.3s ease-in-out;
  display: grid;
  align-items: center;
  height: 2.5rem;
}

.singleNotification .singleNotificationItems .singleNotificationButtons button .loading {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.singleNotification .singleNotificationItems .singleNotificationButtons button:hover {
  background-color: #2C6DE9;
}

.singleNotification .singleNotificationItems .singleNotificationButtons button:disabled {
  opacity: 0.3;
}

.singleNotification .singleNotificationItems .singleNotificationButtons button:disabled:hover {
  background-color: #5A8DEE;
}

.singleNotification .singleNotificationItems .singleNotificationButtons button:nth-child(2) {
  background-color: #FF5B5C;
  color: #FFFFFF;
}

.singleNotification .singleNotificationItems .singleNotificationButtons button:nth-child(2):hover {
  background-color: #FF2829;
}

@media screen and (max-width: 800px) {
  .singleNotification .singleNotificationItems {
    width: 90%;
  }
}

.allSingleHomeRel {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-top: 2rem;
  padding-left: 1rem;
}

.allSingleHomeRel .containerCategoriesTitle {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-bottom: 1rem;
}

.allSingleHomeRel .containerCategoriesTitle label {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 31px;
  white-space: nowrap;
  border-bottom: 2px solid #f21111;
  padding: 1rem;
  padding-right: 0;
  margin-right: 1rem;
  color: #475569;
}

.allSingleHomeRel .containerCategoriesTitle .moreProduct {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: left;
  grid-gap: 0.4rem;
  color: #475569;
  padding: 1rem;
  padding-left: 0;
  border-bottom: 2px solid #e1e0ea;
}

.allSingleHomeRel .containerCategoriesTitle .moreProduct a {
  color: #475569;
  font-size: 0.85rem;
  font-weight: 300;
}

.allSingleHomeRel .containerCategoriesTitle .moreProduct i {
  color: #475569;
  font-weight: 300;
  font-size: 1rem;
  display: grid;
  align-items: center;
  justify-content: left;
}

.allSingleHomeRel .containerCategoriesTitle .moreProduct i svg {
  fill: #475569;
  width: 0.6rem;
  height: 0.6rem;
}

.allSingleHomeRel .hooper {
  display: grid;
  overflow: hidden;
  height: auto;
}

.allSingleHomeRel .hooper .hooper-list {
  padding-bottom: 1rem;
  padding-left: 1rem;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide {
  padding-right: 1rem;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem {
  overflow: hidden;
  padding: 1rem;
  transition: all 0.2s ease-in-out;
  border-radius: 10px;
  position: relative;
  display: grid;
  border: 1px solid #e1e0ea;
  height: 100%;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .offProduct {
  position: absolute;
  top: 0;
  right: 1.5rem;
  z-index: 100;
  background-color: rgb(252, 92, 99);
  color: white;
  line-height: 2;
  font-weight: 300;
  font-size: 13px;
  width: 1.7rem;
  height: 3.9rem;
  text-align: center;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .offProduct span:before {
  content: "";
  border-color: transparent rgb(252, 92, 99) transparent transparent;
  border-top: 12px solid #FC5C63;
  border-left: 12px solid transparent;
  position: absolute;
  top: 100%;
  right: 0;
  color: white;
  font-size: 12px;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .offProduct span:after {
  content: "";
  border-color: transparent transparent rgb(252, 92, 99);
  width: 0;
  height: 0;
  border-top: 12px solid #FC5C63;
  border-right: 12px solid transparent;
  position: absolute;
  top: 100%;
  left: 0;
  color: white;
  font-size: 12px;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .pic {
  overflow: hidden;
  height: 14rem;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .pic img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: center;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postTitle {
  margin-top: 0.5rem;
  height: 3rem;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postTitle a {
  text-align: right;
  max-width: 90%;
  font-size: 0.85rem;
  line-height: 25px;
  color: #475569;
  font-weight: 300;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  opacity: 0.7;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.4rem;
  align-items: center;
  margin-top: 1rem;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: left;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem .offPrice {
  display: grid;
  justify-content: left;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem .offPrice s {
  font-size: 0.8rem;
  line-height: 1.692;
  font-weight: 300;
  color: #ababab;
  display: flex;
  width: 100%;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem h3 {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.3rem;
  text-align: left;
  width: 100%;
  color: #475569;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.5;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem h3 span {
  font-size: 0.8rem;
  letter-spacing: 0.1px;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i {
  color: white;
  padding: 0.3rem;
  border-radius: 5px;
  display: grid;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.2);
  border-top: 2px solid rgba(255, 0, 0, 0.5);
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .postPrice .postPriceItem i svg {
  width: 1rem;
  height: 1rem;
  fill: #f21111;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .checkCount {
  border-bottom: 1px solid #475569;
  z-index: 2;
  height: 27px;
  position: relative;
  width: 100%;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .checkCount span {
  color: #475569;
  font-size: 1rem;
  line-height: 1.222;
  font-weight: 300;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 100%;
  background: #fff;
  padding: 0 1rem;
  height: 21px;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions {
  position: absolute;
  left: -0.5rem;
  top: 0;
  display: grid;
  justify-content: left;
  background: #fff;
  width: 2.5rem;
  padding: 0.5rem;
  border: 1px solid #e1e0ea;
  margin-left: 0.5rem;
  transition: all 0.3s ease-in-out;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  border-bottom-right-radius: 10px;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption {
  margin-top: 1rem;
  cursor: pointer;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.3rem;
  height: 1.3rem;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption i .loading {
  fill: #475569;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption .active svg {
  fill: #F71938;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem .productOptions .productOption:first-child {
  margin-top: 0.5rem;
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.allSingleHomeRel .hooper .hooper-list .hooper-track .hooper-slide .containerCategoriesItem:hover .productOptions {
  visibility: visible;
  opacity: 1;
  left: -0.5rem;
}

.allSingleHomeDetail {
  background: #fff;
  margin-top: 2rem;
}

.allSingleHomeDetail .allSingleHomeDetailTitle {
  border-bottom: 1px solid #e1e0ea;
  background: #f5f5f5;
}

.allSingleHomeDetail .allSingleHomeDetailTitle ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2px, auto));
  justify-content: right;
  align-items: center;
}

.allSingleHomeDetail .allSingleHomeDetailTitle ul li span {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  overflow: hidden;
  padding: 1rem;
  cursor: pointer;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.allSingleHomeDetail .allSingleHomeDetailTitle ul li span i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.4rem;
}

.allSingleHomeDetail .allSingleHomeDetailTitle ul li span i svg {
  fill: #475569;
  width: 1.4rem;
  height: 1.3rem;
}

.allSingleHomeDetail .allSingleHomeDetailTitle ul li .active {
  background: #fff;
  border: 1px solid #e1e0ea;
  border-bottom: 0;
  margin-bottom: -1px;
  border-top: 3px solid #f21111;
}

.allSingleHomeDetail .allSingleHomeDetailTitle ul li:first-child .active {
  border-right: 0;
}

@media screen and (max-width: 700px) {
  .allSingleHomeDetail .allSingleHomeDetailTitle ul li span {
    font-size: 0.7rem;
    display: block;
    padding: 0.8rem;
  }

  .allSingleHomeDetail .allSingleHomeDetailTitle ul li span i {
    display: grid;
    justify-content: center;
    align-items: center;
    position: absolute;
    visibility: hidden;
  }

  .allSingleHomeDetail .allSingleHomeDetailTitle ul li span i svg {
    fill: #475569;
    width: 1rem;
    height: 1rem;
  }
}

.allSingleHomeDetail .allSingleHomeDetailBody .allSingleHomeDetailBodyItem {
  padding: 1rem;
}

.allSingleHomeDetail .allSingleHomeDetailBody .allSingleHomeDetailBodyItem p {
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  line-height: 2.25;
}

.allSingleHomeDetail .allSingleHomeDetailBody .allSingleHomeDetailBodyItem p:first-child {
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
}

.allSingleHomeDetail .allSingleHomeDetailBody .allSingleHomeDetailBodyItem label {
  font-size: 1.6rem;
  font-weight: bold;
  color: #475569;
}

.allSingleHomeDetail .allSingleHomeDetailBody .allSingleHomeDetailBodyItem:last-child {
  margin-top: 2rem;
}

@media screen and (max-width: 700px) {
  .allSingleHomeDetail .allSingleHomeDetailBody .allSingleHomeDetailBodyItem p {
    font-size: 0.7rem;
  }

  .allSingleHomeDetail .allSingleHomeDetailBody .allSingleHomeDetailBodyItem label {
    font-size: 1rem;
    font-weight: bold;
    color: #475569;
  }
}

.allSingleHomeDetail .allSingleHomeDetailProperties {
  padding: 1rem;
}

.allSingleHomeDetail .allSingleHomeDetailProperties label {
  font-size: 1.6rem;
  font-weight: bold;
  color: #475569;
}

.allSingleHomeDetail .allSingleHomeDetailProperties ul {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allSingleHomeDetail .allSingleHomeDetailProperties ul li {
  display: grid;
  grid-template-columns: 20rem 1fr;
  grid-gap: 0.5rem;
}

.allSingleHomeDetail .allSingleHomeDetailProperties ul li h3 {
  background: #f5f5f5;
  padding: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.692;
  color: #475569;
  letter-spacing: -0.3px;
  font-weight: 300;
  border-radius: 0.3rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allSingleHomeDetail .allSingleHomeDetailProperties ul li p {
  background: #f5f5f5;
  padding: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.692;
  color: #475569;
  letter-spacing: -0.3px;
  font-weight: 300;
  border-radius: 0.3rem;
}

@media screen and (max-width: 700px) {
  .allSingleHomeDetail .allSingleHomeDetailProperties label {
    font-size: 1rem;
    font-weight: bold;
  }

  .allSingleHomeDetail .allSingleHomeDetailProperties ul li {
    grid-template-columns: auto 1fr;
  }

  .allSingleHomeDetail .allSingleHomeDetailProperties ul li h3 {
    font-size: 0.7rem;
  }

  .allSingleHomeDetail .allSingleHomeDetailProperties ul li p {
    font-size: 0.7rem;
  }
}

.allSingleHomeDetail .allSingleHomeDetailCommentUser {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleHomeDetail .allSingleHomeDetailCommentUser h4 {
  margin-top: 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #475569;
}

.allSingleHomeDetail .allSingleHomeDetailCommentUser a {
  margin: 1rem 0;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 300;
  color: #475569;
}

.allSingleHomeDetail .allSingleQuestion {
  display: grid;
  grid-template-columns: 15rem 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend {
  border: 1px solid #e1e0ea;
  border-radius: 10px;
  padding: 1rem;
  position: sticky;
  top: 1rem;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend i {
  display: grid;
  justify-content: center;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend i svg {
  width: 4rem;
  height: 4rem;
  fill: #475569;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend p {
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
  text-align: center;
  margin-top: 1rem;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend p .image {
  display: grid;
  justify-content: center;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend h3 {
  margin-top: 1rem;
  border: 1px solid #f21111;
  padding: 0.5rem;
  color: #f21111;
  font-size: 0.8rem;
  font-weight: 300;
  text-align: center;
  transition: all 0.3s ease-in-out;
  border-radius: 10px;
  cursor: pointer;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend h3:hover {
  background: #f21111;
  color: white;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem {
  padding: 1rem 0;
  border-bottom: 1px solid #e1e0ea;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionTitle {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionTitle i {
  display: grid;
  align-items: center;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionTitle i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #f21111;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionTitle p {
  font-size: 0.95rem;
  font-weight: 500;
  color: #475569;
  letter-spacing: 0.1px;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionAnswers .allSingleQuestionAnswer {
  padding: 1rem;
  border-radius: 10px;
  background: #f5f5f5;
  margin-top: 1rem;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionAnswers .allSingleQuestionAnswer h4 {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionAnswers .allSingleQuestionAnswer p {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.9;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionItemSend {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
  margin: 0.5rem;
  margin-bottom: 0;
  cursor: pointer;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionItemSend span {
  font-size: 0.9rem;
  font-weight: 500;
  color: #f21111;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionItemSend i {
  display: grid;
  align-items: center;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionItemSend i svg {
  width: 0.6rem;
  height: 0.6rem;
  fill: #f21111;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionEmpty {
  display: grid;
  align-items: center;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionEmpty i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionEmpty i svg {
  width: 5rem;
  height: 5rem;
  fill: #475569;
  opacity: 0.8;
}

.allSingleHomeDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionEmpty p {
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.8;
  color: #475569;
  text-align: center;
  margin-top: 0.5rem;
}

@media screen and (max-width: 700px) {
  .allSingleHomeDetail .allSingleQuestion {
    grid-template-columns: 1fr;
  }
}

.allSingleDetail2 {
  margin-top: 2rem;
}

.allSingleDetail2 .tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2px, auto));
  justify-content: right;
  align-items: center;
}

.allSingleDetail2 .tabs .tab {
  cursor: pointer;
}

.allSingleDetail2 .tabs .tab .tabItem div {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  height: 55px;
  line-height: 55px;
  padding: 0 28px;
  font-size: 1rem;
  color: #475569;
}

.allSingleDetail2 .tabs .tab .tabItem div i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.4rem;
}

.allSingleDetail2 .tabs .tab .tabItem div i svg {
  fill: #475569;
  width: 1.4rem;
  height: 1.3rem;
}

@media screen and (max-width: 800px) {
  .allSingleDetail2 .tabs .tab .tabItem div {
    font-size: 0.75rem;
    padding: 0 10px;
    display: block;
  }

  .allSingleDetail2 .tabs .tab .tabItem div i {
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 0.7rem;
  }

  .allSingleDetail2 .tabs .tab .tabItem div i svg {
    width: 0.7rem;
    height: 0.7rem;
  }
}

.allSingleDetail2 .tabs .tab .active {
  background: #fff !important;
  border-radius: 10px 10px 0 0;
  position: relative;
}

.allSingleDetail2 .tabs .tab .active div {
  color: #00C58D;
}

.allSingleDetail2 .tabs .tab .active div i svg {
  fill: #00C58D;
}

.allSingleDetail2 .tabs .tab .active div:before {
  left: auto;
  right: 100%;
  border-radius: 0 0 15px 0;
  position: absolute;
  bottom: 0;
  width: 20px;
  height: 20px;
  content: "";
  background: #f5f5f5;
  z-index: 1;
  transition: border-radius 0.2s;
}

.allSingleDetail2 .tabs .tab .active div:after {
  background: #fff !important;
  left: auto;
  border-radius: 0;
  z-index: 0;
  right: 100%;
  position: absolute;
  bottom: 0;
  width: 20px;
  height: 20px;
  content: "";
  transition: border-radius 0.2s;
}

.allSingleDetail2 .tabs .tab .active:after {
  background: #fff !important;
  border-radius: 0;
  z-index: 0;
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 20px;
  height: 20px;
  content: "";
  transition: border-radius 0.2s;
}

.allSingleDetail2 .tabs .tab .active:before {
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 20px;
  height: 20px;
  content: "";
  background: #f5f5f5;
  border-radius: 0 0 0 15px;
  z-index: 1;
  transition: border-radius 0.2s;
}

.allSingleDetail2 .tabs .tab:first-child .active:before {
  content: unset;
}

.allSingleDetail2 .tabs .tab:first-child .active:after {
  content: unset;
}

.allSingleDetail2 .body {
  background: #fff;
  border-radius: 10px;
  border-top-right-radius: 0;
}

.allSingleDetail2 .body .bodyItem {
  padding: 1rem;
}

.allSingleDetail2 .body .bodyItem p {
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  line-height: 2.25;
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
}

.allSingleDetail2 .body .bodyItem p .image {
  display: grid;
  justify-content: center;
}

.allSingleDetail2 .body .bodyItem p p {
  margin-top: 0;
  padding: 0;
}

.allSingleDetail2 .body .bodyItem label {
  font-size: 1.4rem;
  font-weight: 700;
  color: #475569;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingleDetail2 .body .bodyItem label i {
  display: grid;
  align-items: center;
}

.allSingleDetail2 .body .bodyItem label i svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: #00C58D;
}

.allSingleDetail2 .body .bodyItem:last-child {
  margin-top: 2rem;
}

@media screen and (max-width: 700px) {
  .allSingleDetail2 .body .bodyItem p {
    font-size: 0.7rem;
  }

  .allSingleDetail2 .body .bodyItem label {
    font-size: 1rem;
    font-weight: bold;
    color: #475569;
  }
}

.allSingleDetail2 .property {
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
}

.allSingleDetail2 .property label {
  font-size: 1.4rem;
  font-weight: 700;
  color: #475569;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingleDetail2 .property label i {
  display: grid;
  align-items: center;
}

.allSingleDetail2 .property label i svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: #00C58D;
}

.allSingleDetail2 .property ul {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allSingleDetail2 .property ul li {
  display: grid;
  grid-template-columns: 20rem 1fr;
  grid-gap: 0.5rem;
}

.allSingleDetail2 .property ul li h3 {
  background: #f5f5f5;
  padding: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.692;
  color: #475569;
  letter-spacing: -0.3px;
  font-weight: 300;
  border-radius: 0.3rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allSingleDetail2 .property ul li p {
  background: #f5f5f5;
  padding: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.692;
  color: #475569;
  letter-spacing: -0.3px;
  font-weight: 300;
  border-radius: 0.3rem;
}

@media screen and (max-width: 700px) {
  .allSingleDetail2 .property label {
    font-size: 1rem;
    font-weight: bold;
  }

  .allSingleDetail2 .property ul li {
    grid-template-columns: auto 1fr;
  }

  .allSingleDetail2 .property ul li h3 {
    font-size: 0.7rem;
  }

  .allSingleDetail2 .property ul li p {
    font-size: 0.7rem;
  }
}

.allSingleDetail2 .comment {
  background: #fff;
  border-radius: 10px;
}

.allSingleDetail2 .allSingleQuestion {
  display: grid;
  grid-template-columns: 15rem 1fr;
  grid-gap: 1rem;
  padding: 1rem;
  background: #fff;
  border-radius: 10px;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend {
  border: 1px solid #e1e0ea;
  border-radius: 10px;
  padding: 1rem;
  position: sticky;
  top: 1rem;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend i {
  display: grid;
  justify-content: center;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend i svg {
  width: 4rem;
  height: 4rem;
  fill: #475569;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend p {
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
  text-align: center;
  margin-top: 1rem;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend h3 {
  margin-top: 1rem;
  border: 1px solid #f21111;
  padding: 0.5rem;
  color: #f21111;
  font-size: 0.8rem;
  font-weight: 300;
  text-align: center;
  transition: all 0.3s ease-in-out;
  border-radius: 10px;
  cursor: pointer;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend h3:hover {
  background: #f21111;
  color: white;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem {
  padding: 1rem 0;
  border-bottom: 1px solid #e1e0ea;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionTitle {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionTitle i {
  display: grid;
  align-items: center;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionTitle i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #f21111;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionTitle p {
  font-size: 0.95rem;
  font-weight: 500;
  color: #475569;
  letter-spacing: 0.1px;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionAnswers .allSingleQuestionAnswer {
  padding: 1rem;
  border-radius: 10px;
  background: #f5f5f5;
  margin-top: 1rem;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionAnswers .allSingleQuestionAnswer h4 {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionAnswers .allSingleQuestionAnswer p {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.9;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionItemSend {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
  margin: 0.5rem;
  margin-bottom: 0;
  cursor: pointer;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionItemSend span {
  font-size: 0.9rem;
  font-weight: 500;
  color: #f21111;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionItemSend i {
  display: grid;
  align-items: center;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionItemSend i svg {
  width: 0.6rem;
  height: 0.6rem;
  fill: #f21111;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionEmpty {
  display: grid;
  align-items: center;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionEmpty i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionEmpty i svg {
  width: 5rem;
  height: 5rem;
  fill: #475569;
  opacity: 0.8;
}

.allSingleDetail2 .allSingleQuestion .allSingleQuestionBody .allSingleQuestionEmpty p {
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.8;
  color: #475569;
  text-align: center;
  margin-top: 0.5rem;
}

@media screen and (max-width: 800px) {
  .allSingleDetail2 .allSingleQuestion {
    grid-template-columns: 1fr;
  }
}

.allSingleNews {
  background: #f5f5f5;
  padding-bottom: 1rem;
  margin-top: 8rem;
}

.allSingleNews .newsBlog {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
}

@media screen and (max-width: 1000px) {
  .allSingleNews .newsBlog {
    grid-template-columns: 1fr;
  }
}

.allSingleNews .newsBlog .left {
  width: 20rem;
  margin-top: 1rem;
}

@media screen and (max-width: 1000px) {
  .allSingleNews .newsBlog .left {
    width: 100%;
  }
}

.allSingleNews .newsBlog .left .item {
  padding: 2rem;
  background: #fff;
  margin-bottom: 2rem;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 5px #e1e0ea;
}

.allSingleNews .newsBlog .left .item label {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
  padding: 0 2rem;
  border-bottom: 2px solid #f21111;
  padding-bottom: 0.5rem;
}

.allSingleNews .newsBlog .left .item ul {
  padding-top: 1rem;
}

.allSingleNews .newsBlog .left .item ul li {
  margin-top: 1rem;
  border-radius: 3px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.allSingleNews .newsBlog .left .item ul li:hover {
  background: #f5f5f5;
}

.allSingleNews .newsBlog .left .item ul li a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  align-items: center;
}

.allSingleNews .newsBlog .left .item ul li a img {
  width: 5rem;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 3px;
}

.allSingleNews .newsBlog .left .item ul li a .showInfo {
  display: grid;
  justify-content: right;
  text-align: right;
  align-items: center;
  grid-gap: 0.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allSingleNews .newsBlog .left .item ul li a .showInfo h4 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 500;
  color: #475569;
  font-size: 0.8rem;
}

.allSingleNews .newsBlog .left .item ul li a .showInfo span {
  font-size: 0.7rem;
  color: #475569;
  font-weight: 300;
}

.allSingleNews .newsBlog .left .item:last-child {
  position: sticky;
  top: 1rem;
  margin-bottom: 0;
}

.allSingleNews .newsBlog .right {
  border-radius: 10px;
  background: #fff;
  margin-top: 1.2rem;
}

.allSingleNews .newsBlog .right .blog {
  width: 85%;
  margin: auto;
}

.allSingleNews .newsBlog .right .blog .guidSite {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2px, auto));
  justify-content: right;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid #e1e0ea;
}

.allSingleNews .newsBlog .right .blog .guidSite a {
  color: #475569;
  font-size: 0.9rem;
  font-weight: 300;
}

.allSingleNews .newsBlog .right .blog .guidSite a:before {
  content: "/";
  padding: 0.3rem;
  font-weight: 300;
  color: #475569;
}

.allSingleNews .newsBlog .right .blog .guidSite a:nth-child(2):before {
  content: "";
  padding: 0;
}

.allSingleNews .newsBlog .right .blog .guidSite svg {
  width: 0.9rem;
  height: 0.9rem;
  opacity: 0.7;
  fill: #475569;
  margin-left: 1rem;
}

.allSingleNews .newsBlog .right .blog .titleNews {
  margin-top: 2rem;
}

.allSingleNews .newsBlog .right .blog .titleNews h1 {
  font-size: 20px;
  font-weight: 700;
  line-height: 2.2;
  margin-top: -10px;
  color: #475569;
}

.allSingleNews .newsBlog .right .blog .detailNews {
  margin: 2rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
}

.allSingleNews .newsBlog .right .blog .detailNews .user {
  width: 17rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2px, auto));
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
}

.allSingleNews .newsBlog .right .blog .detailNews .user img {
  width: 3rem;
  height: 3rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5rem;
}

.allSingleNews .newsBlog .right .blog .detailNews .user h4 {
  font-size: 1rem;
  color: #475569;
  font-weight: 500;
}

.allSingleNews .newsBlog .right .blog .detailNews .user h5 {
  padding-right: 1.5rem;
  border-right: 1px solid #475569;
  font-size: 0.7rem;
  color: #475569;
  font-weight: 300;
}

.allSingleNews .newsBlog .right .blog .detailNews .catNews {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingleNews .newsBlog .right .blog .detailNews .catNews ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  justify-content: left;
}

.allSingleNews .newsBlog .right .blog .detailNews .catNews ul li {
  color: #475569;
  font-weight: 500;
  font-size: 0.9rem;
}

.allSingleNews .newsBlog .right .blog .detailNews .catNews ul li:nth-child(1) {
  padding-left: 0.3rem;
}

.allSingleNews .newsBlog .right .blog .detailNews .catNews ul li:nth-child(2) a:before {
  content: "";
  padding: 0;
}

.allSingleNews .newsBlog .right .blog .detailNews .catNews ul li a {
  color: #475569;
  font-weight: 300;
  font-size: 0.9rem;
  border-radius: 0.4rem;
  padding-right: 0.3rem;
}

.allSingleNews .newsBlog .right .blog .detailNews .catNews ul li a:before {
  content: ",";
  padding: 0 0.4rem;
}

.allSingleNews .newsBlog .right .blog .detailNews .catNews ul li a:hover {
  color: #00C58D;
}

.allSingleNews .newsBlog .right .blog .newsTime {
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingleNews .newsBlog .right .blog .newsTime svg {
  width: 1rem;
  height: 1rem;
  fill: #475569;
}

.allSingleNews .newsBlog .right .blog .newsTime span {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
}

.allSingleNews .newsBlog .right .blog .acceptNews h4 {
  background: rgba(221, 75, 57, 0.2);
  font-size: 1rem;
  font-weight: 300;
  color: #c20000;
  padding: 0.5rem;
  border-radius: 5px;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingleNews .newsBlog .right .blog .acceptNews h4 svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #c20000;
}

.allSingleNews .newsBlog .right .blog .acceptNews .accept {
  background: rgb(60, 217, 1);
  color: #015a05;
}

.allSingleNews .newsBlog .right .blog .acceptNews .accept svg {
  fill: #015a05;
}

.allSingleNews .newsBlog .right .blog .singleInfo {
  margin-top: 2rem;
}

.allSingleNews .newsBlog .right .blog .singleInfo .picNews {
  display: grid;
  justify-content: center;
  width: 100%;
}

.allSingleNews .newsBlog .right .blog .singleInfo .picNews img {
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.allSingleNews .newsBlog .right .blog .singleInfo p {
  line-height: 30px;
  font-size: 1.1rem;
  font-weight: 300;
  margin-top: 2rem;
  color: #475569;
  direction: rtl;
}

.allSingleNews .newsBlog .right .blog .singleInfo .showRate {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: left;
  grid-gap: 1.5rem;
  margin-top: 2rem;
}

.allSingleNews .newsBlog .right .blog .singleInfo .showRate .item {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingleNews .newsBlog .right .blog .singleInfo .showRate .item i {
  font-size: 1.5rem;
  color: #475569;
}

.allSingleNews .newsBlog .right .blog .singleInfo .showRate .item span {
  font-size: 1rem;
  color: #8b9296;
}

.allSingleNews .newsBlog .right .blog .singleInfo .showRate .item:nth-child(2) {
  padding-right: 1.5rem;
  border-right: 2px solid #e1e0ea;
}

.allSingleNews .newsBlog .right .blog .tagNews {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 2rem;
  border-top: 1px solid #e1e0ea;
  padding: 2rem;
}

.allSingleNews .newsBlog .right .blog .tagNews label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
}

.allSingleNews .newsBlog .right .blog .tagNews ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2rem, auto));
  grid-gap: 0.5rem;
  justify-content: right;
}

.allSingleNews .newsBlog .right .blog .tagNews ul li a {
  color: #475569;
  background: #f5f5f5;
  border-radius: 0.4rem;
  padding: 0.5rem;
}

.allSingleNews .newsBlog .right .blog .tagNews ul li a:hover {
  color: red;
}

@media screen and (max-width: 600px) {
  .allSingleNews {
    margin-top: 1rem;
  }

  .allSingleNews .newsBlog .right .blog .singleInfo {
    margin-top: 2rem;
  }

  .allSingleNews .newsBlog .right .blog .singleInfo .picNews {
    display: grid;
    justify-content: center;
    width: 100%;
  }

  .allSingleNews .newsBlog .right .blog .singleInfo .picNews img {
    width: 100%;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }

  .allSingleNews .newsBlog .right .blog .detailNews {
    display: block;
  }

  .allSingleNews .newsBlog .right .blog .detailNews .catNews {
    margin-top: 1rem;
  }
}

.allReportSingle {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  z-index: 999;
  height: 100%;
}

.allReportSingle .allReportSingleShow {
  width: 30rem;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 10px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
}

.allReportSingle .allReportSingleShow .allReportSinglePic {
  display: grid;
  justify-content: center;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.07;
  z-index: 911;
}

.allReportSingle .allReportSingleShow .allReportSinglePic svg {
  width: 10rem;
  height: 10rem;
}

.allReportSingle .allReportSingleShow .allReportSingleTitle {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  align-items: center;
}

.allReportSingle .allReportSingleShow .allReportSingleTitle i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #f21111;
  opacity: 0.7;
}

.allReportSingle .allReportSingleShow .allReportSingleTitle span {
  font-size: 1.1rem;
  font-weight: 700;
  color: #475569;
}

.allReportSingle .allReportSingleShow .allReportSingleItems {
  margin-top: 1rem;
  position: relative;
  z-index: 915;
}

.allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem {
  direction: rtl;
}

.allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem label {
  display: grid;
  padding: 0.5rem;
  grid-gap: 0.5rem;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  cursor: pointer;
  color: #475569;
  letter-spacing: 0.1px;
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.571;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox],
  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=radio] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox]:after,
  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: all 0.3s ease-in-out;
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox]:checked,
  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox]:disabled,
  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox]:disabled:checked,
  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox]:disabled + label,
  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=radio]:disabled + label {
    cursor: not-allowed;
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox]:hover:not(:checked):not(:disabled),
  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox]:focus,
  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox]:not(.switch),
  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=radio]:not(.switch) {
    width: 21px;
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox]:not(.switch):after,
  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox]:not(.switch):checked,
  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=radio]:not(.switch):checked {
    --o: 1;
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox] + label,
  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=radio] + label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px;
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=radio] {
    border-radius: 50%;
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=radio]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }

  .allReportSingle .allReportSingleShow .allReportSingleItems .allReportSingleItem input[type=radio]:checked {
    --s: .5;
  }
}

.allReportSingle .allReportSingleShow textarea {
  position: relative;
  z-index: 920;
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  height: 10rem;
  outline-style: unset;
  transition: all 0.3s ease-in-out;
  border: 1px solid #f5f5f5;
  padding: 1rem;
  margin-top: 1rem;
  background: #f5f5f5;
  border-radius: 10px;
}

.allReportSingle .allReportSingleShow textarea:focus {
  border: 1px solid #5A8DEE;
}

.allReportSingle .allReportSingleShow .allReportSingleButtons {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allReportSingle .allReportSingleShow .allReportSingleButtons button {
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  background-color: #5A8DEE;
  color: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(90, 141, 238, 0.5);
  transition: all 0.3s ease-in-out;
  display: grid;
  align-items: center;
  height: 2.5rem;
}

.allReportSingle .allReportSingleShow .allReportSingleButtons button .loading {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allReportSingle .allReportSingleShow .allReportSingleButtons button:hover {
  background-color: #2C6DE9;
}

.allReportSingle .allReportSingleShow .allReportSingleButtons button:disabled {
  opacity: 0.3;
}

.allReportSingle .allReportSingleShow .allReportSingleButtons button:disabled:hover {
  background-color: #5A8DEE;
}

.allReportSingle .allReportSingleShow .allReportSingleButtons button:nth-child(2) {
  background-color: #FF5B5C;
  color: #FFFFFF;
}

.allReportSingle .allReportSingleShow .allReportSingleButtons button:nth-child(2):hover {
  background-color: #FF2829;
}

@media screen and (max-width: 800px) {
  .allReportSingle .allReportSingleShow {
    width: 90%;
  }
}

.allCartIndex {
  margin: 9rem auto auto auto;
}

.allCartIndex .allCartIndexTitle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.allCartIndex .allCartIndexTitle h4 {
  color: #f21111;
  padding: 1rem;
  border-bottom: 2px solid #f21111;
  font-size: 0.9rem;
  font-weight: 500;
  height: 3.8rem;
}

.allCartIndex .allCartIndexTitle .allCartIndexAddress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2px, auto));
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
  border-bottom: 2px solid #DFE3E7;
  height: 3.8rem;
  padding: 1rem;
}

.allCartIndex .allCartIndexTitle .allCartIndexAddress span {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 300;
  opacity: 0.7;
}

.allCartIndex .allCartIndexTitle .allCartIndexAddress a {
  color: #475569;
  font-size: 0.8rem;
  opacity: 0.7;
  font-weight: 300;
}

.allCartIndex .allCartIndexItem {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li {
  padding: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  background: #fff;
  margin-bottom: 1rem;
  grid-gap: 1rem;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailPic img {
  width: 100%;
  max-width: 10rem;
  height: 8rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoItem {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  align-items: center;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoItem span {
  color: #475569;
  opacity: 0.7;
  font-size: 0.85rem;
  font-weight: 300;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoItem i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoItem i svg {
  fill: #475569;
  width: 1.1rem;
  height: 1.1rem;
  opacity: 0.7;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoItem h3 {
  font-size: 1rem;
  line-height: 1.375;
  color: #475569;
  font-weight: 500;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoItem:first-child {
  display: block;
  margin-top: 0;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoPrice {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-gap: 1rem;
  align-items: center;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoPrice .cartCount {
  border: 1px solid #e1e0ea;
  border-radius: 10px;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoPrice .cartCount span {
  color: #475569;
  font-size: 0.85rem;
  font-weight: 300;
  padding: 0.3rem;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoPrice .cartCount button {
  color: #475569;
  padding: 0.2rem 0.5rem;
  font-size: 0.95rem;
  background: transparent;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoPrice i {
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoPrice i svg {
  fill: #f21111;
  width: 1.1rem;
  height: 1.1rem;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoPrice .cartPrice {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: left;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoPrice .cartPrice .offPrice {
  display: grid;
  justify-content: left;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoPrice .cartPrice .offPrice s {
  font-size: 0.8rem;
  line-height: 1.692;
  color: #475569;
  display: flex;
  width: 100%;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoPrice .cartPrice h3 {
  text-align: left;
  width: 100%;
  color: #475569;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailInfo .cartDetailInfoPrice .cartPrice h3 span {
  letter-spacing: 0.1px;
  font-size: 0.8rem;
}

.allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 700px) {
  .allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li {
    grid-template-columns: 1fr;
  }

  .allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailPic {
    display: grid;
    justify-content: center;
  }

  .allCartIndex .allCartIndexItem .allCartIndexItemDetail ul li .cartDetailPic img {
    width: 100%;
    height: 9rem;
  }
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext {
  position: sticky;
  top: 9rem;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
  padding: 1rem;
  width: 17rem;
  height: 18rem;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .WithoutOff,
.allCartIndex .allCartIndexItem .allCartIndexItemNext .postCount {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .WithoutOff label,
.allCartIndex .allCartIndexItem .allCartIndexItemNext .postCount label {
  color: #475569;
  font-size: 0.85rem;
  font-weight: 300;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .WithoutOff span,
.allCartIndex .allCartIndexItem .allCartIndexItemNext .postCount span {
  color: #475569;
  font-weight: 300;
  font-size: 0.9rem;
  letter-spacing: 0.1px;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .allOff {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e1e0ea;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .allOff label {
  color: #f21111;
  font-size: 0.8rem;
  font-weight: 300;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .allOff span {
  color: #f21111;
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.1px;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .allMoney {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  margin: 0.5rem 0;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .allMoney label {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 500;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .allMoney span {
  color: #475569;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.1px;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .allSum {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  margin: 0.5rem 0;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .allSum label {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 400;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .allSum span {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.1px;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .sendMoney {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  margin: 0.5rem 0;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .sendMoney label {
  color: #475569;
  font-size: 0.75rem;
  font-weight: 300;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .sendMoney span {
  color: #475569;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.1px;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .allProfit {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  margin: 0.5rem 0;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .allProfit label {
  color: #f21111;
  font-size: 0.75rem;
  font-weight: 300;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .allProfit span {
  color: #f21111;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.1px;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .nextItem {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  width: 15rem;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .nextItem a {
  text-align: center;
  color: #f21111;
  padding: 0.5rem 1rem;
  border: 1px solid #f21111;
  background: transparent;
  margin-top: 1rem;
  border-radius: 0.4rem;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .scoreCart {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .scoreCart .rightScore {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 0.3rem;
  align-items: center;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .scoreCart .rightScore svg {
  width: 1.5rem;
  height: 1.5rem;
}

.allCartIndex .allCartIndexItem .allCartIndexItemNext .scoreCart span {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
}

.allCartIndex .allCartIndexEmpty {
  background: #fff;
  padding: 1rem;
  margin-top: 1rem;
  display: grid;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 0.3rem;
}

.allCartIndex .allCartIndexEmpty h3 {
  color: #475569;
  margin-top: 1rem;
  font-size: 1rem;
}

.allCartIndex .allCartIndexEmpty p {
  color: #475569;
  margin-top: 1rem;
  font-size: 0.8rem;
}

.allCartIndex .allCartIndexEmpty .allCartIndexEmptyOptions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2px, auto));
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  grid-gap: 1rem;
}

.allCartIndex .allCartIndexEmpty .allCartIndexEmptyOptions a {
  border-bottom: 1px dashed #1ca2bd;
  color: #1ca2bd;
}

.allCartIndex .getCartLoader {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 10rem;
}

.allCartIndex .getCartLoader svg {
  fill: #475569;
  width: 3rem;
  height: 3rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 900px) {
  .allCartIndex .allCartIndexItem {
    grid-template-columns: 1fr;
  }

  .allCartIndex .allCartIndexItem .allCartIndexItemNext {
    position: relative;
    top: auto;
    width: auto;
  }
}

@media screen and (max-width: 600px) {
  .allCartIndex {
    margin-top: 1rem;
  }
}

.allPersonalUser {
  margin: 8rem auto auto auto;
}

.allPersonalUser .allCartIndexTitle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.allPersonalUser .allCartIndexTitle h4 {
  color: #f21111;
  padding: 1rem;
  border-bottom: 2px solid #f21111;
  font-size: 0.9rem;
  font-weight: 500;
  height: 3.8rem;
}

.allPersonalUser .allCartIndexTitle .allCartIndexAddress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2px, auto));
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
  border-bottom: 2px solid #fff;
  height: 3.8rem;
  padding: 1rem;
}

.allPersonalUser .allCartIndexTitle .allCartIndexAddress span {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 300;
  opacity: 0.7;
}

.allPersonalUser .allCartIndexTitle .allCartIndexAddress a {
  color: #475569;
  font-size: 0.8rem;
  opacity: 0.7;
  font-weight: 300;
}

.allPersonalUser .allPersonalUserBot {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress {
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
  padding: 1rem;
  margin-bottom: 1rem;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .title {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-bottom: 2rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: #475569;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .title i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #f21111;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addressItem .detail {
  border: 2px solid #e1e0ea;
  padding: 1rem;
  border-radius: 10px;
  cursor: pointer;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addressItem .detail .titleAddress {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e1e0ea;
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addressItem .detail .titleAddress i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addressItem .detail .titleAddress i svg {
  width: 1rem;
  height: 1rem;
  fill: #475569;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addressItem .detail .addressData {
  padding-top: 1rem;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addressItem .detail .addressData p {
  font-size: 0.95rem;
  font-weight: 300;
  color: #475569;
  line-height: 1.7rem;
  word-spacing: 0.5px;
  letter-spacing: 0.2px;
  margin-bottom: 1.5rem;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addressItem .detail .addressData .dataItem {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addressItem .detail .addressData .dataItem i {
  display: grid;
  align-items: center;
  justify-content: center;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addressItem .detail .addressData .dataItem i svg {
  width: 1rem;
  height: 1rem;
  fill: #475569;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addressItem .detail .addressData .dataItem span {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 300;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addressItem .detail .addressData .options {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  margin-top: 1rem;
  grid-gap: 0.5rem;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addressItem .detail .addressData .options button {
  background: #5A8DEE;
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
  border-radius: 5px;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addressItem .detail .addressData .options button:last-child {
  background: #f21111;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addressItem .active {
  border: 2px solid #f21111;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addressItem .active .titleAddress {
  color: #f21111;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addressItem .active .titleAddress i svg {
  fill: #f21111;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addAddress {
  border: 2px dashed #e1e0ea;
  padding: 1rem;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  min-height: 15rem;
  align-items: center;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addAddress .add i {
  display: grid;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addAddress .add i svg {
  width: 2rem;
  height: 2rem;
  fill: #475569;
}

.allPersonalUser .allPersonalUserBot .userCart .allAddress .addresses .addAddress .add h4 {
  font-size: 1.3rem;
  font-weight: 500;
  color: #475569;
  text-align: center;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays {
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
  padding: 1rem;
  margin-top: 1rem;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays .cartDaysTitle {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-bottom: 2rem;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays .cartDaysTitle .icon svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #f21111;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays .cartDaysTitle h5 {
  font-size: 1.2rem;
  font-weight: 500;
  color: #475569;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays .cartDaysTitle .allCategoryPanel {
  position: relative;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays .cartDaysTitle .allCategoryPanel .categoryShow {
  background: rgba(60, 217, 1, 0.1);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays .cartDaysTitle .allCategoryPanel .categoryShow h4 {
  color: #00C58D;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.1px;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays .cartDaysTitle .allCategoryPanel .categoryShow i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays .cartDaysTitle .allCategoryPanel .categoryShow i svg {
  width: 0.6rem;
  height: 0.6rem;
  fill: #00C58D;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays .cartDaysTitle .allCategoryPanel ul {
  position: absolute;
  top: 94%;
  right: 0;
  width: 100%;
  background: #fff;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  max-height: 15rem;
  direction: ltr;
  overflow: hidden;
  border: 1px solid rgba(60, 217, 1, 0.1);
  border-top: 0;
  z-index: 80;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays .cartDaysTitle .allCategoryPanel ul .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 15rem;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays .cartDaysTitle .allCategoryPanel ul li {
  direction: rtl;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.4rem;
  padding-right: 1rem;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  min-height: 2rem;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  grid-gap: 1rem;
  align-items: center;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays ul li h3 {
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays ul li p {
  font-size: 0.7rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.3rem;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays ul li .dayItem h4 {
  font-size: 0.9rem;
  text-align: center;
  font-weight: 500;
  color: #475569;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays ul li .dayItem h5 {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  text-align: center;
  font-weight: 300;
  letter-spacing: 0.1px;
  color: #475569;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays ul li .dayItem div {
  cursor: pointer;
  border: 2px solid #e1e0ea;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  margin-top: 0.5rem;
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays ul li .dayItem .active {
  border: 2px solid #f21111;
  background: rgba(255, 0, 0, 0.03);
}

.allPersonalUser .allPersonalUserBot .userCart .cartDays ul li .dayItem .active h4 {
  color: #f21111;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext {
  position: sticky;
  top: 9rem;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
  padding: 1rem;
  width: 17rem;
  height: 25rem;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .WithoutOff,
.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .postCount {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .WithoutOff label,
.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .postCount label {
  color: #475569;
  font-size: 0.85rem;
  font-weight: 300;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .WithoutOff span,
.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .postCount span {
  color: #475569;
  font-weight: 300;
  font-size: 0.9rem;
  letter-spacing: 0.1px;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .allOff {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e1e0ea;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .allOff label {
  color: #f21111;
  font-size: 0.8rem;
  font-weight: 300;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .allOff span {
  color: #f21111;
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.1px;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .allMoney {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  margin: 0.5rem 0;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .allMoney label {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 500;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .allMoney span {
  color: #475569;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.1px;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .allSum {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  margin: 0.5rem 0;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .allSum label {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 400;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .allSum span {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.1px;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .discount {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 0.5rem;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .discount h4 {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 400;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .discount label {
  display: grid;
  grid-template-columns: 1fr auto;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #e1e0ea;
  border-radius: 5px;
  height: 2.9rem;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .discount label input {
  background: transparent;
  color: #475569;
  font-size: 0.8rem;
  font-weight: 400;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .discount label i {
  display: grid;
  align-items: center;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .discount label i .loading {
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .discount label i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #f21111;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .discount label button {
  border-radius: 5px;
  background: #5A8DEE;
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 300;
  color: white;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .discount label .accept {
  background: #00C58D;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .discount label .fail {
  background: #e3342f;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .sendMoney {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  margin: 0.5rem 0;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .sendMoney label {
  color: #475569;
  font-size: 0.75rem;
  font-weight: 300;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .sendMoney span {
  color: #475569;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.1px;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .allProfit {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  margin: 0.5rem 0;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .allProfit label {
  color: #f21111;
  font-size: 0.75rem;
  font-weight: 300;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .allProfit span {
  color: #f21111;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.1px;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .nextItem {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  width: 15rem;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .nextItem a {
  cursor: pointer;
  text-align: center;
  color: #f21111;
  padding: 0.5rem 1rem;
  border: 1px solid #f21111;
  background: transparent;
  margin-top: 1rem;
  border-radius: 0.4rem;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .scoreCart {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .scoreCart .rightScore {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 0.3rem;
  align-items: center;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .scoreCart .rightScore svg {
  width: 1.5rem;
  height: 1.5rem;
}

.allPersonalUser .allPersonalUserBot .allCartIndexItemNext .scoreCart span {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
}

.allPersonalUser .buyWays {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: hsla(0, 0%, 52.9%, 0.5);
  z-index: 999;
}

.allPersonalUser .buyWays .buyWaysItems {
  background: #fff;
  padding: 1rem;
  width: 35%;
  margin: auto;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.allPersonalUser .buyWays .buyWaysItems .title {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  grid-gap: 0.5rem;
  align-items: center;
}

.allPersonalUser .buyWays .buyWaysItems .title .right {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 1rem;
  align-items: center;
}

.allPersonalUser .buyWays .buyWaysItems .title .right span {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.allPersonalUser .buyWays .buyWaysItems .title .right i {
  cursor: pointer;
}

.allPersonalUser .buyWays .buyWaysItems .title .right i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #f21111;
}

.allPersonalUser .buyWays .buyWaysItems .title .close {
  cursor: pointer;
}

.allPersonalUser .buyWays .buyWaysItems .title .close svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #475569;
}

.allPersonalUser .buyWays .buyWaysItems .wayItems {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allPersonalUser .buyWays .buyWaysItems .wayItems .wayItem {
  padding: 1rem;
  border: 1px solid #e1e0ea;
  border-radius: 10px;
}

.allPersonalUser .buyWays .buyWaysItems .wayItems .wayItem i {
  display: grid;
  justify-content: center;
}

.allPersonalUser .buyWays .buyWaysItems .wayItems .wayItem i svg {
  width: 4rem;
  height: 4rem;
}

.allPersonalUser .buyWays .buyWaysItems .wayItems .wayItem h4 {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
  margin-top: 1rem;
}

.allPersonalUser .buyWays .buyWaysItems .wayItems .wayItem p {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 300;
  color: #475569;
  margin-top: 0.5rem;
  opacity: 0.8;
}

@media screen and (max-width: 900px) {
  .allPersonalUser .buyWays .buyWaysItems {
    width: 95%;
  }

  .allPersonalUser .buyWays .buyWaysItems .title .right span {
    font-size: 0.8rem;
    font-weight: 500;
    color: #475569;
  }

  .allPersonalUser .buyWays .buyWaysItems .title .right i svg {
    width: 1rem;
    height: 1rem;
  }

  .allPersonalUser .buyWays .buyWaysItems .title .close svg {
    width: 1rem;
    height: 1rem;
  }

  .allPersonalUser .buyWays .buyWaysItems .wayItems .wayItem {
    padding: 0.5rem;
  }

  .allPersonalUser .buyWays .buyWaysItems .wayItems .wayItem i svg {
    width: 3rem;
    height: 3rem;
  }

  .allPersonalUser .buyWays .buyWaysItems .wayItems .wayItem h4 {
    font-size: 0.8rem;
  }

  .allPersonalUser .buyWays .buyWaysItems .wayItems .wayItem p {
    font-size: 0.65rem;
  }

  .allPersonalUser .allCartIndexTitle .allCartIndexAddress {
    opacity: 0;
  }

  .allPersonalUser .allPersonalUserBot {
    grid-template-columns: 1fr;
  }

  .allPersonalUser .allPersonalUserBot .allCartIndexItemNext {
    position: relative;
    top: auto;
    width: auto;
  }
}

@media screen and (max-width: 600px) {
  .allPersonalUser {
    margin-top: 1rem;
  }
}

.buyIndex {
  padding-top: 8.5rem;
  display: grid;
  justify-content: center;
  align-items: center;
}

.buyIndex .allBuyItems {
  width: 30rem;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  border-radius: 0.2rem;
  overflow: hidden;
}

.buyIndex .allBuyItems .allBuySuccessItemTitle {
  padding: 1rem;
  background: #6BC259;
  color: white;
  text-align: center;
}

.buyIndex .allBuyItems .allBuyFailItemTitle {
  padding: 1rem;
  background: #EE384E;
  color: white;
  text-align: center;
}

.buyIndex .allBuyItems .allBuyItem {
  padding: 0.8rem 2rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  border-top: 1px solid #e1e0ea;
}

.buyIndex .allBuyItems .allBuyItem label {
  font-size: 12px;
  font-weight: 300;
  color: #475569;
  opacity: 0.9;
}

.buyIndex .allBuyItems .allBuyItem h4 {
  font-size: 12px;
  color: #475569;
  font-weight: 400;
}

.buyIndex .allBuyItems .allBuyButton {
  margin: 1rem 0;
  text-align: center;
}

.buyIndex .allBuyItems .allBuyButton a {
  font-size: 0.9rem;
  color: white;
  padding: 0.5rem 1.5rem;
  background: #6BC259;
  border-radius: 0.2rem;
}

@media screen and (max-width: 920px) {
  .buyIndex {
    padding-top: 1rem;
  }
}

.allAddAddress {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: hsla(0, 0%, 52.9%, 0.5);
  z-index: 999;
}

.allAddAddress .CreateAddress {
  background: #fff;
  padding: 1rem;
  width: 35%;
  margin: auto;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.allAddAddress .CreateAddress .titleAddress {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
}

.allAddAddress .CreateAddress .titleAddress span {
  font-size: 1.1rem;
  font-weight: 500;
  color: #475569;
}

.allAddAddress .CreateAddress .titleAddress i {
  cursor: pointer;
}

.allAddAddress .CreateAddress .titleAddress i svg {
  width: 2rem;
  height: 2rem;
  fill: #475569;
}

.allAddAddress .CreateAddress .map {
  border-radius: 10px;
  border: 1px solid #e1e0ea;
  overflow: hidden;
  margin-top: 1rem;
}

.allAddAddress .CreateAddress .map .map-wrapper {
  width: 100%;
  height: 25rem;
}

.allAddAddress .CreateAddress .map .holder-logo,
.allAddAddress .CreateAddress .map .mapboxgl-control-container {
  visibility: hidden;
}

@media screen and (max-width: 1600px) {
  .allAddAddress .CreateAddress .map .map-wrapper {
    height: 19rem;
  }
}

.allAddAddress .CreateAddress .form .items {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
}

.allAddAddress .CreateAddress .form .item {
  margin-top: 2rem;
}

.allAddAddress .CreateAddress .form .item h4 {
  color: #475569;
  font-weight: 300;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.allAddAddress .CreateAddress .form .item .alert {
  color: #f21111;
  font-weight: 300;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

.allAddAddress .CreateAddress .form .item input,
.allAddAddress .CreateAddress .form .item select,
.allAddAddress .CreateAddress .form .item h5 {
  border: 1px solid #e1e0ea;
  padding: 0 0.5rem;
  background: #fff;
  color: #475569;
  border-radius: 5px;
  font-size: 0.85rem;
  width: 100%;
  height: 2.5rem;
  font-weight: 300;
  transition: all 0.3s ease-in-out;
}

.allAddAddress .CreateAddress .form .item input:focus,
.allAddAddress .CreateAddress .form .item select:focus,
.allAddAddress .CreateAddress .form .item h5:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #5A8DEE;
}

@media screen and (max-width: 1600px) {
  .allAddAddress .CreateAddress .form .item {
    margin-top: 0.5rem;
  }
}

.allAddAddress .CreateAddress .bottomAddress {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e1e0ea;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
}

.allAddAddress .CreateAddress .bottomAddress span {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
}

.allAddAddress .CreateAddress .bottomAddress .toMap {
  color: #5A8DEE;
  cursor: pointer;
}

.allAddAddress .CreateAddress .bottomAddress button {
  padding: 0.3rem 1rem;
  background: #f21111;
  color: white;
  font-size: 0.9rem;
  font-weight: 300;
  border-radius: 5px;
}

@media screen and (max-width: 700px) {
  .allAddAddress .CreateAddress {
    width: 98%;
  }
}

.allPages {
  background: #fff;
  border-radius: 0.3rem;
  margin: auto;
  margin-top: 9rem;
}

.allPages .allPagesTitle {
  padding: 1rem;
  border-bottom: 1px solid #e1e0ea;
}

.allPages .allPagesTitle h1 {
  font-size: 2rem;
  font-weight: 500;
  color: #524c96;
  letter-spacing: 1px;
}

.allPages .allPagesBody {
  padding: 1rem;
}

.allPages .allPagesBody p {
  font-size: 1rem;
  letter-spacing: 0.5px;
  font-weight: 300;
  color: #475569;
}

.allPages .allPagesBody .forms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 2rem;
  grid-gap: 2rem;
}

.allPages .allPagesBody .forms .form {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

.allPages .allPagesBody .forms .form .items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
  align-items: center;
}

.allPages .allPagesBody .forms .form .item {
  display: grid;
  grid-gap: 0.5rem;
}

.allPages .allPagesBody .forms .form .item h3 {
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: #475569;
}

.allPages .allPagesBody .forms .form .item input,
.allPages .allPagesBody .forms .form .item textarea {
  padding: 0.5rem;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: #475569;
  background: #f5f5f5;
}

.allPages .allPagesBody .forms .form .buttons button {
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  background: #00C58D;
  border-radius: 5px;
  padding: 0.4rem 1.5rem;
  display: grid;
}

.allPages .allPagesBody .forms .form .buttons button .loading {
  width: 1.4rem;
  height: 1.4rem;
  fill: white;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 700px) {
  .allPages .allPagesBody .forms {
    grid-template-columns: 1fr;
  }

  .allPages .allPagesBody .forms .map {
    height: 20rem;
  }
}

@media screen and (max-width: 920px) {
  .allPages {
    margin-top: 1rem;
  }
}

.allProductArchive {
  margin: 1rem auto;
  padding-top: 8rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
}

.allProductArchive .allProductArchiveFilters .btnFilter {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  background: white;
  padding: 0.5rem;
  border-radius: 0.3rem;
  margin-bottom: 1rem;
  position: absolute;
  visibility: hidden;
  opacity: 0;
}

.allProductArchive .allProductArchiveFilters .btnFilter i {
  display: grid;
  align-items: center;
}

.allProductArchive .allProductArchiveFilters .btnFilter i svg {
  width: 1rem;
  height: 1rem;
  fill: #475569;
}

.allProductArchive .allProductArchiveFilters .AllArchiveDataFiltersShowcase {
  background: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.07);
  display: grid;
  justify-content: center;
}

.allProductArchive .allProductArchiveFilters .AllArchiveDataFiltersShowcase .AllArchiveDataFiltersShowcaseTitle {
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: #f21111;
}

.allProductArchive .allProductArchiveFilters .AllArchiveDataFiltersShowcase .hooper {
  width: 15rem;
  height: 20rem;
  outline: transparent;
  z-index: 100;
}

.allProductArchive .allProductArchiveFilters .AllArchiveDataFiltersShowcase .hooper .hooper-list .hooper-track .hooper-slide .AllArchiveDataFiltersShowcaseItem img {
  width: 100%;
  height: 12rem;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 2rem;
}

.allProductArchive .allProductArchiveFilters .AllArchiveDataFiltersShowcase .hooper .hooper-list .hooper-track .hooper-slide .AllArchiveDataFiltersShowcaseItem h3 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 0.5rem;
}

.allProductArchive .allProductArchiveFilters .AllArchiveDataFiltersShowcase .hooper .hooper-list .hooper-track .hooper-slide .AllArchiveDataFiltersShowcaseItem h4 {
  text-align: left;
  margin-top: 0.5rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: #475569;
}

.allProductArchive .allProductArchiveFilters .AllArchiveDataFiltersShowcase .hooper .hooper-list .hooper-track .hooper-slide .AllArchiveDataFiltersShowcaseItem h4 span {
  letter-spacing: 0.1px;
  font-size: 0.7rem;
}

.allProductArchive .allProductArchiveFilters .AllArchiveDataFiltersShowcase .hooper .hooper-list .hooper-pagination .hooper-indicators button {
  width: 0.5rem;
  height: 0.5rem;
  background: #00C58D;
  opacity: 0.2;
  border-radius: 5rem;
}

.allProductArchive .allProductArchiveFilters .AllArchiveDataFiltersShowcase .hooper .hooper-list .hooper-pagination .hooper-indicators .hooper-indicator.is-active {
  background: #00C58D;
  width: 1rem;
  opacity: 1;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems {
  background: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemsTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  width: 14rem;
  color: #475569;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.571;
  cursor: pointer;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemsTitle i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemsTitle i svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: #475569;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .slide-fade-enter-active,
.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .slide-fade-leave-active {
  transition: all 0.3s ease;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .slide-fade-enter,
.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .slide-fade-leave-to {
  transform: translateY(-0.5rem);
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainerSearch {
  border-top: 1px solid #f5f5f5;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainerSearch label {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  align-items: center;
  background: #f5f5f5;
  border-radius: 5px;
  padding: 0.5rem;
  cursor: text;
  position: relative;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainerSearch label input {
  width: 100%;
  font-size: 0.7rem;
  color: #475569;
  height: 100%;
  background: transparent;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainerSearch label i svg {
  fill: #475569;
  width: 1rem;
  height: 1rem;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer {
  border-top: 1px solid #e1e0ea;
  padding-top: 0.5rem;
  max-height: 15rem;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 15rem;
  direction: ltr;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem {
  direction: rtl;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem label {
  display: grid;
  padding: 0.5rem;
  grid-gap: 0.5rem;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  cursor: pointer;
  color: #475569;
  letter-spacing: 0.1px;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.571;
  max-width: 15rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox],
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=radio] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox]:after,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: all 0.3s ease-in-out;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox]:checked,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox]:disabled,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox]:disabled:checked,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox]:disabled + label,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=radio]:disabled + label {
    cursor: not-allowed;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox]:hover:not(:checked):not(:disabled),
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox]:focus,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch),
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=radio]:not(.switch) {
    width: 21px;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):after,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):checked,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=radio]:not(.switch):checked {
    --o: 1;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox] + label,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=radio] + label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=radio] {
    border-radius: 50%;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=radio]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemContainer .allProductArchiveFiltersItem input[type=radio]:checked {
    --s: .5;
  }
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck {
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck label {
  display: grid;
  padding: 0.8rem 1rem;
  grid-gap: 0.5rem;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  cursor: pointer;
  color: #475569;
  letter-spacing: 0.2px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.571;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox],
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=radio] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox]:after,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: all 0.3s ease-in-out;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox]:checked,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox]:disabled,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox]:disabled:checked,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox]:disabled + label,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=radio]:disabled + label {
    cursor: not-allowed;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox]:hover:not(:checked):not(:disabled),
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox]:focus,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox]:not(.switch),
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=radio]:not(.switch) {
    width: 21px;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox]:not(.switch):after,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox]:not(.switch):checked,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=radio]:not(.switch):checked {
    --o: 1;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox] + label,
  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=radio] + label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=radio] {
    border-radius: 50%;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=radio]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersCheck input[type=radio]:checked {
    --s: .5;
  }
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersSearch {
  background: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersSearch .allProductArchiveFiltersSearchTitle {
  color: #475569;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.571;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersSearch .allProductArchiveFiltersSearchItem {
  margin-top: 1rem;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersSearch .allProductArchiveFiltersSearchItem input {
  padding: 0.4rem 0.5rem;
  background: #f5f5f5;
  border: 2px solid #f5f5f5;
  border-radius: 0.5rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
  font-size: 0.75rem;
  font-weight: 300;
  color: #475569;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersSearch .allProductArchiveFiltersSearchItem input:focus {
  background: #fff;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice {
  background: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .allProductArchiveFiltersPriceTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  width: 14rem;
  color: #475569;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.571;
  cursor: pointer;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .allProductArchiveFiltersPriceTitle i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .allProductArchiveFiltersPriceTitle i svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: #475569;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .slide-fade-enter-active,
.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .slide-fade-leave-active {
  transition: all 0.3s ease-in-out;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .slide-fade-enter,
.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .slide-fade-leave-to {
  transform: translateY(-0.5rem);
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .allProductArchiveFiltersPriceItem .simple-range-slider-popover.simple-range-slider-popover-left,
.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .allProductArchiveFiltersPriceItem .simple-range-slider-popover-arrow,
.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .allProductArchiveFiltersPriceItem .simple-range-slider-popover {
  background: #f21111;
  visibility: hidden;
  opacity: 0;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .allProductArchiveFiltersPriceItem .allProductArchiveFiltersPriceItemNumbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #e1e0ea;
  padding: 0.5rem 0;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .allProductArchiveFiltersPriceItem .allProductArchiveFiltersPriceItemNumbers .allProductArchiveFiltersPriceItemNumber {
  display: grid;
  grid-template-columns: 1fr;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .allProductArchiveFiltersPriceItem .allProductArchiveFiltersPriceItemNumbers .allProductArchiveFiltersPriceItemNumber span {
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.692;
  letter-spacing: 0.3px;
  color: #475569;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .allProductArchiveFiltersPriceItem .allProductArchiveFiltersPriceItemNumbers .allProductArchiveFiltersPriceItemNumber h5 {
  border-radius: 8px;
  background-color: #f5f5f5;
  display: inline-block;
  overflow: hidden;
  border: none;
  margin: 6px;
  text-align: center;
  color: #475569;
  font-size: 0.85rem;
  line-height: 1.571;
  letter-spacing: 0.3px;
  padding: 0.3rem 0;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .allProductArchiveFiltersPriceItem .allProductArchiveFiltersPriceItemNumbers .allProductArchiveFiltersPriceItemNumber:first-child {
  border-left: 1px solid #e1e0ea;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .simple-range-slider .simple-range-slider-bg-bar .simple-range-slider-bar[data-v-06329002] {
  background: #f21111;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .button {
  width: 100%;
  display: grid;
  margin-top: 1rem;
  justify-content: center;
}

.allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .button button {
  background: #f21111;
  padding: 11px 31px;
  color: white;
  border-radius: 10px;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerAddress {
  display: grid;
  grid-template-columns: 1fr auto;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerAddress .allProductArchiveContainerAddressItem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2px, auto));
  justify-content: right;
  align-items: center;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerAddress .allProductArchiveContainerAddressItem a {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 300;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerAddress .allProductArchiveContainerAddressCount {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 300;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveTaxes {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveTaxes .allProductArchiveTaxesTitle {
  background: #f21111;
  text-align: center;
  padding: 0.3rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  height: 100%;
  color: white;
  font-weight: 300;
  font-size: 0.95rem;
  writing-mode: vertical-lr;
  writing-mode: sideways-lr;
  width: 2.2rem;
  border-radius: 10px;
  display: grid;
  justify-content: center;
  align-items: center;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveTaxes .allArchiveTaxItems {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  grid-gap: 1rem;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveTaxes .allArchiveTaxItems .allArchiveTax {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  border-radius: 10px;
  overflow: hidden;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveTaxes .allArchiveTaxItems .allArchiveTax .allArchiveTaxPic {
  display: grid;
  justify-content: center;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveTaxes .allArchiveTaxItems .allArchiveTax .allArchiveTaxPic img {
  width: 2rem;
  height: 3rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveTaxes .allArchiveTaxItems .allArchiveTax h3 {
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerCats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerCats .allProductArchiveContainerCatsItem {
  border-radius: 1rem;
  overflow: hidden;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerCats .allProductArchiveContainerCatsItem a img {
  width: 100%;
  height: 15rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems {
  background: #fff;
  margin-top: 1rem;
  border: 1px solid #e1e0ea;
  border-radius: 10px;
  overflow: hidden;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerItemsFilter {
  border-bottom: 1px solid #e1e0ea;
  padding: 1rem;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerItemsFilter i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerItemsFilter i svg {
  fill: #475569;
  width: 1rem;
  height: 1rem;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerItemsFilter span {
  color: #475569;
  font-size: 0.75rem;
  font-weight: 300;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerItemsFilter ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, auto));
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerItemsFilter ul li {
  font-size: 0.7rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  padding: 0.2rem 0;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerItemsFilter ul li span {
  border-radius: 0.4rem;
  overflow: hidden;
  padding: 0.2rem 0.5rem;
  color: #475569;
  background: transparent;
  border: 1px solid transparent;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerItemsFilter ul li .active {
  background: #f21111;
  border: 1px solid #f21111;
  color: white;
  opacity: 1;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerItemsFilter ul li .active:hover {
  background: #f21111;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost {
  position: relative;
  transition: all 0.2s ease-in-out;
  border: 1px solid #e1e0ea;
  padding: 0.5rem;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost:hover {
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost:hover .productOptions {
  visibility: visible;
  opacity: 1;
  left: -0.5rem;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a {
  border-top: 0;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .offProduct {
  position: absolute;
  top: 0;
  right: 1.5rem;
  z-index: 100;
  background-color: #f21111;
  color: white;
  line-height: 2;
  font-weight: 300;
  font-size: 13px;
  width: 1.7rem;
  height: 3.9rem;
  text-align: center;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .offProduct span:before {
  content: "";
  border-color: transparent #f21111 transparent transparent;
  border-top: 12px solid #f21111;
  border-left: 12px solid transparent;
  position: absolute;
  top: 100%;
  right: 0;
  color: white;
  font-size: 12px;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .offProduct span:after {
  content: "";
  border-color: transparent transparent #f21111;
  width: 0;
  height: 0;
  border-top: 12px solid #f21111;
  border-right: 12px solid transparent;
  position: absolute;
  top: 100%;
  left: 0;
  color: white;
  font-size: 12px;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .allProductArchiveContainerPostPic {
  overflow: hidden;
  height: 200px;
  padding: 0.5rem;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .allProductArchiveContainerPostPic img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: center;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .allProductArchiveContainerPostTitle {
  height: 3rem;
  padding: 0.5rem;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .allProductArchiveContainerPostTitle h4 {
  text-align: right;
  max-width: 90%;
  font-size: 0.95rem;
  line-height: 25px;
  color: #475569;
  font-weight: 400;
  opacity: 0.9;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a ul {
  margin-top: 1rem;
  overflow: hidden;
  margin-right: 0.5rem;
  height: 5.5rem;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a ul li {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 0.4rem;
  align-items: center;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a ul li:before {
  border-radius: 10px;
  width: 6px;
  height: 6px;
  background-color: #475569;
  opacity: 0.6;
  content: "";
  display: inline-block;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a ul li span {
  font-size: 0.8rem;
  color: #475569;
  opacity: 0.6;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.4rem;
  align-items: center;
  padding: 0.5rem;
  margin-top: 0.5rem;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: left;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem .offPrice {
  display: grid;
  justify-content: left;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem .offPrice s {
  font-size: 0.8rem;
  line-height: 1.692;
  font-weight: 300;
  color: #475569;
  display: flex;
  width: 100%;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem h3 {
  text-align: left;
  width: 100%;
  color: #475569;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.5;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem h3 span {
  letter-spacing: 0.1px;
  font-size: 0.8rem;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem i {
  color: white;
  padding: 0.3rem;
  border-radius: 5px;
  display: grid;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.2);
  border-top: 2px solid rgba(255, 0, 0, 0.5);
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #f21111;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem i .loading {
  fill: #f21111;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .checkCount {
  border-bottom: 1px solid #e1e0ea;
  z-index: 2;
  height: 27px;
  position: relative;
  width: 100%;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .checkCount span {
  color: #475569;
  font-size: 1rem;
  line-height: 1.222;
  font-weight: 400;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 125%;
  background: #fff;
  padding: 0 1rem;
  height: 31px;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost .productOptions {
  position: absolute;
  left: -0.5rem;
  top: 0;
  display: grid;
  justify-content: left;
  background: #fff;
  width: 2.5rem;
  padding: 0.5rem;
  border: 1px solid #e1e0ea;
  margin-left: 0.5rem;
  transition: all 0.3s ease-in-out;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  border-bottom-right-radius: 10px;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost .productOptions .productOption {
  margin-top: 1rem;
  cursor: pointer;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost .productOptions .productOption i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.3rem;
  height: 1.3rem;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost .productOptions .productOption i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost .productOptions .productOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost .productOptions .productOption i .loading {
  fill: #475569;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost .productOptions .productOption .active svg {
  fill: #F71938;
}

.allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost .productOptions .productOption:first-child {
  margin-top: 0.5rem;
}

.allProductArchive .allProductArchiveContainer .paginate {
  margin: 1rem;
  margin-bottom: 0;
}

@media screen and (max-width: 900px) {
  .allProductArchive {
    grid-template-columns: 1fr;
    padding-top: 1rem;
  }

  .allProductArchive .allProductArchiveFilters .btnFilter {
    position: relative;
    visibility: visible;
    opacity: 1;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersItems .allProductArchiveFiltersItemsTitle {
    width: 100%;
  }

  .allProductArchive .allProductArchiveFilters .allProductArchiveFiltersPrice .allProductArchiveFiltersPriceTitle {
    width: 100%;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerAddress {
    visibility: hidden;
    position: absolute;
    top: 0;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerCats {
    grid-template-columns: 1fr;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerCats .allProductArchiveContainerCatsItem {
    border-radius: 0.3rem;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerCats .allProductArchiveContainerCatsItem a img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerItemsFilter {
    grid-template-columns: 1fr;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerItemsFilter ul {
    justify-content: center;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerItemsFilter ul span {
    position: relative;
    opacity: 1;
    font-size: 0.8rem;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerItemsFilter i {
    position: absolute;
    opacity: 0;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerItemsFilter span {
    position: absolute;
    opacity: 0;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts {
    grid-template-columns: 1fr 1fr;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .allProductArchiveContainerPostPic {
    height: 8rem;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .allProductArchiveContainerPostTitle {
    height: auto;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .allProductArchiveContainerPostTitle h4 {
    font-size: 0.8rem;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a ul {
    margin-top: 0;
    margin-right: 0;
    height: 5.5rem;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a ul li span {
    font-size: 0.6rem;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem s {
    font-size: 0.7rem;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem h3 {
    font-size: 0.8rem;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem h3 span {
    letter-spacing: 0.1px;
    font-size: 0.6rem;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem i svg {
    width: 0.7rem;
    height: 0.7rem;
  }

  .allProductArchive .allProductArchiveContainer .allProductArchiveContainerItems .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem i .loading {
    width: 0.7rem;
    height: 0.7rem;
  }
}

.allNews {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  margin-top: 8rem;
}

.allNews .allNewsRight .newsIndex {
  margin-top: 1rem;
}

.allNews .allNewsRight .allNewsRightItems {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allNews .allNewsRight .allNewsRightItems .allNewsRightItem {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.allNews .allNewsRight .allNewsRightItems .allNewsRightItem img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.allNews .allNewsRight .allNewsRightItems .allNewsRightItem .allNewsRightItemOver {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  padding: 1rem;
  display: grid;
  align-items: end;
}

.allNews .allNewsRight .allNewsRightItems .allNewsRightItem .allNewsRightItemOver span {
  border-radius: 5px;
  padding: 0.3rem 1rem;
  font-weight: 500;
  font-size: 0.9rem;
  background: #DD4B39;
  color: white;
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.allNews .allNewsRight .allNewsRightItems .allNewsRightItem .allNewsRightItemOver .active {
  background: rgba(60, 217, 1, 0.9);
  color: white;
}

.allNews .allNewsRight .allNewsRightItems .allNewsRightItem .allNewsRightItemOver h3 {
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
  margin-top: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.allNews .allNewsSideBar {
  background: #fff;
  width: 20rem;
  margin-top: 1rem;
  position: sticky;
  top: 5rem;
}

@media screen and (max-width: 1000px) {
  .allNews .allNewsSideBar {
    width: 100%;
  }
}

.allNews .allNewsSideBar .allNewsSideBarItem {
  padding: 2rem;
  background: #fff;
  margin-bottom: 2rem;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 5px #EBEAE9;
}

.allNews .allNewsSideBar .allNewsSideBarItem label {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
  padding: 0 2rem;
  border-bottom: 2px solid #00C58D;
  padding-bottom: 0.5rem;
}

.allNews .allNewsSideBar .allNewsSideBarItem ul {
  padding-top: 1rem;
}

.allNews .allNewsSideBar .allNewsSideBarItem ul li {
  margin-top: 1rem;
  border-radius: 3px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.allNews .allNewsSideBar .allNewsSideBarItem ul li:hover {
  background: #f5f5f5;
}

.allNews .allNewsSideBar .allNewsSideBarItem ul li a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  align-items: center;
}

.allNews .allNewsSideBar .allNewsSideBarItem ul li a img {
  width: 5rem;
  height: 6rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 3px;
}

.allNews .allNewsSideBar .allNewsSideBarItem ul li a .showInfo {
  display: grid;
  justify-content: right;
  text-align: right;
  align-items: center;
  grid-gap: 0.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allNews .allNewsSideBar .allNewsSideBarItem ul li a .showInfo h4 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 500;
  color: #475569;
  font-size: 0.8rem;
}

.allNews .allNewsSideBar .allNewsSideBarItem ul li a .showInfo span {
  font-size: 0.7rem;
  color: #475569;
  font-weight: 300;
}

.allNews .allNewsSideBar .allNewsSideBarItem:last-child {
  position: sticky;
  top: 6rem;
  margin-bottom: 0;
}

@media screen and (max-width: 1000px) {
  .allNews {
    padding-top: 1rem;
    display: block;
  }
}

.allSuggestProduct {
  margin: auto;
  margin-top: 9rem;
  background: #fff;
  padding: 1rem;
  border-radius: 5px;
}

.allSuggestProduct .allSuggestProductTitle {
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr;
}

.allSuggestProduct .allSuggestProductTitle p {
  display: inline-block;
  border: 4px double #475569;
  border-width: 4px 0;
  padding: 1.5em 0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
  color: #475569;
}

.allSuggestProduct .allSuggestProductTitle p span {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0.25em 0 0.325em;
  display: block;
  margin: 0 auto;
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
  color: #475569;
  background: url("/img/animated-text-fill.png") repeat-y;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: aitf 80s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

.allSuggestProduct .suggestProducts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem {
  display: grid;
  overflow: hidden;
  border-radius: 10px;
  padding: 1rem;
  transition: all 0.2s ease-in-out;
  position: relative;
  border: 1px solid #DFE3E7;
  height: 100%;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .pic {
  overflow: hidden;
  height: 11rem;
  position: relative;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .pic img {
  width: 100%;
  height: 11rem;
  -o-object-fit: contain;
     object-fit: contain;
  transition: all 0.6s ease-in-out;
  padding-top: 1rem;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .pic img:nth-child(2) {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .postTitle a {
  text-align: center;
  max-width: 90%;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 25px;
  color: #475569;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  opacity: 0.7;
  padding: 0;
  height: auto;
  box-shadow: 0 0 0 0;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .postPrice {
  display: grid;
  grid-gap: 0.4rem;
  align-items: center;
  margin-top: 0.5rem;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .postPrice .postPriceItem {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .postPrice .postPriceItem s {
  font-size: 0.8rem;
  line-height: 1.692;
  font-weight: 300;
  color: #ababab;
  text-align: center;
  width: 100%;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .postPrice .postPriceItem h3 {
  text-align: center;
  width: 100%;
  color: #475569;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .postPrice .postPriceItem h3 span {
  letter-spacing: 0.1px;
  font-size: 0.8rem;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .postPrice .postPriceItem i {
  color: white;
  padding: 0.5rem;
  border-radius: 0.4rem;
  display: grid;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .postPrice .postPriceItem i svg {
  width: 1rem;
  height: 1rem;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .checkCount {
  border-bottom: 1px solid #e1e0ea;
  z-index: 2;
  height: 27px;
  position: relative;
  width: 100%;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .checkCount span {
  color: #475569;
  font-size: 1rem;
  line-height: 1.222;
  font-weight: 400;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 115%;
  background: #fff;
  padding: 0 1rem;
  height: 21px;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .productOption {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 100;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .productOption i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.55rem;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .productOption i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .productOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem .productOption i .loading {
  fill: #9b9b9b;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem:hover .pic img:nth-child(1) {
  top: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  position: absolute;
}

.allSuggestProduct .suggestProducts .suggestProduct .suggestProductItem:hover .pic img:nth-child(2) {
  position: relative;
  top: auto;
  visibility: visible;
  opacity: 1;
  right: auto;
}

@media screen and (max-width: 600px) {
  .allSuggestProduct {
    margin-top: 1rem;
  }
}

.allUserIndex {
  padding-top: 9rem;
  margin: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
}

.allUserIndex .allUserIndexLists {
  width: 15rem;
}

.allUserIndex .allUserIndexLists .allUserIndexList {
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
}

.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListsUser {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid #e1e0ea;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}

.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserPic {
  display: grid;
  justify-content: center;
  overflow: hidden;
  padding-top: 1rem;
}

.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserPic .pic {
  position: relative;
}

.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserPic .pic .dz-message,
.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserPic .pic .dropzone {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  display: grid !important;
}

.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserPic .pic .dz-preview.dz-image-preview {
  visibility: hidden !important;
  position: absolute !important;
}

.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserPic .pic i {
  display: grid;
  align-items: center;
  justify-items: center;
  position: absolute;
  right: -0.5rem;
  top: -0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  border-radius: 100%;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserPic .pic i svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: #b3b3b3;
}

.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserPic .pic img {
  width: 3rem;
  height: 3rem;
  border-radius: 5rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserItem {
  margin-top: 0.5rem;
  text-align: center;
}

.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserItem .allUserIndexListsUserName {
  font-size: 0.9rem;
  line-height: 1.375;
  vertical-align: center;
  color: #475569;
  font-weight: 700;
  letter-spacing: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserItem .allUserIndexListsUserScore {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  grid-gap: 0.3rem;
  padding: 0 1rem;
  margin-top: 0.8rem;
}

.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserItem .allUserIndexListsUserScore svg {
  width: 1.3rem;
  height: 1.3rem;
}

.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListsUser .allUserIndexListsUserItem .allUserIndexListsUserScore span {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.833;
  color: #f6993f;
}

.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListItems {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListItems a {
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  padding: 1rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
}

.allUserIndex .allUserIndexLists .allUserIndexList .allUserIndexListItems a:first-child {
  border-left: 1px solid #e1e0ea;
}

.allUserIndex .allUserIndexLists .walletData {
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 1rem;
  padding: 1rem;
}

.allUserIndex .allUserIndexLists .walletData i {
  display: grid;
  justify-content: center;
}

.allUserIndex .allUserIndexLists .walletData i svg {
  width: 5rem;
  height: 5rem;
}

.allUserIndex .allUserIndexLists .walletData h3 {
  font-size: 1.2rem;
  font-weight: 300;
  color: #475569;
  text-align: center;
}

.allUserIndex .allUserIndexLists .walletData h3 span {
  font-size: 1rem;
  letter-spacing: 0.1px;
}

.allUserIndex .allUserIndexLists .walletData a {
  display: grid;
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 300;
  color: #00C58D;
  margin-top: 0.5rem;
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems {
  background: #fff;
  margin-top: 1rem;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
  position: sticky;
  top: 8.5rem;
  padding: 1rem 0.5rem;
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems .allUserIndexListsItem {
  display: grid;
  grid-template-columns: auto 1fr auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 1.5rem;
  cursor: pointer;
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems .allUserIndexListsItem i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.4rem;
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems .allUserIndexListsItem i svg {
  transition: all 0.3s ease-in-out;
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems .allUserIndexListsItem i .active {
  transform: rotate(180deg);
  background: transparent;
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems .allUserIndexListsItem i:nth-child(3) svg {
  width: 0.8rem;
  height: 0.8rem;
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems .allUserIndexListsItem a,
.allUserIndex .allUserIndexLists .allUserIndexListsItems .allUserIndexListsItem h3 {
  transition: all 0.3s ease-in-out;
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 0.2px;
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems .allUserIndexListsItem:first-child {
  margin-top: 0;
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems .userProducts {
  margin-top: 1.5rem;
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems .userProducts .slide-fade-enter-active {
  transition: all 0.3s ease-in-out;
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems .userProducts .slide-fade-leave-active {
  transition: all 0.3s ease-in-out;
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems .userProducts .slide-fade-enter {
  transform: translateY(-10px);
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems .userProducts .slide-fade-leave-to {
  transform: translateY(-10px);
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems .userProducts ul li {
  margin-top: 0.8rem;
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems .userProducts ul li a {
  font-size: 0.8rem;
  font-weight: 300;
  padding-right: 0.5rem;
  color: #475569;
  letter-spacing: 0.2px;
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  justify-content: right;
  align-items: center;
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems .userProducts ul li a:before {
  content: "";
  display: grid;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background: #475569;
  transition: all 0.3s ease-in-out;
}

.allUserIndex .allUserIndexLists .allUserIndexListsItems .userProducts ul li a:hover:before {
  width: 1rem;
}

.allUserIndex .allUserIndexInfo .myRank {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  background: linear-gradient(to right, #fff 20%, #FF0 40%, #FF0 60%, #fff 80%);
  background-size: 200% auto;
  animation: shine 1s linear infinite;
  padding: 1rem;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 1rem;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

.allUserIndex .allUserIndexInfo .myRank .right h4 {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 0.5rem;
}

.allUserIndex .allUserIndexInfo .myRank .right p {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
}

.allUserIndex .allUserIndexInfo .myRank .left i {
  display: grid;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
}

.allUserIndex .allUserIndexInfo .myRank .left i svg {
  width: 2rem;
  height: 2rem;
  fill: #f6993f;
}

.allUserIndex .allUserIndexInfo .myRank .left a {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: #f6993f;
}

.allUserIndex .allUserIndexInfo .eventItems {
  background: white;
  border-radius: 10px;
  margin-bottom: 1rem;
  padding: 1rem;
}

.allUserIndex .allUserIndexInfo .eventItems label {
  color: #475569;
  font-size: 1rem;
  font-weight: 500;
  padding-right: 1rem;
}

.allUserIndex .allUserIndexInfo .eventItems ul {
  margin-top: 1rem;
}

.allUserIndex .allUserIndexInfo .eventItems ul li {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
  padding: 0.5rem 0;
  border-bottom: 1px solid #DFE3E7;
}

.allUserIndex .allUserIndexInfo .eventItems .allUserIndexInfoTopItemAddress {
  text-align: center;
  background: #fff;
  padding: 1rem;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.allUserIndex .allUserIndexInfo .eventItems .allUserIndexInfoTopItemAddress a {
  color: #f21111;
  border-bottom: 1px dashed #f21111;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoTop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-bottom: 1rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoTop .allUserIndexInfoTopItem label {
  color: #475569;
  font-size: 1rem;
  font-weight: 500;
  padding-right: 1rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoTop .allUserIndexInfoTopItem ul {
  background: #fff;
  margin-top: 1rem;
  height: 19.5rem;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoTop .allUserIndexInfoTopItem ul li {
  display: grid;
  grid-template-columns: 1fr auto;
  border-bottom: 1px solid #e1e0ea;
  grid-gap: 1rem;
  padding: 1rem;
  height: 6.5rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoTop .allUserIndexInfoTopItem ul li a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoTop .allUserIndexInfoTopItem ul li a .userItemPic img {
  width: 3rem;
  height: 3rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoTop .allUserIndexInfoTopItem ul li a .userItemSubject .userItemSubjectTitle {
  font-size: 0.8rem;
  font-weight: 400;
  height: 2.5rem;
  overflow: hidden;
  color: #475569;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoTop .allUserIndexInfoTopItem ul li a .userItemSubject .postPriceItem {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: left;
  height: 2.5rem;
  overflow: hidden;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoTop .allUserIndexInfoTopItem ul li a .userItemSubject .postPriceItem .offPrice {
  display: grid;
  justify-content: left;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoTop .allUserIndexInfoTopItem ul li a .userItemSubject .postPriceItem .offPrice s {
  font-size: 0.8rem;
  line-height: 1.692;
  font-weight: 300;
  color: #475569;
  display: flex;
  width: 100%;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoTop .allUserIndexInfoTopItem ul li a .userItemSubject .postPriceItem h3 {
  text-align: left;
  width: 100%;
  color: #475569;
  letter-spacing: 0.1px;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.5;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoTop .allUserIndexInfoTopItem ul li i {
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoTop .allUserIndexInfoTopItem ul li i svg {
  transition: all 0.3s ease-in-out;
  fill: #475569;
  width: 1rem;
  height: 1rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoTop .allUserIndexInfoTopItem .allUserIndexInfoTopItemAddress {
  text-align: center;
  background: #fff;
  padding: 1rem;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoTop .allUserIndexInfoTopItem .allUserIndexInfoTopItemAddress a {
  color: #f21111;
  border-bottom: 1px dashed #f21111;
}

@media screen and (max-width: 1000px) {
  .allUserIndex .allUserIndexInfo .allUserIndexInfoTop {
    grid-template-columns: 1fr;
  }
}

.allUserIndex .allUserIndexInfo label {
  color: #475569;
  font-size: 1rem;
  font-weight: 500;
  padding-right: 1rem;
}

.allUserIndex .allUserIndexInfo .errorsCreate {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  background: #F5D2D2;
  border-top: 5px solid #e75f55;
  color: #6b1110;
  border-radius: 0.2rem;
  padding: 0.5rem 1rem;
}

.allUserIndex .allUserIndexInfo .errorsCreate i svg {
  width: 1rem;
  height: 1rem;
}

.allUserIndex .allUserIndexInfo .errorsCreate span {
  font-size: 0.75rem;
  font-weight: 400;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPayFilter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1rem, auto));
  justify-content: right;
  grid-gap: 1rem;
  align-items: center;
  margin: 1rem;
  margin-bottom: 0;
  border-bottom: 3px solid #e1e0ea;
  padding-bottom: 0.5rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPayFilter .allUserIndexInfoPayFilterItem {
  font-size: 0.9rem;
  font-weight: 400;
  color: #475569;
  cursor: pointer;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPayFilter .allUserIndexInfoPayFilterItem .active {
  border-bottom: 3px solid rgb(207, 26, 26);
  color: rgb(207, 26, 26);
  padding-bottom: 0.5rem;
  background: transparent;
}

@media screen and (max-width: 550px) {
  .allUserIndex .allUserIndexInfo .allUserIndexInfoPayFilter .allUserIndexInfoPayFilterItem {
    font-size: 0.6rem;
  }
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay {
  background: #fff;
  border-radius: 10px;
  margin-top: 1rem;
  overflow: hidden;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table {
  display: grid;
  grid-template-columns: 1fr;
  direction: rtl;
  margin-top: 0;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table tr {
  display: grid;
  background: white;
  grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr));
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table tr:first-child {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.08), 0 1px 5px 0 rgba(0, 0, 0, 0.08);
  border: 0;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table tr th {
  box-shadow: 2px 0 2px -2px rgba(0, 0, 0, 0.2);
  padding: 2rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.7rem;
  font-weight: 500;
  color: #475569;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table tr th svg {
  width: 1rem;
  height: 1rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table tr th:first-child {
  border-right: 0;
  cursor: pointer;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr:first-child {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr:nth-child(odd) {
  background: #eee;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr td {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1rem, auto));
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  text-align: center;
  padding: 2rem;
  box-shadow: 2px 0 2px -2px rgba(0, 0, 0, 0.2);
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr td a {
  cursor: pointer;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr td a svg {
  width: 1rem;
  height: 1rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr td span {
  color: #475569;
  font-size: 0.75rem;
  font-weight: 300;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr td:first-child i:nth-child(2) {
  position: absolute;
  top: 0;
  visibility: hidden;
  opacity: 0;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr .active {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  font-weight: 500;
  background: transparent;
  color: #475569;
  font-size: 0.7rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr .active:before {
  border-radius: 10px;
  width: 10px;
  height: 10px;
  background-color: #00C58D;
  content: "";
  display: inline-block;
  margin-left: 10px;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr .unActive {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  font-weight: 300;
  background: transparent;
  color: #475569;
  font-size: 0.7rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr .unActive:before {
  border-radius: 10px;
  width: 10px;
  height: 10px;
  background-color: #FC5C63;
  content: "";
  display: inline-block;
  margin-left: 10px;
}

@media screen and (max-width: 1200px) {
  .allUserIndex .allUserIndexInfo .allUserIndexInfoPay table tr th {
    padding: 2rem 0;
  }

  .allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr td {
    padding: 2rem 0;
  }
}

@media screen and (max-width: 700px) {
  .allUserIndex .allUserIndexInfo .allUserIndexInfoPay table tr th {
    padding: 1rem 0;
    font-size: 0.55rem;
  }

  .allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr td {
    padding: 1rem 0;
  }

  .allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr td span {
    font-size: 0.55rem;
    color: rgb(49, 49, 49);
  }

  .allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr td i svg {
    width: 0.5rem;
    height: 0.5rem;
  }

  .allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr td .active,
  .allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr td .unActive {
    font-size: 0.5rem;
  }

  .allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr td .active:before,
  .allUserIndex .allUserIndexInfo .allUserIndexInfoPay table .showTr tr td .unActive:before {
    visibility: hidden;
    position: absolute;
    top: 0;
  }
}

.allUserIndex .allUserIndexInfo .paginate {
  margin: 1rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoLike .paginate {
  margin: 1rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoLike .allUserIndexInfoLikeItem {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoLike .allUserIndexInfoLikeItem ul li {
  display: grid;
  grid-template-columns: 1fr auto;
  border-bottom: 1px solid #e1e0ea;
  grid-gap: 1rem;
  padding: 1rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoLike .allUserIndexInfoLikeItem ul li a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoLike .allUserIndexInfoLikeItem ul li a .userItemPic img {
  width: 3rem;
  height: 3rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoLike .allUserIndexInfoLikeItem ul li a .userItemSubject .userItemSubjectTitle {
  font-size: 0.8rem;
  font-weight: 400;
  height: 2.5rem;
  overflow: hidden;
  color: #475569;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoLike .allUserIndexInfoLikeItem ul li a .userItemSubject .postPriceItem {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: left;
  height: 2.5rem;
  overflow: hidden;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoLike .allUserIndexInfoLikeItem ul li a .userItemSubject .postPriceItem .offPrice {
  display: grid;
  justify-content: left;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoLike .allUserIndexInfoLikeItem ul li a .userItemSubject .postPriceItem .offPrice s {
  font-size: 0.8rem;
  line-height: 1.692;
  font-weight: 300;
  color: #475569;
  display: flex;
  width: 100%;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoLike .allUserIndexInfoLikeItem ul li a .userItemSubject .postPriceItem h3 {
  text-align: left;
  width: 100%;
  color: #475569;
  letter-spacing: 0.1px;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.5;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoLike .allUserIndexInfoLikeItem ul li i {
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoLike .allUserIndexInfoLikeItem ul li i svg {
  transition: all 0.3s ease-in-out;
  fill: #475569;
  width: 1rem;
  height: 1rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews {
  background: #fff;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost {
  position: relative;
  transition: all 0.2s ease-in-out;
  border: 1px solid #e1e0ea;
  padding: 0.5rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost:hover {
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost:hover .productOptions {
  visibility: visible;
  opacity: 1;
  left: -0.5rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a {
  border-top: 0;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .offProduct {
  position: absolute;
  top: 0;
  right: 1.5rem;
  z-index: 100;
  background-color: #f21111;
  color: white;
  line-height: 2;
  font-weight: 300;
  font-size: 13px;
  width: 1.7rem;
  height: 3.9rem;
  text-align: center;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .offProduct span:before {
  content: "";
  border-color: transparent #f21111 transparent transparent;
  border-top: 12px solid #f21111;
  border-left: 12px solid transparent;
  position: absolute;
  top: 100%;
  right: 0;
  color: white;
  font-size: 12px;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .offProduct span:after {
  content: "";
  border-color: transparent transparent #f21111;
  width: 0;
  height: 0;
  border-top: 12px solid #f21111;
  border-right: 12px solid transparent;
  position: absolute;
  top: 100%;
  left: 0;
  color: white;
  font-size: 12px;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .allProductArchiveContainerPostPic {
  overflow: hidden;
  height: 200px;
  padding: 0.5rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .allProductArchiveContainerPostPic img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: center;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .allProductArchiveContainerPostTitle {
  height: 3rem;
  padding: 0.5rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .allProductArchiveContainerPostTitle h4 {
  text-align: right;
  max-width: 90%;
  font-size: 0.95rem;
  line-height: 25px;
  color: #475569;
  font-weight: 400;
  opacity: 0.9;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a ul {
  margin-top: 1rem;
  overflow: hidden;
  margin-right: 0.5rem;
  height: 5.5rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a ul li {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 0.4rem;
  align-items: center;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a ul li:before {
  border-radius: 10px;
  width: 6px;
  height: 6px;
  background-color: #475569;
  opacity: 0.6;
  content: "";
  display: inline-block;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a ul li span {
  font-size: 0.8rem;
  color: #475569;
  opacity: 0.6;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.4rem;
  align-items: center;
  padding: 0.5rem;
  margin-top: 0.5rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: left;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem .offPrice {
  display: grid;
  justify-content: left;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem .offPrice s {
  font-size: 0.8rem;
  line-height: 1.692;
  font-weight: 300;
  color: #475569;
  display: flex;
  width: 100%;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem h3 {
  text-align: left;
  width: 100%;
  color: #475569;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.5;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem h3 span {
  letter-spacing: 0.1px;
  font-size: 0.8rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem i {
  color: white;
  padding: 0.3rem;
  border-radius: 5px;
  display: grid;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.2);
  border-top: 2px solid rgba(255, 0, 0, 0.5);
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #f21111;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .postPrice .postPriceItem i .loading {
  fill: #f21111;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .checkCount {
  border-bottom: 1px solid #f5f5f5;
  z-index: 2;
  height: 27px;
  position: relative;
  width: 100%;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost a .checkCount span {
  color: #475569;
  font-size: 1rem;
  line-height: 1.222;
  font-weight: 400;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 125%;
  background: #fff;
  padding: 0 1rem;
  height: 31px;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost .productOptions {
  position: absolute;
  left: -0.5rem;
  top: 0;
  display: grid;
  justify-content: left;
  background: #fff;
  width: 2.5rem;
  padding: 0.5rem;
  border: 1px solid #e1e0ea;
  margin-left: 0.5rem;
  transition: all 0.3s ease-in-out;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  border-bottom-right-radius: 10px;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost .productOptions .productOption {
  margin-top: 1rem;
  cursor: pointer;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost .productOptions .productOption i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.3rem;
  height: 1.3rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost .productOptions .productOption i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost .productOptions .productOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost .productOptions .productOption i .loading {
  fill: #475569;
  width: 1rem;
  height: 1rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost .productOptions .productOption .active svg {
  fill: #F71938;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoViews .allProductArchiveContainerPosts .allProductArchiveContainerPost .productOptions .productOption:first-child {
  margin-top: 0.5rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPersonal {
  background: #fff;
  margin-top: 1rem;
  border-radius: 10px;
  overflow: hidden;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  border-top: 1px solid #e1e0ea;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem {
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem input,
.allUserIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem textarea {
  padding: 0.5rem;
  background: #f5f5f5;
  border-radius: 0.2rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
  font-size: 0.9rem;
  line-height: 1.571;
  color: #81858b;
  height: 2.5rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem textarea {
  height: 10rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem label {
  font-size: 0.9rem;
  line-height: 1.692;
  color: #475569;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem h4 {
  height: 2.5rem;
  width: 100%;
  cursor: pointer;
  background: #f5f5f5;
  border-radius: 0.2rem;
  color: #475569;
  display: grid;
  align-items: center;
  padding-right: 0.5rem;
  font-weight: 300;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem .allUserIndexInfoPersonalItemDate {
  border-radius: 0.2rem;
  overflow: hidden;
  margin-top: 0.5rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem .allUserIndexInfoPersonalItemDate input {
  margin-top: 0;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem .allUserIndexInfoPersonalItemDate label {
  padding: 0.3rem 0.5rem;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem:first-child {
  border-left: 1px solid #e1e0ea;
}

.allUserIndex .allUserIndexInfo .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems:first-child {
  border-top: 0;
}

.allUserIndex .allUserIndexInfo .infoButton {
  background: #0FABC6;
  padding: 0.5rem 1rem;
  color: white;
  margin-top: 1rem;
  border-radius: 0.2rem;
}

.allUserIndex .allUserIndexComment label {
  color: #475569;
  font-size: 1rem;
  font-weight: 500;
  padding-right: 1rem;
}

.allUserIndex .allUserIndexComment .allUserIndexInfoPayFilter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1rem, auto));
  justify-content: right;
  grid-gap: 1rem;
  align-items: center;
  margin: 1rem;
  margin-bottom: 0;
  border-bottom: 3px solid #e1e0ea;
  padding-bottom: 0.5rem;
}

.allUserIndex .allUserIndexComment .allUserIndexInfoPayFilter .allUserIndexInfoPayFilterItem {
  font-size: 0.9rem;
  font-weight: 400;
  color: #475569;
  cursor: pointer;
}

.allUserIndex .allUserIndexComment .allUserIndexInfoPayFilter .allUserIndexInfoPayFilterItem .active {
  border-bottom: 3px solid rgb(207, 26, 26);
  color: rgb(207, 26, 26);
  padding-bottom: 0.5rem;
}

.allUserIndex .allUserIndexComment .paginate {
  margin: 1rem;
}

.allUserIndex .allUserIndexComment .allUserIndexCommentItems .allUserIndexCommentItem {
  display: grid;
  grid-template-columns: 1fr auto;
  background: #fff;
  grid-gap: 1rem;
  border-bottom: 1px solid #e1e0ea;
  padding-bottom: 1rem;
}

.allUserIndex .allUserIndexComment .allUserIndexCommentItems .allUserIndexCommentItem a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
}

.allUserIndex .allUserIndexComment .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemPic img {
  width: 5rem;
  height: 5rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allUserIndex .allUserIndexComment .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemSubject .allUserIndexCommentItemSubjectTitle {
  font-size: 0.9rem;
  font-weight: 400;
  height: 2.5rem;
  overflow: hidden;
  color: #475569;
}

.allUserIndex .allUserIndexComment .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemSubject .allUserIndexCommentItemSubjectStatus span {
  font-size: 0.8rem;
  color: #475569;
  font-weight: 300;
}

.allUserIndex .allUserIndexComment .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemSubject .allUserIndexCommentItemSubjectBody {
  margin-top: 1rem;
}

.allUserIndex .allUserIndexComment .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemSubject .allUserIndexCommentItemSubjectBody p {
  color: #475569;
  font-size: 0.8rem;
  line-height: 36px;
  text-align: right;
}

.allUserIndex .allUserIndexComment .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemSubject .allUserIndexCommentItemSubjectAccept {
  margin-top: 1rem;
}

.allUserIndex .allUserIndexComment .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemSubject .allUserIndexCommentItemSubjectAccept span {
  border-color: #ef394e;
  background-color: rgba(179, 27, 35, 0.1);
  color: #ef394e;
  padding: 0.2rem;
  border-radius: 0.5rem;
}

.allUserIndex .allUserIndexComment .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemSubject .allUserIndexCommentItemSubjectAccept .active {
  border-color: #4caf50;
  background-color: rgba(76, 175, 80, 0.1);
  color: #2e7b32;
}

.allUserIndex .allUserIndexComment .allUserIndexCommentItems .allUserIndexCommentItem .allUserIndexCommentItemDelete {
  display: grid;
  justify-content: center;
  align-items: center;
  padding-left: 2rem;
}

.allUserIndex .allUserIndexComment .allUserIndexCommentItems .allUserIndexCommentItem .allUserIndexCommentItemDelete i {
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.allUserIndex .allUserIndexComment .allUserIndexCommentItems .allUserIndexCommentItem .allUserIndexCommentItemDelete i svg {
  transition: all 0.3s ease-in-out;
  fill: #475569;
  width: 1rem;
  height: 1rem;
}

@media screen and (max-width: 700px) {
  .allUserIndex .allUserIndexComment .allUserIndexCommentItems .allUserIndexCommentItem a {
    grid-template-columns: 1fr;
  }

  .allUserIndex .allUserIndexComment .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemPic {
    display: grid;
    justify-content: center;
  }

  .allUserIndex .allUserIndexComment .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemPic img {
    width: 100%;
    height: 8rem;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

.allUserIndex .allShowFastPost {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
}

.allUserIndex .allShowFastPost .allShowFastPostPanel {
  background-color: #f5f5f5;
  width: 30rem;
  height: 100%;
  position: relative;
  overflow-y: scroll;
  padding: 1rem;
}

.allUserIndex .allShowFastPost .allShowFastPostPanel ul {
  background: #fff;
  border-radius: 0.3rem;
  overflow: hidden;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 1px 5px 0 rgba(0, 0, 0, 0.03);
}

.allUserIndex .allShowFastPost .allShowFastPostPanel ul li {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 0.5rem;
  grid-gap: 0.5rem;
}

.allUserIndex .allShowFastPost .allShowFastPostPanel ul li .payMetaPic {
  width: 8rem;
}

.allUserIndex .allShowFastPost .allShowFastPostPanel ul li .payMetaPic img {
  width: 100%;
  height: 10rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allUserIndex .allShowFastPost .allShowFastPostPanel ul li .payMetaSubject .payMetaSubjectTitle {
  font-size: 0.7rem;
  line-height: 24px;
  font-weight: 600;
  color: #475569;
}

.allUserIndex .allShowFastPost .allShowFastPostPanel ul li .payMetaSubject .payMetaSubjectItem {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
}

.allUserIndex .allShowFastPost .allShowFastPostPanel ul li .payMetaSubject .payMetaSubjectItem i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allUserIndex .allShowFastPost .allShowFastPostPanel ul li .payMetaSubject .payMetaSubjectItem i svg {
  width: 0.8rem;
  height: 0.8rem;
}

.allUserIndex .allShowFastPost .allShowFastPostPanel ul li:nth-child(even) {
  background: #f5f5f5;
}

.allUserIndex .allShowFastPost .allShowFastPostPanel .buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin: 1rem 0;
}

.allUserIndex .allShowFastPost .allShowFastPostPanel .buttons button {
  background: #fff;
  border-radius: 0.3rem;
  padding: 0.5rem;
  font-size: 0.7rem;
  font-weight: 400;
  color: #475569;
}

.allUserIndex .allShowFastPost .allShowFastPostPanel .buttons svg {
  fill: #f21111;
  width: 1.5rem;
  height: 1.5rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 700px) {
  .allUserIndex .allShowFastPost .allShowFastPostPanel {
    width: 15rem;
  }

  .allUserIndex .allShowFastPost .allShowFastPostPanel ul li {
    grid-template-columns: 1fr;
  }

  .allUserIndex .allShowFastPost .allShowFastPostPanel ul li .allUserIndexCommentItemPic {
    width: 100%;
    display: grid;
    justify-content: center;
  }

  .allUserIndex .allShowFastPost .allShowFastPostPanel ul li .allUserIndexCommentItemPic img {
    width: 100%;
    height: 8rem;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

.allUserIndex .showChangeNum {
  position: fixed;
  z-index: 998;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr;
}

.allUserIndex .showChangeNum .showChangeNumItems {
  width: 40%;
  margin: auto;
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
  overflow: hidden;
}

.allUserIndex .showChangeNum .showChangeNumItems .showChangeNumContainer {
  display: grid;
  grid-template-columns: 1fr;
}

.allUserIndex .showChangeNum .showChangeNumItems .showChangeNumContainer label {
  color: #475569;
  font-weight: 500;
  font-size: 0.9rem;
}

.allUserIndex .showChangeNum .showChangeNumItems .showChangeNumContainer input {
  direction: ltr;
  text-align: right;
  border: 1.4px solid #e1e0ea;
  padding: 0.5rem;
  color: #475569;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  transition: all 0.3s ease-in-out;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.allUserIndex .showChangeNum .showChangeNumItems .showChangeNumContainer input:focus {
  border: 1.4px solid #00C58D;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
}

.allUserIndex .showChangeNum .showChangeNumItems .showChangeNumContainer .buttons {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 1rem;
}

.allUserIndex .showChangeNum .showChangeNumItems .showChangeNumContainer .buttons button {
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  background-color: #00C58D;
  color: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(90, 141, 238, 0.5);
  transition: all 0.3s ease-in-out;
}

.allUserIndex .showChangeNum .showChangeNumItems .showChangeNumContainer .buttons button:hover {
  background-color: #5A8DEE;
}

.allUserIndex .showChangeNum .showChangeNumItems .showChangeNumContainer .buttons button:last-child {
  background: #f21111;
}

.allUserIndex .showChangeNum .showChangeNumItems .showChangeNumContainer .buttons svg {
  fill: #f21111;
  width: 1.5rem;
  height: 1.5rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allUserIndex .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.3rem;
  margin-bottom: 1rem;
}

.allUserIndex .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
}

.allUserIndex .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem input {
  direction: ltr;
  text-align: right;
  border: 1.4px solid #e1e0ea;
  padding: 0.5rem;
  color: #475569;
  border-radius: 0.3rem;
  font-size: 0.8rem;
}

.allUserIndex .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem input:focus {
  border: 1.4px solid #00C58D;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
}

.allUserIndex .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem:last-child {
  margin-bottom: 0;
}

.allUserIndex .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 1rem;
}

.allUserIndex .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton button {
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  background-color: #00C58D;
  color: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(90, 141, 238, 0.5);
}

.allUserIndex .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton button:last-child {
  background: #5A8DEE;
}

.allUserIndex .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton svg {
  fill: #f21111;
  width: 1.5rem;
  height: 1.5rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allUserIndex .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterTime .allHeaderIndexRegisterTimeItem {
  color: #62666d;
  font-size: 12px;
}

.allUserIndex .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterTime .allHeaderIndexRegisterTimeItem span {
  color: #5A8DEE;
}

.allUserIndex .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterTime h5 {
  width: 5rem;
  font-weight: 300;
  text-align: center;
  cursor: pointer;
  padding-bottom: 0.5rem;
  font-size: 0.7rem;
  color: #5A8DEE;
  border-bottom: 1px dashed #5A8DEE;
}

.allUserIndex .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerDetail {
  color: #62666d;
  cursor: pointer;
  font-size: 12px;
}

@media screen and (max-width: 900px) {
  .allUserIndex {
    grid-template-columns: 1fr;
    padding-top: 1rem;
  }

  .allUserIndex .allUserIndexLists {
    position: relative;
    top: auto;
    width: auto;
  }

  .allUserIndex .allUserIndexInfo .myRank {
    display: block;
  }

  .allUserIndex .allUserIndexInfo .myRank .right,
  .allUserIndex .allUserIndexInfo .myRank .left {
    text-align: center;
  }

  .allUserIndex .allUserIndexInfo .myRank .left {
    margin-top: 2rem;
  }
}

.allHeaderIndexRegister {
  width: 100%;
  height: 100%;
  display: grid;
  justify-content: center;
  margin-top: 8.5rem;
  justify-items: center;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData {
  width: 26rem;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems {
  padding: 1rem;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsTitle {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  text-align: center;
  margin-bottom: 1rem;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsTitle .allHeaderIndexRegisterTitleItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 500;
  color: #475569;
  text-align: right;
  margin-bottom: 2rem;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsTitle svg {
  width: 24rem;
  height: 10rem;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .slide-fade-enter-active {
  transition: all 0.5s ease-in-out;
  opacity: 1;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .slide-fade-leave-active {
  position: absolute;
  right: 0;
  opacity: 0;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .slide-fade-enter {
  transition: all 0.5s ease-in-out;
  opacity: 0;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .alert {
  color: red;
  font-weight: 300;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerCounter {
  display: grid;
  justify-content: center;
  margin-bottom: 2rem;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerCounter h3 {
  margin-top: 1rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerCounter .allHeaderIndexRegisterItemsContainerCounterTimer {
  display: grid;
  justify-content: center;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerCounter p {
  font-size: 0.7rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.5;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerSend {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-bottom: 1rem;
  margin-top: 0;
  font-weight: 300;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.3rem;
  margin-bottom: 1rem;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem span,
.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexInput {
  border: 1.4px solid #e1e0ea;
  height: 2.5rem;
  border-radius: 0.3rem;
  position: relative;
  margin-top: 0.5rem;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexInput input {
  padding: 0 0.5rem;
  direction: ltr;
  text-align: right;
  background: transparent;
  color: #475569;
  font-weight: 300;
  width: 100%;
  font-size: 0.9rem;
  height: 100%;
  border-radius: 0.3rem;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexInput .start {
  font-size: 0.65rem;
  right: 0.5rem;
  top: -0.7rem;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexInput:focus-within {
  border: 1.4px solid #f6993f;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexRegisterItemInputs {
  display: grid;
  grid-template-columns: auto;
  justify-content: center;
  direction: ltr;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexRegisterItemInputs .code-container {
  position: relative;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexRegisterItemInputs .code-container label {
  width: 70%;
  height: 40px;
  font-size: 0;
  display: grid;
  margin: auto;
  grid-template-columns: repeat(6, auto);
  justify-content: center;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexRegisterItemInputs .code-container label span {
  width: 3rem;
  vertical-align: top;
  display: inline-block;
  text-align: center;
  font-size: 2rem;
  line-height: 21px;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e1e0ea;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexRegisterItemInputs .code-container label span.highlight {
  animation: mymove 0.7s ease-in-out infinite;
}

@keyframes mymove {
  0% {
    border-color: #eee;
  }

  50% {
    border-color: red;
  }

  100% {
    border-color: #eee;
  }
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexRegisterItemInputs .code-container label span + span {
  margin-left: 5.333px;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexRegisterItemInputs .code-container input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  border: 1px solid red;
  opacity: 0;
  width: 100%;
}

@media screen and (max-width: 700px) {
  .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexRegisterItemInputs .code-container label {
    height: 30px;
  }

  .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexRegisterItemInputs .code-container label span {
    width: 1.5rem;
    font-size: 1rem;
  }
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem:last-child {
  margin-bottom: 0;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton {
  display: grid;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton div {
  background: linear-gradient(to left, #f6993f 0%, #f21111 100%) !important;
  padding: 1px;
  border-radius: 20rem;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton div button {
  display: grid;
  justify-content: center;
  padding: 0.4rem 0;
  text-align: center;
  background: #fff;
  border-radius: 20rem;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton div button span {
  font-weight: 300;
  background: linear-gradient(to left, #f6993f 0%, #f21111 100%);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton div button .loading {
  fill: #f21111;
  width: 30px;
  height: 30px;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerDetail {
  color: #62666d;
  cursor: pointer;
  font-size: 12px;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterLoader {
  display: grid;
  justify-content: center;
  margin-bottom: 2rem;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterLoader .lds-ring {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterLoader .lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  border: 4px solid #f21111;
  border-radius: 100%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #f21111 transparent transparent transparent;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterLoader .lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterLoader .lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterLoader .lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainerSecurity {
  margin-top: 2rem;
  text-align: center;
  color: #475569;
  font-size: 0.85rem;
  line-height: 25px;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  grid-gap: 1rem;
  margin-bottom: 1rem;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays button,
.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays a {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  background: #f5f5f5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
  height: 3.2rem;
  align-items: center;
  text-align: right;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays button span span,
.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays a span span {
  font-weight: 500;
  color: #f21111;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays button svg,
.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays a svg {
  width: 2.2rem;
  height: 2.2rem;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays button svg:last-child,
.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays a svg:last-child {
  width: 0.9rem;
  height: 0.9rem;
  fill: rgba(0, 0, 0, 0.5);
}

@keyframes move {
  0% {
    margin-left: 0;
  }

  50% {
    margin-left: 1rem;
  }

  100% {
    margin-left: 0;
  }
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays button:hover svg:last-child,
.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays a:hover svg:last-child {
  animation: move 0.5s ease infinite;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWayBody p {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.5;
  text-align: center;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterIcon {
  position: absolute;
  left: 1rem;
  top: 1rem;
  cursor: pointer;
}

.allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterIcon svg {
  width: 2rem;
  height: 2rem;
  opacity: 0.3;
}

@media screen and (max-width: 700px) {
  .allHeaderIndexRegister .allHeaderIndexRegisterData {
    width: 95%;
  }

  .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsTitle svg {
    width: auto;
  }

  .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsTitle .allHeaderIndexRegisterTitleItem {
    font-size: 0.7rem;
  }

  .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem input {
    padding: 0.2rem;
  }

  .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterIcon svg {
    width: 1rem;
    height: 1rem;
  }
}

@media screen and (max-width: 920px) {
  .allHeaderIndexRegister {
    margin-top: 1rem;
  }
}

.allShowPay {
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  padding: 1rem;
}

.allShowPay .topShowPay .title {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  border-bottom: 1px solid #e1e0ea;
  padding-bottom: 1rem;
}

.allShowPay .topShowPay .title h2 {
  font-size: 1.2rem;
  color: #475569;
  font-weight: 700;
}

.allShowPay .topShowPay .title span {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
  background: #f5f5f5;
  padding: 0.2rem 1rem;
  border-radius: 5px;
}

.allShowPay .topShowPay .title button {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 0.8rem;
  color: white;
  background: #00C58D;
  font-weight: 500;
  padding: 0.3rem 1rem;
  border-radius: 5px;
}

.allShowPay .topShowPay .title button svg {
  fill: white;
  width: 1rem;
  height: 1rem;
}

@media screen and (max-width: 500px) {
  .allShowPay .topShowPay .title h2 {
    font-size: 1rem;
  }

  .allShowPay .topShowPay .title span {
    font-size: 0.7rem;
  }
}

.allShowPay .topShowPay .detail .items {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1.5rem;
  margin-top: 1rem;
}

.allShowPay .topShowPay .detail .items .item {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allShowPay .topShowPay .detail .items .item h5 {
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
  opacity: 0.7;
}

.allShowPay .topShowPay .detail .items .item div {
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
}

.allShowPay .topShowPay .detail .items .item .allCategoryPanel {
  position: relative;
  width: 10rem;
}

.allShowPay .topShowPay .detail .items .item .allCategoryPanel .categoryShow {
  border: 1.4px solid #DFE3E7;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0.4rem 0.5rem 0.4rem 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.allShowPay .topShowPay .detail .items .item .allCategoryPanel .categoryShow h4 {
  color: #524c96;
  font-size: 0.7rem;
  font-weight: 400;
}

.allShowPay .topShowPay .detail .items .item .allCategoryPanel .categoryShow i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allShowPay .topShowPay .detail .items .item .allCategoryPanel .categoryShow i svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: #475569;
}

.allShowPay .topShowPay .detail .items .item .allCategoryPanel ul {
  position: absolute;
  top: 94%;
  right: 0;
  width: 100%;
  background: white;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  max-height: 15rem;
  direction: ltr;
  overflow: hidden;
  border: 1.4px solid #DFE3E7;
  border-top: 0;
  z-index: 80;
}

.allShowPay .topShowPay .detail .items .item .allCategoryPanel ul .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  height: 15rem;
}

.allShowPay .topShowPay .detail .items .item .allCategoryPanel ul li {
  direction: rtl;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.4rem;
  padding-right: 1rem;
  color: #524c96;
  font-size: 0.65rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  height: 2rem;
}

.allShowPay .topShowPay .detail .items .item .allCategoryPanel ul li:hover {
  background: rgb(22, 31, 106);
  color: white;
}

.allShowPay .topShowPay .detail .items .item .active {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allShowPay .topShowPay .detail .items .item .active:before {
  width: 10px;
  height: 10px;
  content: "";
  background: #00C58D;
  border-radius: 5rem;
}

.allShowPay .topShowPay .detail .items .item .unActive {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allShowPay .topShowPay .detail .items .item .unActive:before {
  width: 10px;
  height: 10px;
  content: "";
  background: #f21111;
  border-radius: 5rem;
}

@media screen and (max-width: 700px) {
  .allShowPay .topShowPay .detail .items {
    grid-template-columns: 1fr;
  }
}

.allShowPay .topShowPay .detail .topDetail {
  border-bottom: 1px solid #e1e0ea;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.allShowPay .topShowPay .detail .botDetail {
  border-bottom: 1px solid #e1e0ea;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.allShowPay .topShowPay .trackPay {
  border-bottom: 1px solid #e1e0ea;
  padding-bottom: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
}

.allShowPay .topShowPay .trackPay input {
  padding: 0.3rem 1rem;
  background: #eee;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
}

.allShowPay .topShowPay .trackPay button {
  padding: 0.3rem 1rem;
  background: #5A8DEE;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
}

.allShowPay .topShowPay .trackPay label,
.allShowPay .topShowPay .trackPay h4 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
}

.allShowPay .allShowPayContainer .topContainer {
  margin-top: 3rem;
  padding-bottom: 3rem;
}

.allShowPay .allShowPayContainer .topContainer .level,
.allShowPay .allShowPayContainer .topContainer .code {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;
  margin-bottom: 3rem;
  grid-gap: 0.5rem;
}

.allShowPay .allShowPayContainer .topContainer .level h3,
.allShowPay .allShowPayContainer .topContainer .code h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #475569;
  opacity: 0.7;
}

.allShowPay .allShowPayContainer .topContainer .level span,
.allShowPay .allShowPayContainer .topContainer .code span {
  font-size: 1rem;
  font-weight: 700;
  color: #475569;
}

.allShowPay .allShowPayContainer .topContainer .code {
  margin-bottom: 0;
  margin-top: 3rem;
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2rem, auto));
  justify-content: center;
  align-items: center;
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem {
  position: relative;
  height: 5px;
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem svg {
  width: 1.8rem;
  height: 1.8rem;
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemBar {
  width: 5rem;
  height: 5px;
  background: #f5f5f5;
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemBarActive {
  width: 5rem;
  height: 5px;
  background: #00C58D;
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircle {
  position: absolute;
  width: 3rem;
  height: 3rem;
  z-index: 2;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid #e1e0ea;
  display: grid;
  align-items: center;
  justify-content: center;
  background-color: #e1e0ea;
  cursor: pointer;
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActives {
  background-color: #00C58D;
  position: absolute;
  width: 3rem;
  height: 3rem;
  z-index: 2;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid #f5f5f5;
  display: grid;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActive {
  width: 3rem;
  position: absolute;
  background: #00C58D;
  height: 3rem;
  top: 50%;
  display: grid;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  -webkit-box-align: center;
  border-radius: 50%;
  border: none;
  z-index: 4;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

@media screen and (max-width: 500px) {
  .allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActive,
  .allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActives {
    width: 2.5rem;
    height: 2.5rem;
  }
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount span {
  font-size: 0.7rem;
  font-weight: 300;
  color: #475569;
}

.allShowPay .allShowPayContainer .topContainer .cashBacks {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
  margin-top: 2rem;
}

.allShowPay .allShowPayContainer .topContainer .cashBacks button {
  border: 1px solid #00C58D;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  background: white;
  font-size: 0.8rem;
  font-weight: 300;
  color: #00C58D;
}

.allShowPay .allShowPayContainer .topContainer .cashBacks .active {
  background: #00C58D;
  color: white;
}

.allShowPay .allShowPayContainer .items {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 10px;
}

.allShowPay .allShowPayContainer .items .title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 1rem;
}

.allShowPay .allShowPayContainer .items .titleProducts {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.allShowPay .allShowPayContainer .items .titleProducts button {
  padding: 0.3rem 1rem;
  background: #5A8DEE;
  border-radius: 5px;
  color: white;
}

.allShowPay .allShowPayContainer .items .titleProducts .title {
  margin-bottom: 0;
}

.allShowPay .allShowPayContainer .items .createPayMeta {
  background: white;
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}

.allShowPay .allShowPayContainer .items .createPayMeta .allCategoryPanel {
  position: relative;
}

.allShowPay .allShowPayContainer .items .createPayMeta .allCategoryPanel .categoryShow {
  border: 1.4px solid #DFE3E7;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0.4rem 0.5rem 0.4rem 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.allShowPay .allShowPayContainer .items .createPayMeta .allCategoryPanel .categoryShow h4 {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 400;
}

.allShowPay .allShowPayContainer .items .createPayMeta .allCategoryPanel .categoryShow i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allShowPay .allShowPayContainer .items .createPayMeta .allCategoryPanel .categoryShow i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #475569;
}

.allShowPay .allShowPayContainer .items .createPayMeta .allCategoryPanel ul {
  position: absolute;
  top: 94%;
  right: 0;
  width: 100%;
  background: white;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  max-height: 15rem;
  direction: ltr;
  overflow: hidden;
  border: 1.4px solid #DFE3E7;
  border-top: 0;
  z-index: 80;
}

.allShowPay .allShowPayContainer .items .createPayMeta .allCategoryPanel ul .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  height: 15rem;
}

.allShowPay .allShowPayContainer .items .createPayMeta .allCategoryPanel ul li {
  direction: rtl;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.4rem;
  padding-right: 1rem;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  height: auto;
  min-height: 2rem;
}

.allShowPay .allShowPayContainer .items .createPayMeta .allCategoryPanel ul li:hover {
  background: rgb(22, 31, 106);
  color: white;
}

.allShowPay .allShowPayContainer .items .createPayMeta .allCategoryPanel ul li:first-child:hover {
  background: transparent;
}

.allShowPay .allShowPayContainer .items .createPayMeta input,
.allShowPay .allShowPayContainer .items .createPayMeta select {
  border: 1px solid #DFE3E7;
  padding: 0.3rem 0.5rem;
  color: #475569;
  border-radius: 0.3rem;
  background: white;
  font-size: 0.8rem;
  width: 100%;
  height: 2rem;
  transition: all 0.3s ease-in-out;
}

.allShowPay .allShowPayContainer .items .createPayMeta input:focus,
.allShowPay .allShowPayContainer .items .createPayMeta select:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #5A8DEE;
}

.allShowPay .allShowPayContainer .items .createPayMeta .createPayItems {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allShowPay .allShowPayContainer .items .createPayMeta .createPayItems .createPayItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
}

.allShowPay .allShowPayContainer .items .createPayMeta .createPayItems .createPayItem h4 {
  color: #475569;
  font-weight: 500;
  font-size: 0.9rem;
}

.allShowPay .allShowPayContainer .items .createPayMeta .btnAdd {
  padding: 0.3rem 1rem;
  background: #5A8DEE;
  border-radius: 5px;
  color: white;
  display: grid;
  margin-top: 1rem;
}

.allShowPay .allShowPayContainer .items .item {
  padding: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  background: #fff;
  margin-bottom: 1rem;
  grid-gap: 1rem;
  position: relative;
}

.allShowPay .allShowPayContainer .items .item .cartDetailPic img {
  width: 100%;
  max-width: 10rem;
  height: 8rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  align-items: center;
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem span {
  color: #475569;
  opacity: 0.7;
  font-size: 0.85rem;
  font-weight: 300;
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem i svg {
  fill: #475569;
  width: 1.1rem;
  height: 1.1rem;
  opacity: 0.7;
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem h3 {
  font-size: 1rem;
  line-height: 1.375;
  color: #475569;
  font-weight: 500;
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartDetailInfoItem:first-child {
  display: block;
  margin-top: 0;
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartCount {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
  color: #475569;
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartCount button {
  display: grid;
  justify-content: center;
  align-items: center;
  background: #f21111;
  height: 1.3rem;
  padding: 0 1rem;
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
  font-size: 0.8rem;
  color: white;
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartCount button:first-child {
  font-size: 0.8rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartDelete {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
}

.allShowPay .allShowPayContainer .items .item .cartDetailInfo .cartDelete svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #475569;
}

.allShowPay .allShowPayContainer .items .item:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 500px) {
  .allShowPay .allShowPayContainer .items .item {
    grid-template-columns: 1fr;
  }

  .allShowPay .allShowPayContainer .items .item .cartDetailPic {
    display: grid;
    justify-content: center;
  }
}

.allShowPay .printPay {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  top: 0;
  right: 0;
}

.allPayPanel .vidgetItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 1rem;
  margin-bottom: 1rem;
}

.allPayPanel .vidgetItems .vidgetItem {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.allPayPanel .vidgetItems .vidgetItem .vidgetIcon {
  position: relative;
  background: rgba(255, 255, 255, 0.4);
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 5rem;
  display: grid;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.allPayPanel .vidgetItems .vidgetItem .vidgetIcon svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}

.allPayPanel .vidgetItems .vidgetItem .vidgetSubject {
  position: relative;
  z-index: 5;
}

.allPayPanel .vidgetItems .vidgetItem .vidgetSubject h4 {
  font-size: 0.9rem;
  color: white;
  font-weight: 500;
}

.allPayPanel .vidgetItems .vidgetItem .vidgetSubject h5 {
  font-size: 0.8rem;
  color: #f5f5f5;
  font-weight: 300;
  margin-top: 0.5rem;
}

.allPayPanel .vidgetItems .vidgetItem:first-child {
  background: linear-gradient(to left, #f6993f 0%, #f21111 100%);
}

.allPayPanel .vidgetItems .vidgetItem:nth-child(2) {
  background: linear-gradient(to left, #31A945 0%, #31A991 100%);
}

.allPayPanel .vidgetItems .vidgetItem:nth-child(3) {
  background: linear-gradient(to left, #3C31A9 0%, #31A5A9 100%);
}

.allPayPanel .allShowFastPost {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
}

.allPayPanel .allShowFastPost .allShowFastPostPanel {
  background-color: #f5f5f5;
  width: 30rem;
  height: 100%;
  position: relative;
  overflow-y: scroll;
  padding: 1rem;
}

.allPayPanel .allShowFastPost .allShowFastPostPanel .userInfo {
  background: #fff;
  border-radius: 0.3rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.allPayPanel .allShowFastPost .allShowFastPostPanel .userInfo .userInfoItem {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #e1e0ea;
}

.allPayPanel .allShowFastPost .allShowFastPostPanel .userInfo .userInfoItem span {
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: #475569;
}

.allPayPanel .allShowFastPost .allShowFastPostPanel .userInfo .userInfoItem label {
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: #524c96;
}

.allPayPanel .allShowFastPost .allShowFastPostPanel .userInfo .userInfoItem:last-child {
  grid-template-columns: 1fr;
}

.allPayPanel .allShowFastPost .allShowFastPostPanel .userInfo .userInfoItem:last-child span {
  margin-top: 0.5rem;
}

.allPayPanel .allShowFastPost .allShowFastPostPanel .userInfo .userInfoItem:nth-child(even) {
  background: #f5f5f5;
}

.allPayPanel .allShowFastPost .allShowFastPostPanel .buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-bottom: 1rem;
}

.allPayPanel .allShowFastPost .allShowFastPostPanel .buttons button {
  background: #fff;
  border-radius: 0.3rem;
  padding: 0.5rem;
  font-size: 0.7rem;
  font-weight: 400;
  color: #475569;
}

@media screen and (max-width: 1000px) {
  .allPayPanel .allShowFastPost .allShowFastPostPanel {
    width: 100%;
  }
}

.allBecomeSeller .allBecomeSellerTop {
  background: #fff;
  padding: 1rem;
  padding-top: 3rem;
  border-radius: 10px;
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2rem, auto));
  justify-content: center;
  align-items: center;
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel {
  position: relative;
  height: 5px;
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel svg {
  width: 2.2rem;
  height: 2.2rem;
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelBar {
  width: 10rem;
  height: 5px;
  background: #f5f5f5;
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelBarActive {
  width: 10rem;
  height: 5px;
  background: #00C58D;
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelCircle {
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  z-index: 2;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid #e1e0ea;
  display: grid;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelCircleActives {
  background-color: #00C58D;
  position: absolute;
  width: 3.6rem;
  height: 3.6rem;
  z-index: 2;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid #e1e0ea;
  display: grid;
  align-items: center;
  justify-content: center;
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelCircleActive {
  width: 3.7rem;
  position: absolute;
  background: #00C58D;
  height: 3.7rem;
  top: 50%;
  display: grid;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  -webkit-box-align: center;
  border-radius: 50%;
  border: none;
  z-index: 4;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 700px) {
  .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelBar,
  .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelBarActive {
    width: 5rem;
  }

  .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelCircleActive,
  .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelCircle,
  .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelCircleActives {
    width: 2rem;
    height: 2rem;
  }
}

.allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels span {
  font-size: 0.7rem;
  font-weight: 300;
  color: #475569;
}

.allBecomeSeller .allBecomeSellerTop h4,
.allBecomeSeller .allBecomeSellerTop p {
  font-size: 1.2rem;
  text-align: center;
  font-weight: 700;
  color: #475569;
  margin-top: 3rem;
}

.allBecomeSeller .allBecomeSellerTop p {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1px;
  margin-top: 1rem;
  color: #475569;
}

.allBecomeSeller .errorsCreate {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 0.5rem;
  justify-content: right;
  align-items: center;
  margin: 1rem 0;
  background: rgba(255, 0, 0, 0.1);
  color: #e3342f;
  border-radius: 10px;
  padding: 0.5rem 1rem;
  height: 3rem;
}

.allBecomeSeller .errorsCreate i {
  display: grid;
  align-items: center;
}

.allBecomeSeller .errorsCreate i svg {
  width: 1.3rem;
  height: 1.3rem;
}

.allBecomeSeller .errorsCreate span {
  font-size: 0.85rem;
  font-weight: 400;
}

.allBecomeSeller .allBecomeUserInfo {
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
}

.allBecomeSeller .allBecomeUserInfo .allBecomeTip {
  background: rgba(255, 0, 0, 0.1);
  padding: 0 0.5rem;
  border-radius: 10px;
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  height: 3rem;
}

.allBecomeSeller .allBecomeUserInfo .allBecomeTip i svg {
  fill: #e3342f;
  width: 1.2rem;
  height: 1.2rem;
  animation: arrow-anim 1s ease infinite;
  margin-bottom: 0;
}

@keyframes arrow-anim {
  0% {
    margin-bottom: 0;
  }

  10% {
    margin-bottom: 0.5rem;
  }

  30% {
    transform: rotate(-40deg);
  }

  50% {
    transform: rotate(40deg);
  }

  60% {
    transform: rotate(-40deg);
  }

  70% {
    transform: rotate(-20deg);
  }

  80% {
    transform: rotate(0);
    margin-bottom: 1rem;
  }

  100% {
    margin-bottom: 0.5rem;
  }
}

.allBecomeSeller .allBecomeUserInfo .allBecomeTip span {
  font-size: 0.85rem;
  font-weight: 500;
  color: #f21111;
  height: 3rem;
  display: grid;
  align-items: center;
}

.allBecomeSeller .allBecomeUserInfo .allBecomeTip p {
  font-size: 0.85rem;
  font-weight: 500;
  color: #475569;
  height: 3rem;
  display: grid;
  align-items: center;
}

.allBecomeSeller .allBecomeUserInfo .sellerType {
  margin-top: 3rem;
}

.allBecomeSeller .allBecomeUserInfo .sellerType h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #475569;
}

.allBecomeSeller .allBecomeUserInfo .sellerType .allCategoryPanel {
  position: relative;
  margin: 1rem 0;
  width: 15rem;
}

.allBecomeSeller .allBecomeUserInfo .sellerType .allCategoryPanel .categoryShow {
  border: 1.4px solid #e1e0ea;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0.5rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.allBecomeSeller .allBecomeUserInfo .sellerType .allCategoryPanel .categoryShow h4 {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 500;
}

.allBecomeSeller .allBecomeUserInfo .sellerType .allCategoryPanel .categoryShow i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allBecomeSeller .allBecomeUserInfo .sellerType .allCategoryPanel .categoryShow i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #475569;
}

.allBecomeSeller .allBecomeUserInfo .sellerType .allCategoryPanel ul {
  position: absolute;
  top: 94%;
  right: 0;
  width: 100%;
  background: #fff;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  max-height: 15rem;
  direction: ltr;
  overflow: hidden;
  border: 1.4px solid #e1e0ea;
  border-top: 0;
  z-index: 80;
}

.allBecomeSeller .allBecomeUserInfo .sellerType .allCategoryPanel ul .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  height: 15rem;
}

.allBecomeSeller .allBecomeUserInfo .sellerType .allCategoryPanel ul li {
  direction: rtl;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.4rem;
  padding-right: 1rem;
  color: #475569;
  font-size: 0.8rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  height: 2rem;
}

.allBecomeSeller .allBecomeUserInfo .sellerType .allCategoryPanel ul li:hover {
  background: #f5f5f5;
}

.allBecomeSeller .allBecomeUserInfo .sellerType p {
  font-size: 0.75rem;
  font-weight: 300;
  color: #475569;
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem h4 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  margin-bottom: 0.5rem;
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem input,
.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .num {
  padding: 0.5rem;
  border: 1.4px solid #e1e0ea;
  border-radius: 0.2rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
  font-size: 0.85rem;
  font-weight: 300;
  height: 2.8rem;
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem input:focus,
.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .num:focus {
  border: 1.4px solid #00C58D;
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .allCategoryPanel {
  position: relative;
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .allCategoryPanel .categoryShow {
  border: 1.4px solid #e1e0ea;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0.5rem;
  height: 2.8rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .allCategoryPanel .categoryShow h4 {
  margin-bottom: 0;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 500;
  display: grid;
  align-items: center;
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .allCategoryPanel .categoryShow i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .allCategoryPanel .categoryShow i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #475569;
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .allCategoryPanel ul {
  position: absolute;
  top: 94%;
  right: 0;
  width: 100%;
  background: #fff;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  max-height: 15rem;
  direction: ltr;
  overflow: hidden;
  border: 1.4px solid #e1e0ea;
  border-top: 0;
  z-index: 80;
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .allCategoryPanel ul .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  height: 15rem;
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .allCategoryPanel ul li {
  direction: rtl;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.4rem;
  padding-right: 1rem;
  color: #475569;
  font-size: 0.8rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  height: 2rem;
}

.allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .allCategoryPanel ul li:hover {
  background: #f5f5f5;
}

@media screen and (max-width: 700px) {
  .allBecomeSeller .allBecomeUserInfo .personInfoItems {
    grid-template-columns: 1fr;
  }
}

.allBecomeSeller .allBecomeUserInfo .personInfoSeller {
  margin-top: 3rem;
}

.allBecomeSeller .allBecomeUserInfo .personInfoSeller h3 {
  font-size: 1.3rem;
  font-weight: 500;
  color: #475569;
  letter-spacing: 0.5px;
}

.allBecomeSeller .allBecomeUserInfo .personInfoSeller .personInfoItems:nth-last-child(1):nth-last-child(1) input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.allBecomeSeller .allBecomeUserInfo .contactSeller {
  margin-top: 3rem;
}

.allBecomeSeller .allBecomeUserInfo .contactSeller h3 {
  font-size: 1.3rem;
  font-weight: 500;
  color: #475569;
  letter-spacing: 0.5px;
}

.allBecomeSeller .buttons {
  display: grid;
  justify-content: left;
  margin-top: 1rem;
}

.allBecomeSeller .buttons button {
  font-size: 0.85rem;
  font-weight: 300;
  color: white;
  background: #00C58D;
  padding: 0.3rem 1rem;
  border-radius: 5px;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 2.2rem;
}

.allBecomeSeller .buttons button .loading {
  fill: white;
  width: 1.2rem;
  height: 1.2rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allBecomeSeller .uploadDocument {
  background: white;
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
}

.allBecomeSeller .uploadDocument h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #475569;
}

.allBecomeSeller .uploadDocument ul {
  margin-top: 1rem;
}

.allBecomeSeller .uploadDocument ul li {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  position: relative;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.3rem;
}

.allBecomeSeller .uploadDocument ul li:before {
  content: "";
  width: 8px;
  height: 8px;
  background: #00C58D;
  border-radius: 5rem;
}

.allBecomeSeller .uploadDocument .sendFileItem {
  border-radius: 0.4rem;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr;
  cursor: pointer;
  grid-gap: 1rem;
  border: 2px dashed #e1e0ea;
  background: #fff;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  position: relative;
}

.allBecomeSeller .uploadDocument .sendFileItem .vue-dropzone {
  border-radius: 0.3rem;
  color: black;
  border: 0;
}

.allBecomeSeller .uploadDocument .sendFileItem .vue-dropzone span {
  margin-right: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: black;
}

.allBecomeSeller .uploadDocument .sendFileItem .vue-dropzone .dropzone-custom-content {
  text-align: center;
}

.allBecomeSeller .uploadDocument .sendFileItem .vue-dropzone .dropzone-custom-title {
  margin-top: 0;
  color: #f6993f;
  font-family: "irsans";
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
}

.allBecomeSeller .uploadDocument .sendFileItem .vue-dropzone .subtitle {
  margin-top: 1rem;
  color: #475569;
  font-family: "irsans";
  font-style: normal;
  font-weight: 300;
  font-size: 0.8rem;
}

.allBecomeSeller .checkUploaded {
  margin-top: 1rem;
}

.allBecomeSeller .checkUploaded h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #475569;
}

.allBecomeSeller .welcomeSeller {
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
}

.allBecomeSeller .welcomeSeller i {
  display: grid;
  align-items: center;
  justify-content: center;
}

.allBecomeSeller .welcomeSeller i svg {
  width: 8rem;
  height: 8rem;
}

.allBecomeSeller .welcomeSeller h2,
.allBecomeSeller .welcomeSeller h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #475569;
  text-align: center;
  margin-top: 2rem;
}

.allBecomeSeller .welcomeSeller h3 {
  font-weight: 500;
  font-size: 1rem;
  margin-top: 1rem;
}

.allBecomeSeller .welcomeSeller p {
  color: #475569;
  text-align: center;
  font-weight: 300;
  font-size: 0.85rem;
  margin-top: 1rem;
}

.allBecomeSeller .welcomeSeller .nextButton {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, auto));
  justify-content: center;
  grid-gap: 1rem;
  margin-top: 2rem;
}

.allBecomeSeller .welcomeSeller .nextButton a {
  color: #f21111;
  text-align: center;
  font-weight: 300;
  font-size: 0.85rem;
  border: 1px solid #f21111;
  border-radius: 5px;
  padding: 0.5rem 1rem;
}

.allBecomeSeller .welcomeSeller .nextButton a:hover {
  background: #f21111;
  color: white;
}

.allBecomeSeller .showChangeNum {
  position: fixed;
  z-index: 998;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr;
}

.allBecomeSeller .showChangeNum .showChangeNumItems {
  width: 40%;
  margin: auto;
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
  overflow: hidden;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer {
  display: grid;
  grid-template-columns: 1fr;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer label {
  color: #475569;
  font-weight: 500;
  font-size: 0.9rem;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer input {
  direction: ltr;
  text-align: right;
  border: 1.4px solid #e1e0ea;
  padding: 0.5rem;
  color: #475569;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  transition: all 0.3s ease-in-out;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer input:focus {
  border: 1.4px solid #00C58D;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
}

.allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer .buttons {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 1rem;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer .buttons button {
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  background-color: #00C58D;
  color: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(90, 141, 238, 0.5);
  transition: all 0.3s ease-in-out;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer .buttons button:hover {
  background-color: #5A8DEE;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer .buttons button:last-child {
  background: #f21111;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer .buttons svg {
  fill: #f21111;
  width: 1.5rem;
  height: 1.5rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.3rem;
  margin-bottom: 1rem;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem input {
  direction: ltr;
  text-align: right;
  border: 1.4px solid #e1e0ea;
  padding: 0.5rem;
  color: #475569;
  border-radius: 0.3rem;
  font-size: 0.8rem;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem input:focus {
  border: 1.4px solid #00C58D;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
}

.allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem:last-child {
  margin-bottom: 0;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 1rem;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton button {
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  background-color: #00C58D;
  color: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(90, 141, 238, 0.5);
}

.allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton button:last-child {
  background: #5A8DEE;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton svg {
  fill: #f21111;
  width: 1.5rem;
  height: 1.5rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterTime .allHeaderIndexRegisterTimeItem {
  color: #475569;
  font-size: 12px;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterTime .allHeaderIndexRegisterTimeItem span {
  color: #5A8DEE;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterTime h5 {
  width: 5rem;
  font-weight: 300;
  text-align: center;
  cursor: pointer;
  padding-bottom: 0.5rem;
  font-size: 0.7rem;
  color: #5A8DEE;
  border-bottom: 1px dashed #5A8DEE;
}

.allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerDetail {
  color: #475569;
  cursor: pointer;
  font-size: 12px;
}

.allCheckoutIndex .allCheckoutTop ul li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
}

.allCheckoutIndex .allCheckoutTop ul li h4 {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: right;
  grid-gap: 0.5rem;
}

.allCheckoutIndex .allCheckoutTop ul li h4 a {
  color: #2C6DE9;
}

.allCheckoutIndex .allCheckoutTop ul li:before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 5rem;
  background: #f21111;
}

.allCheckoutIndex .allCheckoutTop ul li:last-child {
  margin-top: 0.5rem;
}

.allCheckoutIndex .allCheckoutData {
  padding: 1rem;
  background: #fff;
  border-radius: 10px;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
}

.allCheckoutIndex .allCheckoutData ul {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 2rem;
}

.allCheckoutIndex .allCheckoutData ul li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allCheckoutIndex .allCheckoutData ul li h4,
.allCheckoutIndex .allCheckoutData ul li span {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
}

.allCheckoutIndex .allCheckoutData ul li span {
  font-size: 1rem;
  letter-spacing: 0.1px;
  font-weight: 500;
}

.allCheckoutIndex .allCheckoutData button {
  padding: 0.3rem 1rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  background: #00C58D;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
  border-radius: 5px;
}

@media screen and (max-width: 700px) {
  .allCheckoutIndex .allCheckoutData {
    grid-template-columns: 1fr;
  }

  .allCheckoutIndex .allCheckoutData ul {
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }
}

.allUserIndexTicket .allTicketUserTop {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  background: white;
  border-radius: 5px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.allUserIndexTicket .allTicketUserTop .allTicketUserTopTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.allUserIndexTicket .allTicketUserTop .allTicketUserTopTitle svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: #475569;
}

.allUserIndexTicket .allTicketUserTop button {
  background: #9087ce;
  padding: 0.5rem 1.5rem;
  color: white;
  font-weight: 300;
  border-radius: 5px;
}

.allUserIndexTicket .allTicketUserCreate {
  background: white;
  padding: 1rem;
  border-radius: 5px;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItems .allTicketUserCreateItem .allCategoryPanel ul {
  height: auto;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  margin-bottom: 1rem;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItem label {
  font-size: 0.75rem;
  line-height: 1.692;
  color: #858585;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItem input,
.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItem textarea {
  padding: 0.6rem;
  background: white;
  border: 1px solid #DFE3E7;
  border-radius: 0.3rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
  font-size: 0.75rem;
  font-weight: 300;
  outline-style: none;
  resize: vertical;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItem textarea {
  height: 15rem;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItem .allCategoryPanel {
  position: relative;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItem .allCategoryPanel .categoryShow {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5rem;
  border: 1.4px solid #DFE3E7;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0.6rem 0.5rem 0.6rem 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItem .allCategoryPanel .categoryShow h4 {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 300;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItem .allCategoryPanel .categoryShow i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItem .allCategoryPanel .categoryShow i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #475569;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItem .allCategoryPanel ul {
  position: absolute;
  top: 94%;
  right: 0;
  width: 100%;
  background: white;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  height: 15rem;
  direction: ltr;
  overflow: hidden;
  border: 1.4px solid #DFE3E7;
  z-index: 80;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItem .allCategoryPanel ul .scroll-area {
  padding-top: 0.5rem;
  position: relative;
  margin: auto;
  width: 100%;
  height: 15rem;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItem .allCategoryPanel ul li {
  direction: rtl;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.4rem;
  padding-right: 1rem;
  color: #475569;
  font-size: 0.7rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  height: 2rem;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItem .allCategoryPanel ul li:hover {
  background: white;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateItem .allCategoryPanel .ps-container {
  direction: ltr;
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 15rem;
}

.allUserIndexTicket .allTicketUserCreate .allSendFileUpload {
  border-radius: 0.4rem;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr;
  cursor: pointer;
  grid-gap: 1rem;
  border: 2px dashed #DFE3E7;
  background: white;
  position: relative;
  margin-bottom: 1rem;
}

.allUserIndexTicket .allTicketUserCreate .allSendFileUpload .vue-dropzone {
  border-radius: 0.3rem;
  color: black;
  border: 0;
}

.allUserIndexTicket .allTicketUserCreate .allSendFileUpload .vue-dropzone span {
  margin-right: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: black;
}

.allUserIndexTicket .allTicketUserCreate .allSendFileUpload .vue-dropzone .dropzone-custom-content {
  text-align: center;
}

.allUserIndexTicket .allTicketUserCreate .allSendFileUpload .vue-dropzone .dropzone-custom-title {
  margin-top: 0;
  color: #f6993f;
  font-family: "irsans";
  font-style: normal;
  font-weight: 900;
  font-size: 1rem;
}

.allUserIndexTicket .allTicketUserCreate .allSendFileUpload .vue-dropzone .subtitle {
  margin-top: 1rem;
  color: #475569;
  font-family: "irsans";
  font-style: normal;
  font-weight: 500;
  font-size: 0.8rem;
}

.allUserIndexTicket .allTicketUserCreate .allTicketUserCreateButtons {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 1rem;
}

.allUserIndexTicket .allTicketUserCreate button {
  padding: 0.5rem 1rem;
  background: #00C58D;
  border-radius: 5px;
  color: white;
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
}

.allUserIndexTicket .allTicketUserCreate button:last-child {
  background: #e3342f;
}

.allUserIndexTicket .allTicketUserCreate button:hover {
  opacity: 1;
}

.allUserIndexTicket .userIndexDashboardTickets {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  grid-gap: 1rem;
  margin-bottom: 1rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems {
  background: white;
  border-radius: 5px;
  overflow: hidden;
  height: 35rem;
  direction: ltr;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .userIndexDashboardTicketsItemsTitle {
  border-bottom: 3px solid #DFE3E7;
  padding: 1rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .userIndexDashboardTicketsItemsTitle h3 {
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .userIndexDashboardTicketsItemsTitle p {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
  text-align: center;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .ps-container {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 30.5rem;
  padding-top: 0;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .userIndexDashboardTicketsItem {
  direction: rtl;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  padding: 1rem;
  border-bottom: 1px solid #DFE3E7;
  cursor: pointer;
  position: relative;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .userIndexDashboardTicketsItem:last-child {
  border-bottom: 0;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .userIndexDashboardTicketsItem .userIndexDashboardTicketsItemPic {
  display: grid;
  align-items: center;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .userIndexDashboardTicketsItem .userIndexDashboardTicketsItemPic img {
  width: 3rem;
  height: 3rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .userIndexDashboardTicketsItem .userIndexDashboardTicketsItemData {
  display: grid;
  grid-template-columns: 1fr;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .userIndexDashboardTicketsItem .userIndexDashboardTicketsItemData .userIndexDashboardTicketsItemTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 0.5rem;
  align-items: center;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .userIndexDashboardTicketsItem .userIndexDashboardTicketsItemData .userIndexDashboardTicketsItemTitle h3 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .userIndexDashboardTicketsItem .userIndexDashboardTicketsItemData .userIndexDashboardTicketsItemTitle span {
  background: #f5f5f5;
  padding: 2px 0.5rem;
  font-size: 0.65rem;
  font-weight: 300;
  color: #777;
  border-radius: 5px;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .userIndexDashboardTicketsItem .userIndexDashboardTicketsItemData p {
  font-size: 0.7rem;
  font-weight: 300;
  color: #475569;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 0.5rem;
  opacity: 0.7;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .userIndexDashboardTicketsItem .new {
  display: grid;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 1rem;
  top: 45%;
  width: 1.5rem;
  height: 1.5rem;
  color: white;
  background: #e3342f;
  border-radius: 5rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .userIndexDashboardTicketsItem svg {
  position: absolute;
  left: 1rem;
  top: 45%;
  width: 1rem;
  height: 1rem;
  fill: #bcbcbc;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .userIndexDashboardTicketsItem i {
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  display: grid;
  align-items: center;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsItems .userIndexDashboardTicketsItem i svg {
  fill: #e3342f;
  width: 1.3rem;
  height: 1.3rem;
  animation: arrow-anim2 0.5s ease infinite;
}

@keyframes arrow-anim2 {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  85% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow {
  background: white;
  border-radius: 5px;
  overflow: hidden;
  height: 35rem;
  position: relative;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowUser {
  background: #f9f9f9;
  padding: 1rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 1rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowUser img {
  width: 3rem;
  height: 3rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowUser span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowUser i {
  display: grid;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowUser i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #475569;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems {
  height: 27rem;
  overflow: hidden;
  direction: ltr;
  padding-bottom: 2rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .ps-container {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 27rem;
  padding-bottom: 2rem;
  padding-right: 1rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem {
  direction: rtl;
  margin-top: 1rem;
  position: relative;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemMe {
  display: grid;
  justify-content: right;
  margin-right: 1rem;
  padding: 5px 0;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemMe .userIndexDashboardTicketsShowItemMeData {
  background: #f4f5f8;
  border-radius: 10px;
  padding: 0.5rem;
  position: relative;
  box-shadow: 0 2px 0 #e8ebef;
  max-width: 80%;
  min-width: 8rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemMe .userIndexDashboardTicketsShowItemMeData .userIndexDashboardTicketsFile {
  background: white;
  border-radius: 10px;
  margin-bottom: 1rem;
  max-width: 12rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemMe .userIndexDashboardTicketsShowItemMeData .userIndexDashboardTicketsFile a {
  padding: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  grid-gap: 1rem;
  align-items: center;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemMe .userIndexDashboardTicketsShowItemMeData .userIndexDashboardTicketsFile a h4 {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemMe .userIndexDashboardTicketsShowItemMeData .userIndexDashboardTicketsFile a svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #475569;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemMe .userIndexDashboardTicketsShowItemMeData p {
  color: #53565d;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemMe .userIndexDashboardTicketsShowItemMeData h5 {
  color: #475569;
  opacity: 0.7;
  text-align: left;
  font-size: 0.6rem;
  font-weight: 300;
  margin-top: 0.5rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemMe .userIndexDashboardTicketsShowItemMeData::before {
  border-bottom: 0 !important;
  border-right: 10px solid transparent !important;
  content: "";
  position: absolute;
  bottom: 0.05rem;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-top: 20px solid #F4F5F8;
  border-right: 10px solid transparent;
  transform: rotate(-85deg);
  right: -0.9rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemOther {
  display: grid;
  justify-content: left;
  margin-left: 1rem;
  padding: 5px 0;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemOther .userIndexDashboardTicketsShowItemOtherData {
  background: #f4f5f8;
  border-radius: 10px;
  padding: 0.5rem;
  position: relative;
  box-shadow: 0 2px 0 #e8ebef;
  max-width: 80%;
  min-width: 8rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemOther .userIndexDashboardTicketsShowItemOtherData .userIndexDashboardTicketsFile {
  background: white;
  border-radius: 10px;
  margin-bottom: 1rem;
  max-width: 12rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemOther .userIndexDashboardTicketsShowItemOtherData .userIndexDashboardTicketsFile a {
  padding: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  grid-gap: 1rem;
  align-items: center;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemOther .userIndexDashboardTicketsShowItemOtherData .userIndexDashboardTicketsFile a h4 {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemOther .userIndexDashboardTicketsShowItemOtherData .userIndexDashboardTicketsFile a svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #475569;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemOther .userIndexDashboardTicketsShowItemOtherData p {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.7;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemOther .userIndexDashboardTicketsShowItemOtherData h5 {
  color: #475569;
  opacity: 0.7;
  text-align: right;
  font-size: 0.6rem;
  font-weight: 300;
  margin-top: 0.5rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowItems .userIndexDashboardTicketsShowItem .userIndexDashboardTicketsShowItemOther .userIndexDashboardTicketsShowItemOtherData::before {
  border-bottom: 0 !important;
  border-right: 10px solid transparent !important;
  content: "";
  position: absolute;
  bottom: 0.05rem;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-top: 20px solid #F4F5F8;
  border-right: 10px solid transparent;
  transform: rotate(85deg);
  left: -0.9rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowSend {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  background: #f9f9f9;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowSend textarea {
  padding: 0.8rem;
  background: transparent;
  color: #475569;
  outline-style: none;
  height: 3.5rem;
  resize: none;
  font-size: 0.7rem;
  font-weight: 300;
  margin-left: 0.5rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowSend i,
.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowSend .linkButton {
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-left: 1rem;
  position: relative;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowSend i svg,
.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowSend .linkButton svg {
  width: 2rem;
  height: 2rem;
  fill: #475569;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowSend i .fileTooltip,
.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowSend .linkButton .fileTooltip {
  padding: 0.3rem;
  width: 8rem;
  background: #475569;
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
  position: absolute;
  left: 0;
  bottom: 135%;
  border-radius: 0.5rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowSend i .fileTooltip:before,
.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowSend .linkButton .fileTooltip:before {
  position: absolute;
  left: 0.2rem;
  top: 95%;
  content: "";
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #475569 transparent;
  transform: rotate(180deg);
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: rgba(0, 0, 0, 0.5);
  display: grid;
  align-items: center;
  justify-content: center;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData {
  width: 98%;
  margin: auto;
  background: white;
  border-radius: 5px;
  overflow: hidden;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #DFE3E7;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataTitle span {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataTitle i {
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataTitle i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #475569;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataItem {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  padding: 1rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataItem .userIndexDashboardTicketsShowBuyDataItemPic img {
  width: 7rem;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataItem .userIndexDashboardTicketsShowBuyDataItemSubject h3 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataItem .userIndexDashboardTicketsShowBuyDataItemSubject .userIndexDashboardTicketsShowBuyDataSubjectItem {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 0.5rem;
  justify-content: right;
  margin: 1rem 0;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataItem .userIndexDashboardTicketsShowBuyDataItemSubject .userIndexDashboardTicketsShowBuyDataSubjectItem label {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataItem .userIndexDashboardTicketsShowBuyDataItemSubject .userIndexDashboardTicketsShowBuyDataSubjectItem span {
  font-size: 0.8rem;
  font-weight: 500;
  color: #e3342f;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataItem .userIndexDashboardTicketsShowBuyDataItemSubject .userIndexDashboardTicketsShowBuyDataSubjectItem .active {
  color: #00C58D;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataItem .userIndexDashboardTicketsShowBuyDataItemSubject .userIndexDashboardTicketsShowBuyDataItemSubjectAbility {
  display: grid;
  grid-template-columns: 1fr;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataItem .userIndexDashboardTicketsShowBuyDataItemSubject .userIndexDashboardTicketsShowBuyDataItemSubjectAbility label {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataItem .userIndexDashboardTicketsShowBuyDataItemSubject .userIndexDashboardTicketsShowBuyDataItemSubjectAbility ul {
  display: grid;
  grid-template-columns: 1fr;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataItem .userIndexDashboardTicketsShowBuyDataItemSubject .userIndexDashboardTicketsShowBuyDataItemSubjectAbility ul li {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: right;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataItem .userIndexDashboardTicketsShowBuyDataItemSubject .userIndexDashboardTicketsShowBuyDataItemSubjectAbility ul li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: #475569;
  border-radius: 100%;
  display: inline-block;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataItemFail {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  padding: 2rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataItemFail i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataItemFail i svg {
  width: 3rem;
  height: 3rem;
  fill: #475569;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketsShow .userIndexDashboardTicketsShowBuy .userIndexDashboardTicketsShowBuyData .userIndexDashboardTicketsShowBuyDataItemFail h3 {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
  text-align: center;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketEmpty {
  background: white;
  height: 35rem;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 5px;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketEmpty .userIndexDashboardTicketEmptyItem {
  position: absolute;
  top: 40%;
  right: 0;
  width: 100%;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketEmpty .userIndexDashboardTicketEmptyItem i {
  display: grid;
  align-items: center;
  justify-content: center;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketEmpty .userIndexDashboardTicketEmptyItem i svg {
  width: 4rem;
  height: 4rem;
  fill: #475569;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketEmpty .userIndexDashboardTicketEmptyItem h3 {
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}

.allUserIndexTicket .userIndexDashboardTickets .userIndexDashboardTicketsShows .userIndexDashboardTicketEmpty .userIndexDashboardTicketEmptyItem p {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
}

@media screen and (max-width: 1000px) {
  .allUserIndexTicket .userIndexDashboardTickets {
    grid-template-columns: 1fr;
  }
}

.allSendFile {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.allSendFile .allSendFileItems {
  width: 60%;
  margin: auto;
  margin-top: 5rem;
  background: white;
  padding: 1rem;
  border-radius: 5px;
  position: relative;
}

.allSendFile .allSendFileItems .allSendFileClose {
  position: absolute;
  top: -1rem;
  left: -1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 100%;
  background: white;
  cursor: pointer;
}

.allSendFile .allSendFileItems .allSendFileClose svg {
  width: 2rem;
  height: 2rem;
  fill: #475569;
}

.allSendFile .allSendFileItems .allSendFileUpload {
  border-radius: 0.4rem;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr;
  cursor: pointer;
  grid-gap: 1rem;
  border: 2px dashed #DFE3E7;
  background: white;
  position: relative;
}

.allSendFile .allSendFileItems .allSendFileUpload .vue-dropzone {
  border-radius: 0.3rem;
  color: black;
  border: 0;
}

.allSendFile .allSendFileItems .allSendFileUpload .vue-dropzone span {
  margin-right: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: black;
}

.allSendFile .allSendFileItems .allSendFileUpload .vue-dropzone .dropzone-custom-content {
  text-align: center;
}

.allSendFile .allSendFileItems .allSendFileUpload .vue-dropzone .dropzone-custom-title {
  margin-top: 0;
  color: #f6993f;
  font-family: "irsans";
  font-style: normal;
  font-weight: 900;
  font-size: 1rem;
}

.allSendFile .allSendFileItems .allSendFileUpload .vue-dropzone .subtitle {
  margin-top: 1rem;
  color: #475569;
  font-family: "irsans";
  font-style: normal;
  font-weight: 500;
  font-size: 0.8rem;
}

.allSendFile .allSendFileItems .allSendFileData .allSendFileDataItem {
  margin-top: 1rem;
  color: #475569;
  font-size: 0.8rem;
  font-weight: 300;
}

.allSellerIndex {
  margin: auto;
  margin-top: 10rem;
}

.allSellerIndex .widgetItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 2rem;
  margin: 2rem 0;
}

.allSellerIndex .widgetItems .widgetItem {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.allSellerIndex .widgetItems .widgetItem .widgetIcon {
  position: relative;
  background: rgba(255, 255, 255, 0.4);
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 5rem;
  display: grid;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.allSellerIndex .widgetItems .widgetItem .widgetIcon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
}

.allSellerIndex .widgetItems .widgetItem .widgetSubject {
  position: relative;
  z-index: 5;
}

.allSellerIndex .widgetItems .widgetItem .widgetSubject h4 {
  font-size: 1rem;
  color: white;
  font-weight: 300;
}

.allSellerIndex .widgetItems .widgetItem .widgetSubject h5 {
  font-size: 0.9rem;
  color: #fff;
  font-weight: 300;
  margin-top: 0.5rem;
  letter-spacing: 0.1px;
}

.allSellerIndex .widgetItems .widgetItem:first-child {
  background: linear-gradient(to left, #f6993f 0%, #e3342f 100%);
}

.allSellerIndex .widgetItems .widgetItem:nth-child(2) {
  background: linear-gradient(to left, #31A945 0%, #31A991 100%);
}

.allSellerIndex .widgetItems .widgetItem:nth-child(3) {
  background: linear-gradient(to left, #3C31A9 0%, #31A5A9 100%);
}

.allSellerIndex .productItems {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
}

.allSellerIndex .productItems .productItem {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.allSellerIndex .productItems .productItem h3 {
  font-size: 1.1rem;
  font-weight: 500;
  color: #475569;
  padding: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.allSellerIndex .productItems .productItem table {
  width: 100%;
  box-shadow: 0 0 0 0;
}

.allSellerIndex .productItems .productItem table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  grid-gap: 1rem;
  margin: 0.5rem;
}

.allSellerIndex .productItems .productItem table tr td span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

@media screen and (max-width: 800px) {
  .allSellerIndex .widgetItems {
    display: block;
  }

  .allSellerIndex .widgetItems .widgetItem {
    margin-bottom: 2rem;
  }

  .allSellerIndex .productItems {
    display: block;
  }

  .allSellerIndex .productItems .productItem {
    margin-bottom: 1rem;
  }
}

.sellerHeader {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: white;
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.05);
  z-index: 999;
}

.sellerHeader .sellerHeaderBlock {
  margin: auto;
}

.sellerHeader .sellerHeaderBlock .topHeaderSeller {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #EEEEEE;
}

.sellerHeader .sellerHeaderBlock .topHeaderSeller h5 {
  font-size: 1.3rem;
  font-weight: 500;
  color: black;
}

.sellerHeader .sellerHeaderBlock .topHeaderSeller a img {
  width: 7rem;
  height: 2rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.sellerHeader .sellerHeaderBlock .botHeader {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  padding: 0.5rem 0;
  position: relative;
}

.sellerHeader .sellerHeaderBlock .botHeader .userLogo {
  position: relative;
  display: grid;
  align-items: center;
}

.sellerHeader .sellerHeaderBlock .botHeader .userLogo .dz-message,
.sellerHeader .sellerHeaderBlock .botHeader .userLogo .dropzone {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  display: grid !important;
}

.sellerHeader .sellerHeaderBlock .botHeader .userLogo .dz-preview.dz-image-preview {
  visibility: hidden !important;
  position: absolute !important;
}

.sellerHeader .sellerHeaderBlock .botHeader .userLogo i {
  display: grid;
  align-items: center;
  justify-items: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 1rem;
  height: 1rem;
  background: white;
  border-radius: 100%;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.sellerHeader .sellerHeaderBlock .botHeader .userLogo i svg {
  width: 0.6rem;
  height: 0.6rem;
  fill: #b3b3b3;
}

.sellerHeader .sellerHeaderBlock .botHeader .userLogo img {
  width: 3rem;
  height: 3rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 100%;
  border: 2px solid #f6993f;
}

.sellerHeader .sellerHeaderBlock .botHeader .allSellerIndexListsItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1rem, auto));
  justify-content: right;
  grid-gap: 1rem;
  align-items: center;
}

.sellerHeader .sellerHeaderBlock .botHeader .allSellerIndexListsItems .allSellerIndexListsItem a {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
  padding: 1rem;
  display: grid;
}

.sellerHeader .sellerHeaderBlock .botHeader .allSellerIndexListsItems .allSellerIndexListsItem .active {
  background: #fff4f1;
  border-bottom: 3px solid #f6993f;
}

.sellerHeader .sellerHeaderBlock .botHeader h1 {
  font-size: 2rem;
  font-weight: 500;
  color: white;
  position: absolute;
  bottom: calc(100% + 1rem);
  right: 12rem;
}

@media screen and (max-width: 800px) {
  .sellerHeader .sellerHeaderBlock .userLists {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .sellerHeader .sellerHeaderBlock .userLists h1 {
    right: 8rem;
    font-size: 1.2rem;
  }

  .sellerHeader .sellerHeaderBlock .userLists .userLogo {
    margin-top: -4rem;
    margin-right: 1rem;
  }

  .sellerHeader .sellerHeaderBlock .userLists .userLogo img {
    width: 6rem;
    height: 6rem;
  }

  .sellerHeader .sellerHeaderBlock .userLists .allSellerIndexListsItems {
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  }

  .sellerHeader .sellerHeaderBlock .userLists .allSellerIndexListsItems .allSellerIndexListsItem a {
    font-size: 0.75rem;
    padding: 0.5rem;
    text-align: center;
  }

  .sellerHeader .sellerHeaderBlock .botHeader {
    display: block;
    padding: 0.8rem 0;
  }

  .sellerHeader .sellerHeaderBlock .botHeader .userLogo {
    position: absolute;
    top: 0;
    opacity: 0;
    visibility: hidden;
  }

  .sellerHeader .sellerHeaderBlock .botHeader .allSellerIndexListsItems {
    grid-gap: 0.5rem;
  }

  .sellerHeader .sellerHeaderBlock .botHeader .allSellerIndexListsItems .allSellerIndexListsItem a {
    font-size: 0.6rem;
    padding: 0;
  }

  .sellerHeader .sellerHeaderBlock .botHeader h1 {
    font-size: 1rem;
    position: absolute;
    top: 0;
    opacity: 0;
    visibility: hidden;
  }
}

.allLuckySpinner {
  margin: auto;
  margin-top: 9rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  text-align: center;
  padding: 1rem;
}

.allLuckySpinner h1 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 1rem;
}

.allLuckySpinner h3 {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 1rem;
}

.allLuckySpinner h3 span {
  color: #00C58D;
}

.allLuckySpinner p {
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.8;
  margin-bottom: 1rem;
}

.allLuckySpinner h4 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 1rem;
}

.allLuckySpinner h4 span {
  color: #e3342f;
}

.allLuckySpinner .fw-btn__btn {
  cursor: pointer;
}

.allPaginatePanel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2px, auto));
  grid-gap: 0.5rem;
  justify-content: left;
}

.allPaginatePanel .pageItem .pageItemLabel a {
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-size: 0.8rem;
  height: 34px;
  min-width: 34px;
  text-decoration: none;
  transition: 0.3s cubic-bezier(0, 0, 0.2, 1);
  width: auto;
  cursor: pointer;
  background: white;
  color: rgba(0, 0, 0, 0.87);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.allPaginatePanel .pageItem .pageItemLabel a svg {
  width: 0.5rem;
  height: 0.5rem;
}

.allPaginatePanel .pageItem .pageItemLabel a:hover {
  background: #6cb2eb;
  color: #fff;
}

.allPaginatePanel .pageItem .pageItemLabel .active {
  background: #5A8DEE;
  color: #fff;
}

.allPaginatePanel .pageItem .pageItemLabel .active:hover {
  background: #5A8DEE;
}

.showFastContainer {
  position: fixed;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  z-index: 10001;
  overflow-y: scroll;
}

.showFastContainer .showFastContainerIndex {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  width: 80%;
  height: 80%;
  margin: auto;
  background: white;
  border-radius: 0.3rem;
  overflow-y: scroll;
  position: relative;
}

.showFastContainer .showFastContainerIndex .showFastContainerPic {
  width: 100%;
  height: 100%;
  padding: 1rem;
  border-left: 1px solid #e1e0ea;
}

.showFastContainer .showFastContainerIndex .showFastContainerPic .zoom-on-hover {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems {
  padding: 1rem;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem {
  border-bottom: 1px solid #e1e0ea;
  padding-bottom: 1rem;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerItemsTitle {
  border-bottom: 1px solid #e1e0ea;
  padding-bottom: 1rem;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerItemsTitle h3 {
  text-align: right;
  max-width: 90%;
  font-size: 1rem;
  line-height: 25px;
  color: #475569;
  font-weight: 700;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  height: 3rem;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerItemsBody {
  margin-top: 1rem;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerItemsBody p {
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  line-height: 32px;
  text-align: right;
  color: #475569;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  opacity: 0.7;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerItemAddCart {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 1rem;
  justify-content: right;
  align-items: center;
  background: #f21111;
  height: 2.5rem;
  color: white;
  padding: 0 1rem;
  border-radius: 0.3rem;
  width: 10rem;
  cursor: pointer;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerItemAddCart i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerItemAddCart i svg {
  fill: white;
  width: 1rem;
  height: 1rem;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .postPriceItem {
  width: 100%;
  margin-top: 1rem;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: left;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .postPriceItem .offPrice {
  display: grid;
  justify-content: left;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .postPriceItem .offPrice s {
  font-size: 0.9rem;
  line-height: 1.692;
  font-weight: 300;
  color: #ababab;
  display: flex;
  width: 100%;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .postPriceItem h3 {
  text-align: left;
  width: 100%;
  color: #f21111;
  letter-spacing: 0;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.5;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .postPriceItem h3 span {
  font-size: 0.8rem;
  letter-spacing: 0.1px;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerPropertiesTitle {
  margin-top: 1rem;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerPropertiesTitle h3 {
  text-align: right;
  max-width: 90%;
  font-size: 0.9rem;
  line-height: 25px;
  color: #4A5F73;
  font-weight: 500;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerProperties {
  margin-bottom: 1rem;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerProperties ul {
  display: grid;
  grid-template-columns: 1fr;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerProperties ul li {
  color: #6f6f6f;
  font-size: 0.75rem;
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerProperties ul li:before {
  border-radius: 10px;
  width: 5px;
  height: 5px;
  background-color: #475569;
  content: "";
  display: inline-block;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerItemCat {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.4rem;
  align-items: center;
  margin-top: 1rem;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerItemCat label {
  font-size: 0.75rem;
  line-height: 1.833;
  color: #858585;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerItemCat ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5px, auto));
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem .showFastContainerItemCat ul li a {
  border-bottom: 1px dashed #1ca2bd;
  color: #1ca2bd;
}

.showFastContainer .showFastContainerIndex .showFastContainerItems .showFastContainerItem:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.showFastContainer .showFastContainerIndex .showFastContainerIndexClose {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  width: 2rem;
  height: 2rem;
  background: white;
  border-radius: 5rem;
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.showFastContainer .showFastContainerIndex .showFastContainerIndexClose i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.showFastContainer .showFastContainerIndex .showFastContainerIndexClose i svg {
  width: 2rem;
  height: 2rem;
}

@media screen and (max-width: 700px) {
  .showFastContainer .showFastContainerIndex {
    grid-template-columns: 1fr;
    overflow-y: scroll;
  }
}

.allShowGallery {
  background: rgba(0, 0, 0, 0.5);
  z-index: 99000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  justify-content: center;
}

.allShowGallery .panelImage {
  width: 90%;
  height: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #F0F3F7;
  overflow-y: scroll;
}

.allShowGallery .panelImage .showAllImage .topImage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 7rem;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(107, 122, 144, 0.1);
  padding: 1rem;
  position: relative;
}

.allShowGallery .panelImage .showAllImage .topImage .titleImage {
  height: 2rem;
}

.allShowGallery .panelImage .showAllImage .topImage .titleImage h3 {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.8rem;
  color: rgb(22, 31, 106);
  font-size: 1.4rem;
  font-weight: 500;
}

.allShowGallery .panelImage .showAllImage .topImage .titleImage h3 i svg {
  width: 1.5rem;
  height: 1.5rem;
}

.allShowGallery .panelImage .showAllImage .topImage .titleImage .address {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  justify-content: right;
  grid-gap: 0.3rem;
  align-items: center;
  margin-right: 1.8rem;
}

.allShowGallery .panelImage .showAllImage .topImage .titleImage .address a,
.allShowGallery .panelImage .showAllImage .topImage .titleImage .address span {
  color: rgb(22, 31, 106);
  font-weight: 200;
}

.allShowGallery .panelImage .showAllImage .topImage .buttonsImage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  grid-gap: 1rem;
  justify-content: left;
  align-items: center;
  height: 2.2rem;
}

.allShowGallery .panelImage .showAllImage .topImage .buttonsImage button {
  background: transparent;
  margin-top: 0.3rem;
}

.allShowGallery .panelImage .showAllImage .topImage .buttonsImage button svg {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0.3rem;
  font-size: 1rem;
  color: rgb(22, 31, 106);
}

.allShowGallery .panelImage .showAllImage .topImage .buttonsImage input {
  width: 15rem;
  padding: 0.2rem 0.5rem;
  background: transparent;
  border-radius: 5rem;
  font-size: 0.7rem;
  color: rgb(22, 31, 106);
  border: 1px solid #e1e0ea;
}

.allShowGallery .panelImage .showAllImage .topImage .buttonsImage .icon-plus,
.allShowGallery .panelImage .showAllImage .topImage .buttonsImage .icon-002-image-file {
  position: absolute;
  top: 82%;
  right: 85%;
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 5rem;
  background: #00AEEF;
  color: white;
  cursor: pointer;
}

.allShowGallery .panelImage .showAllImage .topImage .buttonsImage .icon-plus svg,
.allShowGallery .panelImage .showAllImage .topImage .buttonsImage .icon-002-image-file svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: white;
}

.allShowGallery .panelImage .showAllImage .botNav .images {
  padding: 1rem;
}

.allShowGallery .panelImage .showAllImage .botNav .images .itemImages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
}

.allShowGallery .panelImage .showAllImage .botNav .images .itemImages .choiceFolder {
  position: relative;
}

.allShowGallery .panelImage .showAllImage .botNav .images .itemImages .choiceFolder h4 {
  display: grid;
  justify-content: center;
  align-items: center;
  background: white;
  width: 8rem;
  border: 1px solid #e1e0ea;
  padding: 0.3rem 0;
  border-radius: 0.2rem;
  font-weight: 300;
  cursor: pointer;
}

.allShowGallery .panelImage .showAllImage .botNav .images .itemImages .choiceFolder .loader {
  display: grid;
  justify-content: center;
  width: 100%;
}

.allShowGallery .panelImage .showAllImage .botNav .images .itemImages .choiceFolder .loader img {
  border-radius: 0;
  box-shadow: 0 0 0 transparent;
  -o-object-fit: cover;
     object-fit: cover;
  width: 3rem;
  height: 3rem;
}

.allShowGallery .panelImage .showAllImage .botNav .images .itemImages .choiceFolder .slide-fade-enter-active,
.allShowGallery .panelImage .showAllImage .botNav .images .itemImages .choiceFolder .slide-fade-leave-active {
  transition: all 0.3s ease;
}

.allShowGallery .panelImage .showAllImage .botNav .images .itemImages .choiceFolder .slide-fade-enter,
.allShowGallery .panelImage .showAllImage .botNav .images .itemImages .choiceFolder .slide-fade-leave-to {
  transform: translateY(-10px);
}

.allShowGallery .panelImage .showAllImage .botNav .images .itemImages .choiceFolder ul {
  width: 8rem;
  z-index: 1000;
  position: absolute;
  top: 1.7rem;
  left: 0;
  height: 10rem;
  background: white;
  border: 1px solid #e1e0ea;
  border-top: none;
  padding: 0.5rem;
  border-radius: 0.4rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
}

.allShowGallery .panelImage .showAllImage .botNav .images .itemImages .choiceFolder ul .scroll-area {
  position: relative;
  margin: auto;
  height: 9.5rem;
  width: 7rem;
  direction: ltr;
  overflow: hidden;
}

.allShowGallery .panelImage .showAllImage .botNav .images .itemImages .choiceFolder ul .close {
  position: absolute;
  bottom: 90%;
  right: 90%;
  z-index: 200;
  padding: 0.2rem;
  background: red;
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
}

.allShowGallery .panelImage .showAllImage .botNav .images .itemImages .choiceFolder ul li {
  direction: rtl;
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: right;
  align-items: center;
  grid-gap: 0.1rem;
  color: #475569;
  cursor: pointer;
  margin-bottom: 0.3rem;
}

.allShowGallery .panelImage .showAllImage .botNav .images .itemImages .choiceFolder ul li span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 300;
}

.allShowGallery .panelImage .showAllImage .botNav .images .itemImages select {
  width: 8rem;
  font-size: 0.8rem;
  font-weight: 200;
  border: 1px solid #e1e0ea;
  background: white;
  color: #475569;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: 0.2rem;
}

.allShowGallery .panelImage .showAllImage .botNav .images .allImages {
  margin-top: 1rem;
}

.allShowGallery .panelImage .showAllImage .botNav .images .allImages ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  grid-gap: 1rem;
}

.allShowGallery .panelImage .showAllImage .botNav .images .allImages ul li {
  position: relative;
  border-radius: 0.3rem;
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.07);
  background: white;
  padding: 1rem;
  cursor: pointer;
}

.allShowGallery .panelImage .showAllImage .botNav .images .allImages ul li .subject {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 0.5rem;
  justify-content: right;
  align-items: center;
  padding: 0.2rem;
}

.allShowGallery .panelImage .showAllImage .botNav .images .allImages ul li .subject i svg {
  width: 1rem;
  height: 1rem;
  fill: #42A5F5;
}

.allShowGallery .panelImage .showAllImage .botNav .images .allImages ul li .subject span {
  font-size: 0.7rem;
  font-weight: 200;
  padding-top: 0.3rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allShowGallery .panelImage .showAllImage .botNav .images .allImages ul li img {
  width: 100%;
  height: 10rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.allShowGallery .panelImage .showAllImage .botNav .loader {
  display: grid;
  justify-content: center;
  width: 100%;
}

.allShowGallery .panelImage .showAllImage .botNav .loader img {
  border-radius: 0;
  box-shadow: 0 0 0 transparent;
  -o-object-fit: cover;
     object-fit: cover;
  width: 3rem;
  height: 3rem;
}

.allShowGallery .panelImage .showAllImage .botNav .createImage {
  position: relative;
  background: white;
  margin: 2rem;
}

.allShowGallery .panelImage .showAllImage .botNav .createImage .vue-dropzone {
  margin-top: 1rem;
  height: 100%;
  overflow-y: scroll;
  border-radius: 0.3rem;
  color: #475569;
}

.allShowGallery .panelImage .showAllImage .botNav .createImage .vue-dropzone span {
  margin-right: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.allShowGallery .panelImage .showAllImage .botNav .createImage .vue-dropzone .dropzone-custom-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.allShowGallery .panelImage .showAllImage .botNav .createImage .vue-dropzone .dropzone-custom-title {
  margin-top: 0;
  color: #00b782;
  font-family: "irsans";
  font-style: normal;
  font-weight: 900;
  font-size: 1rem;
}

.allShowGallery .panelImage .showAllImage .botNav .createImage .vue-dropzone .subtitle {
  margin-top: 1rem;
  color: #475569;
  font-family: "irsans";
  font-style: normal;
  font-weight: 500;
  font-size: 0.8rem;
}

.allCreatePost .allPostPanelTop {
  margin: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
}

.allCreatePost .allPostPanelTop h1 {
  color: #475569;
}

.allCreatePost .allPostPanelTop .allPostTitle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2px, auto));
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
}

.allCreatePost .allPostPanelTop .allPostTitle span {
  color: #475569;
  font-weight: 400;
  font-size: 0.95rem;
}

.allCreatePost .allPostPanelTop .allPostTitle a {
  color: #475569;
  font-weight: 400;
  font-size: 0.95rem;
}

.allCreatePost .allPostPanelTop .allPostTitle a:last-child {
  color: #5A8DEE;
}

.allCreatePost .allCreatePostData {
  display: grid;
  grid-template-columns: 1fr 25rem;
  grid-gap: 1rem;
  margin: 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject {
  background: white;
  border-radius: 0.3rem;
  padding: 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .errorsCreate {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  margin-bottom: 1rem;
  background: #FF5B5C;
  border-top: 1px solid #e3342f;
  color: #e3342f;
  border-radius: 0.2rem;
  padding: 0.5rem 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .errorsCreate span {
  font-size: 0.75rem;
  font-weight: 400;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemShow .allCreatePostItemTabs {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  border-bottom: 1px solid #f5f5f5;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemShow .allCreatePostItemTabs .allCreatePostItemTab button {
  color: #475569;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  background: white;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemShow .allCreatePostItemTabs .allCreatePostItemTab .active {
  border-bottom: 0;
  background: #f5f5f5;
  margin-bottom: -2px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemShow .allCreatePostItem,
.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemShow .allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemShow .allCreatePostItemBody {
  padding: 1rem;
  background: #f5f5f5;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemShow .allCreatePostItems {
  background: #f5f5f5;
  padding-top: 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemShow .allCreatePostItems p {
  color: #475569;
  font-weight: 400;
  text-align: center;
  font-size: 0.8rem;
  padding-bottom: 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemShow .allCreatePostItems .allCreatePostItem,
.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemShow .allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody,
.allPostPanel .createPostPanel .allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemShow .allCreatePostItems .allCreatePostItemBody {
  padding-top: 0;
  margin-bottom: 0;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemShow:first-child {
  margin-bottom: 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject label {
  color: #475569;
  font-weight: 500;
  font-size: 0.9rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject input {
  border: 1px solid #DFE3E7;
  padding: 0.3rem 0.5rem;
  color: #475569;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  width: 100%;
  height: 2rem;
  transition: all 0.3s ease-in-out;
}

.allCreatePost .allCreatePostData .allCreatePostSubject input:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #5A8DEE;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItem,
.allCreatePost .allCreatePostData .allCreatePostSubject .allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemBody {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  margin-bottom: 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItem textarea,
.allCreatePost .allCreatePostData .allCreatePostSubject .allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody textarea,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemBody textarea {
  border: 1px solid #DFE3E7;
  padding: 0.4rem 0.5rem;
  color: #475569;
  border-radius: 0.3rem;
  font-size: 0.7rem;
  width: 100%;
  height: 15rem;
  transition: all 0.3s ease-in-out;
  resize: vertical;
  outline: transparent;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItem textarea:focus,
.allCreatePost .allCreatePostData .allCreatePostSubject .allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody textarea:focus,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemBody textarea:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #5A8DEE;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItem .ck.ck-toolbar.ck-toolbar_grouping.ck-reset_all.ck-rounded-corners,
.allCreatePost .allCreatePostData .allCreatePostSubject .allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .ck.ck-toolbar.ck-toolbar_grouping.ck-reset_all.ck-rounded-corners,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemBody .ck.ck-toolbar.ck-toolbar_grouping.ck-reset_all.ck-rounded-corners {
  width: 99%;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItem .ck.ck-content,
.allCreatePost .allCreatePostData .allCreatePostSubject .allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .ck.ck-content,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemBody .ck.ck-content {
  border: 1px solid #DFE3E7;
  padding: 0.3rem 0.5rem;
  color: #475569;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  transition: all 0.3s ease-in-out;
  width: 99%;
  height: 15rem;
  background: white;
  direction: rtl;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItem .ck.ck-content:focus,
.allCreatePost .allCreatePostData .allCreatePostSubject .allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .ck.ck-content:focus,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemBody .ck.ck-content:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #5A8DEE;
}

@media screen and (max-width: 1000px) {
  .allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItem .ck.ck-toolbar.ck-toolbar_grouping.ck-reset_all.ck-rounded-corners,
  .allCreatePost .allCreatePostData .allCreatePostSubject .allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .ck.ck-toolbar.ck-toolbar_grouping.ck-reset_all.ck-rounded-corners,
  .allPostPanel .createPostPanel .allCreatePostItems .allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemBody .ck.ck-toolbar.ck-toolbar_grouping.ck-reset_all.ck-rounded-corners,
  .allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItem .ck.ck-content,
  .allCreatePost .allCreatePostData .allCreatePostSubject .allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .ck.ck-content,
  .allPostPanel .createPostPanel .allCreatePostItems .allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemBody .ck.ck-content {
    width: 98%;
  }
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery {
  background: white;
  margin-bottom: 1rem;
  border-radius: 0.2rem;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery .getImageItem {
  min-height: 12rem;
  border-radius: 0.4rem;
  border: 2px dashed #DFE3E7;
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  grid-template-columns: repeat(auto-fit, minmax(10rem, auto));
  grid-gap: 1rem;
  padding: 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery .getImageItem span {
  color: #494f56;
  font-size: 0.7rem;
  font-weight: 300;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery .getImageItem .getImagePic {
  position: relative;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery .getImageItem .getImagePic:hover i {
  visibility: visible;
  opacity: 1;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery .getImageItem .getImagePic i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 5rem;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  background: #cbbdbd;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery .getImageItem .getImagePic i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: black;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery .getImageItem img {
  height: 10rem;
  width: 10rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery .sendFileItem {
  border-radius: 0.4rem;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr;
  cursor: pointer;
  grid-gap: 1rem;
  border: 2px dashed #DFE3E7;
  background: white;
  margin-bottom: 1rem;
  padding: 1rem;
  margin-top: 0.5rem;
  position: relative;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery .sendFileItem .vue-dropzone {
  border-radius: 0.3rem;
  color: black;
  border: 0;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery .sendFileItem .vue-dropzone span {
  margin-right: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: black;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery .sendFileItem .vue-dropzone .dropzone-custom-content {
  text-align: center;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery .sendFileItem .vue-dropzone .dropzone-custom-title {
  margin-top: 0;
  color: #f6993f;
  font-family: "irsans";
  font-style: normal;
  font-weight: 900;
  font-size: 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery .sendFileItem .vue-dropzone .subtitle {
  margin-top: 1rem;
  color: #475569;
  font-family: "irsans";
  font-style: normal;
  font-weight: 500;
  font-size: 0.8rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery .sendFileItem .sendFileItemPic {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1rem;
  margin: auto;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery .sendFileItem .sendFileItemPic img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 7rem;
  height: 100%;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost {
  background: #F5F6F8;
  padding: 1rem;
  border-radius: 0.2rem;
  margin-bottom: 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  grid-gap: 0.5rem;
  align-items: center;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTitle i {
  cursor: pointer;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTitle i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #524c96;
  transition: all 0.3s ease-in-out;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTitle i:hover svg {
  fill: black;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable {
  display: grid;
  grid-template-columns: 1fr;
  margin: 1rem 0;
  box-shadow: 0 0 0 0;
  border-radius: 0.3rem;
  overflow: hidden;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  text-align: right;
  align-items: center;
  grid-gap: 1rem;
  background: white;
  padding: 0 1rem;
  min-height: 3.5rem;
  border-bottom: 0;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr th {
  font-weight: 300;
  color: #475569;
  font-size: 0.75rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td {
  display: grid;
  grid-template-columns: 1fr;
  color: #524c96;
  font-size: 0.7rem;
  font-weight: 200;
  overflow: hidden;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td i {
  cursor: pointer;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td i svg {
  width: 1rem;
  height: 1rem;
  fill: #524c96;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td textarea {
  border: 1px solid #DFE3E7;
  padding: 0.3rem 0.5rem;
  color: #475569;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  width: 100%;
  height: 2rem;
  transition: all 0.3s ease-in-out;
  resize: vertical;
  height: 2rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td textarea:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #5A8DEE;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td *,
.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td *:before,
.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td *:after {
  box-sizing: border-box;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td body {
  font-family: sans-serif;
  padding: 60px 20px;
}

@media (min-width: 600px) {
  .allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td body {
    padding: 60px;
  }
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td .range-slider {
  margin: 60px 0 0 0%;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td .range-slider {
  width: 100%;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td .range-slider__range {
  -webkit-appearance: none;
  width: calc(100% - (73px));
  height: 10px;
  border-radius: 5px;
  background: #d7dcdf;
  outline: none;
  padding: 0;
  margin: 0;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td .range-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  -webkit-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td .range-slider__range::-webkit-slider-thumb:hover {
  background: #4dc0b5;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td .range-slider__range:active::-webkit-slider-thumb {
  background: #4dc0b5;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td .range-slider__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  -moz-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td .range-slider__range::-moz-range-thumb:hover {
  background: #4dc0b5;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td .range-slider__range:active::-moz-range-thumb {
  background: #4dc0b5;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td .range-slider__range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #4dc0b5;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td .range-slider__value {
  display: inline-block;
  position: relative;
  width: 60px;
  color: #fff;
  line-height: 20px;
  text-align: center;
  border-radius: 3px;
  background: #2c3e50;
  padding: 5px 10px;
  margin-left: 8px;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td .range-slider__value:after {
  position: absolute;
  top: 8px;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-right: 7px solid #2c3e50;
  border-bottom: 7px solid transparent;
  content: "";
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td ::-moz-range-track {
  background: #d7dcdf;
  border: 0;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td input::-moz-focus-inner,
.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td input::-moz-focus-outer {
  border: 0;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr:nth-child(2) {
  border-top: 2px solid #DFE3E7;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityPostToolTip {
  background: rgba(255, 0, 0, 0.1);
  padding: 0 0.5rem;
  border-radius: 5px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
  height: 3rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityPostToolTip i svg {
  fill: #e3342f;
  width: 1.2rem;
  height: 1.2rem;
  animation: arrow-anim 1.5s ease infinite;
  margin-bottom: 0;
}

@keyframes arrow-anim {
  0% {
    margin-bottom: 0;
  }

  10% {
    margin-bottom: 0.5rem;
  }

  30% {
    transform: rotate(-40deg);
  }

  50% {
    transform: rotate(40deg);
  }

  60% {
    transform: rotate(-40deg);
  }

  70% {
    transform: rotate(-20deg);
  }

  80% {
    transform: rotate(0);
    margin-bottom: 1rem;
  }

  100% {
    margin-bottom: 0.5rem;
  }
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityPostToolTip p {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
  height: 3rem;
  display: grid;
  align-items: center;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost:nth-last-child(6) .abilityTable tr {
  grid-template-columns: 1fr 1fr auto;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost:nth-last-child(5) .abilityTable tr {
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost:nth-last-child(4) .abilityTable tr {
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost:nth-last-child(3) .abilityTable tr {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost:nth-last-child(2) .abilityTable tr {
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .hidden {
  position: absolute;
  top: 0;
  opacity: 0;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .button {
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  background-color: #5A8DEE;
  color: white;
  box-shadow: 0 2px 4px 0 rgba(90, 141, 238, 0.5);
  transition: all 0.3s ease-in-out;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .button:hover {
  background-color: blue;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail {
  box-shadow: 0 10px 15px -5px rgba(172, 172, 172, 0.1);
  margin-bottom: 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItemsTitle {
  background: white;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  color: #475569;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.8rem;
  letter-spacing: 0.5px;
  border-radius: 0.3rem;
  cursor: pointer;
  z-index: 10;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItemsTitle svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: #475569;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .slide-fade-enter-active,
.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .slide-fade-leave-active {
  transition: all 0.3s ease-in-out;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .slide-fade-enter,
.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .slide-fade-leave-to {
  transform: translateY(-25px);
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems {
  background: white;
  width: 100%;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  padding: 0.5rem;
  margin-top: -0.3rem;
  z-index: 2;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  margin-top: 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem label {
  color: #524c96;
  font-weight: 500;
  font-size: 0.8rem;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem input {
  border: 1px solid #DFE3E7;
  padding: 0.4rem 0.5rem;
  color: #475569;
  border-radius: 0.3rem;
  font-size: 0.7rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
  resize: vertical;
  outline: transparent;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem input:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #5A8DEE;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCategoryPanel {
  position: relative;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCategoryPanel .categoryShow {
  border: 1.4px solid #DFE3E7;
  display: grid;
  grid-template-columns: 1fr;
  padding: 0.4rem 0.5rem 0.4rem 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCategoryPanel .categoryShow h4 {
  color: #524c96;
  font-size: 0.7rem;
  font-weight: 400;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCategoryPanel ul {
  position: absolute;
  top: 94%;
  right: 0;
  width: 100%;
  display: grid;
  background: white;
  grid-template-columns: 1fr;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  overflow: hidden;
  border: 1.4px solid #DFE3E7;
  border-top: 0;
  z-index: 80;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCategoryPanel ul .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 15rem;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCategoryPanel ul li {
  direction: rtl;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.4rem;
  padding-right: 1rem;
  color: #524c96;
  font-size: 0.65rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  height: 2rem;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCategoryPanel ul li:hover {
  background: rgb(22, 31, 106);
  color: white;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes {
  position: relative;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .taxShow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1.4px solid #f5f5f5;
  border-radius: 0.3rem;
  cursor: pointer;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .taxShow h4 {
  color: #524c96;
  font-size: 0.7rem;
  font-weight: 300;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .taxShow ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, auto));
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .taxShow ul li {
  position: relative;
  padding: 0.4rem;
  background: #E2EBFA;
  border-radius: 0.2rem;
  color: #475569;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .taxShow ul li i {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  justify-content: center;
  align-items: center;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .taxShow ul li i svg {
  fill: #475569;
  width: 0.7rem;
  height: 0.7rem;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .taxShow ul li span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.65rem;
  font-weight: 300;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .taxShow svg {
  width: 0.65rem;
  height: 0.65rem;
  fill: #475569;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .showAllTaxes {
  position: absolute;
  top: 94%;
  right: 0;
  width: 100%;
  display: grid;
  background: white;
  grid-template-columns: 1fr;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  direction: ltr;
  overflow: hidden;
  border: 1.4px solid #f5f5f5;
  border-top: 0;
  z-index: 80;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .showAllTaxes .searchTax {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  cursor: auto;
  height: 3rem;
  border-bottom: 2px solid #F6F6F6;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .showAllTaxes .searchTax input {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transition: all 0.3s ease-in-out;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .showAllTaxes .searchTax input:focus {
  border: 1px solid #5A8DEE;
  box-shadow: 0 0 0 0;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .showAllTaxes .searchTax button {
  width: 2.3rem;
  border: 1px solid #f5f5f5;
  border-right: 0;
  font-size: 1.1rem;
  background: transparent;
  border-radius: 0.3rem;
  font-weight: 300;
  transition: all 0.3s ease-in-out;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  height: 100%;
  color: #524c96;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .showAllTaxes .searchTax button:hover {
  background: #5A8DEE;
  color: white;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .showAllTaxes .searchTax:hover {
  background: white;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .showAllTaxes .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 15rem;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .showAllTaxes li {
  direction: rtl;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.4rem;
  color: #524c96;
  font-size: 0.75rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  height: 2rem;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .showAllTaxes li:hover {
  background: #5A8DEE;
  color: white;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .timerItem {
  border-radius: 0.2rem;
  overflow: hidden;
  position: relative;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .timerItem input {
  height: 2rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .timerItem i {
  display: grid;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 1rem;
  bottom: 0;
  top: 0;
  margin: auto;
  cursor: pointer;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .timerItem i svg {
  width: 1rem;
  height: 1rem;
  fill: #524c96;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  grid-gap: 0.5rem;
  padding: 0 0.5rem;
  border-radius: 0.4rem;
  height: 3rem;
  color: #475569;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 300;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox],
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=radio] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox]:after,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox]:checked,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox]:disabled,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox]:disabled:checked,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox]:disabled + label,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=radio]:disabled + label {
    cursor: not-allowed;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox]:hover:not(:checked):not(:disabled),
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox]:focus,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox]:not(.switch),
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=radio]:not(.switch) {
    width: 21px;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox]:not(.switch):after,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox]:not(.switch):checked,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=radio]:not(.switch):checked {
    --o: 1;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox] + label,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=radio] + label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=radio] {
    border-radius: 50%;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=radio]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=radio]:checked {
    --s: .5;
  }
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=number] {
  border: 1px solid #DFE3E7;
  width: 3rem;
  padding: 0.3rem;
  color: #475569;
  border-radius: 0.3rem;
  font-size: 0.7rem;
  transition: all 0.3s ease-in-out;
  resize: vertical;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allCreatePostDetailItemData input[type=number]:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #5A8DEE;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem:first-child {
  margin-top: 0;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.4rem;
  height: 3rem;
  color: #524c96;
  font-weight: 500;
  font-size: 0.8rem;
  margin-top: 1rem;
  cursor: pointer;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox],
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=radio] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox]:after,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox]:checked,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox]:disabled,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox]:disabled:checked,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox]:disabled + label,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=radio]:disabled + label {
    cursor: not-allowed;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox]:hover:not(:checked):not(:disabled),
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox]:focus,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox]:not(.switch),
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=radio]:not(.switch) {
    width: 21px;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox]:not(.switch):after,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox]:not(.switch):checked,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=radio]:not(.switch):checked {
    --o: 1;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox] + label,
  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=radio] + label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=radio] {
    border-radius: 50%;
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=radio]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }

  .allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItemSuggest input[type=radio]:checked {
    --s: .5;
  }
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail:nth-child(3) {
  position: sticky;
  top: 5.5rem;
  margin-bottom: 0;
}

@media screen and (max-width: 1000px) {
  .allCreatePost .allCreatePostData,
  .allCreatePost .allPostPanelTop {
    display: block;
  }

  .allCreatePost .allCreatePostData h1,
  .allCreatePost .allPostPanelTop h1 {
    margin-bottom: 1rem;
  }
}

.allShowPostPanel .allShowPostPanelTopTitle {
  margin: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
}

.allShowPostPanel .allShowPostPanelTopTitle h1 {
  color: #475569;
}

.allShowPostPanel .allShowPostPanelTopTitle .allShowPostPanelTitle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2px, auto));
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
}

.allShowPostPanel .allShowPostPanelTopTitle .allShowPostPanelTitle span {
  color: #475569;
  font-weight: 400;
  font-size: 0.95rem;
}

.allShowPostPanel .allShowPostPanelTopTitle .allShowPostPanelTitle a {
  color: #475569;
  font-weight: 400;
  font-size: 0.95rem;
}

.allShowPostPanel .allShowPostPanelTopTitle .allShowPostPanelTitle a:last-child {
  color: #5A8DEE;
}

.allShowPostPanel .allShowPostPanelTop {
  margin: 1rem;
  padding: 1rem;
  background: white;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  border-radius: 0.5rem;
}

.allShowPostPanel .allShowPostPanelTop .allShowPostPanelPic {
  width: 15rem;
  height: 12rem;
}

.allShowPostPanel .allShowPostPanelTop .allShowPostPanelPic img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.allShowPostPanel .allShowPostPanelTop .allShowPostPanelTopItems .allShowPostPanelTopTitle h1 {
  font-size: 1.1rem;
  font-weight: 400;
  color: #535353;
}

.allShowPostPanel .allShowPostPanelTop .allShowPostPanelTopItems .postPrice {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.4rem;
  align-items: center;
  margin-top: 0.5rem;
}

.allShowPostPanel .allShowPostPanelTop .allShowPostPanelTopItems .postPrice .postPriceItem {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: left;
}

.allShowPostPanel .allShowPostPanelTop .allShowPostPanelTopItems .postPrice .postPriceItem .offPrice {
  display: grid;
  justify-content: left;
}

.allShowPostPanel .allShowPostPanelTop .allShowPostPanelTopItems .postPrice .postPriceItem .offPrice s {
  font-size: 1rem;
  line-height: 1.692;
  font-weight: 300;
  color: #ababab;
  display: flex;
  width: 100%;
}

.allShowPostPanel .allShowPostPanelTop .allShowPostPanelTopItems .postPrice .postPriceItem h3 {
  text-align: left;
  width: 100%;
  color: #e3342f;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.5;
}

.allShowPostPanel .allShowPostPanelTop .allShowPostPanelTopItems .postPrice .postPriceItem h3 span {
  font-size: 1rem;
  letter-spacing: 0.1px;
}

.allShowPostPanel .allShowPostPanelTop .allShowPostPanelTopItems .allShowPostPanelTopInfo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0.5rem;
}

.allShowPostPanel .allShowPostPanelTop .allShowPostPanelTopItems .allShowPostPanelTopInfo .allShowPostPanelTopItem {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 2rem;
}

.allShowPostPanel .allShowPostPanelTop .allShowPostPanelTopItems .allShowPostPanelTopInfo .allShowPostPanelTopItem label,
.allShowPostPanel .allShowPostPanelTop .allShowPostPanelTopItems .allShowPostPanelTopInfo .allShowPostPanelTopItem span {
  font-size: 0.9rem;
  font-weight: 300;
  color: #535353;
}

.allShowPostPanel .allShowPostPanelTop .allShowPostPanelTopItems .allShowPostPanelTopInfo .allShowPostPanelTopItem span {
  font-weight: 500;
}

.allShowPostPanel .allShowPostPanelTop .allShowPostPanelTopItems .allShowPostPanelTopInfo .allShowPostPanelTopItem svg {
  width: 1.1rem;
  height: 1.1rem;
}

@media screen and (max-width: 1000px) {
  .allShowPostPanel .allShowPostPanelTop {
    grid-template-columns: 1fr;
  }

  .allShowPostPanel .allShowPostPanelTop .allShowPostPanelPic {
    width: 100%;
  }

  .allShowPostPanel .allShowPostPanelTop .allShowPostPanelTopItems .allShowPostPanelTopInfo {
    grid-template-columns: 1fr;
  }
}

.allShowPostPanel .allShowPostPanelComment {
  margin: 1rem;
  margin-top: 0;
  background: white;
  border-radius: 0.5rem;
}

.allShowPostPanel .allShowPostPanelPays {
  margin: 1rem;
  margin-top: 0;
  background: white;
  border-radius: 0.5rem;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}

.allShowPostPanel .allShowPostPanelPays label {
  color: #858585;
  font-size: 1rem;
  font-weight: 500;
  padding: 1rem;
  border-right: 3px solid #5A8DEE;
  border-top-right-radius: 0.5rem;
}

.allShowPostPanel .allShowPostPanelPays .allTableContainer {
  margin: 1rem;
}

.allShowPostPanel .allShowPostPanelPays .allTableContainer .paginate:first-child {
  margin-bottom: 1rem;
}

.allShowPostPanel .allShowPostPanelPays .allTableContainer .paginate:last-child {
  margin-top: 1rem;
}

.allPostPanel {
  margin: 1rem;
}

.allPostPanel .allPostPanelTop {
  margin: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
}

.allPostPanel .allPostPanelTop h1 {
  color: #475569;
}

.allPostPanel .allPostPanelTop .allPostTitle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2px, auto));
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
}

.allPostPanel .allPostPanelTop .allPostTitle span {
  color: #475569;
  font-weight: 400;
  font-size: 0.95rem;
}

.allPostPanel .allPostPanelTop .allPostTitle a {
  color: #475569;
  font-weight: 400;
  font-size: 0.95rem;
}

.allPostPanel .allPostPanelTop .allPostTitle a:last-child {
  color: #5A8DEE;
}

@media screen and (max-width: 1000px) {
  .allPostPanel .allPostPanelTop {
    display: block;
  }

  .allPostPanel .allPostPanelTop h1 {
    margin-bottom: 1rem;
  }
}

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

.allPostPanel .slide-fade-enter {
  transform: translateX(50px);
}

.allPostPanel .paginate {
  margin-top: 1rem;
}

.allPostPanel .allTable .allTopTable {
  display: grid;
  grid-template-columns: 1fr auto;
  background: white;
  border-radius: 0.3rem;
  padding: 1rem;
}

.allPostPanel .allTable .allTopTable .allTopTableItem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.allPostPanel .allTable .allTopTable .allTopTableItem .button {
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  background-color: #5A8DEE;
  color: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(90, 141, 238, 0.5);
  transition: all 0.3s ease-in-out;
}

.allPostPanel .allTable .allTopTable .allTopTableItem .button:hover {
  background-color: #2C6DE9;
}

.allPostPanel .allTable .allTopTable .allTopTableItem .button:nth-child(1) {
  background-color: #FF5B5C;
  color: #FFFFFF;
}

.allPostPanel .allTable .allTopTable .allTopTableItem .button:nth-child(1):hover {
  background-color: #e3342f;
}

.allPostPanel .allTable .allTopTable .filterItems {
  position: relative;
}

.allPostPanel .allTable .allTopTable .filterItems .filterTitle {
  display: grid;
  cursor: pointer;
  grid-template-columns: auto auto;
  justify-content: center;
  grid-gap: 0.5rem;
  align-items: center;
  background-color: #A3AFBD;
  box-shadow: 0 2px 4px 0 rgba(163, 175, 189, 0.5);
  padding: 0.6rem 1rem;
  transition: all 0.3s ease-in-out;
  border-radius: 0.3rem;
  color: #FFFFFF;
}

.allPostPanel .allTable .allTopTable .filterItems .filterTitle svg {
  width: 1rem;
  height: 1rem;
  fill: white;
}

.allPostPanel .allTable .allTopTable .filterItems .filterTitle:hover {
  background: #394C62;
  box-shadow: 0 4px 12px 0 rgba(163, 175, 189, 0.6) !important;
}

.allPostPanel .allTable .allTopTable .filterItems .bounce-enter-active {
  animation: bounce-in 0.3s;
}

.allPostPanel .allTable .allTopTable .filterItems .bounce-leave-active {
  animation: bounce-in 0.3s reverse;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent {
  position: absolute;
  top: 120%;
  left: 0;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  background: white;
  border-radius: 0.2rem;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 8px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #fff transparent;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem {
  display: grid;
  grid-gap: 0.5rem;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem label {
  color: #475569;
  font-weight: 300;
  font-size: 0.7rem;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem .allCategoryPanel {
  position: relative;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem .allCategoryPanel .categoryShow {
  border: 1.4px solid #DFE3E7;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0.4rem 0.5rem 0.4rem 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem .allCategoryPanel .categoryShow h4 {
  color: #524c96;
  font-size: 0.7rem;
  font-weight: 400;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem .allCategoryPanel .categoryShow i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem .allCategoryPanel .categoryShow i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #475569;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem .allCategoryPanel ul {
  position: absolute;
  top: 94%;
  right: 0;
  width: 100%;
  background: white;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  max-height: 15rem;
  direction: ltr;
  overflow: hidden;
  border: 1.4px solid #DFE3E7;
  border-top: 0;
  z-index: 80;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem .allCategoryPanel ul .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  height: 15rem;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem .allCategoryPanel ul li {
  direction: rtl;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.4rem;
  padding-right: 1rem;
  color: #524c96;
  font-size: 0.65rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  height: 2rem;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem .allCategoryPanel ul li:hover {
  background: rgb(22, 31, 106);
  color: white;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem .allTicketPanelTitleDate {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.2rem;
  overflow: hidden;
  width: 15rem;
  position: relative;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem .allTicketPanelTitleDate input {
  width: auto;
  padding: 0.3rem;
  height: 1.9rem;
  font-size: 0.7rem;
  border: 0;
  box-shadow: 0 0 0 0;
  background: transparent;
  border-radius: 0;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem .allTicketPanelTitleDate i {
  position: absolute;
  left: 0.3rem;
  top: 0.5rem;
  cursor: pointer;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem .allTicketPanelTitleDate i svg {
  width: 0.5rem;
  height: 0.5rem;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem input {
  border: 1px solid #DFE3E7;
  padding: 0.4rem 0.5rem;
  color: #475569;
  border-radius: 0.3rem;
  font-size: 0.7rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
  outline: transparent;
}

.allPostPanel .allTable .allTopTable .filterItems .filterContent .filterContentItem input:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #5A8DEE;
}

@media screen and (max-width: 1000px) {
  .allPostPanel .allTable .allTopTable {
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
  }

  .allPostPanel .allTable .allTopTable .allTopTableItem button {
    font-size: 0.5rem;
  }
}

.allPostPanel .allTable .allTableContainer {
  background: white;
  margin: 1rem 0;
  border-radius: 10px;
}

.allPostPanel .allTable .allTableContainer .postItem {
  padding: 1rem;
  border-bottom: 1px solid #DFE3E7;
  cursor: pointer;
}

.allPostPanel .allTable .allTableContainer .postItem .postTop {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 1rem;
}

.allPostPanel .allTable .allTableContainer .postItem .postTop .postPic img {
  width: 100%;
  height: 5rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allPostPanel .allTable .allTableContainer .postItem .postTop .postTitle h3 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}

.allPostPanel .allTable .allTableContainer .postItem .postTop .postTitle h3 span {
  background: rgba(190, 0, 0, 0.8);
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  font-size: 0.7rem;
}

.allPostPanel .allTable .allTableContainer .postItem .postTop .postTitle h3 .count {
  background: rgba(0, 190, 0, 0.5);
}

.allPostPanel .allTable .allTableContainer .postItem .postTop .postOptions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5rem;
  align-items: center;
}

.allPostPanel .allTable .allTableContainer .postItem .postTop .postOptions a,
.allPostPanel .allTable .allTableContainer .postItem .postTop .postOptions i {
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: #f5f5f5;
  border-radius: 5px;
  cursor: pointer;
}

.allPostPanel .allTable .allTableContainer .postItem .postTop .postOptions a svg,
.allPostPanel .allTable .allTableContainer .postItem .postTop .postOptions i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #606265;
}

.allPostPanel .allTable .allTableContainer .postItem .postBot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 0.5rem;
  background: #f5f5f5;
  border-radius: 5px;
  padding: 1rem;
}

.allPostPanel .allTable .allTableContainer .postItem .postBot ul {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: right;
  grid-gap: 2rem;
  align-items: center;
}

.allPostPanel .allTable .allTableContainer .postItem .postBot ul li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allPostPanel .allTable .allTableContainer .postItem .postBot ul li span {
  font-size: 0.85rem;
  font-weight: 300;
  color: #606265;
}

.allPostPanel .allTable .allTableContainer .postItem .postBot ul li span:last-child {
  color: rgba(0, 0, 0, 0.8);
}

.allPostPanel .allTable .allTableContainer .postItem .postBot ul li div {
  display: block;
}

.allPostPanel .allTable .allTableContainer .postItem .postBot ul li div span span:last-child {
  color: red;
}

.allPostPanel .allTable .allTableContainer .postItem .postBot ul li div span:before {
  content: ",";
  padding: 0 0.5rem;
}

.allPostPanel .allTable .allTableContainer .postItem .postBot ul li div span:first-child:before {
  content: "";
  padding: 0;
}

.allPostPanel .allTable .allTableContainer .postItem .postBot ul li div .count:last-child {
  color: green;
}

.allPostPanel .allTable .allTableContainer .postItem .postBot i {
  display: grid;
  align-items: center;
}

.allPostPanel .allTable .allTableContainer .postItem .postBot i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #475569;
}

.allPostPanel .allTable .allTableContainer .postItem .postBot i svg:nth-child(2) {
  visibility: hidden;
  position: absolute;
  bottom: 100rem;
}

.allPostPanel .allTable .allTableContainer .postItem:last-child {
  border-bottom: 0;
}

@media screen and (max-width: 700px) {
  .allPostPanel .allTable .allTableContainer .postItem .postTop,
  .allPostPanel .allTable .allTableContainer .postItem .postBot {
    display: block;
  }

  .allPostPanel .allTable .allTableContainer .postItem .postTop .postTitle ul,
  .allPostPanel .allTable .allTableContainer .postItem .postBot .postTitle ul {
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
  }

  .allPostPanel .allTable .allTableContainer .postItem .postTop ul,
  .allPostPanel .allTable .allTableContainer .postItem .postBot ul {
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
  }
}

.allPostPanel .createPostPanel {
  background: white;
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 0.3rem;
  box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12);
}

.allPostPanel .createPostPanel .errorsCreate {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  margin-bottom: 1rem;
  background: #FF5B5C;
  border-top: 1px solid #e3342f;
  color: #e3342f;
  border-radius: 0.2rem;
  padding: 0.5rem 1rem;
}

.allPostPanel .createPostPanel .errorsCreate span {
  font-size: 0.75rem;
  font-weight: 400;
}

.allPostPanel .createPostPanel p {
  font-size: 0.9rem;
  color: #524c96;
  font-weight: 500;
  margin-bottom: 2rem;
}

.allPostPanel .createPostPanel .errorsCreate {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  margin-bottom: 1rem;
  background: #FF5B5C;
  border-top: 1px solid #e3342f;
  color: #e3342f;
  border-radius: 0.2rem;
  padding: 0.5rem 1rem;
}

.allPostPanel .createPostPanel .errorsCreate span {
  font-size: 0.75rem;
  font-weight: 400;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody {
  display: grid;
  grid-template-columns: 10rem 1fr;
  margin-bottom: 2rem;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem label,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody label {
  color: #475569;
  font-weight: 500;
  font-size: 0.9rem;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem input,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody input,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem textarea,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody textarea {
  border: 1.4px solid #DFE3E7;
  padding: 0.3rem 0.5rem;
  color: #475569;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  transition: all 0.3s ease-in-out;
  width: 100%;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem input:focus,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody input:focus,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem textarea:focus,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody textarea:focus {
  border: 1.4px solid rgb(22, 31, 106);
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem .timerItem,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .timerItem {
  position: relative;
  overflow: hidden;
  border-radius: 0.3rem;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem .timerItem i,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .timerItem i {
  height: 100%;
  position: absolute;
  left: 1rem;
  top: 0;
  display: grid;
  align-items: center;
  cursor: pointer;
  bottom: 0;
  margin: auto;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem .timerItem i svg,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .timerItem i svg {
  width: 1rem;
  height: 1rem;
  fill: #475569;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem textarea,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody textarea {
  height: 10rem;
  resize: vertical;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem .ck.ck-toolbar.ck-toolbar_grouping.ck-reset_all.ck-rounded-corners,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .ck.ck-toolbar.ck-toolbar_grouping.ck-reset_all.ck-rounded-corners {
  width: 99.7%;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem .ck.ck-content,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .ck.ck-content {
  border: 1.4px solid #DFE3E7;
  padding: 0.3rem 0.5rem;
  color: #475569;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  transition: all 0.3s ease-in-out;
  width: 100%;
  width: 99.7%;
  height: 15rem;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem .ck.ck-content:focus,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .ck.ck-content:focus {
  border: 1.4px solid rgb(22, 31, 106);
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem .allCategoryPanel,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .allCategoryPanel {
  position: relative;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem .allCategoryPanel .categoryShow,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .allCategoryPanel .categoryShow {
  border: 1.4px solid #DFE3E7;
  display: grid;
  grid-template-columns: 1fr;
  padding: 0.3rem 0.5rem 0.3rem 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem .allCategoryPanel .categoryShow h4,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .allCategoryPanel .categoryShow h4 {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 400;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem .allCategoryPanel ul,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .allCategoryPanel ul {
  position: absolute;
  top: 94%;
  right: 0;
  width: 100%;
  display: grid;
  background: white;
  grid-template-columns: 1fr;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  overflow: hidden;
  border: 1.4px solid #DFE3E7;
  border-top: 0;
  z-index: 80;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem .allCategoryPanel ul .scroll-area,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .allCategoryPanel ul .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  height: 15rem;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem .allCategoryPanel ul li,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .allCategoryPanel ul li {
  direction: rtl;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.4rem;
  padding-right: 1rem;
  color: #524c96;
  font-size: 0.75rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  height: 2rem;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem .allCategoryPanel ul li:hover,
.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .allCategoryPanel ul li:hover {
  background: rgb(22, 31, 106);
  color: white;
}

.allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody {
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
}

@media screen and (max-width: 1000px) {
  .allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItem,
  .allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody {
    grid-template-columns: 1fr;
  }

  .allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .ck.ck-toolbar.ck-toolbar_grouping.ck-reset_all.ck-rounded-corners,
  .allPostPanel .createPostPanel .allCreatePostItems .allCreatePostItemBody .ck.ck-content {
    width: 98%;
  }
}

.allPostPanel .createPostPanel .allCreatePostItems .sendGallery {
  background: white;
  margin-bottom: 1rem;
  border-radius: 0.2rem;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}

.allPostPanel .createPostPanel .allCreatePostItems .sendGallery .getImageItem {
  min-height: 12rem;
  border-radius: 0.4rem;
  border: 2px dashed #DFE3E7;
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  grid-template-columns: repeat(auto-fit, minmax(10rem, auto));
  grid-gap: 1rem;
  padding: 1rem;
}

.allPostPanel .createPostPanel .allCreatePostItems .sendGallery .getImageItem span {
  color: #494f56;
  font-size: 0.7rem;
  font-weight: 300;
}

.allPostPanel .createPostPanel .allCreatePostItems .sendGallery .getImageItem .getImagePic {
  position: relative;
}

.allPostPanel .createPostPanel .allCreatePostItems .sendGallery .getImageItem .getImagePic:hover i {
  visibility: visible;
  opacity: 1;
}

.allPostPanel .createPostPanel .allCreatePostItems .sendGallery .getImageItem .getImagePic i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 5rem;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  background: #cbbdbd;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.allPostPanel .createPostPanel .allCreatePostItems .sendGallery .getImageItem .getImagePic i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: black;
}

.allPostPanel .createPostPanel .allCreatePostItems .sendGallery .getImageItem img {
  height: 10rem;
  width: 10rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.allPostPanel .createPostPanel .buttons {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: left;
  grid-gap: 1rem;
  overflow: hidden;
}

.allPostPanel .createPostPanel .buttons .buttonOption {
  position: relative;
  overflow: hidden;
}

.allPostPanel .createPostPanel .buttons .buttonOption .overs {
  position: absolute;
  transition: all 0.5s ease-in-out;
  left: -15rem;
  width: 15rem;
  display: grid;
  grid-template-columns: auto auto;
  cursor: pointer;
  justify-content: space-between;
  visibility: hidden;
  opacity: 0;
  align-items: center;
  height: 3rem;
}

.allPostPanel .createPostPanel .buttons .buttonOption .overs .over {
  background: rgba(255, 255, 255, 0.4);
  width: 1rem;
  height: 3rem;
}

.allPostPanel .createPostPanel .buttons .buttonOption button {
  background: #5A8DEE;
}

.allPostPanel .createPostPanel .buttons .buttonOption:hover .overs {
  left: 11rem;
  visibility: visible;
  opacity: 1;
}

.allPostPanel .createPostPanel .buttons button {
  font-size: 0.9rem;
  color: white;
  font-weight: 400;
  padding: 0.5rem 1.5rem;
  border-radius: 0.3rem;
  background: #e3342f;
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.2);
}

.allPostPanel .allShowFastPost {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
}

.allPostPanel .allShowFastPost .allShowFastPostPanel {
  background-color: rgb(247, 247, 247);
  width: 30rem;
  height: 100%;
  position: relative;
  overflow-y: scroll;
}

.allPostPanel .allShowFastPost .allShowFastPostPanel .allShowFastPostPic {
  margin-bottom: 1rem;
}

.allPostPanel .allShowFastPost .allShowFastPostPanel .allShowFastPostPic img {
  width: 100%;
  height: 25rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.allPostPanel .allShowFastPost .allShowFastPostPanel .allShowFastPostItems {
  background: white;
  margin: 1rem;
  margin-top: 0;
  padding: 1rem;
  border-radius: 0.3rem;
}

.allPostPanel .allShowFastPost .allShowFastPostPanel .allShowFastPostItems .allShowFastPostItemsTitle h3 {
  font-size: 1rem;
  color: #475569;
  font-weight: 600;
}

.allPostPanel .allShowFastPost .allShowFastPostPanel .allShowFastPostItems .allShowFastPostItem {
  padding: 1rem 0;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  grid-gap: 1rem;
}

.allPostPanel .allShowFastPost .allShowFastPostPanel .allShowFastPostItems .allShowFastPostItem:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.allPostPanel .allShowFastPost .allShowFastPostPanel .allShowFastPostItems .allShowFastPostItem label {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
  text-align: right;
}

.allPostPanel .allShowFastPost .allShowFastPostPanel .allShowFastPostItems .allShowFastPostItem h4 {
  font-size: 0.8rem;
  text-align: left;
  font-weight: 400;
  color: #475569;
}

.allPostPanel .allShowFastPost .allShowFastPostPanel .allShowFastPostItems .allShowFastPostProperties ul li {
  margin-top: 0.5rem;
}

.allPostPanel .allShowFastPost .allShowFastPostPanel .allShowFastPostItems .allShowFastPostProperties ul li span {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  font-weight: 500;
  color: #524c96;
  font-size: 0.7rem;
}

.allPostPanel .allShowFastPost .allShowFastPostPanel .allShowFastPostItems .allShowFastPostProperties ul li span:before {
  border-radius: 10px;
  width: 7px;
  height: 7px;
  background-color: #475569;
  content: "";
  display: inline-block;
  margin-left: 10px;
}

.allPostPanel .allShowFastPost .allShowFastPostPanel .buttons {
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-bottom: 1rem;
}

.allPostPanel .allShowFastPost .allShowFastPostPanel .buttons button {
  background: #5A8DEE;
  border-radius: 0.3rem;
  padding: 0.5rem;
  font-size: 0.7rem;
  font-weight: 400;
  color: white;
}

@media screen and (max-width: 1000px) {
  .allPostPanel .allShowFastPost .allShowFastPostPanel {
    width: 100%;
  }
}

.allChargeIndex .chargeWidgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
}

.allChargeIndex .chargeWidgets .WidgetItem {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.allChargeIndex .chargeWidgets .WidgetItem .WidgetIcon {
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
}

.allChargeIndex .chargeWidgets .WidgetItem .WidgetIcon svg {
  width: 4rem;
  height: 4rem;
}

.allChargeIndex .chargeWidgets .WidgetItem .WidgetSubject {
  position: relative;
  z-index: 5;
}

.allChargeIndex .chargeWidgets .WidgetItem .WidgetSubject h4 {
  font-size: 0.9rem;
  color: #475569;
  font-weight: 500;
}

.allChargeIndex .chargeWidgets .WidgetItem .WidgetSubject h5 {
  font-size: 0.85rem;
  color: #475569;
  opacity: 0.7;
  font-weight: 300;
  margin-top: 0.5rem;
}

.allChargeIndex .chargeWidgets .WidgetItem .WidgetSubject h5 span {
  letter-spacing: 0.2px;
}

.allChargeIndex .chargePrice {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-top: 1rem;
}

.allChargeIndex .chargePrice .right {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allChargeIndex .chargePrice .right span {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 0.5px;
}

.allChargeIndex .chargePrice .right input {
  border: 1px solid #e1e0ea;
  padding: 0.3rem 0.5rem;
  color: #475569;
  border-radius: 5px;
  font-size: 0.8rem;
  height: 2.2rem;
  width: 20rem;
  transition: all 0.3s ease-in-out;
}

.allChargeIndex .chargePrice .right input:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #5A8DEE;
}

.allChargeIndex .chargePrice .right a {
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  background: #00C58D;
  padding: 0.3rem 1rem;
  border-radius: 5px;
  height: 2.2rem;
}

.allChargeIndex .chargePrice .left h4 {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
}

table {
  display: grid;
  grid-template-columns: 1fr;
  background: white;
  margin-top: 1rem;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

table tr div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  grid-gap: 0.5rem;
  align-items: center;
  border-bottom: 1px solid #DFE3E7;
  min-height: 3.5rem;
  padding: 0.5rem 0;
}

table tr div:nth-child(2) {
  visibility: hidden;
  position: absolute;
  bottom: 100rem;
}

table tr .active {
  background: #F2F4F4;
}

table tr th {
  font-weight: 700;
  color: #475569;
  font-size: 0.8rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-content: center;
}

table tr th svg {
  fill: #475569;
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
}

table tr td {
  font-weight: 300;
  font-size: 0.8rem;
  text-align: center;
  color: #475569;
}

table tr td svg {
  fill: #475569;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

table tr td img {
  width: 2.5rem;
  height: 2.5rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5rem;
}

table tr td .activeStatus {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
}

table tr td .activeStatus:before {
  border-radius: 10px;
  width: 10px;
  height: 10px;
  background-color: #00C58D;
  content: "";
  display: inline-block;
  margin-left: 5px;
}

table tr td .ul {
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
}

table tr td span {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  justify-content: center;
  align-items: center;
}

table tr td span i:nth-child(2) {
  margin: 0 0.7rem;
}

table tr td a {
  display: grid;
  align-items: center;
}

table tr td a svg {
  margin-left: 0.5rem;
}

table tr td .unActive {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
}

table tr td .unActive:before {
  border-radius: 10px;
  width: 10px;
  height: 10px;
  background-color: #FC5C63;
  content: "";
  display: inline-block;
  margin-left: 5px;
}

table tr td:first-child i svg {
  fill: #475569;
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
}

table tr td:first-child i:nth-child(2) {
  position: absolute;
  top: 0;
  visibility: hidden;
  opacity: 0;
}

@media screen and (max-width: 1000px) {
  table tr th,
  table tr td {
    font-size: 0.5rem;
  }

  table tr th svg,
  table tr td svg {
    width: 0.6rem;
    height: 0.6rem;
  }

  table tr th:first-child i svg,
  table tr td:first-child i svg {
    width: 0.6rem;
    height: 0.6rem;
  }

  table tr th .unActive:before,
  table tr th .activeStatus:before,
  table tr td .unActive:before,
  table tr td .activeStatus:before {
    width: 5px;
    height: 5px;
  }

  table tr th img,
  table tr td img {
    width: 1rem;
    height: 1rem;
  }
}

table tr:first-child div {
  border-bottom: 2px solid #DFE3E7;
}

table tr:last-child div {
  border-bottom: 0;
}

.comparePostsContainer .comparePostsContainerCount {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: #f21111;
  padding: 0.5rem 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  color: white;
  font-weight: 300;
  font-size: 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
  z-index: 200;
}

.comparePostsContainer .comparePostsContainerIndex {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems {
  width: 95%;
  height: 90%;
  margin: auto;
  background: white;
  border-radius: 0.3rem;
  overflow-y: scroll;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 0;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr div {
  min-height: auto;
  padding: 0;
  border-bottom: 0;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr th {
  position: relative;
  padding: 1rem;
  border-left: 1px solid #EAEAEA;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr th h5 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #475569;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr th .comparePostsContainerItemsDelete {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 100;
  width: 1rem;
  height: 1rem;
  border-radius: 5rem;
  background: white;
  min-height: auto;
  padding: 0;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr th .comparePostsContainerItemsDelete i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr th .comparePostsContainerItemsDelete i svg {
  width: 1rem;
  height: 1rem;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr th .comparePostsContainerItemsTitle h4 {
  text-align: right;
  max-width: 99%;
  font-size: 0.7rem;
  line-height: 25px;
  color: #4A5F73;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  height: 3.5rem;
  overflow: hidden;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr th .comparePostsContainerItemsAddCart {
  background: #f21111;
  padding: 0.3rem 0.5rem;
  border-radius: 0.3rem;
  text-align: center;
  color: white;
  cursor: pointer;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr td {
  padding: 0.5rem;
  border-left: 1px solid #EAEAEA;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr td h4 {
  font-size: 0.9rem;
  font-weight: 700;
  text-align: right;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr td ul li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  grid-gap: 1rem;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr td ul li:before {
  border-radius: 10px;
  width: 5px;
  height: 5px;
  background-color: #475569;
  content: "";
  display: inline-block;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr td span {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5px, auto));
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  line-height: 32px;
  text-align: center;
  color: #535353;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr:first-child {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr:first-child th {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  padding: 0.5rem;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr:first-child th .comparePostsContainerItemsClose {
  width: 2rem;
  height: 2rem;
  background: white;
  visibility: visible;
  position: relative;
  min-height: auto;
  padding: 0;
  border-radius: 5rem;
  display: grid;
  justify-content: center;
  align-items: center;
  bottom: auto;
  cursor: pointer;
  z-index: 100;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr:first-child th .comparePostsContainerItemsClose i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr:first-child th .comparePostsContainerItemsClose i svg {
  width: 2rem;
  height: 2rem;
  fill: #475569;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr:nth-child(odd) {
  background: #EAEAEA;
  padding: 0.5rem;
}

.comparePostsContainer .comparePostsContainerIndex .comparePostsContainerItems table tr:nth-child(2) div {
  position: relative;
  bottom: auto;
  visibility: visible;
}

.allPopUp {
  background: rgba(0, 0, 0, 0.5);
  z-index: 4000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}

.allPopUp .allPopUpIndex {
  width: 50%;
  margin: auto;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 0.4rem;
  overflow: hidden;
}

.allPopUp .allPopUpIndex .top {
  background: #f5f5f5;
  border-bottom: 2px solid #e1e0ea;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: #00C58D;
}

.allPopUp .allPopUpIndex .description {
  font-size: 1rem;
  text-align: center;
  color: #475569;
  font-weight: 300;
  padding: 1rem;
}

@media screen and (max-width: 800px) {
  .allPopUp .allPopUpIndex {
    width: 98%;
    display: block;
  }
}