/***==============================

Theme Name: Prime Bazar
Description: Super Market, eCommerce HTML Template
Version: 1.0
Author: QTEC SOLUTION LIMITED
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

==============================**/
/**
TABLE OF CONTENT
 Import Google Fonts
 Include Third Party CSS Library
 GENERAL
 HEADER
 Offcanvas Sidebar
 Search form
 Main header
 Mega menu
 Header layouts
 Page layouts
 Pagination
 Breadcrumb
 CATEGORY PAGES
 SINGLE POST
 Author box
 comment
 Post share social
 WP STYPE
 Custom amine
***/
/**=====================================================**
                    THEME-COLORS
=======================================================**/
/**=====================================================**
                    TEXT-COLORS
=======================================================**/
/**=====================================================**
                    BACKGROUND-COLORS
=======================================================**/
/**=====================================================**
                    BORDER-COLORS
=======================================================**/
/**=====================================================**
                    NORMAL-COLORS
=======================================================**/
/**=====================================================**
                        SHADOWS
=======================================================**/
/**=====================================================**
                        BOX-SHADOWS
=======================================================**/
/**=====================================================**
                        STATUS
=======================================================**/
/**=====================================================**
                    TIMING-VARIABLES
=======================================================**/
/**=====================================================**
                    GLOBAL-MIXINS
=======================================================**/
/**=====================================================**
                ANIMATION-STYLES
=======================================================**/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

.header-nav .headerlist .userdropdown,
.header-nav .headerlist .notificationdropdown {
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideDownIn {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }

  0% {
    transform: translateY(-100%);
  }
}

@keyframes slideDownIn {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }

  0% {
    transform: translateY(-100%);
  }
}

@-webkit-keyframes slideDownInMobile {
  0% {
    transform: translateY(-1.25rem);
  }

  100% {
    transform: translateY(0.625rem);
  }

  0% {
    transform: translateY(-1.25rem);
  }
}

@keyframes slideDownInMobile {
  0% {
    transform: translateY(-1.25rem);
  }

  100% {
    transform: translateY(0.625rem);
  }

  0% {
    transform: translateY(-1.25rem);
  }
}

@-webkit-keyframes slideUpIn {
  0% {
    transform: translateY(-1.25rem);
  }

  100% {
    transform: translateY(0);
  }

  0% {
    transform: translateY(1.25rem);
  }
}

@keyframes slideUpIn {
  0% {
    transform: translateY(-1.25rem);
  }

  100% {
    transform: translateY(0);
  }

  0% {
    transform: translateY(1.25rem);
  }
}

.header-nav .headerlist .userdropdown,
.header-nav .headerlist .notificationdropdown {
  -webkit-animation-name: slideUpIn;
  animation-name: slideUpIn;
}

@-webkit-keyframes slideUpInMobile {
  0% {
    transform: translateY(2.5rem);
  }

  100% {
    transform: translateY(1.5625rem);
  }

  0% {
    transform: translateY(2.5rem);
  }
}

@keyframes slideUpInMobile {
  0% {
    transform: translateY(2.5rem);
  }

  100% {
    transform: translateY(1.5625rem);
  }

  0% {
    transform: translateY(2.5rem);
  }
}

@-webkit-keyframes slideLeftIn {
  0% {
    transform: translateX(6.25rem);
  }

  100% {
    transform: translateX(0);
  }

  0% {
    transform: translateX(-6.25rem);
  }
}

@keyframes slideLeftIn {
  0% {
    transform: translateX(6.25rem);
  }

  100% {
    transform: translateX(0);
  }

  0% {
    transform: translateX(-6.25rem);
  }
}

@-webkit-keyframes slideRightIn {
  0% {
    transform: translateX(6.25rem);
  }

  100% {
    transform: translateX(0);
  }

  0% {
    transform: translateX(6.25rem);
  }
}

@keyframes slideRightIn {
  0% {
    transform: translateX(6.25rem);
  }

  100% {
    transform: translateX(0);
  }

  0% {
    transform: translateX(6.25rem);
  }
}

@-webkit-keyframes floating {
  0% {
    transform: translateY(0%);
  }

  50% {
    transform: translateY(1%);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes floating {
  0% {
    transform: translateY(0%);
  }

  50% {
    transform: translateY(1%);
  }

  100% {
    transform: translateY(0%);
  }
}

/**==================================================
                GOOGLE FONT CDN (INTER)
==================================================**/
/**==================================================
                FONTS INFO START
==================================================**/
/**===============================================
                FONT STYLE MIXINS
===============================================**/
/**=====================================================**
                BREAKPOINT-VARIABLES
=======================================================**/
/**=====================================================**
                BREAKPOINT-FUNCTIONS
=======================================================**/
/**=====================================================**
                    BREAKPOINT-MIXIN
=======================================================**/
/**=====================================================**
                    BREAKPOINT-USAGE
=======================================================**/
/**=====================================================**
                    GLOBAL-RESETTINGS
=======================================================**/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
button,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
input,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
main,
nav,
object,
ol,
output,
option,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
select,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

a::-moz-selection,
abbr::-moz-selection,
acronym::-moz-selection,
address::-moz-selection,
applet::-moz-selection,
article::-moz-selection,
aside::-moz-selection,
audio::-moz-selection,
b::-moz-selection,
big::-moz-selection,
blockquote::-moz-selection,
button::-moz-selection,
body::-moz-selection,
canvas::-moz-selection,
caption::-moz-selection,
center::-moz-selection,
cite::-moz-selection,
code::-moz-selection,
dd::-moz-selection,
del::-moz-selection,
details::-moz-selection,
dfn::-moz-selection,
div::-moz-selection,
dl::-moz-selection,
dt::-moz-selection,
em::-moz-selection,
embed::-moz-selection,
fieldset::-moz-selection,
figcaption::-moz-selection,
figure::-moz-selection,
footer::-moz-selection,
form::-moz-selection,
h1::-moz-selection,
h2::-moz-selection,
h3::-moz-selection,
h4::-moz-selection,
h5::-moz-selection,
h6::-moz-selection,
header::-moz-selection,
hgroup::-moz-selection,
html::-moz-selection,
i::-moz-selection,
input::-moz-selection,
iframe::-moz-selection,
img::-moz-selection,
ins::-moz-selection,
kbd::-moz-selection,
label::-moz-selection,
legend::-moz-selection,
li::-moz-selection,
mark::-moz-selection,
menu::-moz-selection,
main::-moz-selection,
nav::-moz-selection,
object::-moz-selection,
ol::-moz-selection,
output::-moz-selection,
option::-moz-selection,
p::-moz-selection,
pre::-moz-selection,
q::-moz-selection,
ruby::-moz-selection,
s::-moz-selection,
samp::-moz-selection,
section::-moz-selection,
small::-moz-selection,
span::-moz-selection,
strike::-moz-selection,
strong::-moz-selection,
sub::-moz-selection,
summary::-moz-selection,
select::-moz-selection,
sup::-moz-selection,
table::-moz-selection,
tbody::-moz-selection,
td::-moz-selection,
tfoot::-moz-selection,
th::-moz-selection,
thead::-moz-selection,
time::-moz-selection,
tr::-moz-selection,
tt::-moz-selection,
u::-moz-selection,
ul::-moz-selection,
var::-moz-selection,
video::-moz-selection {
  background: hsl(230deg, 82%, 61%);
  color: hsl(0deg, 0%, 100%);
}

a::selection,
abbr::selection,
acronym::selection,
address::selection,
applet::selection,
article::selection,
aside::selection,
audio::selection,
b::selection,
big::selection,
blockquote::selection,
button::selection,
body::selection,
canvas::selection,
caption::selection,
center::selection,
cite::selection,
code::selection,
dd::selection,
del::selection,
details::selection,
dfn::selection,
div::selection,
dl::selection,
dt::selection,
em::selection,
embed::selection,
fieldset::selection,
figcaption::selection,
figure::selection,
footer::selection,
form::selection,
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection,
header::selection,
hgroup::selection,
html::selection,
i::selection,
input::selection,
iframe::selection,
img::selection,
ins::selection,
kbd::selection,
label::selection,
legend::selection,
li::selection,
mark::selection,
menu::selection,
main::selection,
nav::selection,
object::selection,
ol::selection,
output::selection,
option::selection,
p::selection,
pre::selection,
q::selection,
ruby::selection,
s::selection,
samp::selection,
section::selection,
small::selection,
span::selection,
strike::selection,
strong::selection,
sub::selection,
summary::selection,
select::selection,
sup::selection,
table::selection,
tbody::selection,
td::selection,
tfoot::selection,
th::selection,
thead::selection,
time::selection,
tr::selection,
tt::selection,
u::selection,
ul::selection,
var::selection,
video::selection {
  background: hsl(230deg, 82%, 61%);
  color: hsl(0deg, 0%, 100%);
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
main,
nav,
section {
  display: block;
  margin: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

/**=====================================================**
                    DEFAULT-SETTINGS
=======================================================**/
body {
  background: hsl(210deg, 16%, 93%);
  margin: 0;
  padding: 0;
  position: relative;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  display: inline-block;
}

span {
  display: inline-block;
}

figure {
  margin-bottom: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -moz-appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

input[type=search]::-webkit-search-decoration:focus,
input[type=search]::-webkit-search-cancel-button:focus,
input[type=search]::-webkit-search-results-button:focus,
input[type=search]::-webkit-search-results-decoration:focus {
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
}

select {
  cursor: pointer;
}

textarea {
  resize: none;
}

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
  color: transparent;
}

input[type=date] {
  position: relative;
}

input[type=date]::before {
  content: attr(data-placeholder);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

input[type=date]:focus::before,
input[type=date]:valid::before {
  display: none;
}

input:-internal-autofill-selected {
  background: hsl(0deg, 0%, 100%) !important;
}

button {
  background: transparent;
  border: none;
}

/**=======================================================**
                        ACCORDION START
**=======================================================**/
.accordion {
  display: flex;
  flex-direction: column;
}

.accordion-item {
  border: none;
}

.accordion-item:last-of-type .accordion-button.collapsed {
  border-radius: 0;
}

.accordion-item:first-of-type .accordion-button {
  border-radius: 0;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  background: hsl(0deg, 0%, 100%);
}

.accordion-header .accordion-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

.accordion-header .accordion-button:not(.collapsed) {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.accordion-header .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234A66ED'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-header .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238A92A6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-header .accordion-button:focus {
  box-shadow: none;
  outline: none;
}

.accordion-body {
  background: hsl(0deg, 0%, 100%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.accordion-body .category {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
}

.accordion-body .category-header .category-title {
  font-family: "Inter";
  font-style: normal;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.accordion-body .category-body .categorylist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.accordion-body .category-body .categorylist-link {
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4;
  transition: color 250ms ease-in-out;
}

.accordion-body .category-body .categorylist-link:not([disabled]):hover {
  color: hsl(230deg, 82%, 61%);
}

/**=======================================================**
                        ACCORDION END
**=======================================================**/
/**=======================================================**
                        BREADCRUMB START
**=======================================================**/
/**=======================================================**
                        BREADCRUMB START
**=======================================================**/
/**=======================================================**
                        BUTTONS START
**=======================================================**/
.up-btn {
  margin-left: auto;
  left: 100%;
  border-radius: 100%;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-submit {
  background: hsl(230deg, 82%, 61%);
  color: hsl(0deg, 0%, 100%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.7142857143;
  padding: 0.3125rem 1.25rem;
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  transition: background 250ms ease-in-out;
}

.btn-submit:not([disabled]):hover {
  background: #1535d5;
  color: hsl(0deg, 0%, 100%);
}

.btn-reset {
  background: hsl(0deg, 0%, 100%);
  color: hsl(223deg, 14%, 60%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.7142857143;
  padding: 0.3125rem 1.25rem;
  border: solid 0.0625rem hsl(223deg, 14%, 60%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  transition: background 250ms ease-in-out;
}

.btn-reset:not([disabled]):hover {
  background: hsl(223deg, 14%, 60%);
  color: hsl(0deg, 0%, 100%);
}

.btn-back {
  border: solid 0.0625rem hsl(230deg, 82%, 61%);
  padding: 0.3125rem 1rem;
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  display: inline-block;
  text-align: center;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 2;
  transition: all 250ms ease-in-out;
}

.btn-back:not([disabled]):hover {
  background: hsl(230deg, 82%, 61%);
  color: hsl(0deg, 0%, 100%);
}

.btn-add {
  background: hsl(230deg, 82%, 61%);
  color: hsl(0deg, 0%, 100%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.7142857143;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  transition: background 250ms ease-in-out;
}

@media screen and (min-width: 36rem) {
  .btn-add {
    padding: 0.625rem 2rem;
  }
}

.btn-add:not([disabled]):hover {
  background: #1535d5;
  color: hsl(0deg, 0%, 100%);
}

.btn-filter {
  width: 100%;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3333333333;
  padding: 0.5625rem 2rem;
  background: hsl(230deg, 82%, 61%);
  color: hsl(0deg, 0%, 100%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  text-align: center;
  transition: background 250ms ease-in-out;
}

.btn-filter:not([disabled]):hover {
  background: #1535d5;
}

.status {
  padding: 0.3125rem 0.875rem;
  text-align: center;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3333333333;
  border-radius: 2rem;
  border-radius: 2rem;
}

.status.activestatus {
  background: hsl(124deg, 100%, 90%);
  color: hsl(146deg, 64%, 36%);
}

.status.inactivestatus {
  background: hsl(0deg, 100%, 90%);
  color: hsl(0deg, 66%, 47%);
}

.btn-modal {
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3333333333;
  padding: 0.5rem 1rem;
  text-align: center;
  transition: all 250ms ease-in-out;
}

.btn-cancel {
  background: transparent;
  color: hsl(223deg, 14%, 60%);
}

.btn-cancel:not([disabled]):hover {
  color: hsl(221deg, 31%, 20%);
}

.btn-delete {
  background: hsl(0deg, 96%, 67%);
  color: hsl(0deg, 0%, 100%);
}

.btn-delete:not([disabled]):hover {
  background: hsl(0deg, 66%, 47%);
  color: hsl(0deg, 0%, 100%);
}

.btn-del {
  height: 1.5rem;
  width: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media screen and (min-width: 62rem) {
  .btn-del {
    margin: auto;
  }
}

.btn-del svg {
  width: 100%;
  height: 100%;
}

.btn-del svg path {
  transition: all 250ms ease-in-out;
}

.btn-del:not([disabled]):hover svg path {
  fill: hsl(0deg, 96%, 67%);
}

/**=======================================================**
                        BUTTONS END
**=======================================================**/
/**=======================================================**
                        CARDS START
**=======================================================**/
/**=======================================================**
                        CARDS END
**=======================================================**/
/**=====================================================
                FOOTER SECTION START
=====================================================**/
.footer {
  background: hsl(0deg, 0%, 100%);
  margin-left: 0rem;
  padding: 1rem;
  overflow: hidden;
  display: flex;
  align-items: center;
}

@media screen and (min-width: 62rem) {
  .footer {
    margin-left: 13.875rem;
  }
}

.footer.footercollapsed {
  transition: 0.2s ease-in-out;
}

@media screen and (min-width: 62rem) {
  .footer.footercollapsed {
    margin-left: 4.125rem;
  }
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
}

@media screen and (min-width: 62rem) {
  .footer-content {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer .footerlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.footer .footerlist-link {
  color: hsl(221deg, 31%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.4;
  position: relative;
}

.footer .footerlist-link::before {
  content: "";
  position: absolute;
  bottom: 0.0625rem;
  left: 0;
  height: 0.0625rem;
  width: 0;
  background: hsl(230deg, 82%, 61%);
  transition: 250ms;
}

@media screen and (min-width: 62rem) {
  .footer .footerlist-link {
    font-family: "Inter";
    font-style: normal;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.4;
  }
}

.footer .footerlist-link:not([disabled]):hover {
  color: hsl(230deg, 82%, 61%);
}

.footer .footerlist-link:not([disabled]):hover::before {
  width: 100%;
}

.footer .text-copyright {
  color: hsl(221deg, 31%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.4;
  text-align: center;
}

@media screen and (min-width: 62rem) {
  .footer .text-copyright {
    font-family: "Inter";
    font-style: normal;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.4;
    text-align: right;
  }
}

/**=====================================================
                FOOTER SECTION END
=====================================================**/
/**=======================================================**
                        HEADER SECTION START
**=======================================================**/
.header {
  background: hsl(0deg, 0%, 100%);
  width: 100%;
  display: flex;
  align-items: center;
  transition: top 250ms;
}

.header.sticky-top {
  z-index: 500;
}

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

@media screen and (min-width: 62rem) {
  .header-nav {
    justify-content: flex-end;
  }
}

.header-nav .hamburger-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media screen and (min-width: 62rem) {
  .header-nav .hamburger-logo {
    display: none;
  }
}

.header-nav .hamburger-logo .hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.header-nav .hamburger-logo .hamburger .btn-hamburger {
  background: transparent;
  border: none;
  height: 1.5rem;
  width: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.header-nav .hamburger-logo .hamburger .btn-hamburger svg {
  width: 100%;
  height: 100%;
}

.header-nav .hamburger-logo .hamburger .btn-hamburger svg path {
  fill: hsl(230deg, 82%, 61%);
}

.header-nav .headerlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  padding: 1rem;
}

.header-nav .headerlist-item {
  position: relative;
}

.header-nav .headerlist-item:not([disabled]):hover .notificationdropdown {
  display: block;
}

.header-nav .headerlist-item:not([disabled]):hover .userdropdown {
  display: block;
}

.header-nav .headerlist .notify-link {
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.header-nav .headerlist .notify-link .icon {
  height: 1.5rem;
  width: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.header-nav .headerlist .notify-link .icon svg {
  width: 100%;
  height: 100%;
}

.header-nav .headerlist .notificationdropdown {
  position: absolute;
  top: 100%;
  right: -4rem;
  width: 18.75rem;
  display: none;
  padding-top: 0.96875rem;
  z-index: 100;
}

@media screen and (min-width: 30rem) {
  .header-nav .headerlist .notificationdropdown {
    right: 0;
  }
}

.header-nav .headerlist .notificationdropdown .notification {
  background: hsl(0deg, 0%, 100%);
  filter: drop-shadow(-0.25rem 0.25rem 0.25rem rgba(138, 146, 166, 0.15));
  width: 100%;
}

.header-nav .headerlist .notificationdropdown .notification .notificationlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  max-height: 20.3125rem;
  overflow-x: hidden;
  overflow-y: scroll;
}

.header-nav .headerlist .notificationdropdown .notification .notificationlist::-webkit-scrollbar {
  width: 0.375rem;
}

.header-nav .headerlist .notificationdropdown .notification .notificationlist::-webkit-scrollbar-thumb {
  border-radius: 1.25rem;
  border-radius: 1.25rem;
  background: hsl(224deg, 13%, 84%);
}

.header-nav .headerlist .notificationdropdown .notification .notificationlist-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: solid 0.0625rem hsl(0deg, 0%, 93%);
  background: hsl(0deg, 0%, 100%);
}

.header-nav .headerlist .notificationdropdown .notification .notificationlist-link .notification-thumbnail {
  background: hsl(228deg, 33%, 97%);
  height: 2rem;
  width: 2rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.header-nav .headerlist .notificationdropdown .notification .notificationlist-link .notification-thumbnail svg,
.header-nav .headerlist .notificationdropdown .notification .notificationlist-link .notification-thumbnail img {
  width: 100%;
  height: 100%;
}

.header-nav .headerlist .notificationdropdown .notification .notificationlist-link .details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: calc(100% - 2rem);
}

.header-nav .headerlist .notificationdropdown .notification .notificationlist-link .details .title {
  color: hsl(223deg, 14%, 60%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.21;
  max-width: 99%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-nav .headerlist .notificationdropdown .notification .notificationlist-link .details .date {
  color: hsl(224deg, 13%, 84%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.25;
}

.header-nav .headerlist .notificationdropdown .notification .notificationlist-link:not([disabled]):hover {
  background: #fafafa;
}

.header-nav .headerlist .notificationdropdown .notification .notificationlist-link:not([disabled]):hover .details .title {
  color: hsl(221deg, 31%, 20%);
}

.header-nav .headerlist .notificationdropdown .notification-all {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.header-nav .headerlist .notificationdropdown .notification-all .link {
  width: 100%;
  padding: 1.25rem;
  color: #788df2;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.21;
  transition: color 250ms ease-in-out;
}

.header-nav .headerlist .notificationdropdown .notification-all .link:not([disabled]):hover {
  color: hsl(230deg, 82%, 61%);
}

.header-nav .headerlist .user-link {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-nav .headerlist .user-link .user-thumbnail {
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.header-nav .headerlist .user-link .user-thumbnail img {
  width: 100%;
  height: 100%;
}

.header-nav .headerlist .user-link .detail {
  display: none;
}

@media screen and (min-width: 62rem) {
  .header-nav .headerlist .user-link .detail {
    display: flex;
    flex-direction: column;
  }
}

.header-nav .headerlist .user-link .detail .name {
  color: hsl(221deg, 31%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
}

.header-nav .headerlist .user-link .detail .designation {
  color: hsl(223deg, 14%, 60%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: normal;
  line-height: 1.3;
}

.header-nav .headerlist .userdropdown {
  width: 10.9375rem;
  position: absolute;
  top: 100%;
  right: 0;
  display: none;
  padding-top: 1rem;
  z-index: 100;
}

.header-nav .headerlist .userdropdown .user {
  width: 100%;
  background: hsl(0deg, 0%, 100%);
  filter: drop-shadow(-0.25rem 0.25rem 0.25rem rgba(138, 146, 166, 0.15));
}

.header-nav .headerlist .userdropdown .user .userlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.header-nav .headerlist .userdropdown .user .userlist-link {
  padding: 0.5rem 1.25rem;
  color: hsl(223deg, 14%, 60%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.75;
  width: 100%;
}

.header-nav .headerlist .userdropdown .user .userlist-link:not([disabled]):hover {
  background: #f2f2f2;
}

.header-nav .headerlist .userdropdown .user .userlist-item:last-child .userlist-link {
  border-top: solid 0.0625rem hsl(0deg, 0%, 93%);
}

/**=======================================================**
                        HEADER SECTION END
**=======================================================**/
/**=======================================================**
                    		MODAL START
**=======================================================**/
.modal-content {
  overflow: hidden;
  border: none;
  border-radius: 0.625rem;
  border-radius: 0.625rem;
}

.modal-header {
  border-bottom: 0rem;
}

.modal-header .modal-title {
  color: hsl(224deg, 10%, 46%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75;
}

.modal-header .btn-close {
  background: transparent;
  border: none;
  height: 1.6875rem;
  width: 1.6875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  overflow: hidden;
  transition: transform 250ms ease-in-out;
}

.modal-header .btn-close:focus {
  outline: none;
  box-shadow: none;
}

.modal-body .categoryinfo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-body .categoryinfo .inputbox {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.modal-body .categoryinfo .inputbox .inputlabel {
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
}

.modal-body .categoryinfo .inputbox .inputlabel .required {
  color: hsl(0deg, 96%, 67%);
}

.modal-body .categoryinfo .inputbox .inputfield {
  color: hsl(221deg, 31%, 20%);
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  transition: all 250ms ease-in-out;
}

.modal-body .categoryinfo .inputbox .inputfield::after {
  color: hsl(224deg, 13%, 84%);
}

.modal-body .categoryinfo .inputbox .inputfield:focus {
  border-color: hsl(223deg, 14%, 60%);
}

.modal-body .categoryinfo .inputbox .selectfield {
  color: hsl(221deg, 31%, 20%);
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  padding: 0.5rem 1rem;
  background: hsl(0deg, 0%, 100%) url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 10L12 14L8 10' stroke='%238A92A6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center right 3%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: all 250ms ease-in-out;
}

.modal-body .categoryinfo .inputbox .selectfield option {
  color: hsl(221deg, 31%, 20%);
}

.modal-body .categoryinfo .inputbox .selectfield:focus {
  border-color: hsl(223deg, 14%, 60%);
}

.modal-body .categoryinfo .inputbox .btn-remove {
  position: absolute;
  top: 72%;
  transform: translateY(-50%);
  right: 2.5rem;
  background: transparent;
  border: none;
  z-index: 100;
}

.modal-body .categoryinfo .inputbox .error-message {
  display: none;
  color: hsl(0deg, 96%, 67%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

.modal-body .categoryinfo .inputbox.errorfield .inputfield,
.modal-body .categoryinfo .inputbox.errorfield .selectfield {
  border-color: hsl(0deg, 96%, 67%);
}

.modal-body .categoryinfo .inputbox.errorfield .btn-remove {
  top: 50%;
}

.modal-body .categoryinfo .inputbox.errorfield .error-message {
  display: block;
}

.modal-body .categoryinfo .uploadbox {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modal-body .categoryinfo .uploadbox .labelupload {
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
}

.modal-body .categoryinfo .uploadbox .labelupload .required {
  color: hsl(0deg, 96%, 67%);
}

.modal-body .categoryinfo .uploadbox .upload {
  background: rgba(164, 180, 242, 0.1);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.625rem;
  border: dashed 0.125rem hsl(228deg, 75%, 80%);
  height: 100%;
  text-align: center;
  overflow: hidden;
  min-height: 10rem;
}

.modal-body .categoryinfo .uploadbox .upload .icon {
  height: 2.75rem;
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.modal-body .categoryinfo .uploadbox .upload .icon svg {
  width: 100%;
  height: 100%;
}

.modal-body .categoryinfo .uploadbox .upload .uploadinfo .uploadlabel {
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  cursor: pointer;
}

.modal-body .categoryinfo .uploadbox .upload .uploadinfo .uploadlabel .text {
  color: hsl(230deg, 82%, 61%);
}

.modal-body .categoryinfo .uploadbox .upload.errorfield {
  border-color: hsl(0deg, 96%, 67%);
}

.modal-body .categoryinfo .submitbox {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.modal-body .deleteinfo {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.modal-body .deleteinfo-header {
  border-bottom: solid 0.0625rem hsl(0deg, 0%, 93%);
  padding: 1.25rem 1rem;
}

.modal-body .deleteinfo-header .delete-title {
  color: hsl(221deg, 31%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.4;
}

.modal-body .deleteinfo-body {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0rem 1.5rem 1.25rem;
}

.modal-body .deleteconfirmed {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-body .deleteconfirmed-header {
  border-bottom: solid 0.0625rem hsl(0deg, 0%, 93%);
  padding: 1.25rem 1rem;
}

.modal-body .deleteconfirmed-header .deleteconfirmed-title {
  color: hsl(221deg, 31%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.4;
}

.modal-body .deleteconfirmed-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0rem 1.5rem 1.25rem;
}

.modal-body .deleteconfirmed-body .icon {
  height: 3rem;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.modal-body .deleteconfirmed-body .icon svg {
  width: 100%;
  height: 100%;
}

#variantModal .modal-body {
  max-height: 32rem;
  overflow-x: hidden;
  overflow-y: scroll;
}

#variantModal .modal-body::-webkit-scrollbar {
  background: transparent;
  width: 0.5rem;
}

#variantModal .modal-body::-webkit-scrollbar-thumb {
  background: #c4c8d2;
  border-radius: 0.5rem;
  border-radius: 0.5rem;
}

#variantModal .btn-modal,
#variantModal .btn-add {
  width: 7rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/**=======================================================**
                    		MODAL END
**=======================================================**/
/**=====================================================
                OFFCANVAS START
=====================================================**/
.offcanvas-top {
  border-bottom: none;
}

.offcanvas-bottom {
  border-top: none;
}

.offcanvas-start {
  border-right: none;
}

.offcanvas-end {
  border-left: 0;
}

.offcanvas {
  width: 15rem;
  min-height: 110vh;
  z-index: 999999;
}

.offcanvas-header {
  position: relative;
  padding: 1.125rem 1rem;
}

.offcanvas-header .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.offcanvas-header .logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.offcanvas-header .btn-close {
  height: 1.5rem;
  width: 1.5rem;
  background: transparent;
  margin: 0;
  padding: 0;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  opacity: 1;
}

.offcanvas-header .btn-close svg {
  width: 100%;
  height: 100%;
}

.offcanvas-header .btn-close svg path {
  fill: hsl(230deg, 82%, 61%);
}

.offcanvas-header .btn-close:focus {
  box-shadow: none;
  outline: none;
}

.offcanvas-body {
  overflow-x: hidden;
  padding-top: 0rem;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.offcanvas-body::-webkit-scrollbar {
  background: transparent;
  width: 0.375rem;
}

.offcanvas-body::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  border-radius: 0.5rem;
  background: hsl(224deg, 13%, 84%);
}

.offcanvas-body .mobilemenu {
  display: flex;
  flex-direction: column;
  padding-bottom: 2rem;
}

.offcanvas-body .mobilemenu .menulink {
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.offcanvas-body .mobilemenu .menulink::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.25rem;
  height: 0rem;
  background: hsl(230deg, 82%, 61%);
  transition: all 250ms ease-in-out;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.offcanvas-body .mobilemenu .menulink .icon {
  height: 1.25rem;
  width: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.offcanvas-body .mobilemenu .menulink .icon svg {
  width: 100%;
  height: 100%;
}

.offcanvas-body .mobilemenu .menulink .icon .difficon path {
  fill: none;
}

.offcanvas-body .mobilemenu .menulink .text {
  color: #354464;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4;
}

.offcanvas-body .mobilemenu .menulink.active::before {
  height: 100%;
}

.offcanvas-body .mobilemenu .menulink.active .icon svg path {
  fill: hsl(230deg, 82%, 61%);
}

.offcanvas-body .mobilemenu .menulink.active .icon .differicon path {
  fill: none;
  stroke: hsl(230deg, 82%, 61%);
}

.offcanvas-body .mobilemenu .menulink.active .text {
  color: hsl(230deg, 82%, 61%);
}

.offcanvas-body .mobilemenu .menulink:hover:not(.active)::before {
  height: 100%;
}

.offcanvas-body .mobilemenu .menulink:hover:not(.active) .icon svg path {
  fill: hsl(230deg, 82%, 61%);
}

.offcanvas-body .mobilemenu .menulink:hover:not(.active) .icon .differicon path {
  fill: none;
  stroke: hsl(230deg, 82%, 61%);
}

.offcanvas-body .mobilemenu .menulink:hover:not(.active) .text {
  color: hsl(230deg, 82%, 61%);
}

.offcanvas-body .mobilemenu .accordion {
  padding-bottom: 3rem;
}

.offcanvas-body .mobilemenu .accordion-item {
  padding: 0.5rem 0.75rem;
  position: relative;
}

.offcanvas-body .mobilemenu .accordion-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.25rem;
  height: 0rem;
  background: hsl(230deg, 82%, 61%);
  transition: all 250ms ease-in-out;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.offcanvas-body .mobilemenu .accordion-item .accordion-header .accordion-button {
  background: transparent;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.offcanvas-body .mobilemenu .accordion-item .accordion-header .accordion-button .icon {
  height: 1.25rem;
  width: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.offcanvas-body .mobilemenu .accordion-item .accordion-header .accordion-button .icon svg {
  width: 100%;
  height: 100%;
}

.offcanvas-body .mobilemenu .accordion-item .accordion-header .accordion-button .icon svg path {
  fill: hsl(223deg, 14%, 60%);
}

.offcanvas-body .mobilemenu .accordion-item .accordion-header .accordion-button .icon .differicon path {
  fill: none;
  stroke: hsl(223deg, 14%, 60%);
}

.offcanvas-body .mobilemenu .accordion-item .accordion-header .accordion-button .text {
  color: #354464;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4;
}

.offcanvas-body .mobilemenu .accordion-item .accordion-header .accordion-button::after {
  height: 1rem;
  width: 1rem;
  background-size: 1rem;
}

.offcanvas-body .mobilemenu .accordion-item.active::before {
  height: 100%;
}

.offcanvas-body .mobilemenu .accordion-item.active .accordion-header .accordion-button .icon svg path {
  fill: hsl(230deg, 82%, 61%);
}

.offcanvas-body .mobilemenu .accordion-item.active .accordion-header .accordion-button .icon .differicon path {
  fill: none;
  stroke: hsl(230deg, 82%, 61%);
}

.offcanvas-body .mobilemenu .accordion-item.active .accordion-header .accordion-button .text {
  color: hsl(230deg, 82%, 61%);
}

.offcanvas-body .mobilemenu .accordion-item:hover:not(.active)::before {
  height: 100%;
}

.offcanvas-body .mobilemenu .accordion-item:hover:not(.active) .accordion-header .accordion-button .icon svg path {
  fill: hsl(230deg, 82%, 61%);
}

.offcanvas-body .mobilemenu .accordion-item:hover:not(.active) .accordion-header .accordion-button .icon .differicon path {
  fill: none;
  stroke: hsl(230deg, 82%, 61%);
}

.offcanvas-body .mobilemenu .accordion-item:hover:not(.active) .accordion-header .accordion-button .text {
  color: hsl(230deg, 82%, 61%);
}

.offcanvas-body .mobilemenu .accordion-button {
  padding: 0rem;
}

.offcanvas-body .mobilemenu .accordion-button:not(.collapsed)::after {
  transform: rotate(0deg);
}

.offcanvas-body .mobilemenu .accordion-button::after {
  transform: rotate(-90deg);
}

.offcanvas-body .mobilemenu .accordion-body {
  padding: 0.875rem;
}

.offcanvas-body .mobilemenu .accordion-body .sublist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  padding-left: 0.5rem;
}

.offcanvas-body .mobilemenu .accordion-body .sublist-link {
  padding: 0.25rem 1.5rem;
  color: hsl(223deg, 14%, 60%);
  color: #354464;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.4;
  position: relative;
}

.offcanvas-body .mobilemenu .accordion-body .sublist-link::before {
  position: absolute;
  top: 50%;
  left: 0rem;
  transform: translateY(-50%);
  height: 1.25rem;
  width: 1.25rem;
  content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.4' d='M17 12C17 14.2096 15.2092 16 13 16C10.7908 16 9 14.2096 9 12C9 9.7912 10.7908 8 13 8C15.2092 8 17 9.7912 17 12Z' fill='black'/%3E%3C/svg%3E%0A");
}

.offcanvas-body .mobilemenu .accordion-body .sublist-link:not([disabled]):hover {
  color: hsl(230deg, 82%, 61%);
}

.offcanvas-body .mobilemenu .accordion-body .sublist-link:not([disabled]):hover::before {
  content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 12C17 14.2096 15.2092 16 13 16C10.7908 16 9 14.2096 9 12C9 9.7912 10.7908 8 13 8C15.2092 8 17 9.7912 17 12Z' fill='%234A66ED'/%3E%3C/svg%3E");
}

/**=====================================================
                OFFCANVAS END
=====================================================**/
/**=======================================================**
                      PRELOADER START
**=======================================================**/
.preloader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  z-index: 10000;
  background: hsl(0deg, 0%, 100%);
}

.preloader .preload {
  height: 12.5rem;
  width: 12.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  position: relative;
}

.preloader .preload .circle-1 {
  height: 10rem;
  width: 10rem;
  border-radius: 100%;
  border: solid 0.125rem hsl(230deg, 82%, 61%);
  position: relative;
  -webkit-animation: animationOne 3.3s 0.3s linear infinite;
  animation: animationOne 3.3s 0.3s linear infinite;
}

.preloader .preload .circle-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 100%;
  background: hsl(230deg, 82%, 61%);
  box-shadow: 0 0 1.25rem hsl(230deg, 82%, 61%);
  transform: translate(-50%, -50%);
}

.preloader .preload .circle-2 {
  position: absolute;
  height: 5rem;
  width: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preloader .preload .circle-2 svg {
  width: 100%;
  height: 100%;
}

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

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

@keyframes animationOne {
  0% {
    transform: rotate(0deg);
  }

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

/**=======================================================**
                      PRELOADER END
**=======================================================**/
/**=======================================================**
                        TAB START
**=======================================================**/
.nav-tabs {
  border: none;
  border-radius: 0rem;
  border-radius: 0rem;
  border: 0;
}

.nav-tabs .nav-item {
  width: calc(33.3333333333% - 0.25rem);
}

.nav-tabs .nav-link {
  width: 100%;
  padding: 0.75rem 0.625rem;
  border: solid 0.125rem transparent;
  border-bottom: 0;
  margin: 0;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.nav-tabs .nav-link:hover:not(.active) {
  border-color: transparent;
  outline: none;
}

/**=======================================================**
                        TAB END
**=======================================================**/
.tooltip-inner {
  background: hsl(230deg, 82%, 61%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6666666667;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: hsl(230deg, 82%, 61%);
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: hsl(230deg, 82%, 61%);
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: hsl(230deg, 82%, 61%);
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: hsl(230deg, 82%, 61%);
}

/**=======================================================**
                        ANIMATION START
**=======================================================**/
@-webkit-keyframes spinning {
  0% {
    transform: rotate(0deg);
  }

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

@keyframes spinning {
  0% {
    transform: rotate(0deg);
  }

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

/**=======================================================**
                        ANIMATION END
**=======================================================**/
/**=====================================================
                      SIDEBAR START
=====================================================**/
.desktopsidebar {
  width: 13.75rem;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background: hsl(0deg, 0%, 100%);
  display: none;
  transition: 0.2s ease-in-out;
  z-index: 1000;
}

@media screen and (min-width: 62rem) {
  .desktopsidebar {
    display: flex;
    flex-direction: column;
  }
}

.desktopsidebar-header {
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: solid 0.125rem hsl(210deg, 16%, 93%);
  border-right: solid 0.125rem hsl(210deg, 16%, 93%);
}

.desktopsidebar-header .btn-toggle {
  background: transparent;
  border: none;
  height: 1.875rem;
  width: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -0.9375rem;
  z-index: 100;
}

.desktopsidebar-header .btn-toggle svg {
  width: 100%;
  height: 100%;
  transition: all 250ms ease-in-out;
}

.desktopsidebar-header .btn-toggle svg.active {
  transform: rotate(180deg);
}

.desktopsidebar-header .full-logo {
  display: block;
}

.desktopsidebar-header .icon-logo {
  display: none;
}

.desktopsidebar .desktopmenu {
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 4.75rem);
  overflow-x: hidden;
  overflow-y: scroll;
}

.desktopsidebar .desktopmenu::-webkit-scrollbar {
  background: transparent;
  width: 0.375rem;
}

.desktopsidebar .desktopmenu::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  border-radius: 0.5rem;
  background: hsl(224deg, 13%, 84%);
}

.desktopsidebar .desktopmenu .menulink {
  padding: 0.625rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.desktopsidebar .desktopmenu .menulink::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.25rem;
  height: 0rem;
  background: hsl(230deg, 82%, 61%);
  transition: all 250ms ease-in-out;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.desktopsidebar .desktopmenu .menulink .icon {
  height: 1.25rem;
  width: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.desktopsidebar .desktopmenu .menulink .icon svg {
  width: 100%;
  height: 100%;
}

.desktopsidebar .desktopmenu .menulink .icon .difficon path {
  fill: none;
}

.desktopsidebar .desktopmenu .menulink .text {
  color: #354464;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4;
}

.desktopsidebar .desktopmenu .menulink.active::before {
  height: 100%;
}

.desktopsidebar .desktopmenu .menulink.active .icon svg path {
  fill: hsl(230deg, 82%, 61%);
}

.desktopsidebar .desktopmenu .menulink.active .icon .differicon path {
  fill: none;
  stroke: hsl(230deg, 82%, 61%);
}

.desktopsidebar .desktopmenu .menulink.active .text {
  color: hsl(230deg, 82%, 61%);
}

.desktopsidebar .desktopmenu .menulink:hover:not(.active)::before {
  height: 100%;
}

.desktopsidebar .desktopmenu .menulink:hover:not(.active) .icon svg path {
  fill: hsl(230deg, 82%, 61%);
}

.desktopsidebar .desktopmenu .menulink:hover:not(.active) .icon .differicon path {
  fill: none;
  stroke: hsl(230deg, 82%, 61%);
}

.desktopsidebar .desktopmenu .menulink:hover:not(.active) .text {
  color: hsl(230deg, 82%, 61%);
}

.desktopsidebar .desktopmenu .accordion {
  padding-bottom: 1.5rem;
}

.desktopsidebar .desktopmenu .accordion-item {
  padding: 0.625rem 0.75rem;
  position: relative;
}

.desktopsidebar .desktopmenu .accordion-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.25rem;
  height: 0rem;
  background: hsl(230deg, 82%, 61%);
  transition: all 250ms ease-in-out;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.desktopsidebar .desktopmenu .accordion-item .accordion-header .accordion-button {
  background: transparent;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.desktopsidebar .desktopmenu .accordion-item .accordion-header .accordion-button .icon {
  height: 1.25rem;
  width: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.desktopsidebar .desktopmenu .accordion-item .accordion-header .accordion-button .icon svg {
  width: 100%;
  height: 100%;
}

.desktopsidebar .desktopmenu .accordion-item .accordion-header .accordion-button .icon svg path {
  fill: hsl(223deg, 14%, 60%);
}

.desktopsidebar .desktopmenu .accordion-item .accordion-header .accordion-button .icon .differicon path {
  fill: none;
  stroke: hsl(223deg, 14%, 60%);
}

.desktopsidebar .desktopmenu .accordion-item .accordion-header .accordion-button .text {
  color: #354464;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4;
}

.desktopsidebar .desktopmenu .accordion-item .accordion-header .accordion-button::after {
  height: 1rem;
  width: 1rem;
  background-size: 1rem;
}

.desktopsidebar .desktopmenu .accordion-item.active::before {
  height: 100%;
}

.desktopsidebar .desktopmenu .accordion-item.active .accordion-header .accordion-button .icon svg path {
  fill: hsl(230deg, 82%, 61%);
}

.desktopsidebar .desktopmenu .accordion-item.active .accordion-header .accordion-button .icon .differicon path {
  fill: none;
  stroke: hsl(230deg, 82%, 61%);
}

.desktopsidebar .desktopmenu .accordion-item.active .accordion-header .accordion-button .text {
  color: hsl(230deg, 82%, 61%);
}

.desktopsidebar .desktopmenu .accordion-item:hover:not(.active)::before {
  height: 100%;
}

.desktopsidebar .desktopmenu .accordion-item:hover:not(.active) .accordion-header .accordion-button .icon svg path {
  fill: hsl(230deg, 82%, 61%);
}

.desktopsidebar .desktopmenu .accordion-item:hover:not(.active) .accordion-header .accordion-button .icon .differicon path {
  fill: none;
  stroke: hsl(230deg, 82%, 61%);
}

.desktopsidebar .desktopmenu .accordion-item:hover:not(.active) .accordion-header .accordion-button .text {
  color: hsl(230deg, 82%, 61%);
}

.desktopsidebar .desktopmenu .accordion-button {
  padding: 0rem;
}

.desktopsidebar .desktopmenu .accordion-button:not(.collapsed)::after {
  transform: rotate(0deg);
}

.desktopsidebar .desktopmenu .accordion-button::after {
  transform: rotate(-90deg);
}

.desktopsidebar .desktopmenu .accordion-body {
  padding: 0.875rem;
}

.desktopsidebar .desktopmenu .accordion-body .sublist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  padding-left: 0.5rem;
}

.desktopsidebar .desktopmenu .accordion-body .sublist-link {
  padding: 0.25rem 1.5rem;
  color: #354464;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.4;
  position: relative;
}

.desktopsidebar .desktopmenu .accordion-body .sublist-link::before {
  position: absolute;
  top: 50%;
  left: 0rem;
  transform: translateY(-50%);
  height: 1.5rem;
  width: 1.5rem;
  content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.4' d='M17 12C17 14.2096 15.2092 16 13 16C10.7908 16 9 14.2096 9 12C9 9.7912 10.7908 8 13 8C15.2092 8 17 9.7912 17 12Z' fill='black'/%3E%3C/svg%3E%0A");
}

.desktopsidebar .desktopmenu .accordion-body .sublist-link:not([disabled]):hover {
  color: hsl(230deg, 82%, 61%);
}

.desktopsidebar .desktopmenu .accordion-body .sublist-link:not([disabled]):hover::before {
  content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 12C17 14.2096 15.2092 16 13 16C10.7908 16 9 14.2096 9 12C9 9.7912 10.7908 8 13 8C15.2092 8 17 9.7912 17 12Z' fill='%234A66ED'/%3E%3C/svg%3E");
}

.desktopsidebar.sidecollapsed {
  width: 4rem;
  transition: 0.2s ease-in-out;
}

.desktopsidebar.sidecollapsed .desktopsidebar-header .full-logo {
  display: none;
}

.desktopsidebar.sidecollapsed .desktopsidebar-header .icon-logo {
  display: block;
}

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

.desktopsidebar.sidecollapsed .menulink .text {
  display: none;
}

.desktopsidebar.sidecollapsed .accordion-item,
.desktopsidebar.sidecollapsed .accordion-header {
  background: transparent;
}

.desktopsidebar.sidecollapsed .accordion-button {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.desktopsidebar.sidecollapsed .accordion-button .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.desktopsidebar.sidecollapsed .accordion-button .text {
  display: none;
}

.desktopsidebar.sidecollapsed .accordion-button::after {
  display: none;
}

/**=====================================================
                      SIDEBAR END
=====================================================**/
.main {
  transition: 0.2s ease-in-out;
  padding: 1rem;
  overflow: hidden;
  min-height: calc(100vh - 4.75rem);
}

@media screen and (min-width: 62rem) {
  .main {
    margin-left: 13.75rem;
  }
}

.main.maincollapsed {
  transition: 0.2s ease-in-out;
}

@media screen and (min-width: 62rem) {
  .main.maincollapsed {
    margin-left: 4rem;
  }
}

.main .tableinfo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.main .tableinfo-header {
  background: hsl(0deg, 0%, 100%);
  padding: 0.875rem;
  border-radius: 0.25rem;
  border-radius: 0.25rem;
}

@media screen and (min-width: 62rem) {
  .main .tableinfo-header {
    padding: 0.75rem 1.25rem 1.5rem;
  }
}

.main .tableinfo-header .tablefilter {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.main .tableinfo-header .tablefilter-header .tablefilter-title {
  color: hsl(224deg, 10%, 46%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75;
}

.main .tableinfo-header .tablefilter-body .formfilter {
  display: flex;
  align-items: center;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
}

@media screen and (min-width: 62rem) {
  .main .tableinfo-header .tablefilter-body .formfilter {
    gap: 1rem;
  }
}

.main .tableinfo-header .tablefilter-body .formfilter .inputbox {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

@media screen and (min-width: 36rem) {
  .main .tableinfo-header .tablefilter-body .formfilter .inputbox {
    max-width: 13.75rem;
  }
}

.main .tableinfo-header .tablefilter-body .formfilter .inputbox.idbox {
  width: 100%;
}

@media screen and (min-width: 36rem) {
  .main .tableinfo-header .tablefilter-body .formfilter .inputbox.idbox {
    max-width: 6.875rem;
  }
}

.main .tableinfo-header .tablefilter-body .formfilter .inputbox.selectbox {
  width: 100%;
}

@media screen and (min-width: 36rem) {
  .main .tableinfo-header .tablefilter-body .formfilter .inputbox.selectbox {
    min-width: 12.5rem;
    max-width: 15rem;
  }
}

.main .tableinfo-header .tablefilter-body .formfilter .inputbox .inputfield {
  color: hsl(221deg, 31%, 20%);
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  transition: all 250ms ease-in-out;
}

.main .tableinfo-header .tablefilter-body .formfilter .inputbox .inputfield::after {
  color: hsl(224deg, 13%, 84%);
}

.main .tableinfo-header .tablefilter-body .formfilter .inputbox .inputfield:focus {
  border-color: hsl(223deg, 14%, 60%);
}

.main .tableinfo-header .tablefilter-body .formfilter .inputbox .selectfield {
  color: hsl(221deg, 31%, 20%);
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  padding: 0.5rem 1rem;
  background: hsl(0deg, 0%, 100%) url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 10L12 14L8 10' stroke='%238A92A6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center right 3%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: all 250ms ease-in-out;
}

.main .tableinfo-header .tablefilter-body .formfilter .inputbox .selectfield option {
  color: hsl(221deg, 31%, 20%);
}

.main .tableinfo-header .tablefilter-body .formfilter .inputbox .selectfield:focus {
  border-color: hsl(223deg, 14%, 60%);
}

.main .tableinfo-header .tablefilter-body .formfilter .inputbox .btn-reset {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.875rem;
  background: transparent;
  border: none;
  z-index: 100;
}

.main .tableinfo-header .tablefilter-body .formfilter .inputbox .error-message {
  display: none;
  color: hsl(0deg, 96%, 67%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

.main .tableinfo-header .tablefilter-body .formfilter .inputbox.errorfield .inputfield,
.main .tableinfo-header .tablefilter-body .formfilter .inputbox.errorfield .selectfield {
  border-color: hsl(0deg, 96%, 67%);
}

.main .tableinfo-header .tablefilter-body .formfilter .inputbox.errorfield .btn-reset {
  top: 29%;
}

.main .tableinfo-header .tablefilter-body .formfilter .inputbox.errorfield .error-message {
  display: block;
}

.main .tableinfo-header .tablefilter-body .formfilter .submitbox {
  width: 100%;
  display: flex;
  align-items: center;
}

@media screen and (min-width: 36rem) {
  .main .tableinfo-header .tablefilter-body .formfilter .submitbox {
    width: 9.5625rem;
  }
}

.main .tableinfo-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: hsl(0deg, 0%, 100%);
  padding: 1rem 1.25rem 2rem;
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  overflow: hidden;
}

.main .tableinfo-body .tableheader .tabletitle {
  color: hsl(224deg, 10%, 46%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75;
}

table.dataTable {
  border-collapse: collapse !important;
  margin: 0;
}

.dataTable_wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.table {
  overflow-x: scroll;
  max-width: 99.5%;
}

.table thead {
  background: hsl(228deg, 33%, 97%);
  vertical-align: middle;
}

@media screen and (max-width: 48rem) {
  .table thead {
    display: none;
  }
}

.table thead tr {
  border-top: solid 0.0625rem hsl(210deg, 14%, 89%);
  border-bottom: solid 0.0625rem hsl(210deg, 14%, 89%);
}

.table thead tr th {
  color: hsl(223deg, 14%, 60%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  text-align: center;
  border-left: solid 0.0625rem hsl(210deg, 14%, 89%);
  padding: 0.875rem 0.5rem;
  vertical-align: middle;
}

@media screen and (min-width: 62rem) {
  .table thead tr th:first-of-type {
    border-left: 0;
  }
}

.table thead tr th .checkfield {
  height: 1.125rem;
  width: 1.125rem;
  margin-inline: auto;
}

.table tbody {
  vertical-align: middle;
}

@media screen and (max-width: 48rem) {
  .table tbody {
    border-top: solid 0.0625rem hsl(210deg, 14%, 89%);
    border-right: solid 0.0625rem hsl(210deg, 14%, 89%);
    overflow: hidden;
  }
}

.table tbody tr {
  border-bottom: solid 0.0625rem hsl(210deg, 14%, 89%);
}

@media screen and (max-width: 48rem) {
  .table tbody tr {
    overflow: hidden;
  }
}

.table tbody tr td {
  color: hsl(221deg, 31%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4;
  text-align: center;
  border-left: solid 0.0625rem hsl(210deg, 14%, 89%);
  padding: 0.5rem;
  vertical-align: middle;
}

@media screen and (min-width: 62rem) {
  .table tbody tr td:first-of-type {
    border-left: 0;
  }
}

.table tbody tr td td:before {
  content: attr(data);
}

.table tbody tr td .actionbuttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}

.table tbody tr td .actionbuttons .btn-action {
  background: transparent;
  border: none;
  height: 1.5rem;
  width: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.table tbody tr td .actionbuttons .btn-action svg {
  width: 100%;
  height: 100%;
}

.table tbody tr td .title,
.table tbody tr td .text,
.table tbody tr td .linktext {
  color: inherit;
  font: inherit;
}

.table tbody tr td .title {
  text-align: left;
  width: 6.25rem;
}

.table tbody tr td .text {
  text-align: right;
  width: calc(100% - 6.25rem);
  max-width: 99%;
  white-space: nowrap;
  /* overflow: hidden; */
  text-overflow: ellipsis;
}

@media screen and (min-width: 62rem) {
  .table tbody tr td .text {
    text-align: center;
    width: 100%;
  }
}

.table tbody tr td .inputdetail {
  width: calc(100% - 6.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media screen and (min-width: 62rem) {
  .table tbody tr td .inputdetail {
    width: 100%;
  }
}

.table tbody tr td .inputdetail input {
  width: 100%;
  text-align: center;
}

.table tbody tr td .quantitydetail {
  margin-inline: auto;
  max-width: 5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table tbody tr td .quantitydetail input {
  width: 100%;
  text-align: center;
}

.table tbody tr td .linktext:not([disabled]):hover {
  color: hsl(230deg, 82%, 61%);
}

.table tbody tr td .link {
  color: hsl(230deg, 82%, 61%);
  font: inherit;
  text-align: right;
}

@media screen and (min-width: 62rem) {
  .table tbody tr td .link {
    text-align: center;
  }
}

.table tbody tr td .link:not([disabled]):hover {
  color: hsl(230deg, 82%, 61%);
}

.table tbody tr td .selectfield {
  color: hsl(40deg, 97%, 54%);
  border: solid 0.0625rem hsl(40deg, 97%, 54%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  padding: 0.5rem 1rem;
  background: hsl(0deg, 0%, 100%) url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 10L12 14L8 10' stroke='%23FCAF15' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center right 3%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: all 250ms ease-in-out;
}

.table tbody tr td .selectfield option {
  color: hsl(221deg, 31%, 20%);
}

.table tbody tr td .selectfield:focus {
  border-color: hsl(40deg, 97%, 54%);
}

.table tbody tr td .priceinfo,
.table tbody tr td .pricequantity {
  display: flex;
  flex-direction: column;
  text-align: right;
  width: calc(100% - 6.25rem);
}

@media screen and (min-width: 62rem) {

  .table tbody tr td .priceinfo,
  .table tbody tr td .pricequantity {
    text-align: center;
    width: 100%;
  }
}

.table tbody tr td .priceinfo {
  gap: 0.75rem;
}

.table tbody tr td .priceinfo .productname,
.table tbody tr td .priceinfo .productprice {
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4;
}

.table tbody tr td .priceinfo .productname {
  color: hsl(221deg, 31%, 20%);
}

.table tbody tr td .priceinfo .productprice {
  color: hsl(205deg, 100%, 50%);
}

.table tbody tr td .pricequantity .price,
.table tbody tr td .pricequantity .quantity {
  color: hsl(0deg, 0%, 0%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4;
}

.table tbody tr td .checkfield {
  height: 1.125rem;
  width: 1.125rem;
}

@media screen and (min-width: 62rem) {
  .table tbody tr td .checkfield {
    margin-inline: auto;
  }
}

.table tbody tr td .variantname {
  color: hsl(175deg, 98%, 24%);
}

.table tbody tr td .categoryname {
  color: hsl(34deg, 100%, 50%);
}

.table tbody tr td .default {
  height: 1rem;
  width: 1rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 62rem) {
  .table tbody tr td .default {
    margin-inline: auto;
  }
}

.table tbody tr td .imgbox {
  height: 3rem;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media screen and (min-width: 62rem) {
  .table tbody tr td .imgbox {
    margin-inline: auto;
  }
}

.table tbody tr td .imgbox img {
  width: 100%;
  height: 100%;
}

.table tbody tr td .title {
  display: none;
}

@media screen and (max-width: 48rem) {
  .table tbody tr td .title {
    display: block;
    overflow: hidden;
  }
}

@media screen and (max-width: 74.9375rem) {
  .table tbody tr td:first-of-type {
    width: 3rem;
  }
}

@media screen and (max-width: 48rem) {
  .table tbody tr td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 0.0625rem hsl(210deg, 14%, 89%);
  }

  .table tbody tr td:first-of-type {
    width: 3rem;
    width: 95%;
  }

  .table tbody tr td:last-of-type {
    border-bottom: 0;
  }
}

div.dataTables_wrapper div.dataTables_info {
  position: absolute;
  color: hsl(223deg, 14%, 60%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4;
}

@media screen and (min-width: 62rem) {
  div.dataTables_wrapper div.dataTables_info {
    padding-top: 2.1875rem;
  }
}

div.dataTables_wrapper div.dataTables_paginate {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3.4375rem;
}

@media screen and (min-width: 62rem) {
  div.dataTables_wrapper div.dataTables_paginate {
    margin-top: 1.875rem;
    display: flex;
    justify-content: flex-end;
  }
}

div.dataTables_wrapper div.dataTables_paginate .pagination {
  overflow: hidden;
  margin: 0 !important;
}

div.dataTables_wrapper div.dataTables_paginate .pagination .page-item {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 2.5rem;
  width: 2.5rem;
}

div.dataTables_wrapper div.dataTables_paginate .pagination .page-item:not(:first-child) .page-link {
  margin-left: 0;
}

div.dataTables_wrapper div.dataTables_paginate .pagination .page-item .page-link {
  height: 2.5rem;
  width: 2.5rem;
  border: 0;
  border-radius: 0;
  padding: 0rem;
  background: hsl(0deg, 0%, 100%);
  color: hsl(230deg, 82%, 61%);
  border: solid 0.0625rem hsl(210deg, 14%, 89%);
  border-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4285714286;
  text-align: center;
}

div.dataTables_wrapper div.dataTables_paginate .pagination .page-item .page-link:focus {
  box-shadow: none;
  outline: none;
}

div.dataTables_wrapper div.dataTables_paginate .pagination .page-item:hover:not(.active):not(.disabled) .page-link {
  background: hsl(230deg, 82%, 61%);
  color: hsl(0deg, 0%, 100%);
  border-color: hsl(230deg, 82%, 61%);
}

div.dataTables_wrapper div.dataTables_paginate .pagination .page-item.active .page-link {
  background: hsl(230deg, 82%, 61%);
  color: hsl(0deg, 0%, 100%);
  border-color: hsl(230deg, 82%, 61%);
}

div.dataTables_wrapper div.dataTables_paginate .pagination .page-item.previous .page-link,
div.dataTables_wrapper div.dataTables_paginate .pagination .page-item.next .page-link {
  font-size: 0;
  color: transparent;
  position: relative;
  height: 2.5rem;
  width: 2.5rem;
}

div.dataTables_wrapper div.dataTables_paginate .pagination .page-item.previous .page-link::before,
div.dataTables_wrapper div.dataTables_paginate .pagination .page-item.next .page-link::before {
  position: absolute;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div.dataTables_wrapper div.dataTables_paginate .pagination .page-item.previous .page-link {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

div.dataTables_wrapper div.dataTables_paginate .pagination .page-item.previous .page-link::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234A66ED' class='bi bi-chevron-left' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

div.dataTables_wrapper div.dataTables_paginate .pagination .page-item.previous .page-link:not([disabled]):hover::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-chevron-left' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

div.dataTables_wrapper div.dataTables_paginate .pagination .page-item.next .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-right: solid 0.0625rem hsl(210deg, 14%, 89%);
}

div.dataTables_wrapper div.dataTables_paginate .pagination .page-item.next .page-link::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234A66ED' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

div.dataTables_wrapper div.dataTables_paginate .pagination .page-item.next .page-link:not([disabled]):hover::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.emptydata {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 0.25rem;
}

.emptydata-title {
  color: hsl(230deg, 82%, 61%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4;
}

@media screen and (min-width: 48rem) {
  .emptydata-title {
    font-family: "Inter";
    font-style: normal;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
  }
}

@media screen and (min-width: 62rem) {
  .emptydata-title {
    font-family: "Inter";
    font-style: normal;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.6666666667;
  }
}

.emptydata-text {
  color: hsl(223deg, 14%, 60%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.5;
}

@media screen and (min-width: 48rem) {
  .emptydata-text {
    font-family: "Inter";
    font-style: normal;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.4;
  }
}

@media screen and (min-width: 62rem) {
  .emptydata-text {
    font-family: "Inter";
    font-style: normal;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
  }
}

.auth {
  width: 100%;
  overflow: hidden;
  margin: 0;
  display: flex;
  min-height: 100vh;
}

@media screen and (min-width: 62rem) {
  .auth {
    height: 100vh;
  }
}

.auth .authentication {
  position: relative;
  width: 100%;
  background: hsl(0deg, 0%, 100%);
}

.auth .authentication-header {
  padding: 1.5rem;
}

@media screen and (min-width: 62rem) {
  .auth .authentication-header {
    padding: 4rem 0rem 0rem 4.375rem;
  }
}

.auth .authentication-body {
  height: calc(100% - 4.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2rem;
  padding: 2rem;
}

@media screen and (min-width: 62rem) {
  .auth .authentication-body {
    height: calc(100% - 5.4375rem);
  }
}

.auth .authentication-body .authinfo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  position: relative;
  z-index: 100;
}

.auth .authentication-body .authinfo .title {
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4;
}

.auth .authentication-body .authinfo .social-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.auth .authentication-body .authinfo .social-list-link {
  background: transparent;
  border: none;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.auth .authentication-body .authinfo .social-list-link svg {
  width: 100%;
  height: 100%;
}

.auth .authentication-body .authinfo .textauth {
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4;
}

.auth .authentication-body .authinfo .textauth .link {
  color: hsl(230deg, 82%, 61%);
  font: inherit;
}

.auth .authentication-body .authinfo .textauth .link:not([disabled]):hover {
  color: #1535d5;
}

.auth .authentication-body .authinfo .textauth .btn-resend {
  background: transparent;
  border: none;
  color: hsl(230deg, 82%, 61%);
  font: inherit;
  text-transform: uppercase;
}

.auth .authentication-body .authinfo .textauth .btn-resend:not([disabled]):hover {
  color: #1535d5;
}

.auth .authentication-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.auth .authentication-form-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

.auth .authentication-form-header .auth-title {
  color: hsl(221deg, 31%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 2.0625rem;
  font-weight: 600;
  line-height: 1.2103030303;
}

.auth .authentication-form-header .auth-text {
  color: hsl(223deg, 14%, 60%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.4;
}

.auth .authentication-form-header .confirmed-title {
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.auth .authentication-form-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth .authentication-form-body .inputbox {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.auth .authentication-form-body .inputbox .inputlabel {
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.7142857143;
}

.auth .authentication-form-body .inputbox .inputfield {
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.7142857143;
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  transition: all 250ms ease-in-out;
}

.auth .authentication-form-body .inputbox .inputfield::-moz-placeholder {
  color: #b4b9c5;
}

.auth .authentication-form-body .inputbox .inputfield:-ms-input-placeholder {
  color: #b4b9c5;
}

.auth .authentication-form-body .inputbox .inputfield::placeholder {
  color: #b4b9c5;
}

.auth .authentication-form-body .inputbox .inputfield:focus {
  border-color: hsl(223deg, 14%, 60%);
}

.auth .authentication-form-body .inputbox .error-message {
  color: hsl(0deg, 96%, 67%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  display: none;
}

.auth .authentication-form-body .inputbox.errorfield .inputfield {
  border-color: hsl(0deg, 96%, 67%);
}

.auth .authentication-form-body .inputbox.errorfield .error-message {
  display: block;
}

.auth .authentication-form-body .inputinfo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.auth .authentication-form-body .inputinfo .remember-forgot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
}

.auth .authentication-form-body .inputinfo .remember-forgot .forgotlink {
  color: hsl(230deg, 82%, 61%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.7142857143;
  transition: color 250ms ease-in-out;
}

.auth .authentication-form-body .inputinfo .remember-forgot .forgotlink:not([disabled]):hover {
  color: #1535d5;
}

.auth .authentication-form-body .verification {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.auth .authentication-form-body .verification .verify {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  overflow: hidden;
}

.auth .authentication-form-body .verification .verify .inputfield {
  height: 3.75rem;
  width: 3.75rem;
  border-radius: 100%;
  background: hsl(0deg, 0%, 97%);
  color: hsl(0deg, 0%, 20%);
  border: solid 0.0625rem transparent;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.7142857143;
  text-align: center;
  transition: all 250ms ease-in-out;
}

.auth .authentication-form-body .verification .verify .inputfield::-moz-placeholder {
  color: #b4b9c5;
}

.auth .authentication-form-body .verification .verify .inputfield:-ms-input-placeholder {
  color: #b4b9c5;
}

.auth .authentication-form-body .verification .verify .inputfield::placeholder {
  color: #b4b9c5;
}

.auth .authentication-form-body .verification .verify .inputfield:focus {
  border-color: hsl(223deg, 14%, 60%);
  background: transparent;
}

.auth .authentication-form-body .verification .error-message {
  color: hsl(0deg, 96%, 67%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  display: none;
  text-align: center;
  text-align: center;
}

.auth .authentication-form-body .verification.errorfield .verify .inputfield {
  border-color: hsl(0deg, 96%, 67%);
  background: transparent;
}

.auth .authentication-form-body .verification.errorfield .error-message {
  display: block;
}

.auth .authentication-form-body .submitbox {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth .authentication-form-body .confirmed {
  width: 11.375rem;
  height: 13.875rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.auth .authentication-form-body .confirmed svg {
  width: 100%;
  height: 100%;
}

.auth .authentication .logicon {
  width: 20rem;
  height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: absolute;
  bottom: -2rem;
  left: 0rem;
  z-index: 0;
}

@media screen and (min-width: 36rem) {
  .auth .authentication .logicon {
    width: 26.875rem;
    height: 15.625rem;
  }
}

.auth .authentication .logicon svg {
  width: 100%;
  height: 100%;
}

.auth .authentication .logicon {
  width: 19.8125rem;
  height: 10.1875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.auth .authentication .logicon svg {
  width: 100%;
  height: 100%;
}

.auth .authentication .regicon {
  width: 18.0625rem;
  height: 10.5625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 0;
}

.auth .authentication .regicon svg {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 62rem) {
  .auth .authentication {
    width: 50%;
  }
}

.auth-thumbnail {
  display: none;
}

@media screen and (min-width: 62rem) {
  .auth-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
  }
}

.auth-thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.checkfield {
  display: flex;
  align-items: center;
}

.checkfield .checkinput:checked~.checklabel::before {
  background: hsl(230deg, 82%, 61%);
  border-color: hsl(230deg, 82%, 61%);
}

.checkfield .checkinput:checked~.checklabel::after {
  opacity: 1;
  visibility: visible;
}

.checkfield .checklabel {
  position: relative;
  padding-left: 1.625rem;
  cursor: pointer;
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.7142857143;
}

.checkfield .checklabel::-moz-selection {
  background: transparent;
  color: hsl(0deg, 0%, 20%);
}

.checkfield .checklabel::selection {
  background: transparent;
  color: hsl(0deg, 0%, 20%);
}

.checkfield .checklabel::before,
.checkfield .checklabel::after {
  content: "";
  position: absolute;
  top: 50%;
}

.checkfield .checklabel::before {
  left: 0;
  transform: translateY(-50%);
  height: 1.125rem;
  width: 1.125rem;
  background: hsl(0deg, 0%, 100%);
  border: solid 0.125rem hsl(224deg, 13%, 84%);
  border-radius: 0.1875rem;
  border-radius: 0.1875rem;
}

.checkfield .checklabel::after {
  width: 0.3125rem;
  height: 0.625rem;
  border: solid 0.125rem hsl(0deg, 0%, 100%);
  transform: translateY(-60%) rotate(45deg);
  border-top: 0;
  border-left: 0;
  left: 0.4375rem;
  opacity: 0;
  visibility: hidden;
  transition: all 250ms ease-in-out;
}

.form-switch {
  padding-left: 0;
}

.form-switch .form-check-input {
  cursor: pointer;
  width: 2.5rem;
  height: 1.25rem;
  margin: 0rem;
  border: 0;
  background-color: #FF3366;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
  background-color: #1DC179;
  border-color: #1DC179;
}

.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  outline: none;
  box-shadow: none;
}

.radiobox {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.radiobox .radioinput:checked~.radiolabel::before {
  border-color: hsl(230deg, 82%, 61%);
}

.radiobox .radioinput:checked~.radiolabel::after {
  opacity: 1;
  visibility: visible;
  background: hsl(230deg, 82%, 61%);
}

.radiobox .radiolabel {
  color: hsl(221deg, 31%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  position: relative;
  padding-left: 1.625rem;
  cursor: pointer;
}

.radiobox .radiolabel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 1.125rem;
  width: 1.125rem;
  background: hsl(0deg, 0%, 100%);
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 100%;
  transition: all 250ms ease-in-out;
}

.radiobox .radiolabel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.25rem;
  transform: translateY(-50%);
  height: 0.625rem;
  width: 0.625rem;
  background: hsl(0deg, 0%, 100%);
  border-radius: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 250ms ease-in-out;
}

/**=====================================================
                        FORM START
=====================================================**/
.inputbox {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.inputbox .inputlabel {
  color: hsl(223deg, 14%, 60%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4285714286;
}

.inputbox .inputfield {
  padding: 0.625rem 2rem 0.625rem 1rem;
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  color: hsl(0deg, 0%, 0%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4285714286;
  transition: all 250ms ease-in-out;
}

.inputbox .inputfield:focus {
  border-color: hsl(223deg, 14%, 60%);
}

.inputbox .checkboxes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.inputbox .erroricon {
  position: absolute;
  top: 50%;
  transform: translateY(-40%);
  right: 0.625rem;
  opacity: 0;
  visibility: none;
  transition: all 250ms ease-in-out;
}

.inputbox .iconinput {
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  transition: all 250ms ease-in-out;
}

.inputbox .iconinput .icon {
  width: 2.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inputbox .iconinput .inputfield {
  width: calc(100% - 2.5rem);
  padding: 0.625rem 2rem 0.625rem 0rem;
  border: 0;
  color: hsl(0deg, 0%, 0%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4285714286;
}

.inputbox .iconinput:focus-within {
  border-color: hsl(223deg, 14%, 60%);
}

.inputbox .errormessage {
  display: none;
  color: hsl(0deg, 96%, 67%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3333333333;
}

.inputbox.errorfield .inputfield {
  border-color: hsl(0deg, 96%, 67%);
}

.inputbox.errorfield .errormessage {
  display: block;
}

.inputbox.errorfield .checkfield .checklabel::before {
  border-color: hsl(0deg, 96%, 67%);
}

.inputbox.errorfield .checkfield .checklabel::after {
  background: transparent;
}

.inputbox.errorfield .select-dropdown .selected-item {
  border-color: hsl(0deg, 96%, 67%);
}

.inputbox.errorfield .select-dropdown .toggleicon {
  display: none;
}

.inputbox.errorfield .erroricon {
  opacity: 1;
  visibility: visible;
}

.inputbox.errorfield .iconinput {
  border-color: hsl(0deg, 96%, 67%);
}

/**=====================================================
                        FORM END
=====================================================**/
/**=======================================================**
                        ERROR START
**=======================================================**/
.error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding: 1rem;
  background: hsl(0deg, 0%, 100%);
}

.error-thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1rem;
}

@media screen and (min-width: 36rem) {
  .error-thumbnail {
    height: 18.75rem;
    width: 18.75rem;
  }
}

@media screen and (min-width: 62rem) {
  .error-thumbnail {
    height: 31.25rem;
    width: 31.25rem;
  }
}

.error-thumbnail svg {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

/**=======================================================**
                        ERROR END
**=======================================================**/
/**=======================================================**
                        PRODUCT-INFO START
**=======================================================**/
.productinfo {
  background: hsl(0deg, 0%, 100%);
  padding: 1rem 1.25rem 2rem;
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

.productinfo-header .breadcrumb {
  margin-bottom: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.productinfo-header .breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.productinfo-header .breadcrumb-item .icon {
  height: 1.125rem;
  width: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media screen and (min-width: 48rem) {
  .productinfo-header .breadcrumb-item .icon {
    height: 1.25rem;
    width: 1.25rem;
  }
}

.productinfo-header .breadcrumb-item .icon svg {
  width: 100%;
  height: 100%;
}

.productinfo-header .breadcrumb-item .icon svg path {
  fill: hsl(224deg, 10%, 46%);
}

.productinfo-header .breadcrumb-item .text {
  color: hsl(224deg, 10%, 46%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

@media screen and (min-width: 48rem) {
  .productinfo-header .breadcrumb-item .text {
    font-family: "Inter";
    font-style: normal;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
  }
}

.productinfo-header .breadcrumb-item.active .icon svg path {
  fill: hsl(221deg, 31%, 20%);
}

.productinfo-header .breadcrumb-item.active .text {
  color: hsl(221deg, 31%, 20%);
}

.productinfo-header .breadcrumb-item:hover:not(.active) .breadcrumb-link .icon svg path {
  fill: hsl(221deg, 31%, 20%);
}

.productinfo-header .breadcrumb-item:hover:not(.active) .breadcrumb-link .text {
  color: hsl(221deg, 31%, 20%);
}

.productinfo-header .breadcrumb-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.productinfo-header .breadcrumb-link .icon {
  height: 1.125rem;
  width: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media screen and (min-width: 48rem) {
  .productinfo-header .breadcrumb-link .icon {
    height: 1.25rem;
    width: 1.25rem;
  }
}

.productinfo-header .breadcrumb-link .icon svg {
  width: 100%;
  height: 100%;
}

.productinfo-header .breadcrumb-link .icon svg path {
  fill: hsl(224deg, 10%, 46%);
}

.productinfo-header .breadcrumb-link .text {
  color: hsl(224deg, 10%, 46%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

@media screen and (min-width: 48rem) {
  .productinfo-header .breadcrumb-link .text {
    font-family: "Inter";
    font-style: normal;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
  }
}

.productinfo-header .breadcrumb .divider {
  height: 1rem;
  width: 0.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media screen and (min-width: 48rem) {
  .productinfo-header .breadcrumb .divider {
    height: 1.125rem;
  }
}

.productinfo-header .breadcrumb .divider svg {
  width: 100%;
  height: 100%;
}

.productinfo-header .iconlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.productinfo-header .iconlist-link {
  background: transparent;
  border: none;
  height: 1.5rem;
  width: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.productinfo-header .iconlist-link svg {
  width: 100%;
  height: 100%;
}

.productinfo-header .orderlisthead {
  display: flex;
  align-items: center;
  gap: 2rem;
}

@media screen and (min-width: 48rem) {
  .productinfo-header .orderlisthead {
    gap: 3rem;
  }
}

.productinfo-header .orderlisthead-title {
  color: hsl(224deg, 10%, 46%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

@media screen and (min-width: 48rem) {
  .productinfo-header .orderlisthead-title {
    font-family: "Inter";
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75;
  }
}

.productinfo-header .orderlisthead .orderbuttons {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

@media screen and (min-width: 48rem) {
  .productinfo-header .orderlisthead .orderbuttons {
    gap: 1rem;
  }
}

.productinfo-header .orderlisthead .orderbuttons .btn-order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.productinfo-header .orderlisthead .orderbuttons .btn-order .icon {
  height: 1.375rem;
  width: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.productinfo-header .orderlisthead .orderbuttons .btn-order .icon svg {
  width: 100%;
  height: 100%;
}

.productinfo-header .orderlisthead .orderbuttons .btn-order .text {
  display: none;
  color: hsl(224deg, 10%, 46%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4;
}

@media screen and (min-width: 48rem) {
  .productinfo-header .orderlisthead .orderbuttons .btn-order .text {
    display: inline-block;
  }
}

.productinfo-header .orderlisthead .orderbuttons .btn-order:not([disabled]):hover .icon svg path {
  fill: hsl(230deg, 82%, 61%);
}

.productinfo-header .orderlisthead .orderbuttons .btn-order:not([disabled]):hover .text {
  color: hsl(230deg, 82%, 61%);
}

.productinfo-body .productdescription {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.productinfo-body .productdescription-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.productinfo-body .productdescription-header .productdescription-title {
  color: hsl(224deg, 10%, 46%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75;
}

.productinfo-body .productdescription-header .buttonlist {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.productinfo-body .productdescription-header .buttonlist .btn-cross,
.productinfo-body .productdescription-header .buttonlist .btn-right {
  background: transparent;
  border: none;
  height: 1.3125rem;
  width: 1.3125rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.productinfo-body .productdescription-header .buttonlist .btn-cross svg,
.productinfo-body .productdescription-header .buttonlist .btn-right svg {
  width: 100%;
  height: 100%;
}

.productinfo-body .productdescription .info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.productinfo-body .productdescription .info .inputbox {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.productinfo-body .productdescription .info .inputbox .inputlabel {
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
}

.productinfo-body .productdescription .info .inputbox .inputlabel .required {
  color: hsl(0deg, 96%, 67%);
}

.productinfo-body .productdescription .info .inputbox .inputfield {
  color: hsl(221deg, 31%, 20%);
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  transition: all 250ms ease-in-out;
}

.productinfo-body .productdescription .info .inputbox .inputfield::after {
  color: hsl(224deg, 13%, 84%);
}

.productinfo-body .productdescription .info .inputbox .inputfield:focus {
  border-color: hsl(223deg, 14%, 60%);
}

.productinfo-body .productdescription .info .inputbox .selectfield {
  color: hsl(221deg, 31%, 20%);
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  padding: 0.5rem 1rem;
  background: hsl(0deg, 0%, 100%) url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 10L12 14L8 10' stroke='%238A92A6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center right 3%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: all 250ms ease-in-out;
}

.productinfo-body .productdescription .info .inputbox .selectfield option {
  color: hsl(221deg, 31%, 20%);
}

.productinfo-body .productdescription .info .inputbox .selectfield:focus {
  border-color: hsl(223deg, 14%, 60%);
}

.productinfo-body .productdescription .info .inputbox .btn-remove {
  position: absolute;
  top: 72%;
  transform: translateY(-50%);
  right: 2.5rem;
  background: transparent;
  border: none;
  z-index: 100;
}

.productinfo-body .productdescription .info .inputbox .error-message {
  display: none;
  color: hsl(0deg, 96%, 67%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

.productinfo-body .productdescription .info .inputbox.errorfield .inputfield,
.productinfo-body .productdescription .info .inputbox.errorfield .selectfield {
  border-color: hsl(0deg, 96%, 67%);
}

.productinfo-body .productdescription .info .inputbox.errorfield .review .radiolabel::before {
  border-color: hsl(0deg, 96%, 67%);
}

.productinfo-body .productdescription .info .inputbox.errorfield .btn-remove {
  top: 50%;
}

.productinfo-body .productdescription .info .inputbox.errorfield .error-message {
  display: block;
}

.productinfo-body .productdescription .info .infoadd {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.productinfo-body .productdescription .info .infoadd .inputbox {
  width: calc(100% - 5.5rem);
}

.productinfo-body .productdescription .info .infoadd .addbox {
  width: 5.5rem;
}

.productinfo-body .productdetail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.productinfo-body .productdetail .productimages {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.productinfo-body .productdetail .productimages-header .productimages-title {
  color: hsl(224deg, 10%, 46%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75;
}

.productinfo-body .productdetail .productimages-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.productinfo-body .productdetail .productimages-body .warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.productinfo-body .productdetail .productimages-body .warning .icon {
  height: 1.5rem;
  width: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.productinfo-body .productdetail .productimages-body .warning .icon svg {
  width: 100%;
  height: 100%;
}

.productinfo-body .productdetail .productimages-body .warning .message {
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
}

.productinfo-body .productdetail .productimages-body .product-thumbnail {
  background: rgba(164, 180, 242, 0.1);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.625rem;
  position: relative;
}

.productinfo-body .productdetail .productimages-body .product-thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.productinfo-body .productdetail .productimages-body .product-thumbnail .btn-delete {
  background: transparent;
  border: none;
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  height: 1.6875rem;
  width: 1.6875rem;
  z-index: 100;
}

.productinfo-body .productdetail .productimages-body .product-thumbnail .btn-delete svg {
  width: 100%;
  height: 100%;
}

.productinfo-body .productdetail .deliverycharge {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.productinfo-body .productdetail .deliverycharge-header .deliverycharge-title {
  color: hsl(224deg, 10%, 46%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75;
}

.productinfo-body .productdetail .deliverycharge-body {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.productinfo-body .productdetail .deliverycharge-body .delivery {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: calc(50% - 0.5rem);
}

@media screen and (min-width: 36rem) {
  .productinfo-body .productdetail .deliverycharge-body .delivery {
    max-width: 10rem;
  }
}

.productinfo-body .productdetail .deliverycharge-body .delivery-body {
  display: flex;
  align-items: center;
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  overflow: hidden;
  transition: all 250ms ease-in-out;
}

.productinfo-body .productdetail .deliverycharge-body .delivery-body .deliverylabel {
  padding: 0.5rem;
  border-right: solid 0.0625rem hsl(224deg, 13%, 84%);
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  width: 3rem;
  text-align: center;
}

.productinfo-body .productdetail .deliverycharge-body .delivery-body .deliveryinput {
  padding: 0.5rem;
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  width: calc(100% - 3rem);
}

.productinfo-body .productdetail .deliverycharge-body .delivery-body:focus-within {
  border-color: hsl(223deg, 14%, 60%);
}

.productinfo-body .productdetail .seoinformation {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.productinfo-body .productdetail .seoinformation-header .seoinformation-title {
  color: hsl(224deg, 10%, 46%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75;
}

.productinfo-body .productdetail .seoinformation-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.productinfo-body .productdetail .seoinformation-body .inputbox {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.productinfo-body .productdetail .seoinformation-body .inputbox .inputlabel {
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
}

.productinfo-body .productdetail .seoinformation-body .inputbox .inputlabel .required {
  color: hsl(0deg, 96%, 67%);
}

.productinfo-body .productdetail .seoinformation-body .inputbox .inputfield {
  color: hsl(221deg, 31%, 20%);
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  transition: all 250ms ease-in-out;
}

.productinfo-body .productdetail .seoinformation-body .inputbox .inputfield::after {
  color: hsl(224deg, 13%, 84%);
}

.productinfo-body .productdetail .seoinformation-body .inputbox .inputfield:focus {
  border-color: hsl(223deg, 14%, 60%);
}

.productinfo-body .productdetail .seoinformation-body .inputbox .error-message {
  display: none;
  color: hsl(0deg, 96%, 67%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

.productinfo-body .productdetail .seoinformation-body .inputbox.errorfield .inputfield {
  border-color: hsl(0deg, 96%, 67%);
}

.productinfo-body .productdetail .seoinformation-body .inputbox.errorfield .error-message {
  display: block;
}

.productinfo-body .productdetail .submitbox {
  display: flex;
  justify-content: flex-end;
}

.upload {
  background: rgba(164, 180, 242, 0.1);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.625rem;
  border: dashed 0.125rem hsl(228deg, 75%, 80%);
  height: 100%;
  text-align: center;
  overflow: hidden;
}

.upload .icon {
  height: 2.75rem;
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.upload .icon svg {
  width: 100%;
  height: 100%;
}

.upload .uploadinfo .uploadlabel {
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  cursor: pointer;
}

.upload .uploadinfo .uploadlabel .text {
  color: hsl(230deg, 82%, 61%);
}

.upload.errorfield {
  border-color: hsl(0deg, 96%, 67%);
}

.inputbox .review {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 2.12375rem;
}

.inputbox .review .radiofield:checked~.radiolabel::before {
  border-color: hsl(230deg, 82%, 61%);
}

.inputbox .review .radiofield:checked~.radiolabel::after {
  opacity: 1;
  visibility: visible;
  background: hsl(230deg, 82%, 61%);
}

.inputbox .review .radiolabel {
  color: hsl(221deg, 31%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  position: relative;
  padding-left: 1.625rem;
  cursor: pointer;
}

.inputbox .review .radiolabel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 1.125rem;
  width: 1.125rem;
  background: hsl(0deg, 0%, 100%);
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 100%;
  transition: all 250ms ease-in-out;
}

.inputbox .review .radiolabel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.25rem;
  transform: translateY(-50%);
  height: 0.625rem;
  width: 0.625rem;
  background: hsl(0deg, 0%, 100%);
  border-radius: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 250ms ease-in-out;
}

.inputbox .error-message {
  display: none;
  color: hsl(0deg, 96%, 67%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

.inputbox.errorfield .inputfield,
.inputbox.errorfield .selectfield {
  border-color: hsl(0deg, 96%, 67%);
}

.inputbox.errorfield .review .radiolabel::before {
  border-color: hsl(0deg, 96%, 67%);
}

.inputbox.errorfield .btn-remove {
  top: 50%;
}

.inputbox.errorfield .error-message {
  display: block;
}

/**=======================================================**
                        PRODUCT-INFO END
**=======================================================**/
/**=======================================================**
                        VARIANT START
**=======================================================**/
.variant {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.variant-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.variant-header .variant-head .variant-title {
  color: hsl(224deg, 10%, 46%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75;
}

.variant-create {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.variant-create .infobox {
  display: flex;
  align-items: center;
  align-items: flex-end;
  gap: 1rem;
}

.variant-create .infobox .closebox {
  height: 1.75rem;
  width: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.variant-create .infobox .closebox .btn-remove {
  border-radius: 100%;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
}

.variant-create .infobox .closebox .btn-remove svg {
  width: 100%;
  height: 100%;
}

.variant-create .submitvariant {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
}

.variant-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.variant-body .varianlist-title {
  color: hsl(224deg, 10%, 46%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75;
}

.variant-body .variantsubmit {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.variant-body .variantsubmit .btn-delete {
  background: hsl(0deg, 96%, 67%);
  color: hsl(0deg, 0%, 100%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.7142857143;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  transition: background 250ms ease-in-out;
}

@media screen and (min-width: 36rem) {
  .variant-body .variantsubmit .btn-delete {
    padding: 0.625rem 2rem;
  }
}

.variant-body .variantsubmit .btn-delete:not([disabled]):hover {
  background: hsl(0deg, 66%, 47%);
  color: hsl(0deg, 0%, 100%);
}

@media screen and (min-width: 62rem) {
  .variant-body .variantsubmit {
    margin-top: 2rem;
  }
}

.inputbox {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  width: calc(100% - 1.75rem);
}

.inputbox .inputlabel {
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
}

.inputbox .inputlabel .required {
  color: hsl(0deg, 96%, 67%);
}

.inputbox .inputfield {
  color: hsl(221deg, 31%, 20%);
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  transition: all 250ms ease-in-out;
}

.inputbox .inputfield::after {
  color: hsl(224deg, 13%, 84%);
}

.inputbox .inputfield:focus {
  border-color: hsl(223deg, 14%, 60%);
}

.inputbox .selectfield {
  color: hsl(221deg, 31%, 20%);
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  padding: 0.5rem 1rem;
  background: hsl(0deg, 0%, 100%) url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 10L12 14L8 10' stroke='%238A92A6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center right 3%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: all 250ms ease-in-out;
}

.inputbox .selectfield option {
  color: hsl(221deg, 31%, 20%);
}

.inputbox .selectfield:focus {
  border-color: hsl(223deg, 14%, 60%);
}

.inputbox .btn-remove {
  position: absolute;
  top: 72%;
  transform: translateY(-50%);
  right: 2.5rem;
  background: transparent;
  border: none;
  z-index: 100;
}

.inputbox .review {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 2.12375rem;
}

.inputbox .review .radiofield:checked~.radiolabel::before {
  border-color: hsl(230deg, 82%, 61%);
}

.inputbox .review .radiofield:checked~.radiolabel::after {
  opacity: 1;
  visibility: visible;
  background: hsl(230deg, 82%, 61%);
}

.inputbox .review .radiolabel {
  color: hsl(221deg, 31%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  position: relative;
  padding-left: 1.5rem;
  cursor: pointer;
}

.inputbox .review .radiolabel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 1rem;
  width: 1rem;
  background: hsl(0deg, 0%, 100%);
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 100%;
  transition: all 250ms ease-in-out;
}

.inputbox .review .radiolabel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.25rem;
  transform: translateY(-50%);
  height: 0.5rem;
  width: 0.5rem;
  background: hsl(0deg, 0%, 100%);
  border-radius: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 250ms ease-in-out;
}

.inputbox .tagswrapper {
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  transition: all 250ms ease-in-out;
}

.inputbox .tagswrapper .tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: 0.3125rem;
  border-radius: 0.3125rem;
  background: hsl(221deg, 31%, 20%);
  color: hsl(0deg, 0%, 100%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
  padding: 0.1875rem 0.375rem;
}

.inputbox .tagswrapper .tag button {
  background: transparent;
  border: none;
  height: 0.75rem;
  width: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.inputbox .tagswrapper input {
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
}

.inputbox .tagswrapper input::-moz-placeholder {
  color: hsl(224deg, 13%, 84%);
}

.inputbox .tagswrapper input:-ms-input-placeholder {
  color: hsl(224deg, 13%, 84%);
}

.inputbox .tagswrapper input::placeholder {
  color: hsl(224deg, 13%, 84%);
}

.inputbox .tagswrapper input:not([disabled]):hover {
  cursor: text;
}

.inputbox .tagswrapper:focus-within {
  border-color: hsl(223deg, 14%, 60%);
}

.inputbox .error-message {
  display: none;
  color: hsl(0deg, 96%, 67%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

.inputbox.errorfield .inputfield,
.inputbox.errorfield .selectfield {
  border-color: hsl(0deg, 96%, 67%);
}

.inputbox.errorfield .review .radiolabel::before {
  border-color: hsl(0deg, 96%, 67%);
}

.inputbox.errorfield .btn-remove {
  top: 50%;
}

.inputbox.errorfield .error-message {
  display: block;
}

.inputbox.errorfield .tagswrapper {
  border-color: hsl(0deg, 96%, 67%);
}

/**=======================================================**
                        VARIANT END
**=======================================================**/
/**=======================================================**
                          FORMS START
**=======================================================**/
.forms {
  background: hsl(0deg, 0%, 100%);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media screen and (min-width: 62rem) {
  .forms {
    padding: 0.75rem 1.25rem;
    gap: 3rem;
  }
}

.forms .formbox {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.forms .formbox-header .formtitle {
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75;
}

.forms .formbox-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media screen and (min-width: 62rem) {
  .forms .formbox-body {
    gap: 1.5rem;
  }
}

.forms .formbox-body .submit-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.875rem;
}

.select-dropdown {
  display: inline-block;
  position: relative;
  background: hsl(0deg, 0%, 100%);
  width: 100%;
}

.select-dropdown * {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

.select-dropdown.is-active .selected-item,
.select-dropdown.is-active ul {
  border-color: hsl(223deg, 14%, 60%);
}

.select-dropdown.is-active input[type=text] {
  border-color: hsl(224deg, 13%, 84%);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select-dropdown.is-active .toggleicon {
  transform: rotate(180deg) translateY(50%);
}

.select-dropdown.is-active ul {
  display: block;
}

.select-dropdown.is-active .selected-item {
  border-bottom-left-radius: 0rem;
  border-bottom-right-radius: 0rem;
}

.select-dropdown .selected-item {
  position: relative;
  z-index: 1;
  text-overflow: ellipsis;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 1rem;
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-radius: 0.25rem;
  border-radius: 0.25rem;
  color: hsl(0deg, 0%, 0%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4285714286;
  transition: all 250ms ease-in-out;
}

.select-dropdown .toggleicon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
}

.select-dropdown ul {
  display: none;
  position: absolute;
  z-index: 999;
  background: hsl(0deg, 0%, 100%);
  width: 100%;
  list-style-type: none;
  border: solid 0.0625rem hsl(224deg, 13%, 84%);
  border-top: 0;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  padding: 0;
  margin: 0;
  max-height: 22.5rem;
  overflow-x: hidden;
  overflow-y: scroll;
  transition: all 250ms ease-in-out;
}

.select-dropdown ul::-webkit-scrollbar {
  background: transparent;
  width: 0.375rem;
}

.select-dropdown ul::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  border-radius: 0.5rem;
  background: hsl(224deg, 13%, 84%);
}

.select-dropdown ul li {
  background: hsl(0deg, 0%, 100%);
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-bottom: solid 0.0625rem hsl(224deg, 13%, 84%);
  color: hsl(0deg, 0%, 0%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.4285714286;
}

.select-dropdown ul li:not([disabled]):hover {
  background: #f3f4f6;
}

.select-dropdown ul li * {
  pointer-events: none;
}

.select-dropdown ul li:last-child {
  border-bottom: 0;
}

.horizontal-form .inputbox .product-thumbnail {
  height: 8.125rem;
  width: 8.125rem;
  overflow: hidden;
  position: relative;
}

.horizontal-form .inputbox .product-thumbnail .btn-delete {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.horizontal-form .inputbox .product-thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.horizontal-form .inputbox .upload {
  height: 8.125rem;
  width: 8.125rem;
  overflow: hidden;
}

.horizontal-form .inputbox .inputdata {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.horizontal-form .inputbox .erroricon {
  transform: translateY(-50%);
}

@media screen and (min-width: 48rem) {
  .horizontal-form .inputbox .erroricon {
    transform: translateY(-105%);
  }
}

/**=======================================================**
                          FORMS END
**=======================================================**/
/**=======================================================**
                        FILTER START
**=======================================================**/
.createfilter {
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/**=======================================================**
                        FILTER END
**=======================================================**/
.createcategory {
  background: hsl(0deg, 0%, 100%);
  padding: 1.25rem 1rem 3rem;
}

.createcategory-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.createcategory-header .createcategory-title {
  color: hsl(0deg, 0%, 20%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75;
}

.createcategory-body .inputbox {
  width: 100%;
}

.createcategory-body .uploaddescript {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.createcategory-body .uploaddescript-header .uploadtitle {
  color: hsl(223deg, 14%, 60%);
  font-family: "Inter";
  font-style: normal;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.3333333333;
}

@media screen and (min-width: 48rem) {
  .createcategory-body .uploaddescript-header .uploadtitle {
    font-family: "Inter";
    font-style: normal;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.4285714286;
  }
}

.createcategory-body .uploaddescript-body .upload {
  width: 100%;
  height: 8.75rem;
}

@media screen and (min-width: 87.5rem) {
  .createcategory-body .uploaddescript-body .upload {
    height: 8.75rem;
    width: 8.75rem;
  }
}

.createcategory-body .submitbox {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.createcategory-body .submitbox .btn-add {
  width: 100%;
}

@media screen and (min-width: 48rem) {
  .createcategory-body .submitbox .btn-add {
    width: auto;
  }
}

.pos {
  background: hsl(0deg, 0%, 100%);
  padding: 1.25rem 1rem 3rem;
}

.pos-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.pos-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pos-header .titlebox .pos-title {
  color: hsl(224deg, 10%, 46%);
  font-family: "Inter";
  font-style: normal;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75;
}

.pos-header .headerinfo .inputbox {
  width: 100%;
}

.pos-header .headerinfo .addedit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
}

.pos-header .headerinfo .addedit .btn-editcustomer,
.pos-header .headerinfo .addedit .btn-addcustomer {
  height: 1.5rem;
  width: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pos-header .headerinfo .addedit .btn-editcustomer svg,
.pos-header .headerinfo .addedit .btn-addcustomer svg {
  width: 100%;
  height: 100%;
}

.pos-header .headerinfo .addedit .btn-editcustomer svg path,
.pos-header .headerinfo .addedit .btn-addcustomer svg path {
  transition: all 250ms ease-in-out;
}

.pos-header .headerinfo .addedit .btn-editcustomer:not([disabled]):hover svg path,
.pos-header .headerinfo .addedit .btn-addcustomer:not([disabled]):hover svg path {
  stroke: hsl(230deg, 82%, 61%);
}

.pos-body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.pos-body .inputbox {
  width: 100%;
}