@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: absolute;
  visibility: hidden;
}

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

@media screen and (max-width: 800px) {
  body {
    padding-top: 6rem;
  }
}

body .width {
  width: 70%;
}

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

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

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

.allHeaderHome {
  background: #fff;
  transition: all 0.3s ease-in-out;
  position: relative;
  z-index: 900;
}

.allHeaderHome .headerBlock {
  margin: auto;
  position: relative;
}

.allHeaderHome .headerBlock .headerTop {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 1rem;
  position: relative;
  z-index: 10;
  background: white;
}

.allHeaderHome .headerBlock .headerTop .logo {
  position: relative;
}

.allHeaderHome .headerBlock .headerTop .logo img {
  width: 10rem;
  height: 7rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allHeaderHome .headerBlock .headerTop .left {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 1rem;
  height: 7rem;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader {
  border-radius: 5rem;
  background: linear-gradient(to left, #F8F9FB 50%, #FFF4F1 100%);
  height: 3rem;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  cursor: text;
  padding: 0 1rem;
  height: 3rem;
  position: relative;
  z-index: 901;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader label input {
  background: transparent;
  width: 25rem;
  font-weight: 300;
  color: #475569;
  transition: all 0.3s ease-in-out;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader label button {
  display: grid;
  align-items: center;
  background: transparent;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader label button svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #F9AB3B;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader ul {
  z-index: 900;
  position: absolute;
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.2);
  background: #fff;
  left: -6px;
  top: -8px;
  width: calc(100% + 12px);
  padding-top: 53px;
  padding-bottom: 10px;
  border-radius: 10px;
  transition: opacity 0.2s, visibility;
  padding-right: 1rem;
  padding-left: 1rem;
  opacity: 0;
  visibility: hidden;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader ul li {
  border-top: 1px solid #f2f2f2;
  padding: 0.5rem;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader ul li a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 1rem;
  align-items: center;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader ul li a .pic {
  width: auto;
  height: auto;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader ul li a .pic img {
  width: 3rem;
  height: 3rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader ul li a .subject h3 {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader ul li a .subject h5 {
  font-size: 0.75rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader ul li a .price {
  color: black;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.1px;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader:focus-within {
  border-radius: 10px;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader:focus-within label {
  border: 2px solid #F9AB3B;
  border-radius: 10px;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader:focus-within input {
  width: 40rem;
}

.allHeaderHome .headerBlock .headerTop .left .searchHeader:focus-within ul {
  opacity: 1;
  visibility: visible;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 1rem;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .user {
  position: relative;
  margin-right: 1rem;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .user .userItems {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: left;
  background: linear-gradient(to left, #FFF4F1 50%, #F8F9FB 100%);
  border-radius: 5rem;
  grid-gap: 1rem;
  padding: 0 0.5rem;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .user .userItems .name {
  display: grid;
  align-items: center;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .user .userItems .name h3 {
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
  max-width: 7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .user .userItems .name h4 {
  font-size: 0.7rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
  max-width: 7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .user .userItems .pic {
  height: 3rem;
  width: 3rem;
  margin-right: -1rem;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .user .userItems .pic img {
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .user .userItems .icon {
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .user .userItems .icon i {
  display: grid;
  justify-content: left;
  align-items: center;
  background: white;
  border-radius: 100%;
  width: 2.2rem;
  height: 2.2rem;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .user .userItems .icon i span {
  display: block;
  position: relative;
  width: 15px;
  height: 2px;
  background-color: #2f395f;
  border-radius: 3px;
  transition: all 0.2s ease-in-out;
  margin-left: 8px;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .user .userItems .icon i span:before,
.allHeaderHome .headerBlock .headerTop .left .headerLeft .user .userItems .icon i span:after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: #2f395f;
  border-radius: 3px;
  transition: all 0.2s ease-in-out;
  top: -6px;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .user .userItems .icon i span:after {
  top: auto;
  bottom: -6px;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .user ul {
  background: white;
  position: absolute;
  top: 112%;
  right: 0;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  border-radius: 5px;
  visibility: visible;
  opacity: 1;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 7px 5px rgba(0, 0, 0, 0.08);
  z-index: 100;
  overflow: hidden;
  margin-right: -0.5rem;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .user ul li {
  color: #475569;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .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 .headerBlock .headerTop .left .headerLeft .user ul li a i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .user ul li a i svg {
  width: 1rem;
  height: 1rem;
  fill: #475569;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .user ul li:hover {
  background: #f5f5f5;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .login {
  height: 3rem;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  grid-gap: 0.8rem;
  border: 2px solid #DFE3E7;
  border-radius: 5rem;
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  word-spacing: 1px;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .login svg {
  width: 0.6rem;
  height: 0.6rem;
  fill: #475569;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .cart {
  border-radius: 50%;
  display: grid;
  justify-content: center;
  align-items: center;
  height: 3rem;
  width: 3rem;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .cart svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: black;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .cart span {
  position: absolute;
  top: -0.2rem;
  left: -0.2rem;
  background: #F9AB3B;
  border-radius: 50%;
  min-width: 1.2rem;
  height: 1.2rem;
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #fff;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .loginRes {
  border-radius: 50%;
  display: grid;
  justify-content: center;
  align-items: center;
  height: 3rem;
  width: 3rem;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  visibility: hidden;
  opacity: 0;
}

.allHeaderHome .headerBlock .headerTop .left .headerLeft .loginRes svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: black;
}

.allHeaderHome .headerBlock .headerBot {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  position: relative;
  z-index: 5;
}

.allHeaderHome .headerBlock .headerBot .align {
  border-top: 2px solid #8F909F;
  display: grid;
  align-items: center;
}

.allHeaderHome .headerBlock .headerBot .align svg {
  width: 2rem;
  height: 2rem;
}

.allHeaderHome .headerBlock .headerBot .list {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  border-top: 2px solid #F5F5F5;
}

.allHeaderHome .headerBlock .headerBot .list ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4rem, auto));
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
}

.allHeaderHome .headerBlock .headerBot .list ul li:hover .allList {
  height: auto !important;
}

.allHeaderHome .headerBlock .headerBot .list ul li a {
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  color: #475569;
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.5px;
  border-radius: 5rem;
}

.allHeaderHome .headerBlock .headerBot .list ul li a svg {
  width: 0.6rem;
  height: 0.6rem;
  transition: all 0.3s ease-in-out;
}

.allHeaderHome .headerBlock .headerBot .list ul li a:hover {
  background: #F9AB3B;
  color: white;
}

.allHeaderHome .headerBlock .headerBot .list ul li a:hover svg {
  fill: white;
}

.allHeaderHome .headerBlock .headerBot .list ul li .allList {
  position: absolute;
  top: 75%;
  right: 0;
  width: 100%;
  height: 0;
  background: white;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1);
  border-bottom-right-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  overflow: hidden;
  display: block;
}

.allHeaderHome .headerBlock .headerBot .list ul li .allList:hover {
  height: auto !important;
}

.allHeaderHome .headerBlock .headerBot .list ul li .allList li {
  display: grid;
  grid-template-columns: auto 1fr;
}

.allHeaderHome .headerBlock .headerBot .list ul li .allList li:hover .allHeaderHomeBlockBotCategoryItemLists {
  visibility: visible;
}

.allHeaderHome .headerBlock .headerBot .list ul li .allList li:hover .allHeaderHomeBlockBotCategoryItemTitle {
  background: #fafafa;
}

.allHeaderHome .headerBlock .headerBot .list ul li .allList li:hover .allHeaderHomeBlockBotCategoryItemTitle i {
  opacity: 1;
  visibility: visible;
}

.allHeaderHome .headerBlock .headerBot .list ul li .allList li:first-child .allHeaderHomeBlockBotCategoryItemLists {
  visibility: visible;
}

.allHeaderHome .headerBlock .headerBot .list ul li .allList li .allHeaderHomeBlockBotCategoryItemTitle {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0.5rem;
  padding-right: 2rem;
  width: 15rem;
  height: 2.5rem;
  color: #475569;
  font-weight: 300;
  letter-spacing: 0.5px;
  font-size: 0.8rem;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
}

.allHeaderHome .headerBlock .headerBot .list ul li .allList li .allHeaderHomeBlockBotCategoryItemTitle:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0.5rem;
  margin: auto;
  width: 1rem;
  height: 6px;
  background: #475569;
  border-radius: 5rem;
}

.allHeaderHome .headerBlock .headerBot .list ul li .allList li .allHeaderHomeBlockBotCategoryItemTitle i {
  visibility: hidden;
  opacity: 0;
  display: grid;
  transition: all 0.3s ease-in-out;
  align-items: center;
}

.allHeaderHome .headerBlock .headerBot .list ul li .allList li .allHeaderHomeBlockBotCategoryItemTitle i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #475569;
}

.allHeaderHome .headerBlock .headerBot .list ul li .allList li .allHeaderHomeBlockBotCategoryItemLists {
  position: absolute;
  right: 15rem;
  visibility: hidden;
  top: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  background: white;
  transition: all 0s ease-in-out;
  height: 15rem;
  display: grid;
  grid-template-columns: 1fr auto;
  width: calc(100% - 15rem);
}

.allHeaderHome .headerBlock .headerBot .list ul li .allList li .allHeaderHomeBlockBotCategoryItemLists .catPic img {
  height: 12rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allHeaderHome .headerBlock .headerBot .list ul li .allList li .allHeaderHomeBlockBotCategoryItemLists ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: baseline;
}

.allHeaderHome .headerBlock .headerBot .list ul li .allList li .allHeaderHomeBlockBotCategoryItemLists ul a {
  padding: 0;
  color: #475569;
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.5px;
  border-radius: 5rem;
  margin-left: 2rem;
}

.allHeaderHome .headerBlock .headerBot .list ul li .allList li .allHeaderHomeBlockBotCategoryItemLists ul a:hover {
  background: transparent;
  color: black;
}

.allHeaderHome .headerBlock .headerBot .list ul li:hover .allList {
  visibility: visible;
  opacity: 1;
  height: 15rem;
}

.allHeaderHome .headerBlock .headerBot .list .like {
  border-radius: 50%;
  display: grid;
  justify-content: center;
  align-items: center;
  height: 3rem;
  width: 3rem;
  background: #FFF9EB;
  margin: 1rem 0;
  cursor: pointer;
}

.allHeaderHome .headerBlock .headerBot .list .like a {
  display: grid;
  align-items: center;
}

.allHeaderHome .headerBlock .headerBot .list .like svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: black;
}

.allHeaderHome .headerBlock .showCartData {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 999;
  cursor: pointer;
}

.allHeaderHome .headerBlock .showCartData .showCartItems {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background: white;
  padding: 2rem;
  width: 480px;
  box-shadow: -2px 0 5px 0 rgba(0, 0, 0, 0.1);
  overflow-y: scroll;
  cursor: auto;
}

.allHeaderHome .headerBlock .showCartData .showCartItems .titleCart {
  border-bottom: 1px solid #EEE;
  padding-bottom: 2rem;
  text-align: center;
}

.allHeaderHome .headerBlock .showCartData .showCartItems .titleCart h3 {
  font-size: 1.3rem;
  font-weight: 500;
  color: #475569;
}

.allHeaderHome .headerBlock .showCartData .showCartItems .titleCart p {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
  margin-top: 0.5rem;
}

.allHeaderHome .headerBlock .showCartData .showCartItems ul li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  border-bottom: 1px solid #EEE;
  padding: 1rem 0;
}

.allHeaderHome .headerBlock .showCartData .showCartItems ul li .cartPic img {
  width: 5rem;
  height: 5rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allHeaderHome .headerBlock .showCartData .showCartItems ul li .cartText span {
  font-weight: 500;
  color: #353535;
  font-size: 0.85rem;
  line-height: 1.8rem;
}

.allHeaderHome .headerBlock .showCartData .showCartItems ul li .cartText h4 {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
}

.allHeaderHome .headerBlock .showCartData .showCartItems ul li .cartText .price {
  font-weight: 500;
  color: #353535;
  font-size: 0.85rem;
  letter-spacing: 0.1px;
  margin-top: 0.5rem;
}

.allHeaderHome .headerBlock .showCartData .showCartItems ul li .cartText .price span {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 0;
}

.allHeaderHome .headerBlock .showCartData .showCartItems ul li i {
  display: grid;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.allHeaderHome .headerBlock .showCartData .showCartItems ul li i svg {
  fill: #475569;
  width: 1rem;
  height: 1rem;
}

.allHeaderHome .headerBlock .showCartData .showCartItems .showCartEmpty {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  padding: 1rem;
  border-bottom: 1px solid #EEE;
}

.allHeaderHome .headerBlock .showCartData .showCartItems .showCartEmpty span {
  display: grid;
  justify-content: center;
}

.allHeaderHome .headerBlock .showCartData .showCartItems .showCartEmpty span svg {
  width: 4rem;
  height: 4rem;
  fill: #FFF4F2;
}

.allHeaderHome .headerBlock .showCartData .showCartItems .loaderCheck {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 10rem;
}

.allHeaderHome .headerBlock .showCartData .showCartItems .loaderCheck svg {
  fill: #475569;
  width: 2rem;
  height: 2rem;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          animation: arrow-anim2 0.5s ease infinite;
}

@-webkit-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);
  }
}

@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 .headerBlock .showCartData .showCartItems .allPrice {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.allHeaderHome .headerBlock .showCartData .showCartItems .allPrice h4 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
}

.allHeaderHome .headerBlock .showCartData .showCartItems .allPrice h5 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #353535;
  letter-spacing: 0.1px;
  margin-top: 0.5rem;
}

.allHeaderHome .headerBlock .showCartData .showCartItems .allPrice:nth-last-child(2) h4,
.allHeaderHome .headerBlock .showCartData .showCartItems .allPrice:nth-last-child(2) h5 {
  font-size: 1.1rem;
}

.allHeaderHome .headerBlock .showCartData .showCartItems .addBtn {
  margin-top: 1rem;
}

.allHeaderHome .headerBlock .showCartData .showCartItems .addBtn a {
  display: grid;
  width: 100%;
  background: #FF8A66;
  padding: 0.5rem 1rem;
  text-align: center;
  color: white;
  font-weight: 300;
  font-size: 1rem;
  transition: all 0.3s ease-in-out;
}

.allHeaderHome .headerBlock .showCartData .showCartItems .addBtn a:hover {
  background: orangered;
}

@media screen and (max-width: 800px) {
  .allHeaderHome .headerBlock .headerTop {
    display: block;
  }

  .allHeaderHome .headerBlock .headerTop .left {
    display: block;
    height: auto;
  }

  .allHeaderHome .headerBlock .headerTop .left .searchHeader {
    margin: 1rem 0;
  }

  .allHeaderHome .headerBlock .headerTop .left .searchHeader label input {
    width: auto;
  }

  .allHeaderHome .headerBlock .headerTop .left .searchHeader:focus-within input {
    width: auto;
  }

  .allHeaderHome .headerBlock .headerTop .left .headerLeft {
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  .allHeaderHome .headerBlock .headerTop .left .headerLeft .login {
    position: absolute;
    visibility: hidden;
    opacity: 0;
  }

  .allHeaderHome .headerBlock .headerTop .left .headerLeft .loginRes {
    position: relative;
    visibility: visible;
    opacity: 1;
  }

  .allHeaderHome .headerBlock .headerTop .logo img {
    height: 4rem;
    width: 100%;
  }

  .allHeaderHome .headerBlock .headerBot .list {
    grid-template-columns: auto;
    justify-content: left;
  }

  .allHeaderHome .headerBlock .headerBot .list ul {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    top: 0;
  }

  .allHeaderHome .headerBlock .showCartData .showCartItems {
    width: 290px;
    padding: 1rem;
  }

  .allHeaderHome .headerBlock .showCartData .showCartItems .allPrice:nth-last-child(2) h4 {
    font-size: 0.8rem;
  }

  .allHeaderHome .headerBlock .showCartData .showCartItems ul li .cartPic a img {
    width: 4rem;
    height: 4rem;
  }

  .allHeaderHome .headerBlock .showCartData .showCartItems ul li .cartText span {
    font-size: 0.7rem;
  }
}

.allHeaderHome .categoryHeaderResponsive {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  transition: all 0.3s ease-in-out;
  background: white;
  width: 80%;
  z-index: 900;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.25);
  overflow: scroll;
  opacity: 0;
  visibility: hidden;
}

.allHeaderHome .categoryHeaderResponsive .title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: 55px;
  border-bottom: 1px solid #ebebeb;
}

.allHeaderHome .categoryHeaderResponsive .title span {
  color: black;
  font-weight: 700;
  font-size: 1rem;
  padding: 0 1rem;
}

.allHeaderHome .categoryHeaderResponsive .title i {
  border-right: 1px solid #ebebeb;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 100%;
}

.allHeaderHome .categoryHeaderResponsive .title i svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: #999;
}

.allHeaderHome .categoryHeaderResponsive .title i svg:hover {
  fill: black;
}

.allHeaderHome .categoryHeaderResponsive .allCats li .allCatsTitle {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: 55px;
  border-bottom: 1px solid #ebebeb;
}

.allHeaderHome .categoryHeaderResponsive .allCats li .allCatsTitle a {
  color: #475569;
  font-weight: 300;
  font-size: 0.85rem;
  padding: 0 1rem;
}

.allHeaderHome .categoryHeaderResponsive .allCats li .allCatsTitle i {
  border-right: 1px solid #ebebeb;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 100%;
}

.allHeaderHome .categoryHeaderResponsive .allCats li .allCatsTitle i svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: #999;
}

.allHeaderHome .categoryHeaderResponsive .allCats li .allCatsTitle i svg:hover {
  fill: black;
}

.allHeaderHome .categoryHeaderResponsive .allCats li .allCatsList {
  background: #f7f7f7;
}

.allHeaderHome .categoryHeaderResponsive .allCats li .allCatsList li ul {
  background: white;
}

.allHeaderHome .categoryHeaderResponsive .allCats li .allCatsList li ul li {
  margin-right: 1rem;
  background: #f7f7f7;
  border-right: 1px solid #ebebeb;
}

@media screen and (max-width: 800px) {
  .allHeaderHome .categoryHeaderResponsive {
    opacity: 1;
    visibility: visible;
  }
}

.allFooterIndex {
  background: white;
  padding: 6rem 0;
  padding-bottom: 2rem;
  box-shadow: inset 0 50px 100px rgba(0, 0, 0, 0.02);
  margin-top: 2rem;
}

.allFooterIndex .blockFooter {
  margin: auto;
}

.allFooterIndex .blockFooter .topFooter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 4rem;
}

.allFooterIndex .blockFooter .topFooter .title h2 {
  font-size: 1.2rem;
  font-weight: 500;
  color: #000;
}

.allFooterIndex .blockFooter .topFooter .title h2 span {
  color: #F9AB3B;
}

.allFooterIndex .blockFooter .topFooter .title h3 {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  margin-top: 0.5rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  position: relative;
}

.allFooterIndex .blockFooter .topFooter .title h3:before {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 4rem;
  height: 3px;
  background: #F1F1F2;
}

.allFooterIndex .blockFooter .topFooter .right {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 2rem;
  border-bottom: 2px solid #F5F3FC;
  padding-bottom: 4rem;
}

.allFooterIndex .blockFooter .topFooter .right .iconRec svg {
  width: 3rem;
  height: 6rem;
}

.allFooterIndex .blockFooter .topFooter .right .rightData p {
  line-height: 2rem;
  font-weight: 300;
  color: #8c8c8c;
  font-size: 0.8rem;
}

.allFooterIndex .blockFooter .topFooter .right .rightData .data {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 4rem;
  margin-top: 2rem;
}

.allFooterIndex .blockFooter .topFooter .right .rightData .data .socialItems {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
}

.allFooterIndex .blockFooter .topFooter .right .rightData .data .socialItems i {
  display: grid;
  align-items: center;
}

.allFooterIndex .blockFooter .topFooter .right .rightData .data .socialItems i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #E7EBEE;
}

.allFooterIndex .blockFooter .topFooter .right .rightData .data .phone {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
}

.allFooterIndex .blockFooter .topFooter .right .rightData .data .phone i {
  display: grid;
  align-items: center;
}

.allFooterIndex .blockFooter .topFooter .right .rightData .data .phone i svg {
  width: 1.5rem;
  height: 1.5rem;
}

.allFooterIndex .blockFooter .topFooter .right .rightData .data .phone h4 {
  font-size: 1.5rem;
  font-weight: 500;
  color: #EE232B;
  letter-spacing: 1px;
}

.allFooterIndex .blockFooter .topFooter .left {
  border-bottom: 2px solid #F9AB3B;
}

.allFooterIndex .blockFooter .topFooter .left .images {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 2rem;
}

.allFooterIndex .blockFooter .topFooter .left .images img {
  width: 100%;
  height: 10rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allFooterIndex .blockFooter .mainFooter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  justify-content: space-between;
  grid-gap: 1rem;
  align-items: center;
  padding: 3rem 0;
  border-bottom: 2px solid #F5F3FC;
}

.allFooterIndex .blockFooter .mainFooter .mainItem i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allFooterIndex .blockFooter .mainFooter .mainItem i svg {
  width: 3rem;
  height: 3rem;
}

.allFooterIndex .blockFooter .mainFooter .mainItem h4 {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
}

.allFooterIndex .blockFooter .catFooter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-gap: 2rem;
  padding: 3rem 0;
}

.allFooterIndex .blockFooter .catFooter .catItem h3 {
  font-size: 1rem;
  font-weight: 300;
  color: black;
}

.allFooterIndex .blockFooter .catFooter .catItem ul li {
  margin-top: 1rem;
}

.allFooterIndex .blockFooter .catFooter .catItem ul li a {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
}

.allFooterIndex .blockFooter .botFooter {
  margin-top: 1rem;
  padding: 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #5a5a5a;
  background: #FFF9EB;
  border-radius: 5rem;
  text-align: center;
}

@media screen and (max-width: 800px) {
  .allFooterIndex .blockFooter .topFooter {
    display: block;
  }

  .allFooterIndex .blockFooter .topFooter .right {
    display: block;
    margin-bottom: 1rem;
  }

  .allFooterIndex .blockFooter .topFooter .right .iconRec {
    position: absolute;
    visibility: hidden;
  }

  .allFooterIndex .blockFooter .topFooter .right .rightData .data .phone h4 {
    font-size: 1rem;
  }

  .allFooterIndex .blockFooter .topFooter .left {
    padding-bottom: 1rem;
  }

  .allFooterIndex .blockFooter .catFooter {
    text-align: center;
  }
}

.allIndexHome {
  margin-top: 12.5rem;
}

.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;
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 0.4rem;
  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: white;
  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 .allDownloadApp .downloadApp {
    width: 90%;
  }
}

.allSliderAd {
  margin: auto;
  margin-top: 4rem;
}

.allSliderAd .item {
  position: relative;
}

.allSliderAd .item .hooper {
  height: auto;
  position: relative;
  border-radius: 40px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  display: grid;
}

.allSliderAd .item .hooper .hooper-navigation.is-rtl .hooper-next {
  left: -1.8rem;
}

.allSliderAd .item .hooper .hooper-navigation.is-rtl .hooper-prev {
  right: -1.9rem;
}

@media screen and (max-width: 800px) {
  .allSliderAd .item .hooper .hooper-navigation.is-rtl .hooper-next {
    left: 0;
  }

  .allSliderAd .item .hooper .hooper-navigation.is-rtl .hooper-prev {
    right: 0;
  }
}

.allSliderAd .item .hooper .hooper-navigation.is-rtl button svg {
  background: white;
  width: 2rem;
  height: 5rem;
  border-radius: 5rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  fill: #475569;
}

@media screen and (min-width: 800px) {
  .allSliderAd .item .hooper .hooper-list .hooper-pagination {
    bottom: 1rem;
  }

  .allSliderAd .item .hooper .hooper-list .hooper-pagination .hooper-indicators {
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 5rem;
  }

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

  .allSliderAd .item .hooper .hooper-list .hooper-pagination .hooper-indicators li:last-child {
    margin-left: 0;
  }

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

  .allSliderAd .item .hooper .hooper-list .hooper-pagination .hooper-indicators .hooper-indicator.is-active {
    background: #F9AB3B;
    color: #F9AB3B;
  }

  .allSliderAd .item .hooper .hooper-list .hooper-pagination .hooper-indicators .hooper-indicator.is-active span {
    width: 1.1rem;
    height: 0.7rem;
    background: #F9AB3B;
    color: #F9AB3B;
  }
}

.allSliderAd .item .hooper .hooper-list .hooper-track .hooper-slide {
  border-radius: 40px;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.allSliderAd .item .hooper .hooper-list .hooper-track .hooper-slide a {
  position: relative;
}

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

.allSliderAd .item .hooper .hooper-list .hooper-track .hooper-slide a img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 800px) {
  .allSliderAd .item .hooper .hooper-list .hooper-track .hooper-slide {
    border-radius: 10px;
  }
}

.allSliderAd .item .adList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  align-items: center;
  grid-gap: 2rem;
  margin-top: 2rem;
  z-index: 10;
  position: relative;
}

.allSliderAd .item .adList li {
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.allSliderAd .item .adList li a {
  position: relative;
}

.allSliderAd .item .adList li a img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.allSliderAd .item .pattern {
  position: absolute;
  left: -4rem;
  bottom: -2rem;
  z-index: 1;
}

.allSliderAd .item .pattern svg {
  width: 10rem;
  height: 10rem;
}

@media screen and (max-width: 800px) {
  .allSliderAd .item .pattern {
    left: 0;
    visibility: hidden;
  }

  .allSliderAd .item .adList {
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
  }

  .allSliderAd .item .adList li {
    border-radius: 10px;
  }
}

@media screen and (max-width: 800px) {
  .allSliderAd {
    margin-top: 2rem;
  }
}

.allSuggest {
  height: 37rem;
  margin-top: 4rem;
}

.allSuggest .blocks {
  height: 20rem;
  position: relative;
  background-size: cover;
  padding: 2rem 0;
}

.allSuggest .blocks .block {
  margin: auto;
  position: relative;
  z-index: 100;
}

.allSuggest .blocks .block .top {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSuggest .blocks .block .top h3 {
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 1px;
  margin-right: 8rem;
}

.allSuggest .blocks .block .top h3 span {
  font-weight: 300;
}

.allSuggest .blocks .block .top .left {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 1rem;
  justify-content: left;
  align-items: center;
  background: #FF474F;
  position: relative;
  border-radius: 5rem;
  box-shadow: 10px 0 1px darkred;
  border: 2px solid white;
  border-right: 0;
}

.allSuggest .blocks .block .top .left .container {
  padding-left: 1rem;
  padding-right: 0.5rem;
  direction: ltr;
  border-radius: 5rem;
  display: grid;
  grid-template-columns: auto auto auto auto;
}

.allSuggest .blocks .block .top .left .container .flip-card {
  font-size: 1.5rem;
  font-weight: 300;
}

.allSuggest .blocks .block .top .left .container .flip-card__top,
.allSuggest .blocks .block .top .left .container .flip-card__bottom,
.allSuggest .blocks .block .top .left .container .flip-card__back-bottom,
.allSuggest .blocks .block .top .left .container .flip-card__back::before,
.allSuggest .blocks .block .top .left .container .flip-card__back::after {
  padding: 0;
}

.allSuggest .blocks .block .top .left .container .flip-card__top,
.allSuggest .blocks .block .top .left .container .flip-card__bottom,
.allSuggest .blocks .block .top .left .container .flip-card__back-bottom,
.allSuggest .blocks .block .top .left .container .flip-card__back::before,
.allSuggest .blocks .block .top .left .container .flip-card__back::after {
  background: #FF474F;
  color: #fff;
}

.allSuggest .blocks .block .top .left .container .flip-clock__piece {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  margin: 0;
}

.allSuggest .blocks .block .top .left .container .flip-clock__piece:after {
  content: ":";
  color: white;
  font-size: 1.5rem;
}

.allSuggest .blocks .block .top .left .container .flip-clock__piece:last-child:after {
  content: "";
}

.allSuggest .blocks .block .top .left .container .flip-card__bottom,
.allSuggest .blocks .block .top .left .container .flip-card__back-bottom,
.allSuggest .blocks .block .top .left .container .flip-card__bottom-4digits,
.allSuggest .blocks .block .top .left .container .flip-card__back-bottom-4digits {
  background: #FF474F;
  border-top: 0;
  color: #fff;
}

.allSuggest .blocks .block .top .left .container .flip-clock__slot {
  position: absolute;
  top: 0;
  visibility: hidden;
}

.allSuggest .blocks .block .top .left .remaining {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
}

.allSuggest .blocks .block .top .left .remaining i {
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  bottom: 0;
  z-index: 2;
}

.allSuggest .blocks .block .top .left .remaining i svg {
  width: 131%;
  height: 123%;
}

.allSuggest .blocks .block .top .left .remaining span {
  position: relative;
  z-index: 20;
  color: white;
  display: grid;
  align-items: center;
  font-size: 1.1rem;
  padding-right: 1rem;
}

.allSuggest .blocks .block .bot {
  height: 21rem;
}

.allSuggest .blocks .block .bot .hooper {
  outline: transparent;
  margin-top: 3rem;
  height: 27rem;
}

.allSuggest .blocks .block .bot .hooper .hooper-list {
  overflow: unset;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-navigation button {
  top: auto;
  bottom: 108%;
  display: grid;
  align-items: center;
  background: white;
  margin: 0 1rem;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-navigation .hooper-prev {
  border-radius: 50%;
  padding: 0.3rem;
  overflow: hidden;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  justify-content: center;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-navigation .hooper-next {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.3rem;
  border-radius: 50%;
  overflow: hidden;
  right: 3rem;
  left: auto;
  display: grid;
  justify-content: center;
}

@media screen and (max-width: 800px) {
  .allSuggest .blocks .block .bot .hooper .hooper-list .hooper-navigation button {
    bottom: 94%;
  }

  .allSuggest .blocks .block .bot .hooper .hooper-list .hooper-navigation .hooper-prev {
    left: 50%;
    right: auto;
  }

  .allSuggest .blocks .block .bot .hooper .hooper-list .hooper-navigation .hooper-next {
    right: 50%;
  }
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide {
  padding: 1rem 0;
  padding-left: 2rem;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item {
  background: white;
  border-radius: 30px;
  display: grid;
  position: relative;
  padding: 1rem;
  box-shadow: 0 30px 40px rgba(0, 0, 0, 0.1);
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .pic {
  padding: 3rem 0;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .pic img {
  width: 100%;
  height: 13rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .off {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 5rem;
  background: #F9AB3B;
  padding: 0.3rem 0;
  text-align: center;
  width: 80px;
  font-size: 1.1rem;
  font-weight: 500;
  color: white;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .off:before {
  border-left: 20px solid #F9AB3B;
  content: "";
  position: absolute;
  z-index: 9;
  right: 0;
  top: 1.5rem;
  height: 26px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom: transparent;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .off:after {
  border-left: 20px solid white;
  content: "";
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: -1.2rem;
  height: 20px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom: transparent;
  border-radius: 0 0 0 48px;
  transform: rotate(173deg);
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .rate {
  position: absolute;
  left: 1rem;
  top: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #475569;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .rate i {
  display: grid;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.2rem;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .rate i svg {
  width: 1rem;
  height: 1rem;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .datas {
  position: relative;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  z-index: 100;
  grid-gap: 1rem;
  position: absolute;
  right: 0;
  left: 0;
  top: -1rem;
  transition: all 0.3s ease-in-out;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption {
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.4rem;
  height: 1.3rem;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i .loading {
  fill: #475569;
  width: 1rem;
  height: 1rem;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption .active svg {
  fill: #F71938;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption:nth-child(1) {
  transition: all 0.2s ease-in-out;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption:nth-child(2) {
  transition: all 0.4s ease-in-out;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption:nth-child(3) {
  transition: all 0.6s ease-in-out;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .title {
  font-size: 14px;
  font-weight: 300;
  color: #475569;
  text-align: center;
  letter-spacing: 0.6px;
  overflow: hidden;
  height: 3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .price {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 1rem;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .price s {
  font-size: 1rem;
  color: #e3342f;
  font-weight: 300;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .price h4 {
  font-size: 1.3rem;
  color: #00C58D;
  font-weight: 300;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .price span {
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 0.1px;
}

.allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item:hover .datas .productOptions .productOption {
  visibility: visible;
  opacity: 1;
  margin-top: -1rem;
}

@media screen and (max-width: 800px) {
  .allSuggest .blocks .block {
    width: 100% !important;
  }

  .allSuggest .blocks .block .top {
    display: block;
  }

  .allSuggest .blocks .block .top h3 {
    margin-right: 0;
    width: 100%;
    text-align: center;
  }

  .allSuggest .blocks .block .top .left {
    grid-template-columns: auto 1fr;
    margin-top: 1rem;
  }

  .allSuggest .blocks .block .top .left .remaining span {
    font-size: 0.8rem;
  }

  .allSuggest .blocks .block .top .left .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .allSuggest .blocks .block .top .left .container .flip-card {
    font-size: 1.1rem !important;
    font-weight: 300;
  }

  .allSuggest .blocks .block .bot .hooper {
    height: 33rem;
  }

  .allSuggest .blocks .block .bot .hooper .hooper-list {
    overflow: hidden;
  }

  .allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide {
    padding: 1rem;
  }

  .allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item {
    border-radius: 10px;
    padding: 0.5rem;
    display: block;
  }

  .allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .pic {
    padding: 1rem 0;
  }

  .allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .pic img {
    width: 100%;
    height: 9rem;
  }

  .allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .off {
    opacity: 0;
  }

  .allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .rate {
    left: 0.5rem;
    top: 0.5rem;
    font-size: 0.8rem;
  }

  .allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .rate i svg {
    width: 0.8rem;
    height: 0.8rem;
  }

  .allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .title {
    font-size: 10px;
    height: auto;
  }

  .allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .price {
    margin-top: 0.5rem;
  }

  .allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .price s {
    font-size: 0.6rem;
  }

  .allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .price h4 {
    font-size: 0.8rem;
  }

  .allSuggest .blocks .block .bot .hooper .hooper-list .hooper-track .hooper-slide .item .price span {
    font-size: 0.6rem;
  }
}

@media screen and (max-width: 800px) {
  .allSuggest {
    height: 27rem;
    margin-top: 2rem;
  }
}

.allNewProduct {
  margin: auto;
  margin-top: 4rem;
  position: relative;
}

.allNewProduct .title {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 1rem;
  align-items: center;
}

.allNewProduct .title i svg {
  width: 2rem;
  height: 4rem;
}

.allNewProduct .title .name h3 {
  font-size: 1.5rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 1px;
}

.allNewProduct .title .name span {
  font-size: 1.5rem;
  font-weight: 700;
  color: #475569;
  position: relative;
}

.allNewProduct .title .name span:before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  background: #FFF9EB;
  z-index: -1;
}

.allNewProduct .data .hooper {
  outline: transparent;
  margin-top: 3rem;
  height: 27rem;
}

.allNewProduct .data .hooper .hooper-list {
  overflow: unset;
}

.allNewProduct .data .hooper .hooper-list .hooper-navigation button {
  top: auto;
  bottom: 108%;
  display: grid;
  align-items: center;
  background: #F8F9FB;
}

.allNewProduct .data .hooper .hooper-list .hooper-navigation .hooper-prev {
  border-radius: 50%;
  overflow: hidden;
  width: 3rem;
  height: 3rem;
  display: grid;
  justify-content: center;
  left: 5rem;
  right: auto;
}

.allNewProduct .data .hooper .hooper-list .hooper-navigation .hooper-next {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
  right: auto;
  left: 0;
  display: grid;
  justify-content: center;
}

@media screen and (max-width: 800px) {
  .allNewProduct .data .hooper .hooper-list .hooper-navigation button {
    bottom: 40%;
    background: #FDC8CE;
  }

  .allNewProduct .data .hooper .hooper-list .hooper-navigation .hooper-prev {
    right: 0;
    left: auto;
  }

  .allNewProduct .data .hooper .hooper-list .hooper-navigation .hooper-next {
    right: auto;
    left: 0;
  }
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide {
  padding-left: 2rem;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item {
  display: grid;
  position: relative;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .pic {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  background: white;
  border-radius: 30px;
  padding: 3rem 0;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .pic img {
  width: 100%;
  height: 13rem;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 30px;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .off {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 5rem;
  background: #F9AB3B;
  padding: 0.3rem 0;
  text-align: center;
  width: 80px;
  font-size: 1.1rem;
  font-weight: 500;
  color: white;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .off:before {
  border-left: 20px solid #F9AB3B;
  content: "";
  position: absolute;
  z-index: 9;
  right: 0;
  top: 1.5rem;
  height: 26px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom: transparent;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .off:after {
  border-left: 20px solid white;
  content: "";
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: -1.2rem;
  height: 20px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom: transparent;
  border-radius: 0 0 0 48px;
  transform: rotate(173deg);
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .rate {
  position: absolute;
  left: 1rem;
  top: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #475569;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .rate i {
  display: grid;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.2rem;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .rate i svg {
  width: 1rem;
  height: 1rem;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas {
  position: relative;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  z-index: 100;
  grid-gap: 1rem;
  position: absolute;
  right: 0;
  left: 0;
  top: -1rem;
  transition: all 0.3s ease-in-out;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption {
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.4rem;
  height: 1.3rem;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i .loading {
  fill: #475569;
  width: 1rem;
  height: 1rem;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption .active svg {
  fill: #F71938;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption:nth-child(1) {
  transition: all 0.2s ease-in-out;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption:nth-child(2) {
  transition: all 0.4s ease-in-out;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption:nth-child(3) {
  transition: all 0.6s ease-in-out;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .title {
  font-size: 14px;
  font-weight: 300;
  color: #475569;
  text-align: center;
  letter-spacing: 0.6px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-top: 2rem;
  margin-bottom: 0;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .price {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 1rem;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .price s {
  font-size: 1rem;
  color: #e3342f;
  font-weight: 300;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .price h4 {
  font-size: 1.3rem;
  color: #00C58D;
  font-weight: 300;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .price span {
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 0.1px;
}

.allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item:hover .datas .productOptions .productOption {
  visibility: visible;
  opacity: 1;
  margin-top: -1rem;
}

.allNewProduct .shape {
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  display: grid;
  align-items: center;
  z-index: -1;
}

.allNewProduct .shape i {
  display: grid;
  justify-content: right;
  align-items: center;
  align-content: center;
}

.allNewProduct .shape i svg {
  width: 30rem;
  height: 30rem;
}

@media screen and (max-width: 800px) {
  .allNewProduct {
    margin-top: 2rem;
    width: 100% !important;
  }

  .allNewProduct .title {
    margin-bottom: -1rem;
  }

  .allNewProduct .title .right {
    margin-bottom: 1rem;
    text-align: center;
    justify-content: center;
  }

  .allNewProduct .title .right .name h3 {
    font-size: 1.2rem;
  }

  .allNewProduct .title .right .name span {
    font-size: 1.2rem;
  }

  .allNewProduct .title a {
    margin-left: 0;
    display: grid;
    text-align: center;
    width: 100%;
  }

  .allNewProduct .data .hooper {
    height: 20rem;
  }

  .allNewProduct .data .hooper .hooper-list {
    overflow: hidden;
  }

  .allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide {
    padding: 1rem;
  }

  .allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item {
    display: block;
  }

  .allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .pic {
    padding: 1rem 0;
  }

  .allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .pic img {
    width: 100%;
    height: 9rem;
  }

  .allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .off {
    opacity: 0;
  }

  .allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .rate {
    left: 0.5rem;
    top: 0.5rem;
    font-size: 0.8rem;
  }

  .allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .rate i svg {
    width: 0.8rem;
    height: 0.8rem;
  }

  .allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .title {
    font-size: 10px;
    height: auto;
  }

  .allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .price {
    margin-top: 0.5rem;
  }

  .allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .price s {
    font-size: 0.6rem;
  }

  .allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .price h4 {
    font-size: 0.8rem;
  }

  .allNewProduct .data .hooper .hooper-list .hooper-track .hooper-slide .item .price span {
    font-size: 0.6rem;
  }

  .allNewProduct .shape {
    opacity: 0;
  }

  .allNewProduct .shape i svg {
    width: 0;
    height: 0;
  }
}

.allAdIndex {
  margin: auto;
  margin-top: 4rem;
}

.allAdIndex ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  align-items: center;
  grid-gap: 2rem;
  margin-top: 2rem;
}

.allAdIndex ul li {
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.allAdIndex ul li a {
  position: relative;
}

.allAdIndex ul li a img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 800px) {
  .allAdIndex {
    margin-top: 2rem;
  }

  .allAdIndex ul {
    grid-gap: 1rem;
  }

  .allAdIndex ul li {
    border-radius: 10px;
  }
}

.allCategory {
  margin: auto;
  margin-top: 4rem;
}

.allCategory .title {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  grid-gap: 1rem;
  align-items: center;
}

.allCategory .title .right {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 1rem;
  align-items: center;
}

.allCategory .title .right i svg {
  width: 2rem;
  height: 4rem;
}

.allCategory .title .right .name h3 {
  font-size: 1.5rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 1px;
}

.allCategory .title .right .name span {
  font-size: 1.5rem;
  font-weight: 700;
  color: #475569;
  position: relative;
}

.allCategory .title .right .name span:before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  background: #FFF9EB;
  z-index: -1;
}

.allCategory .title a {
  background: #FFF9EB;
  padding: 0.5rem 2rem;
  border-radius: 5rem;
  color: #F9AB3B;
  font-size: 0.9rem;
  font-weight: 300;
  margin-left: 8rem;
}

.allCategory .data {
  position: relative;
}

.allCategory .data .hooper {
  outline: transparent;
  margin-top: 1rem;
  height: 30rem;
  position: relative;
  z-index: 100;
}

.allCategory .data .hooper .hooper-list .hooper-navigation button {
  top: auto;
  bottom: 102%;
  display: grid;
  align-items: center;
  background: #F8F9FB;
}

.allCategory .data .hooper .hooper-list .hooper-navigation .hooper-prev {
  border-radius: 50%;
  overflow: hidden;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  justify-content: center;
  left: 4rem;
  right: auto;
}

.allCategory .data .hooper .hooper-list .hooper-navigation .hooper-next {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  overflow: hidden;
  right: auto;
  left: 0;
  display: grid;
  justify-content: center;
}

@media screen and (max-width: 800px) {
  .allCategory .data .hooper .hooper-list .hooper-navigation button {
    bottom: 40%;
  }

  .allCategory .data .hooper .hooper-list .hooper-navigation .hooper-prev {
    right: 0;
    left: auto;
  }

  .allCategory .data .hooper .hooper-list .hooper-navigation .hooper-next {
    right: auto;
    left: 0;
  }
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide {
  padding: 2rem 1rem;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item {
  display: grid;
  position: relative;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .pic {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  background: white;
  border-radius: 30px;
  padding: 3rem 0;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .pic img {
  width: 100%;
  height: 13rem;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 30px;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .off {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 5rem;
  background: #F9AB3B;
  padding: 0.3rem 0;
  text-align: center;
  width: 80px;
  font-size: 1.1rem;
  font-weight: 500;
  color: white;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .off:before {
  border-left: 20px solid #F9AB3B;
  content: "";
  position: absolute;
  z-index: 9;
  right: 0;
  top: 1.5rem;
  height: 26px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom: transparent;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .off:after {
  border-left: 20px solid white;
  content: "";
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: -1.2rem;
  height: 20px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom: transparent;
  border-radius: 0 0 0 48px;
  transform: rotate(173deg);
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .rate {
  position: absolute;
  left: 1rem;
  top: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #475569;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .rate i {
  display: grid;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.2rem;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .rate i svg {
  width: 1rem;
  height: 1rem;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas {
  position: relative;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  z-index: 100;
  grid-gap: 1rem;
  position: absolute;
  right: 0;
  left: 0;
  top: -1rem;
  transition: all 0.3s ease-in-out;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption {
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.4rem;
  height: 1.3rem;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i .loading {
  fill: #475569;
  width: 1rem;
  height: 1rem;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption .active svg {
  fill: #F71938;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption:nth-child(1) {
  transition: all 0.2s ease-in-out;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption:nth-child(2) {
  transition: all 0.4s ease-in-out;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption:nth-child(3) {
  transition: all 0.6s ease-in-out;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .title {
  font-size: 14px;
  font-weight: 300;
  color: #475569;
  text-align: center;
  letter-spacing: 0.6px;
  overflow: hidden;
  display: -webkit-box;
  height: 3rem;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-top: 2rem;
  margin-bottom: 0;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .price {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 1rem;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .price s {
  font-size: 1rem;
  color: #e3342f;
  font-weight: 300;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .price h4 {
  font-size: 1.3rem;
  color: #00C58D;
  font-weight: 300;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .price span {
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 0.1px;
}

.allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item:hover .datas .productOptions .productOption {
  visibility: visible;
  opacity: 1;
  margin-top: -1rem;
}

.allCategory .data .bar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: grid;
  align-items: center;
  justify-content: center;
  margin-bottom: 5rem;
  z-index: 10;
}

.allCategory .data .bar:before {
  content: "";
  height: 3rem;
  width: 50rem;
  margin: auto;
  background: #F9AB3B;
}

@media screen and (max-width: 800px) {
  .allCategory {
    width: 100% !important;
    overflow: hidden;
    margin-top: 2rem;
  }

  .allCategory .title {
    display: block;
    margin-bottom: -1rem;
  }

  .allCategory .title .right {
    margin-bottom: 1rem;
  }

  .allCategory .title .right .name h3 {
    font-size: 1.2rem;
  }

  .allCategory .title .right .name span {
    font-size: 1.2rem;
  }

  .allCategory .title a {
    margin-left: 0;
    display: grid;
    text-align: center;
    width: 100%;
  }

  .allCategory .data .hooper {
    height: 20rem;
  }

  .allCategory .data .hooper .hooper-list {
    overflow: hidden;
  }

  .allCategory .data .hooper .hooper-list .hooper-track .hooper-slide {
    padding: 1rem;
  }

  .allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item {
    display: block;
  }

  .allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .pic {
    padding: 1rem 0;
  }

  .allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .pic img {
    width: 100%;
    height: 9rem;
  }

  .allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .off {
    opacity: 0;
  }

  .allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .rate {
    left: 0.5rem;
    top: 0.5rem;
    font-size: 0.8rem;
  }

  .allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .rate i svg {
    width: 0.8rem;
    height: 0.8rem;
  }

  .allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .title {
    font-size: 10px;
    height: auto;
  }

  .allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .price {
    margin-top: 0.5rem;
  }

  .allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .price s {
    font-size: 0.6rem;
  }

  .allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .price h4 {
    font-size: 0.8rem;
  }

  .allCategory .data .hooper .hooper-list .hooper-track .hooper-slide .item .price span {
    font-size: 0.6rem;
  }
}

.allAdProduct {
  margin-top: 4rem;
  height: 59rem;
}

.allAdProduct .adTop {
  margin: auto;
  margin-bottom: -5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  align-items: center;
  grid-gap: 2rem;
}

.allAdProduct .adTop li {
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.allAdProduct .adTop li a {
  position: relative;
}

.allAdProduct .adTop li a img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.allAdProduct .block {
  background: #FFEBEC;
  height: 30rem;
  padding-top: 10rem;
}

.allAdProduct .block .data {
  margin: auto;
}

.allAdProduct .block .data .title {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  grid-gap: 1rem;
  align-items: center;
}

.allAdProduct .block .data .title .right {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 1rem;
  align-items: center;
}

.allAdProduct .block .data .title .right i svg {
  width: 2rem;
  height: 4rem;
}

.allAdProduct .block .data .title .right .name {
  display: grid;
  grid-template-columns: auto;
  justify-content: right;
  align-items: center;
}

.allAdProduct .block .data .title .right .name h3 {
  font-size: 1.5rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 1px;
}

.allAdProduct .block .data .title .right .name span {
  font-size: 1.5rem;
  font-weight: 700;
  color: #475569;
  position: relative;
}

.allAdProduct .block .data .title .right .name span:before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  background: #FFF9EB;
  z-index: -1;
}

.allAdProduct .block .data .title a {
  background: white;
  padding: 0.5rem 3rem;
  border-radius: 5rem;
  color: #F9AB3B;
  font-size: 0.9rem;
  font-weight: 300;
  margin-left: 8rem;
}

.allAdProduct .block .data .hooper {
  outline: transparent;
  margin-top: 1rem;
  height: 30rem;
  position: relative;
  z-index: 100;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-navigation button {
  top: auto;
  bottom: 102%;
  display: grid;
  align-items: center;
  background: #F2D6D8;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-navigation .hooper-prev {
  border-radius: 50%;
  overflow: hidden;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  justify-content: center;
  left: 4rem;
  right: auto;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-navigation .hooper-next {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  overflow: hidden;
  right: auto;
  left: 0;
  display: grid;
  justify-content: center;
}

@media screen and (max-width: 800px) {
  .allAdProduct .block .data .hooper .hooper-list .hooper-navigation button {
    bottom: 40%;
    background: #FDC8CE;
  }

  .allAdProduct .block .data .hooper .hooper-list .hooper-navigation .hooper-prev {
    right: 0;
    left: auto;
  }

  .allAdProduct .block .data .hooper .hooper-list .hooper-navigation .hooper-next {
    right: auto;
    left: 0;
  }
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide {
  padding: 2rem 1rem;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item {
  display: grid;
  position: relative;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .pic {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  background: white;
  border-radius: 30px;
  padding: 3rem 0;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .pic img {
  width: 100%;
  height: 13rem;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 30px;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .off {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 5rem;
  background: #F9AB3B;
  padding: 0.3rem 0;
  text-align: center;
  width: 80px;
  font-size: 1.1rem;
  font-weight: 500;
  color: white;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .off:before {
  border-left: 20px solid #F9AB3B;
  content: "";
  position: absolute;
  z-index: 9;
  right: 0;
  top: 1.5rem;
  height: 26px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom: transparent;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .off:after {
  border-left: 20px solid white;
  content: "";
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: -1.2rem;
  height: 20px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom: transparent;
  border-radius: 0 0 0 48px;
  transform: rotate(173deg);
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .rate {
  position: absolute;
  left: 1rem;
  top: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #475569;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .rate i {
  display: grid;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.2rem;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .rate i svg {
  width: 1rem;
  height: 1rem;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas {
  position: relative;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  z-index: 100;
  grid-gap: 1rem;
  position: absolute;
  right: 0;
  left: 0;
  top: -1rem;
  transition: all 0.3s ease-in-out;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption {
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.4rem;
  height: 1.3rem;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i .loading {
  fill: #475569;
  width: 1rem;
  height: 1rem;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption .active svg {
  fill: #F71938;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption:nth-child(1) {
  transition: all 0.2s ease-in-out;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption:nth-child(2) {
  transition: all 0.4s ease-in-out;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption:nth-child(3) {
  transition: all 0.6s ease-in-out;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .title {
  font-size: 14px;
  font-weight: 300;
  color: #475569;
  text-align: center;
  letter-spacing: 0.6px;
  overflow: hidden;
  height: 3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-top: 2rem;
  margin-bottom: 0;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .price {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 1rem;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .price s {
  font-size: 1rem;
  color: #e3342f;
  font-weight: 300;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .price h4 {
  font-size: 1.3rem;
  color: #00C58D;
  font-weight: 300;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .price span {
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 0.1px;
}

.allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item:hover .datas .productOptions .productOption {
  visibility: visible;
  opacity: 1;
  margin-top: -1rem;
}

@media screen and (max-width: 800px) {
  .allAdProduct .block .data .title {
    display: block;
    margin-bottom: -1rem;
  }

  .allAdProduct .block .data .title .right {
    margin-bottom: 1rem;
    text-align: center;
    justify-content: center;
  }

  .allAdProduct .block .data .title .right .name h3 {
    font-size: 1.2rem;
  }

  .allAdProduct .block .data .title .right .name span {
    font-size: 1.2rem;
  }

  .allAdProduct .block .data .title a {
    margin-left: 0;
    display: grid;
    text-align: center;
    width: 100%;
  }
}

@media screen and (max-width: 800px) {
  .allAdProduct {
    margin-top: 2rem;
    height: 30rem;
  }

  .allAdProduct .adTop {
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
  }

  .allAdProduct .adTop li {
    border-radius: 10px;
  }

  .allAdProduct .adTop li a {
    position: relative;
  }

  .allAdProduct .adTop li a img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .allAdProduct .block {
    padding-top: 6rem;
  }

  .allAdProduct .block .data .hooper {
    height: 17rem;
  }

  .allAdProduct .block .data .hooper .hooper-list {
    overflow: hidden;
  }

  .allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide {
    padding: 1rem;
  }

  .allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item {
    display: block;
  }

  .allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .pic {
    padding: 1rem 0;
  }

  .allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .pic img {
    width: 100%;
    height: 9rem;
  }

  .allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .off {
    opacity: 0;
  }

  .allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .rate {
    left: 0.5rem;
    top: 0.5rem;
    font-size: 0.8rem;
  }

  .allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .rate i svg {
    width: 0.8rem;
    height: 0.8rem;
  }

  .allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .title {
    font-size: 10px;
    height: auto;
    margin-top: 0.5rem;
  }

  .allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .price {
    margin-top: 0.5rem;
  }

  .allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .price s {
    font-size: 0.6rem;
  }

  .allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .price h4 {
    font-size: 0.8rem;
  }

  .allAdProduct .block .data .hooper .hooper-list .hooper-track .hooper-slide .item .price span {
    font-size: 0.6rem;
  }
}

.allImageSlider {
  margin: auto;
  margin-top: 4rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.allImageSlider .hooper {
  outline: transparent;
  margin-top: 1rem;
  height: 30rem;
  position: relative;
  z-index: 100;
  display: grid;
}

.allImageSlider .hooper .hooper-list .hooper-navigation button {
  top: auto;
  bottom: 0;
  display: grid;
  align-items: center;
  background: #F8F9FB;
}

.allImageSlider .hooper .hooper-list .hooper-navigation .hooper-prev {
  border-radius: 50%;
  overflow: hidden;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  justify-content: center;
  right: -12rem;
  left: auto;
}

.allImageSlider .hooper .hooper-list .hooper-navigation .hooper-next {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  overflow: hidden;
  right: -8rem;
  left: auto;
  display: grid;
  justify-content: center;
}

@media screen and (max-width: 800px) {
  .allImageSlider .hooper .hooper-list .hooper-navigation button {
    bottom: 40%;
    background: #FDC8CE;
  }

  .allImageSlider .hooper .hooper-list .hooper-navigation .hooper-prev {
    right: 0;
    left: auto;
  }

  .allImageSlider .hooper .hooper-list .hooper-navigation .hooper-next {
    right: auto;
    left: 0;
  }
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide {
  padding: 2rem 1rem;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item {
  display: grid;
  position: relative;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .pic {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  background: white;
  border-radius: 30px;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .pic img {
  width: 100%;
  height: 20rem;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 30px;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .off {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 5rem;
  background: #F9AB3B;
  padding: 0.3rem 0;
  text-align: center;
  width: 80px;
  font-size: 1.1rem;
  font-weight: 500;
  color: white;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .off:before {
  border-left: 20px solid #F9AB3B;
  content: "";
  position: absolute;
  z-index: 9;
  right: 0;
  top: 1.5rem;
  height: 26px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom: transparent;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .off:after {
  border-left: 20px solid white;
  content: "";
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: -1.2rem;
  height: 20px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom: transparent;
  border-radius: 0 0 0 48px;
  transform: rotate(173deg);
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .rate {
  position: absolute;
  left: 1rem;
  top: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #475569;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .rate i {
  display: grid;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.2rem;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .rate i svg {
  width: 1rem;
  height: 1rem;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .datas {
  position: relative;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  z-index: 100;
  grid-gap: 1rem;
  position: absolute;
  right: 0;
  left: 0;
  top: -1rem;
  transition: all 0.3s ease-in-out;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption {
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
}

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

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

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

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption i .loading {
  fill: #475569;
  width: 1rem;
  height: 1rem;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption .active svg {
  fill: #F71938;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption:nth-child(1) {
  transition: all 0.2s ease-in-out;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption:nth-child(2) {
  transition: all 0.4s ease-in-out;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .datas .productOptions .productOption:nth-child(3) {
  transition: all 0.6s ease-in-out;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .title {
  font-size: 14px;
  font-weight: 300;
  color: #475569;
  text-align: center;
  letter-spacing: 0.6px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-top: 2rem;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .price {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 1rem;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .price s {
  font-size: 1rem;
  color: #e3342f;
  font-weight: 300;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .price h4 {
  font-size: 1.3rem;
  color: #00C58D;
  font-weight: 300;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .price span {
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 0.1px;
}

.allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item:hover .datas .productOptions .productOption {
  visibility: visible;
  opacity: 1;
  margin-top: -1rem;
}

@media screen and (max-width: 800px) {
  .allImageSlider {
    margin-top: 2rem;
    display: block;
  }

  .allImageSlider .image {
    display: grid;
    justify-content: center;
  }

  .allImageSlider .image a img {
    height: 10rem;
  }

  .allImageSlider .hooper {
    height: 20rem;
  }

  .allImageSlider .hooper .hooper-list {
    overflow: hidden;
  }

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

  .allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item {
    display: block;
  }

  .allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .pic {
    padding: 1rem 0;
  }

  .allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .pic img {
    width: 100%;
    height: 9rem;
  }

  .allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .off {
    opacity: 0;
  }

  .allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .rate {
    left: 0.5rem;
    top: 0.5rem;
    font-size: 0.8rem;
  }

  .allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .rate i svg {
    width: 0.8rem;
    height: 0.8rem;
  }

  .allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .title {
    font-size: 10px;
    height: auto;
  }

  .allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .price {
    margin-top: 0.5rem;
  }

  .allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .price s {
    font-size: 0.6rem;
  }

  .allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .price h4 {
    font-size: 0.8rem;
  }

  .allImageSlider .hooper .hooper-list .hooper-track .hooper-slide .item .price span {
    font-size: 0.6rem;
  }
}

.allBlogIndex {
  margin: auto;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid #F5F3FC;
}

.allBlogIndex .title {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  grid-gap: 1rem;
  align-items: center;
}

.allBlogIndex .title .right {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  grid-gap: 1rem;
  align-items: center;
}

.allBlogIndex .title .right i svg {
  width: 2rem;
  height: 4rem;
}

.allBlogIndex .title .right .name h3 {
  font-size: 1.5rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 1px;
}

.allBlogIndex .title .right .name span {
  font-size: 1.5rem;
  font-weight: 700;
  color: #475569;
  position: relative;
}

.allBlogIndex .title .right .name span:before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  background: #FFF9EB;
  z-index: -1;
}

.allBlogIndex .title a {
  background: #FFF9EB;
  padding: 0.5rem 2rem;
  border-radius: 5rem;
  color: #F9AB3B;
  font-size: 0.9rem;
  font-weight: 300;
}

.allBlogIndex .allNews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
  margin-top: 2rem;
}

.allBlogIndex .allNews .item {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  display: grid;
}

.allBlogIndex .allNews .item .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.allBlogIndex .allNews .item .over {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  box-shadow: inset 0 -81px 87px -53px #000;
  display: grid;
  align-items: end;
  transition: all 0.3s ease-in-out;
}

.allBlogIndex .allNews .item .over .titleItem {
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  line-height: 2rem;
  margin: 0 1rem;
}

.allBlogIndex .allNews .item .over:hover {
  box-shadow: inset 0 -81px 87px -53px #533300;
}

.allBlogIndex .allNews .right .item .pic img {
  height: 26rem;
}

.allBlogIndex .allNews .right .item .titleItem {
  font-size: 1.3rem;
  font-weight: 300;
  margin-bottom: 1rem;
}

.allBlogIndex .allNews .left {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
}

.allBlogIndex .allNews .left .item .pic img {
  height: 100%;
}

@media screen and (max-width: 800px) {
  .allBlogIndex .allNews {
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    margin-top: 2rem;
  }

  .allBlogIndex .allNews .right .item .pic img {
    height: auto;
  }

  .allBlogIndex .allNews .left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 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%;
  }
}

.allRegisters {
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr 1fr;
  margin: auto;
  margin-top: 10rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  margin-top: 2rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems {
  padding: 1rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsTitle {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  text-align: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid #F5F3FC;
  margin-bottom: 2rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsTitle .allHeaderIndexRegisterTitleItem {
  font-size: 1.4rem;
  font-weight: 500;
  color: black;
  text-align: right;
  margin-bottom: 1rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsTitle p {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  text-align: right;
  opacity: 0.7;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .loginRule {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid #F5F3FC;
  grid-gap: 0.5rem;
  margin-bottom: 2rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .loginRule i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .loginRule i svg {
  width: 2rem;
  height: 2rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .loginRule p {
  font-size: 0.95rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .loginRule p span {
  color: black;
  font-weight: 500;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .slide-fade-enter-active {
  transition: all 0.5s ease-in-out;
  opacity: 1;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .slide-fade-leave-active {
  position: absolute;
  right: 0;
  opacity: 0;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .slide-fade-enter {
  transition: all 0.5s ease-in-out;
  opacity: 0;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerCounter {
  display: grid;
  justify-content: center;
  margin-bottom: 2rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerCounter h3 {
  margin-top: 1rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerCounter .allHeaderIndexRegisterItemsContainerCounterTimer {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  margin: 1rem 0;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerCounter .allHeaderIndexRegisterItemsContainerCounterTimer .allCountDown {
  width: 100%;
  position: relative;
  height: 8px;
  background: #FFF8F6;
  border-radius: 5px;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerCounter .allHeaderIndexRegisterItemsContainerCounterTimer .allCountDown .move {
  position: absolute;
  left: 0;
  height: 8px;
  border-radius: 5px;
  background: #FF8A66;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerCounter p {
  font-size: 0.75rem;
  font-weight: 300;
  color: #475569;
  text-align: center;
  opacity: 0.5;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerSend {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-bottom: 1rem;
  margin-top: 0;
  font-weight: 300;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.3rem;
  margin-bottom: 1rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem span,
.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexInput {
  border: 1.4px solid #F5F5F5;
  position: relative;
  margin-top: 0.5rem;
  border-radius: 5rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexInput input {
  padding: 0.5rem 1rem;
  direction: ltr;
  text-align: right;
  background: transparent;
  color: #475569;
  font-weight: 300;
  width: 100%;
  font-size: 1rem;
  height: 100%;
  border-radius: 5rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexRegisterItemInputs {
  display: grid;
  grid-template-columns: auto;
  justify-content: center;
  direction: ltr;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexRegisterItemInputs .code-container {
  position: relative;
}

.allRegisters .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;
}

.allRegisters .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 #F5F5F5;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexRegisterItemInputs .code-container label span.highlight {
  -webkit-animation: mymove 0.7s ease-in-out infinite;
          animation: mymove 0.7s ease-in-out infinite;
}

@-webkit-keyframes mymove {
  0% {
    border-color: #eee;
  }

  50% {
    border-color: red;
  }

  100% {
    border-color: #eee;
  }
}

@keyframes mymove {
  0% {
    border-color: #eee;
  }

  50% {
    border-color: red;
  }

  100% {
    border-color: #eee;
  }
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexRegisterItemInputs .code-container label span + span {
  margin-left: 5.333px;
}

.allRegisters .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) {
  .allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexRegisterItemInputs .code-container label {
    height: 30px;
  }

  .allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem .allHeaderIndexRegisterItemInputs .code-container label span {
    width: 1.5rem;
    font-size: 1rem;
  }
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem:last-child {
  margin-bottom: 0;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .alert {
  color: red;
  font-size: 0.9rem;
  font-weight: 300;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton {
  display: grid;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton div {
  background: #FF8A66;
  padding: 1px;
  border-radius: 20rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton div button {
  display: grid;
  justify-content: center;
  padding: 0.4rem 0;
  text-align: center;
  background: white;
  border-radius: 20rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton div button span {
  font-weight: 300;
  background: #FF8A66;
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton div button .loading {
  fill: #FF8A66;
  width: 30px;
  height: 30px;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerDetail {
  color: #62666d;
  cursor: pointer;
  font-size: 12px;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterLoader {
  display: grid;
  justify-content: center;
  margin-bottom: 2rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterLoader .lds-ring {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterLoader .lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  border: 4px solid #F9AB3B;
  border-radius: 100%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #F9AB3B transparent transparent transparent;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterLoader .lds-ring div:nth-child(1) {
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterLoader .lds-ring div:nth-child(2) {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterLoader .lds-ring div:nth-child(3) {
  -webkit-animation-delay: -0.15s;
          animation-delay: -0.15s;
}

@-webkit-keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }

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

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }

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

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .allHeaderIndexRegisterItemsContainerSecurity {
  margin-top: 2rem;
  text-align: center;
  color: #475569;
  font-size: 0.85rem;
  line-height: 25px;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays {
  margin-bottom: 1rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays button,
.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays a {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  padding: 0.5rem;
  border-radius: 5rem;
  transition: all 0.3s ease-in-out;
  align-items: center;
  text-align: center;
  background: #00C58D;
  width: 25rem;
  height: 3rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays button svg,
.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays a svg {
  width: 2rem;
  height: 2rem;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays a {
  background: #0055FF;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWayBody p {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.5;
  text-align: center;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterIcon {
  position: absolute;
  left: 1rem;
  top: 1rem;
  cursor: pointer;
}

.allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterIcon svg {
  width: 2rem;
  height: 2rem;
  opacity: 0.3;
}

@media screen and (max-width: 800px) {
  .allRegisters {
    display: block;
    margin-top: 11rem;
  }

  .allRegisters .rightRegister {
    position: absolute;
    top: 0;
    opacity: 0;
    visibility: hidden;
  }

  .allRegisters .allHeaderIndexRegisterData {
    display: block !important;
  }

  .allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays button,
  .allRegisters .allHeaderIndexRegister .allHeaderIndexRegisterData .allHeaderIndexRegisterItems .registerWays a {
    width: 100%;
  }
}

.allSingle {
  border-top: 2px solid #F5F5F5;
  padding-top: 1rem;
  margin: auto;
  margin-top: 12.5rem;
}

.allSingle .address {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  justify-content: right;
  align-items: center;
  margin: auto;
}

.allSingle .address a {
  font-size: 0.85rem;
  font-weight: 500;
  color: #475569;
  letter-spacing: 0.5px;
  opacity: 0.5;
}

.allSingle .address a:after {
  content: "/";
  padding: 0 0.8rem;
}

.allSingle .address a:last-child {
  opacity: 1;
  color: #000;
}

.allSingle .address a:last-child:after {
  content: "";
  padding: 0;
}

.allSingle .productSingle {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  grid-gap: 3rem;
  margin-top: 6rem;
}

.allSingle .productSingle .right .images {
  position: relative;
}

.allSingle .productSingle .right .images .rectangle {
  position: absolute;
  top: -0.5rem;
  right: 0;
  left: 0;
}

.allSingle .productSingle .right .images .rectangle svg {
  width: 100%;
  height: 5rem;
}

.allSingle .productSingle .right .images .options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  justify-content: center;
  align-items: center;
  grid-gap: 2rem;
  background: white;
  border-radius: 5rem;
  height: 3rem;
}

.allSingle .productSingle .right .images .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.55rem;
  cursor: pointer;
  border: 1px solid transparent;
}

.allSingle .productSingle .right .images .options .option .loading {
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.allSingle .productSingle .right .images .options .option i {
  display: grid;
  align-items: center;
  justify-content: center;
}

.allSingle .productSingle .right .images .options .option i svg {
  width: 1.55rem;
  height: 1.5rem;
  fill: #475569;
  opacity: 0.7;
}

.allSingle .productSingle .right .images .options .option i svg:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allSingle .productSingle .right .images .options .option i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allSingle .productSingle .right .images .options .option .active svg {
  fill: #e3342f;
}

.allSingle .productSingle .right .images .options .option h4 {
  opacity: 0;
  color: #475569;
  font-size: 0;
  font-weight: 500;
  position: absolute;
  top: 0;
  visibility: hidden;
}

.allSingle .productSingle .right .images .options .option:hover {
  width: 6rem;
  border: 1px solid #E5E5E5;
}

.allSingle .productSingle .right .images .options .option:hover h4 {
  opacity: 0.7;
  font-size: 0.85rem;
  visibility: visible;
  position: relative;
}

.allSingle .productSingle .right .images .cover {
  position: relative;
  z-index: 100;
  background: white;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  overflow: hidden;
}

.allSingle .productSingle .right .images .cover .vue-magnifier-container {
  position: relative;
}

.allSingle .productSingle .right .images .cover .vue-magnifier-container .preview {
  position: relative;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
  width: 100%;
  height: 30rem;
  display: block;
  clear: both;
  margin: 0 auto;
  cursor: none;
}

.allSingle .productSingle .right .images .cover .vue-magnifier-container .preview .magnifying-glass {
  position: absolute;
  border: 2px solid #F5F5F5;
  border-radius: 50%;
  cursor: none;
  width: 75px;
  height: 75px;
  transform: translate(-37.5px, -37.5px) scale(2);
  background: #fff no-repeat;
  display: none;
  pointer-events: none;
}

.allSingle .productSingle .right .images .cover .vue-magnifier-container .preview:hover .magnifying-glass {
  display: block;
}

.allSingle .productSingle .right .images .hooper {
  overflow: hidden;
  height: auto;
  outline: transparent;
  margin-top: 2rem;
  display: grid;
}

.allSingle .productSingle .right .images .hooper .hooper-list .hooper-navigation.is-rtl button svg {
  background: white;
  border-radius: 100%;
  width: 1.5rem;
  height: 1.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  fill: #000;
}

.allSingle .productSingle .right .images .hooper .hooper-list .hooper-track .hooper-slide {
  cursor: pointer;
  padding-right: 0.5rem;
  width: auto;
}

.allSingle .productSingle .right .images .hooper .hooper-list .hooper-track .hooper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #DFE3E7;
  padding: 1rem;
}

.allSingle .productSingle .right .images .hooper .hooper-list .hooper-track .hooper-slide.is-active.is-current {
  padding-right: 0;
}

.allSingle .productSingle .left h1 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 3rem;
  color: #000;
}

.allSingle .productSingle .left .titleEn {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  padding: 1.5rem 0;
  border-bottom: 2px solid #F5F5F5;
}

.allSingle .productSingle .left .titleEn h2 {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
  opacity: 0.6;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.allSingle .productSingle .left .titleEn .rates {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingle .productSingle .left .titleEn .rates span {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
}

.allSingle .productSingle .left .titleEn .rates i svg {
  width: 1rem;
  height: 1rem;
}

.allSingle .productSingle .left .options {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  border-bottom: 2px solid #F5F5F5;
}

.allSingle .productSingle .left .options h4 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
  opacity: 0.6;
}

.allSingle .productSingle .left .options .option {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingle .productSingle .left .options .option a {
  font-size: 0.9rem;
  font-weight: 500;
  background: #F5F3FC;
  padding: 0.3rem 1rem;
  display: grid;
  border-radius: 5rem;
  color: #9087CE;
}

.allSingle .productSingle .left .options .option:first-child a {
  color: #000;
  opacity: 0.8;
}

.allSingle .productSingle .left .options .brand {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingle .productSingle .left .options .brand .brandPic {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingle .productSingle .left .options .brand .brandPic a {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
}

.allSingle .productSingle .left .options .brand .brandPic img {
  height: 1.5rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allSingle .productSingle .left .productDetail {
  display: grid;
  grid-template-columns: 1fr auto;
}

.allSingle .productSingle .left .productDetail .rightDetail {
  border-left: 2px solid #F5F5F5;
  padding: 2rem 0;
}

.allSingle .productSingle .left .productDetail .rightDetail .abilityTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  grid-gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
  margin-left: 2rem;
}

.allSingle .productSingle .left .productDetail .rightDetail .abilityTitle h4 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
}

.allSingle .productSingle .left .productDetail .rightDetail .abilityTitle button {
  font-size: 0.85rem;
  font-weight: 300;
  background: #F5F3FC;
  padding: 0.3rem 1rem;
  display: grid;
  border-radius: 5rem;
  color: #475569;
}

.allSingle .productSingle .left .productDetail .rightDetail ul {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  align-items: center;
  margin-left: 2rem;
}

.allSingle .productSingle .left .productDetail .rightDetail ul li {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.8;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: right;
  grid-gap: 0.5rem;
  margin-top: 2rem;
  margin-left: 2rem;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData h4 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData .seller {
  font-size: 0.85rem;
  font-weight: 500;
  color: blue;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData ul {
  display: grid;
  grid-template-columns: repeat(8, auto);
  justify-content: right;
  align-items: center;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData ul .unActive {
  cursor: pointer;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData ul .active {
  display: grid;
  grid-template-columns: 1fr auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 5rem;
  cursor: pointer;
  border: 1px solid #F9AB3B;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData ul i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.3rem;
  height: 1.4rem;
  border-radius: 100%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.allSingle .productSingle .left .productDetail .rightDetail .productData ul i svg {
  width: 1.3rem;
  height: 1.3rem;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData ul span {
  color: #6f6f6f;
  font-size: 0.8rem;
  font-weight: 300;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData .customSelect {
  min-width: 10rem;
  position: relative;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData .customSelect .categoryShow {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0.5rem 1rem;
  grid-gap: 1rem;
  border-radius: 5rem;
  cursor: pointer;
  background: #F6F5FC;
  z-index: 81;
  position: relative;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData .customSelect .categoryShow h4 {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 400;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData .customSelect .categoryShow i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData .customSelect .categoryShow i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #475569;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData .customSelect ul {
  position: absolute;
  top: 57%;
  right: 0;
  width: 100%;
  background: #F6F5FC;
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
  direction: ltr;
  overflow: hidden;
  border: 1.4px solid #F5F5F5;
  z-index: 80;
  display: block;
  padding-top: 1rem;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData .customSelect ul .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 10rem;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData .customSelect 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;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData .customSelect ul li:hover {
  background: #f5f5f5;
}

.allSingle .productSingle .left .productDetail .rightDetail .productData:last-child {
  grid-template-columns: auto auto;
}

.allSingle .productSingle .left .productDetail .rightDetail .priceProduct {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 2rem;
  border-bottom: 2px solid #F5F5F5;
  padding-bottom: 2rem;
}

.allSingle .productSingle .left .productDetail .rightDetail .priceProduct h4 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
}

.allSingle .productSingle .left .productDetail .rightDetail .priceProduct .price {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allSingle .productSingle .left .productDetail .rightDetail .priceProduct .price h3 {
  font-size: 1.9rem;
  font-weight: 500;
  color: #00C58D;
}

.allSingle .productSingle .left .productDetail .rightDetail .priceProduct .price h3 span {
  font-size: 1.2rem;
  letter-spacing: 0.1px;
  color: #475569;
}

.allSingle .productSingle .left .productDetail .rightDetail .priceProduct .price s {
  font-size: 1rem;
  font-weight: 300;
  color: #e3342f;
}

.allSingle .productSingle .left .productDetail .rightDetail .availableProduct {
  margin-top: 2rem;
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
}

.allSingle .productSingle .left .productDetail .rightDetail .availableProduct span {
  background: rgba(204, 34, 34, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 5rem;
  font-weight: 500;
  color: #000;
}

.allSingle .productSingle .left .productDetail .rightDetail .addCart {
  margin-left: 2rem;
}

.allSingle .productSingle .left .productDetail .rightDetail .addCart button {
  background: #67B930;
  padding: 0.7rem;
  color: white;
  font-size: 1.3rem;
  font-weight: 500;
  border-radius: 5rem;
  margin-top: 2rem;
  width: 100%;
  display: grid;
  height: 3.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.allSingle .productSingle .left .productDetail .rightDetail .addCart i {
  display: grid;
  align-items: center;
  justify-content: center;
}

.allSingle .productSingle .left .productDetail .rightDetail .addCart i .loading {
  fill: white;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.allSingle .productSingle .left .productDetail .rightDetail .addCart .empty {
  background: #e3342f;
}

.allSingle .productSingle .left .productDetail .leftDetail .qrDetail {
  width: 11rem;
  padding: 2rem;
  padding-top: 1rem;
  border-bottom: 2px solid #F5F5F5;
}

.allSingle .productSingle .left .productDetail .leftDetail .qrDetail h3 {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 1rem;
  opacity: 0.7;
}

.allSingle .productSingle .left .productDetail .leftDetail .sellerDetail {
  width: 11rem;
  padding: 2rem;
  padding-left: 0;
}

.allSingle .productSingle .left .productDetail .leftDetail .sellerDetail h3 {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 1rem;
  opacity: 0.7;
}

.allSingle .productSingle .left .productDetail .leftDetail .sellerDetail .customSelect {
  border: 2px solid #000;
  width: 100%;
  position: relative;
  border-radius: 5rem;
}

.allSingle .productSingle .left .productDetail .leftDetail .sellerDetail .customSelect i {
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  display: grid;
  align-items: center;
}

.allSingle .productSingle .left .productDetail .leftDetail .sellerDetail .customSelect i svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: #475569;
}

.allSingle .productSingle .left .productDetail .leftDetail .sellerDetail .customSelect select {
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: 300;
  color: #475569;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 0.4rem 0.6rem;
}

.allSingle .productSingle .left .productDetail .leftDetail .sellerDetail h4 {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  margin-top: 1rem;
  margin-bottom: 0.2rem;
  opacity: 0.4;
}

.allSingle .productSingle .left .productDetail .leftDetail .sellerDetail h5 {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #FF8A66;
}

.allSingle .productSingle .left .productDetail .leftDetail .sellerDetail ul {
  display: grid;
  grid-gap: 1rem;
  margin-top: 2rem;
}

.allSingle .productSingle .left .productDetail .leftDetail .sellerDetail ul li {
  display: grid;
  grid-template-columns: 1fr;
}

.allSingle .productSingle .left .productDetail .leftDetail .sellerDetail ul li span {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 300;
  color: #000;
}

.allSingle .productSingle .left .productDetail .leftDetail .sellerDetail ul li span:last-child {
  color: #475569;
  opacity: 0.7;
  letter-spacing: 1px;
}

.allSingle .singleDetail {
  margin-top: 6rem;
}

.allSingle .singleDetail .tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
  margin-bottom: 4rem;
}

.allSingle .singleDetail .tabs .tab button {
  background: transparent;
  color: #475569;
  font-weight: 300;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
}

.allSingle .singleDetail .tabs .tab .active {
  background: #F9AB3B;
  box-shadow: 0 10px 10px rgba(255, 144, 0, 0.2);
  border-radius: 5rem;
  color: white;
}

.allSingle .singleDetail .propertySingle ul li {
  display: grid;
  grid-template-columns: 25rem 1fr;
  grid-gap: 1rem;
  margin-bottom: 1rem;
}

.allSingle .singleDetail .propertySingle ul li h4,
.allSingle .singleDetail .propertySingle ul li p {
  padding: 1rem;
  background: #F2F3F3;
  color: #475569;
  font-weight: 300;
  font-size: 0.9rem;
  border-radius: 5rem;
}

.allSingle .singleDetail .propertySingle ul li p {
  background: #F8F9FB;
}

.allSingle .singleDetail .descriptionSingle .description {
  margin-bottom: 2rem;
}

.allSingle .singleDetail .descriptionSingle .description .title {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-bottom: 1rem;
}

.allSingle .singleDetail .descriptionSingle .description .title i {
  display: grid;
  align-items: center;
}

.allSingle .singleDetail .descriptionSingle .description .title i svg {
  width: 1.7rem;
  height: 1.7rem;
}

.allSingle .singleDetail .descriptionSingle .description .title h3 {
  color: #2D365D;
  font-size: 1rem;
  font-weight: 500;
}

.allSingle .singleDetail .descriptionSingle .description p {
  color: #475569;
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 2rem;
}

.allSingle .singleDetail .descriptionSingle .description p .image {
  display: grid;
  justify-content: center;
}

.allSingle .singleDetail .commentSingle {
  border-radius: 3rem;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  padding: 1rem;
}

.allSingle .singleDetail .allSingleQuestion {
  border-radius: 3rem;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  padding: 1rem;
  display: grid;
  grid-template-columns: 15rem 1fr;
  grid-gap: 1rem;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend {
  border: 1px solid #F5F5F5;
  border-radius: 2rem;
  padding: 1rem;
  position: -webkit-sticky;
  position: sticky;
  top: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend i {
  display: grid;
  justify-content: center;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend i svg {
  width: 4rem;
  height: 4rem;
  fill: #475569;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend p {
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
  text-align: center;
  margin-top: 1rem;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend p .image {
  display: grid;
  justify-content: center;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend h3 {
  margin-top: 1rem;
  border: 1px solid #F9AB3B;
  padding: 0.5rem;
  color: #F9AB3B;
  font-size: 0.8rem;
  font-weight: 300;
  text-align: center;
  transition: all 0.3s ease-in-out;
  border-radius: 10px;
  cursor: pointer;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionSends .allSingleQuestionSend h3:hover {
  background: #F9AB3B;
  color: white;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem {
  padding: 1rem 0;
  border-bottom: 1px solid #F5F5F5;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionTitle {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionTitle i {
  display: grid;
  align-items: center;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionTitle i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #F9AB3B;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionTitle p {
  font-size: 0.95rem;
  font-weight: 500;
  color: #475569;
  letter-spacing: 0.1px;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionAnswers .allSingleQuestionAnswer {
  padding: 1rem;
  border-radius: 10px;
  background: #f5f5f5;
  margin-top: 1rem;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionAnswers .allSingleQuestionAnswer h4 {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionAnswers .allSingleQuestionAnswer p {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.9;
}

.allSingle .singleDetail .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;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionItemSend span {
  font-size: 0.9rem;
  font-weight: 500;
  color: #F9AB3B;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionItemSend i {
  display: grid;
  align-items: center;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem .allSingleQuestionItemSend i svg {
  width: 0.6rem;
  height: 0.6rem;
  fill: #F9AB3B;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionItems .allSingleQuestionItem:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionEmpty {
  display: grid;
  align-items: center;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionEmpty i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allSingle .singleDetail .allSingleQuestion .allSingleQuestionBody .allSingleQuestionEmpty i svg {
  width: 5rem;
  height: 5rem;
  fill: #475569;
  opacity: 0.8;
}

.allSingle .singleDetail .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) {
  .allSingle .productSingle {
    display: block;
  }

  .allSingle .productSingle .right .images .cover .vue-magnifier-container {
    position: relative;
  }

  .allSingle .productSingle .right .images .cover .vue-magnifier-container .preview {
    height: 17rem;
  }

  .allSingle .productSingle .left h1 {
    font-size: 1.2rem;
    margin-top: 1rem;
  }

  .allSingle .productSingle .left .options {
    grid-template-columns: 1fr;
    grid-gap: 2rem;
  }

  .allSingle .productSingle .left .productDetail {
    display: block;
  }

  .allSingle .productSingle .left .productDetail .rightDetail {
    border-left: 0;
  }

  .allSingle .productSingle .left .productDetail .rightDetail .addCart {
    margin-left: 0;
  }

  .allSingle .productSingle .left .productDetail .leftDetail {
    display: grid;
    grid-template-columns: 1fr;
  }

  .allSingle .productSingle .left .productDetail .leftDetail .qrDetail {
    width: 100%;
    display: grid;
    justify-content: center;
    padding: 2rem;
    padding-top: 1rem;
    border-bottom: 2px solid #F5F5F5;
  }

  .allSingle .productSingle .left .productDetail .leftDetail .qrDetail h3 {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    color: #475569;
    margin-bottom: 1rem;
    opacity: 0.7;
  }

  .allSingle .productSingle .left .productDetail .leftDetail .qrDetail div {
    width: 8rem;
  }

  .allSingle .productSingle .left .productDetail .leftDetail .sellerDetail {
    width: 100%;
    padding: 2rem 0;
  }

  .allSingle .singleDetail {
    margin-top: 0;
  }

  .allSingle .singleDetail .tabs {
    grid-template-columns: 1fr 1fr;
  }

  .allSingle .singleDetail .tabs .tab button {
    font-size: 0.8rem;
  }

  .allSingle .singleDetail .propertySingle ul li {
    margin-bottom: 2rem;
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
  }

  .allSingle .singleDetail .allSingleQuestion {
    grid-template-columns: 1fr;
  }
}

.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: #494949;
}

.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: #858585;
}

.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,
.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .rateItemsCount .rateItemsCountItem .rateItemsCountItemBarActive {
  width: 5rem;
  height: 5px;
  background: #D5D5D5;
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .rateItemsCount .rateItemsCountItem .rateItemsCountItemBarActive {
  background: #9087CE;
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircle,
.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActives {
  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: #9087CE;
}

.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActive {
  width: 19px;
  position: absolute;
  background: #9087CE;
  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: #858585;
}

@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 #d5dadd;
  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 label {
  font-size: 0.95rem;
  line-height: 1.692;
  color: #858585;
}

.allComment .allCommentContainerSend .allCommentContainerBottom input {
  padding: 0.5rem;
  background: #f5f5f5;
  border: 2px solid #fff;
  border-radius: 0.2rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
  font-size: 0.75rem;
  font-weight: 300;
}

.allComment .allCommentContainerSend .allCommentContainerBottom input:focus {
  border: 2px solid #9087CE;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  margin-bottom: 1rem;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem textarea {
  padding: 0.5rem;
  background: #f5f5f5;
  border: 2px solid #fff;
  border-radius: 0.2rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
  font-size: 0.75rem;
  font-weight: 300;
  height: 15rem;
  resize: vertical;
  outline-style: none;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem textarea:focus {
  border: 2px solid #9087CE;
}

.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: #9087CE;
  width: 0.7rem;
  height: 0.7rem;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem label {
  font-size: 0.95rem;
  line-height: 1.692;
  color: #000;
  position: relative;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem label i {
  position: absolute;
  left: 1rem;
  top: 0.4rem;
  padding: 0.3rem;
  border-radius: 5rem;
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem label i svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: #9087CE;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem span {
  margin-top: 0.5rem;
  width: 100%;
  padding: 0.5rem;
  background: #f5f5f5;
  border-radius: 0.2rem;
  position: relative;
  color: #475569;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem span i {
  border: 0;
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  margin: auto;
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomItem span i svg {
  fill: #9087CE;
  width: 1rem;
  height: 1rem;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomSuggest {
  margin-bottom: 1rem;
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomSuggest label {
  font-size: 0.95rem;
  line-height: 1.692;
  color: #000;
}

.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: #475569;
}

@media screen and (max-width: 800px) {
  .allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomSuggest .allCategoryPanel .categoryShow h4 {
    font-size: 0.6rem;
  }
}

.allComment .allCommentContainerSend .allCommentContainerBottom .allCommentContainerBottomSuggest .allCategoryPanel .categoryShow i {
  display: grid;
  align-items: center;
  justify-content: center;
  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: 0 0 10px rgba(0, 0, 0, 0.1);
  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: white;
  background: #EF394E;
  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 img {
  width: 4rem;
  height: 1rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.allComment .allCommentContainerSend .allCommentButtons button:last-child {
  display: block;
  background: #7A7A7A;
}

.allComment .allCommentAllow .allCommentAllowItem {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 4rem;
  margin-top: 20px;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemBtn {
  display: grid;
  grid-template-columns: 1fr;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemBtn h3 {
  font-size: 0.9rem;
  color: #475569;
  font-weight: 300;
  text-align: center;
  margin-bottom: 40px;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemBtn h4 {
  text-align: center;
  font-size: 0.9rem;
  color: #5a5a5a;
  font-weight: 300;
  margin-bottom: 10px;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemBtn a {
  font-size: 0.9rem;
  margin-bottom: 20px;
  color: #39D4DF;
  font-weight: 500;
  text-align: center;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemBtn button {
  padding: 0.8rem;
  color: white;
  background: #2D365D;
  border-radius: 5rem;
  text-align: center;
  transition: all 0.3s ease-in-out;
  font-size: 1rem;
  font-weight: 300;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemBtn button:hover {
  background: #969696;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .titleRate {
  margin-bottom: 2rem;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .titleRate h4 {
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  margin-bottom: 0.5rem;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .titleRate h3 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .titleRate h3 span {
  font-weight: 700;
  color: #475569;
  font-size: 2.2rem;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container .rating {
  display: flex;
  justify-content: right;
  overflow: hidden;
  flex-direction: row-reverse;
  position: relative;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container .rating-0 {
  filter: grayscale(100%);
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container .rating > input {
  display: none;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container .rating > label {
  cursor: pointer;
  width: 40px;
  height: 40px;
  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;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container .rating > input:checked ~ label,
.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .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");
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container .rating > input:not(:checked) ~ label:hover,
.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .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='%23d8b11e' 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");
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container .emoji-wrapper {
  width: 100%;
  text-align: center;
  height: 100px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container .emoji-wrapper:before,
.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container .emoji-wrapper:after {
  content: "";
  height: 15px;
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 1;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container .emoji-wrapper:before {
  top: 0;
  background: linear-gradient(to bottom, white 0%, white 35%, rgba(255, 255, 255, 0) 100%);
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container .emoji-wrapper:after {
  bottom: 0;
  background: linear-gradient(to top, white 0%, white 35%, rgba(255, 255, 255, 0) 100%);
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container .emoji {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.3s;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container .emoji > svg {
  margin: 15px 0;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container #rating-1:checked ~ .emoji-wrapper > .emoji {
  transform: translateY(-100px);
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container #rating-2:checked ~ .emoji-wrapper > .emoji {
  transform: translateY(-200px);
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container #rating-3:checked ~ .emoji-wrapper > .emoji {
  transform: translateY(-300px);
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container #rating-4:checked ~ .emoji-wrapper > .emoji {
  transform: translateY(-400px);
}

.allComment .allCommentAllow .allCommentAllowItem .allCommentAllowItemRate .container #rating-5:checked ~ .emoji-wrapper > .emoji {
  transform: translateY(-500px);
}

@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 {
  border-top: 2px solid #F5F3FC;
  padding-top: 1rem;
  margin: 3rem 0;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .showGetLoader {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .showGetLoader .loading {
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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 .allCommentContainerGet .allCommentContainerGetItems .showGetLoader svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: #2D365D;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .emptyComment i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .emptyComment i svg {
  width: 4rem;
  height: 4rem;
  fill: #475569;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .emptyComment h3 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 300;
  color: #475569;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 3rem;
  padding-top: 4rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid #f9f9f9;
}

.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: 500;
  letter-spacing: 0.5px;
  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 span {
  color: #475569;
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.5px;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerCreated {
  margin-top: 1rem;
}

.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: #9087CE;
  padding: 7px 12px;
  text-align: right;
  margin-top: 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerStatusBad,
.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerStatusGood {
  font-size: 0.9rem;
  line-height: 2.23;
  background-color: #fff8f9;
  border: 1px solid #ffbcc7;
  border-radius: 3px;
  color: #e3342f;
  padding: 0.5rem;
  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,
.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerStatusGood i {
  display: grid;
  justify-content: right;
  align-items: center;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerStatusBad i svg,
.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerStatusGood i svg {
  fill: #e3342f;
  width: 1rem;
  height: 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerStatusGood {
  background-color: #f1feff;
  border: 1px solid #c2f2f7;
  color: #9087CE;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerStatusGood i svg {
  fill: #9087CE;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetUser .allCommentContainerRate {
  margin-top: 2rem;
}

.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: #000;
}

.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: #9087CE;
  border-radius: 3px;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentTitle {
  font-size: 1.3rem;
  line-height: 1.158;
  color: #000;
  font-weight: 500;
  border-bottom: 1px solid #f9f9f9;
  padding-bottom: 20px;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentBody {
  font-size: 1rem;
  line-height: 2.71;
  color: #000;
  letter-spacing: 0.5px;
  font-weight: 300;
}

.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: #00C58D;
  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: #000;
  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: #00C58D;
  width: 0.5rem;
  height: 0.5rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentBadItemsContainer label {
  color: #e3342f;
}

.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: 1rem;
  justify-content: right;
  align-items: center;
  color: #000;
  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: #e3342f;
  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: #777;
  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: #777;
  width: 1rem;
  height: 1rem;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer .allCommentContainerAnswerBody {
  background: #FCFCFC;
  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: #F0F3F7;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerAnswer .allCommentContainerAnswerBody .allCommentContainerAnswerBodyBtn .allCommentContainerAnswerBodyBtnItem span {
  color: #777;
  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: #777;
  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: #404040;
  font-size: 0.9rem;
  line-height: 2.25;
  padding: 0.5rem;
  width: 100%;
  resize: vertical;
  background: #FCFCFC;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerReply .allCommentContainerReplyItem {
  padding: 0.5rem;
  background: #F0F3F7;
  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: #777;
}

.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: #777;
  font-size: 0.7rem;
  font-weight: 300;
}

.allComment .allCommentContainerGet .allCommentContainerGetItems .allCommentContainerGetItem .allCommentContainerGetBody .allCommentContainerReply .allCommentContainerReplyItem .allCommentContainerReplyItemP p {
  color: #404040;
  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;
}

@media screen and (max-width: 800px) {
  .allComment {
    padding: 0;
  }
}

.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%;
  cursor: not-allowed;
}

.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%);
  cursor: auto;
}

.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 #F5F5F5;
  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 {
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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: white;
  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;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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%;
  }
}

.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: white;
  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 #DFE3E7;
}

.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: white;
  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 #DFE3E7;
  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 #DFE3E7;
}

.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;
  }
}

.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: white;
  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: #e3342f;
  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 #9087CE;
}

.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;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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%;
  }
}

.allSingleNews {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 2rem;
  margin: auto;
  margin-top: 13rem;
}

.allSingleNews .right .pic {
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  padding: 1rem;
}

.allSingleNews .right .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.allSingleNews .right .postsList {
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin-top: 1rem;
}

.allSingleNews .right .postsList .titleList {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.allSingleNews .right .postsList ul li {
  margin-top: 1rem;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.allSingleNews .right .postsList ul li a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  align-items: center;
}

.allSingleNews .right .postsList ul li a img {
  width: 5rem;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 3px;
}

.allSingleNews .right .postsList 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 .right .postsList ul li a .showInfo h4 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 500;
  color: #475569;
  font-size: 0.8rem;
}

.allSingleNews .right .postsList ul li a .showInfo span {
  font-size: 0.7rem;
  color: #475569;
  font-weight: 300;
}

.allSingleNews .right .postsList ul li a:hover .showInfo h4 {
  color: #F9AB3B;
}

.allSingleNews .left h1 {
  font-size: 1.7rem;
  font-weight: 500;
  color: black;
  line-height: 3rem;
}

.allSingleNews .left .leftItem {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  padding: 1rem 0;
  margin: 1rem 0;
  border-top: 2px dashed #E4E7E8;
  border-bottom: 2px dashed #E4E7E8;
}

.allSingleNews .left .leftItem .option h3 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
}

.allSingleNews .left .leftItem .option h4 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  background: #F8F9FB;
  border-radius: 5rem;
  padding: 0.2rem 0.5rem;
}

.allSingleNews .left .leftItem .option a {
  font-size: 0.9rem;
  font-weight: 300;
  color: black;
  margin-top: 0.5rem;
}

.allSingleNews .left .leftItem .option a span {
  font-size: 1.1rem;
}

.allSingleNews .left p {
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  line-height: 2rem;
  margin-bottom: 1rem;
}

.allSingleNews .left p .image {
  display: grid;
  justify-content: center;
}

.allSingleSeller {
  margin: auto;
  margin-top: 13rem;
}

.allSingleSeller .topSeller {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  overflow: hidden;
}

.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 h1 {
  font-size: 1.5rem;
  font-weight: 500;
  color: #475569;
}

.allSingleSeller .topSeller .detail p {
  padding: 1rem;
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  line-height: 2rem;
}

.allSingleSeller .topSeller .map-wrapper {
  width: 100%;
  height: 25rem;
}

.allSingleSeller .topSeller .holder-logo,
.allSingleSeller .topSeller .mapboxgl-control-container {
  visibility: hidden;
}

.allSingleSeller .productItems {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 1rem;
}

.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;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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;
}

.allProductArchive {
  margin: auto;
  margin-top: 13rem;
}

.allProductArchive .productArchive {
  display: grid;
  grid-template-columns: 18rem 1fr;
  grid-gap: 2rem;
}

.allProductArchive .productArchive .filterArchive .filterItems {
  margin-bottom: 3rem;
  overflow: hidden;
  padding: 0 0.5rem;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterTitle {
  background: #F8F9FB;
  padding: 0.8rem;
  border-radius: 5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterTitle i {
  display: grid;
  align-items: center;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterTitle i svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: black;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterTitle span {
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
}

.allProductArchive .productArchive .filterArchive .filterItems .priceItem {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
}

.allProductArchive .productArchive .filterArchive .filterItems .priceItem span {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
}

.allProductArchive .productArchive .filterArchive .filterItems .priceItem h4 {
  padding: 0.5rem;
  border-radius: 5rem;
  border: 1px solid #E7EBEE;
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  text-align: left;
  letter-spacing: 0.1px;
}

.allProductArchive .productArchive .filterArchive .filterItems .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 15rem;
  direction: ltr;
}

.allProductArchive .productArchive .filterArchive .filterItems .priceFilter {
  background: #FF8A66;
  border-radius: 5rem;
  width: 100%;
  padding: 0.5rem;
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
  transition: all 0.3s ease-in-out;
  margin-top: 1rem;
}

.allProductArchive .productArchive .filterArchive .filterItems .priceFilter:hover {
  background: #ff5724;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories {
  display: grid;
  grid-template-columns: 1fr;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a {
  direction: rtl;
  font-size: 0.9rem;
  font-weight: 500;
  color: black;
  margin-top: 1rem;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a {
  font-size: 0.85rem;
  color: black;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a span {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 1rem;
  margin-right: 1rem;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a span:before {
  content: "";
  width: 17px;
  border-radius: 100%;
  height: 17px;
  background: #b3b3b3;
  border: 2px solid white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a a {
  color: #475569;
  font-weight: 300;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a a span {
  margin-right: 2rem;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a a a span:before {
  content: "";
  width: 1rem;
  border-radius: 100%;
  height: 1rem;
  background: white;
  border: 2px solid #E7EBEE;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.allProductArchive .productArchive .filterArchive .filterItems .filterCategories a:first-child {
  margin-top: 0;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterSearch {
  margin-top: 1rem;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterSearch label {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 5rem;
  border: 1px solid #F5F3FC;
  cursor: text;
  transition: all 0.3s ease-in-out;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterSearch label i {
  display: grid;
  align-items: center;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterSearch label svg {
  width: 1rem;
  height: 1rem;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterSearch label input {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  background: transparent;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterSearch label:focus-within {
  border: 1px solid #FF8A66;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterContainer {
  padding-top: 0.5rem;
  max-height: 15rem;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterContainer .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 15rem;
  direction: ltr;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem {
  direction: rtl;
}

.allProductArchive .productArchive .filterArchive .filterItems .filterContainer .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: #3b3b3b;
  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 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox],
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio] {
    --active: #F9AB3B;
    --active-inner: #fff;
    --focus: 2px rgba(255, 159, 0, 0.5);
    --border: #EEEEEE;
    --border-hover: #EEEEEE;
    --background: #EEEEEE;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 17px;
    border-radius: 5rem;
    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 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:after,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: all 0.3s ease-in-out;
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:checked,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .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 .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:disabled,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:disabled:checked,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:disabled + label,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:disabled + label {
    cursor: not-allowed;
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:hover:not(:checked):not(:disabled),
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:focus,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch),
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:not(.switch) {
    width: 17px;
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):after,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):checked,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:not(.switch):checked {
    --o: 1;
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox] + label,
  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio] + label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 5px;
    top: 2px;
    transform: rotate(var(--r, 20deg));
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox].switch {
    width: 10px;
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    width: 10px;
    height: 10px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 10px;
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:after {
    width: 10px;
    height: 10px;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }

  .allProductArchive .productArchive .filterArchive .filterItems .filterContainer .allProductArchiveFiltersItem input[type=radio]:checked {
    --s: .5;
  }
}

.allProductArchive .productArchive .productContainer .productTitle {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5rem;
  align-items: center;
}

.allProductArchive .productArchive .productContainer .productTitle .right {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: right;
}

.allProductArchive .productArchive .productContainer .productTitle .right i {
  display: grid;
  align-items: center;
}

.allProductArchive .productArchive .productContainer .productTitle .right i svg {
  width: 4rem;
  height: 4rem;
}

.allProductArchive .productArchive .productContainer .productTitle .right .name {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.3rem;
}

.allProductArchive .productArchive .productContainer .productTitle .right .name span {
  font-size: 1.1rem;
  font-weight: 500;
  color: black;
}

.allProductArchive .productArchive .productContainer .productTitle .right .name span:first-child {
  opacity: 0.6;
  font-weight: 300;
}

.allProductArchive .productArchive .productContainer .productTitle .left {
  display: grid;
  justify-content: center;
}

.allProductArchive .productArchive .productContainer .productTitle .left .top {
  background: #F8F9FB;
  width: 3rem;
  height: 3rem;
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  border-radius: 10px;
  display: grid;
  align-items: center;
  justify-content: center;
}

.allProductArchive .productArchive .productContainer .productTitle .left .top .loading {
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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 .productArchive .productContainer .productTitle .left .top svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: #475569;
}

.allProductArchive .productArchive .productContainer .productTitle .left h4 {
  font-size: 0.8rem;
  font-weight: 300;
  color: #475569;
  text-align: center;
  margin-top: 0.5rem;
}

.allProductArchive .productArchive .productContainer .searchProduct {
  margin-top: 2rem;
}

.allProductArchive .productArchive .productContainer .searchProduct label {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.5rem;
  align-items: center;
  padding: 0.9rem 1.4rem;
  border-radius: 5rem;
  border: 1px solid #F5F3FC;
  cursor: text;
  transition: all 0.3s ease-in-out;
}

.allProductArchive .productArchive .productContainer .searchProduct label i {
  display: grid;
  align-items: center;
}

.allProductArchive .productArchive .productContainer .searchProduct label svg {
  width: 1.3rem;
  height: 1.3rem;
}

.allProductArchive .productArchive .productContainer .searchProduct label input {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  background: transparent;
}

.allProductArchive .productArchive .productContainer .searchProduct label:focus-within {
  border: 1px solid #FF8A66;
}

.allProductArchive .productArchive .productContainer .productOrder {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 2rem;
}

.allProductArchive .productArchive .productContainer .productOrder span {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
}

.allProductArchive .productArchive .productContainer .productOrder ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
}

.allProductArchive .productArchive .productContainer .productOrder ul li {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  cursor: pointer;
}

.allProductArchive .productArchive .productContainer .productOrder ul li span {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allProductArchive .productArchive .productContainer .productOrder ul li span:before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 5rem;
  display: grid;
  border: 1px solid #DFE3E7;
}

.allProductArchive .productArchive .productContainer .productOrder ul li .active {
  color: #39D4DF;
}

.allProductArchive .productArchive .productContainer .productOrder ul li .active:before {
  background: #39D4DF;
}

.allProductArchive .productArchive .productContainer .productLists {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  grid-gap: 2rem;
  margin-top: 2rem;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item {
  display: grid;
  position: relative;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .pic {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  background: white;
  border-radius: 30px;
  border: 2px solid white;
  transition: all 0.3s ease-in-out;
  padding: 0 1rem;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .pic img {
  width: 100%;
  height: 20rem;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 30px;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .off {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 5rem;
  background: #F9AB3B;
  padding: 0.3rem 0;
  text-align: center;
  width: 80px;
  font-size: 1.1rem;
  font-weight: 500;
  color: white;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .off:before {
  border-left: 20px solid #F9AB3B;
  content: "";
  position: absolute;
  z-index: 9;
  right: 0;
  top: 1.5rem;
  height: 26px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom: transparent;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .off:after {
  border-left: 20px solid white;
  content: "";
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: -1.2rem;
  height: 20px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom: transparent;
  border-radius: 0 0 0 48px;
  transform: rotate(173deg);
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .rate {
  position: absolute;
  left: 1rem;
  top: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #475569;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .rate i {
  display: grid;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.2rem;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .rate i svg {
  width: 1rem;
  height: 1rem;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .datas {
  position: relative;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .datas .productOptions {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  z-index: 100;
  grid-gap: 1rem;
  position: absolute;
  right: 0;
  left: 0;
  top: -1rem;
  transition: all 0.3s ease-in-out;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .datas .productOptions .productOption {
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .datas .productOptions .productOption i {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 1.4rem;
  height: 1.3rem;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .datas .productOptions .productOption i svg {
  fill: #475569;
  width: 1.3rem;
  height: 1.3rem;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .datas .productOptions .productOption i:nth-child(2) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .datas .productOptions .productOption i .loading {
  fill: #475569;
  width: 1rem;
  height: 1rem;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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 .productArchive .productContainer .productLists .productList .item .datas .productOptions .productOption .active svg {
  fill: #F71938;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .datas .productOptions .productOption:nth-child(1) {
  transition: all 0.2s ease-in-out;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .datas .productOptions .productOption:nth-child(2) {
  transition: all 0.4s ease-in-out;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .datas .productOptions .productOption:nth-child(3) {
  transition: all 0.6s ease-in-out;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .title {
  font-size: 14px;
  font-weight: 300;
  color: #475569;
  text-align: center;
  letter-spacing: 0.6px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-top: 2rem;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .price {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  margin-top: 1rem;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .price s {
  font-size: 1rem;
  color: #e3342f;
  font-weight: 300;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .price h4 {
  font-size: 1.3rem;
  color: #00C58D;
  font-weight: 300;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item .price span {
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 0.1px;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item:hover .datas .productOptions .productOption {
  visibility: visible;
  opacity: 1;
  margin-top: -1rem;
}

.allProductArchive .productArchive .productContainer .productLists .productList .item:hover .pic {
  border: 2px solid #F9AB3B;
}

.allProductArchive .productArchive .productContainer .productLoader {
  display: grid;
  justify-content: center;
  margin-top: 2rem;
}

.allProductArchive .productArchive .productContainer .productLoader .loading {
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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 .productArchive .productContainer .productLoader svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: #475569;
}

@media screen and (max-width: 800px) {
  .allProductArchive .productArchive {
    display: block;
  }

  .allProductArchive .productArchive .productContainer .productOrder {
    display: block;
    margin-top: 2rem;
  }

  .allProductArchive .productArchive .productContainer .productOrder ul {
    grid-template-columns: repeat(auto-fit, minmax(5rem, auto));
    margin-top: 1rem;
  }

  .allProductArchive .productArchive .productContainer .productOrder ul li {
    font-size: 0.8rem;
  }

  .allProductArchive .productArchive .productContainer .productOrder ul li span {
    font-size: 0.8rem;
  }
}

.simple-range-slider .simple-range-slider-bg-bar .simple-range-slider-bar {
  background: #FF8A66 !important;
}

.allNewsArchive {
  border-top: 2px solid #F5F5F5;
  padding-top: 1rem;
  margin: auto;
  margin-top: 12.5rem;
}

.allNewsArchive .archiveAddress {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  margin-bottom: 2rem;
}

.allNewsArchive .archiveAddress span {
  opacity: 0.7;
}

.allNewsArchive .archiveAddress span:last-child {
  opacity: 1;
}

.allNewsArchive .productLoader {
  display: grid;
  justify-content: center;
  margin-top: 2rem;
}

.allNewsArchive .productLoader .loading {
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.allNewsArchive .productLoader svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: #475569;
}

.allNewsArchive ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-gap: 2rem;
}

.allNewsArchive ul li .pic {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  background: white;
  border-radius: 30px;
  border: 2px solid white;
  transition: all 0.3s ease-in-out;
  padding: 1rem;
}

.allNewsArchive ul li .pic img {
  width: 100%;
  height: 13rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 30px;
}

.allNewsArchive ul li .titleItem {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: black;
  margin: 0.5rem 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  line-height: 2rem;
}

.allNewsArchive ul li p {
  font-size: 0.75rem;
  font-weight: 300;
  color: #475569;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  line-height: 2rem;
  height: 5rem;
  padding-top: 0.5rem;
}

.allNewsArchive ul li p:first-child {
  border-top: 1px solid #F5F5F5;
}

.allCartIndex {
  margin-top: 14.5rem;
}

.allCartIndex .cartData {
  margin: auto;
  background: white;
  border-radius: 3rem;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 3rem;
}

.allCartIndex .cartData .backIcon {
  position: absolute;
  top: -1rem;
  left: -2rem;
  z-index: -2;
}

.allCartIndex .cartData .backIcon svg {
  width: 6rem;
  height: 9rem;
}

.allCartIndex .cartData .shape {
  position: absolute;
  top: -2rem;
  left: 90%;
  z-index: -1;
}

.allCartIndex .cartData .shape svg {
  width: 30rem;
  height: 30rem;
}

.allCartIndex .cartData:before {
  content: "";
  position: absolute;
  top: -0.5rem;
  margin: auto;
  height: 100%;
  width: 80%;
  border-radius: 2rem;
  background: #67B930;
  z-index: -1;
  right: 0;
  left: 0;
}

.allCartIndex .cartData .cartManage .cartTitle {
  border-bottom: 2px solid #F5F3FC;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.allCartIndex .cartData .cartManage .cartTitle .right h1 {
  font-size: 1rem;
  font-weight: 500;
  color: black;
}

.allCartIndex .cartData .cartManage .cartTitle .right p {
  font-size: 0.75rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
  margin-top: 0.5rem;
}

.allCartIndex .cartData .cartManage .cartTitle .left label {
  display: grid;
  grid-template-columns: 1fr auto;
  background: linear-gradient(to left, #FFF4F1 30%, #F8F9FB 100%);
  border-radius: 5rem;
}

.allCartIndex .cartData .cartManage .cartTitle .left label input {
  background: transparent;
  color: #475569;
  font-size: 0.8rem;
  font-weight: 400;
  padding: 0.5rem 1rem;
}

.allCartIndex .cartData .cartManage .cartTitle .left label .loading {
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.allCartIndex .cartData .cartManage .cartTitle .left label svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: white;
}

.allCartIndex .cartData .cartManage .cartTitle .left label button {
  border-radius: 5rem;
  background: #F9AB3B;
  padding: 0.3rem 1rem;
  font-size: 0.75rem;
  font-weight: 300;
  color: white;
}

.allCartIndex .cartData .cartManage .cartTitle .left label .accept {
  background: #00C58D;
}

.allCartIndex .cartData .cartManage .cartTitle .left label .fail {
  background: #e3342f;
}

.allCartIndex .cartData .cartManage .cartBot {
  display: grid;
  grid-template-columns: 1fr 16rem;
  grid-gap: 2rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartCount {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
  border-bottom: 2px solid #F5F3FC;
  padding-bottom: 1rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartCount i {
  display: grid;
  align-items: center;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartCount i svg {
  width: 2rem;
  height: 2rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartCount h4 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #777;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartCount h4 span {
  color: #475569;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
  border-radius: 2rem;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartPic img {
  width: 100%;
  max-width: 10rem;
  height: 8rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .titleCart {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .titleCart a {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .titleCart button {
  background: #FFEBEC;
  border-radius: 5rem;
  padding: 0.3rem 1rem;
  color: #EE232B;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartPrice {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: space-between;
  align-items: center;
  grid-gap: 2rem;
  margin-top: 1rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartPrice .price {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartPrice .price s {
  font-size: 0.85rem;
  color: #e3342f;
  font-weight: 300;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartPrice .price h4 {
  font-size: 1rem;
  color: #00C58D;
  font-weight: 300;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartPrice .price span {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  letter-spacing: 0.1px;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartPrice .seller {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartPrice .seller h4 {
  font-size: 0.85rem;
  color: #475569;
  font-weight: 300;
  opacity: 0.7;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartPrice .seller span {
  font-size: 0.8rem;
  font-weight: 300;
  color: #333;
  letter-spacing: 0.1px;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartDetail {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: space-between;
  align-items: center;
  grid-gap: 2rem;
  margin-top: 1rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartDetail .productCount {
  display: grid;
  grid-template-columns: auto 1fr auto;
  border: 1px solid #F5F5F5;
  border-radius: 10px;
  width: 5rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartDetail .productCount span {
  color: #475569;
  font-size: 0.85rem;
  font-weight: 300;
  padding: 0.3rem;
  display: grid;
  align-items: center;
  justify-content: center;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartDetail .productCount button {
  color: #475569;
  padding: 0.2rem 0.5rem;
  font-size: 0.95rem;
  background: transparent;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartDetail .productSize {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartDetail .productSize h4 {
  font-size: 0.85rem;
  color: #475569;
  font-weight: 300;
  opacity: 0.7;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartDetail .productSize span {
  font-size: 0.8rem;
  font-weight: 300;
  color: #333;
  letter-spacing: 0.1px;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartDetail .productColors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1rem, auto));
  justify-content: right;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartDetail .productColors .productColor {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartDetail .productColors .productColor .color {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 2rem;
  padding: 0.3rem 0.5rem;
  grid-gap: 0.5rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartDetail .productColors .productColor .color i {
  display: grid;
  align-items: center;
  justify-content: right;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartDetail .productColors .productColor .color i svg {
  width: 1rem;
  height: 1rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartDetail .productColors .productColor .color span {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
}

.allCartIndex .cartData .cartManage .cartBot .right .loaders .loaderItem {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 2rem;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  height: 150px;
}

.allCartIndex .cartData .cartManage .cartBot .right .loaders .loaderItem .loader {
  width: 517px;
  height: 80px;
}

.allCartIndex .cartData .cartManage .cartBot .right .loaders .loaderItem .loader .avatar {
  float: right;
  width: 100px;
  height: 100px;
  background-color: #F7F7F7;
  border-radius: 12%;
  margin: 8px;
  background-image: linear-gradient(90deg, #E5E5E5 10px, #c5c5c5 30px, #E5E5E5 80px);
  background-size: 600px;
  -webkit-animation: shine-avatar 1.5s infinite linear;
          animation: shine-avatar 1.5s infinite linear;
}

.allCartIndex .cartData .cartManage .cartBot .right .loaders .loaderItem .loader .line {
  float: right;
  width: 201px;
  height: 16px;
  border-radius: 10px;
  background-image: linear-gradient(90deg, #E5E5E5 10px, #c5c5c5 30px, #E5E5E5 80px);
  background-size: 600px;
  -webkit-animation: shine-lines 1.5s infinite linear;
          animation: shine-lines 1.5s infinite linear;
  margin-top: 1rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .loaders .loaderItem .loader .avatar + .line {
  width: 400px;
  margin-top: 1rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .loaders .loaderItem .loader .line ~ .line {
  background-color: #ddd;
}

@-webkit-keyframes shine-lines {
  0% {
    background-position: -100px;
  }

  40%, 100% {
    background-position: 500px;
  }
}

@keyframes shine-lines {
  0% {
    background-position: -100px;
  }

  40%, 100% {
    background-position: 500px;
  }
}

@-webkit-keyframes shine-avatar {
  0% {
    background-position: -500px;
  }

  40%, 100% {
    background-position: 216px;
  }
}

@keyframes shine-avatar {
  0% {
    background-position: -500px;
  }

  40%, 100% {
    background-position: 216px;
  }
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .loaders {
  margin-bottom: 1rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .loaders i {
  display: grid;
  align-items: center;
  justify-content: center;
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .loaders i .loading {
  width: 3.5rem;
  height: 3.5rem;
  fill: #FF8A66;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .address {
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 1.5rem;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .address .titleAddress {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .address .titleAddress i {
  display: grid;
  align-items: center;
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .address .titleAddress i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #e3342f;
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .address .titleAddress span {
  font-size: 1rem;
  font-weight: 500;
  color: #e3342f;
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .address .active i svg {
  fill: #00C58D;
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .address .active span {
  color: #00C58D;
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .address .add i svg {
  fill: #475569;
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .address .add span {
  color: #475569;
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .address p {
  font-size: 0.85rem;
  color: #475569;
  font-weight: 300;
  margin-top: 1rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .address .nameAddress {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .address .nameAddress h5 {
  font-weight: 500;
  color: black;
  font-size: 0.8rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .address .nameAddress button {
  border-radius: 5rem;
  padding: 0.3rem 1rem;
  margin-right: 0.5rem;
  background: rgba(0, 197, 141, 0.1);
  color: #00C58D;
}

.allCartIndex .cartData .cartManage .cartBot .right .allAddress .address .nameAddress button:last-child {
  background: #FFEBEC;
  color: #EE232B;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartTime {
  border-top: 2px solid #F5F3FC;
  padding-top: 2rem;
  margin-top: 2rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartTime .cartDaysTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartTime .cartDaysTitle i {
  display: grid;
  align-items: center;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartTime .cartDaysTitle i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #475569;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartTime .cartDaysTitle span {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartTime ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  grid-gap: 2rem;
  align-items: center;
  margin-top: 2rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartTime ul li h3 {
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartTime 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;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartTime ul li .dayItem h4 {
  font-size: 0.9rem;
  text-align: center;
  font-weight: 500;
  color: #475569;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartTime ul li .dayItem h5 {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  text-align: center;
  font-weight: 300;
  letter-spacing: 0.1px;
  color: #475569;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartTime ul li .dayItem div {
  position: relative;
  cursor: pointer;
  border: 2px solid #DFE3E7;
  padding: 1rem;
  border-radius: 1.5rem;
  margin-top: 0.5rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartTime ul li .dayItem .active {
  border: 2px solid #67B930;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartTime ul li .dayItem .active h4 {
  color: #00867D;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartTime ul li .dayItem .active i {
  position: absolute;
  right: 0;
  left: 0;
  bottom: -0.5rem;
  display: grid;
  justify-items: center;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartTime ul li .dayItem .active i h4 {
  width: 40%;
  display: grid;
  background: white;
  position: relative;
  justify-content: center;
}

.allCartIndex .cartData .cartManage .cartBot .right .cartTime ul li .dayItem .active i svg {
  fill: #00867D;
  width: 1rem;
  height: 1rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .payMethod {
  border-top: 2px solid #F5F3FC;
  padding-top: 2rem;
  margin-top: 2rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .payMethod .cartDaysTitle {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .payMethod .cartDaysTitle i {
  display: grid;
  align-items: center;
}

.allCartIndex .cartData .cartManage .cartBot .right .payMethod .cartDaysTitle i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #475569;
}

.allCartIndex .cartData .cartManage .cartBot .right .payMethod .cartDaysTitle span {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.allCartIndex .cartData .cartManage .cartBot .right .payMethod ul {
  margin-top: 1rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .payMethod ul li {
  padding: 1rem 0;
  border-bottom: 2px dashed #DFE3E7;
}

.allCartIndex .cartData .cartManage .cartBot .right .payMethod ul li button {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  grid-gap: 1rem;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 500;
  color: #475569;
}

.allCartIndex .cartData .cartManage .cartBot .right .payMethod ul li button i {
  display: grid;
  align-items: center;
  justify-content: center;
}

.allCartIndex .cartData .cartManage .cartBot .right .payMethod ul li button i svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #475569;
}

.allCartIndex .cartData .cartManage .cartBot .right .payMethod ul li button:before {
  content: "";
  border: 2px solid #475569;
  background: white;
  border-radius: 100%;
  width: 0.9rem;
  height: 0.9rem;
}

.allCartIndex .cartData .cartManage .cartBot .right .payMethod ul li .active {
  color: #00C58D;
}

.allCartIndex .cartData .cartManage .cartBot .right .payMethod ul li .active i svg {
  fill: #00C58D;
}

.allCartIndex .cartData .cartManage .cartBot .right .payMethod ul li .active:before {
  border: 2px solid #00C58D;
  background: #00C58D;
}

.allCartIndex .cartData .cartManage .cartBot .left .cartNumber {
  background: #F8F9FB;
  padding: 1rem;
  border-radius: 1.5rem;
}

.allCartIndex .cartData .cartManage .cartBot .left .cartNumber .cartNumberItem {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  grid-gap: 0.5rem;
  border-bottom: 1px solid #E7EBEE;
  padding: 1rem 0;
}

.allCartIndex .cartData .cartManage .cartBot .left .cartNumber .cartNumberItem h4,
.allCartIndex .cartData .cartManage .cartBot .left .cartNumber .cartNumberItem span {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
}

.allCartIndex .cartData .cartManage .cartBot .left .cartNumber .cartNumberItem span {
  opacity: 1;
  letter-spacing: 0.1px;
  color: #2D365D;
}

.allCartIndex .cartData .cartManage .cartBot .left .cartNumber .cartNumberItem:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.allCartIndex .cartData .cartManage .cartBot .left .cartNumber .cartNumberItem:first-child {
  padding-top: 0;
}

.allCartIndex .cartData .cartManage .cartBot .left .cartNumber .cartNumberItem:nth-child(2) span {
  color: #EE232B;
}

.allCartIndex .cartData .cartManage .cartBot .left .cartPay {
  background: #F8F9FB;
  padding: 1rem;
  border-radius: 1.5rem;
  border-bottom: 2px solid #67B930;
  margin-top: 1rem;
}

.allCartIndex .cartData .cartManage .cartBot .left .cartPay h4 {
  font-size: 1rem;
  font-weight: 300;
  color: #2D365D;
}

.allCartIndex .cartData .cartManage .cartBot .left .cartPay h5 {
  font-size: 1.2rem;
  font-weight: 500;
  color: #67B930;
  letter-spacing: 0.1px;
  margin-top: 1rem;
}

.allCartIndex .cartData .cartManage .cartBot .left .nextItem {
  margin-top: 1rem;
  display: grid;
}

.allCartIndex .cartData .cartManage .cartBot .left .nextItem a {
  font-size: 1.2rem;
  font-weight: 500;
  color: white;
  width: 100%;
  border-radius: 5rem;
  background: #67B930;
  box-shadow: 0 0 10px rgba(66, 255, 0, 0.44);
  padding: 0.5rem;
  cursor: pointer;
  text-align: center;
}

@media screen and (max-width: 800px) {
  .allCartIndex .cartData {
    padding: 1rem;
    border-radius: 1rem;
  }

  .allCartIndex .cartData .backIcon {
    left: 0;
  }

  .allCartIndex .cartData .cartManage .cartBot {
    display: block;
  }

  .allCartIndex .cartData .cartManage .cartBot .right .loaders .loaderItem {
    margin-bottom: 2rem;
  }

  .allCartIndex .cartData .cartManage .cartBot .right .loaders .loaderItem .loader {
    width: 300px;
    height: 80px;
  }

  .allCartIndex .cartData .cartManage .cartBot .right .loaders .loaderItem .loader .avatar {
    float: right;
    width: 80px;
    height: 100px;
    background-color: #F7F7F7;
    border-radius: 12%;
    margin: 8px;
    background-image: linear-gradient(90deg, #E5E5E5 10px, #c5c5c5 30px, #E5E5E5 80px);
    background-size: 600px;
    -webkit-animation: shine-avatar 1.5s infinite linear;
            animation: shine-avatar 1.5s infinite linear;
  }

  .allCartIndex .cartData .cartManage .cartBot .right .loaders .loaderItem .loader .line {
    float: right;
    width: 120px;
    height: 16px;
    border-radius: 10px;
    background-image: linear-gradient(90deg, #E5E5E5 10px, #c5c5c5 30px, #E5E5E5 80px);
    background-size: 600px;
    -webkit-animation: shine-lines 1.5s infinite linear;
            animation: shine-lines 1.5s infinite linear;
    margin-top: 1rem;
  }

  .allCartIndex .cartData .cartManage .cartBot .right .loaders .loaderItem .loader .avatar + .line {
    width: 130px;
    margin-top: 1rem;
  }

  .allCartIndex .cartData .cartManage .cartBot .right .loaders .loaderItem .loader .line ~ .line {
    background-color: #ddd;
  }

@-webkit-keyframes shine-lines {
    0% {
      background-position: -100px;
    }

    40%, 100% {
      background-position: 500px;
    }
}

@keyframes shine-lines {
    0% {
      background-position: -100px;
    }

    40%, 100% {
      background-position: 500px;
    }
}

@-webkit-keyframes shine-avatar {
    0% {
      background-position: -500px;
    }

    40%, 100% {
      background-position: 216px;
    }
}

@keyframes shine-avatar {
    0% {
      background-position: -500px;
    }

    40%, 100% {
      background-position: 216px;
    }
}

  .allCartIndex .cartData .cartManage .cartBot .right .cartItem {
    display: block;
    padding: 0.5rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
  }

  .allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartPic {
    display: grid;
    justify-content: center;
  }

  .allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartPic img {
    max-width: 100%;
    height: 8rem;
  }

  .allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .titleCart {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .titleCart a {
    font-size: 0.8rem;
  }

  .allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .titleCart button {
    padding: 0.3rem 0.5rem;
  }

  .allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartPrice {
    grid-template-columns: 1fr;
    grid-gap: 2rem;
    margin-top: 1rem;
  }

  .allCartIndex .cartData .cartManage .cartBot .right .cartItem .cartSubject .cartDetail {
    grid-template-columns: 1fr;
  }

  .allCartIndex .cartData .cartManage .cartBot .right .cartTime {
    margin-bottom: 2rem;
  }
}

.allAddAddress {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(135, 135, 135, 0.5);
  z-index: 999;
}

.allAddAddress .CreateAddress {
  background: white;
  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 #DFE3E7;
  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: #e3342f;
  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 #DFE3E7;
  padding: 0 0.5rem;
  background: white;
  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 #F9AB3B;
}

@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 #DFE3E7;
  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: #F9AB3B;
  cursor: pointer;
}

.allAddAddress .CreateAddress .bottomAddress button {
  padding: 0.3rem 1rem;
  background: #e3342f;
  color: white;
  font-size: 0.9rem;
  font-weight: 300;
  border-radius: 5px;
}

@media screen and (max-width: 700px) {
  .allAddAddress .CreateAddress {
    width: 98%;
  }
}

.buyIndex {
  padding-top: 13rem;
  display: grid;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.buyIndex .allBuyItems {
  width: 30rem;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  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 #DFE3E7;
}

.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;
  cursor: pointer;
  border-radius: 0.2rem;
}

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

  .buyIndex .allBuyItems {
    width: 100%;
  }
}

.allTicketIndex .allSendTicket {
  width: 100%;
  height: 100%;
  z-index: 999;
  margin-top: 13rem;
}

.allTicketIndex .allSendTicket h1 {
  font-size: 2rem;
  font-weight: 500;
  color: #475569;
  text-align: center;
  margin-bottom: 1rem;
}

.allTicketIndex .allSendTicket .questions {
  margin: auto;
}

.allTicketIndex .allSendTicket .questions .questionIndex {
  margin-bottom: 1rem;
}

.allTicketIndex .allSendTicket .questions .questionIndex .title {
  background: #f5f5f5;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  z-index: 12;
}

.allTicketIndex .allSendTicket .questions .questionIndex .title h3 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
}

.allTicketIndex .allSendTicket .questions .questionIndex .title i {
  display: grid;
  align-items: center;
}

.allTicketIndex .allSendTicket .questions .questionIndex .title i svg {
  width: 1rem;
  height: 1rem;
  fill: #475569;
}

.allTicketIndex .allSendTicket .questions .questionIndex .description {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 5px;
  margin-top: -10px;
  position: relative;
  z-index: 10;
}

.allTicketIndex .allSendTicket .questions .questionIndex .description p {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
}

.allTicketIndex .allSendTicket .questions .questionIndex .slide-fade-enter-active,
.allTicketIndex .allSendTicket .questions .questionIndex .slide-fade-leave-active {
  transition: all 0.3s ease-in-out;
}

.allTicketIndex .allSendTicket .questions .questionIndex .slide-fade-enter,
.allTicketIndex .allSendTicket .questions .questionIndex .slide-fade-leave-to {
  transform: translateY(-30px);
}

.allTicketIndex .allSendTicket .buttons {
  display: grid;
  justify-content: center;
}

.allTicketIndex .allSendTicket .buttons button {
  padding: 0.3rem 1rem;
  background: #00C58D;
  font-size: 0.85rem;
  font-weight: 300;
  color: white;
  border-radius: 5px;
}

.allTicketIndex .allSendTicket .sendTicket {
  background: white;
  padding: 1rem;
  width: 60%;
  margin: auto;
  border-radius: 10px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

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

.allTicketIndex .allSendTicket .sendTicket .ticketItems {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin-bottom: 1rem;
  grid-gap: 1rem;
}

.allTicketIndex .allSendTicket .sendTicket .ticketItem input {
  padding: 0.5rem;
  background: #fafafa;
  border: 2px solid #fafafa;
  border-radius: 0.2rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
  font-size: 0.9rem;
  line-height: 1.571;
  color: #475569;
  height: 2.5rem;
}

.allTicketIndex .allSendTicket .sendTicket .ticketItem h4 {
  font-size: 0.9rem;
  line-height: 1.692;
  font-weight: 300;
  color: #475569;
  margin-bottom: 0.5rem;
}

.allTicketIndex .allSendTicket .sendTicket .createImage {
  position: relative;
  background: #fafafa;
  margin: 1rem 0;
  min-height: 10rem;
}

.allTicketIndex .allSendTicket .sendTicket .createImage .vue-dropzone {
  min-height: 10rem;
  overflow-y: scroll;
  border-radius: 10px;
  background: #fafafa;
  cursor: pointer;
  border: 2px solid #DFE3E7;
  color: #475569;
}

.allTicketIndex .allSendTicket .sendTicket .createImage .vue-dropzone span {
  margin-right: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.allTicketIndex .allSendTicket .sendTicket .createImage .vue-dropzone .dropzone-custom-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.allTicketIndex .allSendTicket .sendTicket .createImage .vue-dropzone .dropzone-custom-title {
  margin-top: 0;
  color: #00b782;
  font-family: "irsans";
  font-style: normal;
  font-weight: 900;
  font-size: 1rem;
}

.allTicketIndex .allSendTicket .sendTicket .createImage .vue-dropzone .subtitle {
  margin-top: 1rem;
  color: #475569;
  font-family: "irsans";
  font-style: normal;
  font-weight: 500;
  font-size: 0.8rem;
}

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

.allTicketIndex .allSendTicket .sendTicket textarea:focus {
  border: 1px solid #00C58D;
}

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

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

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

.allTicketIndex .allSendTicket .sendTicket .sendTicketButtons .loading {
  fill: white;
  width: 1.2rem;
  height: 1.2rem;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.allCreatePost {
  margin: auto;
  margin-top: 2rem;
}

.allCreatePost .allCreatePostData {
  display: grid;
  grid-template-columns: 1fr 25rem;
  grid-gap: 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: white;
  border-radius: 0.2rem;
  padding: 0.5rem 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .errorsCreate span {
  font-size: 0.75rem;
  font-weight: 400;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItemShow .allCreatePostItem {
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

.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 #9087CE;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
  margin-bottom: 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItem 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 {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #9087CE;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItem .ck.ck-toolbar.ck-toolbar_grouping.ck-reset_all.ck-rounded-corners {
  width: 99%;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItem .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;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .allCreatePostItem .ck.ck-content:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #9087CE;
}

@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 .allCreatePostItem .ck.ck-content {
    width: 98%;
  }
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery {
  margin-bottom: 1rem;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .sendGallery .sendFileItem {
  border-radius: 10px;
  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;
  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: #F9AB3B;
  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: #f1f1f1;
  padding: 1rem;
  border-radius: 10px;
  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: #475569;
  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: #475569;
  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: #475569;
}

.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 #9087CE;
}

.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: #1abc9c;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td .range-slider__range:active::-webkit-slider-thumb {
  background: #1abc9c;
}

.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: #1abc9c;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost .abilityTable tr td .range-slider__range:active::-moz-range-thumb {
  background: #1abc9c;
}

.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 #1abc9c;
}

.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;
  -webkit-animation: arrow-anim 1.5s ease infinite;
          animation: arrow-anim 1.5s ease infinite;
  margin-bottom: 0;
}

@-webkit-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;
  }
}

@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 auto;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost:nth-last-child(5) .abilityTable tr {
  grid-template-columns: 1fr 1fr auto;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost:nth-last-child(4) .abilityTable tr {
  grid-template-columns: 1fr 1fr auto;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost:nth-last-child(3) .abilityTable tr {
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .abilityPost:nth-last-child(2) .abilityTable tr {
  grid-template-columns: 1fr 1fr 1fr auto;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .button {
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  background-color: #F9AB3B;
  color: white;
  box-shadow: 0 2px 4px 0 rgba(255, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

.allCreatePost .allCreatePostData .allCreatePostSubject .button:hover {
  background-color: darkorange;
}

.allCreatePost .allCreatePostData .alert {
  font-size: 0.85rem;
  font-weight: 300;
  color: #e3342f;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail {
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
  border-radius: 10px;
}

.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: 10px;
  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: #475569;
  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 #9087CE;
}

.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: #475569;
  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: #475569;
  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: #475569;
  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: #475569;
  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 #9087CE;
  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: #475569;
}

.allCreatePost .allCreatePostData .allCreatePostDetails .allCreatePostDetail .allCreatePostDetailItems .allCreatePostDetailItem .allTaxes .showAllTaxes .searchTax button:hover {
  background: #9087CE;
  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: #475569;
  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: #9087CE;
  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: #475569;
}

.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 #9087CE;
}

.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: #475569;
  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: -webkit-sticky;
  position: sticky;
  top: 8.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;
  }
}

.myProduct {
  margin-top: 3rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
}

.myProduct .allTopTable .searches {
  padding: 1rem;
}

.myProduct .allTopTable .searches input {
  border-radius: 5rem;
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  padding: 0.5rem 1rem;
  background: linear-gradient(to left, #F8F9FB 50%, #FFF4F1 100%);
  width: 100%;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

.myProduct .allTableContainer {
  background: white;
  margin: 1rem 0;
  border-radius: 10px;
}

.myProduct .allTableContainer .postItem {
  padding: 1rem;
  border-bottom: 1px solid #DFE3E7;
  cursor: pointer;
}

.myProduct .allTableContainer .postItem .postTop {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 1rem;
}

.myProduct .allTableContainer .postItem .postTop .postPic img {
  width: 100%;
  height: 5rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.myProduct .allTableContainer .postItem .postTop .postTitle h3 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}

.myProduct .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;
}

.myProduct .allTableContainer .postItem .postTop .postTitle h3 .count {
  background: rgba(0, 190, 0, 0.5);
}

.myProduct .allTableContainer .postItem .postTop .postOptions {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 0.5rem;
}

.myProduct .allTableContainer .postItem .postTop .postOptions a,
.myProduct .allTableContainer .postItem .postTop .postOptions i {
  display: flex;
  padding: 0.5rem;
  grid-gap: 0.5rem;
  background: #f5f5f5;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
}

.myProduct .allTableContainer .postItem .postTop .postOptions a svg,
.myProduct .allTableContainer .postItem .postTop .postOptions i svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #606265;
}

.myProduct .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;
}

.myProduct .allTableContainer .postItem .postBot ul {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: right;
  grid-gap: 2rem;
  align-items: center;
}

.myProduct .allTableContainer .postItem .postBot ul li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.5rem;
}

.myProduct .allTableContainer .postItem .postBot ul li span {
  font-size: 0.85rem;
  font-weight: 300;
  color: #606265;
}

.myProduct .allTableContainer .postItem .postBot ul li span:last-child {
  color: rgba(0, 0, 0, 0.8);
}

.myProduct .allTableContainer .postItem .postBot ul li div {
  display: block;
}

.myProduct .allTableContainer .postItem .postBot ul li div span span:last-child {
  color: red;
}

.myProduct .allTableContainer .postItem .postBot ul li div span:before {
  content: ",";
  padding: 0 0.5rem;
}

.myProduct .allTableContainer .postItem .postBot ul li div span:first-child:before {
  content: "";
  padding: 0;
}

.myProduct .allTableContainer .postItem .postBot ul li div .count:last-child {
  color: green;
}

.myProduct .allTableContainer .postItem .postBot i {
  display: grid;
  align-items: center;
}

.myProduct .allTableContainer .postItem .postBot i svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #475569;
}

.myProduct .allTableContainer .postItem .postBot i svg:nth-child(2) {
  visibility: hidden;
  position: absolute;
  bottom: 100rem;
}

.myProduct .allTableContainer .postItem:last-child {
  border-bottom: 0;
}

@media screen and (max-width: 800px) {
  .myProduct .allTableContainer .postItem .postTop {
    grid-template-columns: 1fr;
  }

  .myProduct .allTableContainer .postItem .postTop .postTitle h3 {
    font-size: 0.75rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    text-align: center;
  }

  .myProduct .allTableContainer .postItem .postBot ul {
    grid-template-columns: 1fr;
  }
}

.allProfileIndex .widgetItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 2rem;
  margin: 2rem 0;
}

.allProfileIndex .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);
}

.allProfileIndex .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;
}

.allProfileIndex .widgetItems .widgetItem .widgetIcon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
}

.allProfileIndex .widgetItems .widgetItem .widgetSubject {
  position: relative;
  z-index: 5;
}

.allProfileIndex .widgetItems .widgetItem .widgetSubject h4 {
  font-size: 1rem;
  color: white;
  font-weight: 300;
}

.allProfileIndex .widgetItems .widgetItem .widgetSubject h5 {
  font-size: 0.9rem;
  color: #fff;
  font-weight: 300;
  margin-top: 0.5rem;
  letter-spacing: 0.1px;
}

.allProfileIndex .widgetItems .widgetItem:first-child {
  background: linear-gradient(to left, #F9AB3B 0%, #e3342f 100%);
}

.allProfileIndex .widgetItems .widgetItem:nth-child(2) {
  background: linear-gradient(to left, #31A945 0%, #31A991 100%);
}

.allProfileIndex .widgetItems .widgetItem:nth-child(3) {
  background: linear-gradient(to left, #3C31A9 0%, #31A5A9 100%);
}

.allProfileIndex .productItems {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
}

.allProfileIndex .productItems .productItem {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.allProfileIndex .productItems .productItem h3 {
  font-size: 1.1rem;
  font-weight: 500;
  color: #475569;
  padding: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.allProfileIndex .productItems .productItem table {
  width: 100%;
}

.allProfileIndex .productItems .productItem table td span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

@media screen and (max-width: 800px) {
  .allProfileIndex .widgetItems {
    display: block;
  }

  .allProfileIndex .widgetItems .widgetItem {
    margin-bottom: 2rem;
  }

  .allProfileIndex .productItems {
    display: block;
  }

  .allProfileIndex .productItems .productItem {
    margin-bottom: 1rem;
  }
}

.allCheckoutIndex {
  margin-top: 2rem;
}

.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: #9087CE;
}

.allCheckoutIndex .allCheckoutTop ul li:before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 5rem;
  background: #e3342f;
}

.allCheckoutIndex .allCheckoutTop ul li:last-child {
  margin-top: 0.5rem;
}

.allCheckoutIndex .allCheckoutData {
  padding: 1rem;
  background: white;
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.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;
  }
}

.allCheckoutIndex table {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 2rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.allCheckoutIndex table tr {
  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;
}

.allCheckoutIndex table tr .active {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
}

.allCheckoutIndex table tr .active:before {
  border-radius: 10px;
  width: 10px;
  height: 10px;
  background-color: #00C58D;
  content: "";
  display: inline-block;
  margin-left: 5px;
}

.allCheckoutIndex 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;
}

.allCheckoutIndex table tr td {
  font-weight: 300;
  font-size: 0.8rem;
  text-align: center;
  color: #475569;
}

.allCheckoutIndex table tr td svg {
  fill: #475569;
  width: 0.8rem;
  height: 0.8rem;
  cursor: pointer;
}

.allCheckoutIndex table tr td span {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  justify-content: center;
  align-items: center;
}

.allCheckoutIndex table tr td .unActive {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
}

.allCheckoutIndex table tr td .unActive:before {
  border-radius: 10px;
  width: 10px;
  height: 10px;
  background-color: #FC5C63;
  content: "";
  display: inline-block;
  margin-left: 5px;
}

@media screen and (max-width: 1000px) {
  .allCheckoutIndex table tr th,
  .allCheckoutIndex table tr td {
    font-size: 0.5rem;
  }

  .allCheckoutIndex table tr th svg,
  .allCheckoutIndex table tr td svg {
    width: 0.6rem;
    height: 0.6rem;
  }

  .allCheckoutIndex table tr th .unActive:before,
  .allCheckoutIndex table tr td .unActive:before {
    width: 5px;
    height: 5px;
  }
}

.allCheckoutIndex table tr:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.allPays table {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 2rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.allPays .allShowFastPost {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
}

.allPays .allShowFastPost .allShowFastPostPanel {
  background-color: white;
  width: 30rem;
  height: 100%;
  position: relative;
  overflow-y: scroll;
  padding: 1rem;
}

.allPays .allShowFastPost .allShowFastPostPanel .userInfo {
  background: white;
  border-radius: 0.3rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.allPays .allShowFastPost .allShowFastPostPanel .userInfo .userInfoItem {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #DFE3E7;
}

.allPays .allShowFastPost .allShowFastPostPanel .userInfo .userInfoItem span {
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: #475569;
}

.allPays .allShowFastPost .allShowFastPostPanel .userInfo .userInfoItem label {
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: #475569;
}

.allPays .allShowFastPost .allShowFastPostPanel .userInfo .userInfoItem:last-child {
  grid-template-columns: 1fr;
}

.allPays .allShowFastPost .allShowFastPostPanel .userInfo .userInfoItem:last-child span {
  margin-top: 0.5rem;
}

.allPays .allShowFastPost .allShowFastPostPanel .userInfo .userInfoItem:nth-child(even) {
  background: #f5f5f5;
}

.allPays .allShowFastPost .allShowFastPostPanel .buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-bottom: 1rem;
}

.allPays .allShowFastPost .allShowFastPostPanel .buttons button {
  background: white;
  border-radius: 0.3rem;
  padding: 0.5rem;
  font-size: 0.7rem;
  font-weight: 400;
  color: #475569;
}

@media screen and (max-width: 1000px) {
  .allPays .allShowFastPost .allShowFastPostPanel {
    width: 100%;
  }
}

.allAddVariety {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  border-radius: 10px;
  margin-top: 2rem;
}

.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 #DFE3E7;
  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: 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;
}

.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: #475569;
  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 #DFE3E7;
  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: 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 #DFE3E7;
  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 #9087CE;
  box-shadow: 0 0 0 0;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .showAllTaxes .searchTax button {
  width: 2.3rem;
  border: 1px solid #DFE3E7;
  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: #475569;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .showAllTaxes .searchTax button:hover {
  background: #9087CE;
  color: white;
}

.allAddVariety .allCreateVariety .allCreateVarietyItems .allCreateVarietyItem .allTaxes .showAllTaxes .searchTax:hover {
  background: white;
}

.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: #475569;
  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: #9087CE;
  color: white;
}

.allAddVariety .allCreateVariety .alert {
  font-size: 0.85rem;
  font-weight: 300;
  color: #e3342f;
}

.allAddVariety .allCreateVariety input {
  border: 1px solid #DFE3E7;
  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 #9087CE;
}

.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: #475569;
  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 auto;
  text-align: right;
  align-items: center;
  grid-gap: 1rem;
  background: white;
  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: #475569;
  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: #475569;
}

.allAddVariety .allCreateVariety .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;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td textarea:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #9087CE;
}

.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: #1abc9c;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td .range-slider__range:active::-webkit-slider-thumb {
  background: #1abc9c;
}

.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: #1abc9c;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td .range-slider__range:active::-moz-range-thumb {
  background: #1abc9c;
}

.allAddVariety .allCreateVariety .abilityPost .abilityTable tr td .range-slider__range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
}

.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 #DFE3E7;
}

.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;
  -webkit-animation: arrow-anim 1.5s ease infinite;
          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 auto;
}

.allAddVariety .buttons {
  display: grid;
  justify-content: left;
  margin-top: 1rem;
}

.allAddVariety .buttons button {
  background: #F9AB3B;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 300;
  color: white;
  display: grid;
  align-items: center;
}

.allAddVariety .buttons button .loading {
  width: 1rem;
  height: 1rem;
  fill: white;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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) {
  .allAddVariety .allAddVarietyTop {
    display: block;
  }

  .allAddVariety .allAddVarietyTop .allAddVarietyPic img {
    width: 100%;
  }

  .allAddVariety .allAddVarietyTop .allAddVarietySubject ul {
    grid-template-columns: 1fr;
  }
}

.allBecomeSellers {
  margin: auto;
  margin-top: 13rem;
}

.allBecomeSellers .allBecomeSeller .allBecomeSellerTop {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  padding-top: 3rem;
  margin-bottom: 1rem;
}

.allBecomeSellers .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2rem, auto));
  justify-content: center;
  align-items: center;
}

.allBecomeSellers .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel {
  position: relative;
  height: 5px;
}

.allBecomeSellers .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel svg {
  width: 2.2rem;
  height: 2.2rem;
}

.allBecomeSellers .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelBar {
  width: 10rem;
  height: 5px;
  background: #f5f5f5;
}

.allBecomeSellers .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelBarActive {
  width: 10rem;
  height: 5px;
  background: #00C58D;
}

.allBecomeSellers .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 #DFE3E7;
  display: grid;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

.allBecomeSellers .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 #DFE3E7;
  display: grid;
  align-items: center;
  justify-content: center;
}

.allBecomeSellers .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) {
  .allBecomeSellers .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelBar,
  .allBecomeSellers .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelBarActive {
    width: 5rem;
  }

  .allBecomeSellers .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelCircleActive,
  .allBecomeSellers .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelCircle,
  .allBecomeSellers .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels .allBecomeSellerLevel .allBecomeSellerLevelCircleActives {
    width: 2rem;
    height: 2rem;
  }
}

.allBecomeSellers .allBecomeSeller .allBecomeSellerTop .allBecomeSellerLevels span {
  font-size: 0.7rem;
  font-weight: 300;
  color: #475569;
}

.allBecomeSellers .allBecomeSeller .allBecomeSellerTop h4,
.allBecomeSellers .allBecomeSeller .allBecomeSellerTop p {
  font-size: 1.2rem;
  text-align: center;
  font-weight: 700;
  color: #475569;
  margin-top: 3rem;
}

.allBecomeSellers .allBecomeSeller .allBecomeSellerTop p {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1px;
  margin-top: 1rem;
  color: #475569;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  margin-top: 1rem;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .allBecomeTip {
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid red;
  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;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .allBecomeTip i svg {
  fill: #e3342f;
  width: 1.2rem;
  height: 1.2rem;
  -webkit-animation: arrow-anim 1s ease infinite;
          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;
  }
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .allBecomeTip span {
  font-size: 0.85rem;
  font-weight: 500;
  color: #e3342f;
  height: 3rem;
  display: grid;
  align-items: center;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .allBecomeTip p {
  font-size: 0.85rem;
  font-weight: 500;
  color: #475569;
  height: 3rem;
  display: grid;
  align-items: center;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .sellerType {
  margin-top: 3rem;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .sellerType h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #475569;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .sellerType .allCategoryPanel {
  position: relative;
  margin: 1rem 0;
  width: 15rem;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .sellerType .allCategoryPanel .categoryShow {
  border: 1.4px solid #DFE3E7;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0.5rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .sellerType .allCategoryPanel .categoryShow h4 {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 500;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .sellerType .allCategoryPanel .categoryShow i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .sellerType .allCategoryPanel .categoryShow i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #475569;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .sellerType .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;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .sellerType .allCategoryPanel ul .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  height: 15rem;
}

.allBecomeSellers .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;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .sellerType .allCategoryPanel ul li:hover {
  background: #f5f5f5;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .sellerType p {
  font-size: 0.75rem;
  font-weight: 300;
  color: #475569;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 1rem;
  margin-top: 1rem;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem h4 {
  font-size: 0.9rem;
  font-weight: 300;
  color: #475569;
  margin-bottom: 0.5rem;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem input,
.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .num {
  padding: 0.5rem;
  border: 1.4px solid #DFE3E7;
  border-radius: 0.2rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
  font-size: 0.85rem;
  font-weight: 300;
  height: 2.8rem;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem input:focus,
.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .num:focus {
  border: 1.4px solid #00C58D;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .allCategoryPanel {
  position: relative;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .allCategoryPanel .categoryShow {
  border: 1.4px solid #DFE3E7;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0.5rem;
  height: 2.8rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .allCategoryPanel .categoryShow h4 {
  margin-bottom: 0;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 500;
  display: grid;
  align-items: center;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .allCategoryPanel .categoryShow i {
  display: grid;
  justify-content: center;
  align-items: center;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .allCategoryPanel .categoryShow i svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: #475569;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .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;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .allCategoryPanel ul .scroll-area {
  position: relative;
  margin: auto;
  width: 100%;
  height: 15rem;
}

.allBecomeSellers .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;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoItems .personInfoItem .allCategoryPanel ul li:hover {
  background: #f5f5f5;
}

@media screen and (max-width: 700px) {
  .allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoItems {
    grid-template-columns: 1fr;
  }
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoSeller {
  margin-top: 3rem;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoSeller h3 {
  font-size: 1.3rem;
  font-weight: 500;
  color: #475569;
  letter-spacing: 0.5px;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .personInfoSeller .personInfoItems:nth-last-child(1):nth-last-child(1) input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .contactSeller {
  margin-top: 3rem;
}

.allBecomeSellers .allBecomeSeller .allBecomeUserInfo .contactSeller h3 {
  font-size: 1.3rem;
  font-weight: 500;
  color: #475569;
  letter-spacing: 0.5px;
}

.allBecomeSellers .allBecomeSeller .buttons {
  display: grid;
  justify-content: left;
  margin-top: 1rem;
}

.allBecomeSellers .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;
}

.allBecomeSellers .allBecomeSeller .buttons button .loading {
  fill: white;
  width: 1.2rem;
  height: 1.2rem;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.allBecomeSellers .allBecomeSeller .uploadDocument {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  margin-top: 1rem;
}

.allBecomeSellers .allBecomeSeller .uploadDocument h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #475569;
}

.allBecomeSellers .allBecomeSeller .uploadDocument ul {
  margin-top: 1rem;
}

.allBecomeSellers .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;
}

.allBecomeSellers .allBecomeSeller .uploadDocument ul li:before {
  content: "";
  width: 8px;
  height: 8px;
  background: #00C58D;
  border-radius: 5rem;
}

.allBecomeSellers .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 #DFE3E7;
  background: white;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  position: relative;
}

.allBecomeSellers .allBecomeSeller .uploadDocument .sendFileItem .vue-dropzone {
  border-radius: 0.3rem;
  color: black;
  border: 0;
}

.allBecomeSellers .allBecomeSeller .uploadDocument .sendFileItem .vue-dropzone span {
  margin-right: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: black;
}

.allBecomeSellers .allBecomeSeller .uploadDocument .sendFileItem .vue-dropzone .dropzone-custom-content {
  text-align: center;
}

.allBecomeSellers .allBecomeSeller .uploadDocument .sendFileItem .vue-dropzone .dropzone-custom-title {
  margin-top: 0;
  color: #F9AB3B;
  font-family: "irsans";
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
}

.allBecomeSellers .allBecomeSeller .uploadDocument .sendFileItem .vue-dropzone .subtitle {
  margin-top: 1rem;
  color: #475569;
  font-family: "irsans";
  font-style: normal;
  font-weight: 300;
  font-size: 0.8rem;
}

.allBecomeSellers .allBecomeSeller .checkUploaded {
  margin-top: 1rem;
}

.allBecomeSellers .allBecomeSeller .checkUploaded h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #475569;
}

.allBecomeSellers .allBecomeSeller .welcomeSeller {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  margin-top: 1rem;
}

.allBecomeSellers .allBecomeSeller .welcomeSeller i {
  display: grid;
  align-items: center;
  justify-content: center;
}

.allBecomeSellers .allBecomeSeller .welcomeSeller i svg {
  width: 8rem;
  height: 8rem;
}

.allBecomeSellers .allBecomeSeller .welcomeSeller h2,
.allBecomeSellers .allBecomeSeller .welcomeSeller h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #475569;
  text-align: center;
  margin-top: 2rem;
}

.allBecomeSellers .allBecomeSeller .welcomeSeller h3 {
  font-weight: 500;
  font-size: 1rem;
  margin-top: 1rem;
}

.allBecomeSellers .allBecomeSeller .welcomeSeller p {
  color: #475569;
  text-align: center;
  font-weight: 300;
  font-size: 0.85rem;
  margin-top: 1rem;
}

.allBecomeSellers .allBecomeSeller .welcomeSeller .nextButton {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, auto));
  justify-content: center;
  grid-gap: 1rem;
  margin-top: 2rem;
}

.allBecomeSellers .allBecomeSeller .welcomeSeller .nextButton a {
  color: #e3342f;
  text-align: center;
  font-weight: 300;
  font-size: 0.85rem;
  border: 1px solid #e3342f;
  border-radius: 5px;
  padding: 0.5rem 1rem;
}

.allBecomeSellers .allBecomeSeller .welcomeSeller .nextButton a:hover {
  background: #e3342f;
  color: white;
}

.allBecomeSellers .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;
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems {
  width: 40%;
  margin: auto;
  background: white;
  border-radius: 10px;
  padding: 1rem;
  overflow: hidden;
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer {
  display: grid;
  grid-template-columns: 1fr;
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer label {
  color: #475569;
  font-weight: 500;
  font-size: 0.9rem;
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer input {
  direction: ltr;
  text-align: right;
  border: 1.4px solid #DFE3E7;
  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;
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer input:focus {
  border: 1.4px solid #00C58D;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer .buttons {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 1rem;
}

.allBecomeSellers .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;
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer .buttons button:hover {
  background-color: #9087CE;
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer .buttons button:last-child {
  background: #e3342f;
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .showChangeNumContainer .buttons svg {
  fill: #e3342f;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.3rem;
  margin-bottom: 1rem;
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem input {
  direction: ltr;
  text-align: right;
  border: 1.4px solid #DFE3E7;
  padding: 0.5rem;
  color: #475569;
  border-radius: 0.3rem;
  font-size: 0.8rem;
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem input:focus {
  border: 1.4px solid #00C58D;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItem:last-child {
  margin-bottom: 0;
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  align-items: center;
  grid-gap: 1rem;
}

.allBecomeSellers .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);
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton button:last-child {
  background: #9087CE;
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerButton svg {
  fill: #e3342f;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterTime .allHeaderIndexRegisterTimeItem {
  color: #475569;
  font-size: 12px;
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterTime .allHeaderIndexRegisterTimeItem span {
  color: #9087CE;
}

.allBecomeSellers .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: #9087CE;
  border-bottom: 1px dashed #9087CE;
}

.allBecomeSellers .allBecomeSeller .showChangeNum .showChangeNumItems .allHeaderIndexRegisterItemsContainer .allHeaderIndexRegisterItemsContainerDetail {
  color: #475569;
  cursor: pointer;
  font-size: 12px;
}

.allBecomeSellers .alert {
  font-size: 0.8rem;
  font-weight: 300;
  color: #e3342f;
}

.allBecomeSellers table {
  width: 100%;
  border: 1px solid #DFE3E7;
  border-radius: 10px;
  overflow: hidden;
}

.allBecomeSellers table tr {
  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;
}

.allBecomeSellers table tr .active {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
}

.allBecomeSellers table tr .active:before {
  border-radius: 10px;
  width: 10px;
  height: 10px;
  background-color: #00C58D;
  content: "";
  display: inline-block;
  margin-left: 5px;
}

.allBecomeSellers 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;
}

.allBecomeSellers table tr td {
  font-weight: 300;
  font-size: 0.8rem;
  text-align: center;
  color: #475569;
}

.allBecomeSellers table tr td svg {
  fill: #475569;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.allBecomeSellers table tr td img {
  height: 3rem;
  width: 3rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 5rem;
}

.allBecomeSellers table tr td span {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  justify-content: center;
  align-items: center;
}

.allBecomeSellers table tr td .unActive {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
}

.allBecomeSellers table tr td .unActive:before {
  border-radius: 10px;
  width: 10px;
  height: 10px;
  background-color: #FC5C63;
  content: "";
  display: inline-block;
  margin-left: 5px;
}

@media screen and (max-width: 1000px) {
  .allBecomeSellers table tr th,
  .allBecomeSellers table tr td {
    overflow: hidden;
    font-size: 0.5rem;
  }

  .allBecomeSellers table tr th svg,
  .allBecomeSellers table tr td svg {
    width: 0.6rem;
    height: 0.6rem;
  }

  .allBecomeSellers table tr th .unActive:before,
  .allBecomeSellers table tr td .unActive:before {
    width: 5px;
    height: 5px;
  }
}

.allBecomeSellers table tr:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.allProfileIndex {
  padding-top: 12rem;
  margin: auto;
}

.allProfileIndex .allUserIndexLists {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 20px rgba(255, 0, 0, 0.1);
}

.allProfileIndex .allUserIndexLists .userTop {
  filter: grayscale(70%);
}

.allProfileIndex .allUserIndexLists .userTop img {
  width: 100%;
  height: 15rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.allProfileIndex .allUserIndexLists .userLists {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  padding: 0 2rem;
  position: relative;
}

.allProfileIndex .allUserIndexLists .userLists .userLogo {
  margin-top: -6rem;
  position: relative;
}

.allProfileIndex .allUserIndexLists .userLists .userLogo .dz-message,
.allProfileIndex .allUserIndexLists .userLists .userLogo .dropzone {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  display: grid !important;
}

.allProfileIndex .allUserIndexLists .userLists .userLogo .dz-preview.dz-image-preview {
  visibility: hidden !important;
  position: absolute !important;
}

.allProfileIndex .allUserIndexLists .userLists .userLogo 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);
}

.allProfileIndex .allUserIndexLists .userLists .userLogo i svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: #b3b3b3;
}

.allProfileIndex .allUserIndexLists .userLists .userLogo img {
  width: 8rem;
  height: 8rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 100%;
  border: 2px solid #F9AB3B;
}

.allProfileIndex .allUserIndexLists .userLists .allUserIndexListsItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1rem, auto));
  justify-content: right;
  grid-gap: 1rem;
  align-items: center;
}

.allProfileIndex .allUserIndexLists .userLists .allUserIndexListsItems .allUserIndexListsItem a {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
  padding: 1rem;
  display: grid;
}

.allProfileIndex .allUserIndexLists .userLists .allUserIndexListsItems .allUserIndexListsItem .active {
  background: #fff4f1;
  border-bottom: 3px solid #F9AB3B;
}

.allProfileIndex .allUserIndexLists .userLists h1 {
  font-size: 2rem;
  font-weight: 500;
  color: white;
  position: absolute;
  bottom: calc(100% + 1rem);
  right: 12rem;
}

@media screen and (max-width: 800px) {
  .allProfileIndex .allUserIndexLists .userTop img {
    height: 10rem;
  }

  .allProfileIndex .allUserIndexLists .userLists {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .allProfileIndex .allUserIndexLists .userLists h1 {
    right: 8rem;
    font-size: 1.2rem;
  }

  .allProfileIndex .allUserIndexLists .userLists .userLogo {
    margin-top: -4rem;
    margin-right: 1rem;
  }

  .allProfileIndex .allUserIndexLists .userLists .userLogo img {
    width: 6rem;
    height: 6rem;
  }

  .allProfileIndex .allUserIndexLists .userLists .allUserIndexListsItems {
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  }

  .allProfileIndex .allUserIndexLists .userLists .allUserIndexListsItems .allUserIndexListsItem a {
    font-size: 0.75rem;
    padding: 0.5rem;
    text-align: center;
  }
}

.allProfileIndex .allUserIndexInfoPay {
  margin-top: 2rem;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.allProfileIndex .allUserIndexInfoPay h3 {
  margin: 1rem;
  font-weight: 500;
  color: #475569;
  font-size: 1.2rem;
}

.allProfileIndex table {
  width: 100%;
}

.allProfileIndex table tr {
  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;
}

.allProfileIndex table tr .active {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
}

.allProfileIndex table tr .active:before {
  border-radius: 10px;
  width: 10px;
  height: 10px;
  background-color: #00C58D;
  content: "";
  display: inline-block;
  margin-left: 5px;
}

.allProfileIndex 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;
}

.allProfileIndex table tr td {
  font-weight: 300;
  font-size: 0.8rem;
  text-align: center;
  color: #475569;
}

.allProfileIndex table tr td svg {
  fill: #475569;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.allProfileIndex table tr td span {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, auto));
  justify-content: center;
  align-items: center;
}

.allProfileIndex table tr td .unActive {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
}

.allProfileIndex table tr td .unActive:before {
  border-radius: 10px;
  width: 10px;
  height: 10px;
  background-color: #FC5C63;
  content: "";
  display: inline-block;
  margin-left: 5px;
}

@media screen and (max-width: 1000px) {
  .allProfileIndex table tr th,
  .allProfileIndex table tr td {
    overflow: hidden;
    font-size: 0.5rem;
  }

  .allProfileIndex table tr th svg,
  .allProfileIndex table tr td svg {
    width: 0.6rem;
    height: 0.6rem;
  }

  .allProfileIndex table tr th .unActive:before,
  .allProfileIndex table tr td .unActive:before {
    width: 5px;
    height: 5px;
  }
}

.allProfileIndex table tr:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.allProfileIndex .allUserIndexInfoTop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}

.allProfileIndex .allUserIndexInfoTopItem {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin-top: 2rem;
}

.allProfileIndex .allUserIndexInfoTopItem label {
  margin: 1rem;
  font-weight: 500;
  color: #475569;
  font-size: 1.2rem;
  display: grid;
}

.allProfileIndex .allUserIndexInfoTopItem ul {
  margin-top: 1rem;
  min-height: 19.5rem;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.allProfileIndex .allUserIndexInfoTopItem ul li {
  display: grid;
  grid-template-columns: 1fr auto;
  border-bottom: 1px solid #DFE3E7;
  grid-gap: 1rem;
  padding: 1rem;
  height: 6.5rem;
}

.allProfileIndex .allUserIndexInfoTopItem ul li a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
}

.allProfileIndex .allUserIndexInfoTopItem ul li a .userItemPic img {
  width: 5rem;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.allProfileIndex .allUserIndexInfoTopItem ul li a .userItemSubject .userItemSubjectTitle {
  font-size: 0.8rem;
  font-weight: 400;
  height: 2.5rem;
  overflow: hidden;
  color: #475569;
}

.allProfileIndex .allUserIndexInfoTopItem ul li a .userItemSubject .postPriceItem {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: left;
  height: 2.5rem;
  overflow: hidden;
}

.allProfileIndex .allUserIndexInfoTopItem ul li a .userItemSubject .postPriceItem .offPrice {
  display: grid;
  justify-content: left;
}

.allProfileIndex .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%;
}

.allProfileIndex .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;
}

@media screen and (max-width: 800px) {
  .allProfileIndex .allUserIndexInfoTopItem ul li a .userItemPic img {
    width: 3rem;
  }

  .allProfileIndex .allUserIndexInfoTopItem ul li a .userItemSubject .userItemSubjectTitle {
    font-size: 0.7rem;
    height: 2.5rem;
  }

  .allProfileIndex .allUserIndexInfoTopItem ul li a .userItemSubject .postPriceItem {
    height: 2.5rem;
  }

  .allProfileIndex .allUserIndexInfoTopItem ul li a .userItemSubject .postPriceItem .offPrice s {
    font-size: 0.6rem;
  }

  .allProfileIndex .allUserIndexInfoTopItem ul li a .userItemSubject .postPriceItem h3 {
    font-size: 0.75rem;
  }
}

.allProfileIndex .allUserIndexInfoTopItem ul li i {
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.allProfileIndex .allUserIndexInfoTopItem ul li i svg {
  transition: all 0.3s ease-in-out;
  fill: #475569;
  width: 1rem;
  height: 1rem;
}

.allProfileIndex .allUserIndexCommentItems .allUserIndexCommentItem {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: white;
  padding-bottom: 1rem;
}

.allProfileIndex .allUserIndexCommentItems .allUserIndexCommentItem a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 1rem;
  padding: 1rem;
}

.allProfileIndex .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemPic img {
  width: 5rem;
  height: 5rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.allProfileIndex .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemSubject .allUserIndexCommentItemSubjectTitle {
  font-size: 0.9rem;
  font-weight: 400;
  height: 2.5rem;
  overflow: hidden;
  color: #475569;
}

.allProfileIndex .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemSubject .allUserIndexCommentItemSubjectStatus span {
  font-size: 0.8rem;
  color: #475569;
  font-weight: 300;
}

.allProfileIndex .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemSubject .allUserIndexCommentItemSubjectBody {
  margin-top: 1rem;
}

.allProfileIndex .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemSubject .allUserIndexCommentItemSubjectBody p {
  color: #475569;
  font-size: 0.8rem;
  line-height: 36px;
  text-align: right;
}

.allProfileIndex .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemSubject .allUserIndexCommentItemSubjectAccept {
  margin-top: 1rem;
}

.allProfileIndex .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;
}

.allProfileIndex .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemSubject .allUserIndexCommentItemSubjectAccept .active {
  border-color: #4caf50;
  background-color: rgba(76, 175, 80, 0.1);
  color: #2e7b32;
}

.allProfileIndex .allUserIndexCommentItems .allUserIndexCommentItem .allUserIndexCommentItemDelete {
  display: grid;
  justify-content: center;
  align-items: center;
  padding-left: 2rem;
}

.allProfileIndex .allUserIndexCommentItems .allUserIndexCommentItem .allUserIndexCommentItemDelete i {
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.allProfileIndex .allUserIndexCommentItems .allUserIndexCommentItem .allUserIndexCommentItemDelete i svg {
  transition: all 0.3s ease-in-out;
  fill: #475569;
  width: 1rem;
  height: 1rem;
}

@media screen and (max-width: 700px) {
  .allProfileIndex .allUserIndexCommentItems .allUserIndexCommentItem a {
    grid-template-columns: 1fr;
  }

  .allProfileIndex .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemPic {
    display: grid;
    justify-content: center;
  }

  .allProfileIndex .allUserIndexCommentItems .allUserIndexCommentItem a .allUserIndexCommentItemPic img {
    width: 100%;
    height: 8rem;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

.allProfileIndex .allUserIndexInfoPersonal {
  background: white;
  margin-top: 1rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.allProfileIndex .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.allProfileIndex .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem {
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
}

.allProfileIndex .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem input {
  padding: 0.5rem;
  background: #fafafa;
  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;
}

.allProfileIndex .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem label {
  font-size: 0.9rem;
  line-height: 1.692;
  color: #475569;
}

.allProfileIndex .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem h4 {
  height: 2.5rem;
  width: 100%;
  cursor: pointer;
  background: #fafafa;
  border-radius: 0.2rem;
  color: #475569;
  display: grid;
  align-items: center;
  padding-right: 0.5rem;
  font-weight: 300;
}

.allProfileIndex .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem .allUserIndexInfoPersonalItemDate {
  border-radius: 0.2rem;
  overflow: hidden;
  margin-top: 0.5rem;
}

.allProfileIndex .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem .allUserIndexInfoPersonalItemDate input {
  margin-top: 0;
}

.allProfileIndex .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem .allUserIndexInfoPersonalItemDate label {
  padding: 0.3rem 0.5rem;
}

.allProfileIndex .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems .allUserIndexInfoPersonalItem:first-child {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.allProfileIndex .allUserIndexInfoPersonal .allUserIndexInfoPersonalItems:first-child {
  border-top: 0;
}

.allProfileIndex .topSeller {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 2rem;
}

.allProfileIndex .topSeller .detail {
  padding: 1rem;
}

.allProfileIndex .topSeller .detail h4 {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.allProfileIndex .topSeller .detail textarea {
  height: 15rem;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 300;
  color: #475569;
  line-height: 2rem;
  width: 100%;
  border-radius: 5px;
  border: 1px solid #DFE3E7;
  margin-top: 1rem;
}

.allProfileIndex .topSeller .map-wrapper {
  width: 100%;
  height: 20rem;
}

.allProfileIndex .topSeller .holder-logo,
.allProfileIndex .topSeller .mapboxgl-control-container {
  visibility: hidden;
}

.allProfileIndex .infoButton {
  background: #F9AB3B;
  padding: 0.5rem 1rem;
  color: white;
  margin-top: 1rem;
  border-radius: 0.2rem;
}

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

.allShowPay {
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 1rem;
  margin-top: 2rem;
}

.allShowPay .topShowPay .title {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 1rem;
  border-bottom: 1px solid #DFE3E7;
  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: #475569;
  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: #475569;
  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: #475569;
  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: #e3342f;
  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 #DFE3E7;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.allShowPay .topShowPay .detail .botDetail {
  border-bottom: 1px solid #DFE3E7;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.allShowPay .topShowPay .trackPay {
  border-bottom: 1px solid #DFE3E7;
  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: #9087CE;
  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,
.allShowPay .allShowPayContainer .topContainer .allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .rateItemsCount .rateItemsCountItem .rateItemsCountItemBarActive,
.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemBarActive {
  width: 5rem;
  height: 5px;
  background: #f5f5f5;
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemBarActive {
  width: 5rem;
  height: 5px;
  background: #00C58D;
}

.allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircle,
.allShowPay .allShowPayContainer .topContainer .allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActives,
.allComment .allCommentContainerSend .allCommentContainerTop .allCommentContainerTopItems .allCommentContainerTopItemsRate .allCommentContainerTopItemsRateItem .allShowPay .allShowPayContainer .topContainer .rateItemsCount .rateItemsCountItem .rateItemsCountItemCircleActives {
  position: absolute;
  width: 3rem;
  height: 3rem;
  z-index: 2;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid #DFE3E7;
  display: grid;
  align-items: center;
  justify-content: center;
  background-color: #DFE3E7;
  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: #9087CE;
  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: #475569;
  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 #9087CE;
}

.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: #9087CE;
  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: white;
  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: #e3342f;
  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;
  }
}

.allPages {
  margin-top: 12rem;
}

.allPages .map-wrapper {
  width: 100%;
  height: 25rem;
}

.allPages .holder-logo,
.allPages .mapboxgl-control-container {
  visibility: hidden;
}

.allPages .content {
  margin: auto;
  margin-top: 1rem;
}

.allPages .content .address {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2px, auto));
  justify-content: right;
  align-items: center;
}

.allPages .content .address span {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
}

.allPages .content .address span:after {
  content: ">";
  padding: 0 0.5rem;
}

.allPages .content .address span:last-child {
  opacity: 0.7;
}

.allPages .content .address span:last-child:after {
  content: "";
  padding: 0;
}

.allPages .content h1 {
  font-size: 1.7rem;
  font-weight: 700;
  color: #475569;
}

.allPages .content .contact {
  box-shadow: inset 0 0 0 2px #f2f2f2;
  padding: 2rem;
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
}

.allPages .content .contact .contactItems h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: black;
}

.allPages .content .contact .contactItems .contactItem {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: right;
  align-items: center;
  grid-gap: 0.3rem;
  margin-top: 1rem;
}

.allPages .content .contact .contactItems .contactItem span {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
}

.allPages .content .contact .contactItems .contactBody {
  margin-top: 1rem;
}

.allPages .content .contact .contactItems .contactBody h4 {
  font-size: 1rem;
  font-weight: 700;
  color: black;
}

.allPages .content .contact .contactItems .contactBody p {
  font-size: 0.85rem;
  font-weight: 300;
  color: #475569;
  line-height: 1.8rem;
}

.allPages .content .contact .contactItems .contactItemInputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
  align-items: center;
}

.allPages .content .contact .contactItems .contactItemInput {
  display: grid;
  grid-gap: 0.5rem;
  margin-top: 1rem;
}

.allPages .content .contact .contactItems .contactItemInput h3 {
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: #475569;
}

.allPages .content .contact .contactItems .contactItemInput input,
.allPages .content .contact .contactItems .contactItemInput textarea {
  padding: 0.5rem;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: #475569;
  background: transparent;
  transition: all 0.3s ease-in-out;
  box-shadow: inset 0 0 0 2px #f2f2f2;
}

.allPages .content .contact .contactItems .contactItemInput input:focus,
.allPages .content .contact .contactItems .contactItemInput textarea:focus {
  box-shadow: 0 0 5px 0 #F9AB3B;
}

.allPages .content .contact .contactItems .buttons {
  display: grid;
  justify-content: right;
  width: 100%;
  margin-top: 1rem;
}

.allPages .content .contact .contactItems .buttons button {
  font-size: 0.9rem;
  font-weight: 300;
  color: white;
  background: #CC3333;
  padding: 0.4rem 1.5rem;
  display: grid;
}

.allPages .content .contact .contactItems .buttons button .loading {
  width: 1.4rem;
  height: 1.4rem;
  fill: white;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.allPages .page .backImage img {
  width: 100%;
  height: 30rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.allPages .page .pageBlog {
  margin: auto;
  background: white;
  position: relative;
  z-index: 100;
  padding: 2rem;
  border-radius: 5px;
}

.allPages .page .pageBlog .allPagesTitle {
  text-align: center;
}

.allPages .page .pageBlog .allPagesTitle h1 {
  font-size: 2rem;
  font-weight: 500;
  color: #475569;
  letter-spacing: 1px;
}

.allPages .page .pageBlog .allPagesBody {
  padding: 1rem;
}

.allPages .page .pageBlog .allPagesBody p {
  font-size: 1rem;
  letter-spacing: 0.5px;
  font-weight: 300;
  text-align: justify;
  color: #475569;
}

.allPages .page .pageBlog .allPagesBody .image {
  display: grid;
  justify-content: center;
}

.allPages .page .pageBlog .allPagesBody .form {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  margin-top: 2rem;
}

.allPages .page .pageBlog .allPagesBody .form .items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
  align-items: center;
}

.allPages .page .pageBlog .allPagesBody .form .item {
  display: grid;
  grid-gap: 0.5rem;
}

.allPages .page .pageBlog .allPagesBody .form .item h3 {
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: #475569;
}

.allPages .page .pageBlog .allPagesBody .form .item input,
.allPages .page .pageBlog .allPagesBody .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 .page .pageBlog .allPagesBody .form .buttons {
  display: grid;
  justify-content: left;
  width: 100%;
}

.allPages .page .pageBlog .allPagesBody .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 .page .pageBlog .allPagesBody .form .buttons button .loading {
  width: 1.4rem;
  height: 1.4rem;
  fill: white;
  -webkit-animation: arrow-anim2 0.5s ease infinite;
          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);
  }
}

.comparePostsContainer .comparePostsContainerCount {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: #F9AB3B;
  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: #F9AB3B;
  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;
}