/* theme */

#mydiv {
  position: fixed;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196f3;
  color: #fff;
}

/* start of theme control */
.heady-mobile {
  display: none !important;
}

.background-gradient {
  transition: all 200ms linear 0ms !important;
  background-size: 200%, 1px !important;
  background-image: linear-gradient(
    90deg,
    #20fdee 0%,
    #0478e9 50%,
    #20fdee
  ) !important;
}

.background-gradient:hover {
  background-position: 110% !important;
}

.background-gradient-org {
  transition: all 200ms linear 0ms;
  background-size: 200%, 1px;
  background-image: linear-gradient(
    90deg,
    #ff780b 0%,
    #ee132f 50%,
    #ff780b
  ) !important;
}

.background-gradient-org:hover {
  background-position: 110%;
}

.background-gradient-v2 {
  transition: all 200ms linear 0ms !important;
  background-size: 200%, 1px !important;
  background-image: linear-gradient(
    90deg,
    #31c5ff 0%,
    #0478e9 50%,
    #31c5ff
  ) !important;
}

.background-gradient-v2:hover {
  background-position: 110% !important;
}

.background-gradient-grn {
  transition: all 200ms linear 0ms;
  background-size: 200%, 1px;
  background-image: linear-gradient(
    90deg,
    #70df11 0%,
    #30c677 50%,
    #70df11
  ) !important;
}

.background-gradient-grn:hover {
  background-position: 110%;
}

.saasio-pagination.text-center.ul-li a.active {
  background-image: linear-gradient(
    90deg,
    #ff780b 0%,
    #ee132f 50%,
    #ff780b
  ) !important;
}

.border-background.org {
  border: 2px solid #ff440b;
}
.border-background {
  position: relative;
  border-radius: 10px !important;
  margin-left: 0;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  background-image: unset;
  border: 2px solid #0478e9;
  overflow: hidden;
  box-shadow: 0px 0px 24px 0px rgb(3 5 77 / 8%);
}

.border-background.active,
.border-background:hover {
  border: 2px solid transparent !important;
  /* box-shadow: none; */
  -webkit-box-shadow: inset -3px -2px 5px 0px rgb(255 255 255 / 66%),
    inset -1px -1px 0px 0px rgb(255 255 255 / 18%),
    inset 2px 2px 7px 0px rgb(49 69 106 / 18%);
  box-shadow: inset -3px -2px 5px 0px rgb(255 255 255 / 66%),
    inset -1px -1px 0px 0px rgb(255 255 255 / 18%),
    inset 2px 2px 7px 0px rgb(49 69 106 / 18%);
  color: #fff;
  background: transparent !important;
}

.border-background.active i,
.border-background:hover i {
  color: #fff !important;
}

.border-background.org:before {
  box-shadow: 0 0 30px 31px rgba(253, 231, 103, 0.9);
}
.border-background:before {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  right: 0;
  top: 45px;
  right: 15px;
  box-shadow: 0 0 30px 31px rgb(32 190 253 / 90%);
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s all ease-in-out;
}

.border-background.org:after {
  background-color: #ff780b;
}
.border-background:after {
  height: 100%;
  width: 100%;
  position: absolute;
  content: "";
  top: -100%;
  right: 0px;
  z-index: -2;
  border-radius: 10px;
  transition: 0.3s all ease-in-out;
  background-color: #0478e9;
}

.border-background.active:before,
.border-background:hover:before {
  opacity: 1;
  right: 25px;
  visibility: visible;
}

.border-background.active:after,
.border-background:hover:after {
  top: 0;
}

.flex {
  display: flex;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

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

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

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

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

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

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

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

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

.font {
  font-weight: 600 !important;
}

.blog-details-text blockquote {
  flex-wrap: wrap;
  color: #363636;
}

.blog-details-text blockquote h4 {
  width: 100%;
  text-align: left;
  margin-top: 0.5rem;
}

.tag-icon {
  border-radius: 5px;
  color: #fff !important;
  font-weight: 600;
  background-image: linear-gradient(
    90deg,
    #20befd 0%,
    #0478e9 50%,
    #20befd
  ) !important;
}

.comment-form button {
  border-radius: 5px;
  color: #fff !important;
  font-weight: 600;
  transition: all 200ms linear 0ms;
  background-size: 200%, 1px;
  background-image: linear-gradient(
    90deg,
    #20befd 0%,
    #0478e9 50%,
    #20befd
  ) !important;
}

.comment-form button:hover {
  background-position: 110%;
}

.itemDrop {
  width: 100%;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 7px;
  position: relative;
  box-shadow: 0px 2px 10px rgb(0 0 0 / 15%);
}

.itemDrop button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: #fff;
  border: 1px solid transparent;
  padding: 10px 14px;
}

.itemDrop button span {
  color: #363636;
  font-family: "Open Sans", Arial;
  font-size: 14px;
  font-weight: 400;
}

.txt-gradient {
  background: -webkit-linear-gradient(90deg, #189dc5 0%, #22bae9 50%, #0c39ac);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.itemDrop button i {
  background: -webkit-linear-gradient(90deg, #189dc5 0%, #22bae9 50%, #0c39ac);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
}

.itemDrop.drop {
  padding: 0.5rem 1rem;
}

.itemDrop.drop * {
  border-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* custom selected */

/*the container must be positioned relative:*/
.custom-select {
  width: 100%;
  background: #fff;
  border: 1px solid transparent;
  padding: 0;
  margin-bottom: 1rem;
  border-radius: 7px;
  position: relative;
  box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05);
}

.rightcolumn form {
  width: 100% !important;
}

.custom-select:hover {
  box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.1);
}

.custom-select select {
  display: none;
  /*hide original SELECT element:*/
}

.select-selected {
  background-color: #fff;
  border-radius: 7px;
  width: 100%;
}

.select-selected.select-arrow-active {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "›";
  font-size: 22px;
  font-weight: 600;
  top: 4px;
  right: 15px;
  transition: all 0.3s ease-in-out;
  transform: rotate(90deg);
  background: -webkit-linear-gradient(90deg, #189dc5 0%, #22bae9 50%, #0c39ac);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  transform: rotate(270deg);
  top: 4px;
}

/*style the items (options), including the selected item:*/
.select-items div,
.select-selected {
  color: #363636;
  padding: 8px 16px;
  border: none;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #fff;
  top: 110%;
  left: 0;
  right: 0;
  z-index: 99;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  box-shadow: 0px 10px 18px 8px rgba(0, 0, 0, 0.13);
  overflow: hidden;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover,
.same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

.select-items div {
  border-bottom: 1px solid #f1f0f0;
  font-size: 14px;
}

/* item queue */

section.detail .content .content-left.new-detail {
  padding-right: 0;
  padding-top: 5rem;
}

section.detail .content .content-left.new-detail.invent-detail {
  padding-top: 2rem;
}

section.detail.dashboard .content .content-right {
  padding: 1rem;
  padding-left: 1rem !important;
}

section.detail.dashboard .content .content-right .heady {
  padding: 1rem;
}

section.detail .content .content-right.new-datail table td {
  padding: 1rem !important;
}

.itemqueue {
  width: 100%;
  margin-bottom: 0rem;
  height: unset;
  font-size: 16px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 1rem;
}

/* section.renew .itemqueue:hover .badgescard {
  transform: scale(1.05) !important;
} */

.itemqueue:hover .overlay {
  opacity: 1;
}

.itemqueue .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffffd2;
  background-size: 200%, 1px;
  opacity: 0;
  z-index: 3;
  transition: all 0.4s ease-in-out;
  border: none !important;
  outline: none !important;
}

.itemqueue:hover .overlay button {
  right: 0;
}

.itemqueue .overlay button {
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  color: #fff;
  top: 10%;
  right: -100%;
  position: absolute;
  transition: all 0.4s ease-in-out;
}

.itemqueue .content {
  width: 100% !important;
  position: relative;
  animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;
}

.itemqueue .content .cardqueue {
  width: 72.5%;
  padding: 0 2rem;
  border-radius: 3px;
  background-color: white;
  box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  -webkit-animation: buttonAnimation 0.6s linear;
  animation: buttonAnimation 0.6s linear;
  cursor: pointer;
}

.itemqueue .cardqueue:after {
  content: "";
  display: block;
  width: 191px;
  height: 200px;
  position: absolute;
  animation: rotatemagic 0.75s cubic-bezier(0.425, 1.04, 0.47, 1.105) 1s both;
  box-sizing: border-box;
  transition: all 200ms linear 0ms !important;
  background-size: 100%, 1px !important;
  background-image: linear-gradient(
    90deg,
    #31c5ff 0%,
    #0478e9 50%,
    #31c5ff
  ) !important;
}

.itemqueue .content .background-gradient.G-zone,
.itemqueue .content.G-zone .cardqueue:after {
  transition: all 200ms linear 0ms;
  background-size: 90%, 1px;
  background-image: linear-gradient(
    90deg,
    #70df11 0%,
    #30c677 50%,
    #70df11
  ) !important;
}

.itemqueue .content .background-gradient.Y-zone,
.itemqueue .content.Y-zone .cardqueue:after {
  transition: all 200ms linear 0ms;
  background-size: 95%, 1px;
  background-image: linear-gradient(
    90deg,
    #ffc60b 0%,
    #ff780b 50%,
    #ffc60b
  ) !important;
}

.itemqueue .content .background-gradient.R-zone,
.itemqueue .content.R-zone .cardqueue:after {
  transition: all 200ms linear 0ms;
  background-size: 100%, 1px;
  background-image: linear-gradient(
    90deg,
    #f76464 0%,
    #ff0000 50%,
    #f76464
  ) !important;
}

.itemqueue .content .overlay.background-gradient-v3 {
  background-image: linear-gradient(
    90deg,
    #31c5ff35 0%,
    #0478e935 50%,
    #31c5ff35
  ) !important;
}

.itemqueue .content .overlay.background-gradient-v3.G-zone {
  background-image: linear-gradient(
    90deg,
    #71df1135 0%,
    #30c67635 50%,
    #71df1135
  ) !important;
}

.itemqueue .content .overlay.background-gradient-v3.Y-zone {
  background-image: linear-gradient(
    90deg,
    #ffc60b35 0%,
    #ff780b35 50%,
    #ffc60b35
  ) !important;
}

.itemqueue .content .overlay.background-gradient-v3.R-zone {
  background-image: linear-gradient(
    90deg,
    #f7646435 0%,
    #ff000035 50%,
    #f7646435
  ) !important;
}

.itemqueue .content .cardqueue .firstinfo {
  flex-direction: row;
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.itemqueue .content .cardqueue .firstinfo img {
  border-radius: 50%;
  width: 75px;
  height: 75px;
  background: #fff;
  padding: 0.25rem;
}

.itemqueue .content .cardqueue .firstinfo .profileinfo {
  padding: 0px 1rem;
  width: 100%;
}

.itemqueue .content .cardqueue .firstinfo .profileinfo .date,
.itemqueue .content .cardqueue .firstinfo .profileinfo .data {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0;
}

.itemqueue .content .cardqueue .firstinfo .profileinfo .date p,
.itemqueue .content .cardqueue .firstinfo .profileinfo .data p {
  font-size: 14px;
  margin-bottom: 0 !important;
}

.itemqueue .content .cardqueue .firstinfo .profileinfo .date p.type {
  display: none;
}
.itemqueue .content .cardqueue .firstinfo .profileinfo .data p.orderDetail {
  display: none;
}

.itemqueue .content .badgescard {
  border-radius: 3px;
  background-color: #fff;
  width: 35%;
  height: 90%;
  box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.1);
  position: absolute;
  z-index: -1;
  left: 65.5%;
  top: 5px;
  animation: animainfos 1.5s;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.itemqueue .badgescard:after {
  content: "";
  display: block;
  width: 200px;
  height: 200px;
  /* right: 100px; */
  position: absolute;
  animation: rotatemagicBadgescard 0.75s cubic-bezier(0.425, 1.04, 0.47, 1.105)
    1s both;
  box-sizing: border-box;

  transition: all 200ms linear 0ms !important;
  background-size: 200%, 1px !important;
  background-image: linear-gradient(
    90deg,
    #31c5ff 0%,
    #0478e9 50%,
    #31c5ff
  ) !important;
}

.itemqueue .content.G-zone .badgescard:after {
  transition: all 200ms linear 0ms;
  background-size: 90%, 1px;
  background-image: linear-gradient(
    90deg,
    #70df11 0%,
    #30c677 50%,
    #70df11
  ) !important;
}

.itemqueue .content.Y-zone .badgescard:after {
  transition: all 200ms linear 0ms;
  background-size: 125%, 1px;
  background-image: linear-gradient(
    90deg,
    #ffc60b 0%,
    #ff780b 50%,
    #ffc60b
  ) !important;
}

.itemqueue .content.R-zone .badgescard:after {
  transition: all 200ms linear 0ms;
  background-size: 75%, 1px;
  background-image: linear-gradient(
    90deg,
    #f76464 0%,
    #ff0000 50%,
    #f76464
  ) !important;
}

.itemqueue .content .badgescard .phone {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  z-index: 3;
}

.itemqueue .content .badgescard .phone .content {
  padding: 0.5rem;
  padding-right: 1rem;
  border-radius: 50px;
  width: 100% !important;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.itemqueue .content .badgescard .phone .content button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: transparent;
}

.itemqueue .content .badgescard .phone .content button span {
  margin-right: 0.5rem;
}

.itemqueue .content .badgescard .phone .content button i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 16px;
  display: flex;
  color: #fff;
  transition: all 200ms linear 0ms;
  background-size: 200%, 1px;
  background-image: linear-gradient(90deg, #0478e9 0%, #31c5ff 50%, #0478e9);
}
.itemqueue .content.G-zone .badgescard .phone .content button i {
  background-image: linear-gradient(
    90deg,
    #30c677 0%,
    #70df11 50%,
    #30c677
  ) !important;
}

.itemqueue .content.Y-zone .badgescard .phone .content button i {
  background-image: linear-gradient(
    90deg,
    #ff780b 0%,
    #ffc60b 50%,
    #ff780b
  ) !important;
}

.itemqueue .content.R-zone .badgescard .phone .content button i {
  background-image: linear-gradient(
    90deg,
    #ff0000 0%,
    #f76464 50%,
    #ff0000
  ) !important;
}

.itemqueue .content .badgescard .phone .content button i:hover {
  background-position: 110% !important;
}

.itemqueue .content .badgescard .phone p {
  display: none;
  align-items: center;
  margin-bottom: 0;
}

.itemqueue .content .cardqueue .firstinfo .profileinfo p span,
.itemqueue .content .badgescard .phone p span {
  margin-left: 5px;
  font-size: 16px;
  font-weight: 600;

  background: -webkit-linear-gradient(60deg, #0478e9 0%, #31c5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.itemqueue .content.G-zone .cardqueue .firstinfo .profileinfo p span,
.itemqueue .content.G-zone .badgescard .phone p span {
  background: -webkit-linear-gradient(60deg, #30c677 0%, #70df11 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.itemqueue .content.Y-zone .cardqueue .firstinfo .profileinfo p span,
.itemqueue .content.Y-zone .badgescard .phone p span {
  background: -webkit-linear-gradient(60deg, #ff780b 0%, #ffc60b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.itemqueue .content.R-zone .cardqueue .firstinfo .profileinfo p span,
.itemqueue .content.R-zone .badgescard .phone p span {
  background: -webkit-linear-gradient(60deg, #ee132f 0%, #ee3f13 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes animatop {
  0% {
    opacity: 0;
    bottom: -500px;
  }
  100% {
    opacity: 1;
    bottom: 0px;
  }
}

@keyframes animainfos {
  0% {
    top: 5px;
    left: -50px;
  }
  100% {
    top: 5px;
  }
}

@keyframes rotatemagic {
  0% {
    opacity: 0;
    transform: rotate(0deg);
    top: -24px;
    left: -200px;
  }
  100% {
    transform: rotate(-25deg);
    top: -24px;
    left: -100px;
  }
}

@keyframes rotatemagicBadgescard {
  0% {
    opacity: 0;
    transform: rotate(20deg);
    top: -24px;
    right: -210px;
  }
  100% {
    transform: rotate(20deg);
    top: -24px;
    right: -100px;
  }
}

@-webkit-keyframes rotatemagicBadgescard {
  0% {
    opacity: 0;
    transform: rotate(20deg);
    top: -24px;
    right: -253px;
  }
  100% {
    transform: rotate(20deg);
    top: -24px;
    right: -78px;
  }
}

.header-txt {
  padding: 3.125rem 0;
}

.mt-1rem {
  margin-top: 2rem;
}

.mt-1-5rem {
  margin-top: 2rem;
}

.mt-2rem {
  margin-top: 2rem;
}

.popular-widget a.sm {
  padding: 7px 18px;
  font-weight: 500;
  font-size: 14px !important;
  font-family: "Propmt", sans-serif;
}

.popular-widget a::before {
  content: "#";
  margin-right: 1px;
}

.bg-up-hover {
  position: relative;
  background-color: #fff;
  z-index: 1;
  transition: 0.5s all ease-in-out;
  box-shadow: 0px 20px 81px 0px rgba(8, 0, 20, 0.14);
}

.bg-up-hover:before {
  content: "";
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  z-index: -3;
  border-radius: 10px;
  position: absolute;
  transition: 0.5s all ease-in-out;
  background-image: linear-gradient(45deg, #20fdee 32%, #0478e9 100%);
}

.bg-up-hover:after {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  border-radius: 10px;
  background-color: #fff;
}

.bg-up-hover:hover {
  transform: translate(-7px, -7px);
  box-shadow: 0px 20px 81px 0px rgba(8, 0, 20, 0.3);
}

/* payment */
.modal-content {
  border-radius: 15px !important;
}

.modal-content .close-modal {
  position: absolute;
  top: -1px;
  right: -1px;
  background: #ef192d;
  color: #fff;
  border-bottom-left-radius: 25px;
  border-top-right-radius: 15px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  font-size: 24px;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1;
}

.modal-content .modal-header {
  padding: 2rem 1rem;
}

#registerForm .modal-content .modal-header,
#loginForm .modal-content .modal-header {
  padding: 1rem;
}

.modal.inven .modal-body {
  padding: 1rem 3rem 1rem;
}

.modal.inven .row {
  flex-wrap: wrap;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.modal.inven .container-fluid {
  margin: 0 !important;
  padding: 0 !important;
}

.modal.inven #heading {
  text-transform: uppercase;
  text-align: center;
  color: #363636;
  font-weight: 500;
  width: 100%;
}

.modal.inven #msform {
  text-align: center;
  position: relative;
  margin-top: 20px;
  width: 100%;
}

.modal.inven #msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 0.5rem;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-bottom: 0;
  position: relative;
}

/* width */
.modal.inven #msform fieldset::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.modal.inven #msform fieldset::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.modal.inven #msform fieldset::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.modal.inven #msform fieldset::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.modal.inven .form-card {
  text-align: left;
  /* overflow-y: scroll;
  height: 250px; */
}

/* width */
.modal.inven .form-card::-webkit-scrollbar {
  width: 0.25rem;
}

/* Track */
.modal.inven .form-card::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
.modal.inven .form-card::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.modal.inven .form-card::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.modal.inven .form-card .content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.modal.inven .form-card .content.pay {
  margin-top: 0;
  margin-bottom: 3rem;
  padding-bottom: 1rem;
}

.modal.inven .form-card .content.pay.barcode {
  grid-template-columns: repeat(1, 1fr);
  margin-top: 1rem;
}

.modal.inven .form-card .content .field {
  padding: 0 0.5rem;
  margin-top: 1rem;
}

.modal.inven .form-card .content .field.textarea {
  grid-column: 1 / 3;
  grid-row: 3;
}

.modal.inven .form-card .content .field.textarea textarea {
  color: #99a3ba;
}

.modal.inven .form-card .content .field.payment {
  align-items: flex-start !important;
  height: max-content;
  margin-top: 0;
  margin-bottom: 1rem;
}

.modal.inven .form-card .content .field.payment .txt {
  width: 100%;
  text-align: center;
}

.modal.inven .form-card .content .field.choice {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: transparent;
  z-index: 1;
  padding: 1rem 0;
}

.modal.inven .form-card .content .field.choice.active .img i,
.modal.inven .form-card .content .field.choice:hover .img i {
  -webkit-text-fill-color: #fff;
}

.modal.inven .form-card .content .field.choice.active .txt,
.modal.inven .form-card .content .field.choice:hover .txt {
  color: #fff;
}

.modal.inven .form-card .content .field.choice .img {
  width: 25%;
  height: auto;
  font-size: 28px;
}

.modal.inven .form-card .content .field.choice .txt {
  width: 75%;
}

/* new */

:root {
  --input-color: #99a3ba;
  --input-border: #cdd9ed;
  --input-background: #fff;
  --input-placeholder: #cbd1dc;
  --input-border-focus: #275efe;
  --group-color: var(--input-color);
  --group-border: var(--input-border);
  --group-background: #eef4ff;
  --group-color-focus: #fff;
  --group-border-focus: var(--input-border-focus);
  --group-background-focus: #678efe;
}

.modal.inven .form-card .content .form-field {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 6px;
  -webkit-appearance: none;
  color: var(--input-color);
  border: 1px solid var(--input-border);
  background: var(--input-background);
  transition: border 0.3s ease;
}
.modal.inven .form-card .content .form-field::-moz-placeholder {
  color: var(--input-placeholder);
}
.modal.inven .form-card .content .form-field:-ms-input-placeholder {
  color: var(--input-placeholder);
}
.modal.inven .form-card .content .form-field::placeholder {
  color: var(--input-placeholder);
}
.modal.inven .form-card .content .form-field:focus {
  outline: none;
  border-color: var(--input-border-focus);
}

.modal.inven .form-card .content .form-group {
  position: relative;
  display: flex;
  width: 100%;
  margin: 0 !important;
}

.modal.inven .form-card .content .form-group .item {
  width: 100%;
}
.modal.inven .form-card .content .form-group .itemDrop.drop {
  box-shadow: none;
  width: 100%;
  border: 1px solid #0478e9;
  border-radius: 10px;
}
.modal.inven .form-card .content .form-group > span,
.modal.inven .form-card .content .form-group .form-field {
  white-space: nowrap;
  display: block;
}
.modal.inven
  .form-card
  .content
  .form-group
  > span:not(:first-child):not(:last-child),
.modal.inven
  .form-card
  .content
  .form-group
  .form-field:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.modal.inven .form-card .content .form-group > span:first-child,
.modal.inven .form-card .content .form-group .form-field:first-child {
  border-radius: 6px 0 0 6px;
}
.modal.inven .form-card .content .form-group > span:last-child,
.modal.inven .form-card .content .form-group .form-field:last-child {
  border-radius: 0 6px 6px 0;
}
.modal.inven .form-card .content .form-group > span:not(:first-child),
.modal.inven .form-card .content .form-group .form-field:not(:first-child) {
  margin-left: -1px;
}
.modal.inven .form-card .content .form-group .form-field {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 1%;
  margin-top: 0;
  margin-bottom: 0;
}
.modal.inven .form-card .content .form-group > span {
  text-align: center;
  padding: 8px 12px;
  font-size: 14px;
  height: max-content;
  color: var(--group-color);
  background: var(--group-background);
  border: 1px solid var(--group-border);
  transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
}

.modal.inven .form-card .content .form-group:focus-within > span {
  color: var(--group-color-focus);
  background: var(--group-background-focus);
  border-color: var(--group-border-focus);
}

/* end new */

.modal.inven .form-card .content .form__group {
  position: relative;
  padding: 0;
  /* margin-top: 10px; */
  width: 100%;
}

.modal.inven .form-card .content .form__group select.itemDrop {
  position: relative;
  cursor: pointer;
  box-shadow: none;
  border: 2px solid #22bae9;
  border-radius: 10px;
}

.modal.inven .form-card .content .form__group select.itemDrop:hover {
  box-shadow: none;
}

.modal.inven .form-card .content .form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #9b9b9b;
  outline: 0;
  font-size: 1.3rem;
  color: #fff;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}

.modal.inven #msform fieldset:not(:first-of-type) {
  display: none;
}

.modal.inven .form-card .content .form-group .form-field,
.modal.inven #msform input,
.modal.inven #msform textarea {
  margin-bottom: 0;
  height: 40.75px;
}

.modal.inven #msform .action-button.check-status {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0rem;
  right: 0;
}

.modal.inven #msform .action-button {
  width: 100px;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 10px;
  cursor: pointer;
  padding: 5px;
  margin: 10px 0px 10px 5px;
  float: right;
  position: relative;
}

.modal.inven #msform .action-button:hover,
.modal.inven #msform .action-button:focus {
  background-color: #311b92;
}

.modal.inven #msform .action-button-previous {
  width: 100px;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 10px;
  cursor: pointer;
  padding: 5px;
  margin: 10px 5px 10px 0px;
  float: right;
}

.modal.inven #msform .action-button-previous:hover,
.modal.inven #msform .action-button-previous:focus {
  background-color: #000000;
}

.modal.inven .card {
  z-index: 0;
  border: none;
  position: relative;
}

.modal.inven .fs-title {
  font-size: 18px;
  color: #363636;
  margin-bottom: 0.5rem;
  font-weight: normal;
  text-align: left;
}

.modal.inven .purple-text {
  color: #0478e9;
  font-weight: normal;
}

.modal.inven .steps {
  font-size: 18px;
  color: gray;
  margin-bottom: 0.5rem;
  font-weight: normal;
  text-align: right;
}

.modal.inven .fieldlabels {
  color: gray;
  text-align: left;
}

.modal.inven #progressbar {
  margin-bottom: 1rem;
  overflow: hidden;
  color: lightgrey;
}

.modal.inven #progressbar .active {
  color: #0478e9;
}

.modal.inven #progressbar li {
  list-style-type: none;
  font-size: 15px;
  width: 16.6666667%;
  float: left;
  position: relative;
  font-weight: 300;
}

.modal.inven #progressbar #user:before {
  font-family: FontAwesome;
  content: "\f2bd";
}

.modal.inven #progressbar #car:before {
  font-family: FontAwesome;
  content: "\f1b9";
}

.modal.inven #progressbar #account:before {
  font-family: FontAwesome;
  content: "\f044";
}

.modal.inven #progressbar #personal:before {
  font-family: FontAwesome;
  content: "\f58d";
}

.modal.inven #progressbar #payment:before {
  font-family: FontAwesome;
  content: "\f53b";
}

.modal.inven #progressbar #confirm:before {
  font-family: FontAwesome;
  content: "\f00c";
}

.modal.inven #progressbar li:before {
  width: 50px;
  height: 50px;
  line-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
  background: lightgray;
  border-radius: 50%;
  margin: 0 auto 10px auto;
  padding: 2px;
}

.modal.inven #progressbar li:after {
  content: "";
  width: 100%;
  height: 2px;
  background: lightgray;
  position: absolute;
  left: 0;
  top: 25px;
  z-index: -1;
}

.modal.inven #progressbar li.active:before,
.modal.inven #progressbar li.active:after {
  transition: all 200ms linear 0ms !important;
  background-size: 200%, 1px !important;
  background-image: linear-gradient(
    90deg,
    #31c5ff 0%,
    #0478e9 50%,
    #31c5ff
  ) !important;
}

.modal.inven .progress {
  height: 0.25rem;
}

.modal.inven .progress-bar {
  transition: all 200ms linear 0ms !important;
  background-size: 200%, 1px !important;
  background-image: linear-gradient(
    90deg,
    #31c5ff 0%,
    #0478e9 50%,
    #31c5ff
  ) !important;
}

.modal.inven .fit-image {
  width: 100%;
  object-fit: cover;
}

/* end of theme control */

.menu-icon {
  position: fixed;
  display: flex;
  flex-direction: column;
  bottom: 33%;
  right: 0;
  box-shadow: 2px 2px 8px 4px rgba(12, 57, 172, 0.1);
  background: -webkit-linear-gradient(90deg, #189dc5 0%, #22bae9 50%, #0c39ac);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  overflow: hidden;
  z-index: 999;
}

.menu {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e4e4e4;
  font-size: 20px;
  cursor: pointer;
  background: #fff;
  transition: all 0.3s ease-in-out;
}

.menu:hover {
  background: #ffffff00;
  /* background: -webkit-linear-gradient(0deg, #189dc5 0%, #18abc5 50%, #1871c5); */
}

.menu:last-child {
  border-bottom: 0px;
}

.menu:hover i {
  background: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}

.menu i {
  background: -webkit-linear-gradient(90deg, #189dc5 0%, #22bae9 50%, #0c39ac);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* like */

section.detail.dashboard.interested table tbody .td-continue {
  min-width: 136px;
}

/* footer */

.stm_theme_demos__icon > span:after {
  border-left: 5px solid #0478e9 !important;
}

.stm_theme_demos__icon > span:hover:after {
  border-left: 5px solid #22bae9 !important;
}

@media screen and (max-width: 1150px) {
  .menu-icon {
    background: transparent;
  }
  .menu-icon .menu {
    opacity: 0.3;
  }
  .menu-icon .menu:hover {
    opacity: 1;
    background: -webkit-linear-gradient(0deg, #189dc5 0%, #18abc5 50%, #1871c5);
  }
  /* history */
  section.detail.dashboard table.table-respon {
    box-shadow: none;
  }
  section.detail.dashboard table .thead {
    display: none;
  }
  section.detail.dashboard table tbody {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1rem 0;
  }
  section.detail.dashboard table tbody tr {
    width: 97.5%;
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem;
    align-items: top;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #aaaaaa !important;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
  section.detail.dashboard .left-item table tbody tr {
    grid-template-columns: repeat(3, 1fr);
  }
  section.detail .content .content-right.new-datail table td {
    text-align: left !important;
    position: relative;
    width: 100%;
    padding-top: 3rem !important;
    border-radius: 10px;
  }
  section.detail .content .content-right.new-datail table td.td-subject {
    grid-column: 4;
    grid-row: 1 / 3;
    -webkit-box-shadow: inset -3px -2px 5px 0px rgb(255 255 255 / 66%),
      inset -1px -1px 0px 0px rgb(255 255 255 / 18%),
      inset 2px 2px 7px 0px rgb(49 69 106 / 18%);
    box-shadow: inset -3px -2px 5px 0px rgb(255 255 255 / 66%),
      inset -1px -1px 0px 0px rgb(255 255 255 / 18%),
      inset 2px 2px 7px 0px rgb(49 69 106 / 18%);
  }
  section.detail
    .content
    .content-right.new-datail
    .left-item
    table
    td.td-subject {
    grid-column: 3;
  }
  section.detail.dashboard table tbody .td-status.status-1 {
    transition: all 200ms linear 0ms !important;
    background-size: 200%, 1px !important;
    background-image: linear-gradient(
      90deg,
      #30c67733 0%,
      #70df1133 50%,
      #30c67733
    ) !important;
  }
  section.detail.dashboard table tbody .td-status.status-1:hover {
    background-position: 110% !important;
  }
  section.detail.dashboard table tbody .td-number {
    transition: all 200ms linear 0ms !important;
    background-size: 200%, 1px !important;
    background-image: linear-gradient(
      90deg,
      #0477e933 0%,
      #31c5ff33 50%,
      #0478e933
    ) !important;
    color: #363636;
    font-weight: 500;
  }
  section.detail.dashboard table tbody .td-number:hover {
    background-position: 110% !important;
  }
  section.detail .content .content-right.new-datail table td::before {
    position: absolute;
    font-weight: 700;
    top: 1rem;
    left: 1rem;
  }
  table.table-respon tbody tr td.td-number:before {
    content: "เลขอ้างอิง";
  }
  table.table-respon tbody tr td.td-date:before {
    content: "วันที่";
  }
  table.table-respon tbody tr td.td-type:before {
    content: "ประเภท";
  }
  table.table-respon tbody tr td.td-subject:before {
    content: "รายการ";
  }
  table.table-respon tbody tr td.td-money:before {
    content: "จำนวนเงิน";
  }
  table.table-respon tbody tr td.td-payment:before {
    content: "การชำระเงิน";
  }
  table.table-respon tbody tr td.td-status:before {
    content: "สถานะ";
  }
  /* like */
  section.detail.dashboard.interested table {
    box-shadow: none;
  }
  section.detail.dashboard.interested table tbody tr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 1rem 15%;
  }
  section.detail.dashboard.interested table tbody tr.thead {
    display: none;
  }
  section.detail.interested .content .content-right.new-datail table td {
    padding: 0.25rem 1rem !important;
    text-align: right !important;
    position: relative;
  }
  section.detail.dashboard.interested
    .content-right.new-datail
    table
    .td-checkbox {
    position: absolute !important;
    top: 0.75rem;
    left: 0.25rem;
    padding: 0 !important;
    min-width: 25px;
    max-width: max-content;
  }
  section.detail.interested .content .content-right.new-datail table td.td-img {
    padding: 2rem !important;
    margin-bottom: 1rem !important;
    width: max-content;
    border-radius: 50%;
    box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  section.detail.dashboard.interested table tbody .td-type.td-img .img {
    width: 100px;
    height: 100px;
  }
  section.detail.interested
    .content
    .content-right.new-datail
    table
    td.td-subject {
    box-shadow: none;
  }
  section.detail.dashboard.interested table tbody .td-continue {
    width: max-content !important;
    position: absolute !important;
    top: 0.75rem;
    right: 0.25rem;
    margin: 0 !important;
  }
  section.detail.interested
    .content
    .content-right.new-datail
    table
    td::before {
    position: absolute;
    font-weight: 700;
    top: 0.25rem;
    left: 1rem;
  }
  section.detail.interested
    .content
    .content-right.new-datail
    table
    td.td-subject:before {
    content: "รายการ";
  }
  section.detail.interested
    .content
    .content-right.new-datail
    table
    td.td-dateEnd:before {
    content: "บริษัทประกันภัย";
  }
  section.detail.interested
    .content
    .content-right.new-datail
    table
    td.td-type2:before {
    content: "ประเภท";
  }
  section.detail.interested
    .content
    .content-right.new-datail
    table
    td.td-price:before {
    content: "ราคาปกติ";
  }
  section.detail.interested
    .content
    .content-right.new-datail
    table
    td.td-price2:before {
    content: "ราคาหลังหักส่วนลด";
  }
}

.selected {
  position: fixed;
  display: flex;
  flex-direction: column;
  right: 10px;
  bottom: 275px;
  box-shadow: 2px 2px 8px 4px rgba(12, 57, 172, 0.1);
  border-radius: 50%;
  overflow: unset;
  z-index: 999;
  transition: all 0.3s ease-in-out;
  width: 45px;
  height: 45px;
  font-size: 18px;
  animation: rightSlider 0.4s;
}

@keyframes rightSlider {
  from {
    opacity: 0;
    right: -50px;
  }
  to {
    right: 10px;
    opacity: 1;
  }
}

.selected:not(.selected.status-0) {
  display: flex;
}

.selected.status-0 {
  display: none;
}

.selected:hover {
  background: -webkit-linear-gradient(0deg, #20fdee 0%, #0478e9 100%);
}

.selected.menu span {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #ff750c 0%, #ef192d 100%);
  font-size: 10px;
  border-radius: 50%;
  color: #fff;
}

.selected.menu:focus .detail,
.selected.menu:hover .detail {
  display: block;
}

.selected.menu .detail {
  display: none;
  position: absolute;
  top: 0;
  left: -16.5rem;
  padding: 0.5rem;
  border-radius: 0.625rem;
  width: max-content;
  background-image: linear-gradient(
    90deg,
    #0478e9 0%,
    #20fdee 50%,
    #0478e9
  ) !important;
}

.selected.menu .detail::after {
  content: "";
  position: absolute;
  display: block;
  top: 1rem;
  right: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #20fdee;
}

.selected.menu .detail:hover::after {
  border-color: transparent transparent transparent #0478e9;
}

.selected.menu .detail .item {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 15rem;
  padding: 0.5rem;
  background: #fafafa;
  border-color: transparent !important;
  z-index: 1;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.selected.menu .detail .item:not(.selected.menu .detail .item:first-child) {
  margin-top: 0.75rem;
}

.selected.menu .detail .item .img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
}

.selected.menu .detail .item .img img {
  width: 100%;
  height: 100%;
  object-fit: 100%;
}

.selected.menu .detail .item .txt {
  width: max-content;
  max-width: 11.5rem;
  padding-left: 1rem;
  font-weight: 300;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.selected.menu .detail .item .txt a {
  margin-bottom: 0 !important;
  font-size: 13px;
  transition: all 0.1s ease-in-out !important;
}

.selected.menu .detail .item:hover button {
  display: block;
}

.selected.menu .detail .item button {
  display: none;
  position: absolute;
  top: 0.125rem;
  right: 0.125rem;
  background: transparent;
}

.selected.menu .detail .item button i {
  background: -webkit-linear-gradient(90deg, #fff);
}

/* cookies */

.cookies {
  bottom: 1rem;
  left: 1rem;
  padding: 2rem;
  max-width: 330px;
  border-radius: 15px !important;
  background-color: #ffffff;
  box-shadow: 0 9px 25px 0 rgb(132 128 177 / 28%);
  z-index: 999;
  transition: all 0.3s ease-in-out;
  border: 2px solid #0478e9;
}

.cookies > div {
  margin-bottom: 0.5rem;
}

.cookies .img {
  width: 100%;
  margin-bottom: 0.75rem;
}

.cookies .img img {
  width: 30%;
  height: auto;
  min-width: 50px;
  min-height: 50px;
  max-width: 60px;
  max-height: 60px;
  object-fit: cover;
}

.cookies button {
  right: 1rem;
  top: 1rem;
  height: max-content;
  width: max-content;
  background: transparent;
  background-size: 200%, 1px !important;
}

.cookies button i {
  font-size: 28px;
  color: #0478e9;
}

.cookies .head {
  width: 100%;
  text-align: center;
  margin-bottom: 0;
}

.cookies .description {
  width: 100%;
  text-align: center;
  margin-bottom: 0.5rem;
  font-size: 14px;
  font-weight: 300;
}

.cookies .description a {
  text-decoration: underline;
}

.cookies .description a:hover {
  color: #d1d1d1;
}

.cookies button.submit {
  padding: 0.25rem 1.5rem;
  border-radius: 10px;
  color: #fff;
}
/* text animetion */

.title {
  padding: 0rem 0 4rem 0;
}

.title .wrapper-txt {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

.title .wrapper-txt .dynamic-txts {
  margin-top: 1.5rem;
  margin-bottom: 0;
  height: 90px;
  line-height: 90px;
  overflow: hidden;
}

.title .wrapper-txt .dynamic-txts li {
  list-style: none;
  font-size: 2rem;
  font-weight: 500;
  color: #0e3d6b;
  position: relative;
  top: -10px;
  animation: slide 8s steps(4) infinite;
}

.title .description {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20%;
}

.title .description p {
  text-align: center;
  font-weight: 400;
}

@keyframes slide {
  100% {
    top: -360px;
  }
}

.title .wrapper-txt .dynamic-txts li strong {
  color: #0c39ac;
}

.title .wrapper-txt .dynamic-txts li .span-txt {
  background: -webkit-linear-gradient(0deg, #0c39ac 0%, #22bae9 50%, #189dc5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.title .wrapper-txt .dynamic-txts li strong,
.title .wrapper-txt .dynamic-txts li .span-txt {
  position: relative;
  font-family: "Prompt", sans-serif;
  /* border-bottom: 1px solid #535353; */
}

.title .wrapper-txt .dynamic-txts li .span-txt::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 65px;
  width: 100%;
  background: #f8fdfe;
  border-left: 2px solid #0e3d6b;
  animation: typing 5s steps(25) infinite;
}

.title-sponsor.title .wrapper-txt .dynamic-txts li .span-txt::after {
  background: #fff;
}

/* custom blog */

.news-feed-section .blog-feed-post .col-lg-6.left {
  width: 35%;
  flex: unset;
}

.news-feed-section .blog-feed-post .col-lg-6.right {
  width: 60%;
  flex: unset;
  max-width: unset;
}

.news-feed-section .saasio-blog-text {
  padding: 25px 30px 0px 0px !important;
}

.news-feed-section .blog-feed-post .saasio-blog-img {
  width: 275px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.news-feed-section .blog-feed-post .saasio-blog-img img {
  border-radius: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-read-more {
  margin-bottom: 25px;
}

/* search */
section.it-up-search-section {
  padding: 2.5rem 1rem;
  margin-top: -13rem;
  padding-top: 15rem;
  /* padding: 0 3rem 1.5rem; */
  /* background: #effafd6e !important; */
  /* z-index: -2; */
  overflow: unset;
  overflow-x: clip;
  overflow-y: unset;
}
section.it-up-search-section .title {
  /* margin-top: 5.5rem; */
  z-index: 1;
}
section.search-section .search-bar {
  margin-top: 1rem;
  padding: 2rem 2rem 1rem;
  border-radius: 15px;
  transition: 0.4s all ease-in-out;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  transition: all 200ms linear 0ms !important;
  /* background-size: 200%, 1px !important; */
  /* background-image: linear-gradient(90deg, #0478e9 0%, #20fdee 100%) !important; */
  background: #fff;
  z-index: 2;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

section.search-section .search-bar:hover {
  box-shadow: 0px 6px 24px 0px rgba(3, 5, 77, 0.15);
}

section.search-section .search-bar .search-form {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
section.search-section .search-bar .search-form .title {
  width: 100%;
  padding: 0rem 0 0.5rem;
  margin-top: 0;
}
section.search-section .search-bar .search-form .title p {
  color: #fff;
  /* background: -webkit-linear-gradient(0deg, #0478e9 0%, #20fdee 50%, #0478e9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  font-size: 22px;
  font-weight: 600;
}
section.search-section .search-form .input-box {
  width: 75%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
section.search-section .input-box .item {
  width: 32%;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 7px;
  margin-bottom: 1rem;
  position: relative;
  box-shadow: 0px 2px 10px rgb(0 0 0 / 15%);
}

section.search-section .input-box .item button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: #fff;
  border: 1px solid transparent;
  padding: 10px 14px;
}

section.search-section .input-box .item button span {
  color: #363636;
  font-size: 14px;
  font-weight: 400;
}

section.search-section .input-box .item button i {
  background: -webkit-linear-gradient(90deg, #189dc5 0%, #22bae9 50%, #0c39ac);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
}

section.search-section .search-form .confirm-box {
  width: 25%;
  padding: 0 2rem 1rem 2rem;
}

section.search-section .search-form .confirm-box button {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  transition: 0.4s all ease-in-out;
  box-shadow: 0px 0px 24px 0px rgba(3, 5, 77, 0.08);
  color: #fff;
}

section.search-section .search-form .confirm-box button:hover {
  box-shadow: 0px 12px 24px 0px rgba(3, 5, 77, 0.15);
}

section.search-section .search-form .confirm-box button i {
  margin-right: 0.5rem;
  font-size: 20px;
}

section.search-section .search-form .confirm-box button span {
  font-size: 22px;
  font-weight: 600;
}

/* compare */

.header-compare {
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 75px;
  z-index: 5;
  margin-top: 2rem;
}

#nav-section.fixed-nav {
  position: fixed;
  top: 75px;
  width: 100%;
  margin-top: 1px;
  z-index: 1;
}

.saas_two_main_header .row .noti {
  display: none;
}

#nav-section.fixed-nav .container {
  padding: 0;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  overflow: hidden;
  box-shadow: 0px 18px 24px 0px rgba(3, 5, 77, 0.08);
  background: #fff;
}

.header-compare .item {
  position: relative;
  width: 32%;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  box-shadow: 0px 0px 24px 0px rgba(3, 5, 77, 0.08);
  transition: all 0.3s ease-in-out;
  border-radius: 15px;
  overflow: hidden;
  z-index: 1;
}

.header-compare .item.status-2 {
  width: 49%;
}

.header-compare .item.status-2 .img {
  width: 17.5%;
  height: 17.5%;
  min-width: 85px;
  min-height: 85px;
}

.header-compare .item.status-1 .content {
  width: max-content;
}

.header-compare .item.status-1 .img {
  width: 10%;
  height: 10%;
  min-width: 85px;
  min-height: 85px;
}

.header-compare .item.status-1 {
  width: 100%;
}

.header-compare.fixed-nav .item {
  border-radius: 0;
  box-shadow: none;
  width: 33.333333334%;
}

.header-compare.fixed-nav .item.status-2 {
  width: 50%;
}

.header-compare.fixed-nav .item.status-1 {
  width: 100%;
}

.header-compare.fixed-nav
  .item:not(.header-compare.fixed-nav .item:last-child) {
  border-right: 1px solid #e0e0e0;
}

.saas_two_main_header .s2-main-navigation .navbar-nav.flex-center-end {
  gap: 2rem;
}

@media (min-width: 992px) {
  #news-feed .container {
    max-width: 1140px;
  }
}
.header-compare .item:hover {
  box-shadow: 0px 13px 25px 0px rgba(3, 5, 77, 0.1);
  z-index: 9;
}

.header-compare .item .img {
  width: 25%;
  height: 25%;
  min-width: 85px;
  min-height: 85px;
  margin-bottom: 0.5rem !important;
}

.header-compare .item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-compare .item .content {
  width: 65%;
  padding: 0 2rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.header-compare .item .price {
  margin-bottom: 0.5rem;
  font-size: 22px;
  font-weight: 600;
}

.header-compare .item:hover .overlay {
  opacity: 0.9;
}

.header-compare .item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  transition: all 0.4s ease-in-out;
}

.header-compare .item:hover .click button {
  right: 0;
}

.header-compare .item .click button {
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  color: #fff;
  top: 10%;
  right: -100%;
  position: absolute;
  transition: all 0.4s ease-in-out;
}

section.compare {
  padding: 2.5rem 1rem 3.75rem 1rem;
}

section.compare .box {
  background: #fff;
  box-shadow: 0px 0px 24px 0px rgba(3, 5, 77, 0.08);
  transition: all 3s ease-in-out;
  border-radius: 15px;
  overflow: hidden;
  width: 100%;
  margin: 0 0 1.5rem;
}

section.compare .accordion {
  color: #363636;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  font-weight: 600;
  transition: 0.4s;
  z-index: 5;
}

section.compare .accordion.active,
section.compare .accordion:hover {
  background: #f1f1f1;
}

section.compare .accordion.active ~ .item {
  max-height: 1000px;
  opacity: 1;
  padding: 1rem 1rem 1em;
}

section.compare .item {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #fff;
  /* css animation */
  overflow: hidden;
  max-height: 0;
  opacity: 0;

  /* add browser prefixes */
  transition: all 0.3s ease;
}

section.compare .item .title {
  width: 100%;
  padding: 1rem 0.5rem;
  background: #f8f8f8;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  border-radius: 5px;
}

section.compare .item .content {
  width: 100%;
}

section.compare .item .content .text {
  width: 33.33%;
  margin: 0.5rem 0;
  padding: 1rem 0.5rem;
  background: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 300;
}

section.compare .item .content .text.status-2 {
  width: 50%;
}

section.compare .item .content .text.status-1 {
  width: 100%;
}

section.compare
  .item
  .content
  .text:not(section.compare .item .content .text:last-child) {
  border-right: 1px solid #e0e0e0;
}

section.compare .item .foot {
  color: #ee132f;
  font-size: 12px;
  font-weight: 300;
  padding: 0.5rem 0;
}

section.compare .item .download {
  width: 100%;
  padding: 1rem 0.5rem;
  background: #f8f8f8;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  border-radius: 5px;
}

section.compare .item .download button {
  padding: 0.5rem 1.5rem;
  border-radius: 25px;
  color: #fff;
}

/* new inventory detail */

section.detail .content-left .box .profile {
  width: 100%;
  max-width: max-content;
}

section.detail .content .content-left .box:first-child .profile {
  max-width: unset;
}

section.detail .content .content-left .box:first-child .profile .img {
  margin-right: unset;
  margin-bottom: 1rem;
}

section.detail .content-left .box .profile .img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 2rem;
}

section.detail .content-left .box .profile .img.user {
  width: 75px;
  height: 75px;
  margin-bottom: 0 !important;
}

section.detail .content-left .box .profile .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section.detail .content-left .box .profile .name-user {
  width: 70%;
}

section.detail .content-left .box .profile .name-user .username {
  font-size: 18px;
  font-weight: 500;
  color: #363636;
}

section.detail .content-left .box .profile .name-user .sign {
  margin-top: 0.5rem;
}

section.detail .content-left .box .profile .name-user .sign button {
  padding: 0.25rem 0.75rem;
  border-radius: 5px;
  overflow: hidden;
  font-size: 14px;
  color: #fff;
}

section.detail .content-left .box .profile .name-user .email {
  margin-bottom: 0.5rem;
  font-size: 14px;
  font-weight: 300;
  color: #363636;
}

section.detail .content-left .box .profile .name-user .btn-profile button {
  padding: 0.25rem 1rem;
  border-radius: 10px;
  color: #fff;
}

section.detail .content-left .box .item-detail {
  height: max-content;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  width: 100%;
}
section.detail .content-left .box .item-detail:last-child {
  border-bottom: 0px;
  padding-bottom: 0rem;
}
section.detail .content-left .box .item-detail .title {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: none;
  width: 100%;
  text-align: center;
  padding: 0.5rem 0;
  margin-bottom: 0;
  display: unset;
  font-size: 18px;
  font-weight: 600;
}
section.detail .content-left .box .item-detail .name {
  font-size: 18px;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0px 0px 24px 0px rgb(3 5 77 / 8%);
  margin-bottom: 0.8rem;
}

section.detail .content-left .box .item-detail.ins-content {
  padding-right: 2rem;
  padding-left: 2rem;
}

section.detail .content-left .box .item-detail.ins-content .name-user {
  width: max-content;
}

section.detail .content-left .box .item-detail.ins-content .tag {
  border-radius: 15px;
  overflow: hidden;
  padding: 0.125rem 1rem;
  width: max-content;
  font-size: 14px;
  color: #fff;
}

section.detail .content-left .box .item-detail.ins-content .tag1 {
  margin-bottom: 0.25rem;
}

section.detail .content-left .box .item-detail .price {
  width: 100%;
  text-align: center;
  padding: 1.5rem 0;
  font-size: 22px;
  font-weight: 600;
  color: #363636;
}

section.detail .content-left .box .item-detail .checkbox {
  width: 90%;
  max-width: max-content;
}

section.detail .content-left .box .item-detail .checkbox input {
  position: unset;
  opacity: 1;
  z-index: unset;
}

section.detail .content-left .box .item-detail .button {
  display: flex;
  flex-direction: column;
  align-items: center;
}

section.detail .content-left .box .item-detail .button button {
  margin: 0.25rem 0;
  width: 100%;
  padding: 0.5rem 1.5rem;
  border-radius: 10px;
  background-color: unset;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

section.detail .content .content-right .heady.heady2 {
  border-bottom: 1px solid rgba(196, 196, 196, 0.4);
}

section.detail .content .content-right .heady .txt.txt2 {
  width: 65%;
}

section.detail .content .content-right .heady .txt.txt2 p {
  color: #6b6b6b;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}

section.detail .content .content-right .heady .txt.txt2 h2 {
  color: #363636;
  font-size: 26px;
  font-weight: 600;
  line-height: 38px;
  margin-bottom: 0.25rem;
}

section.detail .content .content-right .heady .txt.txt2 .tags {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* row-gap: 1rem; */
  column-gap: 1rem;
}

section.detail .content .content-right .heady .txt.txt2 .tag {
  border-radius: 15px;
  overflow: hidden;
  padding: 0.125rem 1rem;
  width: max-content;
  font-size: 14px;
  color: #fff;
}

section.detail .content .content-right .condition {
  padding: 0 2rem;
}

section.detail .content .content-right .condition ul {
  margin-bottom: 1rem;
}

section.detail .content .content-right .condition ul li {
  font-size: 14px;
  font-weight: 400;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 0.125rem;
}

section.detail .content .content-right .condition ul li i {
  margin-right: 1rem;
  border-radius: 50%;
  font-size: 16px;
  color: #ee132f;
}

section.detail .content .content-right .condition ul li.impotant {
  color: #ee132f;
}

section.detail .content .content-right .vehicle {
  width: 100%;
}

section.detail .content .content-right .vehicle .title h4 {
  font-size: 22px;
}

section.detail .content .content-right .vehicle .content {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: 0.5rem;
  padding: 1rem 0;
}

section.detail .content .content-right .vehicle .content .item {
  width: 32%;
  padding: 0 0.25rem;
}

section.detail .vehicle .content .item .icon {
  width: 75px;
  height: 75px;
  font-size: 38px;
  border-radius: 10px;
  overflow: hidden;
  color: #0e3d6b;
}

section.detail .vehicle .content .item .description {
  width: 60%;
  height: max-content;
  padding-left: 0.25rem;
  padding-top: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

section.detail .vehicle .content .item .description p {
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  color: #363636;
  width: 100%;
}

section.detail .vehicle .content .item .description span {
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 12px;
  font-weight: 300;
  color: #6e6e6e;
}

section.detail .vehicle.parties .content .item .icon {
  width: 90px;
  height: 90px;
  font-size: 38px;
  border-radius: 10px;
  overflow: hidden;
  color: #0e3d6b;
}

section.detail .content .content-right .vehicle.parties .item {
  width: 49%;
}

section.detail .content .content-right .vehicle.parties.attachment .item {
  width: 100%;
}

section.detail .vehicle.parties.attachment .content .item .description {
  width: 85%;
}

section.detail .vehicle.parties .content .item .description {
  width: 67.5%;
  padding-top: 0.25rem;
}

section.detail .vehicle.parties .content .item .description p {
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 18px;
  font-weight: 500;
  color: #363636;
  width: 100%;
}

section.detail .vehicle.parties .content .item .description span {
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 16px;
  font-weight: 300;
  color: #6e6e6e;
}

@keyframes typing {
  40%,
  60% {
    left: calc(100% + 30px);
  }
  100% {
    left: 0;
  }
}

/* user profile */

section.user-profile .box {
  padding: 2rem;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0px 0px 24px 0px rgb(3 5 77 / 8%);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

section.user-profile .box .heady {
  width: 100%;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}

section.user-profile .box h3 {
  width: 100%;
  text-align: center;
}

section.user-profile .box .data-cus {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

section.user-profile .box .data-cus .profile-cus,
section.user-profile .box .data-cus .points,
section.user-profile .box .data-cus .data-log {
  width: 100%;
}

section.user-profile .box .data-cus .profile-cus {
  display: flex;
  flex-direction: column;
  align-items: center;
}

section.user-profile .box .data-cus .img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 1rem;
  padding: 5px;
  position: relative;
  z-index: 1;
}

section.user-profile .box .data-cus .img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

section.user-profile .box .data-cus .img i {
  position: absolute;
  top: 5%;
  right: 5%;
  z-index: 2;
  width: 35px;
  height: 35px;
  font-size: 18px;
  display: flex;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  cursor: pointer;
}

section.user-profile .box .data-cus .points {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 0;
  margin: 1rem 0;
  background: #dff2f8b4;
}

section.user-profile .box .data-cus .point {
  width: 50%;
  border-right: 1px solid #e0e0e0;
}

section.user-profile .box .data-cus .points div span,
section.user-profile .box .data-cus .points div p {
  width: 100%;
  text-align: center;
  margin-bottom: 0;
}

section.user-profile .box .data-cus .points div p {
  font-size: 18px;
  font-weight: 500;
  color: #0478e9;
}

section.user-profile .box .data-cus .points div span {
  font-size: 20px;
  font-weight: 600;
  color: #ff750c;
}

section.user-profile .box .data-cus .sale {
  width: 50%;
}

section.user-profile .box .data-cus .data-log .title {
  margin-bottom: 0;
  padding-bottom: 0;
}

section.user-profile .box .data-cus .data-log p {
  margin-bottom: 0.25rem;
  font-size: 14px;
  font-weight: 300;
}

section.user-profile .box .data-cus .data-log input {
  outline: 1px solid #e0e0e0;
  padding: 0.5rem 1rem;
  width: 100%;
  border-radius: 5px;
}

section.user-profile .box .data-pri {
  width: 50%;
  padding: 0.1rem 2rem 1rem;
}

section.user-profile .box .data-pri .title {
  padding-bottom: 0.25rem;
}

section.user-profile .box .data-pri .title h4 {
  font-weight: 400;
}

section.user-profile .box .data-pri .input-item {
  margin-bottom: 1rem;
}

section.user-profile .box .data-pri .input-item p {
  margin-bottom: 0.25rem;
  font-weight: 300;
  font-size: 14px;
}

section.user-profile .box .data-pri .input-item input {
  width: 100%;
  padding: 0.5rem 1rem;
  outline: 1px solid #e0e0e0;
  border-radius: 5px;
}

section.user-profile .box .data-pri .submit {
  width: 100%;
  padding: 1rem 0 0;
}

section.user-profile .box .data-pri .submit button {
  padding: 0.5rem 1.5rem;
  border-radius: 10px;
  color: #fff;
}

/* dashboard */

section.detail.dashboard {
  overflow: unset !important;
  padding-bottom: 5rem !important;
}

section.detail.dashboard .content .content-right.new-datail {
  width: 70%;
  margin-top: 2rem;
  padding: 0 !important;
  border-radius: unset;
  background: unset;
  box-shadow: unset;
}

section.detail.dashboard .content .content-left.new-detail {
  width: 30%;
  padding-top: 0;
  margin-top: 2rem;
}

section.detail.dashboard .content .content-right.new-datail .left-item {
  border-radius: 15px;
  background: #ffffff;
  transition: 0.4s all ease-in-out;
  box-shadow: 0px 0px 24px 0px rgb(3 5 77 / 8%);
  padding: 1rem !important;
}

section.detail .content-right.new-datail .left-item:first-child {
  margin-bottom: 0.5rem;
}

section.detail.dashboard .content .content-left.mobile {
  display: none;
}

section.detail.dashboard .content .content-right .left-item .conty {
  padding: 1rem;
}

section.dashboard .form-group {
  margin-bottom: 0;
}
section.detail.dashboard .content .content-right .heady {
  position: relative;
  margin-bottom: 0;
  border-bottom: 0;
}

section.detail.dashboard .content .content-right .heady .txt.txt2 {
  width: max-content;
}

section.detail.dashboard .searchBox {
  background: #fff;
  border-radius: 40px;
  display: flex;
  align-items: center;
  border: 2px solid #363636;
}

section.detail.dashboard .searchBox:hover {
  padding-left: 10px;
}

section.detail.dashboard .searchBox:hover > .searchInput {
  width: 240px;
  padding: 0 6px;
}

section.detail.dashboard .searchButton {
  color: #363636;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}

section.detail.dashboard .searchInput {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: #363636;
  font-size: 16px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
  opacity: unset;
  z-index: unset;
  position: unset;
}

section.detail.dashboard .conty {
  padding: 1rem;
}

section.detail.dashboard table {
  margin-bottom: 0rem;
  background-color: transparent;
  border-collapse: collapse;
  box-shadow: 0px 5px 10px #e1e5ee;
  background-color: white;
  overflow: hidden;
}

section.detail.dashboard table th {
  border-top: none;
  padding: 2rem 1rem !important;
}

section.detail.dashboard table th.th-money,
section.detail.dashboard table th.th-payment {
  min-width: 130px;
}

section.detail.dashboard table tbody tr {
  text-align: center;
  border: none;
  /*-- anime --*/
  opacity: 1;
  -webkit-animation-name: opacity;
  -webkit-animation-duration: 0.5s;
  animation-name: opacity;
  animation-duration: 0.5s;
}

section.detail.dashboard table tbody tr:first-child {
  box-shadow: 0px 5px 10px #e1e5ee;
}

section.detail.dashboard table tbody td {
  border: none !important;
  padding: 1rem !important;
  vertical-align: middle !important;
}

@keyframes opacity {
  from {
    opacity: 0;
    background: #20fdee27;
  }
  to {
    opacity: 1;
    background: none;
  }
}

@-webkit-keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

section.detail.dashboard table tbody .td-number,
section.detail.dashboard table tbody .td-date,
section.detail.dashboard table tbody .td-money,
section.detail.dashboard table tbody .td-payment,
section.detail.dashboard table tbody .td-type,
section.detail.dashboard table tbody .td-subject,
section.detail.dashboard table tbody .td-dateEnd,
section.detail.dashboard table tbody .td-num,
section.detail.dashboard table tbody .td-status,
section.detail.dashboard table tbody .td-continue,
section.detail.dashboard table tbody .td-checkbox {
  text-align: center;
  font-size: 16px;
  padding: 1rem;
  width: max-content;
  min-width: 100px;
  font-weight: 300;
  border: 1px solid #f1f0f0;
}

section.detail.dashboard table tbody .td-subject {
  text-align: left;
}

section.detail.dashboard table tbody .td-status.status-1 {
  color: #48c148;
}

section.detail.dashboard .content-right.new-datail .td-checkbox {
  padding: 1rem 0 1rem 2rem !important;
  min-width: 25px;
}

section.detail.dashboard table tbody .td-checkbox input {
  position: unset;
  opacity: 1;
  z-index: unset;
}

section.detail.dashboard table tbody .td-type.td-img {
  margin: 0;
  margin-left: 1.5rem;
  margin-right: 0rem;
}
section.detail.dashboard.interested table tbody .td-type.td-img {
  margin: 0;
}
section.detail.dashboard table tbody .td-type.td-img .img {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
}

section.detail.dashboard table tbody .td-type.td-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

section.detail.dashboard table tbody .td-subject {
  min-width: 270px;
}

section.detail.dashboard table tbody .td-type {
  min-width: 135px;
}

section.detail.dashboard table tbody .td-number,
section.detail.dashboard table tbody .td-status {
  min-width: 120px;
}

section.detail.dashboard table tbody .td-num,
section.detail.dashboard table tbody .td-payment,
section.detail.dashboard table tbody .td-dateEnd,
section.detail.dashboard table tbody .td-continue,
section.detail.dashboard table tbody .td-money,
section.detail.dashboard table tbody .td-status {
  text-align: center;
}

section.detail.dashboard table tbody .td-status.status-0 {
  color: #ee251e;
}

section.detail.dashboars.status-1d table tbody .td-statu {
  color: #48c148;
  grid-column: 1;
  grid-row: 2;
}

section.detail.dashboard table tbody .td-continue button {
  padding: 0.5rem 1rem;
  color: #fff;
  border-radius: 10px;
}

/* sub-menu */

section.detail.dashboard .service_content {
  padding-top: 0;
}

section.detail.dashboard .sub-menu {
  padding: 1rem;
  gap: 2.1%;
  row-gap: 0.75rem;
}

section.detail.dashboard .sub-menu .wow {
  width: 23%;
  border-radius: 10px;
  padding-left: 0;
  padding-right: 0;
}

section.detail.dashboard .sub-menu .wow .service_content_box {
  margin-bottom: 0 !important;
  border-radius: 10px;
  padding: 2rem 1rem;
  transition: 0.5s all ease-in-out;
  z-index: 1;
  background-color: #fff;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

section.detail.dashboard .sub-menu .wow .img,
section.detail.dashboard .sub-menu .wow .txt {
  width: 100%;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
}

section.detail.dashboard .sub-menu .wow .img {
  position: relative;
  z-index: 1;
  margin-bottom: 1rem;
}

section.detail.dashboard .sub-menu .wow .txt {
  font-size: 18px;
  font-weight: 500;
}

section.detail.dashboard .sub-menu .wow .img img {
  width: 50%;
  height: auto;
  animation: slideLeft 1s;
}

@keyframes slideLeft {
  0% {
    margin-right: -300px;
  }
  80% {
    margin-left: -50px;
  }
  90% {
    margin-left: -50px;
    transform: scaleX(0.75);
  }
  100% {
    margin-right: 0;
    transform: scaleX(1);
  }
}

/* renew */

section.detail.dashboard .content .content-right .conty {
  overflow-x: auto;
}

section.detail.dashboard .content .content-right tbody tr:nth-of-type(odd) {
  background-color: #fff;
}

section.detail.dashboard .content .content-right .conty p {
  margin-bottom: 0;
}

section.detail.history .content .content-right.new-datail,
section.detail.renew .content .content-right.new-datail {
  width: 100%;
  margin-bottom: 2rem;
}

.modify {
  width: 100%;
  margin-top: 1.5rem;
}

.modify .pagination-container {
  height: 40px;
}

section.detail .content .content-right .heady {
  flex-wrap: wrap;
}

.modify .pagination li {
  height: 40px;
  width: 40px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  cursor: pointer;
  color: #fff;
  transition: all 200ms linear 0ms !important;
  background-size: 200%, 1px !important;
  background-image: linear-gradient(
    90deg,
    #31c5ff 0%,
    #0478e9 50%,
    #31c5ff
  ) !important;
}

.modify .pagination li.active {
  transition: all 200ms linear 0ms;
  background-size: 200%, 1px;
  background-image: linear-gradient(
    90deg,
    #ff780b 0%,
    #ee132f 50%,
    #ff780b
  ) !important;
}

.modify .pagination li.active:hover {
  background-position: 110%;
}

.modify .pagination li:hover {
  background-position: 110% !important;
}

/* history */

section.detail.dashboard.history .searchBox {
  margin-right: 2rem;
}

section.history .filterSearch {
  width: 600px;
}

section.history .filter {
  width: 250px;
}

section.history.detail input {
  opacity: unset;
  z-index: unset;
  position: unset;
}

section.dashboard .form-control:hover {
  border: 1px solid #f1f0f0;
}

section.blog.sold .row.container .leftcolumn .content .image .compare {
  opacity: 1;
}

@media screen and (max-width: 620px) {
  .searchBox:hover > .searchInput {
    width: 150px;
    padding: 0 6px;
  }
  section.blog.sold .leftcolumn .content .item .a {
    position: relative;
  }
  section.blog.sold .leftcolumn .content .item:hover .price.solo {
    /* display: flex; */
  }
  section.blog.sold .leftcolumn .content-detail .sub-item .price.solo {
    position: absolute;
    right: 0;
    top: 11rem;
    /* display: none; */
  }
  section.blog.sold .row.container .leftcolumn .content .image .compare.pare {
    bottom: 0;
  }
  section.blog.sold .leftcolumn .content-detail .sub-item .detail-product {
    width: 50%;
    margin: 0.25rem 0;
    border-left: 1px solid #ddd;
  }
  .saasio-breadcurmb-section p {
    width: 100%;
  }
  section.blog.sold .leftcolumn .content-detail .sub-item.btn-more {
    padding-top: 0;
  }
  section.blog.sold .leftcolumn .content-detail .sub-item.btn-more button {
    box-shadow: none;
    margin: 0 0 1rem !important;
  }
}

/* float menu */

.stm_theme_demos__icon--toggle {
  transition: all 200ms linear 0ms !important;
  background-size: 200%, 1px !important;
  background-image: linear-gradient(
    90deg,
    #31c5ff 0%,
    #0478e9 50%,
    #31c5ff
  ) !important;
  color: #fff;
  background-color: unset;
}

.stm_theme_demos__icon--toggle:hover {
  background-position: 110% !important;
}

.stm_theme_demos__icon--toggle:before {
  border-bottom: 4px solid #0478e9 !important;
}

.stm_theme_demos.expand a:hover,
.stm_theme_demos.expand div:hover {
  transition: all 200ms linear 0ms !important;
  background-size: 200%, 1px !important;
  background-image: linear-gradient(
    90deg,
    #31c5ff 0%,
    #0478e9 50%,
    #31c5ff
  ) !important;
  color: #fff;
  background-color: unset;
}

.stm_theme_demos.expand a:hover i,
.stm_theme_demos.expand div:hover i {
  -webkit-text-fill-color: #fff;
}

.stm_theme_demos a i,
.stm_theme_demos div i {
  font-size: 1.325rem !important;
}

.stm_theme_demos a i,
.stm_theme_demos div i {
  font-size: 28px;
  background: -webkit-linear-gradient(90deg, #189dc5 0%, #22bae9 50%, #0c39ac);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stm_theme_demos a i.fa-line,
.stm_theme_demos div i.fa-line {
  background: -webkit-linear-gradient(90deg, #00b900 0%, #00b900 50%, #00b900);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stm_theme_demos a i.fa-facebook-square,
.stm_theme_demos div i.fa-facebook-square {
  background: -webkit-linear-gradient(90deg, #4267b2 0%, #4267b2 50%, #4267b2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stm_theme_demos a i.fa-phone-square,
.stm_theme_demos div i.fa-phone-square {
  background: -webkit-linear-gradient(90deg, #43b51f 0%, #43b51f 50%, #43b51f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stm_theme_demos a i.fa-home,
.stm_theme_demos div i.fa-home {
  background: -webkit-linear-gradient(90deg, #0478e9 0%, #0478e9 50%, #0478e9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.25rem !important;
}

.stm_theme_demos a i.fa-search,
.stm_theme_demos div i.fa-search {
  background: -webkit-linear-gradient(90deg, #ff780b 0%, #ff780b 50%, #ff780b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.25rem !important;
}

.stm_theme_demos.expand a span {
  border-radius: 5px;
}

/* nav mobile */

.saas_two_main_header {
  top: 0;
}

.s2-mobile_menu_content .menu-logo {
  display: flex;
  width: 100%;
  padding: 1rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.s2-mobile_menu_content .menu-logo .m-brand-logo {
  margin: 0 0;
  margin-bottom: 0;
}

.s2-mobile_menu .menu-logo .s2-mobile_menu_close {
  position: unset;
  font-size: 28px;
  color: #ff0000;
}

.s2-mobile_menu_content .s2-mobile-main-navigation .navbar-nav.mobile li {
  border-bottom: none;
  border-top: none;
}

.s2-mobile_menu_content .s2-mobile-main-navigation .navbar-nav li.regis {
  padding: 0.5rem 2rem !important;
}

.s2-mobile_menu_content .s2-mobile-main-navigation .navbar-nav li.regis .icon,
.s2-mobile_menu_content
  .s2-mobile-main-navigation
  .navbar-nav
  li.regis
  .icon::after {
  border-radius: 15px !important;
}

.s2-mobile_menu_content .s2-mobile-main-navigation .navbar-nav.mobile li {
  padding: 5px 30px;
}

.s2-mobile_menu_content .s2-mobile-main-navigation .navbar-nav.mobile li.end {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
}

.s2-mobile_menu_content .s2-mobile-main-navigation .navbar-nav.mobile li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem 1rem;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.s2-mobile_menu_content
  .s2-mobile-main-navigation
  .navbar-nav.mobile
  li
  a:hover {
  -webkit-box-shadow: inset -3px -2px 5px 0px rgb(255 255 255 / 66%),
    inset -1px -1px 0px 0px rgb(255 255 255 / 18%),
    inset 2px 2px 7px 0px rgb(49 69 106 / 18%);
  box-shadow: inset -3px -2px 5px 0px rgb(255 255 255 / 66%),
    inset -1px -1px 0px 0px rgb(255 255 255 / 18%),
    inset 2px 2px 7px 0px rgb(49 69 106 / 18%);
}

.s2-mobile_menu_content .s2-mobile-main-navigation .navbar-nav.mobile li a i {
  margin-right: 0.5rem;
  font-size: 18px;
}

.s2-mobile_menu_content
  .s2-mobile-main-navigation
  .navbar-nav.mobile
  li
  a#login-btn,
.s2-mobile_menu_content
  .s2-mobile-main-navigation
  .navbar-nav.mobile
  li
  a#reg-btn {
  justify-content: center;
}
.s2-mobile_menu_content
  .s2-mobile-main-navigation
  .navbar-nav.mobile
  li
  a#reg-btn {
  color: #fff;
}

.s2-mobile_menu_content .s2-mobile-main-navigation .navbar-nav.mobile li .img {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 1rem;
}

.s2-mobile_menu_content
  .s2-mobile-main-navigation
  .navbar-nav.mobile
  li
  .img
  img {
  width: 90%;
  border-radius: 50%;
}

/* inventory */

section.blog.sold .container {
  max-width: 1200px;
}

section.blog.sold .row.container .leftcolumn .type-ins {
  margin-bottom: 1.5rem;
  width: 100%;
}

section.blog.sold .leftcolumn .type-ins > div {
  width: 100%;
  margin-top: 0.5rem;
  gap: 0.5rem;
}

section.blog.sold .leftcolumn .type-ins > div .item {
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  z-index: 1;
  cursor: pointer;
}

section.blog.sold .leftcolumn .type-ins > div .item:hover span.icon {
  background: #fff;
}

section.blog.sold .leftcolumn .type-ins > div .item:hover span.icon i {
  color: #0478e9 !important;
}

section.blog.sold .leftcolumn .type-ins > div .item.org span.icon {
  background: #ff750c;
}
section.blog.sold .leftcolumn .type-ins > div .item span.icon {
  margin-right: 0.5rem;
  letter-spacing: 0;
  color: #fff;
  background: #0478e9;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.5rem;
}


section.blog.sold .leftcolumn .type-ins > div .item.active span.icon,
section.blog.sold .leftcolumn .type-ins > div .item:hover span.icon {
  background: #fff !important;
}

section.blog.sold .leftcolumn .type-ins > div .item.org.active span i,
section.blog.sold .leftcolumn .type-ins > div .item.org:hover span i {
  color: #ff440b !important;
}

section.blog.sold .leftcolumn .type-ins > div .item.active span i,
section.blog.sold .leftcolumn .type-ins > div .item:hover span i {
  color: #0478e9 !important;
}

section.blog.sold .leftcolumn .content-detail {
  justify-content: flex-start !important;
  padding: 1rem 0;
  padding-top: 1.25rem;
  padding-left: 2rem;
  min-height: 250px;
}

section.blog.sold .leftcolumn .content-detail .text-right.mr-3 {
  color: #444444;
  font-size: 12px;
  font-weight: 100;
  position: absolute;
  right: 0;
  top: 0;
}

section.blog.sold .leftcolumn .content-detail .sub-item {
  padding: 0 !important;
  margin-top: 1rem;
}

section.blog.sold .leftcolumn .content-detail .sub-item .cal-install{
  gap: 1rem;
  margin-right: 2rem;
}

section.blog.sold .leftcolumn .content-detail .sub-item .cal-install-item{
  width: 33%;
}

section.blog.sold .sub-item .cal-install .form-group span{
  font-size: 14px;
}

section.blog.sold .sub-item .cal-install .form-group input,
section.blog.sold .sub-item .cal-install .form-group select{
  font-size: 14px;
  height: fit-content;
  padding: 0.25rem 0.5rem
}



section.blog.sold .leftcolumn .content-detail .sub-item.top {
  margin-top: 0;
}


section.blog.sold .row.container .leftcolumn .content .item .image img {
  transition: all 0.4s ease-in-out;
}

section.blog.sold .leftcolumn .content .item div.a {
  display: flex;
  justify-content: space-between;
  width: 100%;
  text-decoration: none;
}

section.blog.sold .leftcolumn .content-detail .sub-item .detail-product p {
  margin-bottom: 0.125rem;
}

section.blog.sold .row.container .leftcolumn .content .image .compare {
  cursor: pointer;
}

section.blog.sold .row.container .leftcolumn .content .image .compare.like {
  top: 15px;
  left: 10px;
  height: max-content;
  transition: all 200ms linear 0ms !important;
  background-size: 200%, 1px !important;
  background-image: linear-gradient(
    90deg,
    #feb0d6 0%,
    #fd60a9 50%,
    #feb0d6
  ) !important;
}

section.blog.sold .row.container .leftcolumn .content .image .compare.type {
  top: 15px;
  right: -5px;
  bottom: unset !important;
  left: unset !important;
  background-image: linear-gradient(
    90deg,
    #31c5ff 0%,
    #0478e9 50%,
    #31c5ff
  ) !important;
}

section.blog.sold
  .row.container
  .leftcolumn
  .content
  .image
  .compare.like:hover {
  background-position: 110% !important;
}

section.blog.sold.inventory .row.container .leftcolumn .content .image {
  position: relative;
  overflow: hidden;
  min-height: unset;
  max-width: 350px;
  /* max-height: 200px; */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35%;
  /* padding-left: 2rem; */
  padding: 0;
}
section.blog.sold.inventory .row.container .leftcolumn .content .image img {
  width: 50%;
  border-radius: 0 !important;
  height: auto;
  object-fit: cover;
  border-radius: 50% !important;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

section.blog.sold.inventory .leftcolumn .content-detail .sub-item .txt p {
  width: max-content;
}

section.blog.sold.inventory .leftcolumn .content-detail .sub-item .price.solo {
  width: 11rem;
}

section.blog.sold.inventory
  .leftcolumn
  .content-detail
  .sub-item
  .price.solo
  * {
  width: max-content;
}

section.blog.sold.inventory .leftcolumn .content .image .package_id {
  display: none;
}

section.blog.sold.inventory .leftcolumn .content .image .package_id2 {
  display: block;
}

section.detail .content .content-right.new-datail {
  padding-right: 1rem;
}

/* Bt-menu */

.Bt-menu {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  /* background: #0478e9; */
  background-image: linear-gradient(
    180deg,
    #31c5ff 0%,
    #0478e9 100%
  ) !important;
  box-shadow: 0 0 20px -10px rgb(0 0 0 / 80%);
  z-index: 99999;
  align-items: flex-end;
  height: 70px;
}

.Bt-menu .item {
  width: 20%;
  padding: 0.75rem 0.25rem;
  border-radius: 0 !important;
  margin: 0;
  border-color: transparent;
  cursor: pointer;
}

.Bt-menu .item:after {
}

.Bt-menu .item .icon {
  display: flex;
  position: relative;
  width: 100%;
  font-size: 20px;
  color: #fff !important;
  border: none;
  background: transparent !important;
  box-shadow: none !important;
}

.Bt-menu .item.active .icon,
.Bt-menu .item:hover .icon {
  border: 2px solid transparent !important;
  /* box-shadow: none; */
  -webkit-box-shadow: inset -3px -2px 5px 0px rgb(255 255 255 / 66%),
    inset -1px -1px 0px 0px rgb(255 255 255 / 18%),
    inset 2px 2px 7px 0px rgb(49 69 106 / 18%) !important;
  box-shadow: inset -3px -2px 5px 0px rgb(255 255 255 / 66%),
    inset -1px -1px 0px 0px rgb(255 255 255 / 18%),
    inset 2px 2px 7px 0px rgb(49 69 106 / 18%) !important;
  color: #fff;
  background: transparent !important;
  width: 50px;
  height: 50px;
  border-radius: 50% !important;
  animation: scale 0.3s;
}

@keyframes scale {
  from {
    width: unset;
    height: unset;
  }
  to {
    width: 50px;
    height: 50px;
  }
}

.Bt-menu .item.active .icon i,
.Bt-menu .item:hover .icon i {
  color: #fff !important;
}

.Bt-menu .item.active .icon:before,
.Bt-menu .item:hover .icon:before {
  opacity: 1;
  right: 25px;
  visibility: visible;
}

.Bt-menu .item .icon:after {
  top: 200%;
}

.Bt-menu .item.active .icon:after,
.Bt-menu .item:hover .icon:after {
  top: 0;
  transition-delay: 0.1s;
}

.Bt-menu .item .icon.s2-mobile_menu_button.s2-open_mobile_menu i {
  display: block;
}

.Bt-menu .item .icon.renew i {
  transform: scaleX(-1);
}

.Bt-menu .item .txt {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.3s ease-in-out;
  color: #fff;
}

.Bt-menu .item.active .txt {
  font-weight: 500;
}

.Bt-menu .item:hover .txt {
  color: #fff !important;
}

/* cart-menu */

section.browse-ads .box-ads .box {
  align-items: center;
}

section.browse-ads .box-ads .box p.p {
  margin-bottom: 0;
}

section.browse-ads .box-ads .box p.i {
  width: 60%;
}

/* footer member */
section.footer-member.detail.dashboard {
  display: none;
  padding-bottom: 6rem !important;
  padding-top: 0 !important;
}
section.footerMember {
  display: block;
}
section.detail .content .content-left .box.contact {
  flex-direction: row;
  justify-content: center;
}

section.detail .content .content-left .box.contact .txt {
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
  font-size: 20px;
  font-weight: 600;
}

section.detail .content .content-left .box.contact .icon {
  width: 20%;
  font-size: 30px;
}

section.detail .content .content-left .box.contact .icon .fa-facebook {
  color: #4267b2;
}

section.detail .content .content-left .box.contact .icon .fa-line {
  color: #00b900;
}

section.detail .content .content-left .box.contact .icon .fa-square-phone {
  color: #43b51f;
}

section.detail .content .content-left .box.contact .icon .fa-location-dot {
  background: #dc4b3e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 5px;
  color: #fff;
  font-size: 16px;
}

/* my insure */
section.detail.my-insure .content .content-right.new-datail table tr {
  padding: 0;
  box-shadow: none;
  margin-bottom: 0;
  border-bottom: 0 !important;
}
section.detail.my-insure .content .content-right.new-datail table td {
  width: 100%;
}

/* cookies policy */

section.CookiePolicy {
  margin-top: 5rem;
  margin-bottom: 3rem;
}

section.CookiePolicy .CookieMenu {
  text-decoration: underline;
}

.saas_two_main_header .s2-main-navigation {
  margin-right: 2rem;
}

section.blog.sold .container .popular-widget.mobile,
section.blog.sold .container .header-right.mobile {
  display: none;
}

@media screen and (max-width: 1100px) {
  .news-feed-section .blog-feed-post .col-lg-6.right {
    width: 55%;
  }
}

@media screen and (max-width: 1024px) {
  /* .stm_theme_demos .stm_theme_demos__icon {
    display: flex !important;
  } */
  .stm_theme_demos {
    top: unset !important;
    right: 0 !important;
    margin-top: unset !important;
    bottom: 0 !important;
    padding: 0 !important;
    border-radius: unset !important;
  }

  .stm_theme_demos.expand {
    top: unset !important;
    right: 0 !important;
    margin-top: unset !important;
    bottom: 0 !important;
    padding: 0 !important;
    border-radius: unset !important;
  }
}

@media screen and (max-width: 1000px) {
  section.blog.sold .row.container .leftcolumn .head .left {
    width: 70% !important;
  }
  section.blog.sold .row.container .leftcolumn .head .right {
    width: 30% !important;
  }
}

@media screen and (max-width: 991px) {
  .news-feed-section .blog-feed-post .col-lg-6.left {
    width: 100%;
  }
  .news-feed-section .blog-feed-post .col-lg-6.right {
    width: 100%;
  }
  .news-feed-section .blog-feed-post .saasio-blog-img {
    width: 100%;
    border-radius: 15px;
  }
  .news-feed-section .blog-feed-post .saasio-blog-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  /* detail */
  section.detail .content .content-left.new-detail {
    width: 100% !important;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
  }
  section.detail .content .content-left .box:first-child {
    width: 39%;
  }
  section.detail .content .content-left .box:first-child .profile {
    flex-direction: column;
  }
  section.detail .content-left .box .profile .name-user .username {
    text-align: center;
  }
  section.detail .content-left .box .profile .name-user .username.name-ins {
    text-align: left;
  }
  section.detail .content-left .box .profile .name-user .sign {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  section.detail .content-left .box .profile .name-user .sign button {
    width: max-content;
    margin-bottom: 0.5rem;
  }
  section.detail .content .content-left.new-detail {
    flex-wrap: wrap;
  }
  section.detail .content .content-left .box {
    margin-bottom: 2rem;
  }
  section.detail .content .content-left .box:last-child {
    width: 100%;
    /* display: none; */
  }
  section.detail.dashboard .content .content-right .heady {
    padding-bottom: 1rem;
  }
  section.detail .content .content-right.new-datail {
    width: 100%;
    box-shadow: 0px 0px 24px 0px rgb(3 5 77 / 8%);
    border-radius: 15px;
  }
  /* compare */
  .header-compare .item {
    flex-direction: column;
  }
  .header-compare .item .content {
    width: 100%;
    align-items: center;
    padding: 0;
  }
  .header-compare .item .content .name {
    display: none;
  }
  .header-compare .item .price {
    margin-bottom: 0 !important;
  }
  #nav-section.fixed-nav {
    top: 75px;
  }
  section.detail.dashboard .content .container {
    padding: 0 1rem;
    flex-direction: column;
  }
  section.detail.dashboard .content .content-left.new-detail,
  section.detail.dashboard .content .content-right.new-datail {
    width: 100%;
  }
  section.detail.dashboard .content .content-left.new-detail {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
  }
  section.detail .content .content-left .box {
    width: 100% !important;
  }
  section.detail.dashboard .content .content-left .box .num-point .img img {
    width: 60%;
    height: 60%;
  }
  section.history .filterSearch {
    width: 100%;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-top: 1rem;
    flex-wrap: wrap;
  }
  section.detail.dashboard.history .searchBox {
    margin-right: 0;
  }
  section.history .filter {
    width: 200px;
    transition: all 0.3s ease-in-out;
  }
  section.detail .content-left .box .profile .img.user {
    margin-bottom: 1rem !important;
  }
}

@media screen and (max-width: 950px) {
  /* history */
  section.detail.dashboard table tbody tr {
    grid-template-columns: repeat(3, 1fr);
  }
  section.detail .content .content-right.new-datail table td.td-subject {
    grid-column: 3;
    grid-row: 1 / 4;
  }
  section.detail.dashboard table tbody .td-status.status-1 {
    grid-column: 2;
    grid-row: 1;
  }
}

@media screen and (max-width: 920px) {
  section.browse-ads .box-ads .container {
    gap: 0.5rem;
  }
  section.browse-ads .box-ads .container a {
    width: 32.5%;
  }
  section.browse-ads .box-ads .container .box {
    width: 100%;
    margin: 0 !important;
  }
}

@media screen and (max-width: 850px) {
  .itemqueue .content {
    padding: 0 !important;
  }
  .itemqueue .content .badgescard .phone .content {
    padding: 0.5rem 1rem 0.5rem 0 !important ;
  }

  /* inven */
  section.blog.sold.inventory {
    padding-top: 4rem;
  }
  section.blog.sold .row.container .leftcolumn {
    padding: 3.75rem 0;
  }
  section.blog.sold .row.container .rightcolumn {
    padding-top: 2rem;
  }
  section.blog.sold .row.container .leftcolumn .content {
    padding: 0 !important;
  }
  section.blog.sold .leftcolumn .content .item div.a {
    flex-direction: column;
  }
  section.blog.sold .leftcolumn .content .item .a {
    width: 100%;
  }
  section.blog.sold .leftcolumn .content-detail {
    width: 100%;
    margin-top: 0;
  }
  section.blog.sold.inventory .row.container .leftcolumn .content .image {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
    width: 100%;
    max-width: unset;
  }
  section.blog.sold.inventory .row.container .leftcolumn .content .image img {
    width: 35%;
    height: auto;
  }
  section.blog.sold .leftcolumn .content-detail .sub-item.bottom .external {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  section.blog.sold.inventory .leftcolumn .content .image .package_id {
    position: absolute;
    top: 0;
    right: 10px;
    display: block;
  }
  section.blog.sold.inventory .leftcolumn .content a .package_id2 {
    display: none;
  }
  section.detail .content .content-left .box:first-child .profile {
    flex-direction: row;
    justify-content: center;
  }
  section.detail .content .content-left .box:first-child .profile .img {
    margin-bottom: unset;
    margin-right: 2rem;
  }
  section.detail .content-left .box .profile .name-user .username {
    text-align: left;
  }
  section.blog.sold .row.container .leftcolumn .head .left h2 {
    font-size: 26px;
  }
}

@media screen and (max-width: 800px) {
  .col-md-2 {
    width: 20% !important;
  }
  .col-md-10 {
    max-width: 80% !important;
  }
  /* compare */
  .header-compare .item .price {
    font-size: 20px;
  }
  /* card-menu */
  section.browse-ads .box-ads .box {
    padding: 1rem 2rem;
  }
  /* dashboard */
  section.detail.dashboard .sub-menu .wow .img {
    margin-bottom: 0.5rem;
  }
}

@media screen and (max-width: 777px) {
  section.browse-ads .box-ads .container a {
    width: 23.5%;
  }
}

@media screen and (max-width: 750px) {
  section.detail .content .content-left.new-detail {
    flex-wrap: wrap;
  }
  section.detail .content .content-left .box:first-child {
    width: 100%;
  }
  section.detail .content .content-left .box:last-child {
    width: 100%;
  }
  section.detail .content .content-right .vehicle .content .item {
    width: 49%;
  }
  section.detail .vehicle.parties .content .item .icon {
    width: 75px;
    height: 75px;
  }
  section.detail .vehicle .content .item .description {
    width: 67.5%;
  }
  section.detail .vehicle.parties .content .item .description {
    padding: 0;
    padding-left: 1rem;
  }
  section.detail .vehicle.parties .content .item .description p,
  section.detail .vehicle .content .item .description p {
    font-size: 18px;
    white-space: wrap;
  }
  section.detail .vehicle.parties .content .item .description span,
  section.detail .vehicle .content .item .description span {
    font-size: 14px;
  }
  /* dashboard */
  .itemqueue {
    margin-bottom: 6.5rem;
    overflow: unset;
    padding: 0;
  }
  .itemqueue .content {
    padding: 0;
  }
  .itemqueue .content .cardqueue {
    width: 100%;
    border-radius: 10px;
  }
  .itemqueue .cardqueue:after {
    width: 300px;
    height: 450px;
  }
  /* history */
  section.detail .content .content-right.new-datail table td.td-subject {
    grid-column: 1 / 4;
    grid-row: 3;
  }
  section.detail.dashboard table tbody .td-status.status-1 {
    grid-column: 3;
    grid-row: 1;
  }
  section.detail.dashboard .left-item table tbody tr {
    grid-template-columns: repeat(2, 1fr);
  }
  section.detail.dashboard .left-item table tbody .td-status.status-1 {
    grid-column: 2;
  }
  section.detail
    .content
    .content-right.new-datail
    .left-item
    table
    td.td-subject {
    grid-row: 2;
    grid-column: 1 / 3;
  }
  @keyframes rotatemagic {
    0% {
      opacity: 0;
      transform: rotate(0deg);
      top: -24px;
      left: -200px;
    }
    100% {
      transform: rotate(-20deg);
      top: -24px;
      left: -125px;
    }
  }
  /* .itemqueue .content .cardqueue .firstinfo img {
    width: 150px;
    height: 150px;
  } */
  .itemqueue .content .cardqueue .firstinfo .profileinfo {
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 20px;
    background: #fff;
    width: 60%;
  }

  .itemqueue .content .badgescard {
    width: 95%;
    height: 72.5%;
    padding-bottom: 0 !important;
    left: 2.5%;
    animation-delay: 1.25s;
    animation: animainfos2 1.5s;
    top: 105px;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 10px;
  }
  @keyframes animainfos2 {
    0% {
      top: -100px;
    }
    100% {
      top: 105px;
    }
  }
  .itemqueue .badgescard::after {
    width: 300px;
    height: 450px;
    background-size: 125%, 1px !important;
  }
  @keyframes rotatemagicBadgescard {
    0% {
      opacity: 0;
      transform: rotate(0deg);
      top: -24px;
      left: -200px;
    }
    100% {
      transform: rotate(-20deg);
      top: -24px;
      left: -100px;
    }
  }
  .itemqueue .content .badgescard .phone {
    align-items: flex-end;
    width: 100%;
    padding-bottom: 0.5rem;
  }
  .itemqueue .content .badgescard .phone .content {
    justify-content: center;
    padding: 0.25rem !important;
    width: 100% !important;
  }
  .itemqueue .content .badgescard .phone p {
    display: flex;
    padding: 0 0.5rem;
  }
  /* .itemqueue .content .badgescard .phone p:first-child {
    margin-right: 1.5rem;
  } */
  .itemqueue .content .badgescard .phone .content button {
    width: max-content;
    padding: 0 0.5rem;
  }
  .itemqueue .content .cardqueue .firstinfo .profileinfo .data.none {
    display: none;
  }
  .itemqueue .content .cardqueue .firstinfo .profileinfo .date p.num {
    display: none;
  }
  .itemqueue .content .cardqueue .firstinfo .profileinfo .data p.dateEnd {
    display: none;
  }
  .itemqueue .content .cardqueue .firstinfo .profileinfo .date p.type {
    display: block;
  }
  .itemqueue .content .cardqueue .firstinfo .profileinfo .data p.orderDetail {
    display: block;
  }
  /* like */
  section.detail.dashboard.interested table tbody tr {
    padding: 1rem 10%;
  }
}

@media screen and (max-width: 650px) {
  section.detail .content .content-right .vehicle .content .item {
    width: 100%;
    justify-content: flex-start;
  }
  section.detail .vehicle.parties .content .item .icon,
  section.detail .vehicle .content .item .icon {
    width: 75px;
    height: 75px;
    margin-right: 1.5rem;
  }
  section.detail .vehicle.parties .content .item .description,
  section.detail .vehicle .content .item .description {
    width: auto;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 0;
    padding-top: 1rem;
  }
  section.detail.dashboard .content .container {
    padding: 0;
  }
  /* dashboard */
  .itemqueue {
    margin-bottom: 6rem;
  }
  .itemqueue .content .cardqueue .firstinfo {
    justify-content: space-between;
    flex-direction: column;
  }
  .itemqueue .content .badgescard {
    height: 90%;
    top: 100px;
  }
  section.detail.dashboard .content .content-left .box .num-point .img img {
    width: 100%;
    height: 100%;
  }
  /* card-menu */
  section.browse-ads .box-ads .box {
    width: 31%;
  }
  /* card-menu */
  section.browse-ads .box-ads .box {
    padding: 0.5rem 1rem;
  }
  /* like */
  section.detail.dashboard.interested table tbody tr {
    padding: 1rem 5%;
  }
  /* modal payment */
  .modal.inven .modal-body {
    padding: 1rem 1.5rem;
  }
  .modal.inven #progressbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .modal.inven #progressbar li {
    width: 14.5%;
  }
  .modal.inven #progressbar li:before {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }
  .modal.inven .form-card .content {
    grid-template-columns: repeat(1, 1fr);
  }
  .modal.inven .modal-dialog {
    max-width: 90%;
    margin: 0 auto;
    margin-left: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
  }
  .modal.inven .form-card .content .field.textarea {
    grid-column: 1;
    grid-row: 5;
  }
  .modal.inven .form-card .content .field.none {
    display: none;
  }
  .modal.inven #progressbar li strong {
    font-size: 12px;
  }
}

@media screen and (max-width: 620px) {
  section.blog.sold .leftcolumn .content-detail {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.saas_two_main_header .brand_logo img {
  max-width: 90px !important;
}

@media screen and (max-width: 600px) {
  section.blog.sold .container .popular-widget.mobile,
  section.blog.sold .container .header-right.mobile {
    display: block;
  }
  section.blog.sold .container .popular-widget.mobile ul {
    padding-top: 1rem;
  }
  section.blog.sold .container .header-right.mobile {
    width: 100%;
  }
  section.blog.sold .container .header-right.mobile .title h3 {
    margin-bottom: 0.5rem;
  }
  section.blog.sold .container .popular-widget,
  section.blog.sold .container .header-right {
    display: none;
  }  
  /* title */
  .saasio-breadcurmb-section {
    display: none;
  }
  .heady-mobile {
    display: flex !important;
    margin-bottom: 1rem;
  }
  .heady-mobile h4 {
    font-weight: 600;
  }
  .news-feed-section .saasio-blog-text h3 {
    font-size: 18px !important;
  }
  .saasio-post-meta a {
    font-size: 10px;
  }
  /* end title */
  .col-md-2 {
    width: 25% !important;
  }
  .col-md-10 {
    max-width: 75% !important;
  }
  .title .wrapper-txt .dynamic-txts li strong,
  .title .wrapper-txt .dynamic-txts li .span-txt {
    font-size: 18px;
  }
  .title .description {
    padding: 0 1rem;
  }
  section.detail .vehicle.parties .content .item .description,
  section.detail .vehicle .content .item .description {
    width: auto;
  }
  section.detail .content .content-right .heady .price {
    display: none;
  }
  section.detail .content .content-right .heady .txt.txt2 {
    width: 100%;
  }
  section.user-profile .box .data-cus,
  section.user-profile .box .data-pri {
    width: 100%;
  }
  section.user-profile .box .data-pri {
    padding: 1rem 0;
  }
  section.user-profile .box .data-pri .title {
    padding-top: 0.5rem;
  }
  /* compare */
  #nav-section.fixed-nav {
    top: 49px;
  }
  .header-compare .item .name,
  .header-compare .item .price {
    text-align: center;
    font-size: 16px;
  }
  /* dashboard */
  section.detail.dashboard {
    padding-bottom: 0 !important;
  }
  .itemqueue .content .cardqueue .firstinfo .profileinfo {
    width: 80%;
  }
  .itemqueue .content .cardqueue .firstinfo .profileinfo .date,
  .itemqueue .content .cardqueue .firstinfo .profileinfo .data {
    flex-direction: column;
  }
  .itemqueue .content .cardqueue .firstinfo .profileinfo .date p,
  .itemqueue .content .cardqueue .firstinfo .profileinfo .data p {
    margin-bottom: 0.5rem;
  }
  section.detail.dashboard .sub-menu .wow .service_content_box {
    padding: 1rem !important;
  }
  section.detail.dashboard .sub-menu .wow .img img {
    width: 70%;
  }
  /* section.detail.dashboard .sub-menu .wow {
    width: 30%;
  } */
  section.detail.dashboard .content .content-left {
    margin-top: 4rem;
  }
  section.detail.dashboard .content .content-left.mobile {
    padding-left: 0;
  }
  section.detail.dashboard .content .content-left.mobile .box,
  section.detail.dashboard .content .content-left.mobile {
    display: flex;
  }
  section.detail.dashboard .content .content-left.mobile .box {
    margin-bottom: 0;
  }
  section.detail.dashboard .content .content-left .box:first-child {
    /* background-color: #fff; */
    background-image: unset !important;
  }
  section.detail.dashboard .content .content-right {
    margin-top: 0;
  }
  section.detail.dashboard .content .content-left.new-detail {
    display: none;
  }
  section.detail.dashboard .content .content-right.new-datail .left-item.none {
    display: none;
  }
  /* Bt-menu */
  .Bt-menu {
    display: flex;
  }
  .saas_two_main_header,
  .saas_2-menu-bg-overlay {
    transition: all 200ms linear 0ms !important;
    background-size: 200%, 1px !important;
    background-image: linear-gradient(
      0deg,
      #31c5ff 0%,
      #0478e9 100%
    ) !important;
  }
  .saas_two_main_header:hover,
  .saas_2-menu-bg-overlay:hover {
    background-position: 110% !important;
  }
  .saas_two_main_header .row .noti {
    color: #fff !important;
  }
  /* history */
  section.detail.dashboard .content .content-right .heady {
    padding: 1rem 0 0;
  }
  section.detail.dashboard.history .searchBox {
    margin-bottom: 1rem;
  }
  section.history .filter {
    margin-bottom: 1rem;
  }
  section.detail.dashboard .conty {
    padding: 0;
  }
  /* nav mobile */
  .saas_two_main_header .row {
    justify-content: space-between;
    padding-right: 1rem;
  }
  .saas_two_main_header {
    padding: 1rem 0;
  }
  .saas_two_main_header.saas_2-menu-bg-overlay {
    padding: 0.75rem 0;
    height: auto;
  }
  .saas_two_main_header.saas_2-menu-bg-overlay .col-md-2 .brand_logo img {
    max-width: 60px !important;
  }
  .saas_two_main_header .col-md-2 .brand_logo img {
    max-width: 70px !important;
  }
  .saas_two_main_header .row .noti {
    font-size: 20px;
    display: flex;
    gap: 1.5rem;
  }
  .s2-mobile_menu_content {
    padding-top: 0;
    right: -100%;
    width: 100%;
    z-index: 999;
  }
  .col-md-10 {
    display: none;
  }
  .s2-mobile_menu_button i:first-child {
    display: none;
  }

  /* card-menu */
  section.browse-ads .box-ads .box {
    height: 100px !important;
    /* padding-left: 3rem !important; */
    margin-bottom: 0.25rem !important;
    margin-top: 0.25rem !important;
    flex-direction: unset;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center !important;
    padding: 1rem;
    display: flex;
  }
  section.browse-ads .box-ads .box p.i {
    /* display: flex !important; */
    /* justify-content: flex-start !important; */
    /* margin-bottom: 0; */
    width: 100%;
  }
  section.browse-ads .box-ads .box p.i img {
    width: 100%;
    max-width: 60px !important;
    max-height: 35px !important;
  }
  section.browse-ads .box-ads .box p.p {
    margin-left: 0;
    width: 100%;
    text-align: center !important;
    font-size: 14px !important;
  }
  /* footer member */
  section.footer-member.detail.dashboard {
    display: block;
  }
  section.footerMember {
    display: none;
  }
  /* dashboard */
  section.detail.dashboard .sub-menu .wow {
    width: 31.9%;
  }
  section.detail .content .content-left.mobile {
    padding: 0.5rem 0 1rem;
    margin-top: 1rem;
  }
  section.detail.dashboard .content .content-right.new-datail {
    margin-top: 0.5rem;
  }
  section.detail.dashboard.my-insure .content .content-right.new-datail {
    margin-top: 5rem;
  }
  section.footer-member.detail.dashboard {
    padding-bottom: 6rem !important;
  }
  /* like */
  section.detail.interested .content .content-right.new-datail table td,
  section.detail.interested
    .content
    .content-right.new-datail
    table
    td::before {
    font-size: 14px;
  }
  section.detail.interested
    .content
    .content-right.new-datail
    table
    td.td-subject {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
  }
  section.detail.interested .content .content-right.new-datail table td p {
    width: 70%;
  }
  section.detail.dashboard.interested table tbody .td-type.td-img .img {
    width: 75px;
    height: 75px;
  }
  /* promotion */
  section.product-ads {
    padding-top: 6rem !important;
    padding-bottom: 0 !important;
  }
  /* compare */
  .header-compare .item .name {
    display: none;
  }
  /* blog */
  .news-feed-section {
    padding-top: 6rem;
  }
  .saas_two_main_header .dropdown .dropdown-menu {
    background: transparent;
  }
  /* modal payment */
  .modal.inven .fs-title,
  .modal.inven .steps {
    font-size: 14px;
  }
  /* stm_theme_demos */
  .stm_theme_demos,
  .stm_theme_demos.expand {
    display: none !important;
  }
  /* inven */
  section.blog.sold .leftcolumn .content-detail .sub-item .txt {
    margin-top: 0 !important;
  }
  section.blog.sold .row.container .leftcolumn .content .item:hover .image img {
    filter: brightness(100%);
  }
  /* cookies */
  .cookies {
    bottom: 5.5rem;
  }
  section.search-section .input-box .item {
    margin-bottom: 0.5rem;
  }
  /* big mobile */
  .it-up-banner-text {
    padding-top: 6rem !important;
  }
  .title p {
    font-size: 18px !important;
    margin-bottom: 0 !important;
  }
  select {
    font-size: 14px !important;
    padding: 0.25rem 0.5rem !important;
  }
  #it-up-banner .it-up-banner-text h1 {
    font-size: 24px;
    padding-bottom: 0 !important;
    line-height: unset !important;
  }
  .it-up-banner-text p {
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 2rem;
  }
  section.search-section .search-form .confirm-box button i,
  section.search-section .search-form .confirm-box button span {
    font-size: 18px !important;
  }
  .it-up-blog-section {
    padding-bottom: 0;
  }
  .it-up-section-title h2,
  .it-up-section-title-2 h2 {
    font-size: 26px;
  }
  .it-up-blog-content {
    padding-top: 1.5rem;
  }
  .it-up-featured-section.it-up-blog-section {
    padding-top: 1rem;
  }
  section.browse-ads {
    padding: 1rem !important;
  }
  .header-txt {
    padding: 1rem 0;
    padding-bottom: 1.5rem;
  }
  .sponsor-caroucel {
    margin-bottom: 0;
  }
  .it-up-testimonial-section {
    padding: 2rem 0;
  }
  .it-up-testimonial-content {
    margin-top: 1rem;
  }
  .it-up-footer-widget .it-up-footer-logo-widget .it-up-footer-logo {
    padding-bottom: 2rem;
  }
  .it-up-footer-widget .it-up-footer-logo-widget .it-up-footer-logo img {
    max-width: 150px;
  }
  .it-up-footer-widget .it-up-footer-logo-widget p span {
    font-size: 18px;
    font-weight: 500;
  }
  .it-up-footer-widget .it-up-footer-logo-widget p {
    padding-bottom: 1.5rem;
    font-size: 14px;
    font-weight: 400;
  }
  .it-up-footer-widget {
    margin-bottom: 1rem;
  }
  .it-up-footer-widget .widget-title {
    font-size: 18px;
  }
  .it-up-footer-widget .it-up-footer-instagram-widget .insta-feed {
    padding-top: 0;
  }
  .it-up-footer-widget .it-up-footer-instagram-widget .insta-feed li {
    width: 50px;
    height: 50px;
  }
  .it-up-footer-widget .it-up-footer-instagram-widget .insta-feed li.payment a {
    height: 50px !important;
  }
  .it-up-footer-widget .it-up-footer-info-widget {
    padding-left: 0;
  }
  .mt-3.modal-title,
  .my-3.modal-title,
  .modal-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 18px;
    font-weight: 500;
  }
  .modal-body label {
    font-size: 13px;
    margin-bottom: 0.125rem;
  }
  .form-control {
    font-size: 14px !important;
    font-weight: 300 !important;
  }
  .modal-body p {
    font-size: 10px !important;
  }
  .modal-body p a {
    text-decoration: underline;
  }
  .modal-body .pb-3,
  .modal-body .py-3 {
    padding-bottom: 0.25rem !important;
  }
  .modal-body .mb-4,
  .modal-body .my-4,
  .modal-body .mb-2,
  .modal-body .my-2 {
    margin-bottom: 0.25rem !important;
  }
  .modal .btn {
    color: #fff;
    transition: all 200ms linear 0ms !important;
  }
  .modal .btn:hover {
    color: #fff !important;
  }
  .modal-body .mb-5,
  .modal-body .my-5 {
    margin-bottom: 1rem !important;
  }
  .modal .col .text-center {
    width: max-content;
  }
  section.blog.sold .row.container .rightcolumn {
    padding: 1rem 0rem 1rem;
  }
  section.blog.sold .row.container .rightcolumn .header-right {
    padding-bottom: 0.75rem;
    margin-top: 1rem !important;
  }
  section.blog.sold .row.container .rightcolumn .item {
    margin-bottom: 0.5rem;
    box-shadow: 0px 2px 10px rgb(0 0 0 / 5%);
  }
  .popular-widget a.sm {
    padding: 5px 10px;
  }
  section.blog.sold .row.container .leftcolumn {
    padding: 1rem 0;
  }
  section.blog.sold .leftcolumn .content-detail .sub-item.btn-more {
    margin-top: 0.75rem !important;
  }
  section.blog.sold .leftcolumn .content-detail .sub-item.btn-more button {
    margin-bottom: 0 !important;
    border-radius: 10px !important;
  }
  section.blog.sold .leftcolumn .content-detail .sub-item.bottom .external {
    margin: 0 !important;
    padding: 3px 10px !important;
    margin-bottom: 3px !important;
    margin-right: 3px !important;
  }
  section.blog.sold .leftcolumn .content-detail .sub-item.bottom {
    gap: 5px !important;
  }
  section.blog.sold .leftcolumn .content-detail .sub-item {
    margin-bottom: 0.5rem;
  }
  section.blog.sold .leftcolumn .content-detail .sub-item .txt p {
    font-size: 16px;
  }
  body section.product-ads .bigCard.oneRow .card-ribbon .img {
    width: 125px !important;
    height: 125px !important;
  }
  body section.product-ads #allAds.all-ads,
  body section.product-ads #randomAds.random-ads,
  body section.product-ads #popAds.popular-ads,
  body section.product-ads #allAds.all-ads.allAds-threeRow,
  body section.product-ads #randomAds.random-ads.randomAds-threeRow,
  body section.product-ads #popAds.popular-ads.popAds-threeRow {
    display: grid !important;
    grid-template-columns: 48% 48% !important;
    grid-gab: 1rem !important;
  }
  section.product-ads .cards .tabs_content {
    display: unset !important;
    grid-template-columns: unset !important;
    grid-gap: unset !important;
    width: 100%;
  }
  body section.product-ads .cards .tabs_content .card-ribbon .img,
  body section.product-ads .bigCard.threeRow .card-ribbon .img {
    width: 100% !important;
    height: 100% !important;
  }
  body section.product-ads .bigCard.oneRow .card-ribbon .img {
    width: 100px !important;
    height: 100px !important;
  }
  .ribbon span {
    font-size: 10px !important;
  }
  .ribbon-top-right::before {
    left: 51px !important;
  }
  .ribbon-top-right::after {
    bottom: 51px !important;
  }
  section.product-ads .bigCard .contentProduct .detail p {
    margin-bottom: 0 !important;
  }
  section.product-ads #allAds.all-ads.allAds-oneRow,
  section.product-ads #allAds.all-ads.randomAds-oneRow,
  section.product-ads #allAds.all-ads.popAds-oneRow {
    grid-gap: 1rem !important;
  }
  .news-feed-section .saasio-blog-text {
    padding: 0.5rem !important;
  }
  .news-feed-section .saasio-blog-text p {
    padding-top: 0.25rem !important;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
  }
  .blog-read-more {
    margin-top: 0.75rem;
  }
  .news-feed-section .blog-feed-post {
    margin-bottom: 1.5rem;
  }
  section.detail .content .content-left .box {
    padding: 1rem 1rem;
    margin-bottom: 1.5rem;
  }
  section.detail .content-left .box .item-detail .name {
    font-size: 15px;
    margin-bottom: 0;
    padding: 0.25rem 1rem;
  }
  section.detail .content-left .box .item-detail .title {
    font-size: 16px;
  }
  section.detail .content-left .box .profile .img {
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgb(0 0 0 / 10%);
  }
  section.detail .content-left .box .item-detail.ins-content .name-user {
    padding-left: 0;
  }
  section.detail .content-left .box .item-detail .price {
    padding: 1rem 0;
  }
  section.detail .content-left .box .item-detail .price strike {
    font-size: 16px;
  }
  section.detail .content-left .box .item-detail .price h3 {
    font-size: 20px;
    font-weight: 700;
  }
  section.detail .content-left .box .item-detail {
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  section.detail .content-left .box .item-detail .checkbox label {
    margin-bottom: 0;
    font-size: 14px;
  }
  section.detail .content-left .box .item-detail.ins-content {
    padding-bottom: 0.5rem;
    font-size: 14px;
    text-align: center;
  }
  section.detail .content-left .box .item-detail .col-md-6 {
    width: 50% !important;
    font-size: 14px;
    text-align: left;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section.detail .content-left .box .item-detail .col-md-4 {
    width: 40% !important;
    font-size: 14px;
    margin-right: 0.25rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section.detail .content-left .box .item-detail .col-md-2 {
    width: 10% !important;
    font-size: 14px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section.detail .content-left .box .item-detail .button button {
    font-size: 16px;
  }
  section.detail .content-left .box .item-detail .mt-3 {
    margin-top: 0.25rem !important;
  }
  section.blog.sold.detail .container {
    padding: 0 !important;
  }
  section.detail .content-left .box .profile .img.user {
    margin-bottom: 0 !important;
  }
  section.detail .content .content-right .heady .txt.txt2 h2 {
    font-size: 20px;
  }
  section.detail .content .content-right .heady .txt.txt2 p {
    margin-bottom: 0.5rem;
    font-size: 14px;
  }
  section.detail .content .content-right .condition {
    padding: 0 1rem;
  }
  section.blog.sold .container .title {
    padding-top: 0;
    padding-bottom: 0;
  }
  section.detail .content .content-right .vehicle .title h4 {
    font-size: 18px;
    margin-bottom: 0;
  }
  section.detail .vehicle .content .item .description p {
    font-size: 14px;
  }
  section.detail .vehicle .content .item .description span {
    font-size: 12px;
  }
  section.detail .vehicle.parties .content .item .description,
  section.detail .vehicle .content .item .description {
    padding-top: 0.25rem;
  }
  section.detail .vehicle.parties .content .item .description p {
    font-size: 16px;
  }
  section.detail.footer-member .content .content-left .box {
    padding: 1rem 1rem 1.5rem !important;
  }
  section.blog.sold.inventory .content {
    margin-bottom: 1.5rem !important;
  }
  .modal.inven .form-card .content {
    margin-top: 0;
    gap: 0.5rem;
  }
  .modal.inven .form-card .content .form-group > span,
  .modal.inven .form-card .content .form-group .form-field {
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 0.25rem 0.5rem !important;
    height: max-content !important;
  }
  .modal.inven #msform input {
    height: max-content;
  }
  .modal.inven #msform textarea {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 29.5px !important;
  }
  .modal.inven .form-card .content .form-group label {
    font-size: 10px;
  }
  .modal.inven .form-card .content.mt-4 {
    margin-top: 0.5rem !important;
  }
  .modal.inven #msform .action-button-previous,
  .modal.inven #msform .action-button {
    font-size: 13px !important;
    font-weight: 400;
  }
  section.blog.sold .leftcolumn .content-detail .sub-item.bottom {
    gap: 3px;
  }
}
section.blog.sold .leftcolumn .content-detail .sub-item.bottom .external {
  margin-bottom: 0.25rem !important;
  margin-right: 0.25rem !important;
}
section.blog.sold .leftcolumn .content-detail .sub-item.bottom .external {
  border-radius: 15px !important;
  padding: 0 10px !important;
}
section.blog.sold .leftcolumn .content-detail .sub-item.bottom .external span {
  font-weight: 400;
}
section.detail .content-left .box .item-detail .row {
  flex-wrap: nowrap;
}
.saas_two_main_header .s2-main-navigation .navbar-nav li.profile {
  margin-left: 1.25rem;
}

.modal-header .close {
  padding: 0.5rem 0.75rem !important;
  background: #ef192d;
  opacity: 1;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  color: #fff !important;
  font-size: 24px;
}

@media screen and (min-width: 576px) {
  .modal.inven .modal-dialog {
    max-width: 750px;
    margin: 1.75rem auto;
  }
}

@media screen and (max-width: 550px) {
  section.detail .vehicle.parties .content .item .description,
  section.detail .vehicle .content .item .description {
    width: 50%;
  }
  /* dashboard */
  .itemqueue .content .badgescard .phone .content {
    justify-content: space-evenly;
    flex-direction: column;
  }
  .itemqueue .content .badgescard .phone p:first-child {
    margin-right: 0;
  }
  section.detail.dashboard .sub-menu {
    row-gap: 1rem !important;
    gap: 4.1%;
  }
  section.detail .content-left .box .profile .img {
    margin-right: 0 !important;
    width: 75px;
    height: 75px;
  }
  section.detail .content-left .box .profile .name-user {
    width: 60%;
    padding-left: 1rem;
  }
  section.detail .content-left .box .profile .name-user .username {
    font-size: 14px;
  }
  section.detail.dashboard .sub-menu .wow {
    width: 30%;
  }
  section.detail.dashboard .sub-menu .wow .service_content_box {
    border-radius: 1rem !important;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
      rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  }
  /* history */
  section.detail.dashboard table tbody tr {
    grid-template-columns: repeat(2, 1fr);
  }
  section.detail .content .content-right.new-datail table td.td-subject {
    grid-column: 1 / 3;
    grid-row: 4;
  }
  section.detail.dashboard table tbody .td-status.status-1 {
    grid-column: 2;
    grid-row: 1;
  }
  /* inven */
  section.blog.sold.inventory .row.container .leftcolumn .content .image img {
    width: 40%;
  }
  /* theme */
  .itemqueue {
    margin-bottom: 9rem;
  }
  .itemqueue .content .badgescard {
    top: 155px;
  }
  section.detail.dashboard .sub-menu .wow .txt {
    font-size: 12px;
  }

  section.blog.sold .leftcolumn .content-detail .sub-item .cal-install .form-group{
    margin-bottom: 0;
  }

  section.blog.sold .leftcolumn .content-detail .sub-item .cal-install{
    flex-wrap: wrap;
    gap: .5rem;
    margin-right: 0;
  }
  
  section.blog.sold .leftcolumn .content-detail .sub-item .cal-install-item{
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .title .wrapper-txt .dynamic-txts {
    height: 60px;
    margin: 2rem 0 0.5rem 0;
  }
  .title .wrapper-txt .dynamic-txts li {
    font-size: 24px;
  }
  .title .wrapper-txt .dynamic-txts li .span-txt::after {
    height: 30px;
  }
  /* nav mobile */
  .s2-mobile_menu_content .s2-mobile-main-navigation .navbar-nav li.regis {
    padding: 1rem 2rem;
  }

  .s2-mobile_menu_content
    .s2-mobile-main-navigation
    .navbar-nav
    li.regis
    .icon:hover
    a {
    color: #fff !important;
  }
  .s2-mobile_menu_content
    .s2-mobile-main-navigation
    .navbar-nav
    li.regis
    .icon
    a {
    height: 40px;
    padding: 0;
    display: flex;
  }
  .saas_two_main_header .saas_sign_up_btn.mobile {
    display: block;
    position: unset;
    width: 100%;
  }
  .saas_two_main_header .saas_sign_up_btn.mobile a {
    padding: 0 !important;
  }
  /* history */
  section.blog.sold.inventory.dashboard .content table tbody tr {
    display: flex !important;
    padding: 0.5rem 1rem;
  }
  section.detail .content .content-right.new-datail table td.td-subject {
    grid-column: 1 / 3;
    grid-row: 4;
  }
  section.blog.sold.inventory.dashboard
    .content
    .left-item
    table
    tbody
    tr.thead {
    display: none !important;
  }
  section.blog.sold.inventory.dashboard .content .left-item table tbody tr {
    grid-template-columns: repeat(1, 1fr);
    display: grid !important;
  }
  section.detail.dashboard .left-item table tbody .td-status.status-1 {
    grid-column: unset !important;
    grid-row: unset !important;
  }
  section.detail
    .content
    .content-right.new-datail
    .left-item
    table
    td.td-subject {
    grid-column: unset !important;
    grid-row: unset !important;
  }
  /* card-menu */
  section.browse-ads .box-ads .container a {
    width: 31% !important;
  }
  section.browse-ads .box-ads .box {
    justify-content: space-between !important;
    /* padding-right: 3rem !important; */
  }
  section.browse-ads .box-ads .box p.p {
    margin-left: 0;
  }
  .it-up-banner-section .container {
    padding-left: 0;
    padding-right: 0;
  }
  .it-up-banner-text {
    display: none;
  }
  .it-up-banner-img {
    padding-top: 5rem;
  }
  /* banner */
  section.it-up-search-section {
    margin-top: -7rem;
    padding-top: 0;
    z-index: 2;
  }
  /* like */
  section.detail.dashboard.interested table tbody tr {
    padding: 1rem 0;
  }
  /* modal payment */
  .modal-open .modal {
    padding-right: 0 !important;
  }
  .modal.inven .form-card {
    max-height: 350px;
    overflow-y: scroll;
  }
  .modal.inven .fs-title,
  .modal.inven .steps {
    font-size: 12px;
  }
  .modal.inven .form-card .content .field.choice {
    padding: 0.5rem 0;
  }
  .modal.inven .form-card .content .field.choice .img {
    width: 25%;
    height: auto;
    font-size: 20px;
  }
  .modal.inven .form-card .content .field.choice .txt {
    width: 85%;
    font-size: 14px;
  }
  /* cookies */
  .cookies {
    bottom: 70px;
    max-width: unset;
    width: 100%;
    display: flex;
    left: 0;
    flex-direction: row;
    padding: 0.5rem 0.75rem;
    border-radius: 10px !important;
    border-color: transparent;
  }
  .cookies .head {
    width: 45%;
    text-align: left;
    margin-bottom: 0;
  }
  .cookies .img {
    width: 15%;
    margin-bottom: 0.5rem;
  }
  .cookies .img img {
    min-width: 35px;
    min-height: 35px;
  }
  .cookies .description {
    width: 73%;
    text-align: center;
    font-size: 12px;
    margin-bottom: 0;
  }
  .cookies button.submit {
    padding: 0.125rem;
    border-radius: 34px;
    color: #fff;
    width: 25%;
    font-size: 14px;
  }
  /* selected */
  .selected.menu {
    bottom: 80%;
  }
  .selected.menu .detail {
    left: -1.5rem;
    top: 3.25rem;
  }
  .selected.menu .detail:hover::after {
    border-color: transparent transparent #0478e9 transparent;
  }
  .selected.menu .detail::after {
    top: -0.6rem;
    right: 0.75rem;
    border-width: 0 7.5px 10px 7.5px;
    border-color: transparent transparent #20fdee transparent;
  }
  .selected.menu .detail .item {
    width: 100%;
  }
  .selected.menu .detail .item .txt {
    display: none;
  }
  .selected.menu .detail .item button i {
    background: #fff !important;
    color: red;
    -webkit-text-fill-color: red;
    border-radius: 50%;
    overflow: hidden;
  }
  section.blog.sold .leftcolumn .content-detail .sub-item .detail-product p {
    font-size: 12px;
  }
  section.blog.sold .leftcolumn .content-detail .sub-item .detail-product span {
    font-size: 10px;
    font-weight: 300;
  }
  .modify .form-group {
    margin-bottom: 0;
  }
  section.blog.sold .row.container .leftcolumn .content .item {
    margin-bottom: 1rem;
  }
  .modify .pagination {
    margin-bottom: 0;
  }
  .modify .pagination-container {
    height: max-content;
  }
  .modify .pagination li {
    width: 30px;
    height: 30px;
  }
  .modify .pagination li span {
    font-size: 12px;
  }
  .modify .form-control {
    height: max-content !important;
  }
  section.blog.sold .row.container .leftcolumn .head {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }
  section.blog.sold .row.container .leftcolumn .head .left h2 {
    font-size: 22px;
    margin-bottom: 0;
  }
  section.blog.sold .row.container .leftcolumn .head .right .sort .icon {
    width: 30px;
    height: 30px;
  }
  section.blog.sold .row.container .leftcolumn .head .right .sort .icon i {
    font-size: 14px;
  }
  section.blog.sold .leftcolumn .type-ins > div .item span {
    font-size: 14px;
  }
  section.blog.sold .leftcolumn .type-ins > div .item span.icon {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 10px;
  }
  section.blog.sold .leftcolumn .type-ins > div {
    gap: 0.25rem;
  }
  section.blog.sold .container {
    padding: 0 1rem;
  }
  section.blog.sold .leftcolumn .content-detail .sub-item .h5 {
    font-size: 18px !important;
  }
  section.blog.sold .leftcolumn .content-detail .sub-item strike {
    font-size: 12px !important;
  }
  section.blog.sold.inventory
    .leftcolumn
    .content-detail
    .sub-item
    .price.solo {
    width: max-content !important;
  }
}

@media screen and (max-width: 450px) {
  .col-md-2 {
    width: 40% !important;
  }
  .col-md-10 {
    max-width: 60% !important;
  }
  section.detail.dashboard .sub-menu .wow .txt {
    font-size: 12px;
  }
}

@media screen and (max-width: 410px) {
  .itemqueue .content .badgescard {
    top: 155px;
  }
  @keyframes animainfos2 {
    0% {
      top: -100px;
    }
    100% {
      top: 155px;
    }
  }
  @keyframes rotatemagicBadgescard {
    0% {
      opacity: 0;
      transform: rotate(0deg);
      top: -24px;
      left: -200px;
    }
    100% {
      transform: rotate(-20deg);
      top: -24px;
      left: -87px;
    }
  }
  /* inven */
  section.blog.sold.inventory .row.container .leftcolumn .content .image img {
    width: 50%;
  }
  /* dashboard */
  section.detail .content .content-left .box.user {
    padding: 1rem;
  }
  section.detail .content-left .box .profile .img {
    width: 75px;
    height: 75px;
    margin-right: 1rem !important;
  }
  section.detail .content-left .box .profile .name-user .username {
    font-size: 12px;
  }
}

@media screen and (max-width: 400px) {
  section.browse-ads .box-ads .box {
    width: 100% !important;
    padding: 1rem !important;
    height: max-content !important;
  }
  section.browse-ads .box-ads .box p.i img {
    width: 100%;
    max-width: 50px !important;
    max-height: 30px !important;
  }
  section.browse-ads .box-ads .box p.p {
    font-size: 10px !important;
    font-weight: 400;
  }
  .modal.inven #progressbar li {
    width: 14.5%;
  }
  .modal.inven #progressbar li:before {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  .modal.inven #progressbar li strong {
    font-size: 10px;
  }
  .modal.inven #progressbar li:before {
    margin-bottom: 5px;
  }
  body section.product-ads #allAds.all-ads.allAds-oneRow,
  body section.product-ads #randomAds.random-ads.randomAds-oneRow,
  body section.product-ads #popAds.popular-ads.popAds-oneRow {
    display: grid !important;
    grid-template-columns: 100% !important;
    margin-right: unset !important;
  }
}
@media screen and (max-width: 390px) {
  /* section.detail .content .content-right .vehicle .content .item {
    justify-content: center;
  } */
  section.detail .vehicle.parties .content .item .icon,
  section.detail .vehicle .content .item .icon {
    width: 75px;
    height: 75px;
    margin-right: 1rem;
  }
  /* section.detail .vehicle.parties .content .item .description,
  section.detail .vehicle .content .item .description {
    width: 100%;
    text-align: center;
  }
  section.detail .vehicle.parties .content .item .description span,
  section.detail .vehicle .content .item .description span {
    width: 100%;
    text-align: center;
  } */
  /* dashboard */
  section.detail.dashboard .sub-menu .wow .service_content_box {
    padding: 1rem !important;
  }
  /* section.detail.dashboard .sub-menu .wow {
    width: 47%;
  } */
  section.detail.dashboard .sub-menu .wow .txt {
    font-size: 12px;
    overflow: unset;
  }
  section.detail.dashboard .sub-menu .wow .img img {
    width: 80%;
  }
  /* history */
  section.detail.dashboard table tbody {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  section.detail.dashboard table tbody tr {
    width: 97.5%;
    grid-template-columns: auto;
    grid-gap: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: none !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 0.5rem;
  }
  section.detail .content .content-right.new-datail table td.td-subject {
    grid-column: 1;
    grid-row: 7;
    -webkit-box-shadow: inset -3px -2px 5px 0px rgb(255 255 255 / 66%),
      inset -1px -1px 0px 0px rgb(255 255 255 / 18%),
      inset 2px 2px 7px 0px rgb(49 69 106 / 18%);
    box-shadow: inset -3px -2px 5px 0px rgb(255 255 255 / 66%),
      inset -1px -1px 0px 0px rgb(255 255 255 / 18%),
      inset 2px 2px 7px 0px rgb(49 69 106 / 18%);
    min-width: unset;
  }
  section.detail .content .content-right.new-datail table td.td-subject p {
    padding: 0.25rem 0;
  }
  section.detail.dashboard table tbody .td-status.status-1 {
    grid-column: 1;
    grid-row: 2;
  }
  section.detail .content .content-right.new-datail table td {
    padding-bottom: 0 !important;
    height: fit-content !important;
    /* box-shadow: none !important; */
  }
  /* like */
  section.detail.interested
    .content
    .content-right.new-datail
    table
    td.td-subject {
    box-shadow: none;
  }
  .Bt-menu .item .icon {
    font-size: 18px;
  }
  .Bt-menu .item .txt {
    font-size: 12px;
    font-weight: 300;
  }
}

@media screen and (max-width: 350px) {
  section.detail.dashboard .sub-menu .wow .img {
    margin-bottom: 0.25rem;
  }
  section.detail.dashboard .sub-menu .wow .txt {
    font-size: 10px;
    text-align: center;
    overflow: unset;
    word-wrap: break-word;
    display: block;
  }
  .Bt-menu .item .icon {
    font-size: 16px;
  }
  .Bt-menu .item .txt {
    font-size: 10px;
    font-weight: 300;
  }
}

@media screen and (max-width: 320px) {
  .itemqueue .cardqueue:after {
    height: 500px;
  }
  section.blog.sold.inventory .row.container .leftcolumn .content .image img {
    width: 80%;
  }
  .Bt-menu .item .icon {
    font-size: 14px;
  }
  .Bt-menu .item .txt {
    font-size: 8px;
    font-weight: 300;
  }
  section.browse-ads .box-ads .box p.i img {
    max-width: 40px !important;
    max-height: 22px !important;
  }
}

.ribbon-top-right{
  z-index: 1 !important; 
}

section.blog.sold .leftcolumn .type-ins > div .box-item {
  position: relative;
}

section.blog.sold .leftcolumn .type-ins > div .box-item .tooltip-item {
  position: absolute;
  height: 2rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 200px;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-in-out;
  transition-delay: .1s;
  left: 0;
  top: 0;
  z-index: 2;
  transform: translate(-25%, -135%);
}

section.blog.sold .leftcolumn .type-ins > div .box-item.act .tooltip-item {
  transform: translate(-15%, -135%);
}

section.blog.sold .leftcolumn .type-ins .box-item:hover .tooltip-item {
  display: flex;
  opacity: 1;
  visibility: visible;
}

section.blog.sold .leftcolumn .type-ins .box-item .tooltip-item .txt {
  background: #0478e9;
  font-size: 14px;
  color: #fff;
  border-radius: 15px;
  width: max-content;
  text-align: center;
  padding: .25rem 1.25rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

section.blog.sold .leftcolumn .type-ins > div .box-item .tooltip-item .txt::after {
  --height: 5px;
  content: '';
  position: absolute;
  display: block;
  bottom: -7px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7.5px var(--height) 0 var(--height);
  border-color: #0478e9 transparent transparent transparent;
}