:root {
  --back: #f8f9fa;
  --blue: #33bfff;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #525252;
  --dark: #2b2b2b;
  --trans: all 0.3s ease-in-out;
}

::placeholder {
  text-align: right;
  direction: rtl;
  letter-spacing: normal;
}

@font-face {
  font-family: "Sans";
  src: local("Sans"), url(../fonts/IRANSansWeb.ttf) format("truetype");
}

@font-face {
  font-family: "SansB";
  src: local("SansB"), url(../fonts/IRANSansWeb_Bold.ttf) format("truetype");
}

@font-face {
  font-family: "SansM";
  src: local("SansM"), url(../fonts/IRANSansWeb_Medium.ttf) format("truetype");
}

@font-face {
  font-family: "SansL";
  src: local("SansL"),
    url(../fonts/IRANSansWeb_UltraLight.ttf) format("truetype");
}

@font-face {
  font-family: "irSans";
  src: local("irSans"), url(../fonts/irseri.ttf) format("truetype");
}

html,
* {
  padding: 0;
  margin: 0;
  direction: rtl;
  font-family: "Sans";
  outline: none;
  scroll-behavior: smooth;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  overflow-x: hidden;
  background-color: var(--back);
}

a {
  text-decoration: none;
}

ul,
li {
  list-style: none;
}

.progress {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #f2f2f2;
}

.bar {
  background-color: #819ff7;
  width: 0%;
  height: 5px;
  border-radius: 3px;
}

.percent {
  position: absolute;
  display: inline-block;
  top: 3px;
  left: 48%;
}

.ltr {
  text-align: left;
  direction: ltr;
}

.overly.open {
  right: 0;
  transition: all ease-in-out 0.3s;
}

.overly {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  right: -100%;
  z-index: 5;
  transition: all ease-in-out 0.3s;
}

.login {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loginWraper {
  width: 100%;
  padding: 0 1.5rem;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.loginWraper img {
  width: 140px;
}

.loginInputBox {
  width: 100%;
  padding-top: 2rem;
  display: flex;
  flex-flow: column;
}
.loginInputBox.memberLogin {
  align-items: center;
}
.memberLoginBox {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.memberLoginBox img {
  border-radius: 100%;
  box-shadow: 0px 0px 15px rgb(0 0 0 / 10%);
  margin-bottom: 10px;
}
.memberLoginBox span {
  font-size: 13px;
}
.memberLoginBox a#logout {
  background-color: var(--red);
  color: #fff;
  padding: 3px 10px;
  margin-top: 1rem;
  border-radius: 5px;
  box-shadow: 0 1px 1px #ddd;
}
.memberLoginBox a#back {
  color: #000;
  padding: 3px 10px;
  margin-top: 1rem;
  border-radius: 5px;
  box-shadow: 0 1px 1px #ddd;
}

.inputRow {
  width: 100%;
  position: relative;
  margin-bottom: 1.3rem;
}

.inputRow input {
  transition: var(--trans);
  box-shadow: 0px 8px 20px rgb(0 0 0 / 4%);
  width: 100%;
  border: 2px solid #eee;
  border-radius: 10px;
  padding: 0.7rem 2.3rem 0.7rem 0.89rem;
  color: var(--purple);
  letter-spacing: 1.5px;
  font-size: 1rem;
}

.inputRow input:focus {
  border-color: var(--purple);
  caret-color: var(--purple);
  transition: var(--trans);
}

.inputRow svg {
  position: absolute;
  z-index: 10;
  right: 15px;
  color: #8a9197;
  width: 18px;
  top: 18px;
  height: 18px;
}

.loginBtn {
  margin-top: 1.5rem;
  width: 100%;
  background-color: var(--orange);
  color: var(--white);
  border-radius: 10px;
  padding: 0.4rem 0;
  text-align: center;
  box-shadow: 0px 8px 20px rgb(110 80 40 / 4%);
  cursor: pointer;
  transition: var(--trans);
}
.loginBtn:hover {
  opacity: 0.8;
  transition: var(--trans);
}
#spiner {
  transition: var(--trans);
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  top: 0;
  left: 0;
  border-radius: 15px;
}

.spinner {
  margin: 10px auto 0;
  width: 70px;
  text-align: center;
  display: none;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #6f42c1;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.alert.up {
  bottom: 0;
  transition: all 0.3s ease-in-out;
}

.alert.down {
  bottom: -100%;
  transition: all 0.5s ease-in-out;
}

.alert {
  width: 100%;
  position: fixed;
  height: 45px;
  overflow: hidden;
  border-radius: 8px;
  z-index: 140;
}

.alertWraper {
  width: 100%;
  height: 100%;
  display: flex;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  padding: 0 1rem;
}

.alertIcon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.alertWraper.success svg,
.alertWraper.error svg,
.alertWraper.warning svg {
  color: var(--white);
}

.alertWraper.success {
  background-color: var(--green);
  color: var(--white);
}

.alertWraper.error {
  background-color: var(--red);
  color: var(--white);
}

.alertWraper.warning {
  background-color: var(--orange);
  color: var(--white);
}

#topHeader {
  width: 100%;
  background-color: var(--white);
  box-shadow: 0 1px 20px rgb(1 8 0 / 4%);
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  position: fixed;
  flex-direction: column;
  z-index: 20;
  transition: all 0.5s ease-in-out;
}

.logo {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.logo a {
  align-items: center;
  display: flex;
}

.logo div {
  margin-left: 1rem;
}

.logo div svg {
  color: var(--gray-dark);
}

.logo img {
  width: 50px;
}

.notify {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  height: 100%;
}

.notify a {
  position: relative;
  display: inherit;
  width: 40px;
  height: 40px;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 8px;
  margin-left: 0.5rem;
  transition: all 0.3s ease-in;
}

.notify a:last-child {
  margin-left: 0;
  display: none;
}

.notify a span {
  box-shadow: 0 1px 20px rgb(1 8 0 / 4%);
  position: absolute;
  font-size: 0.7rem;
  border-radius: 50%;
  background-color: var(--pink);
  color: var(--white);
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  right: 2px;
  top: 5px;
  border: 2px solid #eee;
}

.notify a svg {
  color: var(--gray-dark);
  width: 20px;
  height: 20px;
}

.notify a:last-child svg {
  color: var(--red);
}

#sidebarToggle {
  display: flex;
  cursor: pointer;
  width: 40px;
  height: 40px;
  align-items: center;
}

.sidebarProfile {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  justify-content: flex-start;
  background-color: #060606;
}
.sidebarProfile img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.sidebarProfile .profile div {
  display: flex;
  flex-direction: column;
}
.sidebarProfile .profile {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-right: 10px;
  width: 100%;
  align-items: center;
  color: #fff;
}
.sidebarProfile .profile span:nth-child(1) {
  font-size: 14px;
  font-weight: bolder;
}
.sidebarProfile .profile span:nth-child(2) {
  font-size: 12px;
  font-weight: lighter;
}
.sidebarProfile .profile a {
  color: var(--gray);
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

#sidebar.opened {
  right: 0px;
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 10px;
}


::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 

::-webkit-scrollbar-thumb {
  background: #888; 
}


::-webkit-scrollbar-thumb:hover {
  background: #555; 
}


#sidebar {
  transition: all 0.5s ease-in-out;
  width: 280px;
  position: fixed;
  background: #191b1d;
  top: 0px;
  right: -100%;
  z-index: 100;
  padding: 1rem;
  height: 100vh;
  box-shadow: 0 1px 20px rgb(1 8 0 / 4%);
}

.menuOpenIcon {
  width: 23px;
  transition: all 0.2s ease-in-out;
  height: 2px;
  background-color: var(--gray-dark);
  position: relative;
}

.menuOpenIcon::after {
  content: "";
  width: 20px;
  height: 2px;
  background-color: var(--gray-dark);
  position: absolute;
  top: -7px;
}

.menuOpenIcon::before {
  content: "";
  width: 25px;
  height: 2px;
  background-color: var(--gray-dark);
  position: absolute;
  top: 7px;
}

.menuCloseIcon {
  width: 25px;
  transition: all 0.2s ease-in-out;
  height: 2px;
  background-color: var(--gray-dark);
  position: relative;
  transform: rotate(-45deg);
}

.menuCloseIcon::after {
  width: 25px;
  height: 2px;
  background-color: var(--gray-dark);
  position: absolute;
  content: "";
  right: 0px;
  top: 0px;
  transform: rotate(-85deg);
}

.searchBox {
  width: 100%;
  position: relative;
}

.searchBox input {
  width: 100%;
  transition: all 0.2s ease-in-out;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.searchBox svg {
  position: absolute;
  left: 10px;
  width: 20px;
  top: 7px;
}

.searchBox input:hover,
.searchBox input:focus {
  background-color: #eee;
  transition: all 0.2s ease-in-out;
  border-color: #eee;
}

#sidebar nav {
  width: 100%;
  display: flex;
  flex-direction: column;
}

#sidebar nav .navBox.active svg,
#sidebar nav .navBox.select svg {
  color: var(--white) !important;
}

#sidebar nav .navBox.active {
  background-color: var(--orange);
  color: var(--white);
}

#sidebar nav .navBox.select {
  background-color: var(--orange);
  color: var(--white);
}

#sidebar nav .navBox.active span,
#sidebar nav .navBox.select span {
  color: var(--white);
}

#sidebar nav .navBox {
  width: 100%;
  transition: all 0.3s ease-in;
  min-height: 40px;
  margin-bottom: 0.5rem;
  justify-content: space-between;
  display: flex;
  border-radius: 8px;
  padding: 0 1rem;
  cursor: pointer;
}

#sidebar nav .navBox div,
#sidebar nav .navBox a {
  align-items: center;
  justify-content: space-between;
  transition: All 0.2s ease;
  display: flex;
}

#sidebar nav .navBox div:nth-of-type(1) svg {
  margin-left: 1rem;
  color: #8b8d93;
}

#sidebar nav .navBox div.up {
  transition: All 0.2s ease;
  transform: rotate(180deg);
}

#sidebar nav .navBox svg {
  width: 20px;
  color: #8b8d93;
}

#sidebar nav .navBox span {
  color: #8b8d93;
  font-size: 0.9rem;
}

#sidebar nav .navBox:not(.active, .select):hover {
  background-color: #313334;
  transition: all 0.3s ease-out;
  cursor: pointer;
}

.menuList.open {
  display: block;
}

.menuList.close {
  display: none;
}

.menuList {
  width: 100%;
  margin: 0.5rem 0 1rem 0;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  border: 1px solid #313334;
  border-radius: 8px;
  position: relative;
  background-color: #313334;
}

.menuList::before {
  content: "";
  width: 10px;
  background-color: #313334;
  height: 10px;
  border: 1px solid #313334;
  position: absolute;
  left: 15px;
  top: -6px;
  transform: rotate(45deg);
  border-bottom: 0;
  border-right: 0;
}

.menuList a {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  padding-right: 1rem;
  color: #8b8d93;
  position: relative;
  border-radius: 8px;
  margin-bottom: 0.8rem;
  transition: all 0.3s ease-in;
}

.menuList a:hover svg,
.menuList a:hover,
.menuList a.subactive,
.menuList a.subactive svg {
  color: #8b8d93;
  transition: all 0.3s ease-in;
}

.menuList a:hover, a.subactive {
  background-color: var(--back);
  color: #666;
}

.menuList a:last-child {
  margin-bottom: 0;
} 
.menuList a svg {
  width: 18px;
  margin-left: 1rem;
  color: var(--gray);
  transition: all 0.3s ease-in;
}
.navBox.active div abbr, .navBox.select div abbr {
  color: #fff;

  background-color: #333;
}
.navBox div abbr {
  position: absolute;
  width: 20px;
  height: 20px;
  color: #333;
  margin-top: -9px;
  background: var(--back);
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 23px;
  margin-right: -11px;
}


.menuList a span {
  position: absolute;
  left: 6px;
  line-height: 23px;
  height: 20px;
  border-radius: 50px;
  padding: 0px 10px;
}

.menuList a span.success {
  color: var(--white);
  background-color: var(--green);
}

.menuList a span.faild {
  color: var(--white);
  background-color: var(--red);
}

.timeSidebar {
  width: 100%;
  margin: 1.5rem 0;
  display: flex;
  justify-content: center;
  border-radius: 8px;
}

.timeSidebar span {
  font-size: 0.9rem;
  color: var(--cyan);
}

#contentMain {
  width: 100%;
  padding: 4.2rem 1rem 1rem 1rem;
}

.navigation {
  width: 100%;
  height: 40px;
  align-items: center;
  display: flex;
  margin: 5px 0;
  background-color: #ffff;
  padding: 0 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgb(110 80 40 / 4%);
}
.navigation a:hover {
  color: var(--orange);
  cursor: pointer;
}
.navigation a {
  color: #6a6a6a;
  font-weight: 400;
  font-size: 0.78em;
  transition: 0.2s;
}

.navigation a:last-child {
  color: #000;
  cursor: pointer;
}

.navigation a:last-child::after {
  content: "";
}

.navigation a::after {
  content: "/";
  color: #cfcfcf;
  letter-spacing: 0.4px;
  font-size: 13px;
  vertical-align: top;
  margin-left: 5px;
  padding-right: 5px;
  font-weight: 400 !important;
}

.amarBoxWraper {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  margin: 1.5rem auto;
}

.amarBox {
  padding: 0.6rem;
  width: 50%;
}

.amarBox .amarBoxInner {
  background-color: #fff;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 0.8rem;
  box-shadow: 0 2px 6px rgb(0 0 0 / 24%);
}

.amarBox .amarBoxInner span {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.amarBox .amarBoxInner span b {
  color: var(--white);
  font-weight: 400;
  font-size: 0.9rem;
}

.amarBox .amarBoxInner.box1 {
  background-color: #29cc39;
}

.amarBox .amarBoxInner.box1 a {
  background-color: #13bf24;
}

.amarBox .amarBoxInner.box2 {
  background-color: #ff6633;
}

.amarBox .amarBoxInner.box2 a {
  background-color: #e64b17;
}

.amarBox .amarBoxInner.box3 {
  background-color: #8833ff;
}

.amarBox .amarBoxInner.box3 a {
  background-color: #6d20d8;
}

.amarBox .amarBoxInner.box4 {
  background-color: #33bfff;
}

.amarBox .amarBoxInner.box4 a {
  background-color: #17a5e6;
}

.amarBox .amarBoxInner a {
  padding: 0.3rem 0.5rem;
  font-size: 0.7rem;
  border-radius: 8px;
  color: var(--white);
}

.amarBox .amarBoxInner svg {
  color: var(--white);
}

.amarBox .amarBoxInner .countValue {
  text-align: center;
  font-size: 2.3rem;
  color: var(--white);
  margin: 1rem 0;
}

.amarBazdid {
  width: 100%;
  margin: 1.5rem 0;
  display: flex;
  flex-flow: row wrap;
}

.amarDevice {
  width: 100%;
  padding: 0.6rem;
}
#reloadPage {
  line-height: 40px;
  display: inline-block;
  font-size: 13px;
  padding: 0px 15px;
  border:2px dashed var(--cyan);
  color: var(--cyan);;
  border-radius: 8px;
  margin-right: 15px;
}


.pImageName {
  margin-bottom: 20px;
  text-align: right;
  width: 100%;
  padding-right: 14px;
  font-weight: 300;
  text-decoration: underline;
}
.amarDeviceIneer {
  width: 100%;
  background-color: #fff;
  padding: 0.8rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 20px rgb(1 8 0 / 4%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.amarDeviceIneer p {
  width: 100%;
  height: 40px;
  align-items: center;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #ddd;
  margin-bottom: 15px;
}
.boxContentInner.hide {
  display: none;
}
.boxContentInner.show {
  display: flex;
}
.boxContentInner {
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.boxContentInner h4 {
  text-decoration: underline;
  text-align: center;
  margin-bottom: 25px;
}

.boxContentMain {
  position: relative;
  width: 100%;
  padding: 0.8rem;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 20px rgb(1 8 0 / 4%);
  margin-top: 1rem;
}
.boxContentMain .boxContentMain_title a {
  background-color: var(--dark);
  color: var(--white);
  display: flex;
  justify-content: space-between;
  border-radius: 8px;
  font-size: 12px;
  padding: 2px 0.8rem;
  align-items: center;
}
.boxContentMain .boxContentMain_title a svg {
  width: 15px;
  margin-right: 10px;
}
.boxContentMain .boxContentMain_title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.boxContentMain .boxContentMain_title span {
  border-bottom: 2px solid var(--purple);
  padding: 3px 10px;
  display: inline-block;
  font-family: "irSans";
}

#uploadGalery {
  width: 100%;
  display: flex;
  flex-flow: wrap row;
  margin: 1rem 0;
  justify-content: flex-start;
}

.uploadBoxBar {
  width: 100%;
  height: 8px;
  background-color: var(--back);
  position: absolute;
  z-index: 10;
  bottom: -18px;
  overflow: hidden;
  border-radius: 8px;
}

.uploadBoxBar .barFill {
  background-color: var(--purple);
  position: absolute;
  right: 0px;
  width: 0%;
  height: 100%;
  transition: all 0.3s ease-in-out;
}

.imagesPreviewInner {
  width: 100%;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uploadOkey {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: var(--white);
  color: var(--cyan);
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.btnUploadNow {
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  position: absolute;
  top: 50%;
  cursor: pointer;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--green);
  color: var(--white);
  z-index: 5;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btnUploadNow svg {
  width: 24px;
}

.imagesPreviewInner img {
  width: 100%;
  display: block;
}

#uploadGalery .imagesPreview {
  width: 50%;
  position: relative;
  padding: 0.8rem;
}

.galleryItem:hover .removeUploadPreview svg {
  color: var(--red);
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}

#uploadGalery .imagesPreview:hover img {
  /* opacity: .8; */
  transition: all 0.5s ease-in-out;
}

#uploadGalery .imagesPreview img {
  width: 100%;
  box-shadow: 0 1px 25px rgb(1 8 0 / 18%);
  border-radius: 8px;
  transition: all 0.5s ease-in-out;

  overflow: hidden;
}

.removeUploadPreview {
  position: absolute;
  top: 15px;
  background-color: #fff;
  left: 15px;
  transition: all 0.5s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 8px;
  box-shadow: 0 0px 5px #ccc;
}

.removeUploadPreview svg {
  width: 20px;
  transition: all 0.5s ease-in-out;
}

#uploadBox.drop {
  border-color: var(--purple);
  transition: all 0.5s ease-in-out;
}

#uploadBox.drop #dragWrap p,
#uploadBox.drop #dragWrap svg {
  color: var(--purple);
  transition: all 0.5s ease-in-out;
}

.fileUploadTags {
  position: absolute;
  top: 40px;
  left: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #eee;
  padding: 12px;
}
.fileUploadTags p {
  font-size: 12px;
  margin-bottom: 5px;
}
.fileUploadTags input:focus {
  background-color: #fff;
  border: 2px solid var(--orange);
}
.fileUploadTags input {
  border-radius: 5px;
  background-color: #eee;
  padding: 2px 12px;
  border: none;
  border: 2px solid #eee;
}
#fileAddTags {
  padding: 2px 12px;
  background-color: var(--purple);
  color: var(--white);
  border-radius: 5px;
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}
.fileUploadTags ul {
  margin-top: 10px;
}
.fileUploadTags ul li {
  border-radius: 5px;
  font-size: 12px;
  display: flex;
  margin-bottom: 5px;
  align-items: center;
  background-color: var(--gray-dark);
  color: var(--white);
  justify-content: center;
  cursor: pointer;
}
.fileUploadTags ul li svg {
  width: 15px;
  margin-right: 8px;
}
#uploadTags {
  display: none;
}

.fileUploadType {
  position: absolute;
  top: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
}

.fileUploadType div {
  background-color: var(--back);
  color: var(--dark);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 32px;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

.fileUploadType div.active {
  background-color: var(--green);
  color: var(--white);
  transition: all 0.3s ease-in-out;
}

#uploadBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 3px dashed #eee;
  padding: 2rem 0;
  position: relative;
  transition: all 0.5s ease-in-out;
}

#dragWrap,
#choseFileWrap {
  display: flex;
  justify-content: center;
  flex-flow: column nowrap;
  align-items: center;
}

#dragWrap svg {
  width: 60px;
  height: 60px;
  color: #ccc;
  margin-bottom: 1rem;
  transition: all 0.5s ease-in-out;
}

#dragWrap p,
#choseFileWrap p {
  font-size: 1.5rem;
  color: #ccc;
  transition: all 0.5s ease-in-out;
}

#choseFileWrap label {
  margin-top: 1.5rem;
  background-color: var(--cyan);
  color: var(--white);
  padding: 0.3rem 1rem;
  border-radius: 8px;
  border: 2px solid var(--cyan);
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}

#choseFileWrap label:hover {
  border: 2px solid var(--cyan);
  background-color: var(--white);
  color: var(--cyan);
  transition: all 0.5s ease-in-out;
}

#choseFileWrap input {
  display: none;
}

.galleryMediaWrap {
  width: 100%;
}

.galleryMediaheader {
  width: 100%;
  background-color: #f8f8f8;
  padding: 0.8rem;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
}
.imageSearch {
  width: 100%;
}
.imageSearch input {
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 100%;
}
.imageSearch input:hover {
  background-color: #f8f8f8;
}

.galleryBody {
  margin: 1rem 0;
  display: flex;
  flex-flow: wrap row;
}
.gallerySeectlItem {
  cursor: pointer;
}
.gallerySeectlItem > .galleryItemInner {
  border: 1px solid #eee;
}

.galleryItem {
  padding: 0.3rem;
  position: relative;
}
.bannerBox {
  width: 50% !important;
}

.galleryUpload:hover p {
  color: var(--dark);
  transition: all 0.5s ease-in-out;
}

.galleryUpload:hover {
  background-color: var(--back);
  transition: background-color 0.3s;
  border-color: var(--dark);
  transition: all 0.5s ease-in-out;
}

.galleryUpload p {
  font-size: 1rem;
  color: #666;
  padding: 0.5rem 0;
  font-weight: 700;
  transition: all 0.5s ease-in-out;
}

.galleryUpload {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  padding: 5px 0;
  justify-content: center;
  height: 100%;
  border: 3px dashed #666;
  transition: all 0.5s ease-in-out;
}

.galleryItemInner {
  width: 100%;
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.galleryItemInner .galleryImage {
  width: 100%;
  border-radius: 8px;
  display: block;
  transition: all 0.5s ease-in-out;
}

.galleryItemInner:hover .galleryImage {
  filter: opacity(0.5);
  transition: all 0.5s ease-in-out;
}

.imageSelected {
  width: 30px;
  background-color: var(--green);
  color: var(--white);
  height: 30px;
  border-radius: 100%;
  position: absolute;
  top: 15px;
  left: 15px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}

.galleryUploadDate {
  position: absolute;
  width: 100%;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.5);
  height: 40px;
  bottom: 0;
  left: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.5rem;
}
.galleryUploadDate span, #fileDate b {
  font-size: 12px;
  background-color: rgba(250, 250, 250, 0.6);
  padding: 2px 8px;
  color: #000;
  border-radius: 5px;
  margin-left: 8px;
}

.pagination {
  margin: 2rem 0 1rem 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  direction: ltr;
}

.pagination div {
  color: black;
  border-radius: 8px;
  cursor: pointer;
  padding: 5px 16px;
  transition: background-color 0.3s;
}

.pagination div.active {
  background-color: var(--purple);
  color: var(--white);
}

.closeRemove:hover {
  background-color: var(--white);
  color: var(--dark);
  transition: all 0.5s ease-in-out;
}

.closeRemove {
  top: -10px;
  color: var(--white);
  width: 30px;
  left: -10px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  background: var(--red);
  cursor: pointer;
  box-shadow: 0 0px 2px #333;
  transition: all 0.5s ease-in-out;
}

.removeItemMain {
  transition: all 0.5s ease-in;
  padding: 0.8rem;
  top: -150%;
  border-radius: 8px;
  box-shadow: 0 0px 30px #555;
  left: 50%;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  transform: translate(-50%, -50%);
  background-color: var(--white);
}

.removeItemMain img {
  width: 100px;
}

.removeItemMain #removeFileInfo {
  padding: 0rem 1rem;
}

.removeItemMain #removeFileInfo p {
  font-size: 1rem;
  font-weight: bold;
}

.removeFileBtn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
}

#removeItem {
  padding: 4px 16px;
  background-color: var(--green);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}

#cancelRemove {
  color: var(--dark);
  padding: 4px 32px;
  cursor: pointer;
  border-radius: 8px;
  background-color: #eee;
}

#emptyResult {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-flow: column nowrap;
  align-items: center;
  padding: 20px 0;
}

#emptyResult svg {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  color: #ccc;
}

#galleryType {
  display: flex;
  flex-flow: wrap row;
}

#galleryType div {
  margin: 0 0.5rem;
  padding: 2px 0.7rem;
  cursor: pointer;
  border-radius: 8px;
  font-size: 13px;
  transition: all 0.3s ease-in-out;
}

#galleryType div.active {
  background-color: var(--blue);

  color: var(--white);
  transition: all 0.3s ease-in-out;
}

.previewMedia {
  width: 70%;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 100;
  padding: 3rem;
  top: -150%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease-in;
}

.previewMediaWrap {
  width: 100%;
  background-color: var(--white);
  border-radius: 8px;
  position: relative;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.previewMediaImageMain {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  margin-left: 15px;
}

.previewMediaImageMain img {
  border-radius: 8px;
  max-width: 100%;
}

.previewMediaDetail {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.previewMediaDetail #fileName {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  margin-bottom: 1rem;
}

.listwrap {
  width: 100%;
  margin: 0 auto;
}

.listSort {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.listSort span {
  font-size: 0.8rem;
}

.listSortItems {
  display: flex;
}
.listSortItems.connectSortItems .countItem.active {
  background-color: var(--cyan);
}
.listSort .countItem {
  padding: 2px 6px;
  color: var(--orange);
  border: 1px solid #eee;
  color: var(--dark);
  border-radius: 8px;

  margin-right: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.3s ease-in;
}

.listSort .countItem:not(.active):hover {
  border-color: var(--dark);
  transition: all 0.3s ease-in;
}

.listSort .countItem.active {
  background-color: var(--orange);
  color: var(--white);
  transition: all 0.3s ease-in;
}

.productStatus {
  display: flex;
}

.productStatus p {
  font-size: 0.8rem;
  margin-top: 1px;
}

.productStatus a {
  padding: 0 1rem;
  font-size: 0.8rem;
  color: var(--dark);
  border-radius: 8px;
  display: flex;
  border: 1px solid #eee;
  align-items: center;
  margin-right: 1rem;
  background-color: var(--back);
}

.productStatus a.active {
  background-color: var(--dark);
  color: var(--white);
  border: 0;
}

.listFooter {
  width: 100%;
  margin-top: 20px;
  border-top: 1px solid #ddd;
  padding: 1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.listFooter span {
  color: var(--gray-dark);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}

.listFooter span svg {
  width: 10px;
  margin-left: 8px;
}
.listSearch svg {
  margin-right: 10px;
  width: 18px;
}
.listSearch a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between; 
  margin-top: 12px;
  background: var(--red);
  padding: 0 15px 0 5px;
  border-radius: 8px;
  color: #fff;
}
.listSearch {
  margin-bottom: 1rem;

  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.listSearch input:hover,
.listSearch input:focus {
  border-color: var(--dark);
  transition: all 0.3s ease-in;
}

.listSearch input {
  width: 100%;
  border: 1px solid #eee;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease-in;
}

#btnSearch {
  position: absolute;
  width: 50px;
  height: 30px;
  left: 5px;
  top: 5px;
  background-color: hsl(261, 51%, 51%);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in;
  font-size: 0.8rem;
}

.listHeader {
  width: 100%;
  padding: 10px 0;
  position: relative;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.listTopRow {
  background-color: #eee;
  margin-bottom: 1rem;
  border-radius: 8px;
}

.listTopRow,
.listRow {
  width: 100%;
  height: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.8rem;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease-in;
}

.listRow:nth-child(2n + 2) {
  background-color: #f4f8ff;
}
.listRow span abbr {
  padding:0 3px;
  background-color: var(--red);
  color:var(--white);
  border-radius: 10px;
  font-size: 11px;
}
.listRow {
  background-color: var(--white);
  margin-bottom: 5px;
  border: 2px solid #fff; 
  border-radius: 8px;
}

.listRow:hover {
  z-index: 3;
  border: 2px solid #ccc; 
  transition: all 0.3s ease-in;
}

.listTopRow,
.listRow :is(span) {
  font-size: 0.8rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listRow span:last-child  {
  display: flex;
  justify-content: space-evenly;
}
.listRow span:last-child svg {
  width: 20px;
  height: 20px;
  
  margin-top: 10px;
  transition: all 0.3s ease-in;
}

.listRow span a:nth-child(3) svg {
  color: var(--red);

}

.listRow span a svg:hover {
  color: var(--purple);
  transition: all 0.3s ease-in;
}

.paganation {
  width: 100%;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  justify-content: space-between;
  padding: 10px 15px;
}
.paginate_all {
  font-size: 13px;
}
.paganation a:hover {
  background-color: var(--orange);
  color: #fff;
  transition: var(--trans);
}
.paganation a {
  transition: var(--trans);
  width: 25px;
  background-color: #fefefe;
  height: 25px;
  font-size: 12px;
  display: inline-block;
  margin-left: 8px;
  text-align: center;
  line-height: 27px;
  color: var(--dark);
  border-radius: 5px;
  box-shadow: 0 1px 1px rgb(1 8 0 / 18%);
}
.paganation a.active {
  background-color: var(--cyan);
  color: #fff;
}

.listTopRow span:nth-of-type(2),
.listRow span:nth-of-type(2) {
  width: 190px;
  text-align: right;
}

.listTopRow span:nth-of-type(1),
.listRow span:nth-of-type(1) {
  width: 20px;
}

.listRow span:nth-of-type(8) {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}


.listTopRow span:nth-of-type(3),
.listRow span:nth-of-type(3) {
  width: 150px;
}

.listTopRow span:nth-of-type(4),
.listRow span:nth-of-type(4),
.listTopRow span:nth-of-type(5),
.listRow span:nth-of-type(5),
.listTopRow span:nth-of-type(6),
.listRow span:nth-of-type(6),
.listTopRow span:nth-of-type(7),
.listRow span:nth-of-type(7),
.listTopRow span:nth-of-type(8),
.listRow span:nth-of-type(8) {
  width: 100px;
  position: relative;
}

.inStock {
  background-color: var(--green);
  color: var(--white);
  padding: 0px 10px;
  border-radius: 8px;
  font-weight: 400;
}

.unStock {
  background-color: var(--red);
  color: var(--white);
  padding: 0px 10px;
  border-radius: 8px;
  font-weight: 400;
}

.tabsWraper {
  width: 100%;
  display: flex;
  flex-direction: row;
  background-color: #eee;
  margin-bottom: 1rem;
  padding: 5px;
  border-radius: 15px;
}
.tabsWraper .tabsSelect:last-child {
  margin: 0;
}
.tabsWraper .tabsSelect {
  color: #555;
  height: 35px;
  align-items: center;
  display: flex;
  cursor: pointer;
  font-size: 13px;
  justify-content: center;
  border-radius: 15px;
  transition: var(--trans);
}

.tabsWraper .tabsSelect.active {
  background-color: var(--orange);
  color: #fff;
  border-radius: 15px;
  transition: var(--trans);
}
.boxCenter .removeText {
  margin: 15px 0;
  display: flex;
  padding: 10px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.boxCenter .removeText abbr {
  text-decoration: underline;
  font-weight: bold;
}
.removeOkey {
  background-color: var(--green);
  color: var(--white);
  padding: 2px 15px;
  border-radius: 5px;
  cursor: pointer;
}

.boxCenter {
  display: flex;
  border: 1px solid #eee;
  margin: 15px auto;
  flex-direction: column;
}
.boxCenterRows:hover {
  background-color: #f8f8f8;
  transition: var(--trans);
}
.boxCenterRows {
  width: 100%;
  padding: 8px 15px;
  position: relative;
  display: flex;
  align-items: center;
  transition: var(--trans);
  border-bottom: 1px solid #eee;
}
.boxCenterRows a {
  color: var(--pink);
  font-size: 13px;
  text-decoration: underline;
}
.boxCenterRows span {
  font-size: 13px;
}
.boxCenterRows span:nth-child(1) {
  width: 30%;
}
.boxCenterRows input {
  padding: 8px 15px;
  border-radius: 5px;
  border: none;
  width: 290px;
  background-color: #eee;
  border: 2px solid #eee;
  transition: var(--trans);
}
.boxCenterRows input:hover,
.boxCenterRows input:focus {
  background-color: var(--white);
  border: 2px solid #ddd;
  transition: var(--trans);
}

.boxCenterRows .btnManager,
.btn {
  background-color: var(--purple);
  color: var(--white);
  padding: 0px 25px;
  line-height: 39px !important;
  height: 35px;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  transition: var(--trans);
}

.btn.small {
  width: 100px;
  text-align: center;
}

.boxCenterRows .btnManager:hover,
.btn:hover {
  background-color: var(--dark);
  transition: var(--trans);
}
.boxCenterRows:last-child {
  height: 60px;
  display: flex;
  justify-content: space-between;
}
.boxCenterRowsBtns {
  display: flex;
  align-items: center;
  justify-content: center;
}
.boxCenterRowsBtns a {
  display: flex;
  align-items: center;
}
.boxCenterRowsBtns a svg {
  width: 20px;
}
.boxCenterRowsBtns a:nth-child(1) {
  color: var(--red);
}
.boxCenterRowsBtns a:nth-child(2) {
  color: var(--orange);
  margin-right: 1rem;
}

#inputPassBox {
  display: none;
}

#checkbox {
  height: 0;
  width: 0;
  visibility: hidden;
}

#label {
  cursor: pointer;
  text-indent: -9999px;
  width: 70px;
  height: 30px;
  border: 1px solid #eee;
  display: block;
  border-radius: 100px;
  position: relative;
  background-color: #eee;
  overflow: hidden;
  transition: 0.3s;
}

#label:after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  background: var(--cyan);
  border-radius: 90px;
  transition: 0.3s;
  box-shadow: 0 1px 2px #ccc;
}

#checkbox:checked + #label {
  background: var(--cyan);
  transition: 0.3s;
}

#checkbox:checked + #label:after {
  left: calc(100% - 4px);
  transform: translateX(-100%);
  background: var(--white);
}

#label:active:after {
  width: 130px;
}

.emptyBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.emptyBox svg {
  width: 60px;
  height: 60px;
  color: #ddd;
}
.emptyBox .img {
  background: url(../images/empty.png);
  width: 128px;
  height: 128px;
}
.emptyBox p {
  font-style: 15px;
  margin-top: 15px;
  font-family: "SansL";
}
#selectImage, #selectbrandImage {
  background-color: var(--green);
  color: var(--white);
  padding: 3px 6px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.2s ease-in-out;
}
#selectImage svg , #selectbrandImagesvg {
  width: 18px;
  height: 18px;
  margin-left: 5px;
}
#selectImage:hover {
  transition: 0.2s ease-in-out;
  background-color: var(--purple);
}

.imageSelectWrap {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 100;
  top: -150%;
  left: 0;
  transition: 0.3s ease-in-out;
}
.imageSelectMain {
  width: 100%;
  background-color: #fff;
  position: relative;
  border: 1px solid #eee;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  display: block;
  overflow: hidden;
  height: 89vh;
}
.imageSelectHeader {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 15px;
  align-items: center;
  background-color: #eee;
}
.imageSelectHeader span {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.3);
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  transition: 0.3s;
}
.imageSelectHeader span:hover {
  background-color: var(--dark);
  transition: 0.3s;
}
.imageSelectHeader span svg {
  margin-top: 3px;
}
.imageSelectBody {
  width: 100%;
  display: flex;
  height: 100%;
  padding: 15px 0;
}
.imageSelectBody .imageMenu {
  border-left: 1px solid #ddd;
  padding: 15px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.imageSelectBody .imageMenu ul li:hover {
  background-color: var(--orange);
  color: #fff;
  transition: 0.3s ease-in;
}
.imageSelectBody .imageMenu ul li {
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
  margin-bottom: 13px;
  cursor: pointer;
  transition: 0.3s ease-in;
}
.imageSelectBody .imageMenu ul li.active {
  background-color: var(--dark);
  color: var(--white);
}
.imageSelectBody .imageWrap {
  overflow-y: scroll;
  padding: 15px;
  position: relative;
}

.inputBox {
  width: 100%;
  margin: 25px auto;
  display: flex;
  flex-wrap: wrap;
}
.boxInputGroup {
  height: 45px;
  padding: 0 10px;
  margin-bottom: 30px;
}
.boxInputWrap {
  width: 100%;
  position: relative;
  height: 100%;
}
#priceDiscount {
  position: absolute;
  top: 10px;
  right: 20px;
  color: var(--cyan);
}

.boxInputWrap textarea,
.boxInputWrap input,
.boxInputWrap select {
  width: 100%;
  height: 100%;
  padding: 0px 15px 0 10px;
  background-color: #fff;
  border: 1px solid rgba(43, 65, 112, 0.3);
  transition: 100ms ease-in-out;
  border-radius: 5px;
  font-size: 14px;
}
.boxInputWrap span,
#listTags div > abbr {
  position: absolute;
  top: -11px;
  right: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 0 10px;
  transition: 0.2s ease-in-out;
}

.boxInputWrap textarea {
  padding-top: 15px !important;
}

.boxInputWrap textarea:focus,
.boxInputWrap textarea:hover,
.boxInputWrap input:hover,
.boxInputWrap input:focus,
.boxInputWrap select:focus {
  border: 2px solid var(--orange);
  transition: 100ms ease-in-out;
}
.boxInputWrap:hover span,
#listTags div:hover abbr {
  color: var(--orange);
  transition: 0.2s ease-in-out;
}
#pageWarning {
  width: 100%;
  margin: 0 0 30px 0;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--orange);
}
#pageWarning p {
  font-size: 14px;
}
#pageWarning abbr {
  padding: 0 10px;
  text-decoration: underline;
  font-weight: 600;
}
#btn_packing {
  text-align: center;
}
.btnPurple {
  background-color: var(--purple);
  color: var(--white);
  padding: 2px 15px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  transition: var(--trans);
}
.btnGreen {
  background-color: var(--green);
  color: var(--white);
  padding: 2px 15px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  transition: var(--trans);
}
.btnOrange {
  background-color: var(--orange);
  color: var(--white);
  padding: 2px 15px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  transition: var(--trans);
}

.uploadNewImage {
  position: absolute;
  bottom: 30px;
  background-color: var(--red);
  color: #fff;
  border-radius: 5px;
  text-align: center;
  padding: 2px 10px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translate(-26%, -50%);
}
.uploadNewImage svg {
  margin-left: 8px;
}

.insertImage {
  background-color: var(--green);
  color: #fff;
  border-radius: 5px;
  text-align: center;
  padding: 2px 10px;
  margin-top: 15px;
  cursor: pointer;
  display: none;
}
#selectedImageList {
  display: none;
}

.listSlideDown {
  width: 100%;
  margin: 15px auto;
  display: flex;
  flex-direction: column;
}
.listSlideDown .listSlideDownHead:hover {
  background-color: #eee;
  transition: 0.2s ease-out;
}
.listSlideDown .listSlideDownHead {
  width: 100%;
  height: 35px;
  transition: 0.2s ease-out;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  background-color: #fff;
  align-items: center;
  cursor: pointer;
  border: 1px solid #ddd;
  margin-bottom: 8px;
  border-radius: 5px;
}
.listSlideDown .listSlideDownHead svg {
  transition: 0.2s ease-out;
}
.listSlideDown .listSlideDownBody {
  border-radius: 5px;
  width: 100%;
  border: 1px solid #ddd;
  display: none;
  background-color: #eee;
  flex-direction: column;
  position: relative;
  padding: 5px 15px;
  margin-bottom: 10px;
}
.listSlideDown .listSlideDownBody ul li.catBase {
  background-color: #f9f9f9;
}
.listSlideDown .listSlideDownBody ul li:hover {
  border-bottom: 1px solid #ccc;
  transition: 0.2s ease-in-out;
  transform: scale(1.03);
}
.listSlideDown .listSlideDownBody ul li {
  width: 100%;
  height: 35px;
  background-color: #fff;
  box-shadow: 0 1px 2px #ddd;
  margin-bottom: 5px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid #fff;
  transition: 0.2s ease-in-out;
}
.listSlideDown .listSlideDownBody ul li:not(.catBase) span {
  font-weight: bolder;
}
.listSlideDown .listSlideDownBody ul li div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.listSlideDown .listSlideDownBody ul li div a svg {
  width: 20px;
}
.listSlideDown .listSlideDownBody ul li div a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.listSlideDown .listSlideDownBody ul li div a:nth-child(1) {
  margin-left: 20px;
  color: var(--red);
}
.listSlideDown .listSlideDownBody ul li div a:nth-child(2) {
  color: var(--blue);
}
.listSlideDown .listSlideDownBody ul li div a:nth-child(3) {
  color: var(--green);
  margin-right: 20px;
}

#imagesLoaderMain, #productImagesList {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
  transition: 200ms ease-in-out;
}
.imageItems {
	width: 18%;
	position: relative;
}
.imageItems img {
	width: 100%;
	display: block;
}
.imageItems span {
	position: absolute;
	top: 15px;
	left: 15px;
	background-color: rgba(0, 0, 0, 0.65);
	color: #fff;
	padding: 2px 15px;
	border-radius: 15px;
}


#imagesLoaderMain img , #productImagesList img {
  border: 2px solid #eee;
  border-radius: 15px;
  margin-bottom: 10px;
  transition: 200ms ease-in-out;
  margin-left: 15px;
}
#imagesLoaderMain img:hover , #productImagesList img:hover {
  border-color: var(--gray);
  cursor: pointer;
  transition: 200ms ease-in-out;
}
#imagesLoaderMain img.selected, #productImagesList img.selected{
  border-color: var(--green);
  transition: 200ms ease-in-out;
}

#colorPaletts {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 15px auto;
}
#colorPaletts li {
  width: 32%;
  margin-bottom: 10px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  transition: var(--trans);
}
#colorPaletts li code {
  direction: ltr;
}
#colorPaletts li span,
#colorPaletts li code {
  opacity: 0;
  transition: var(--trans);
  color: var(--white);
}
#colorPaletts li:hover {
  transform: scale(1.03);
  transition: var(--trans);
}
#colorPaletts li:hover span,
#colorPaletts li:hover code {
  opacity: 1;
  transition: var(--trans);
  cursor: pointer;
}
.colorPaletts li .imageWrap::-webkit-scrollbar {
  width: 10px;
}
.imageWrap::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.imageWrap::-webkit-scrollbar-thumb {
  background: #888;
}
.imageWrap::-webkit-scrollbar-thumb:hover {
  background: #555;
}

#selectProductImage h3 {
  margin-bottom: 15px;
  color: #666;
}
#selectProductImage {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border-radius: 15px;
  border: 2px dashed #eee;
  height: 150px;
  margin-bottom: 20px;
  cursor: pointer;
}
#selectProductImage div {
  background-color: var(--cyan);
  color: var(--white);
  width: 180px;
  height: 35px;
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#selectProductImage svg {
  margin-left: 10px;
}
#premove {
  background-color: var(--red);
  line-height: 40px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  z-index: 15;
  font-size: 14px;
  padding: 0 15px;
  border-radius: 8px;
  margin-right: 15px;	
}
#insertProduct, #updateProductPrice, #myProductUpdateImage, #insertBrand,  #insertSlider , #insertBanner, #passRest {
  background-color: var(--green);
  line-height: 40px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  z-index: 15;
  font-size: 14px;
  padding: 0 15px;
  border-radius: 8px;
  margin-right: 15px;
}
.loadImageServer {
  padding: 5px;
}
#listTags {
  width: 100%;
  display: flex;
  margin-top: 30px;
  position: relative;
}
#listTags p {
  position: absolute;
  bottom: -30px;
  color: var(--red);
  font-size: 13px;
}
#listTags div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  padding: 15px 15px;
  background-color: #fff;
  border: 1px solid rgba(43, 65, 112, 0.3);
  transition: 100ms ease-in-out;
  border-radius: 5px;
  position: relative;
  font-size: 14px;
}
#listTags div span {
  padding: 3px 15px;
  display: block;
  background-color: var(--cyan);
  color: var(--white);
  font-size: 13px;
  cursor: pointer;
  margin-left: 8px;
  border-radius: 10px;
}
.packingBox {
  width: 100%;
  padding: 15px;
  margin-bottom: 25px;
  border-radius: 15px;
}

.packingInputBox {
  margin-top: 30px;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.removeMain {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.removeMain span {
  margin: 20px auto;
}
.removeMain a {
  padding: 5px 15px;
  border-radius: 15px;
  background-color: var(--orange);
  color: var(--white);
  font-size: 13px;
  margin: 10px auto;
}
#errorFindRemove {
  font-size: 13px;
  color: var(--red);
  margin: 20px auto;
}
#btnRemoveItem {
  height: 30px;
  line-height: 30px;
  padding: 0px 15px;
  border-radius: 15px;
  background-color: var(--green);
  color: var(--white);
  font-size: 13px;
  cursor: pointer;
  margin: 10px auto;
}
.removeMainQ {
  margin: 15px 0;
  display:flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 3px dashed #eee;
}
#itemRemoved {
  width: 100%;
  text-align: center;
  margin: 15px auto;
  color: var(--orange);
}
#itemRemoved a {
  margin-right: 20px;
  color: #000;
}

input[type="checkbox"] {
  display: none;
}


.switches {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkboxInput {
  height: 30px;
  width: 70px;
  background: var(--red);
  position: relative;
  border-radius: 50px;
}
.switches label {
  height: 25px;
  width: 25px;
  background: rgba(255, 255, 255, 1);
  position: absolute;
  top: 2px;
  border-radius: 50px;
  left: 5px;
  cursor: pointer;
  transition: 400ms all ease-in-out 50ms;
  backface-visibility: hidden;
}
.switches label::before {
  content: '';
  height: 15px;
  width: 2px;
  position: absolute;
  top: 5px;
  left: 11px;
  transform: rotate(45deg);
}
.switches label::after {
  content: '';
  height: 2px;
  width: 15px;
  position: absolute;
  top: 11px;
  left: 5px;
  transform: rotate(45deg);
}
.switches label::before,
.switches label::after{
  background: var(--red);
  border-radius: 5px;
}

input[type="checkbox"]:checked ~ div label::before{
  height: 20px;
  top: calc(107% - 25px);
  left: calc(60% - 2.5px);
  background: rgba(73,168,68,1);
}
input[type="checkbox"]:checked ~ div label::after{
  width: 14px;
  top: calc(147% - 25px);
  left: calc(-9.5% - 2.5px);
  background: rgba(73,168,68,1);
}

input[type="checkbox"]:checked ~ div {
  background: rgba(73,168,68,1);
  box-shadow: 0 0 2px rgba(73,168,68,1);
}

input[type="checkbox"]:checked ~ div label {
  left: 43px;
  transform: rotate(360deg);
}

#listOrder {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 30px auto;
}
.listOrderBox {
  width: 33.33%;
  padding: 10px;
  display: flex;
  position: relative;
}
.orderRemove {
  font-size: 12px;
  position: absolute;
  top: 51px;
  left: 20px;
  padding: 2px 15px;
  background-color: var(--red);
  color: #fff;
  border-radius: 5px;
}
.listOrderBox:hover .listOrderInner {
  border-color: rgb(151, 103, 214);
  background: #fefefe;
}
.listOrderInner {
  width: 100%;
  padding: 5px;
  border-radius: 10px;
  border: 2px solid #ddd;
}
.listOrderInner_row strong {
  font-size: 16px;
  color: var(--dark);
}
.listOrderInner_row span {
  font-size: 14px;
  color: #666;
}
.listOrderInner_row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
  padding: 0 10px;
}
.listOrderInner_row:last-child {
  border: 0;
  margin-bottom: 0;
}
.listOrderInner_row a {
    width: 100%;
    border-radius: 5px;
    display: inline-block;
    font-size: 14px;
    background-color: rgb(151, 103, 214);
    color: #fff;
    text-align: center;
}
#orderInfo {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#mini_order_product {
  display: flex;
  flex-direction: column;
  width: 33%;
  padding: 15px;
  border-radius: 15px;
  background-color: #f9f9f9;
}
#mini_order_product li {
  width:100%;
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  padding:8px 15px;
  border-radius: 15px;
  margin-bottom: 10px;
  background-color: #fff;
  transition: var(--trans);
}
#mini_order_product li:hover {
  border-color: #666;
  transition: var(--trans);
}
#mini_order_product li img {
  width: 95px;
  height: 95px;
  border-radius: 5px;
  margin-left: 20px;
  padding: 5px;
  border: 1px solid #eee;
}
#mini_order_product li .order_product_info {
    display: flex;
    flex-direction: column;
    width: 100%;
}
#mini_order_product li .order_product_info span {font-size: 13px;}

#mini_info {
  display: flex;
  flex-direction: column;
  width: 65%;
  margin: 30px auto;
}
#mini_info li:last-child .orderBtns a:nth-of-type(1) {
  background-color: var(--red);
}
#mini_info li:last-child .orderBtns a:nth-of-type(2) {
  background-color: var(--cyan);
}
#mini_info li:last-child .orderBtns a {
  margin-left: 15px;
}
#mini_info li:last-child .orderBtns {
  display: flex;
}
#mini_info li:last-child {
  height: auto;
  border: 0;
  padding: 0;
}
#mini_info li {
  width:100%;
  height: 35px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  line-height: 35px;
  margin: 8px 0;
  padding: 0 15px;
}
#mini_info li span:nth-of-type(1) {
  width: 30%;
  font-size: 14px;
  margin-top: -8px;
  color: #666;
}
#mini_info li span:nth-of-type(2) {
  width: 70%;
  text-align: right;
  font-size: 14px;
  margin-top: -8px;
}

.unstock {
	color: #fff;
	background-color:crimson;
  padding: 0px 10px;
  border-radius: 5px;
}
.instock {
	color: #fff;
	background: green;
  padding: 0px 10px;
  border-radius: 5px;
}
.wait {
  color: #fff;
	background: #1159C9;
  padding: 0px 10px;
  border-radius: 5px;
}

#order_level {
  width: 100%;
  height: 40px;
  display: flex;
  margin-top: 30px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
}
#order_level li a {color: #333;}
#order_level li {
  padding: 0 15px;
  margin-left: 15px;
  height: 40px;
  font-size: 13px;
  line-height: 40px;
  cursor: pointer;
}
#order_level li.active {
  border-bottom: 2px solid #dc3545;
}
.orderLevelRow {
  margin-top: 30px;
  position: relative;
  width: 66%;
  height: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #eee;
  z-index: 15;
}
.orderLevelRow span {
  font-size: 13px;
}
.orderLevelRow span.active {color: #fff;}

.orderLevelRow_row {
  height: 30px;
  background-color: var(--orange);
  bottom: 0;
  position: absolute;
  z-index: -1;
  right: 0;
}
.order_save_ship_code abbr {
  margin-right: 15px;
}
.order_save_ship_code {
  display: flex;

}
.order_save_ship_code input {
  width: 300px;
  height: 35px;
  padding: 0 15px;
  border: 1px solid #ddd;
  margin-top: -10px;
  border-radius: 15px;  
}
.order_save_ship_code button {
  padding: 2px 15px;
  background-color: var(--purple);
  border: 0;
  border-radius: 15px;  
  cursor: pointer;
  margin-top: -10px;
}
.order_save_ship_code button span {color: #fff !important;}
#shipCode {
  letter-spacing: 2.5px;
  transition: var(--trans);
}
#shipCode:hover,
#shipCode:focus {
  border-color: var(--orange);
  transition: var(--trans);
}
#btn_save {
  text-align: center;
}

.sliderShow {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto;
}
.sliderShow li:last-child a svg {
  padding-right: 10px;
  width: 40px;
}
.sliderShow li:last-child a { 
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background-color: #fff;
  border: 5px dashed #ddd;
  display:flex;
  font-size: 18px;
  color: #999;
  justify-content: center;
  align-items: center;
  
}
.sliderShow li:last-child {
  text-align: center;

} 
.sliderShow li {
  flex: 1 0.5 300px;
  padding: 5px;
  position: relative;
}
.sliderShow li:hover img {
  opacity: 1;
  transition: var(--trans);
 
}
.sliderShow li img {
  display: block;
  width: 100%;
  border-radius: 15px;
  transition: var(--trans);
  opacity: .8;
}
.sliderShow li a.trash:hover {
  background-color: var(--red);
  color: #fff;
  transition: var(--trans);
}
.sliderShow li a.trash {
  transition: var(--trans);
  position: absolute;
  top: 20px;
  background-color: #fff;
  border-radius: 15px;
  padding: 5px 10px;
  right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--red);
}
.memberOrders ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.memberOrders ul li {
  flex: 1 1 33.33%;
  padding: 15px;
}
.memberOrders ul li:hover a.mo_inner{
  background-color: #ccc;
  transition: var(--trans);
}
a.mo_inner {
  border-radius: 5px;
  transition: var(--trans);
  background-color: #eee;
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  color: #333;
}

.all_income {
  width: 98%;
  margin: 15px auto;
  background:url("../images/bbg.png") no-repeat left rgba(13,110,253 ,1) ;
  padding: 1.5rem 0;
  border-radius: 10px;
  min-height: 140px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 24%);
  position: relative;
  display: flex;
  justify-content:center;
  align-items: center;
  flex-direction: row;
  color: #fff;
}
.income_box {
  border-radius: 8px;
  margin-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.income_box div {
  font-size: 1.3rem;
  margin-top: 4px;
  color: #fff;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 2px 15px;
  
}
.all_income::after {
  content: "";
  width: 337px;
  height: 134px;
  top: 0;
  right: 0;
  background: url('../images/download.png') no-repeat right;
  position: absolute;
}

.lastOrder {
  width: 100%;
  padding: 0 10px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
}
.lastOrder_header a {
  font-size: 13px;
  color: #191b1d;
}
.lastOrder_header span {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.lastOrder_header {
  width: 100%;
  height: 40px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  color: var(--orange);
  border-radius: 10px;
}
.lastOrder_header svg {
  width: 16px;
  margin-left: 10px;
}
.list_new_order {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.list_new_order div:first-child span {color: #888;}
.list_new_order div:nth-of-type(1) {
  background-color: #eee;
}
.list_new_order div span:nth-of-type(1) {width: 40px;text-align: center;}
.list_new_order div span:nth-of-type(6) {width: 100px;}
.list_new_order div span a {
  cursor: pointer;
}
.list_new_order div span {
  width: 20%;
  text-align: center;
  color: #333;
}
.list_new_order div  svg {
  width: 18px;
}
.list_new_order_links a {display: flex;}
.list_new_order div  .list_new_order_links {
  display:flex;
  padding: 0 15px;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}
.list_new_order div {
  width: 100%;
  display: flex;
  margin-top: 8px;
  font-size: 13px;
  padding: 3px 15px;
  background-color: #fff;
  border-radius: 10px;
  flex-direction: row;
  justify-content:space-between;
  align-items: center;
}



.loading_wrapper_main {
  width:100%;
  height:100vh;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  z-index: 9999;
  background: radial-gradient(#9b59b6, #8e44ad);
}

.loading_wrapper {
  width:200px;
  height:60px;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}
.circle{
  width:20px;
  height:20px;
  position: absolute;
  border-radius: 50%;
  background-color: #fff;
  left:15%;
  transform-origin: 50%;
  animation: circle .5s alternate infinite ease;
}

@keyframes circle{
  0%{
      top:60px;
      height:5px;
      border-radius: 50px 50px 25px 25px;
      transform: scaleX(1.7);
  }
  40%{
      height:20px;
      border-radius: 50%;
      transform: scaleX(1);
  }
  100%{
      top:0%;
  }
}
.circle:nth-child(2){
  left:45%;
  animation-delay: .2s;
}
.circle:nth-child(3){
  left:auto;
  right:15%;
  animation-delay: .3s;
}
.shadow{
  width:20px;
  height:4px;
  border-radius: 50%;
  background-color: rgba(0,0,0,.5);
  position: absolute;
  top:62px;
  transform-origin: 50%;
  z-index: -1;
  left:15%;
  filter: blur(1px);
  animation: shadow .5s alternate infinite ease;
}

@keyframes shadow{
  0%{
      transform: scaleX(1.5);
  }
  40%{
      transform: scaleX(1);
      opacity: .7;
  }
  100%{
      transform: scaleX(.2);
      opacity: .4;
  }
}
.shadow:nth-child(4){
  left: 45%;
  animation-delay: .2s
}
.shadow:nth-child(5){
  left:auto;
  right:15%;
  animation-delay: .3s;
}
.loading_wrapper_main span{
  position: absolute;
  bottom:75px;
  font-size: 20px;
  color: #fff;
  text-align: center;
}

.sliderImages {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.sliderImages div img {
  width: 100%;
}

.packEdit input, .packEdit select {
  height: 30px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 0 15px;
  width: 120px;
  transition: all ease-in-out 0.3s;
}
.packEdit input:hover, .packEdit input:focus, .packEdit select:hover, .packEdit select:focus {
  border-color: #1159C9;
  transition: all ease-in-out 0.3s;
}