@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Varela+Round&display=swap");

/*------------------------------------------------------------------
  [Table of contents]
  * To keep an overview of structure of your code, we make use of table of 
  * content. Table of content is use display the overall tree structure of your
  * Layout. 
  * (NOTE: Remove this commented code once you start developing the code.
  * Remove the following table of content and add your own as this is just and 
  * example to let you know)

  1. CSS Reset Code
    1.1. Eric Meyers Reset/HTML5 display-role reset for older browsers
    1.2. Clear Fix
    1.3. Font class declaration
  2. Body
  3. Header / .header
    2.1. Navigation / .navbar
  4. Content / .content
    4.1. Left column / .leftcolumn
    4.2. Right column / .rightcolumn
    4.3. Sidebar / .sidebar
      4.3.1. RSS / .rss
      4.3.2. Search / .search
      4.3.3. Boxes / .box
      4.3.4. Sideblog / .sideblog
      4.3.5. Advertisements / .ads
  5. Footer / .footer
  ------------------------------------------------------------------*/

/*------------------------------------------------------------------
  [Color codes]
  * Mention the color code you have used in your html document for the respective
  * elements given as follow. 
  * (NOTE: Remove this commented code once you start developing the code. 
  * Remove the following color code and add your own as this is just and 
  * example to let you know)

  Header nav: #e5e5df (Cararra)
  Header nav a (hover): #fff (white)
  Header nav a (active): #fff (white)
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
  [Typography]
  * Mention the Typography you have used in your html document for the respective
  * elements given as follow.
  * (NOTE: Remove this commented code once you start developing the code. 
  * Remove the following typography and add your own as this is just and 
  * example to let you know)

  Header nav a: 16px 'Futura Bold', 'Gill Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  View-register li a : 12px 'Futura Bold', 'Gill Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  -------------------------------------------------------------------*/

/* ==========================================================================
   1. CSS Reset Code
   ========================================================================== */

/* 1.1. Eric Meyers Reset
   http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
   ========================================================================== */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/* Force scrollbar */
html {
  overflow-y: scroll;
}

/* Align radios and text inputs with their label */

input[type="radio"] {
  vertical-align: text-bottom;
}

/* Hand cursor on clickable input elements */
label,
input[type="button"],
input[type="submit"],
button {
  cursor: pointer;
}

strong {
  font-weight: bold;
  font-family: inherit;
  font-size: inherit;
}

em {
  font-style: italic;
}

img {
  border: 0;
  vertical-align: middle;
  width: 100%;
  pointer-events: none;
}

#speedWarning {
  display: none;
  background-color: red;
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 1.2vh;
  position: fixed;
  top: 0;
  font-family: "Montserrat", sans-serif;
  width: 100%;
}

sub,
sup {
  vertical-align: baseline;
  position: relative;
  font-size: 55%;
  line-height: 0;
}

sup {
  top: -0.7em;
}

sub {
  bottom: -0.25em;
}

/* 1.2. Clear Fix
   ========================================================================== */

.cf:before,
.cf:after {
  display: table;
  content: " ";
}

.cf:after {
  clear: both;
}

.cf {
  zoom: 1;
}

/* 1.3. Font class declaration
   ========================================================================== */
/*
 * Mention the font property (eg: font-family, font-size, font-weight, font-style
 * etc) that have been commonly used in the html document. Make a class of it and
 * apply to the element wherever it is needed. If any single property in changed,
 * then override only that property in the particular class which is used for the
 * element.
 * (NOTE: Remove this commented code once you start 
 * developing the code. Remove the following font class and add your own
 * as this is just and example to let you know. If there is only one font family
 * followed throughout the site, then menstion the font property in body. No need
 * of creating an extra class for it) */

.futura-bold-font {
  font-family: "Futura Bold", "Gill Sans", Arial, "Helvetica Neue", Helvetica,
    sans-serif;
  font-style: normal;
  font-weight: bold;
}

.wrapper {
  width: 90%;
  max-width: 1360px;
  margin: 0 auto;
}

h1,
h2,
h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}

h4,
h5,
h6,
label {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
}

span,
p,
a,
input {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}

h3 {
  transition: 0.5s;
}

h3:hover {
  text-decoration: underline;
  text-decoration-color: #ff7300;
  cursor: default;
}

li {
  list-style: none;
}

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

.capital {
  text-transform: uppercase;
}

.bold {
  font-weight: 900;
}

.icon {
  display: block;
}

.icon::after {
  font-family: "FontAwesome";
  transition: 0.5s;
}

.loading {
  font-style: italic;
}

.img {
  pointer-events: none;
}

section.hidden,
.dialogue.hidden,
.hidden {
  display: none !important;
}

main section #backBtn {
  appearance: none;
  background-color: transparent;
  border: 2px solid #1a1a1a;
  border-radius: 15px;
  box-sizing: border-box;
  color: #3b3b3b;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 20px;
  margin-left: 20px;
  min-height: 60px;
  min-width: 0;
  outline: none;
  padding: 16px 24px;
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
  max-width: max-content;
  will-change: transform;
}

main section #backBtn:disabled {
  pointer-events: none;
}

main section #backBtn:hover {
  color: #fff;
  background-color: #1a1a1a;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

main section #backBtn:active {
  box-shadow: none;
  transform: translateY(0);
}

/* PRELOADER STYLING STARTS HERE */

.loader_bg {
  position: fixed;
  background: #000;
  width: 100vw;
  height: 100vh;
  z-index: 99999999;
}

.centerBike {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 26px;
  margin-left: -12px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

.loader-container-hidden {
  display: none;
}

#loop {
  height: 100px;
  width: 100px;
  border: #ff7300 solid 4px;
  border-radius: 200px;
}

#loop:before {
  background: linear-gradient(to left,
      rgba(187, 95, 39, 0) 0%,
      #ff7300 30%,
      #ff7300 70%,
      rgba(187, 95, 39, 0) 100%);
  content: "";
  display: block;
  height: 4px;
  left: -100px;
  position: relative;
  top: 100px;
  width: 300px;
}

#bike-wrapper {
  height: 108px;
  width: 108px;
  animation: drive 3s linear infinite;
}

#bike {
  height: 24px;
  width: 25px;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/133687/motorbike.png");
}

/* PRELOADER STYLING END HERE */

/* Options Styling Starts Here */

/* .nav-buttons {
  text-align: center;
  height: 70vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
} */

.option_btns {
  padding: 20px 30px;
  font-size: 20px;
  height: max-content;
  width: max-content;
  border: 1px solid transparent;
  outline: none;
  color: rgb(255, 255, 255);
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  flex-basis: 25%;
  transition: 0.5s;
}

.option_btns:hover {
  border: 1px solid #111;
  color: #111;
  background: #fff;
}

.option_btns:hover::after {
  background: #fff;
}

.option_btns:before {
  content: "";
  background: linear-gradient(45deg,
      #ff0000,
      #ff7300,
      #fffb00,
      #48ff00,
      #00ffd5,
      #002bff,
      #7a00ff,
      #ff00c8,
      #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-option_btns 20s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing-option_btns {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}

.option_btns:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 10px;
  transition: 0.5s;
}

/* Options Styling Ends Here */
.order-table-section {
  overflow-x: scroll;
}

.orders-table th,
.orders-table td {
  border: 1px solid #000;
  border-collapse: collapse;
}

.assignSelect {
  font-size: 13px;
  padding: 1px 2px;
  border: 2px solid #ffffff;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
}

.assignSelect:hover {
  border-color: #007BFF;
  background-color: #f8f8f8;
}

.assignSelect-disabled {
  background-color: #f0f0f0;
  border-color: #ddd;
  color: #aaa;
  cursor: not-allowed;
}

.assignSelect:focus {
  outline: none;
  border-color: #007BFF;
}

.assignnOrder,
.assignnStatus {
  margin-left: 10px;
  align-items: center;
  background-color: #ff7300;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
  box-sizing: border-box;
  color: rgba(0, 0, 0);
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.25;
  padding: 7px;
  position: relative;
  text-decoration: none;
  transition: all 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  width: auto;
}

.assignnOrder:hover,
.assignnStatus:focus,
.assignnStatus:hover .assignnOrder:focus {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
  color: rgba(0, 0, 0, 0.65);
}

.hidden-drop {
  display: none;
}

.assignnOrder:hover,
.assignnStatus:hover {
  transform: translateY(-1px);
}

.assignnOrder:active,
.assignnStatus:active {
  background-color: #ff5900;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
  color: rgba(0, 0, 0, 0.65);
  transform: translateY(0);
}

.hiddenBtn {
  display: none;
}

.orders-table {
  width: 2000px;
}

.shippedStatus {
  background-color: rgb(0, 255, 0);
}

.failedStatus {
  background-color: rgb(255, 1, 1);
}

.enquiryStatus {
  background-color: rgb(243, 247, 30);
}

.convertedStatus {
  background-color: cyan;
}

.incompleteStatus {
  background-color: rgba(0, 0, 0, 0.5);
}

.paymentLinkClass {
  background-color: #f08080;
}

.paymentLinkSuccessClass {
  background-color: rgb(63, 141, 63);
}

.paymentLinkSuccessPendingClass {
  background-color: rgb(232, 240, 195);
}

.order-shorten {
  max-width: 50px;
  min-width: 50px;
  max-height: 20px;
  padding: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: nowrap;
  cursor: pointer;
  transition: min-width 0.5s, text-wrap 0.5s 3s;
  padding: 7px 7px 7px 15px;
}

.order-long {
  min-width: 250px;
  max-height: max-content;
  text-wrap: wrap;
  background-color: #d3d3d3;
}

th {
  padding: 20px 15px;
  text-align: left;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 18px;
  color: #000;
  text-transform: capitalize;
}

td {
  padding: 7px 7px 7px 15px;
  text-align: left;
  font-size: 14px;
  color: #000;
  min-width: max-content;
}

[data-pagination],
[data-pagination] *,
[data-pagination] *:before,
[data-pagination] *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto;
}

[data-pagination] {
  font-size: 8pt;
  line-height: 1;
  font-weight: 400;
  font-family: "Open Sans", "Source Sans Pro", Roboto, "HelveticaNeue-Light",
    "Helvetica Neue Light", "Helvetica Neue", "Myriad Pro", "Segoe UI", Myriad,
    Helvetica, "Lucida Grande", "DejaVu Sans Condensed", "Liberation Sans",
    "Nimbus Sans L", Tahoma, Geneva, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  margin: 1em auto;
  text-align: center;
  transition: font-size 0.5s ease-in-out;
  -webkit-transition: font-size 0.5s ease-in-out;
  -moz-transition: font-size 0.5s ease-in-out;
  -ms-transition: font-size 0.5s ease-in-out;
  -o-transition: font-size 0.5s ease-in-out;
}

[data-pagination] ul {
  list-style-type: none;
  display: inline;
  font-size: 100%;
  margin: 0;
  padding: 0.5em;
}

[data-pagination] ul li {
  display: inline-block;
  font-size: 100%;
  width: auto;
  border-radius: 3px;
}

[data-pagination]>a {
  font-size: 140%;
}

[data-pagination] a {
  color: #777;
  font-size: 100%;
  padding: 0.5em;
}

[data-pagination] a:focus,
[data-pagination] a:hover {
  color: #f60;
}

[data-pagination] li.current {
  background: rgba(0, 0, 0, 0.1);
}

[data-pagination] li.current a {
  color: #f60;
}

/* Disabled & Hidden Styles */
[data-pagination] .disabled,
[data-pagination] [hidden],
[data-pagination] [disabled] {
  opacity: 0.5;
  pointer-events: none;
}

@media (min-width: 350px) {
  [data-pagination] {
    font-size: 10pt;
  }
}

@media (min-width: 500px) {
  [data-pagination] {
    font-size: 12pt;
  }
}

@media (min-width: 700px) {
  [data-pagination] {
    font-size: 14pt;
  }
}

@media (min-width: 900px) {
  [data-pagination] {
    font-size: 16pt;
  }
}

@media only screen and (min-width: 100px) and (max-width: 600px) {
  .headerText {
    display: none !important;
  }

  .headerText-mobile {
    display: contents !important;
    text-align: center !important;
    color: white !important;
  }

  /* .nav-buttons {
    padding-top: 4%;
  } */
}

.modal-container {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fefefe;
  padding: 1%;
  border: 1px solid #888;
  max-width: 50%;
  border-radius: 10px;
}

.close-remarks {
  position: absolute;
  top: 0%;
  right: 0%;
  color: #aaa;
  float: right;
  font-size: 22px;
  font-weight: bold;
  padding: 0 7px;
  background-color: red;
  border-radius: 100%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}

.close-remarks:hover,
.close-remarks:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#remarks {
  width: 95%;
  height: 100px;
  min-height: max-content;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
}

.salesPerson,
.finalOrderStatus {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  margin-left: 30px;
}

@keyframes drive {
  0% {
    margin-left: -364px;
    opacity: 0;
  }

  33.33% {
    transform: rotate(0deg);
    margin-left: -50px;
    opacity: 1;
  }

  66.66% {
    transform: rotate(-360deg);
    margin-left: -50px;
    opacity: 1;
  }

  100% {
    margin-left: 264px;
    transform: rotate(-360deg);
    opacity: 0;
  }
}

.noAccess {
  display: none;
}

/* Coupon styling starts here */

/* Coupon Section */
.coupon {
  padding: 20px;
  background-color: #f4f4f9;
  border-radius: 5px;
  max-width: 500px;
  margin: auto;
}

.coupon-label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.coupon-input {
  width: 100%;
  padding: 8px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.coupon-button {
  padding: 10px 20px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.coupon-button:hover {
  background-color: #0056b3;
}

/* Coupon styling ends here */

/* Update Section Styling Starts here */

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

.update {
  padding: 20px;
  background-color: #f4f4f9;
  border-radius: 5px;
  max-width: 800px;
  margin: auto;
}

.products-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.products-table th,
.products-table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

.products-table th {
  background-color: #f9f9f9;
}

.products-table td input {
  width: 100%;
  padding: 5px;
}

.pagination {
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.pagination button {
  padding: 10px 20px;
  margin: 0 5px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.pagination button:hover {
  background-color: #0056b3;
}

.pagination button:disabled {
  background-color: #cccccc;
}

/* Update Section Styling Ends here */

/* Upload Products Section Starts Here */

.addProductSection {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 5px;
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#addProductForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

#addProductSection h2 {
  text-align: center;
  color: #333;
}

#addProductSection label {
  display: block;
  margin-top: 10px;
  color: #555;
}

#addProductSection input,
#addProductSection textarea,
#addProductSection select {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.addProductSection button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
  transition: background-color 0.3s;
}

.addProductSection button:hover {
  background-color: #0056b3;
}

#productPreview {
  width: 70vw;
  background-color: #ffffff;
  padding: 20px;
  border: 1px solid #ddd;
  margin-top: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 8px;
  z-index: 1000;
  overflow-y: auto;
}

#productPreview button {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  height: max-content;
  width: max-content;
  transition: background-color 0.3s ease;
}

#productPreview button:hover {
  background-color: #0056b3;
}

#previewContent {
  margin: 20px 0;
}

.switch input {
  display: none;
}

.switch {
  display: inline-block;
  width: 60px;
  /*=w*/
  height: 30px;
  /*=h*/
  position: relative;
}

.slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 30px;
  box-shadow: 0 0 0 2px red, 0 0 8px red;
  cursor: pointer;
  border: 4px solid transparent;
  overflow: hidden;
  transition: 0.2s;
}

.slider:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: red;
  border-radius: 30px;
  transform: translateX(-30px);
  /*translateX(-(w-h))*/
  transition: 0.2s;
}

input:checked+.slider:before {
  transform: translateX(30px);
  /*translateX(w-h)*/
  background-color: limeGreen;
}

input:checked+.slider {
  box-shadow: 0 0 0 2px limeGreen, 0 0 8px limeGreen;
}

#featureImageSection {
  margin-top: 20px;
}

/* Upload Products Section Ends Here */

/* Sales Order Section Starts Here  */

.addSalesOrder {
  overflow-x: hidden;

  #sameAsBilling {
    display: inline-block;
    width: max-content;
  }

  .rendered-form {
    max-width: 800px;
    margin: 20px auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  h1,
  h3,
  h4 {
    text-align: center;
    color: #333;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .form-group div {
    margin: 10px 0;
  }

  label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #000;
  }

  .form-control {
    width: 90%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
  }

  .formbuilder-required {
    color: red;
  }

  .tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    text-align: center;
    width: 20px;
    color: #000;
    height: 20px;
    border: 2px dotted #000;
    background-color: #ff7300;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
  }

  .tooltip.name {
    background-color: transparent;
    width: max-content;
    height: max-content;
    border: none;
    text-decoration: underline dashed 1px;
    text-underline-offset: 2px;
    text-align: left;
    font-weight: 600;
    margin-bottom: 5px;
    color: #555;
  }

  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 220px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    position: absolute;
    top: -60%;
    left: 155%;
    z-index: 1;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
  }

  .tooltip .tooltiptext.name {
    top: -400%;
    width: max-content;
    text-wrap: wrap;
    left: 0%;
    height: max-content;
    max-width: 300px;
  }

  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

  .tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%;
    /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
  }

  .tooltiptext.name::after {
    content: " ";
    position: absolute;
    top: 100%;
    /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }

  .autocomplete {
    position: relative;
    /* display: inline-block; */
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
  }

  input {
    border: 1px solid transparent;
    background-color: #f1f1f1;
    padding: 10px;
    font-size: 16px;
    width: 100%;
  }

  .autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 70%;
    left: 0;
    right: 0;
    height: max-content;
    max-height: 300px;
    overflow-y: scroll;
    margin: 0;
    width: 90%;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
  }

  .autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
    margin: 0;
    height: max-content;
  }

  .autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
  }

  .autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: #ff7300 !important;
    color: #ffffff;
  }

  .field-cName {
    width: 95%;
  }

  .add-product {
    width: max-content;
    background-color: #e1ecf4;
    border-radius: 3px;
    border: 1px solid #7aa7c7;
    box-shadow: rgba(255, 255, 255, 0.7) 0 1px 0 0 inset;
    box-sizing: border-box;
    color: #39739d;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system, system-ui, "Segoe UI", "Liberation Sans",
      sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.15385;
    margin: 10px 0 20px;
    outline: none;
    padding: 8px 0.8em;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    white-space: nowrap;
  }

  .add-product:hover,
  .add-product:focus {
    background-color: #b3d3ea;
    color: #2c5777;
  }

  .add-product:focus {
    box-shadow: 0 0 0 4px rgba(0, 149, 255, 0.15);
  }

  .add-product:active {
    background-color: #a0c7e4;
    box-shadow: none;
    color: #2c5777;
  }

  .remove-product {
    border-color: #ee5050;
    background-color: #f7bbbb;
    color: #ee5050;
    margin-left: 2px;
  }

  .remove-product:active,
  .remove-product:hover,
  .remove-product:focus {
    background-color: #f28a8a;
    color: #e53030;
  }

  .remove-product:focus {
    box-shadow: 0 0 0 4px rgba(237, 26, 26, 0.15);
  }

  #salesPerson {
    text-transform: capitalize;
  }

  #splitShipmentContainer h4 {
    margin-bottom: 15px;
  }

  .addSalesOrderBtn {
    align-items: center;
    appearance: none;
    background-color: #fff;
    border-radius: 24px;
    border-style: none;
    box-shadow: rgba(0, 0, 0, 0.2) 0 3px 5px -1px,
      rgba(0, 0, 0, 0.14) 0 6px 10px 0, rgba(0, 0, 0, 0.12) 0 1px 18px 0;
    box-sizing: border-box;
    color: #3c4043;
    cursor: pointer;
    display: inline-flex;
    fill: currentcolor;
    font-family: "Google Sans", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    height: 48px;
    justify-content: center;
    letter-spacing: 0.25px;
    line-height: normal;
    max-width: 100%;
    overflow: visible;
    padding: 2px 24px;
    position: relative;
    text-align: center;
    text-transform: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    width: auto;
    will-change: transform, opacity;
    z-index: 0;
    -webkit-transition: background 0.5s;
    -moz-transition: background 0.5s;
    -ms-transition: background 0.5s;
    -o-transition: background 0.5s;
    transition: background 0.5s;
  }

  .addSalesOrderBtn:hover {
    background: #f6f9fe;
    color: #ff7300;
  }

  .addSalesOrderBtn:active {
    box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%),
      0 8px 12px 6px rgb(60 64 67 / 15%);
    outline: none;
    background-color: #0000003d;
    border: 2px solid #ff7300;
  }

  .addSalesOrderBtn:focus {
    outline: none;
  }

  .addSalesOrderBtn:not(:disabled) {
    box-shadow: rgba(60, 64, 67, 0.3) 0 1px 3px 0,
      rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
  }

  .addSalesOrderBtn:not(:disabled):hover {
    box-shadow: rgba(60, 64, 67, 0.3) 0 2px 3px 0,
      rgba(60, 64, 67, 0.15) 0 6px 10px 4px;
  }

  .addSalesOrderBtn:not(:disabled):focus {
    box-shadow: rgba(60, 64, 67, 0.3) 0 1px 3px 0,
      rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
  }

  .addSalesOrderBtn:not(:disabled):active {
    box-shadow: rgba(60, 64, 67, 0.3) 0 4px 4px 0,
      rgba(60, 64, 67, 0.15) 0 8px 12px 6px;
  }

  .addSalesOrderBtn:disabled {
    box-shadow: rgba(60, 64, 67, 0.3) 0 1px 3px 0,
      rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
  }

  :focus {
    outline: none;
  }

  .col-3 {
    position: relative;
    margin: 30px 0;
    width: 90%;
  }

  .effect-19,
  .effect-20,
  .effect-21,
  .effect-23 {
    border: 1px solid #ccc;
    /* padding: 7px 14px; */
    transition: 0.4s;
    background: transparent;
    width: 100%;
  }

  .effect-20~.focus-border:before,
  .effect-20~.focus-border:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #ff7300;
    transition: 0.3s;
  }

  .effect-20~.focus-border:after {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
  }

  .effect-20~.focus-border i:before,
  .effect-20~.focus-border i:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 0;
    background-color: #ff7300;
    transition: 0.4s;
  }

  .effect-20~.focus-border i:after {
    left: auto;
    right: 0;
    top: auto;
    bottom: 0;
  }

  .effect-20:focus~.focus-border:before,
  .effect-20:focus~.focus-border:after,
  .has-content.effect-20~.focus-border:before,
  .has-content.effect-20~.focus-border:after {
    width: 100%;
    transition: 0.3s;
  }

  .effect-20:focus~.focus-border i:before,
  .effect-20:focus~.focus-border i:after,
  .has-content.effect-20~.focus-border i:before,
  .has-content.effect-20~.focus-border i:after {
    height: 100%;
    transition: 0.4s;
  }

  .effect-20~label {
    position: absolute;
    left: 14px;
    width: 100%;
    top: 10px;
    color: #000;
    transition: 0.3s;
    letter-spacing: 0.5px;
  }

  .effect-20:focus~label,
  .has-content.effect-20~label {
    top: -18px;
    left: 0;
    font-size: 12px;
    color: #ff7300;
    transition: 0.3s;
  }

  .toggle-wrapper {
    display: inline-block;
    position: relative;
    border-radius: 3.125em;
    overflow: hidden;
  }

  .toggle-checkbox {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
  }

  .toggle-container {
    display: flex;
    position: relative;
    border-radius: inherit;
    width: 2.5em;
    height: 1.25em;
    background-color: #d1d4dc;
    box-shadow: inset 0.0625em 0 0 #d4d2de, inset -0.0625em 0 0 #d4d2de,
      inset 0.125em 0.25em 0.125em 0.25em #b5b5c3;
    mask-image: radial-gradient(#fff, #000);
    transition: all 0.4s;

    .toggle-wrapper.red>.toggle-checkbox:checked+& {
      background-color: #f5233c;
      box-shadow: inset 0.0625em 0 0 #f5233c, inset -0.0625em 0 0 #f5233c,
        inset 0.125em 0.25em 0.125em 0.25em #d70026;
    }

    .toggle-ball {
      position: relative;
      border-radius: 50%;
      width: 1.25em;
      height: 1.25em;
      background-image: radial-gradient(rgba(#fff, 0.6), rgba(#fff, 0) 16%),
        radial-gradient(#d2d4dc, #babac2);
      background-position: -0.25em -0.25em;
      background-size: auto, calc(100% + 0.25em) calc(100% + 0.25em);
      background-repeat: no-repeat;
      box-shadow: 0.25em 0.25em 0.25em #8d889e,
        inset 0.0625em 0.0625em 0.25em #d1d1d6,
        inset -0.0625em -0.0625em 0.25em #8c869e;
      transition: transform 0.4s, box-shadow 0.4s;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        background-position: -0.25em -0.25em;
        background-size: auto, calc(100% + 0.25em) calc(100% + 0.25em);
        background-repeat: no-repeat;
        opacity: 0;
        transition: opacity 0.4s;

        .toggle-wrapper.red>.toggle-container>& {
          background-image: radial-gradient(rgba(#fff, 0.6), rgba(#fff, 0) 16%),
            radial-gradient(#ff2751, #e0022f);
          box-shadow: 0.25em 0.25em 0.25em #b70033,
            inset 0.0625em 0.0625em 0.25em #fe7d7e,
            inset -0.0625em -0.0625em 0.25em #870002;
        }

        .toggle-wrapper.yellow>.toggle-container>& {
          background-image: radial-gradient(rgba(#fff, 0.6), rgba(#fff, 0) 16%),
            radial-gradient(#f5d05f, #d67f1b);
          box-shadow: 0.25em 0.25em 0.25em #bc6d00,
            inset 0.0625em 0.0625em 0.25em #fff27a,
            inset -0.0625em -0.0625em 0.25em #9f3901;
        }

        .toggle-wrapper.blue>.toggle-container>& {
          background-image: radial-gradient(rgba(#fff, 0.6), rgba(#fff, 0) 16%),
            radial-gradient(#419efe, #4ba2ff);
          box-shadow: 0.25em 0.25em 0.25em #2634d0,
            inset 0.0625em 0.0625em 0.25em #8dd5ff,
            inset -0.0625em -0.0625em 0.25em #1500ac;
        }
      }

      .toggle-wrapper>.toggle-checkbox:checked+.toggle-container>&::after {
        opacity: 1;
      }

      .toggle-checkbox:checked+.toggle-container>& {
        transform: translateX(100%);
      }
    }

    @media (max-width: 768px) {
      .rendered-form {
        padding: 15px;
      }

      label,
      .form-control {
        font-size: 14px;
      }
    }

    @media (max-width: 480px) {
      .rendered-form {
        padding: 10px;
      }

      label,
      .form-control {
        font-size: 12px;
      }
    }
  }

  #orderDetails {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
  }

  .product-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
  }

  .product-table th,
  .product-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    background-color: white;
  }

  .product-table th {
    background-color: #8bbae3;
  }

  .custom-loader {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side, #0000 40%, #000 41%);
    background: linear-gradient(0deg, #766df480 50%, #766df4ff 0) center/4px 100%,
      linear-gradient(90deg, #766df440 50%, #766df4bf 0) center/100% 4px;
    background-repeat: no-repeat;
    animation: s3 1s infinite steps(12);
  }

  .custom-loader::before,
  .custom-loader::after {
    content: "";
    grid-area: 1/1;
    border-radius: 50%;
    background: inherit;
    opacity: 0.915;
    transform: rotate(30deg);
  }

  .custom-loader::after {
    opacity: 0.83;
    transform: rotate(60deg);
  }

  @keyframes s3 {
    100% {
      transform: rotate(1turn);
    }
  }
}

/* UPLOAD INVOICE */
/* styles.css */

/* Container styling */
/* styles.css */

/* Popup dialog styling */
#popupDialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-content {
  background: white;
  padding: 40px;
  border-radius: 8px;
  width: 600px;
  height: 400px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

/* Upload container styling */
.upload-container {
  width: 100%;
  max-width: 500px;
  /* Optional: limit maximum width */
  height: auto;
  /* Allow height to adjust based on content */
  padding: 20px;
  /* Increased padding for more space */
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Heading styling */
.upload-container h1 {
  font-size: 18px;
  /* Slightly larger font size for headings */
  text-align: center;
  color: #333;
  margin-bottom: 20px;
  /* More space below heading */
}

/* Form styling */
.upload-container form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Stretch form items to full width */
  width: 100%;
}

/* Label styling */
.upload-container label {
  font-size: 14px;
  /* Slightly larger font size */
  margin-bottom: 8px;
  /* More space below label */
  font-weight: bold;
  color: #555;
}

/* Select and input styling */
.upload-container select,
.upload-container input[type="file"] {
  width: 100%;
  margin-bottom: 12px;
  /* More space below form elements */
  font-size: 14px;
  /* Slightly larger font size */
  padding: 10px;
  /* Increased padding for better interaction */
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  /* Ensure padding does not overflow */
}

/* Button styling */
.upload-container button {
  width: 100%;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 12px;
  /* Increased padding for a larger button */
  font-size: 14px;
  /* Larger font size */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.upload-container button:hover {
  background-color: #0056b3;
}

.add-invoice-button {
  color: white;
  background-color: #030303;
  border: #030303;
  /* border-radius: 10px; */
  padding: 10px;
}

.show-sales-order-payment-verify {
  color: white;
  background-color: #28a745;
  padding: 10px;
  border: #030303;
  transition: background-color 0.3s ease, box-shadow 0.2s ease;
}

.show-sales-order-payment-verify:hover {
  background-color: #007bff;
}

.show-sales-order-payment-verify:disabled {
  cursor: not-allowed;
  background-color: grey;
}

.popup-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-content {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  position: relative;
  width: 90%;
  max-width: 600px;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #f44336;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
}

.close-button:hover {
  background: #d32f2f;
}

.number-box {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 2px solid #007bff;
  border-radius: 50%;
  background-color: #fff;
  font-size: 16px;
  font-weight: bold;
  color: #007bff;
  margin-right: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s, color 0.3s;
}

.number-box:hover {
  background-color: #007bff;
  color: #fff;
}

/* SALES ORDER PAGINATION STYLE STARTS HERE */
.pagination ul {
  display: flex;
  background: #fff;
  padding: 8px;
  border-radius: 50px;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: max-content;
}

.pagination ul li {
  color: #20b2aa;
  list-style: none;
  line-height: 45px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
}

.pagination ul li.numb {
  list-style: none;
  height: 45px;
  width: 45px;
  margin: 0 3px;
  line-height: 45px;
  border-radius: 50%;
}

.pagination ul li.numb.first {
  margin: 0px 3px 0 -5px;
}

.pagination ul li.numb.last {
  margin: 0px -5px 0 3px;
}

.pagination ul li.dots {
  font-size: 22px;
  cursor: default;
}

.pagination ul li.btn {
  padding: 0 2%;
  border-radius: 50px;
  white-space: nowrap;
}

.pagination li.active,
.pagination ul li.numb:hover,
.pagination ul li:first-child:hover,
.pagination ul li:last-child:hover {
  color: #fff;
  background: #20b2aa;
}

/* SALES ORDER PAGINATION STYLE ENDS HERE */
/* Sales Order Section Ends Here  */

/* Sales Table Styling Starts Here */

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.showSalesOrder {
  #top-sales-container {
    position: fixed;
    top: 0%;
    padding-top: 3px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    z-index: 999;
  }

  #news-ticker {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    color: #fff;
    width: 100%;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    font-family: "Montserrat", sans-serif;
    text-transform: capitalize;
    text-decoration: underline;
  }

  #news-ticker:hover {
    animation-play-state: paused;
  }

  #ticker-content {
    background-color: #000;
  }

  #ticker-content {
    display: inline-block;
  }

  #salespersonFilter,
  .statusFilter-mobile,
  #salesSourceFilter {
    padding: 8px 8px 9px 8px;
    border-radius: 9px;
    color: black;
    font-weight: bold;
    background-color: rgb(240, 255, 255);
    border-color: rgb(178, 243, 243);
  }


  .reactions-container {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    background: white;
    padding: 3px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .table-row:hover .reactions-container {
    display: flex;
    justify-content: space-around;
  }

  .responsive-table.reduced {
    .reactions-container {
      top: 0;
      right: 0;
    }
  }

  .emoji-picker {
    display: flex;
    gap: 5px;
    cursor: pointer;
  }

  .emoji {
    font-size: 16px;
    transition: transform 0.5s ease;
    -webkit-transition: transform 0.5s ease;
    -moz-transition: transform 0.5s ease;
    -ms-transition: transform 0.5s ease;
    -o-transition: transform 0.5s ease;
  }

  .emoji:hover {
    transform: scale(1.3);
  }

  .reaction-summary {
    position: absolute;
    bottom: -10px;
    right: 5px;
    background: #f0f0f0;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 0.9em;
    cursor: pointer;
  }

  .reaction-list {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    background: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
    -webkit-transform: translate(50%, 50%);
    -moz-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    -o-transform: translate(50%, 50%);
  }

  #orderDetails {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
  }

  #close-details {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 12px;
    cursor: pointer;
    color: #888;
  }

  #close-details:hover {
    color: #555;
  }

  .product-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
  }

  .product-table th,
  .product-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    background-color: white;
  }

  .product-table th {
    background-color: #2d3748;
    color: white;
  }

  .product-table td.emptyCell {
    background-color: transparent;
    border: none;
  }

  .salesTable {
    /* max-width: 1000px; */
    /* width: 100vw; */
    /* min-width: 100%; */
    /* margin-left: auto; */
    /* margin-right: auto; */
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
  }

  h3 {
    font-size: 21px;
    /* margin: 20px 0; */
    text-align: center;

    small {
      font-size: 0.5em;
    }
  }

  .cPersonal {
    flex: 1 1 35%;
    min-width: 250px;
  }

  .orderDetails {
    display: none;
    width: 0;
    overflow: hidden;
    position: sticky;
    top: 0;
    height: max-content;
    flex-basis: 0;
    padding: 10px;
    border-left: 1px solid #ccc;
    background: #e8e8fa;
    -webkit-transition: 1.5s;
    -moz-transition: 1.5s;
    -ms-transition: 1.5s;
    -o-transition: 1.5s;
    transition: 1.5s;
    padding: 3%;
    border-radius: 5px;
  }

  .orderDetails.visible {
    display: block;
    left: 100%;
    height: 90vh;
    flex-basis: 65%;
    overflow: scroll;
  }

  .links-container {
    margin: 10px 0;
    padding: 2%;
  }

  .links-container a {
    color: #1a0dab;
    text-decoration: none;
  }

  .links-container a:hover {
    text-decoration: underline;
  }

  .responsive-table.reduced {
    flex-basis: 35%;
  }

  .responsive-table {
    /* width: 100%; */

    width: 100%;

    li {
      border-radius: 3px;

      padding: 25px 10px;

      display: flex;

      justify-content: space-between;

      margin-bottom: 10px;

      text-align: center;

      /* position: absolute; */

      /* position: absolute; */
    }
  }

  .salestableHeader {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 15px;

    .Card {
      padding: 1px;

      background: linear-gradient(-67deg,
          rgba(#c8d8e7, 0.7),
          rgba(255, 255, 255, 0.8));

      overflow: hidden;

      box-shadow: -2px -2px 6px rgba(#fff, 0.6), 2px 2px 12px #c8d8e7;

      width: max-content;

      -webkit-border-radius: 10px;

      -moz-border-radius: 10px;

      -ms-border-radius: 10px;

      -o-border-radius: 10px;

      border-radius: 10px;
    }

    .cardLeft {
      display: flex;
      margin-bottom: 10px;
      align-items: center;

      align-content: center;
    }

    .dateInput {
      width: max-content;

      margin: 0;

      height: 100%;

      padding: 0px 15px;
    }

    .date-filter {
      position: relative;
    }

    .has-date {
      position: absolute;

      cursor: pointer;

      top: 50%;

      right: 0;

      -webkit-transform: translate(-50%, -50%);

      -moz-transform: translate(-50%, -50%);

      -ms-transform: translate(-50%, -50%);

      -o-transform: translate(-50%, -50%);

      transform: translate(-50%, -50%);
    }

    #branch-filter-dropdown {
      width: max-content;

      background: transparent;

      border: none;
    }

    .CardInner {
      padding: 5px;

      background-color: #e2e9f4;

      border-radius: 10px;
    }

    .search-type {
      border: none;
      background: transparent;
      color: #657789;
      font-size: 16px;
      outline: none;
      cursor: pointer;
    }

    .container {
      display: flex;
    }

    .Icon {
      min-width: 46px;

      display: flex;

      align-items: center;

      justify-content: center;

      border-radius: 10px;

      margin-right: 12px;

      box-shadow: -2px -2px 6px rgba(#fff, 0.6), 2px 2px 12px #c8d8e7;

      svg {
        transform: translate(-1px, -1px);
      }
    }

    label {
      display: block;

      color: #3c4b66;

      margin-bottom: 12px;

      background: linear-gradient(45deg, rgba(#6b7b8f, 1), #3c4b66);

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;
    }

    .InputContainer {
      width: 100%;
    }

    input {
      background-color: #e3edf7;

      padding: 10px 20px;

      border: none;

      display: block;

      font-family: "Orbitron", sans-serif;

      font-weight: 600;

      color: #a9b8c9;

      -webkit-appearance: none;

      transition: all 240ms ease-out;

      width: 100%;

      input::placeholder {
        color: #6d7f8f;
      }

      input:focus {
        outline: none;

        color: #6d7f8f;

        background-color: lighten(#e3edf7, 3%);
      }
    }

    .InputContainer {
      --top-shadow: inset 1px 1px 3px #c5d4e3, inset 2px 2px 6px #c5d4e3;

      --bottom-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.7);

      position: relative;

      border-radius: 10px;

      overflow: hidden;

      .InputContainer::before,
      .InputContainer::after {
        left: 0;

        top: 0;

        display: block;

        content: "";

        pointer-events: none;

        width: 100%;

        height: 100%;

        position: absolute;
      }

      .InputContainer::before {
        box-shadow: var(--bottom-shadow);
      }

      .InputContainer::after {
        box-shadow: var(--top-shadow);
      }
    }

    .salesOrderFilter {
      display: flex;

      justify-content: space-between;

      gap: 10px;
    }
  }

  .InputContainer {
    --top-shadow: inset 1px 1px 3px #c5d4e3, inset 2px 2px 6px #c5d4e3;
    --bottom-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.7);

    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: white;

    /* Optional: padding and border */
    border: 1px solid #ccc;
  }

  .InputContainer::before,
  .InputContainer::after {
    left: 0;
    top: 0;
    display: block;
    content: "";
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
  }

  .InputContainer::before {
    box-shadow: var(--bottom-shadow);
  }

  .InputContainer::after {
    box-shadow: var(--top-shadow);
  }

  .InputContainer input {
    flex: 1;
    padding: 10px;
    border: none;
    outline: none;
    z-index: 1;
    /* font-size: 1rem; */
    background: transparent;
  }

  .SearchButton {
    padding: 0 16px;
    background-color: #f0aa82;
    color: white;
    border: none;
    cursor: pointer;
    z-index: 1;
    height: 100%;
    font-size: 1rem;
    transition: background 0.3s;
  }

  .SearchButton:hover {
    background-color: #ff5e00;
  }

  /* .status {
    background-color: #fff;
    border-radius: 0.5rem;
    box-sizing: border-box;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    padding: 0.75rem 1rem;
    text-align: center;
    text-decoration-thickness: auto;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
  } */

  .tableStatus {
    background-color: #fff;
    width: max-content;
    padding: 5px;
    border-radius: 0.5rem;
    box-sizing: border-box;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    text-decoration-thickness: auto;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    position: relative;
  }

  .dropdownStatus {
    background-color: #fff;
    width: max-content;
    padding: 5px;
    border-radius: 0.5rem;
    box-sizing: border-box;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    text-decoration-thickness: auto;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    position: relative;
  }

  .tableStatus::after {
    content: "»";
    position: absolute;
    opacity: 0;
    top: 55%;
    left: 150%;
    transition: 0.5s;
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    -moz-transform: translate(-50%, -50%) rotate(90deg);
    -ms-transform: translate(-50%, -50%) rotate(90deg);
    -o-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .tableStatus:hover::after {
    opacity: 1;
    left: 90%;
  }

  .tableStatus:hover {
    padding-right: 20px;
  }

  .pendingBtn {
    border: 1px solid red;
    color: red;
    text-decoration: none red solid;
  }

  .pendingBtn:hover,
  .pendingBtn.active {
    background-color: red;
    color: #fff;
  }

  .rtdBtn {
    border: 1px solid #ffc107;
    color: #ffc107;
    text-decoration: none #ffc107 solid;
  }

  .rtdBtn:hover,
  .rtdBtn.active {
    background-color: #ffc107;
    color: #fff;
  }

  .shippedBtn {
    border: 1px solid rgb(9, 67, 225);
    color: blue;
    text-decoration: none rgb(12, 42, 207) solid;
  }

  .shippedBtn:hover,
  .shippedBtn.active {
    background-color: rgb(9, 67, 225);
    color: #fff;
  }

  .deliveredBtn {
    border: 1px solid green;
    color: green;
    text-decoration: none green solid;
  }

  .deliveredBtn:hover,
  .deliveredBtn.active {
    background-color: rgb(0, 128, 0);
    color: #fff;
  }

  .partialBtn {
    border: 1px solid cyan;
    color: rgb(24, 202, 202);
    text-decoration: none cyan solid;
  }

  .partialBtn:hover,
  .partialBtn.active {
    background-color: rgb(24, 202, 202);
    color: #fff;
  }

  .bookedBtn {
    border: 1px solid #00796B;
    color: #00796B;
    text-decoration: none;
  }

  .bookedBtn:hover,
  .bookedBtn.active {
    background-color: #00796B;
    color: #fff;
  }



  .loading-bar-container {
    width: 50px;
    /* Adjust width as needed */
    height: 10px;
    /* Adjust height as needed */
    border: 1px solid #ccc;
    background-color: #f3f3f3;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin: auto;
  }

  .loading-bar {
    height: 100%;
    width: 0%;
    background-color: #4caf50;
    /* Adjust the color as needed */
    transition: width 0.3s ease;
  }

  .table-header {
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: #95a5a6;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .table-row {
    background-color: #ffffff;
    border: 1px solid #00000024;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    position: relative;
  }

  .table-row.invoiced {
    border: 1px solid green;
  }

  .strikethough {
    position: absolute;
    width: 100%;
    height: 5px;
    background-color: red;
    top: 0%;
    left: 0%;
    transform: rotate(3.5deg);
    transform-origin: top left;
    -webkit-transform: rotate(3.5deg);
    -moz-transform: rotate(3.5deg);
    -ms-transform: rotate(3.5deg);
    -o-transform: rotate(3.5deg);
  }

  .responsive-table.reduced .strikethough {
    width: 100%;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
  }

  /* HTML: <div class="ribbon">Your text content</div> */
  .ribbon-2 {
    font-size: 18px;
    color: #fff;
  }

  .ribbon-2 {
    position: absolute;
    bottom: 1px;
    left: 1px;
    height: 26px;
    width: 26px;
  }

  .table-row:hover {
    background-color: #00000033;
  }

  .col {
    text-align: center;
  }

  .col-1 {
    flex-basis: 3%;
  }

  .col-2 {
    flex-basis: 7%;
  }

  .col-3 {
    flex-basis: 10%;
  }

  .col-4 {
    flex-basis: 5%;
  }

  .col-5 {
    flex-basis: 20%;
  }

  .col-6 {
    flex-basis: 20%;
  }

  .col-7 {
    flex-basis: 5%;
  }

  .col-8 {
    flex-basis: 8%;
  }

  .col-9 {
    flex-basis: 10%;
  }

  .col-10 {
    flex-basis: 7%;
    text-align: center;
  }

  .col-11 {
    flex-basis: 10%;
  }

  .select-style {
    background: transparent;
    text-align: center;
    font-weight: bold;
    padding: 4px 2px;
    border-radius: 12px;
    margin-top: -8px;
    border-color: black;
    border-color: #515151;
  }

  .select-style option {
    padding: 10px;
    margin: 5px 0;
  }

  .ribbon {
    color: #fff;
  }

  .ribbon {
    position: absolute;
    top: 1px;
    left: 1px;
  }

  #dialog-remark {
    width: 100%;
  }

  .inventory-remarks {
    margin-top: 2px;
    color: red;
  }

  .loader-sales-pagination-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .order-info-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 18px 22px;
    margin: 18px auto 0;
    width: 100%;
    font-family: "Inter", "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .order-info-container::before {
    content: "Order Summary";
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 4px;
    white-space: nowrap;
  }

  .other-informations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px 20px;
    margin-bottom: 12px;
    overflow: hidden;
  }

  .other-informations .order-detail {
    display: flex;
    /* justify-content: space-between; */
    align-items: baseline;
    font-size: 13px;
    padding: 2px 0;
    border-bottom: 1px dashed #f2f2f2;
    min-width: 0;
  }

  .other-informations .label {
    font-weight: 600;
    color: #374151;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .other-informations .value {
    font-weight: 500;
    text-align: right;
    margin-left: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .status {
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    flex-shrink: 0;
  }

  .delivery-method-value {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border: 1px solid #2d3748;
    color: #2d3748;
    text-decoration: none #2d3748 solid;
  }

  .delivery-method-value:hover {
    color: white;
    background: #2d3748;
  }

  .status::before {
    content: "";
    height: 6px;
    border-radius: 10%;
    display: inline-block;
  }

  .status.pending {
    background: #fff2f2;
    color: #dc2626;
  }

  .status.pending::before {
    background: #ef4444;
  }

  .status.paid {
    background: #e8f1ff;
    color: #1d4ed8;
  }

  .status.paid::before {
    background: #3b82f6;
  }

  .status.rtd {
    background: #ecfdf5;
    color: #047857;
  }

  .status.rtd::before {
    background: #10b981;
  }

  .item-includes,
  .order-remarks,
  .inventory-remarks {
    font-size: 13px;
    line-height: 1.4;
    margin: 6px 0;
    padding: 6px 10px;
    border-radius: 6px;
    box-sizing: border-box;
  }

  .item-includes {
    background: #f9fafb;
    border-left: 3px solid #9ca3af;
    color: #4b5563;
  }

  .order-remarks {
    background: #fef2f2;
    border-left: 3px solid #dc2626;
    color: #991b1b;
  }

  .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }

  .action-buttons button {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border: 1px solid #2d3748;
    background-color: #fff;
    color: #2d3748;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
  }

  .action-buttons button:hover {
    background-color: #2d3748;
    color: #fff;
  }

  .verify-payment {
    background-color: #28a745;
  }

  button.verify-payment[disabled] {
    background-color: #2d3748;
    color: #fff;
    border-color: #e5e7eb;
    cursor: not-allowed;
    opacity: .3;
  }

  @media (max-width: 900px) {
    .order-info-container {
      padding: 14px 16px;
    }
  }

  @media (max-width: 600px) {
    .other-informations {
      grid-template-columns: 1fr;
    }

    .action-buttons {
      flex-direction: column;
    }

    .other-informations .order-detail {
      justify-content: space-between;
    }

    .action-buttons button {
      width: 100%;
      background-color: #2d3748;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .orderDetails::-webkit-scrollbar {
    width: 5px;
  }

  .orderDetails::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
  }

  .orderDetails::-webkit-scrollbar-thumb {
    background: #2d37489c;
    border-radius: 8px;
  }

  .orderDetails::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #666, #333);
  }

  .orderDetails {
    scroll-behavior: smooth;
  }

  .order-card {
    background: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 10px;
  }

  .orderH2 {
    text-align: center;
    font-size: 28px;
    color: #2b2d42;
    border-bottom: 1px solid #2d37488c;
    padding-bottom: 8px;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
  }

  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
  }

  .order-header div p {
    margin: 4px 0;
    font-size: 15px;
    color: #444;
  }

  .date-detail {
    text-align: right;
    font-weight: 500;
    color: #2d3748;
  }

  .customer-informations {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-top: 20px;
  }

  .customer-informations>div {
    flex: 1 1 30%;
    min-width: 250px;
  }


  .cPersonal .order-detail {
    padding: 2px 0;
    margin-bottom: 5px;
    font-size: 14px;
    color: #2b2d42;
  }

  .order-detail.name {
    font-weight: 600;
    font-size: 16px;
    color: #111;
  }

  .order-detail.payment {
    color: #266ce3;
  }

  .order-detail.gst {
    color: #266ce3;
  }

  .order-detail.address {
    border-left: 1px solid #2d37488c;
    padding-left: 15px;
    color: #333;
    font-size: 14px;
    line-height: 1.6;
    text-align: right;
  }

  .order-detail.address h4 {
    margin-bottom: 6px;
    color: #266ce3;
    font-weight: 600;
  }

  @media (max-width: 768px) {
    .order-header {
      flex-direction: column;
    }

    .order-header div:nth-child(2) {
      text-align: left;
      margin-top: 10px;
    }

    .customer-informations {
      flex-direction: column;
    }

    .customer-informations>div {
      width: 100%;
    }
  }

  .address-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: auto;
  }


  .show_sales_order_paid_toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
  }


  .show_sales_order_paid_toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
  }


  .show_sales_order_paid_toggle input {
    opacity: 0;
    width: 0;
    height: 0;
  }


  .show_sales_order_paid_toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 26px;
  }


  .show_sales_order_paid_toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
  }

  .show_sales_order_paid_toggle input:checked+.show_sales_order_paid_toggle-slider {
    background-color: #4caf50;
  }

  .show_sales_order_paid_toggle input:checked+.show_sales_order_paid_toggle-slider:before {
    transform: translateX(24px);
  }

  .invoice-details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
    align-items: center;
    font-family: "Inter", sans-serif;
    font-size: 14px;
  }

  .invoice-content {
    color: #0066cc;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: color 0.2s ease;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .invoice-content::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 1.5px;
    background-color: #0066cc;
    transition: width 0.25s ease;
  }

  .invoice-content:hover {
    color: #004a99;
  }

  .invoice-content:hover::after {
    width: 100%;
  }

  .links-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
    margin-top: 8px;
  }

  .links-container a {
    color: #444;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: color 0.2s ease;
  }

  .links-container a:hover {
    color: #000;
  }

  .links-container a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 1px;
    background-color: currentColor;
    transition: width 0.25s ease;
  }

  .links-container a:hover::after {
    width: 100%;
  }

  @media (max-width: 600px) {
    .invoice-details {
      font-size: 13px;
      gap: 10px 14px;
    }
  }

}

.ribbon {
  font-size: 18px;
  color: #fff;
  width: 26px;
  height: 26px;
}

.ribbon {
  position: absolute;
  top: 1px;
  left: 1px;
  /* the main color  */
}

.responsive-table.reduced {
  .table-header {
    display: none;
  }

  .table-row {}

  li {
    display: block;
  }

  .col {
    flex-basis: 100%;
    text-align: center;
  }

  .col {
    display: flex;
    padding: 10px 0;

    &:before {
      color: #6c7a89;
      padding-right: 10px;
      content: attr(data-label);
      flex-basis: 50%;
      text-align: left;
    }

    p {
      flex-basis: 50%;
      text-align: right;
    }
  }
}

.payverify-container {
  margin: 10px 0;

  #drop-area {
    border: 2px dashed #ccc;
    border-radius: 20px;
    width: 80%;
    max-width: 600px;
    margin: 15px auto;
    padding: 20px;
    text-align: center;
    font-family: sans-serif;
    color: #333;
  }

  input {
    font-size: 14px;
    padding: 7px 4px;
    margin: 5px 0;
  }

  #drop-area.highlight {
    border-color: #ff7300;
  }

  .my-form {
    margin-bottom: 10px;
  }

  #gallery {
    margin-top: 10px;
  }

  .gallery-image {
    max-width: 200px;
    margin: 10px;
  }
}

@media only screen and (max-width: 480px) {
  .showSalesOrder {
    overflow-x: hidden;

    #news-ticker {
      min-width: max-content;
    }
  }

  .cardLeft {
    display: flex;
    gap: 10px;
    flex-direction: column;
  }

  .date-filter {
    text-align: center;
  }

  .showSalesOrder .salestableHeader .dateInput {
    width: 100%;
    padding: 15px 0;
    text-align: center;
  }

  .showSalesOrder .salesTable {
    /* padding: 0; */
  }

  .salestableHeader {
    flex-direction: column;
    margin-bottom: 20px;
  }

  .salesOrderFilter {
    flex-wrap: wrap;
  }

  .products-detail {
    overflow: auto;
  }

  .product-table {
    width: 150%;
    overflow-x: auto;
  }

  .responsive-table.reduced {
    display: none;
  }

  .showSalesOrder .orderDetails.visible {
    flex-basis: 100%;
    height: max-content;
  }

  .table-header {
    display: none !important;
  }

  .table-row {
    flex-direction: column;
  }

  li {
    display: block;
  }

  .col {
    flex-basis: 100%;
    text-align: center;
  }

  .col {
    display: flex;
    padding: 10px 0;

    &:before {
      color: #6c7a89;
      padding-right: 10px;
      content: attr(data-label);
      flex-basis: 50%;
      text-align: left;
    }

    p {
      flex-basis: 50%;
      text-align: right;
    }
  }
}

.notification-label {
  /* margin-top: 20px; */
  font-size: 13px;
  /* margin-left: 14px; */
  height: 20px;
  background-color: rgb(250, 92, 89);
  color: #ffffff;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 5px;
  clip-path: polygon(100% calc(100% - var(--f)),
      100% 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),
      var(--f) calc(100% - var(--f)),
      0 100%,
      0 calc(100% - var(--f)),
      999px calc(100% - var(--f) - 999px),
      calc(100% - 999px) calc(100% - var(--f) - 999px));
}

.notification-label:hover {
  background-color: #f39c12;
}

.notification-label1 {
  height: 20px;
  margin-top: 20px;
  font-size: 13px;
  margin-left: 14px;
  background-color: rgb(250, 92, 89);
  color: #ffffff;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 5px;
  clip-path: polygon(100% calc(100% - var(--f)),
      100% 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),
      var(--f) calc(100% - var(--f)),
      0 100%,
      0 calc(100% - var(--f)),
      999px calc(100% - var(--f) - 999px),
      calc(100% - 999px) calc(100% - var(--f) - 999px));
}

.notification-label1:hover {
  background-color: #f39c12;
}

/* Styles for date filter */
.date-filter {
  /* display: flex; */
  /* gap: 10px; */
  /* align-items: center; */
  align-content: center;
  align-self: stretch;
}

/* Hide date inputs initially */
/* input[type="date"] {
  display: none;
} */

/* Style for filter button */
input[type="button"] {
  padding: 8px 12px;
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
}

/* Style for date picker popup */
input[type="date"].open {
  display: inline-block;
  /* Show date input */
}

.arrow {
  cursor: pointer;
}

.image-calender {
  width: 80%;
}

/* Sales Table Styling Ends Here */

/* Purchase Section Styling Starts Here */

.purchase {
  background-color: #f4f4f4;
  margin: 0;
  padding: 20px;

  .container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .header h1 {
    margin: 0;
    color: #333;
  }

  .row {
    width: 85px;
  }

  .toggle-button-cover {
    display: table-cell;
    position: relative;
    /* width: 10px; */
    height: 80px;
    box-sizing: border-box;
  }

  .button-cover {
    height: 80px;
    /* margin: 20px; */
    background-color: #fff;
    box-shadow: 0 10px 20px -8px #c5d6d6;
    border-radius: 4px;
  }

  .button-cover,
  .knobs,
  .layer {
    position: absolute;
    top: 0;
    right: 100%;
    bottom: 0;
    left: 0;
  }

  .button {
    position: relative;
    top: 50%;
    width: 74px;
    height: 36px;
    margin: -20px auto 0 auto;
    overflow: hidden;
  }

  .checkbox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
  }

  .knobs {
    z-index: 2;
  }

  .layer {
    width: 100%;
    background-color: #ebf7fc;
    transition: 0.3s ease all;
    z-index: 1;
  }

  #button-10 .knobs:before,
  #button-10 .knobs:after,
  #button-10 .knobs span {
    position: absolute;
    top: 4px;
    width: 20px;
    height: 10px;
    font-size: 10px;
    font-weight: bold;
    text-align: left;
    line-height: 1;
    padding: 9px 4px;
    border-radius: 2px;
    transition: 0.3s ease all;
  }

  #button-10 .knobs:before {
    content: "";
    left: 4px;
    background-color: #03a9f4;
  }

  #button-10 .knobs:after {
    content: "List";
    right: 4px;
    color: #4e4e4e;
  }

  #button-10 .knobs span {
    display: inline-block;
    left: 0px;
    color: #fff;
    z-index: 1;
    font-size: 9px;
  }

  #button-10 .checkbox:checked+.knobs span {
    color: #4e4e4e;
  }

  #button-10 .checkbox:checked+.knobs:before {
    left: 42px;
    background-color: #f44336;
  }

  #button-10 .checkbox:checked+.knobs:after {
    color: #fff;
  }

  #button-10 .checkbox:checked~.layer {
    background-color: #fcebeb;
  }

  .button {
    /* padding: 10px 20px; */
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .button:hover {
    background-color: #0056b3;
  }

  .table-container {
    overflow-x: auto;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }

  th,
  td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
    text-align: left;
  }

  th {
    background-color: #007bff;
    color: white;
  }

  tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  tr.priority {
    background-color: rgba(255, 0, 0, 0.5);
  }

  #listView th {
    background-color: #f44336;
  }

  .hidden {
    display: none;
  }

  @media only screen and (max-width: 480px) {
    .container {
      padding: 10px;
    }

    .header {
      flex-direction: column;
      gap: 10px;
    }

    .header h1 {
      font-size: 14px;
    }
  }
}

/* Purchase Section Styling Ends Here */

/* Product Meta Tags Section Styling Starts Here */

.productMetaTags {

  /* Core styles/functionality */
  .tab {
    position: relative;
  }

  .tab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }

  .tab__content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.35s;
    margin: 10px;
  }

  .tab input:checked~.tab__content {
    max-height: max-content;
  }

  /* Visual styles */
  .accordion {
    border: 1px solid;
    border-radius: 0.5rem;
    overflow: hidden;
  }

  .tab__label,
  .tab__close {
    display: flex;
    color: #000;
    background: #eee;
    cursor: pointer;
  }

  .tab__label {
    justify-content: space-between;
    padding: 1rem;
  }

  .header {
    display: flex;
    justify-content: space-between;
  }

  .toggle-for-isActive {
    display: flex;
    gap: 3px;
  }

  .tab__label::after {
    content: "\276F";
    width: 1em;
    height: 1em;
    text-align: center;
    transform: rotate(90deg);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
  }

  .tab input:checked+.tab__label::after {
    transform: rotate(270deg);
  }

  .tab__content p {
    margin: 0;
    padding: 1rem;
  }

  .tab__close {
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
  }

  /* Arrow animation */
  .tab input:not(:checked)+.tab__label:hover::after {
    animation: bounce 0.5s infinite;
  }

  textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    font-family: inherit;
  }

  #descriptionPoints {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
  }

  .container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .search-bar {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .search-bar input {
    width: 300px;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  #search-results {
    position: absolute;
    top: 40px;
    width: 300px;
    height: max-content;
    max-height: 300px;
    overflow-y: scroll;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }

  #search-results.hidden {
    display: none;
  }

  #search-results div {
    padding: 10px;
    cursor: pointer;
  }

  #search-results div:hover {
    background-color: #f0f0f0;
  }

  #product-details.hidden {
    display: none;
  }

  #product-details p {
    font-size: 16px;
    margin: 10px 0;
  }

  #meta-form {
    display: flex;
    flex-direction: column;
  }

  #meta-form label {
    margin-top: 10px;
    font-weight: bold;
  }

  #meta-form input,
  #meta-form textarea {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  #meta-form button {
    padding: 10px 20px;
    margin-top: 20px;
    border: none;
    background-color: #28a745;
    color: #ffffff;
    border-radius: 5px;
    cursor: pointer;
  }

  #meta-form button:hover {
    background-color: #218838;
  }

  .product-submit {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #63a3e7;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .product-submit:hover {
    background-color: #047af8;
  }

  .toggle-wrapper {
    display: inline-block;
    position: relative;
    border-radius: 3.125em;
    overflow: hidden;
  }

  .toggle-checkbox {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
  }

  .toggle-container {
    display: flex;
    position: relative;
    border-radius: inherit;
    width: 2.5em;
    height: 1.25em;
    background-color: #d1d4dc;
    box-shadow: inset 0.0625em 0 0 #d4d2de, inset -0.0625em 0 0 #d4d2de,
      inset 0.125em 0.25em 0.125em 0.25em #b5b5c3;
    mask-image: radial-gradient(#fff, #000);
    transition: all 0.4s;

    .toggle-wrapper.red>.toggle-checkbox:checked+& {
      background-color: #f5233c;
      box-shadow: inset 0.0625em 0 0 #f5233c, inset -0.0625em 0 0 #f5233c,
        inset 0.125em 0.25em 0.125em 0.25em #d70026;
    }

    .toggle-ball {
      position: relative;
      border-radius: 50%;
      width: 1.25em;
      height: 1.25em;
      background-image: radial-gradient(rgba(#fff, 0.6), rgba(#fff, 0) 16%),
        radial-gradient(#d2d4dc, #babac2);
      background-position: -0.25em -0.25em;
      background-size: auto, calc(100% + 0.25em) calc(100% + 0.25em);
      background-repeat: no-repeat;
      box-shadow: 0.25em 0.25em 0.25em #8d889e,
        inset 0.0625em 0.0625em 0.25em #d1d1d6,
        inset -0.0625em -0.0625em 0.25em #8c869e;
      transition: transform 0.4s, box-shadow 0.4s;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        background-position: -0.25em -0.25em;
        background-size: auto, calc(100% + 0.25em) calc(100% + 0.25em);
        background-repeat: no-repeat;
        opacity: 0;
        transition: opacity 0.4s;

        .toggle-wrapper.red>.toggle-container>& {
          background-image: radial-gradient(rgba(#fff, 0.6), rgba(#fff, 0) 16%),
            radial-gradient(#ff2751, #e0022f);
          box-shadow: 0.25em 0.25em 0.25em #b70033,
            inset 0.0625em 0.0625em 0.25em #fe7d7e,
            inset -0.0625em -0.0625em 0.25em #870002;
        }

        .toggle-wrapper.yellow>.toggle-container>& {
          background-image: radial-gradient(rgba(#fff, 0.6), rgba(#fff, 0) 16%),
            radial-gradient(#f5d05f, #d67f1b);
          box-shadow: 0.25em 0.25em 0.25em #bc6d00,
            inset 0.0625em 0.0625em 0.25em #fff27a,
            inset -0.0625em -0.0625em 0.25em #9f3901;
        }

        .toggle-wrapper.blue>.toggle-container>& {
          background-image: radial-gradient(rgba(#fff, 0.6), rgba(#fff, 0) 16%),
            radial-gradient(#419efe, #4ba2ff);
          box-shadow: 0.25em 0.25em 0.25em #2634d0,
            inset 0.0625em 0.0625em 0.25em #8dd5ff,
            inset -0.0625em -0.0625em 0.25em #1500ac;
        }
      }

      .toggle-wrapper>.toggle-checkbox:checked+.toggle-container>&::after {
        opacity: 1;
      }

      .toggle-checkbox:checked+.toggle-container>& {
        transform: translateX(100%);
      }
    }

    @media (max-width: 768px) {
      .rendered-form {
        padding: 15px;
      }

      label,
      .form-control {
        font-size: 14px;
      }
    }

    @media (max-width: 480px) {
      .rendered-form {
        padding: 10px;
      }

      label,
      .form-control {
        font-size: 12px;
      }
    }
  }
}

@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(0.25rem);
  }

  75% {
    transform: rotate(90deg) translate(-0.25rem);
    -webkit-transform: rotate(90deg) translate(-0.25rem);
    -moz-transform: rotate(90deg) translate(-0.25rem);
    -ms-transform: rotate(90deg) translate(-0.25rem);
    -o-transform: rotate(90deg) translate(-0.25rem);
  }
}

/* Product Meta Tags Section Styling Ends Here */

/* Brand Meta Tags Section Styling Starts Here */

.brandMetaTags {
  background-color: #f8f9fa;

  .container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  h3,
  h4 {
    color: #333;
    text-align: center;
  }

  .search-bar {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .search-bar input {
    width: 300px;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  #brand-search-results {
    position: absolute;
    top: 40px;
    width: 300px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }

  #brand-search-results.hidden {
    display: none;
  }

  #brand-search-results div {
    padding: 10px;
    cursor: pointer;
  }

  #brand-search-results div:hover {
    background-color: #f0f0f0;
  }

  #brand-details.hidden {
    display: none;
  }

  #brand-details p {
    font-size: 16px;
    margin: 10px 0;
  }

  #brand-meta-form {
    display: flex;
    flex-direction: column;
  }

  #brand-meta-form label {
    margin-top: 10px;
    font-weight: bold;
  }

  #brand-meta-form input,
  #brand-meta-form textarea {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  #brand-meta-form button {
    padding: 10px 20px;
    margin-top: 20px;
    border: none;
    background-color: #28a745;
    color: #ffffff;
    border-radius: 5px;
    cursor: pointer;
  }

  #brand-meta-form button:hover {
    background-color: #218838;
  }
}

/* Brand Meta Tags Section Styling Ends Here */

/* Confirmation Dialog Styling Starts Here */
.dialogue {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  text-align: center;
  z-index: 1000;
  overflow-y: auto;
  height: 80vh;
}

.dialgoue_heading {
  font-size: 20px;
  font-weight: 800;
  text-decoration: underline;
  display: block;
  margin-bottom: 20px;
  text-decoration-color: red;
}

.dialogue_text {
  margin-bottom: 20px;
  font-size: 16px;
}

.dialogue-button {
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  height: max-content;
  transition: background-color 0.3s ease;
}

.dialogue-button:hover {
  background-color: #0056b3;
}

#highlightDisplay {
  font-weight: 700;
  text-decoration: underline;
  font-weight: 20px;
}

/* Confirmation Dialog Styling Ends Here */

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }

  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }

  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }

  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }

  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }

  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }

  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }

  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }

  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }

  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }

  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}

.edit-sales-order-button {
  vertical-align: middle;
  -webkit-user-select: none;
  touch-action: manipulation;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #2d3748;
  background-color: #2d3748;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.edit-sales-order-button:hover,
.edit-sales-order-button:active {
  background-color: #fff;
  background-position: 0 0;
  color: #2d3748;
}

.edit-sales-order-:active {
  opacity: 0.5;
}

.delete-sales-order-button {
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #ff4742;
  background-color: #ff4742;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.delete-sales-order-button:hover,
.delete-sales-order-button:active {
  background-color: #fff;
  background-position: 0 0;
  color: #ff4742;
}

.delete-sales-order-button-:active {
  opacity: 0.5;
}

.edit-products-div {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* General container styling */
#productsDiv {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

/* Styling for each product div */
.productDiv {
  display: flex;
  flex-direction: column;
  /* border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  background-color: #f9f9f9; */
}

/* Styling for input fields */
.productDiv input {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  #productsDiv {
    padding: 5px;
  }

  .productDiv {
    padding: 5px;
  }

  .productDiv input {
    padding: 5px;
    font-size: 14px;
  }
}

/* Styling for the dialog container */
.editDialogue {
  width: 50vw;
  height: 90vh;
  border: none;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto;

  label {
    display: block;
    margin: 10px 0;
  }

  .editDialogue form {
    display: flex;
    flex-direction: column;
  }

  .editDialogue label {
    font-weight: bold;
    margin-top: 10px;
  }

  .editDialogue input,
  .editDialogue select,
  .editDialogue textarea {
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .editDialogue textarea {
    resize: vertical;
  }

  .editDialogue input[type="submit"],
  .editDialogue button {
    margin-top: 20px;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #4caf50;
    color: white;
    cursor: pointer;
  }

  .editDialogue button {
    background-color: #f44336;
  }

  .editDialogue input[type="submit"]:hover,
  .editDialogue button:hover {
    opacity: 0.8;
  }

  #open-dialog {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    background-color: #008cba;
    color: white;
    cursor: pointer;
  }

  #open-dialog:hover {
    opacity: 0.8;
  }

  .input-effect {
    position: relative;
    margin: 20px 0;
  }

  .effect-19,
  .effect-20,
  .effect-21,
  .effect-23 {
    border: 1px solid #ccc;
    /* padding: 7px 14px; */
    transition: 0.4s;
    background: transparent;
    width: 100%;
  }

  .effect-20~label {
    position: absolute;
    left: 14px;
    width: 100%;
    margin: 0;
    top: 10px;
    font-weight: 400;
    font-style: italic;
    color: #000;
    transition: 0.3s;
    letter-spacing: 0.5px;
  }

  .effect-20~.focus-border:before,
  .effect-20~.focus-border:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #ff7300;
    transition: 0.3s;
  }

  .effect-20~.focus-border:after {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
  }

  .effect-20~.focus-border i:before,
  .effect-20~.focus-border i:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 0;
    background-color: #ff7300;
    transition: 0.4s;
  }

  .effect-20~.focus-border i:after {
    left: auto;
    right: 0;
    top: auto;
    bottom: 0;
  }

  .effect-20:focus~.focus-border:before,
  .effect-20:focus~.focus-border:after,
  .has-content.effect-20~.focus-border:before,
  .has-content.effect-20~.focus-border:after {
    width: 100%;
    transition: 0.3s;
  }

  .effect-20:focus~.focus-border i:before,
  .effect-20:focus~.focus-border i:after,
  .has-content.effect-20~.focus-border i:before,
  .has-content.effect-20~.focus-border i:after {
    height: 100%;
    transition: 0.4s;
  }

  .effect-20~label {
    position: absolute;
    left: 14px;
    width: 100%;
    top: 10px;
    color: #000;
    transition: 0.3s;
    letter-spacing: 0.5px;
  }

  .effect-20:focus~label,
  .has-content.effect-20~label {
    top: -18px;
    left: 0;
    font-size: 12px;
    color: #ff7300;
    transition: 0.3s;
  }

  .toggle-wrapper {
    display: inline-block;
    position: relative;
    border-radius: 3.125em;
    overflow: hidden;
    vertical-align: middle;
    margin-left: 10px;
  }

  .toggle-checkbox {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
  }

  .toggle-container {
    display: flex;
    position: relative;
    border-radius: inherit;
    width: 2.5em;
    height: 1.25em;
    background-color: #d1d4dc;
    box-shadow: inset 0.0625em 0 0 #d4d2de, inset -0.0625em 0 0 #d4d2de,
      inset 0.125em 0.25em 0.125em 0.25em #b5b5c3;
    mask-image: radial-gradient(#fff, #000);
    transition: all 0.4s;

    .toggle-wrapper.red>.toggle-checkbox:checked+& {
      background-color: #f5233c;
      box-shadow: inset 0.0625em 0 0 #f5233c, inset -0.0625em 0 0 #f5233c,
        inset 0.125em 0.25em 0.125em 0.25em #d70026;
    }

    .toggle-ball {
      position: relative;
      border-radius: 50%;
      width: 1.25em;
      height: 1.25em;
      background-image: radial-gradient(rgba(#fff, 0.6), rgba(#fff, 0) 16%),
        radial-gradient(#d2d4dc, #babac2);
      background-position: -0.25em -0.25em;
      background-size: auto, calc(100% + 0.25em) calc(100% + 0.25em);
      background-repeat: no-repeat;
      box-shadow: 0.25em 0.25em 0.25em #8d889e,
        inset 0.0625em 0.0625em 0.25em #d1d1d6,
        inset -0.0625em -0.0625em 0.25em #8c869e;
      transition: transform 0.4s, box-shadow 0.4s;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        background-position: -0.25em -0.25em;
        background-size: auto, calc(100% + 0.25em) calc(100% + 0.25em);
        background-repeat: no-repeat;
        opacity: 0;
        transition: opacity 0.4s;

        .toggle-wrapper.red>.toggle-container>& {
          background-image: radial-gradient(rgba(#fff, 0.6), rgba(#fff, 0) 16%),
            radial-gradient(#ff2751, #e0022f);
          box-shadow: 0.25em 0.25em 0.25em #b70033,
            inset 0.0625em 0.0625em 0.25em #fe7d7e,
            inset -0.0625em -0.0625em 0.25em #870002;
        }

        .toggle-wrapper.yellow>.toggle-container>& {
          background-image: radial-gradient(rgba(#fff, 0.6), rgba(#fff, 0) 16%),
            radial-gradient(#f5d05f, #d67f1b);
          box-shadow: 0.25em 0.25em 0.25em #bc6d00,
            inset 0.0625em 0.0625em 0.25em #fff27a,
            inset -0.0625em -0.0625em 0.25em #9f3901;
        }

        .toggle-wrapper.blue>.toggle-container>& {
          background-image: radial-gradient(rgba(#fff, 0.6), rgba(#fff, 0) 16%),
            radial-gradient(#419efe, #4ba2ff);
          box-shadow: 0.25em 0.25em 0.25em #2634d0,
            inset 0.0625em 0.0625em 0.25em #8dd5ff,
            inset -0.0625em -0.0625em 0.25em #1500ac;
        }
      }

      .toggle-wrapper>.toggle-checkbox:checked+.toggle-container>&::after {
        opacity: 1;
      }

      .toggle-checkbox:checked+.toggle-container>& {
        transform: translateX(100%);
      }
    }
  }

  /* Styling for form elements */
  form {
    display: grid;
    gap: 10px;
  }

  label {
    font-weight: bold;
  }

  input[type="text"] {
    width: calc(100% - 20px);
    /* Adjust input width */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
  }

  input[type="submit"],
  button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  button#btn-cancel {
    background-color: #dc3545;
  }

  input[type="submit"]:hover,
  button:hover {
    opacity: 0.8;
  }
}

/* SALE ANALYTICS STYLING STARTS HERE */

.saleAnal {

  th,
  td {
    text-transform: uppercase;
    border-collapse: collapse;
    background-color: #00000050;
    border: 1px solid #000;
    font-size: 14px;
  }

  .red {
    color: red;
  }

  .yellow {
    color: yellow;
  }

  .green {
    color: green;
  }

  h2 {
    margin-left: 10px;
  }

  .date-filter {
    position: relative;
    display: inline-block;
    margin-left: 10px;
  }

  .dateInput {
    padding: 8px 12px;
    cursor: pointer;
    color: #007bff;
    background-color: #02172e44;
    /* border: none; */
    border-radius: 4px;
  }

  .has-date {
    position: absolute;
    cursor: pointer;
    top: 50%;
    right: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  #salesAnalContainer {
    display: flex;
    flex-wrap: wrap;
  }

  #salesAnalContainer>div {
    width: 45%;
    margin: 2%;
  }

  #salesAnalContainer .long-chart {
    width: 100%;
  }

  canvas {
    width: 100% !important;
    height: auto !important;
  }
}

/* SALE ANALYTICS STYLING ENDS HERE */

/* CHECKOUT PAGE LINK STYLING STARTS HERE */

.paymentLink {
  max-width: 600px;
  margin: 0 auto 10%;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 8px;

  .checkout-link-section h2 {
    text-align: center;
    color: #333;
  }

  .new_product-container {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 1px solid #28a745;
    padding: 15px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
  }

  .form-group {
    margin-bottom: 15px;
  }

  .form-group label {
    display: block;
    font-weight: bold;
    color: #555;
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    width: 90%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
  }

  .form-group {
    margin-bottom: 15px;
  }

  .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
    display: inline-block;
  }

  /* The switch - the box around the slider */
  .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    vertical-align: middle;
    margin-left: 10px;
  }

  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    z-index: 99;
    display: inline-block;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 30px;
    bottom: 4px;
    background-color: red;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }

  input:checked+.slider {
    background-color: #000;
  }

  input:focus+.slider {
    box-shadow: 0 0 1px #000;
  }

  input:checked+.slider:before {
    -webkit-transform: translateX(-1px);
    -ms-transform: translateX(-1px);
    transform: translateX(-1px);
  }

  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }

  .custom-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
  }

  .dropdown-button {
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
    position: relative;
    color: #333;
    padding: 10px;
    font-size: 14px;
    width: 95%;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .dropdown-button::after {
    content: "⇓";
    position: absolute;
    right: 0%;
    top: 50%;
    display: block;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-weight: 900;
  }

  .dropdown-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    width: 95%;
    z-index: 1000;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .dropdown-item {
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
  }

  .dropdown-item:hover {
    background-color: #f0f0f0;
  }

  .dropdown-item.disabled {
    color: #aaa;
    pointer-events: none;
  }

  .show-menu {
    display: block;
  }

  .form-group textarea {
    resize: vertical;
  }

  .add-product-btn {
    display: inline-block;
    background-color: #25b520;
    width: max-content;
    color: #000;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    height: 35px;
    width: 35px;
    font-size: 18px;
    font-weight: bold;
  }

  .remove-product-btn {
    display: inline-block;
    background-color: #ff0000;
    width: max-content;
    color: #000;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    height: 35px;
    width: 35px;
    font-size: 18px;
    font-weight: bold;
  }

  .remove-product-btn:hover {
    background-color: #b60000;
  }

  .remove-product-btn:active {
    border: none;
    background-color: #630000;
  }

  .submit-btn {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #28a745;
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
  }

  .add-product-btn:hover,
  .submit-btn:hover {
    background-color: #218838;
  }

  .add-product-btn:active,
  .submit-btn:active {
    background-color: #0c511b;
    border: none;
  }

  #checkoutResult {
    margin-top: 20px;
    display: none;
  }

  #checkoutResult label {
    font-weight: bold;
  }

  #checkoutLink {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    margin-top: 5px;
  }

  .copy-btn {
    cursor: pointer;
  }

  .checkoutlink-copybtn {
    display: flex;
    align-items: center;
  }

  .checkoutlink-copybtn input {
    flex: 1;
    margin-right: 8px;
  }
}

/* CHECKOUT PAGE LINK STYLING ENDS HERE */

#notes {
  .notesHeader {
    display: flex;
    justify-content: space-between;
    margin-right: 20px;
    align-items: center;
  }

  .button-33 {
    background-color: #c2fbd7;
    border-radius: 100px;
    box-shadow: rgba(44, 187, 99, 0.2) 0 -25px 18px -14px inset,
      rgba(44, 187, 99, 0.15) 0 1px 2px, rgba(44, 187, 99, 0.15) 0 2px 4px,
      rgba(44, 187, 99, 0.15) 0 4px 8px, rgba(44, 187, 99, 0.15) 0 8px 16px,
      rgba(44, 187, 99, 0.15) 0 16px 32px;
    color: green;
    cursor: pointer;
    display: inline-block;
    font-family: CerebriSans-Regular, -apple-system, system-ui, Roboto,
      sans-serif;
    padding: 7px 20px;
    text-align: center;
    text-decoration: none;
    transition: all 250ms;
    border: 0;
    font-size: 16px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }

  .button-33:hover {
    box-shadow: rgba(44, 187, 99, 0.35) 0 -25px 18px -14px inset,
      rgba(44, 187, 99, 0.25) 0 1px 2px, rgba(44, 187, 99, 0.25) 0 2px 4px,
      rgba(44, 187, 99, 0.25) 0 4px 8px, rgba(44, 187, 99, 0.25) 0 8px 16px,
      rgba(44, 187, 99, 0.25) 0 16px 32px;
    transform: scale(1.05) rotate(-1deg);
  }

  #noteContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    max-width: 85vw;
    margin: 20px auto;
    gap: 20px;

    h3 {
      text-align: center;
      text-transform: uppercase;
      text-decoration: underline;
      margin-bottom: 10px;
    }
  }

  .add-note-btn {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px;
    font-size: 16px;
  }

  .notes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

  .note {
    width: 250px;
    max-height: 500px;
    overflow: auto;
    padding: 15px;
    background-color: #ffe066;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    color: #333;
    -webkit-transition: transform 0.5s;
    -moz-transition: transform 0.5s;
    -ms-transition: transform 0.5s;
    -o-transition: transform 0.5s;
    transition: transform 0.5s;
  }

  /* Chrome, Edge and Safari */
  *::-webkit-scrollbar {
    height: 1px;
    width: 1px;
  }

  *::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color: #dfe9eb;
  }

  *::-webkit-scrollbar-track:hover {
    background-color: #b8c0c2;
  }

  *::-webkit-scrollbar-track:active {
    background-color: #b8c0c2;
  }

  *::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background-color: #000000;
  }

  *::-webkit-scrollbar-thumb:hover {
    background-color: #14210f;
  }

  *::-webkit-scrollbar-thumb:active {
    background-color: #22381a;
  }

  .note:hover {
    transform: scale(1.05);
  }

  .note h3 {
    margin: 0 0 10px;
    font-size: 18px;
  }

  .note p {
    margin: 0;
    font-size: 14px;
  }

  .delete-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    background-color: #ff6b6b;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
  }

  .copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #fff;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
  }

  .color-purple {
    background-color: #a29bfe;
    /* Light purple */
  }

  .color-teal {
    background-color: #81ecec;
    /* Light teal */
  }

  .color-red {
    background-color: #ff7675;
    /* Light red */
  }

  .color-grey {
    background-color: #dfe6e9;
    /* Light grey */
  }

  .color-lime {
    background-color: #badc58;
    /* Light lime green */
  }

  .color-yellow {
    background-color: #ffe066;
    /* Light yellow */
  }

  .color-pink {
    background-color: #ff9ff3;
    /* Light pink */
  }

  .color-blue {
    background-color: #74b9ff;
    /* Light blue */
  }

  .color-green {
    background-color: #55efc4;
    /* Light green */
  }

  .color-orange {
    background-color: #fab1a0;
    /* Light orange */
  }

  .modal-oms {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
  }

  .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 50vw;
    margin: 25vh auto;
    max-width: 100%;
    position: relative;
  }

  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
    color: #888;
  }

  .close-btn:hover {
    color: #000;
  }

  #noteTitle,
  #noteBody {
    width: 90%;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
  }

  .save-btn {
    background-color: #28a745;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }
}

/* EDIT LABEL STYLING STARTS FROM HERE */

.dialog-overlay-editlabel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.dialog-box-editlabel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  max-width: 500px;
  width: 80%;
  height: max-content;
  max-height: 70vh;
  overflow-y: auto;
}

.dialog-close-editlabel {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 40px;
  color: red;
}

.dialog-item-editlabel {
  margin-bottom: 10px;
}

.dialog-item-editlabel p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 1px;
}

.dialog-item-editlabel hr {
  margin: 10px 0;
  border: none;
  border-top: 1px solid orange;
}

.dialog-box-editlabel h2 {
  font-size: 24px;
  text-align: center;
  color: #333;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 10px;
  letter-spacing: 1px;
}

.no-edit-message {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
  letter-spacing: 0.5px;
}

/* EDIT LABEL STYLING ENDS HERE */

/* HTML: <div class="loader"></div> */

.loader-background {
  gap: 20px;
}

.td-3 {
  margin: 10px 0;
  height: 100px;
  z-index: 99999;
  width: 100%;

  span {
    display: inline-block;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #eee 20%, #ddd 50%, #eee 80%);
    background-size: 500px 100px;
    animation-name: moving-gradient;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: 1s;
  }
}

.td-2 {
  width: 150px;
  height: 150px;

  span {
    display: block;
    background-color: rgba(0, 0, 0, 0.15);
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #eee 20%, #ddd 50%, #eee 80%);
    background-size: 500px 100px;
    animation-name: moving-gradient;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }
}

@-webkit-keyframes moving-gradient {
  0% {
    background-position: -250px 0;
  }

  100% {
    background-position: 250px 0;
  }
}

/* SEARCH INPUT FOR PRODUCT UPDATE STYLING STARTS FROM HERE */
#search-product-update {
  width: 100%;
}

.header-searchbar-product-update {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px;
  height: 40px;
}

.search-product-div {
  display: flex;
  flex-direction: row;
  gap: 5px;
  margin-bottom: 5px;
  max-width: 400px;
  width: 100%;
}

#search-product-button,
#clear-product-button {
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#search-product-button {
  background-color: #007bff;
  color: #fff;
}

#clear-product-button {
  background-color: #047100;
  color: #fff;
}

/* Vendors Styling Starts Here */

#vendorDashboard {
  .vendor-container {
    padding: 20px;
  }

  .vendor-card {
    max-width: 1100px;
    background: white;
    margin: 10px auto;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .vendor-card h3 {
    margin: 0;
    font-size: 18px;
  }

  .vendor-form-group {
    margin: 15px 0;
  }

  .vendor-form-group label {
    display: block;
    margin-bottom: 5px;
  }

  .vendor-form-group input {
    width: 95%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  .vendor-form-group select {
    width: 96.5%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  button {
    background-color: #333;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  button:hover {
    background-color: #555;
  }

  .output {
    margin-top: 20px;
    padding: 10px;
    background: #eaeaea;
    border-radius: 4px;
    overflow-x: auto;
    max-height: 75vh;
  }

  .vendor-table {
    width: auto;
    border-collapse: collapse;
    margin: 10px auto 0;
    table-layout: auto;
    overflow: scroll;
  }

  table,
  th,
  td {
    border: 1px solid #ddd;
  }

  th,
  td {
    padding: 10px 20px;
    text-align: left;
  }

  th {
    background-color: #f4f4f4;
  }

  .vendor-stock-table-header {
    position: sticky;
    top: -10.5px;
  }

  .quantity-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .quantity-controls button {
    padding: 5px 10px;
    cursor: pointer;
  }

  .add-stock-form .dropdown {
    position: relative;
    width: 95%;
  }

  .add-stock-form .dropdown-select {
    position: relative;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
    width: 100%;
    height: auto;
    padding: 8px;
    border: 1px solid #ddd;
    outline: none;
    border-radius: 0.25rem;
    color: hsl(0, 0%, 10%);
    background-clip: padding-box;
    background-color: hsl(0, 0%, 100%);
    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
    transition: all 0.3s ease-in-out;
  }

  .add-stock-form .dropdown-menu {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 10;
    border-radius: 0.25rem;
    background-color: hsl(0, 0%, 100%);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
  }

  .add-stock-form .dropdown-menu-inner {
    max-height: 16rem;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .add-stock-form .dropdown-menu-inner::-webkit-scrollbar {
    width: 5px;
    height: auto;
  }

  .add-stock-form .dropdown-menu-inner::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
    background-color: hsl(0, 0%, 80%);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  }

  .add-stock-form .dropdown-menu-item {
    font-family: inherit;
    font-size: 1rem;
    font-weight: normal;
    line-height: inherit;
    cursor: pointer;
    user-select: none;
    padding: 0.65rem 1.25rem;
    background-color: hsl(0, 0%, 100%);
    transition: all 0.2s ease-in-out;
  }

  .add-stock-form .dropdown-menu-item:hover {
    color: hsl(0, 0%, 10%);
    background-color: hsl(0, 0%, 80%);
  }

  .add-stock-form .dropdown-menu-item.is-select,
  .add-stock-form .dropdown-menu-item.is-select:hover {
    color: hsl(0, 0%, 100%);
    background-color: hsl(217, 91%, 60%);
  }

  .add-stock-form .dropdown-menu-search {
    display: block;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    width: 90%;
    margin: 0 auto;
    height: auto;
    padding: 0.65rem 1.25rem;
    border: none;
    outline: none;
    color: hsl(0, 0%, 10%);
    background-clip: padding-box;
    background-color: hsl(0, 0%, 96%);
  }

  .vendor-action-buttons {
    display: flex;
    gap: 2px;
  }

  .vendor-edit-button,
  .vendor-delete-button {
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .vendor-edit-button:hover {
    background: #1D8C8C;
  }

  .vendor-delete-button:hover {
    background: #D9534F;
  }
}

/* Vendors Styling Ends Here */

/* KEYWORD TRACKER STYLING STARTS HERE */

#iframePlaceholder {
  width: 100%;
  height: 85vh;
}

/* KEYWORD TRACKER STYLING ENDS HERE */

/* B2B Styling Starts from here */
#b2b {
  padding: 20px;
  background-color: #f4f6f9;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
  overflow-x: scroll;

  .b2b-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .add-filter-search {
    display: flex;
    gap: 15px;
    align-items: center;
  }

  .add-button .addBtn {
    background-color: #2ecc71;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .add-button .addBtn:hover {
    background-color: #27ae60;
  }

  .searchBar {
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    transition: border 0.3s ease;
  }

  .search-bar input:focus {
    border-color: #3498db;
    outline: none;
  }

  .filter-bar select {
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    background-color: #fff;
  }

  .b2b-table-container {
    overflow-x: auto;
  }

  /* Data Table Styling */
  .data-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .data-table th,
  .data-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }

  .data-table th {
    background-color: #3498db;
    color: #fff;
    font-weight: 600;
  }

  .data-table tr:hover {
    background-color: #f1f1f1;
  }

  .data-table td {
    font-size: 14px;
    color: #333;
  }

  .data-table td button {
    padding: 7px 12px;
    font-size: 14px;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .action-button-b2b {
    display: block;
    white-space: nowrap;
  }

  .editBtn {
    background-color: #f39c12;
    margin-right: 5px;
  }

  .editBtn:hover {
    background-color: #e67e22;
  }

  .deleteBtn {
    background-color: #e74c3c;
  }

  .deleteBtn:hover {
    background-color: #c0392b;
  }

  @media (max-width: 846px) {
    .b2b-header {
      flex-direction: column;
      align-items: flex-start;
    }

    .add-filter-search {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      width: 100%;
    }

    .search-bar input,
    .filter-bar select,
    .add-button .addBtn {
      width: 100%;
    }

    .filter-bar {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  }

}

.seo {
  background-color: #f4f4f4;
  margin: 0;
  padding: 20px;

  .seo-form {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 600px;
    margin: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .form-group:first-of-type {
    position: relative;
  }

  #seo-search-results {
    position: absolute;
    top: 90%;
    width: 100%;
    height: max-content;
    max-height: 300px;
    overflow-y: scroll;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }

  #seo-search-results.hidden {
    display: none;
  }

  #seo-search-results div {
    padding: 10px;
    cursor: pointer;
  }

  #seo-search-results div:hover {
    background-color: #f0f0f0;
  }

  h2 {
    text-align: center;
    margin-bottom: 20px;
  }

  .form-group {
    margin-bottom: 15px;
  }

  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }

  input[type="text"],
  textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
  }

  textarea {
    width: 95%;
  }

  button {
    padding: 10px 15px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }

  button:disabled {
    background-color: #ccc;
  }

  button:hover:enabled {
    background-color: #218838;
  }
}

/* Overlay styles */
.b2b-popup.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* General popup content styles */
.B2B-popup-content {
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  margin: 40px auto;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  overflow: auto;
  position: relative;
}

.close-btn {
  font-size: 2.5rem;
  color: #333;
  float: right;
  cursor: pointer;
  position: absolute;
  top: 4%;
  right: 2%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-size: 1rem;
  margin-bottom: 5px;
  color: #555;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  color: #333;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #4caf50;
  outline: none;
}

.submitBtn {
  width: 100%;
  padding: 10px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submitBtn:hover {
  background-color: #45a049;
}

.pincode-feedback {
  margin-top: 10px;
  font-size: 14px;
  margin-bottom: 14px;
}

.pincode-feedback.loading {
  color: #007bff;
}

.pincode-feedback.error {
  color: #ff4d4d;
}

.pincode-feedback.success {
  color: #28a745;
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
  .B2B-popup-content {
    padding: 15px;
  }

  h2 {
    font-size: 1.5rem;
  }

  .form-group input,
  .form-group select {
    font-size: 0.9rem;
    padding: 8px;
  }

  .submitBtn {
    font-size: 0.9rem;
    padding: 8px;
  }
}

/* Mobile-friendly adjustments */
@media (max-width: 480px) {
  .B2B-popup-content {
    padding: 10px;
  }

  h2 {
    font-size: 1.2rem;
  }

  .form-group input,
  .form-group select {
    font-size: 0.8rem;
    padding: 6px;
  }

  .submitBtn {
    font-size: 0.8rem;
    padding: 6px;
  }
}

/* B2B Styling Ends Here */

/* VENDOR LIST STYLING STARTS FROM HERE */
#vendorLists {
  padding: 20px;
  background-color: #f4f6f9;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
  overflow-x: scroll;

  .vendorLists-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .add-filter-search {
    display: flex;
    gap: 15px;
    align-items: center;
  }

  .add-button .addBtn {
    background-color: #2ecc71;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .add-button .addBtn:hover {
    background-color: #27ae60;
  }

  /* Search Bar */
  .search-bar input {
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    width: 200px;
    transition: border 0.3s ease;
  }

  .search-bar input:focus {
    border-color: #3498db;
    outline: none;
  }

  /* Filter Select */
  .filter-bar select {
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    background-color: #fff;
  }

  /* Data Table Styling */
  .data-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .data-table th,
  .data-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }

  .data-table th {
    background-color: #db3434;
    color: #fff;
    font-weight: 600;
  }

  .data-table tr:hover {
    background-color: #f1f1f1;
  }

  .data-table td {
    font-size: 14px;
    color: #333;
  }

  .data-table td button {
    padding: 7px 12px;
    font-size: 14px;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .action-button-b2b {
    display: block;
    white-space: nowrap;
  }

  .editBtn {
    background-color: #f39c12;
    margin-right: 5px;
  }

  .editBtn:hover {
    background-color: #e67e22;
  }

  .deleteBtn {
    background-color: #e74c3c;
  }

  .deleteBtn:hover {
    background-color: #c0392b;
  }
}

/* VENDOR LIST STYLING ENDS HERE */

/* OMS DATE PICKER MODAL STYLING STRATS FROM HERE */
#oms {
  #web-orders-title {
    text-align: center;
    font-size: 2em;
    margin-bottom: 20px;
    color: #39ff14;
    text-shadow: 0 0 10px #000, 0 0 20px #000;
    cursor: pointer;
  }

  .dynamic-div {
    width: 90%;
    margin: 2% auto;
    padding: 30px 60px;
    border-radius: 15px;
    background: linear-gradient(145deg, #111, #222);
    box-shadow: 0 0 20px #1fc700, inset 0 0 15px #0f0;
    display: flex;
    justify-content: space-between;
    animation: pulse 3s infinite;
  }

  .data-section {
    max-width: fit-content;
    background-color: #121212;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px #0f0;
    animation: fade-in 2.5s ease-out;

    p {
      margin: 10px 0;
      font-size: 1.1em;
      color: #39ff14;
      text-align: center;
    }
  }

  .modal-background-oms {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .modal-background-oms.hidden {
    display: none;
  }

  .modal-content-oms {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 300px;
    text-align: center;
  }

  .followupDate-div {
    margin-bottom: 20px;
  }

  .followup-input {
    width: 80%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .modal-buttons-oms {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .close-button-oms,
  .set-button-oms {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .close-button-oms {
    background-color: #f44336;
    color: white;
  }

  .assign-button-oms {
    background-color: #4caf50;
    color: white;
  }

  .close-button-oms:hover {
    background-color: #d32f2f;
  }

  .assign-button-oms:hover {
    background-color: #388e3c;
  }

  .oms-pagination-dots {
    color: orange;
    font-size: 30px;
  }

  .loader-background {
    min-width: 2000px;
  }
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 20px #1fc700, inset 0 0 15px #0f0;
  }

  50% {
    box-shadow: 0 0 30px #1fc700, inset 0 0 25px #0f0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.overFlowhidden,
body.overFlowhidden {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

/* OMS DATE PICKER MODAL STYLING EDS HERE */

/* ADD BLOG STYLING STARTS FROM HERE */
#addBlog {
  background-color: #ffffff;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  max-width: 700px;
  margin: 40px auto;
  font-family: "Arial", sans-serif;

  .blogHeader {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  h2 {
    font-size: 28px;
    margin-bottom: 25px;
    color: #333;
    text-align: center;
  }

  input[type="text"],
  input[type="number"],
  textarea,
  #addBlog-brand-selector,
  #addBlog-category-selector {
    width: calc(100% - 24px);
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: border 0.3s;
  }

  input[type="text"]:focus,
  input[type="number"]:focus,
  textarea:focus,
  select:focus {
    border-color: #007bff;
    outline: none;
  }

  #addBlog-brand-selector,
  #addBlog-category-selector {
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M7 10l5 5 5-5H7z" fill="%23007bff"/></svg>');
    /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
  }

  textarea {
    resize: vertical;
    height: 500px;
  }

  .textAreaForSubHeader {
    height: 100px;
  }

  .textAreaForblogMetaTitle {
    height: 50px;
  }

  .textAreaForblogMetaDescription {
    height: 100px;
  }

  .textAreaForblogMetaTags {
    height: 60px;
  }

  .image-input-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .image-input-group .image-url:focus {
    border-color: #007bff;
    outline: none;
  }

  .button-group {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .button-group button {
    margin-right: 10px;
    flex: 1;
  }

  .blog-add-image,
  .blog-removeimage,
  .blog-post,
  .blog-upload-image,
  .blog-add-images,
  .blog-add-faqs,
  .blog-remove-faqs {
    background-color: #3f4740;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .blog-add-image-wrapper,
  .blog-add-faqschema-wrapper {
    display: flex;
    justify-content: flex-end;
  }

  .blog-upload-image,
  .blog-add-images,
  .blog-add-faqs,
  .blog-remove-faqs {
    margin-bottom: 20px;
  }

  .blog-add-image:hover,
  .blog-removeimage:hover,
  .blog-post:hover,
  .blog-upload-image:hover {
    background-color: #218838;
  }

  .blog-add-images:hover,
  .blog-add-faqs:hover {
    background-color: #218838;
  }

  .blog-remove-faqs:hover {
    background: #b03838;
  }

  .blog-remove-faqs {
    margin-left: 10px;
  }

  .deleteblog:hover {
    background-color: #cd3a3a;
  }

  .blog-removeimage {
    background-color: #e74c3c;
  }

  .blog-removeimage:hover {
    background-color: #c35044;
  }

  .blog-removeimage[disabled] {
    background-color: #ccc;
    cursor: not-allowed;
  }

  .blog-add-image[disabled] {
    background-color: #ccc;
    cursor: not-allowed;
  }

  .checking-blog-id {
    font-size: 14px;
    margin-top: -15px;
    margin-bottom: 20px;
    display: none;
  }

  .checking-blog-id.valid {
    color: green;
  }

  .checking-blog-id.invalid {
    color: red;
  }

  .checking-blog-id.validating {
    color: blue;
  }

  .toggle-wrapper {
    display: inline-block;
    position: relative;
    border-radius: 3.125em;
    overflow: hidden;
  }

  .toggle-checkbox {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
  }

  .toggle-container {
    display: flex;
    position: relative;
    border-radius: inherit;
    width: 2.5em;
    height: 1.25em;
    background-color: #d1d4dc;
    box-shadow: inset 0.0625em 0 0 #d4d2de, inset -0.0625em 0 0 #d4d2de,
      inset 0.125em 0.25em 0.125em 0.25em #b5b5c3;
    mask-image: radial-gradient(#fff, #000);
    transition: all 0.4s;

    .toggle-wrapper.red>.toggle-checkbox:checked+& {
      background-color: #f5233c;
      box-shadow: inset 0.0625em 0 0 #f5233c, inset -0.0625em 0 0 #f5233c,
        inset 0.125em 0.25em 0.125em 0.25em #d70026;
    }

    .toggle-ball {
      position: relative;
      border-radius: 50%;
      width: 1.25em;
      height: 1.25em;
      background-image: radial-gradient(rgba(#fff, 0.6), rgba(#fff, 0) 16%),
        radial-gradient(#d2d4dc, #babac2);
      background-position: -0.25em -0.25em;
      background-size: auto, calc(100% + 0.25em) calc(100% + 0.25em);
      background-repeat: no-repeat;
      box-shadow: 0.25em 0.25em 0.25em #8d889e,
        inset 0.0625em 0.0625em 0.25em #d1d1d6,
        inset -0.0625em -0.0625em 0.25em #8c869e;
      transition: transform 0.4s, box-shadow 0.4s;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        background-position: -0.25em -0.25em;
        background-size: auto, calc(100% + 0.25em) calc(100% + 0.25em);
        background-repeat: no-repeat;
        opacity: 0;
        transition: opacity 0.4s;

        .toggle-wrapper.red>.toggle-container>& {
          background-image: radial-gradient(rgba(#fff, 0.6), rgba(#fff, 0) 16%),
            radial-gradient(#ff2751, #e0022f);
          box-shadow: 0.25em 0.25em 0.25em #b70033,
            inset 0.0625em 0.0625em 0.25em #fe7d7e,
            inset -0.0625em -0.0625em 0.25em #870002;
        }

        .toggle-wrapper.yellow>.toggle-container>& {
          background-image: radial-gradient(rgba(#fff, 0.6), rgba(#fff, 0) 16%),
            radial-gradient(#f5d05f, #d67f1b);
          box-shadow: 0.25em 0.25em 0.25em #bc6d00,
            inset 0.0625em 0.0625em 0.25em #fff27a,
            inset -0.0625em -0.0625em 0.25em #9f3901;
        }

        .toggle-wrapper.blue>.toggle-container>& {
          background-image: radial-gradient(rgba(#fff, 0.6), rgba(#fff, 0) 16%),
            radial-gradient(#419efe, #4ba2ff);
          box-shadow: 0.25em 0.25em 0.25em #2634d0,
            inset 0.0625em 0.0625em 0.25em #8dd5ff,
            inset -0.0625em -0.0625em 0.25em #1500ac;
        }
      }

      .toggle-wrapper>.toggle-checkbox:checked+.toggle-container>&::after {
        opacity: 1;
      }

      .toggle-checkbox:checked+.toggle-container>& {
        transform: translateX(100%);
      }
    }

    @media (max-width: 768px) {
      .rendered-form {
        padding: 15px;
      }

      label,
      .form-control {
        font-size: 14px;
      }
    }

    @media (max-width: 480px) {
      .rendered-form {
        padding: 10px;
      }

      label,
      .form-control {
        font-size: 12px;
      }
    }
  }

  @media (max-width: 480px) {
    .blogpage-toggles {
      flex-direction: column;
    }
  }

  .blogpage-toggles {
    display: flex;
    justify-content: space-between;
  }

  .toggle-for-featuredBlog-content {
    font-weight: 550;
  }

  .toggle-for-featuredBlog {
    display: flex;
    gap: 3px;
    margin-bottom: 20px;
  }

  .blog-editmode-div {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .blog-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  .blog-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .blog-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }

  .blog-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }

  input:checked+.blog-slider {
    background-color: #2196f3;
  }

  input:focus+.blog-slider {
    box-shadow: 0 0 1px #2196f3;
  }

  input:checked+.blog-slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }

  .blog-slider.round {
    border-radius: 34px;
  }

  .blog-slider.round:before {
    border-radius: 50%;
  }

  .deleteblog[disabled] {
    background-color: #ccc;
    cursor: not-allowed;
  }

  .blog-tags-div {
    display: flex;
    padding-bottom: 20px;
  }

  .blog-tags-input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .blog-add-tags {
    padding: 10px;
    margin-left: 5px;
    border: none;
    background-color: #3f4740;
    color: white;
    border-radius: 4px;
    cursor: pointer;
  }

  .blog-add-tags:hover {
    background-color: #218838;
  }

  #blog-tag {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
  }

  .tag {
    background-color: #e7e7e7;
    border-radius: 3px;
    padding: 5px;
    margin: 5px;
    display: flex;
    align-items: center;
  }

  .tag .close-tags {
    margin-left: 5px;
    cursor: pointer;
    color: red;
  }
}

/* BLOG PAGE PRODUCTS,MODELS DROPDOWN STYLES STARTING FROM HERE */
.addBlog-dropdown-container,
.addBlog-dropdown-container {
  .addBlog-dropdown {
    /* border: 1px solid #d1d5db; */
    /* border-radius: 6px; */
    /* padding: 5px; */
    /* background-color: #ffffff; */
    position: relative;
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
  }

  #addBlogSearchInput {
    width: 100%;
    padding: 10px 12px;
    border: none;
    outline: none;
    font-size: 14px;
    color: #333;
    background-color: transparent;
  }

  #addBlogSearchInput::placeholder {
    color: #888;
  }

  .addBlog-dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
  }

  .addBlog-dropdown-options div {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
  }

  .addBlog-dropdown-options div:hover {
    background-color: #f3f4f6;
  }

  .addBlog-dropdown-options .addBlog-selected-option {
    background-color: #dbeafe;
    color: #1e40af;
    font-weight: bold;
  }

  .addBlog-selected-options {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .addBlog-selected-options .addBlog-selected-item {
    background-color: #1e40af;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
  }

  .addBlog-selected-options .addBlog-selected-item:hover {
    background-color: #162e73;
  }

  .addBlog-selected-options .addBlog-selected-item span {
    margin-left: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
  }

  .addBlog-selected-options .addBlog-selected-item span:hover {
    color: #e2e8f0;
  }
}

/* BLOG PAGE PRODUCTS,MODELS DROPDOWN STYLES ENDS HERE */

/* ADD BLOG STYLING ENDS HERE */


/* Score styling ends here */

/* BULK UPLOAD STYLING STARTS FROM HERE */
#bulkUpload {
  .bulkUpload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }

  .bulkUpload-container {
    background: #ffffff;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 900px;
    text-align: center;
    margin: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  h1 {
    margin-bottom: 20px;
    font-size: 2.5rem;
    color: #333;
    text-transform: uppercase;
  }

  label {
    font-size: 1.2rem;
    margin-bottom: 10px;
    display: block;
  }

  table {
    margin: 20px auto 0;
    width: max-content;
    max-width: 100%;
    border-collapse: collapse;
    max-height: 400px;
    overflow-y: auto;
    display: block;
  }

  th,
  td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
    word-wrap: break-word;
    text-transform: none;
  }

  th {
    background-color: #ff7300;
    color: #fff;
  }

  tr:nth-child(odd) {
    background-color: #f7e6d8;
  }

  tr:hover {
    background-color: rgba(106, 130, 251, 0.3);
  }

  @media (max-width: 600px) {
    h1 {
      font-size: 2rem;
    }

    .bulkUpload-container {
      padding: 20px;
    }

    input[type="file"] {
      padding: 10px;
    }
  }

  .modal {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    padding-top: 60px;
  }

  .modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }

  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  .bulkupload-submit {
    background-color: #3f4740;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s, opacity 0.3s;
  }

  .bulkupload-submit:hover {
    background-color: #218838;
  }

  .bulkupload-submit:disabled {
    background-color: #d3d3d3;
    color: #a9a9a9;
    cursor: not-allowed;
    opacity: 0.6;
  }

  .bulkupload-submit i {
    margin-right: 8px;
    font-size: 18px;
  }

  .bulkupload-submit:disabled i {
    content: "\f141";
  }

  h3 {
    cursor: pointer;
  }

  select,
  input[type="file"] {
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #ddd;
    width: 100%;
    font-size: 1rem;
    margin: 10px 0;
    box-sizing: border-box;
  }

  input[type="file"] {
    padding: 12px;
  }

  .structure-table {
    margin: 5% auto;
    width: max-content;
  }
}

/* BULK UPLOAD STYLING ENDS HERE */

#productEdit {
  .back-button-and-download-dropdown {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .container {
    margin: 0 auto;
    padding: 20px;
    background-color: white;
  }

  h1 {
    text-align: center;
    margin-bottom: 20px;
  }

  input[type="text"],
  input[type="number"] {
    padding: 10px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 400px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  button:not(.backBtn, .activePagination) {
    padding: 10px 20px;
    background-color: #4caf50;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 20px;
  }

  button:not(.backBtn):hover {
    background-color: #45a049;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    overflow-x: auto;
  }

  table,
  th,
  td {
    border: 1px solid #ddd;
  }

  th,
  td {
    padding: 10px;
    text-align: center;
    word-wrap: break-word;
  }

  th {
    background-color: #e8e8fa;
  }

  table tr:hover {
    background-color: #f1f1f1;
  }

  .product-image {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 5px;
  }

  #pagination {
    text-align: center;
    margin-top: 20px;
  }

  #pagination button {
    padding: 10px 20px;
    margin: 0 5px;
  }

  #pagination button.active {
    background-color: #45a049;
    color: white;
  }

  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
  }

  .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    width: 90%;
    max-width: 400px;
    overflow: hidden;
    box-sizing: border-box;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .modal-veryfy {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
  }

  .modal-veryfy-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    width: 90%;
    overflow: hidden;
    box-sizing: border-box;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cmsTable-scroll-container {
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .modal-for-product-edit {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
  }

  table.verify-table {
    border-collapse: collapse;
    overflow-x: scroll;
  }

  table.verify-table th,
  table.verify-table td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #ddd;
    word-wrap: break-word;
    white-space: nowrap;
  }

  .close {
    font-size: 30px;
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
  }

  .close:hover {
    color: black;
  }

  .modal-content form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
  }

  .modal-content form button {
    background-color: #4caf50;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
  }

  .modal-content form button:hover {
    background-color: #45a049;
  }

  @media screen and (max-width: 768px) {

    table th,
    table td {
      font-size: 0.875rem;
      padding: 8px;
    }

    input[type="text"],
    input[type="number"] {
      max-width: 100%;
      margin-bottom: 15px;
    }

    .container {
      padding: 15px;
      overflow-x: scroll;
    }

    #pagination button {
      padding: 8px 15px;
      font-size: 0.875rem;
    }

    .productEdit {
      overflow-x: auto;
    }

    .modal-content {
      width: 90%;
      max-width: 360px;
      padding: 15px;
    }

    .modal-content form input {
      padding: 12px;
      font-size: 14px;
    }

    .close {
      font-size: 24px;
      top: 5px;
      right: 10px;
    }
  }

  @media screen and (max-width: 480px) {

    table th,
    table td {
      font-size: 0.75rem;
      padding: 6px;
    }

    .product-image {
      width: 40px;
      height: 40px;
    }

    #pagination button {
      padding: 6px 12px;
    }

    input[type="text"],
    input[type="number"] {
      padding: 8px;
      font-size: 0.875rem;
    }

    .modal-content {
      width: 90%;
      max-width: 320px;
    }
  }

  .productEdit {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
  }

  .activePagination {
    background-color: #3f4740;
    padding: 10px 20px;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 20px;
  }

  .updateChanges[disabled] {
    background-color: #ccc;
    cursor: not-allowed;
  }

  button[disabled] {
    background-color: #ccc;
    cursor: not-allowed;
  }

  .verify-submit {
    display: flex;
    flex-direction: column;
  }

  .submitbutton-div {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: end;
  }

  .paginationForProductsEdit {
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: center;
  }

  .styled-span {
    display: inline-block;
    margin: 0 8px;
    font-size: 18px;
    font-weight: bold;
    color: #666;
    text-align: center;
    line-height: 1;
  }

  .styled-span::before {
    content: "...";
    font-size: 20px;
    font-weight: bold;
    color: #999;
  }

  .editPopup {
    width: 90% !important;
    margin-top: 20px !important;
  }

  select:not(.cmsBrandFilter) {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }

  html.overFlowhidden,
  body.overFlowhidden {
    margin: 0;
    height: 100%;
    overflow: hidden;
  }

  .cmsFilters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  /* .dropdown-dwd-cms {
    position: relative;
    display: inline-block;
} */

  .dropbtn-dwd-cms {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin-right: 20px;
    margin-bottom: 5px !important;
    min-width: 170px;
  }

  .dropbtn-dwd-cms:hover {
    background-color: #45a049;
  }

  .download-option {
    cursor: pointer;
  }

  .dropdown-content-dwd-cms {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 170px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    /* margin-right: 20px; */
  }

  .dropdown-content-dwd-cms a {
    text-align: center;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown-content-dwd-cms a:hover {
    background-color: #ddd;
  }

  /* Show the dropdown when hovering over the button */
  .dropdown-dwd-cms:hover .dropdown-content-dwd-cms {
    display: block;
  }

  .cmsFilters>.cmsBrandFilter,
  .cmsFilters>#cmsCategoryFilter {
    margin-right: 10px;
  }

  .cmsActive-container {
    margin-left: auto;
    align-items: center;
  }

  .cmsActive-container .active-span {
    margin-right: 8px;
    font-size: 14px;
    display: inline-block;
    text-align: center;
    font-weight: 400;
  }

  .cmsBrandFilter {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }

  .cms-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  .cms-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .cms-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }

  .cms-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }

  input:checked+.cms-slider {
    background-color: #2196f3;
  }

  input:focus+.slider {
    box-shadow: 0 0 1px #2196f3;
  }

  input:checked+.cms-slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }

  .cmsHoverImage {
    position: absolute;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    padding: 10px;
    display: none;
  }

  .cmsHovermodal-content {
    max-width: 200px;
    max-height: 300px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .loader-cms-download-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
}

.loader-cms-download {
  width: 40px;
  height: 40px;
  --c: no-repeat linear-gradient(orange 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 21px 21px;
  animation: l5 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
}

@keyframes l5 {
  0% {
    background-position: 0 0, 100% 0, 100% 100%, 0 100%
  }

  33% {
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    width: 60px;
    height: 60px
  }

  66% {
    background-position: 100% 0, 100% 100%, 0 100%, 0 0;
    width: 60px;
    height: 60px
  }

  100% {
    background-position: 100% 0, 100% 100%, 0 100%, 0 0
  }
}

.loader-sales-pagination {
  --d: 22px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  color: #25b09b;
  box-shadow:
    calc(1*var(--d)) calc(0*var(--d)) 0 0,
    calc(0.707*var(--d)) calc(0.707*var(--d)) 0 1px,
    calc(0*var(--d)) calc(1*var(--d)) 0 2px,
    calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px,
    calc(-1*var(--d)) calc(0*var(--d)) 0 4px,
    calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px,
    calc(0*var(--d)) calc(-1*var(--d)) 0 6px;
  animation: l27 1s infinite steps(8);
}

@keyframes l27 {
  100% {
    transform: rotate(1turn)
  }
}

/* LEADER BOARD STYLING STARTS FROM HERE */

.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid rgb(41, 128, 185);
  ;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}


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

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

.back-leaderboard-dailyandmonthly-toggle-container {
  display: flex;
  justify-content: space-between;
  margin-right: 20px;
  padding: 10px 0;
}

.leaderboard-container {
  width: 90%;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); */
}

.leaderboard-h1 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 40px;
  color: #3498db;
  font-weight: 700;
}

.leaderboard-sales-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.leaderboard-progress-card {
  width: calc(17% - 10px);
  /* width: calc(13% - 9px); */
  background-color: #a7c0db;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.leaderboard-progress-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .leaderboard-progress-card {
    width: 100%;
  }
}

.leaderboard-progress-card h3 {
  font-size: 1rem;
  color: #2c3e50;
  margin-bottom: 10px;
}

.leaderboard-progress-card p {
  font-size: 1.5rem;
  color: #2980b9;
  font-weight: bold;
}

.leaderboard-progress-bar {
  width: 100%;
  height: 12px;
  background-color: #ddd;
  border-radius: 6px;
  overflow: hidden;
}

.leaderboard-progress {
  height: 100%;
  background-color: #3498db;
  width: 0;
  border-radius: 6px;
  transition: width 0.5s ease-in-out;
}

.leaderboard-label-bold {
  width: 40px;
  text-align: right;
  font-weight: 600;
  color: #333;
}

.leaderboard-amount-blue {
  color: #2980b9;
  font-weight: 600;
  font-size: 1.3rem;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}

.leaderboard-td {
  padding: 14px;
  text-align: center;
  border: 1px solid #ddd;
  font-size: 1.1em;
  color: #34495e;
}


/* .leaderboard-th {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
  } */

.leaderboard-tablecontainer {
  overflow-x: scroll;
  max-height: 600px;
  overflow-y: scroll;
  scrollbar-width: none;
}

.leaderboard-tablecontainer::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

#leaderboard thead {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}

.leaderboard-th {
  background-color: #2980b9;
  color: white;
  font-weight: bold;
}

.leaderboard-tableBody tr {
  background-color: #fff;
  transition: background-color 0.3s ease-in-out;
}

.leaderboard-tableBody tr:nth-child(odd) {
  background-color: #f7f7f7;
}

.leaderboard-tableBody tr:nth-child(even) {
  background-color: #f1f1f1;
}

.leaderboard-tableBody tr:hover {
  background-color: #ecf0f1;
  cursor: pointer;
}

.leaderboard-tableBody tr td {
  color: #34495e;
}

#salesThisMonthValue,
#profitabilityThisMonthValue,
#profitabilityTodayValue,
#salesTodayValue,
#leaderBoardGrossMargin,
#leaderBoardSalesTarget,
#leaderBoardGrossMarginTarget,
#leaderMonthEndForeCast {
  font-weight: 600;
}

.leaderboard-progress-card.leaderBoardSalesTarget,
.leaderboard-progress-card.leaderBoardGrossMarginTarget {
  background: linear-gradient(135deg, #ff6b6b, #ff8787, #e76767);
}

.leaderboard-progress-card.leaderBoardMonthEndForeCast {
  background: linear-gradient(135deg, #77c973, #a0e68c, #9def76);
}

.leaderboard-progress-card-planned-deficit-card {
  background: linear-gradient(135deg, #ffb347, #ffcc33);
  /* background: linear-gradient(135deg, #ff6b6b, #ff8787, #e76767); */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  /* padding: 10px; */
  transition: transform 0.2s, box-shadow 0.2s;
}

.leaderboard-progress-card-planned-deficit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.leaderboard-progress-card-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.leaderboard-progress-card-label {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.leaderboard-progress-card-amount {
  font-size: 16px;
  font-weight: 700;
  color: #2c3e50;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 15px;
}

.leaderboard-progress-card-amount.leaderboard-progress-card-deficit {
  background: rgba(255, 255, 255, 0.1);
  color: #ff4d4d;
}

.leaderboard-progress-card-avg-sales {
  background: linear-gradient(135deg, #ffb347, #ffcc33);
}


.leaderboard-td.leaderbordLowSignal {
  color: red;
  /* text-shadow: -1px 1px 2px black; */
}

.leaderboard-td.leaderbordMidSignal {
  color: yellow;
  text-shadow: -1px 1px 2px black;
}

.leaderboard-td.leaderbordHighSignal {
  color: green;
  /* text-shadow: -1px 1px 2px black; */
}

.leaderboard-sort-symbol {
  font-size: 0.9em;
  margin-left: 5px;
  cursor: pointer;
  color: white;
  transition: color 0.3s;
}

.leaderboard-sort-symbol:hover {
  color: black;
}

.leaderboard-sort-symbol-active {
  color: red;
}

.leaderboard-dailyandmonthly-toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 12px;
}

.leaderboard-dailyandmonthly-switch {
  position: relative;
  display: inline-block;
  width: 140px;
  height: 40px;
}

.leaderboard-dailyandmonthly-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.leaderboard-dailyandmonthly-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #3498db;
  transition: 0.4s;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
}

.leaderboard-dailyandmonthly-slider:before {
  position: absolute;
  content: "Daily";
  height: 32px;
  width: 70px;
  border-radius: 40px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  color: #3498db;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  transition: 0.4s;
}

input:checked+.leaderboard-dailyandmonthly-slider {
  background-color: #2980b9;
}

input:checked+.leaderboard-dailyandmonthly-slider:before {
  content: "Monthly";
  transform: translateX(62px);
  color: #2980b9;
}

.leaderboard-monthly-data {
  .leaderboard-monthly-data-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .leaderboard-monthly-data-dropdowns {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    /* Allows wrapping for small screens */
  }

  select {
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 200px;
  }

  .leaderboard-download-container {
    display: flex;
    justify-content: flex-end;
  }

  .incentive-download-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #3498db;
    color: white;
    font-size: 30px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .incentive-download-btn:hover {
    background-color: #2980b9;
  }

  .incentive-download-btn i {
    font-size: 15px;
  }

  .monthly-sales-data-filter-btn {
    background-color: rgb(41, 128, 185);
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }

  .monthly-sales-data-filter-btn:hover {
    background-color: rgb(31, 104, 141);
  }

  .monthly-sales-data-filter-btn:focus {
    outline: none;
  }

  .monthly-sales-data-filter-btn:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
  }


  .leaderboard-monthly-data-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    /* margin-bottom: 40px; */
  }

  .leaderboard-monthly-data-card {
    background-color: #a7c0db;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
  }

  .leaderboard-monthly-data-card h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
  }

  .leaderboard-monthly-data-value {
    font-size: 22px;
    font-weight: bold;
    color: #2980b9;
  }

  .leaderboard-monthly-data-table-container {
    margin-top: 5px;
    overflow-x: auto;
    max-width: 100%;
  }

  table {
    width: 100%;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    position: relative;
  }

  table th,
  table td {
    padding: 15px 20px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
  }

  table th {
    background-color: #3498db;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 3;
  }

  table td {
    cursor: pointer;
    background-color: #f9f9f9;
    color: #333333;
    transition: background-color 0.2s ease-in-out;
    position: relative;
  }

  table td:first-child {
    position: sticky;
    left: 0;
    background-color: #ffffff;
    z-index: 2;
  }

  table tr:hover td {
    background-color: #f1f8ff;
  }

  table tr:nth-child(even) td {
    background-color: #f4f6f7;
  }

  table tr:nth-child(odd) td {
    background-color: #ffffff;
  }

  table tr:first-child td {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  table tr:last-child td {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  table td a {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
  }

  table td a:hover {
    text-decoration: underline;
  }

  .goal-leaderboard-card {
    background-color: #77c973;
  }

  .goal-to-hit-leaderboard-card {
    background-color: #ff6c6c;
  }


  /* Responsive Styles */
  @media (max-width: 1024px) {
    .leaderboard-monthly-data-cards {
      grid-template-columns: repeat(3, 1fr);
      /* 3 columns on medium screens */
    }

    .leaderboard-monthly-data-dropdowns {
      justify-content: center;
    }

    select {
      width: 180px;
    }
  }

  @media (max-width: 768px) {
    .leaderboard-monthly-data-cards {
      grid-template-columns: repeat(2, 1fr);
      /* 2 columns on smaller screens */
    }

    .leaderboard-monthly-data-dropdowns {
      flex-direction: column;
      align-items: center;
    }

    select {
      width: 100%;
      margin-bottom: 10px;
      /* Add space between dropdowns */
    }

    .leaderboard-monthly-data-card {
      padding: 15px;
    }

    .leaderboard-monthly-data-card h3 {
      font-size: 16px;
    }

    .leaderboard-monthly-data-value {
      font-size: 20px;
    }
  }

  @media (max-width: 480px) {
    .leaderboard-monthly-data-cards {
      grid-template-columns: 1fr;
      /* 1 column on very small screens */
    }

    .leaderboard-monthly-data-dropdowns {
      width: 100%;
      justify-content: center;
    }

    select {
      width: 100%;
      margin-bottom: 10px;
    }

    .leaderboard-monthly-data-card {
      padding: 10px;
    }

    .leaderboard-monthly-data-card h3 {
      font-size: 14px;
    }

    .leaderboard-monthly-data-value {
      font-size: 18px;
    }

    table {
      font-size: 12px;
    }

    table th,
    table td {
      padding: 8px;
    }
  }
}


/* LEADER BOARD STYLING ENDS HERE */

/* INDIVIDUAL SALES STATS STYLING STARTS FROM HERE */

.individualStats-dashboard {
  font-family: "Poppins", sans-serif;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: #fff;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  min-height: 100vh;
  width: 100%;
  /* max-width: 900px; */
}

.individualStats-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  color: #fff;
}

.individualStats-card h2 {
  color: white;
  font-weight: 600;
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
  font-family: "Poppins", sans-serif;
}

.individualStats-card h2 span {
  font-size: 30px;
  margin-right: 10px;
}

.individualStats-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.individualStats-item {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  transition: transform 0.3s;
}

.individualStats-item:hover {
  transform: scale(1.05);
}

.individualStats-item h3 {
  font-size: 16px;
  margin-bottom: 5px;
  color: #fff;
}

.individualStats-item p {
  font-size: 18px;
  font-weight: bold;
  color: #ffdd00;
  font-family: "Poppins", sans-serif;
}

.individualStats-progress {
  margin-bottom: 25px;
}

.individualStats-progress h3 {
  font-size: 18px;
  margin-bottom: 10px;
  font-family: "Poppins", sans-serif;
}

.individualStats-progress-bar {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  overflow: hidden;
  height: 20px;
  position: relative;
}

.individualStats-progress-fill {
  background: linear-gradient(90deg, #ff8a00, #e52e71);
  height: 100%;
  border-radius: 15px;
  transition: width 0.5s;
}

.individualStats-sales-data table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  color: #fff;
}

.individualStats-sales-data th,
.individualStats-sales-data td {
  padding: 10px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.individualStats-sales-data th {
  background: rgba(255, 255, 255, 0.2);
  font-weight: bold;
  color: #ffdd00;
}

.individualStats-sales-data tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.1);
}

.individualStats-sales-data tr:hover {
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.3s;
}

.individualStats-button-container {
  text-align: center;
  margin-top: 20px;
}

.individualStats-leaderboard-button {
  background: linear-gradient(135deg, #ff8a00, #e52e71);
  border: none;
  color: #fff;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 25px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.go-backto-leaderboard-button {
  background: linear-gradient(135deg, #ff8a00, #e52e71);
  border: none;
  color: #fff;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 25px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .go-backto-leaderboard-button {
    padding: 8px 15px;
    font-size: 14px;
    margin-bottom: 10px;
  }
}

.individualStats-leaderboard-button:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.incompleteStatus-containerClass {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.individualStats-progress p {
  font-family: "Poppins", sans-serif;
}

.individualStats-sales-data h3 {
  margin-bottom: 15px;
  font-family: "Poppins", sans-serif;
}

.individualStats-dashboard-main-container {
  padding: 20px;
  display: none;
}

.nosales-p {
  text-align: center;
  margin: 20px 0;
  font-size: 18px;
  font-weight: bold;
  color: #ffdd00;
}

.individualStatsRed {
  color: red;
}

.individualStatsGreen {
  color: green;
}

.individualStatsYellow {
  color: yellow;
}

.individualStats-achivedStatus-icon[data-title] {
  position: relative;
  cursor: pointer;
}

.individualStats-achivedStatus-icon:hover::after {
  content: attr(data-title);
  position: absolute;
  top: -25px;
  left: 0;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 1;
}

.individualStats-achivedStatus-icon[title] {
  pointer-events: none;
}

@media (max-width: 768px) {

  .individualStats-table-container th,
  .individualStats-table-container td {
    padding: 8px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {

  .individualStats-table-container th,
  .individualStats-table-container td {
    padding: 6px;
    font-size: 10px;
  }
}

.individualStats-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.individualStats-header h2 {
  font-weight: 600;
  font-size: 24px;
}

.individualStats-header h2 span {
  font-size: 30px;
  margin-right: 10px;
}

.individualStats-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.individualStats-filter select {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 5px;
  color: #fff;
  padding: 5px 10px;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  outline: none;
  appearance: none;
  cursor: pointer;
  transition: background 0.3s;
}

.individualStats-filter select option {
  background-color: #e52e71;
  color: #fff;
}

.individualStats-filter select:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Responsive Header Styles */
@media (max-width: 768px) {
  .individualStats-header {
    flex-direction: column;
    /* align-items: flex-start; */
    gap: 15px;
  }

  .individualStats-header h2 {
    font-size: 20px;
    text-align: center;
  }

  .individualStats-filter {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
  }

  .individualStats-filter select {
    width: 100%;
    padding: 10px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .individualStats-header h2 {
    font-size: 18px;
    align-items: center;
  }

  .individualStats-filter select {
    font-size: 12px;
    padding: 8px;
  }
}

.individualStats-month-year {
  color: #ffdd00;
  font-size: 0.8em;
}

@media (max-width: 600px) {
  .individualStats-header h2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .month-year {
    display: block;
    margin-top: 5px;
  }
}

/* INDIVIDUAL SALES STATS STYLING ENDES HERE */


/* ADD SINGLE PRODUCT SECTION STYLING STARTS FROM HERE */
.addSingleProduct-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 30px;
}

.addSingleProduct-card {
  width: calc(30% - 10px);
  background: linear-gradient(145deg, #3498db, #2980b9);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.addSingleProduct-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .addSingleProduct-card {
    width: 100%;
  }
}

.addSingleProduct-card h3 {
  font-size: 27px;
  margin-bottom: 15px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
}

.addSingleProduct-card p {
  font-size: 15px;
  color: #ddd;
  margin: 5px 0;
}

.addSingleProduct-card p strong {
  color: #fff;
}

.singleProduct-editNew-container {
  max-width: 900px;
  margin: 50px auto;
  padding: 30px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.singleProduct-editNew-heading {
  font-size: x-large;
  text-align: center;
  margin-bottom: 30px;
  color: #2c3e50;
}

.singleProduct-editNew-formGroup {
  margin-bottom: 40px;
}

.singleProduct-editNew-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
  position: relative;
}

.singleProduct-editNew-tooltipContainer {
  position: relative;
  display: inline-block;
}

.singleProduct-editNew-tooltipIcon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: #3498db;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  margin-left: 5px;
}

.singleProduct-editNew-tooltipText {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10;
  margin-bottom: 10px;
}

.singleProduct-editNew-tooltipContainer:hover .singleProduct-editNew-tooltipText {
  display: block;
}

.singleProduct-editNew-input,
.singleProduct-editNew-textarea,
.singleProduct-editNew-select {
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;
  padding-right: 0px;
}

.singleProduct-editNew-textarea {
  resize: vertical;
  height: 100px;
}

.singleProduct-editNew-textarea-des {
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;
  padding-right: 0px;
  height: 50px;
}

.singleProduct-editNew-button {
  padding: 12px 24px;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
  margin-right: 10px;
}

.singleProduct-editNew-primaryButton {
  background-color: #3498db;
}

.singleProduct-editNew-primaryButton:hover {
  background-color: #2980b9;
}

.singleProduct-editNew-dangerButton {
  background-color: #e74c3c;
}

.singleProduct-editNew-dangerButton:hover {
  background-color: #c0392b;
}

.singleProduct-editNew-successButton {
  background-color: #2ecc71;
}

.singleProduct-editNew-successButton:hover {
  background-color: #27ae60;
}

.singleProduct-editNew-faqItem {
  margin-bottom: 15px;
}

.addSingleProduct-disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ADD SINGLE PRODUCT SECTION STYLING ENDS HERE */

/* HEADER STYLING STARTS FROM HERE  */
.adminpanel-header {
  background-color: #2d3748;
  color: #fff;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 10;
}

.adminpanel-header-topbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.adminpanel-header-logo img {
  height: 50px;
  width: auto;
  object-fit: contain;
}

.adminpanel-header-center {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.5px;
}

.adminpanel-header-logout {
  background-color: #f15922;
  border: none;
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.adminpanel-header-logout:hover {
  background-color: #ff3700;
  transform: translateY(-1px);
}

.adminpanel-header-marquee {
  width: 100%;
  background-color: #ff7300;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 10px;
  padding: 8px 0;
}

.adminpanel-header-marquee-text {
  display: inline-block;
  padding-left: 100%;
  animation: marquee-scroll 18s linear infinite;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@media (min-width: 600px) {
  .adminpanel-header {
    padding: 14px 30px;
  }

  .adminpanel-header-center {
    font-size: 1.4rem;
  }

  .adminpanel-header-logo img {
    height: 60px;
  }

  .adminpanel-header-logout {
    font-size: 1rem;
  }

  .adminpanel-header-marquee-text {
    font-size: 1rem;
  }
}

@media (min-width: 992px) {
  .adminpanel-header {
    flex-direction: column;
  }

  .adminpanel-header-topbar {
    flex-wrap: nowrap;
  }

  .adminpanel-header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.6rem;
  }
}

/* HEADER STYLING ENDS HERE  */


/* FEATURED PRODUCTS DASHBOARD STARTS FROM HERE */
#featuredProducts {
  .featuredProducts-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }

  .featuredProducts-search-container {
    position: relative;
    margin-bottom: 30px;
    display: inline-block;
    width: 50%;
  }

  #featuredProductsSearchInput {
    width: 100%;
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    margin: 0 auto;
  }

  .featuredProducts-suggestions-list {
    position: absolute;
    width: 100%;
    left: 0;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 5px;
    display: none;
    z-index: 1;
  }

  .featuredProducts-suggestion-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .featuredProducts-suggestion-item:hover {
    background-color: #f9f9f9;
  }

  .featuredProducts-suggestion-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 15px;
    border-radius: 4px;
  }

  .featuredProducts-suggestion-info {
    flex-grow: 1;
  }

  .featuredProducts-add-btn {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .featuredProducts-add-btn:hover {
    background: #45a049;
  }

  .featuredProducts-featured-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
  }

  .featuredProducts-product-card {
    cursor: pointer;
    background: #e3c1a5;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
  }

  .featuredProducts-product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .featuredProducts-remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff4444;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .featuredProducts-remove-btn:hover {
    background: #cc0000;
  }

  .featuredProducts-product-brand {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 5px;
  }

  .featuredProducts-product-price {
    color: #333;
    font-weight: bold;
    margin-top: 10px;
  }

  @media (max-width: 768px) {
    .featuredProducts-featured-products {
      grid-template-columns: 1fr;
    }
  }
}

/* FEATURED PRODUCTS STYLING ENDS HERE */



.featuredProducts-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.featuredProducts-modal-content {
  background: white;
  margin: 2% auto;
  padding: 25px;
  width: 90%;
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.featured-modal-header {
  margin-bottom: 15px;
  padding: 8px;
  text-align: center;
  color: black;
  display: inline-block;
}

.featuredProducts-modal-header {
  text-align: center;
}

.featuredProducts-close-modal {
  position: relative;
  right: -587px;
  top: -12px;
  font-size: 28px;
  color: #666;
  cursor: pointer;
}

.featuredProducts-close-modal:hover {
  color: red;
}

/* Product Info Section */
.featuredProducts-product-info {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.featuredProducts-product-image {
  width: 150px;
  height: 150px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 5px;
}

.featuredProducts-product-details h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 1.2em;
}

.featuredProducts-product-details p {
  margin: 5px 0;
  color: #666;
}

/* Form Styles */
.featuredProducts-form-group {
  margin-bottom: 20px;
}

.featuredProducts-form-group label {
  display: block;
  margin-bottom: 8px;
  color: #444;
  font-weight: 500;
}

.featuredProducts-form-input {
  width: 100%;
  padding: 10px;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box
}

/* Button Styles */
.featuredProducts-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.featuredProducts-upload-btn {
  background: #e9ecef;
  color: #495057;
}

.featuredProducts-postimage-btn {
  color: white;
  background: #495057;
}

.featuredProducts-postimage-btn:hover {
  color: white;
  background: #218838;
}

.featuredProducts-upload-btn:hover {
  background: #dee2e6;
}

.featuredProducts-post-image-btn {
  background: #4CAF50;
  color: white;
}

.featuredProducts-post-image-btn:hover {
  background: #45a049;
}

.featuredProducts-submit-btn {
  background: #2196F3;
  color: white;
}

.featuredProducts-submit-btn:hover {
  background: #1976D2;
}

.featuredProducts-modal-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .featuredProducts-modal-content {
    width: 78%;
  }

  .featuredProducts-product-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .featuredProducts-product-image {
    width: 200px;
    height: 200px;
  }

  .featuredProducts-modal-footer {
    flex-direction: column;
  }

  .featuredProducts-btn {
    width: 100%;
  }
}

#featuredProductsModalProductBrand {
  font-weight: 900;
}

#featuredProductsModalProductSKU {
  font-weight: 500;
}

#featuredProductsStatus {
  font-weight: 400;
}




.featuredProducts-loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite
}

.featuredProducts-loader::before,
.featuredProducts-loader::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid #FFF;
  animation: prixClipFix 2s linear infinite;
}

.featuredProducts-loader::after {
  border-color: #FF3D00;
  animation: prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse;
  inset: 6px;
}

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

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

@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
  }

  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
  }

  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
  }

  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
  }

  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
  }
}


/* LEADS ANALYTICS CSS STARTS FROM HERE */
#leads {
  .salesLeadAnalytics-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 24px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }

  .salesLeadAnalytics-controls {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 24px;
    align-items: center;
  }

  .salesLeadAnalytics-left,
  .salesLeadAnalytics-right {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  input[type="month"] {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
  }

  button {
    padding: 8px 16px;
    border: 1px solid #007bff;
    border-radius: 6px;
    background: #fff;
    color: #007bff;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
  }

  button:hover {
    background: #e6f0ff;
  }

  .salesLeadAnalytics-active {
    background: #007bff;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .salesLeadAnalytics-table-wrapper {
    margin-bottom: 32px;
  }

  table.salesLeadAnalytics-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  table.salesLeadAnalytics-table th,
  table.salesLeadAnalytics-table td {
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    white-space: nowrap;
    text-align: left;
  }

  table.salesLeadAnalytics-table thead th {
    background: #007bff;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 3;
  }

  table.salesLeadAnalytics-table tbody tr:nth-child(even) {
    background: #f9f9f9;
  }

  table.salesLeadAnalytics-table tbody tr:hover {
    background: #e9f5ff;
  }

  .salesLeadAnalytics-overall {
    overflow-x: auto;
  }

  .salesLeadAnalytics-per-wrapper {
    overflow-x: auto;
  }

  table.salesLeadAnalytics-per th:first-child,
  table.salesLeadAnalytics-per td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 10;
    box-shadow: inset 1px 0 0 #e0e0e0;
  }

  .salesperson-cell {
    background: #007bff !important;
  }

  @media (max-width:768px) {
    .salesLeadAnalytics-controls {
      flex-direction: column;
      gap: 16px;
    }
  }

  .leadsAnalyticsLoader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
  }

  .leadsAnalyticsLoader::before,
  .leadsAnalyticsLoader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #FFF;
    animation: prixClipFix 2s linear infinite;
  }

  .leadsAnalyticsLoader::after {
    transform: rotate3d(90, 90, 0, 180deg);
    border-color: #FF3D00;
  }

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

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

  @keyframes prixClipFix {
    0% {
      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
    }

    50% {
      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }

    75%,
    100% {
      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
    }
  }

  .leads-loader-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .leads-icon-div {
    margin-right: 10px;
  }
}

/* LEADS ANALYTICS CSS ENDS HERE */


/* LANDING PAGE DASHBOARD STYLING STARTS FROM HERE */
#landingpage {
  .landingpage-container {
    max-width: 1000px;
    margin: auto;
    padding: 40px 20px;
  }

  .landingpage-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
  }

  .landingpage-subtitle {
    font-size: 22px;
    font-weight: bold;
    color: #007BFF;
    margin-bottom: 15px;
    text-align: justify;
  }

  .landingpage-subtitle-button {
    display: flex;
    justify-content: space-between;
  }

  .landingpage-item-title {
    font-size: 18px;
    margin-bottom: 15px;
    color: #444;
  }

  .landingpage-section {
    background: white;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .landingpage-item {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 6px;
    background: #fafafa;
    position: relative;
  }

  .landingpage-form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
  }

  .landingpage-form-group label {
    flex: 1 0 150px;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .landingpage-form-group input,
  .landingpage-form-group select,
  .landingpage-form-group textarea {
    flex: 2 1 300px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 200px;
  }

  .landingpage-remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    background-color: #dc3545;
    border: none;
    color: white;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
  }

  .landingpage-remove-btn:hover {
    background-color: #b52a35;
  }

  button.landingpage-add-btn {
    padding: 10px 15px;
    background-color: #007BFF;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 10px;
  }

  button.landingpage-add-btn:hover {
    background-color: #0056b3;
  }

  .landingpage-add-link {
    padding: 10px 15px;
    background-color: #007BFF;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 7px;
  }

  .landingpage-submit-btn {
    display: block;
    margin: 0 auto;
    background-color: #007BFF;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .landingpage-submit-btn:hover {
    background-color: #0056b3;
  }

  .custom-select-container {
    position: relative;
    margin-bottom: 1rem;
  }

  .custom-select-input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
  }

  .custom-select-options {
    position: absolute;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ccc;
    background: white;
    z-index: 1000;
    display: none;
  }

  .custom-select-option {
    padding: 8px;
    cursor: pointer;
  }

  .custom-select-option:hover {
    background-color: #f0f0f0;
  }

  @media (max-width: 600px) {
    .landingpage-form-group {
      flex-direction: column;
    }

    .landingpage-form-group label {
      margin-bottom: 5px;
    }

    .landingpage-form-group input,
    .landingpage-form-group select,
    .landingpage-form-group textarea {
      flex: 1 0 auto;
    }
  }
}

/* LANDING PAGE DASHBOARD STYLING ENDS HERE */


/* ---------------------------------------- LEADERBOARD ADD INCENTIVE DATA STYLING STARTS FROM HERE ---------------------------------------- */
#leaderboard {
  .incentiveOverlay-plus-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background-color: #007bff;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transition: background 0.3s;
  }

  .incentiveOverlay-plus-btn:hover {
    background-color: #0056b3;
  }

  /* Overlay */
  .incentiveOverlay-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .incentiveOverlay-overlay.active {
    display: flex;
  }

  #incentiveOverlay-form-group-ss-operation {
    display: none;
  }

  .incentiveOverlay-modal-content {
    max-height: 350px;
    overflow-y: auto;
  }

  .incentiveOverlay-modal-content::-webkit-scrollbar {
    width: 3px;
  }

  .incentiveOverlay-ss-points-table {
    margin: 0 auto;
    /* border-collapse: collapse; */
    width: 300px;
  }

  .incentiveOverlay-ss-points-table th td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }

  .incentiveOverlay-ss-points-table th {
    background-color: #f2f2f2;
  }

  .incentiveOverlay-ss-points-table td {
    background-color: #fff3cd;
  }

  .incentiveOverlay-ss-points-table td[contenteditable] {
    text-align: center;
  }


  /* Modal */
  .incentiveOverlay-modal {
    background: #fff;
    width: 90%;
    max-width: 400px;
    padding: 25px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .incentiveOverlay-modal h2 {
    border-bottom: 1px solid #ddd;
    padding: 10px;
    font-weight: bold;
    font-size: 1em;
  }

  .incentiveOverlay-close-btn {
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent;
    font-size: 24px;
    border: none;
    cursor: pointer;
    color: #333;
  }

  .incentiveOverlay-form-group {
    margin-bottom: 20px;
  }

  .incentiveOverlay-form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
  }

  .incentiveOverlay-form-group input[type="date"],
  .incentiveOverlay-form-group input[type="file"] {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
  }

  .incentiveOverlay-form-group input[type="date"] {
    display: block;
  }

  .incentiveOverlay-submit-btn {
    background-color: #28a745;
    color: white;
    border: none;
    width: 100%;
    padding: 12px;
    font-size: 1em;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
  }

  .incentiveOverlay-submit-btn:hover {
    background-color: #218838;
  }

  /* Toggle */
  .incentiveOverlay-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .incentiveOverlay-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
  }

  .incentiveOverlay-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .incentiveOverlay-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 30px;
  }

  .incentiveOverlay-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
  }

  .incentiveOverlay-switch input:checked+.incentiveOverlay-slider {
    background-color: #007bff;
  }

  .incentiveOverlay-switch input:checked+.incentiveOverlay-slider:before {
    transform: translateX(24px);
  }

  @media (max-width: 500px) {
    .incentiveOverlay-modal {
      width: 90%;
      padding: 20px;
    }

    .incentiveOverlay-plus-btn {
      width: 50px;
      height: 50px;
      font-size: 26px;
    }
  }
}

.individualIncentive-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.individualIncentive-item {
  /* background: rgba(255, 255, 255, 0.15); */
  background: rgb(0 0 0 / 15%);
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.individualIncentive-item:hover {
  transform: scale(1.05);
}

.individualIncentive-item h3 {
  font-size: 16px;
  margin-bottom: 5px;
  color: #fff;
}

.individualIncentive-item p {
  font-size: 18px;
  font-weight: bold;
  color: #ffdd00;
  font-family: "Poppins", sans-serif;
}

.incentive-h2 {
  text-align: left !important;
  margin-bottom: 40px !important;
}

@media (max-width: 600px) {
  .incentive-h2 {
    align-items: center !important;
    font-size: 18px;
  }
}

/* ---------------------------------------- LEADERBOARD ADD INCENTIVE DATA STYLING ENDS HERE ---------------------------------------- */

#soldCountTracker {
  .sold-count-container {
    max-width: 1000px;
    margin: auto;
    background: #e8e8fa;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  }

  .sold-count-controls {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 10px;
  }

  .main-sold-count-controls {
    display: flex;
    justify-content: space-between;
  }

  .sold-count-controls>* {
    margin-right: 10px;
  }

  label {
    font-weight: 500;
  }

  input[type="month"] {
    padding: 6px 10px;
    font-size: 16px;
  }

  button,
  select {
    padding: 6px 12px;
    font-size: 16px;
    cursor: pointer;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  th,
  td {
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }

  td {
    text-align: left;
  }

  th {
    background-color: #f0f0f0;
  }

  .sold-count-sort-toggle {
    padding: 6px 12px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
  }

  .sold-count-sort-toggle:hover {
    background: #0056b3;
  }

  tr:hover {
    background-color: #f5faff;
    cursor: grab;
  }

  #sales-date-range {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    background-color: #fff;
    min-width: 220px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  #sales-date-range:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.3);
  }

  .sold-count-controls button {
    padding: 10px 16px;
    background-color: #28a745;
    color: #fff;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .sold-count-controls button:hover {
    background-color: #218838;
  }

  @media (max-width: 600px) {
    .sold-count-controls {
      flex-direction: column;
      align-items: flex-start;
    }

    table {
      font-size: 14px;
    }
  }
}







.soldCountTrackerAnalyticsLoader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite
}

.soldCountTrackerAnalyticsLoader::before,
.soldCountTrackerAnalyticsLoader::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid #FFF;
  animation: prixClipFix 2s linear infinite;
}

.soldCountTrackerAnalyticsLoader::after {
  transform: rotate3d(90, 90, 0, 180deg);
  border-color: #FF3D00;
}

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

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

@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
  }

  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
  }

  75%,
  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
  }
}

.soldCountTracker-loader-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}









/* ==================================== CHATBOT TRAINING STYLING STARTS FROM HERE ==================================== */
.chatbot-training-container {
  max-width: 800px;
  margin: 40px auto;
  /* background-color: white; */
  background: #6d6969;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
  padding: 30px;
  font-family: 'Inter', sans-serif;
  color: #111827;
}

.chatbot-training-container h2 {
  color: #fff;
}

.chatbot-training-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.chatbot-training-tab {
  flex: 1;
  padding: 12px;
  text-align: center;
  border-radius: 8px;
  background: #f9fafb;
  cursor: pointer;
  transition: background 0.3s;
}

.chatbot-training-tab.chatbot-training-active {
  background: #4f46e5;
  color: white;
}

.chatbot-training-form-group {
  margin-bottom: 20px;
}

.chatbot-training-form-group label {
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
  color: #ffffff;
}

.chatbot-training-form-group input,
.chatbot-training-form-group textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
}

.chatbot-training-form-group input:focus,
.chatbot-training-form-group textarea:focus {
  border-color: #4f46e5;
  outline: none;
}

.chatbot-training-container button {
  background: #10b981;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.chatbot-training-container button:hover {
  background: #059669;
}

.chatbot-training-button-danger {
  background: #ef4444 !important;
}

.chatbot-training-button-danger:hover {
  background: #dc2626 !important;
}

#chatbotTrainingHandleParagraphButton:disabled,
#chatbotTrainingHandleFaqButton:disabled,
#chatbot-training-modal-submit:disabled {
  background: #333;
  cursor: not-allowed;
}

.chatbot-training-chat-box {
  background: #f9fafb;
  border-radius: 12px;
  height: 300px;
  overflow-y: auto;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}

.chatbot-training-chat-message {
  margin-bottom: 12px;
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.chatbot-training-user {
  background: #4f46e5;
  color: white;
  align-self: flex-end;
  margin-left: auto;
}

.chatbot-training-assistant {
  background: white;
  border: 1px solid #ddd;
  align-self: flex-start;
}

.chatbot-training-chat-input-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.chatbot-training-chat-input {
  width: 50%;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: border 0.3s;
}

.chatbot-training-typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  margin: 10px 0;
  font-size: 14px;
}

.chatbot-training-typing-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #ccc;
  border-radius: 50%;
  margin-right: 4px;
  animation: chatbotTrainingBlink 1.4s infinite both;
}

.chatbot-training-typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.chatbot-training-typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes chatbotTrainingBlink {

  0%,
  80%,
  100% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .chatbot-training-container {
    width: 80%;
  }
}

.chatbot-training-modal-copy {
  cursor: pointer;
}

.chatbot-training-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.chatbot-training-modal-box {
  position: relative;
  background: #fff;
  padding: 30px 20px 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 450px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  font-family: Arial, sans-serif;
}

.chatbot-training-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

.chatbot-training-modal-close:hover {
  color: #ff0000;
}

.chatbot-training-modal-box h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 20px;
  text-align: center;
}

.chatbot-training-modal-box select,
.chatbot-training-modal-box input[type="file"],
.chatbot-training-modal-box button {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.chatbot-training-modal-box button {
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

.chatbot-training-modal-box button:hover {
  background-color: #45a049;
}

.chatbot-training-modal-sample {
  margin-top: 10px;
}

.chatbot-training-modal-sample table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.chatbot-training-modal-sample th,
.chatbot-training-modal-sample td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.chatbot-training-modal-copy-btn {
  background-color: #2196F3;
  color: white;
  margin-top: 5px;
}

.chatbot-training-modal-copy-btn:hover {
  background-color: #0b7dda;
}

.chatbot-training-modal-copy-and-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.copy-icon-container {
  display: flex;
  justify-content: flex-end;
}

.chatbot-training-paragraph-notes {
  background-color: #f9f9fc;
  border-left: 6px solid #4a90e2;
  padding: 12px 20px;
  margin: 20px 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  color: #333;
  border-radius: 4px;
}

/* ==================================== CHATBOT TRAINING STYLING ENDS HERE ====================================*/


/* LEADER BOARD SPARCLE STYLING START FROM HERE */
.leaderboard-sparkle-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  /* shorthand for top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  animation: leaderboard-sparkle-fadeIn 0.3s forwards;
  cursor: default;
}

.leaderboard-sparkle-modal.show {
  display: flex;
}

.leaderboard-sparkle-modal-content {
  position: relative;
  background: linear-gradient(135deg, #fff8dc, #f0e68c);
  border-radius: 12px;
  width: 340px;
  max-width: 90vw;
  padding: 30px 25px 35px 25px;
  box-shadow: 0 8px 20px rgba(184, 134, 11, 0.4);
  text-align: center;
  overflow: hidden;
  color: #b8860b;
  font-weight: 700;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  user-select: none;
  transform: scale(0.9);
  animation: modalPopIn 0.3s forwards ease-out;
}

.leaderboard-sparkle-sparkles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 2px, transparent 2px);
  background-size: 20px 20px;
  animation: leaderboard-sparkle-sparkleFade 1.5s ease-in-out infinite;
  opacity: 0.55;
  border-radius: 12px;
  z-index: 0;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.7));
}

.leaderboard-sparkle-modal-header {
  font-size: 1.8rem;
  font-weight: 900;
  margin-bottom: 20px;
  text-shadow: 0 0 12px rgba(184, 134, 11, 0.9);
  position: relative;
  z-index: 1;
  letter-spacing: 1.2px;
}

.leaderboard-sparkle-player-name {
  font-size: 1.5rem;
  margin: 0 0 12px 0;
  position: relative;
  z-index: 1;
  color: #a97400;
  text-shadow: 0 0 5px rgba(169, 116, 0, 0.6);
}

.leaderboard-sparkle-player-points {
  font-size: 1.3rem;
  margin: 0;
  position: relative;
  z-index: 1;
  color: #b8860b;
  letter-spacing: 0.8px;
}

.leaderboard-sparkle-close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 1.8rem;
  font-weight: 900;
  color: #aaa;
  cursor: pointer;
  z-index: 2;
  transition: color 0.3s ease;
  user-select: none;
  padding: 0;
  line-height: 1;
}

.leaderboard-sparkle-close-btn:hover,
.leaderboard-sparkle-close-btn:focus {
  color: #b8860b;
  outline: none;
  text-shadow: 0 0 8px #b8860b;
}

@keyframes leaderboard-sparkle-sparkleFade {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 0.85;
    transform: scale(1.1);
  }
}

@keyframes leaderboard-sparkle-fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalPopIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.leaderboard-sparkle-player-image {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 15px;
  display: block;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 1;
  position: relative;
  animation: popImage 0.4s ease-out;
}

/* LEADER BOARD SPARCLE STYLING ENDS HERE */


/* LEADER BOARD TOP PERFORMERS MODAL STYLING STARTS FROM HERE */
.leaderboard-top-performer-popup-content {
  font-family: Arial, sans-serif;
}

.leaderboard-top-performer-showBtn {
  padding: 10px 10px;
  font-size: 12px;
  background-color: #2980b9;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-bottom: 10px;
}

.leaderboard-top-performer-showBtn:hover {
  background-color: #ffd700;
  color: #000;
}

.leaderboard-top-performer-showBtn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.leaderboard-top-performer-showBtn-div {
  display: flex;
  justify-content: right;
  gap: 10px;
}

.leaderboard-top-performer-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1000;
}

.leaderboard-top-performer-popup.show {
  visibility: visible;
  opacity: 1;
}

.leaderboard-top-performer-popup-content {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 600px;
  color: white;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.leaderboard-top-performer-close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 24px;
  cursor: pointer;
}

.leaderboard-top-performer-h2 {
  text-align: center;
  margin-top: 0;
}

.leaderboard-top-performer-card {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.leaderboard-top-performer-card img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-right: 16px;
}

.leaderboard-top-performer-info {
  flex: 1;
  min-width: 200px;
}

.leaderboard-top-performer-info h3 {
  margin: 0;
  font-size: 20px;
}

.leaderboard-top-performer-total-points {
  margin: 8px 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff176;
}

.leaderboard-top-performer-icon-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.leaderboard-top-performer-icon-wrapper {
  position: relative;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.leaderboard-top-performer-icon-wrapper:hover {
  transform: scale(1.2);
  background: #ffca28;
}

.leaderboard-top-performer-icon-wrapper i {
  font-size: 18px;
  color: white;
}

.leaderboard-top-performer-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e91e63;
  color: white;
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 50%;
  font-weight: bold;
}

.leaderboard-top-performer-tooltip {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.leaderboard-top-performer-icon-wrapper:hover .leaderboard-top-performer-tooltip {
  opacity: 1;
}

@media (max-width: 600px) {
  .leaderboard-top-performer-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .leaderboard-top-performer-card img {
    margin-bottom: 12px;
  }

  .leaderboard-top-performer-info {
    margin: 0;
  }

  .leaderboard-top-performer-icon-points {
    justify-content: center;
  }
}

/* LEADER BOARD TOP PERFORMERS MODAL STYLING ENDS HERE */

/* STYLING FOR STICKER STATUS STARTS FROM HERE */
.item-includes {
  display: inline-block;
  background-color: #f0f4ff;
  color: #333;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  border-left: 3px solid #6c63ff;
  margin: 6px 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-includes.sticker {
  background-color: #e6f0ff;
  border-left-color: #4a90e2;
}

.item-includes.thankyou {
  background-color: #fdf3f0;
  border-left-color: #f08e6b;
}

.item-includes.both {
  background-color: #eefaf2;
  border-left-color: #34c471;
}

.item-includes.none {
  background-color: #f5f5f5;
  border-left-color: #999;
  color: #777;
}

/* STYLING FOR STICKER STATUS ENDS HERE */


/* CRM STYLING STARTS FROM HERE */
html.crm-lock-scroll {
  overflow: hidden;
  height: 100%;
}

#crm {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f4f8;
  color: #333;

  .crm-header {
    background-color: #ffffff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .highlights-remove {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .crm-header h1 {
    margin: 0;
    font-size: 22px;
  }

  input,
  textarea {
    font-size: 16px !important;
  }

  .crm-header-icon {
    cursor: pointer;
  }

  .crm-btn {
    padding: 10px 18px;
    background-color: #007bff;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s;
  }

  .crm-btn:hover {
    background-color: #0056b3;
  }

  .crm-btn:disabled {
    cursor: not-allowed;
    background-color: gray;
  }

  .crm-leads-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    padding: 0 20px 40px;
  }

  @media (max-width: 600px) {
    .crm-leads-wrapper {
      /* grid-template-columns: none;  */
    }
  }

  .crm-lead-details {
    display: none;
    margin-top: 12px;
  }

  .crm-lead-details p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
  }

  .crm-lead-card.crm-expanded .crm-lead-details {
    display: block;
  }

  .crm-lead-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

  .crm-lead-summary label {
    font-weight: 600;
    font-size: 13px;
    margin-right: 6px;
    color: #4a5568;
  }

  .crm-lead-summary select {
    padding: 4px 8px;
    border-radius: 8px;
    border: none;
    background-color: #f3f4f6;
    font-weight: bold;
    color: #374151;
    font-size: 13px;
    margin-right: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    outline: none;
    display: inline-block;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
  }

  .crm-lead-summary .pair {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 140px;
  }


  .crm-modal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
  }

  .crm-modal.crm-show {
    display: flex;
  }

  .crm-modal-content {
    position: relative;
    background-color: white;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    /* height: auto; */
    /* max-height: 90vh; */
    max-height: 90dvh;
    height: auto;
    /* overflow: hidden; */
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    overflow-y: auto;
  }

  .crm-modal-inner {
    overflow-y: auto;
    padding: 24px;
    box-sizing: border-box;
    height: 100%;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
  }

  .crm-modal-inner {
    padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
  }

  .crm-modal-inner::-webkit-scrollbar {
    width: 6px;
  }

  .crm-modal-inner::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 3px;
  }

  .crm-close-btn {
    position: absolute;
    top: 16px;
    right: 22px;
    font-size: 28px;
    font-weight: bold;
    color: red;
    cursor: pointer;
  }

  .crm-modal-content h2 {
    text-align: center;
    margin-bottom: 20px;
  }

  .crm-modal-content fieldset {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 20px;
  }

  .crm-modal-content legend {
    font-weight: bold;
    font-size: 15px;
    padding: 0 6px;
  }

  .crm-modal-content label {
    display: block;
    margin-top: 10px;
    font-weight: 500;
  }

  .crm-modal-content input,
  .crm-modal-content select,
  .crm-modal-content textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 15px;
    box-sizing: border-box;
  }

  .crm-lead-details-added-date,
  .crm-lead-details-added-time,
  .crm-lead-details-added-date,
  .crm-lead-details-reschedule,
  .crm-lead-details-remarks,
  .crm-lead-details-added-by,
  .crm-lead-details-do-reschedule {
    font-size: 13px;
    color: #4a5568;
    margin: 4px 0;
  }

  .crm-lead-details-remarks.city {
    cursor: copy;
  }

  .crm-lead-details-added,
  .crm-lead-details-addedby-reschedule {
    display: flex;
    justify-content: space-between;
  }

  .crm-lead-card {
    background: linear-gradient(145deg, #ffffff, #f7f7f7);
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    overflow: hidden;
    /* padding-bottom: 40px; */
    /* z-index: 1; */
  }

  .crm-unassigned-ribbon {
    position: absolute;
    top: 29px;
    left: -45px;
    background: #e53e3e;
    color: white;
    padding: 4px 60px;
    transform: rotate(-45deg);
    font-weight: bold;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }


  .crm-lead-card.lost {
    background: #ff00008a;
  }

  .crm-lead-card.junk {
    background: #dbd73e8a;
  }

  .crm-lead-card.closed {
    background: #c2ffae;
  }

  @media (hover: hover) and (pointer: fine) {
    .crm-lead-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    }
  }

  .crm-lead-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .crm-lead-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #2b6cb0;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    margin-right: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }

  .crm-lead-info {
    flex-grow: 1;
  }

  .crm-lead-name {
    all: unset;
    font-weight: 700;
    font-size: 18px;
    margin: 0;
    color: #2d3748;
  }

  .crm-status {
    background-color: red;
    color: white;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 8px;
    margin-left: 8px;
    vertical-align: middle;
    font-weight: bold;
    background-color: #f0f0f0;
    color: #333333;

    /* ADDED LATER TO FIX LEAD STATUS  */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
  }

  .crm-status.hot {
    background-color: #ffe5ec;
    color: #a92a2a;
  }

  .crm-status.enquiry {
    background-color: #ffefd1;
    color: #b26a00;
  }

  .crm-status.cold {
    background-color: #cceeff;
    color: #0050b3;
  }

  .crm-status.junk {
    background-color: #e0e0e0;
    color: #595959;
  }


  .crm-contact {
    font-size: 14px;
    color: #4a5568;
    margin-bottom: 10px;
    margin-top: 3px;
    cursor: copy;
  }

  .crm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }

  .crm-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    background: #edf2f7;
    color: #4a5568;
  }

  .crm-tag.leadstatus {
    background: #ebf8ff;
    color: #3182ce;
  }

  .crm-tag.sourceoflead {
    background: #fff0f5;
    color: #d53f8c;
  }

  .crm-tag.paid {
    background: #d4f7e4;
    color: #2a7a4f;
  }

  .crm-tag.notpaid {
    background: #fcdcdc;
    color: #b72e2e;
  }

  .crm-tag.enquiry {
    background-color: #d0e7ff;
    color: #0a3d62;
  }

  .crm-assigned,
  .crm-followupdate {
    font-size: 13px;
    color: #2d3748;
    font-weight: 500;
    margin-bottom: 8px;
  }

  .crm-assigned-follwupdate {
    display: flex;
    justify-content: space-between;
  }

  .crm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: relative;
  }

  .crm-actions svg,
  .crm-actions span {
    width: 20px;
    height: 20px;
    color: #4a5568;
    cursor: pointer;
    font-size: 20px;
  }

  .crm-menu {
    position: absolute;
    top: 28px;
    right: 0;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    display: none;
    flex-direction: column;
    z-index: 100;
    width: 180px;
    max-height: 150px;
    overflow-y: auto;
  }

  .crm-menu::-webkit-scrollbar {
    width: 3px;
  }

  .crm-menu::-webkit-scrollbar-track {
    background: transparent;
  }

  .crm-menu::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }

  .crm-menu::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }

  .crm-menu button {
    padding: 10px 16px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    min-width: 115px;
  }

  @media (hover: hover) and (pointer: fine) {
    .crm-menu button:hover {
      background-color: #c4d9e8;
    }
  }

  .crm-menu button:disabled {
    cursor: not-allowed;
  }

  .crm-lead-summary label {
    font-weight: 600;
    font-size: 13px;
    margin-right: 6px;
    color: #4a5568;
    display: inline-block;
  }

  .crm-sidebar-toggle {
    background-color: #2d3748;
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    font-size: 16px;
  }

  .crm-sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    background: linear-gradient(180deg, #1a202c, #2a4365);
    color: white;
    transition: left 0.4s ease;
    padding: 24px 16px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.3);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .crm-sidebar.crm-show {
    left: 0;
  }

  .crm-sidebar h2 {
    font-size: 22px;
    margin-bottom: 24px;
    color: #f7fafc;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 12px;
  }

  .crm-sidebar a {
    padding: 12px 16px;
    margin: 6px 0;
    border-radius: 8px;
    text-decoration: none;
    color: #f7fafc;
    font-weight: 600;
    transition: background 0.3s, transform 0.2s;
  }

  @media (hover: hover) and (pointer: fine) {
    .crm-sidebar a:hover {
      background-color: rgba(255, 255, 255, 0.15);
      transform: translateX(4px);
    }
  }

  .crm-sidebar-close {
    align-self: flex-end;
    background: none;
    border: none;
    font-size: 26px;
    color: #fff;
    cursor: pointer;
    margin-bottom: 10px;
  }

  #crm-search::-webkit-search-cancel-button {
    cursor: pointer;
  }

  #crm-salesperson-filter {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
  }

  .crm-search-wrapper,
  .crm-customer-outreach-search-wrapper {
    position: relative;
    width: 100%;
    max-width: 40%;
  }

  .crm-search-wrapper input[type="search"],
  .crm-customer-outreach-search-wrapper input[type="search"] {
    width: 100%;
    /* padding-right: 50px;  */
    padding-right: 100px;
    padding-left: 12px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 13px;
    height: 44px;
  }

  .crm-global-section-search-btn,
  .crm-customer-outreach-btn {
    position: absolute;
    top: 7px;
    right: 1px;
    height: 42px;
    background-color: #2d3748;
    color: #fff;
    border: none;
    padding: 0 40px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }

  .crm-customer-outreach-btn {
    top: 1px;
    /* background-color: #f5233c; */
    background: linear-gradient(135deg, #3b82f6, #f5233c);
  }

  .crm-global-section-search-btn:hover,
  .crm-customer-outreach-btn:hover {
    background-color: #2d3748bd;
  }

  .crm-filters {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: white;
    margin: 20px;
    border-radius: 12px;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .crm-filters input,
  .crm-filters select {
    padding: 12px;
    margin: 6px 0;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 13px;
    flex: 1;
    height: 42px;
  }

  .crm-filters input:focus,
  .crm-filters select:focus {
    outline: none;
    box-shadow: none;
  }

  .flatpickr-wrapper {
    position: relative;
    display: inline-block;
  }

  .flatpickr-wrapper input {
    padding-right: 24px;
  }

  .clear-btn-crm-date-filter {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    color: #999;
    display: none;
  }

  .flatpickr-wrapper input:not(:placeholder-shown)+.clear-btn {
    display: inline;
  }

  .crm-lead-filter-daterange {
    width: 100%;
    padding: 12px 36px 12px 12px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
  }

  .crm-toggle-buttons-filters {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
  }

  .crm-status-toggle {
    display: flex;
    justify-content: end;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
  }

  .crm-status-toggle button {
    position: relative;
    /* flex: 1; */
    padding: 10px 14px;
    border: none;
    border-radius: 6px;
    background-color: #edf2f7;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media only screen and (min-width: 200px) and (max-width: 767px) {
    .crm-status-toggle button {
      padding: 6px 8px;
    }

    .crm-toggle-filters button {
      padding: 5px 8px !important;
    }

    .crm-search-wrapper,
    .crm-customer-outreach-search-wrapper {
      max-width: 100%;
    }

    .crm-global-section-search-btn,
    .crm-customer-outreach-btn {
      padding: 0 19px;
    }

    .crm-search-wrapper input[type="search"],
    .crm-customer-outreach-search-wrapper input[type="search"] {
      padding-right: 55px;
    }
  }

  .crm-status-toggle span {
    font-weight: 600;
    font-size: 12px;
  }

  .crm-status-toggle button.active {
    background-color: #2d3748;
    color: white;
  }

  @media(min-width: 768px) {
    .crm-filters {
      flex-direction: row;
      gap: 16px;
      align-items: center;
      flex-wrap: wrap;
    }

    .crm-status-toggle {
      margin-top: 0;
    }
  }

  .crm-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #f14a4a;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: bold;
    line-height: 1;
  }

  .crm-toggle-filters button {
    background: #2d3748;
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .crm-toggle-filters .crm-filter-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #f14a4a;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: bold;
    display: none;
  }

  .crm-toggle-filters .crm-filter-badge.show {
    display: block;
  }

  .crm-badge:empty {
    display: none;
  }

  .crm-placeholder-content {
    grid-column: 1 / -1;
    padding: 60px 30px;
    text-align: center;
    background: url('https://www.transparenttextures.com/patterns/cubes.png') center/cover no-repeat, #f7fafc;
    border-radius: 16px;
    margin: 20px 0;
    color: #2d3748;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-blend-mode: overlay;
  }

  .crm-placeholder-content img {
    max-width: 180px;
    margin-bottom: 20px;
    opacity: 0.85;
  }

  .crm-placeholder-content p {
    font-size: 24px;
    font-weight: 700;
    /* background: linear-gradient(90deg, #7ac3fc, #a7db58); */
    background: linear-gradient(90deg, #2d3748, #7ac3fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-align: center;
    line-height: 1.6;
    max-width: 600px;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    margin: 0;
    padding: 0 20px;
    letter-spacing: 0.3px;
  }

  @media (max-width: 600px) {
    .crm-placeholder-content p {
      font-size: 18px;
    }
  }

  .crm-sidebar a.active {
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-weight: bold;
    border-left: 4px solid #63b3ed;
    padding-left: 12px;
  }

  [class^="crm-link-"] {
    cursor: pointer;
  }

  .crm-tost {
    position: fixed;
    top: 60px;
    right: 20px;
    color: #fff;
    padding: 10px 20px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-20px);
    z-index: 10000;
    max-width: 90%;
  }

  .crm-tost.success {
    background-color: #d4edda;
    color: #155724;
  }

  .crm-tost.failed {
    background-color: #f8d7da;
    color: #721c24;
  }

  .crm-tost.processing {
    background-color: #d1ecf1;
    color: #0c5460;
  }

  .crm-tost-progress-bar.processing {
    background-color: #17a2b8;
  }

  .crm-tost-progress-bar.success {
    background-color: #28a745;
  }

  .crm-tost-progress-bar.failed {
    background-color: #dc3545;
  }

  .crm-tost.crm-show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

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

  .crm-tost-message {
    font-size: 15px;
    flex: 1 1 auto;
  }

  .crm-tost-close-btn {
    cursor: pointer;
    background: none;
    border: none;
    font-size: 20px;
    padding-left: 10px;
    flex-shrink: 0;
  }

  .crm-tost-progress-bar {
    height: 4px;
    width: 100%;
    margin-top: 10px;
    border-radius: 2px;
    transform-origin: left;
    transition: none;
  }

  .crm-tost-progress-bar.crm-animate {
    animation: crm-shrink var(--crm-duration, 3s) linear forwards;
  }

  .crm-tost span {
    font-weight: 500;
  }

  @media (max-width: 600px) {
    .crm-tost {
      top: 20px;
      right: 10px;
      left: 10px;
      max-width: unset;
      padding: 10px 12px;
      font-size: 14px;
      transform: translateY(0);
    }

    .crm-tost-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      gap: 8px;
    }

    .crm-tost-message {
      flex: 1 1 auto;
      font-size: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .crm-tost-close-btn {
      flex-shrink: 0;
      font-size: 18px;
      padding-left: 8px;
      line-height: 1;
    }

    .crm-tost-progress-bar {
      margin-top: 8px;
      height: 3px;
    }
  }



  .crm-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 20px;
  }

  .crm-pagination button {
    background-color: #2d3748;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .crm-pagination button:hover {
      background-color: #4a5568;
    }
  }

  .crm-pagination button:disabled {
    cursor: not-allowed;
    background-color: #c4b1b1;
  }

  .crm-pagination button.active {
    background-color: #1a202c;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2d3748;
  }

  .crm-lead-skeleton {
    display: flex;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    position: relative;
  }

  .crm-lead-skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150px;
    height: 100%;
    width: 150px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 1.2s infinite;
  }

  .crm-lead-skeleton-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #e2e8f0;
    flex-shrink: 0;
  }

  .crm-lead-skeleton-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .crm-skel-line {
    height: 14px;
    background: #e2e8f0;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
  }

  .crm-skel-line.short {
    width: 25%;
  }

  .crm-skel-line.medium {
    width: 50%;
  }

  .crm-skel-line.long {
    width: 90%;
  }

  .crm-skel-badges {
    display: flex;
    gap: 8px;
    margin-top: 6px;
  }

  .crm-skel-badge {
    height: 22px;
    width: 60px;
    border-radius: 12px;
    background: #e2e8f0;
    position: relative;
    overflow: hidden;
  }

  @keyframes shimmer {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(100%);
    }
  }



  .crm-reschedule-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .crm-reschedule-modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 14px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
  }

  .crm-reschedule-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
  }

  .crm-reschedule-modal-title {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #2d3748;
    text-align: center;
  }

  .crm-reschedule-modal-field {
    margin-bottom: 24px;
  }

  .crm-reschedule-modal-field label {
    display: block;
    margin-bottom: 8px;
    color: #4a5568;
    font-weight: 600;
  }

  .crm-reschedule-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
  }


  .crm-reschedule-submit-btn {
    background-color: #3182ce;
    color: white;
    border: none;
    padding: 12px 18px;
    width: 100%;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
  }

  .crm-reschedule-submit-btn:hover {
    background-color: #2b6cb0;
  }

  .crm-reschedule-submit-btn:disabled {
    cursor: not-allowed;
    background-color: grey;
  }

  @media only screen and (min-width: 200px) and (max-width: 767px) {
    .crm-reschedule-modal-content {
      width: 76%;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .crm-filter-panel {
    display: none;
    background: linear-gradient(to bottom right, #f8fafc, #e2e8f0);
    padding: 0;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
    position: absolute;
    top: 100%;
    left: 0;
    width: 300px;
    z-index: 1000;
    margin-top: 10px;
    overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
    animation: slideFade 0.3s ease-in-out;
    max-height: 300px;
    overflow-y: auto;
  }

  .crm-filter-panel::-webkit-scrollbar {
    width: 8px;
  }

  @media (max-width: 767px) {
    .crm-filter-panel {
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: calc(100% - 40px);
    }
  }

  .crm-filter-category {
    padding: 16px 20px;
    font-weight: 600;
    border-bottom: 1px solid #dcdcdc;
    background-color: #2d3748;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
  }

  @media (hover: hover) and (pointer: fine) {
    .crm-filter-category:hover {
      background-color: #3b414b;
      padding-left: 26px;
    }
  }

  .crm-filter-options {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 16px 22px;
    background-color: #ffffff;
    animation: slideFade 0.3s ease-in-out;
  }

  .crm-filter-options.show {
    display: flex;
  }

  .crm-filter-options label {
    font-size: 15px;
    color: #1a202c;
    font-weight: 500;
    padding: 6px 12px;
    background: #f7fafc;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
  }

  @media (hover: hover) and (pointer: fine) {
    .crm-filter-options label:hover {
      background: #e2e8f0;
    }
  }

  @keyframes slideFade {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .crm-custom-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #f7fafc;
    cursor: pointer;
    position: relative;
    font-size: 15px;
    font-weight: 500;
    color: #1a202c;
    user-select: none;
    transition: background 0.2s;
  }

  @media (hover: hover) and (pointer: fine) {
    .crm-custom-checkbox:hover {
      background-color: #e2e8f0;
    }
  }

  .crm-custom-checkbox input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }

  .crm-checkmark {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: 2px solid #4a5568;
    border-radius: 4px;
    transition: background-color 0.2s, border-color 0.2s;
    flex-shrink: 0;
    position: relative;
  }

  .crm-custom-checkbox input[type="checkbox"]:checked+.crm-checkmark {
    background-color: #4a5568;
    border-color: #4a5568;
  }

  .crm-checkmark::after {
    content: '';
    position: absolute;
    display: none;
    left: 4px;
    top: 0px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .crm-custom-checkbox input[type="checkbox"]:checked+.crm-checkmark::after {
    display: block;
  }

  /* CUSTOMERDATA SUGGESTION STYLING */
  .crm-input-group {
    /* margin-bottom: 16px; */
    position: relative;
  }

  .crm-input-group label {
    /* font-weight: 600; */
    display: block;
    /* margin-bottom: 6px; */
    color: #2d3748;
  }

  .crm-input-group input,
  .crm-input-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
  }

  .crm-input-group input:focus {
    border-color: #3182ce;
  }

  .crm-suggestion-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: white;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 180px;
    overflow-y: auto;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    display: none;
  }

  .crm-suggestion-list li {
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.2s;
  }

  .crm-suggestion-list li:hover {
    background-color: #f1f5f9;
  }

  .crm-select-wrap select {
    appearance: none;
    background: #fff;
    border-radius: 8px;
  }

  /* CRM FEEDBACK STYLING STARTS FROM HERE  */
  .crm-feedback-form-wrapper {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }

  .crm-feedback-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .crm-feedback-form-label {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }

  .crm-feedback-form-textarea {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 10px;
    resize: vertical;
    box-sizing: border-box;
    min-height: 120px;
  }

  .crm-feedback-form-submit {
    padding: 14px;
    font-size: 16px;
    background-color: #1e1e2f;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .crm-feedback-form-submit:hover {
    background-color: #33334d;
  }

  .crm-feedback-form-submit:disabled {
    cursor: not-allowed;
    background: gray;
  }

  /* Optional: Add responsiveness for smaller screens */
  @media (max-width: 480px) {

    .crm-feedback-form-textarea,
    .crm-feedback-form-submit {
      font-size: 15px;
      padding: 12px;
    }
  }

  /* CRM FEEDBACKS STYLING ENDS HERE  */

  /* MORE INFORMATION MODAL STYLING STARTS FROM HERE */
  .crm-more-info-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.55);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    backdrop-filter: blur(4px);
  }

  .crm-more-info-content {
    background-color: #ffffff;
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    animation: fadeInModal 0.3s ease-out;
    position: relative;
  }

  .crm-more-info-content h2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    padding: 20px 24px 0;
    margin: 0;
    line-height: 1.4;
    word-break: break-word;
  }

  #additional_details_customer_name {
    font-weight: 600;
    color: #1d4ed8;
    font-size: 17px;
  }

  .crmmoreinfo--close-btn {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
  }

  .crmmoreinfo--close-btn:hover {
    color: #ef4444;
    transform: scale(1.2);
  }

  .crm-more-info-body {
    padding: 20px 24px;
    overflow-y: auto;
    max-height: 65vh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 15px;
    color: #2d3748;
  }

  .crm-more-info-body::-webkit-scrollbar {
    width: 8px;
  }

  .crm-more-info-body::-webkit-scrollbar-track {
    background: transparent;
  }

  .crm-more-info-body::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 8px;
  }

  .crm-more-info-body::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
  }

  .crm-more-info-body {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }

  .crm-more-info-body p {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    background: #4a5568;
    padding: 10px 12px;
    border-radius: 10px;
    margin: 0;
    line-height: 1.6;
    word-break: break-word;
  }

  .crm-more-info-body p i {
    color: #2563eb;
    font-size: 15px;
    min-width: 16px;
    margin-top: 2px;
  }

  .crm-label {
    font-weight: 600;
    color: #fff;
    /* min-width: 80px; */
  }

  .crm-value {
    font-weight: 400;
    color: #81ff99;
    flex: 1;
  }

  .crm-value.failed {
    color: #ff9e9e;
  }

  .crm-product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
  }

  .crm-product-chip {
    background-color: #97bdfe;
    color: #1d4ed8;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .crm-product-chip:hover {
    background-color: #dbeafe;
    cursor: default;
  }

  .crm-product-chip i {
    font-size: 14px;
  }

  @keyframes fadeInModal {
    from {
      transform: scale(0.96);
      opacity: 0;
    }

    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  @media (max-width: 600px) {
    .crm-more-info-content {
      width: 100%;
      max-height: 90vh;
      border-radius: 12px;
    }

    .crm-more-info-body {
      padding: 16px;
      font-size: 14px;
      max-height: 70vh;
    }

    .crm-more-info-content h2 {
      font-size: 18px;
      padding: 18px 16px 0;
    }

    .crmmoreinfo--close-btn {
      top: 14px;
      right: 16px;
      font-size: 22px;
    }
  }

  /* MORE INFORMATION MODAL STYLING ENDS HERE */

}

@keyframes crm-shrink {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

/* CRM STYLING ENDS HERE */

/* CRM ANALYTIC SECTION STYLING STARTS FROM HERE */
:root {
  --crm-bg: #2d3748;
  --crm-card-bg: #3a4759;
  --crm-table-bg: #1a202c;
  --crm-border: #4a5568;
  --crm-text-light: #e2e8f0;
  --crm-accent: #3182ce;
  --crm-success: #38a169;
  --crm-danger: #e53e3e;
  --crm-muted: #718096;
  --crm-followup: #b0902e;
  --crm-followup-due: #a02020;
}

.crm-analytical-section {
  background-color: var(--crm-bg);
  padding: 20px;
  border-radius: 12px;
  color: var(--crm-text-light);
  font-family: 'Segoe UI', sans-serif;
}

.crm-analytical-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.crm-analytical-card {
  background-color: var(--crm-card-bg);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.crm-analytical-card div {
  font-size: 20px;
  font-weight: bold;
  margin-top: 4px;
}

.bg-primary {
  background-color: var(--crm-accent);
}

.bg-success {
  background-color: var(--crm-success);
}

.bg-danger {
  background-color: var(--crm-danger);
}

.bg-muted {
  background-color: var(--crm-muted);
}

.bg-followup {
  background-color: var(--crm-followup);
}

.bg-followup-due {
  background-color: var(--crm-followup-due);
}

.crm-analytical-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
  align-items: flex-end;
}

.crm-analytical-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #cbd5e0;
}

.crm-analytical-input,
.crm-analytical-select {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #a0aec0;
  font-size: 14px;
  background-color: #edf2f7;
  color: #2d3748;
  text-align: center;
}

.crm-analytical-table-wrapper {
  overflow-x: auto;
  border-radius: 10px;
  background-color: var(--crm-table-bg);
}

.crm-analytical-table-wrapper::-webkit-scrollbar {
  height: 3px;
}

.crm-analytical-table-wrapper::-webkit-scrollbar-thumb {
  background-color: #2c5282;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.crm-analytical-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 800px;
}

.crm-analytical-table th,
.crm-analytical-table td {
  padding: 10px;
  border: 1px solid var(--crm-border);
  color: var(--crm-text-light);
  text-align: center;
}

.crm-analytical-table td {
  cursor: pointer;
}

.crm-analytical-table tr:hover {
  background-color: #334155;
}

.crm-analytical-table th {
  background-color: #2c5282;
}

.crm-analytical-sticky {
  position: sticky;
  left: 0;
  background-color: #2c5282;
  z-index: 1;
  text-align: left;
  font-weight: 600;
}

@media (max-width: 768px) {
  .crm-analytical-card {
    font-size: 13px;
  }

  .crm-analytical-card div {
    font-size: 18px;
  }

  .crm-analytical-table {
    font-size: 12px;
  }

  .crm-analytical-filter-row {
    flex-direction: column;
    align-items: stretch;
  }
}

.crm-analytical-filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 24px;
  align-items: flex-end;
}

.crm-analytical-filter-group {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  flex: 1;
}

.crm_analytics_dashboard_download_btn {
  font-size: 14px;
  background-color: rgb(237, 242, 247);
  color: rgb(45, 55, 72);
  padding: 8px 12px;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(160, 174, 192);
  border-image: initial;
}

.crm-analytical-input,
.crm-analytical-select {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #a0aec0;
  font-size: 14px;
  background-color: #edf2f7;
  color: #2d3748;
}

@media (max-width: 768px) {
  .crm-analytical-filter-container {
    /* flex-direction: column; */
    gap: 16px;
  }
}

.flatpickr-calendar {
  z-index: 9999 !important;
}

/* CRM ANALYTIC STYLING ENDS HERE */

/* CRM ANALYTIC SKELETON STYLING STARTS FROM HERE */
.skeleton-analytic {
  background: linear-gradient(90deg, #3a4759 25%, #4a5568 50%, #3a4759 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.crm-skeleton-analytic-summary-card,
.crm-skeleton-analytic-filter,
.crm-skeleton-analytic-table-row td {
  height: 18px;
  margin: 8px 0;
}

.crm-skeleton-analytic-summary-card {
  height: 60px;
  border-radius: 10px;
}

.crm-skeleton-analytic-filter {
  height: 32px;
  border-radius: 6px;
}

.crm-skeleton-analytic-table-row td {
  height: 14px;
  border-radius: 4px;
}

.crm-skeleton-analytic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 800px;
}

.crm-skeleton-analytic-table th,
.crm-skeleton-analytic-table td {
  padding: 10px;
  border: 1px solid var(--crm-border);
  text-align: center;
  color: transparent;
}

/* CRM ANALYTIC SKELETON STYLING ENDS HERE */


/* CRM ADD SALES MODAL STYLING STARTS FROM HERE  */

.crm-addsales-modal,
.crm-addsales-modal * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
}

.crm-addsales-h2 {
  margin-bottom: 15px;
}

.crm-addsales-close-modal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: #888;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem 0.5rem;
  transition: color 0.2s;
}

.crm-addsales-close-modal:hover {
  color: #333;
}

#crm_minimize_modal_minimizeBtn {
  background-color: transparent;
  border: 1px solid #007BFF;
  color: #007BFF;
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  user-select: none;
  min-width: 70px;
  text-align: center;
}

#crm_minimize_modal_minimizeBtn:hover {
  background-color: #007BFF;
  color: white;
}

.crm_minimize_modal_sidebar {
  display: none;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #f0f4f8;
  border-left: 2px solid #007BFF;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  padding: 1px 8px;
  border-radius: 10px 0 0 10px;
  z-index: 100;
  min-width: 50px;
}

.crm_minimize_modal_icon {
  background: #ffffff;
  color: #007BFF;
  border: 1px solid #007BFF;
  padding: 10px 14px;
  margin: 8px 0;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 5px rgba(0, 123, 255, 0.1);
  white-space: nowrap;
}

#crm_minimize_modal_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

#crm_minimize_modal_overlay.hidden {
  display: none;
}

#crm_minimize_modal {
  background: #fff;
  border-radius: 5px;
  width: 400px;
  max-width: 90%;
  overflow: hidden;
}

.crm_minimize_modal_header {
  background: #007BFF;
  color: white;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.crm_minimize_modal_title {
  font-size: 18px;
}

.crm_minimize_modal_buttons button {
  background: transparent;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  margin-left: 10px;
}

.crm_minimize_modal_body {
  padding: 15px;
}

.crm_minimize_modal_main_content {
  padding: 20px;
}

.crm-addsales-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
}

.crm-addsales-modal-content {
  background: #fff;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
}

h2 {
  margin-bottom: 1rem;
  color: #333;
}

.crm-addsales-section {
  margin-bottom: 1.25rem;
}

.crm-addsales-section>label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
}

.crm-addsales-input-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.crm-addsales-input-group label {
  position: absolute;
  top: 0.8rem;
  left: 0.7rem;
  font-size: 0.95rem;
  color: #999;
  pointer-events: none;
  transition: all 0.2s ease-out;
  z-index: 1;
  background-color: transparent;
  padding: 0 5px;
}

.crm-addsales-input-group input[type="text"],
.crm-addsales-input-group input[type="number"],
.crm-addsales-input-group input[type="tel"],
.crm-addsales-input-group input[type="email"],
.crm-addsales-input-group textarea {
  width: 100%;
  padding: 0.7rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  transition: border-color .2s, padding 0.2s ease-out;
  font-size: 0.95rem;
  background-color: #fff;
  position: relative;
  z-index: 0;
}

.crm-addsales-input-group select {
  width: 100%;
  padding: 0.7rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  transition: border-color .2s, padding 0.2s ease-out;
  font-size: 0.95rem;
  background-color: #fff;
  position: relative;
  z-index: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2C118.8L146.2%2C259.6c-4.4%2C4.4-11.4%2C4.4-15.8%2C0L5.4%2C118.8c-4.4-4.4-4.4-11.4%2C0-15.8c4.4-4.4%2C11.4-4.4%2C15.8%2C0l124.6%2C124.6l124.6-124.6c4.4-4.4%2C11.4-4.4%2C15.8%2C0C291.4%2C107.4%2C291.4%2C114.4%2C287%2C118.8z%22%2F%3E%3C%2Fsvg%3E');
  /* Custom arrow */
  background-repeat: no-repeat;
  background-position: right 0.7rem top 50%;
  background-size: 0.65em auto;
}

.crm-addsales-input-group input:focus,
.crm-addsales-input-group select:focus,
.crm-addsales-input-group textarea:focus {
  outline: none;
  border-color: #0078D4;
}

.crm-addsales-input-group input:focus+label,
.crm-addsales-input-group input:not(:placeholder-shown)+label,
.crm-addsales-input-group textarea:focus+label,
.crm-addsales-input-group textarea:not(:placeholder-shown)+label,
.crm-addsales-input-group select:focus+label {
  top: -0.6rem;
  font-size: 0.75rem;
  color: #0078D4;
  background-color: #fff;
  z-index: 2;
}

.crm-addsales-input-group select:not([value=""])+label,
.crm-addsales-input-group select:valid+label {
  top: -0.6rem;
  font-size: 0.75rem;
  color: #0078D4;
  background-color: #fff;
  z-index: 2;
}

.crm-addsales-input-group input::placeholder,
.crm-addsales-input-group textarea::placeholder {
  color: transparent;
}

.crm-addsales-products {
  display: grid;
  gap: 0.7rem;
}

.crm-addsales-product-row {
  background: #fafbfc;
  border: 1px solid #e0e4e8;
  border-radius: 6px;
  padding: 0.8rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  position: relative;
}

.crm-addsales-remove-product {
  position: absolute;
  /* top: 0.5rem; right: 0.5rem; */
  top: 0px;
  right: 0px;
  background: #e04f5f;
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.crm-addsales-remove-product:hover {
  background: #cc3f4f;
}

.crm-addsales-suggestions {
  text-align: left;
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  width: calc(100% - 2px);
  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.crm-addsales-suggestion {
  padding: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.crm-addsales-suggestion.selected,
.crm-addsales-suggestion:hover {
  background: #f0f0f0;
}

.clear-selection {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 1rem;
  font-weight: bold;
  color: #0078D4;
  cursor: pointer;
  z-index: 2;
}

.clear-selection:hover {
  color: #d00;
}

input.locked {
  background-color: #f9f9f9;
  cursor: not-allowed;
  color: #555;
}

.crm-addsales-upload-label {
  display: block;
  background: #0078D4;
  color: #fff;
  padding: 1rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  border: 2px dashed transparent;
}

.crm-addsales-upload-label:hover {
  background: #005a9e;
}

.crm-addsales-upload-label input[type="file"] {
  display: none;
}

.crm-addsales-upload-label.drag-over {
  background: #e0f2f7;
  color: #0078D4;
  border-color: #0078D4;
}

.crm-addsales-upload-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}

.crm-addsales-upload-preview img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.crm-addsales-preview-box {
  position: relative;
}

.crm-addsales-preview-box button {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #e04f5f;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crm-addsales-toggle-container {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.crm-addsales-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.crm-addsales-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.crm-addsales-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.crm-addsales-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.crm-addsales-slider {
  background-color: #e04f5f;
}

input:focus+.crm-addsales-slider {
  box-shadow: 0 0 1px #e04f5f;
}

input:checked+.crm-addsales-slider:before {
  transform: translateX(16px);
}

.crm-addsales-btn {
  background: #0078D4;
  color: #fff;
  border: none;
  padding: 0.85rem;
  font-size: 1rem;
  width: 100%;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s;
  font-weight: 600;
}

.crm-addsales-btn:hover {
  background: #005a9e;
}

.crm-addsales-btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  width: auto !important;
  margin-top: 8px;
}

.crm-addsales-fieldset {
  border: 1px solid #e0e4e8;
  border-radius: 8px;
  padding: 1rem 1.5rem 0.5rem 1.5rem;
  margin-bottom: 1.5rem;
  background: #fff;
}

.crm-addsales-fieldset legend {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  padding: 0 0.5rem;
  margin-left: -0.5rem;
}

@media (min-width: 600px) {
  .crm-addsales-product-row {
    grid-template-columns: 2.5fr 1fr 1fr 1fr auto;
    align-items: center;
  }

  .crm-addsales-customer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px 9px;
  }
}


/* CRM CUSTOMER SECTION STYLING STARTS FROM HERE  */
.crm-customers-section-wrapper {
  padding: 20px;
  font-family: "Segoe UI", Roboto, sans-serif;
  background-color: #f0f2f5;
}

.crm-customers-section-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.crm-customers-section-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.crm-customers-section-search,
.crm-customers-section-filter {
  flex: 1 1 100%;
  padding: 12px 14px;
  font-size: 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background-color: #fff;
  transition: 0.2s border-color ease;
}

.crm-customers-section-search:focus,
.crm-customers-section-filter:focus {
  border-color: #007bff;
  outline: none;
}

@media (min-width: 600px) {
  .crm-customers-section-search {
    flex: 2 1 300px;
  }

  .crm-customers-section-filter {
    flex: 1 1 150px;
  }
}

.crm-customers-section-view-toggle {
  display: flex;
  gap: 10px;
  align-items: center;
}

.crm-customer-export {
  padding: 8px;
  background: #2d3748;
  color: white;
  border-radius: 10px;
  cursor: pointer;
}

.crm-view-btn {
  padding: 10px 16px;
  font-size: 11px;
  background: #e0e0e0;
  color: #333;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.crm-view-btn.active {
  background-color: #2d3748;
  color: #fff;
}

.crm-customer-section-view-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.crm-customers-section-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.crm-customers-section-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

.crm-customer-header {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.crm-customer-info {
  font-size: 14px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.crm-customer-tags {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crm-tag {
  font-size: 12px;
  background-color: #007bff1a;
  color: #007bff;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 500;
}

.crm-view-table {
  margin-top: 20px;
  overflow-x: auto;
}

.crm-customers-section-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  min-width: 600px;
}

.crm-customers-section-table th,
.crm-customers-section-table td {
  padding: 14px 16px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.crm-customers-section-table th {
  background-color: #2d3748;
  color: #fff;
  font-weight: 600;
}

.crm-customers-section-table tr:hover td {
  background-color: #f6faff;
}

.crm-customers-section-list p {
  text-align: center;
  font-size: 16px;
  color: #777;
  padding: 30px 0;
}

.crm-customer-section-card-ribbon-vertical {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-color: #007bff;
  color: #fff;
  writing-mode: vertical-rl;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 4px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.1);
}

.crm-customer-section-source-organic {
  background-color: #90CAF9;
  /* Light Blue */
}

.crm-customer-section-source-social {
  background-color: #B39DDB;
  /* Light Purple */
}

.crm-customer-section-source-direct {
  background-color: #A5D6A7;
  /* Light Green */
}

.crm-customer-section-source-default {
  background-color: #B0BEC5;
  /* Soft Gray */
}


.crm-customer-section-customer-info strong {
  color: #007bff;
  font-weight: 500;
}

#crm-customers-section-limit {
  padding: 8px 12px;
  border-radius: 6px;
  background-color: #f1f1f1;
  font-size: 14px;
  border: 1px solid #ccc;
}

.crm-customers-section-search-group {
  display: flex;
  flex: 2 1 300px;
  gap: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.crm-customers-section-search {
  border: none;
  flex: 1;
  padding: 12px 14px;
  font-size: 16px;
  outline: none;
}

.crm-customers-section-search-btn {
  background-color: #2d3748;
  color: #fff;
  border: none;
  padding: 0 16px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
}

.crm-customers-section-search-btn:hover {
  background-color: #2d3748bd;
}

.crm-card-info-box {
  border: 1px dotted #ccc;
  padding: 12px;
  border-radius: 10px;
  background: #f9f9fb;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crm-card-info-box p {
  margin: 0;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 6px;
}

.crm-card-info-box strong {
  color: #007bff;
}

/* CRM CUSTOMER SECTION STYLING ENDS HERE  */

/* CRM AI ANALYTICAL MODAL STYLING STARTS FROM HERE  */
.crm-analytics-ai-modal-salesperson {
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 1.2rem;
  color: #00f2fe;
  text-decoration: underline;
}

/* Modal Styles */
#crm-analytics-ai-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 15, 20, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#crm-analytics-ai-modal.hidden {
  display: none;
}

.crm-analytics-ai-modal-content {
  background: #1e1e2f;
  padding-left: 30px;
  padding-right: 30px;
  /* border-radius: 16px; */
  width: 100%;
  /* max-width: 1000px; */
  position: relative;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.15);
  /* max-height: 90vh; */
  height: 99%;
  overflow-y: auto;
}

.crm-analytics-ai-modal-close {
  position: absolute;
  top: 14px;
  right: 20px;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
}

/* Dashboard */
.crm-analytics-ai-modal-dashboard {
  padding: 30px 0;
}

.crm-analytics-ai-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.crm-analytics-ai-modal-header h1 {
  font-size: 1.8rem;
  color: #00f2fe;
}

#dblclick-crm {
  cursor: pointer;
}

.crm-analytics-ai-modal-date-range {
  font-size: 1rem;
  color: #aaa;
}

.crm-analytics-ai-modal-bar {
  height: 18px;
  background: #444;
  border-radius: 10px;
  overflow: hidden;
  margin: 20px 0 10px;
  display: flex;
}

.crm-analytics-ai-modal-bar-segment.closed {
  background: #00ffab;
}

.crm-analytics-ai-modal-bar-segment.lost {
  background: #ff4e50;
}

.crm-analytics-ai-modal-bar-segment.follow {
  background: #9d50bb;
}

.crm-analytics-ai-modal-legend {
  display: flex;
  gap: 30px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.crm-analytics-ai-modal-legend-item {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: #bbb;
}

.crm-analytics-ai-modal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
}

.crm-analytics-ai-modal-dot.closed {
  background: #00ffab;
}

.crm-analytics-ai-modal-dot.lost {
  background: #ff4e50;
}

.crm-analytics-ai-modal-dot.follow {
  background: #9d50bb;
}

.crm-analytics-ai-modal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

.crm-analytics-ai-modal-stat-box {
  background: rgba(255, 255, 255, 0.08);
  /* border-radius: 12px; */
  padding: 16px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.05);
}

.crm-analytics-ai-modal-stat-box h2 {
  font-size: 1.3rem;
  color: #fff;
  margin: 0;
}

.crm-analytics-ai-modal-stat-box p {
  margin-top: 6px;
  font-size: 11px;
  font-weight: normal;
  color: #fff;
}

.crm-analytics-ai-modal-lead-sources {
  /* margin-bottom: 30px; */
  margin-bottom: 20px;
}

.crm-analytics-ai-modal-lead-sources h3 {
  color: #00f2fe;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .crm-analytics-ai-modal-lead-sources {
    margin-bottom: 30px;
  }
}

.crm-analytics-ai-modal-source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.crm-analytics-ai-modal-source-item {
  background: #1a1a2e;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #00d4ff;
  box-shadow: 0 0 5px rgba(0, 255, 255, 0.15);
}

.crm-analytics-ai-modal-notes {
  background: rgba(255, 255, 255, 0.06);
  padding: 18px;
  border-left: 4px solid #ffd700;
  border-radius: 12px;
}

.crm-analytics-ai-modal-notes h4 {
  color: #ffd700;
  margin-bottom: 8px;
}

.crm-analytics-ai-modal-notes ul {
  margin: 0;
  padding-left: 20px;
  color: #ccc;
}

.crm-ai-analytics-section {
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 8px;
}

.crm-ai-analytics-positive-section {
  background-color: #f0fdf4;
  border: 1px solid #c6f6d5;
}

.crm-ai-analytics-negative-section {
  background-color: #fff5f5;
  border: 1px solid #feb2b2;
}

.crm-ai-analytics-heading {
  font-size: 14px;
  margin-bottom: 12px;
  font-weight: bold;
}

.crm-ai-analytics-note {
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-family: "Segoe UI", sans-serif;
}

.crm-ai-analytics-positive {
  background-color: #d0f0d0;
  border-left: 5px solid #2e7d32;
  color: #1b5e20;
}

.crm-ai-analytics-negative {
  background-color: #fce4e4;
  border-left: 5px solid #c62828;
  color: #7f0000;
}

/* CRM AI ANALYTICS STYLING ENDS HERE  */

/* CRM FOLLOW UP DUE MODAL STYLING STARTS FROM HERE  */

.crm-leads-followudue-message-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: crm-leads-followudue-message-fadeOverlay 0.25s ease-in;
}

@keyframes crm-leads-followudue-message-fadeOverlay {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.crm-leads-followudue-message-dialog {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  max-width: 420px;
  width: 90%;
  padding: 32px 24px 24px;
  font-family: 'Roboto', Arial, sans-serif;
  color: #202124;
  animation: crm-leads-followudue-message-slideUp 0.3s ease-out;
  position: relative;
  text-align: center;
}

@keyframes crm-leads-followudue-message-slideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.crm-leads-followudue-message-icon {
  font-size: 48px;
  margin-bottom: 12px;
  color: #d93025;
}

.crm-leads-followudue-message-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #202124;
}

.crm-leads-followudue-message-content {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 28px;
  color: #5f6368;
}

.crm-leads-followudue-message-close-btn {
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  background-color: #1a73e8;
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.crm-leads-followudue-message-close-btn:hover,
.crm-leads-followudue-message-close-btn:focus {
  background-color: #185abc;
  outline: none;
}

.crm-leads-followudue-message-close-btn:disabled {
  cursor: not-allowed;
  background: #333;
  opacity: .5;
}

@media (max-width: 480px) {
  .crm-leads-followudue-message-dialog {
    padding: 24px 16px 20px;
  }

  .crm-leads-followudue-message-title {
    font-size: 18px;
  }

  .crm-leads-followudue-message-content {
    font-size: 15px;
  }

  .crm-leads-followudue-message-close-btn {
    width: 100%;
    font-size: 16px;
  }
}

/* CRM FOLLOW UP DUE MODAL STYLING ENDS HERE  */


/* OE B2B STYLING STARTS FROM HERE  */
#OE-B2BWorkshop {
  .oe-service-centres-container {
    padding: 16px;
    max-width: 100%;
  }

  .oe-dashboard-back-button-and-downloadbutton {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .oe-dashboard--download-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #e74c3c;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;

    margin-right: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
  }

  .oe-dashboard--download-btn i:hover {
    background-color: #af1202;
    transform: scale(1.05);
  }

  .oe-dashboard--download-btn i.disabled {
    /* pointer-events: none; */
    opacity: 0.5;
    cursor: not-allowed;
  }

  .oe-service-centres-backBtn {
    background-color: #bdc3c7;
    color: #2c3e50;
    border: none;
    padding: 10px 16px;
    font-size: 15px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 16px;
    transition: background-color 0.2s ease;
  }

  .oe-service-centres-backBtn:hover {
    background-color: #95a5a6;
  }

  @media (max-width: 480px) {
    .oe-service-centres-backBtn {
      width: 100%;
      text-align: center;
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
  }

  thead {
    background-color: #2c3e50;
    color: white;
  }

  th,
  td {
    text-align: left;
    padding: 12px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
  }

  th {
    color: #fff;
  }

  tbody tr:hover {
    background-color: #f2f2f2;
  }

  .oe-service-centres-section {
    display: none;
  }

  .oe-service-centres-section.active {
    display: block;
  }

  .oe-service-centres-form-section {
    background: #fff;
    padding: 16px;
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
  }

  .oe-service-centres-form-section input {
    width: 100%;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
  }

  .oe-service-centres-add-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 9999;
  }

  .oe-service-centres-add-modal-box {
    background: #fff;
    max-width: 580px;
    width: 100%;
    max-height: 80vh;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    padding: 30px 30px 40px;
    overflow-y: auto;
    position: relative;
  }

  .oe-service-centres-add-modal-close-btn {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #666;
    transition: color 0.3s ease;
  }

  .oe-service-centres-add-modal-close-btn:hover {
    color: #007bff;
  }

  .oe-service-centres-add-modal-box h3 {
    text-align: center;
    margin: 0 0 25px 0;
    font-weight: 700;
    color: #007bff;
    font-size: 1.6rem;
  }

  .oe-service-centres-add-modal-section {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 22px;
    background: #fafafa;
  }

  .oe-service-centres-add-modal-section h4 {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #0056b3;
    border-bottom: 1px solid #ddd;
    padding-bottom: 6px;
  }

  .oe-service-centres-add-modal-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #444;
    font-size: 0.9rem;
  }

  .oe-service-centres-add-modal-form input[type="text"],
  .oe-service-centres-add-modal-form input[type="number"],
  .oe-service-centres-add-modal-form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 14px;
    font-size: 1rem;
    border-radius: 8px;
    border: 1.8px solid #ccc;
    transition: border-color 0.25s ease;
    font-family: inherit;
  }

  .oe-service-centres-add-modal-form textarea {
    resize: vertical;
    min-height: 60px;
  }

  .oe-service-centres-add-modal-form input[type="text"]:focus,
  .oe-service-centres-add-modal-form input[type="tel"]:focus,
  .oe-service-centres-add-modal-form textarea:focus {
    outline: none;
    border-color: #007bff;
  }

  .oe-service-centres-add-modal-select {
    position: relative;
    margin-bottom: 18px;
  }

  .oe-service-centres-add-modal-select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 11px 14px;
    font-size: 1rem;
    border-radius: 8px;
    border: 1.8px solid #ccc;
    background: #fff url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23666' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
    background-size: 14px;
    cursor: pointer;
    transition: border-color 0.25s ease;
  }

  .oe-service-centres-add-modal-select select:focus {
    border-color: #007bff;
    outline: none;
  }

  .oe-service-centres-add-modal-brand-dropdown {
    position: relative;
    margin-bottom: 18px;
    user-select: none;
  }

  .oe-service-centres-add-modal-brand-display {
    border: 1.8px solid #ccc;
    border-radius: 8px;
    padding: 0px 14px;
    background: #fff;
    cursor: pointer;
    font-size: 1rem;
    color: #444;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 44px;
    align-items: center;
    transition: border-color 0.25s ease;
  }

  .oe-service-centres-add-modal-brand-display::after {
    content: "▾";
    margin-left: auto;
    font-size: 1.2rem;
    color: #666;
  }

  .oe-service-centres-add-modal-brand-dropdown.open .oe-service-centres-add-modal-brand-display {
    border-color: #007bff;
  }

  .oe-service-centres-add-modal-brand-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 180px;
    background: #fff;
    border-radius: 8px;
    border: 1.8px solid #ccc;
    margin-top: 6px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
    display: none;
  }

  .oe-service-centres-add-modal-brand-dropdown.open .oe-service-centres-add-modal-brand-options {
    display: block;
  }

  #brandSearch {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 14px;
    border: none;
    border-bottom: 1px solid #ddd;
    font-size: 1rem;
    outline-offset: -2px;
    outline-color: #007bff;
  }

  .oe-service-centres-add-modal-brand-options div {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 1rem;
    color: #333;
  }

  .oe-service-centres-add-modal-brand-options div:hover {
    background-color: #e8f0fe;
  }

  .oe-service-centres-add-modal-brand-chip {
    background: #d9eaff;
    color: #0056b3;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
  }

  .oe-service-centres-add-modal-brand-chip .remove {
    cursor: pointer;
    font-weight: 700;
    color: #0056b3;
    transition: color 0.3s ease;
  }

  .oe-service-centres-add-modal-brand-chip .remove:hover {
    color: #ff4d4d;
  }

  .oe-service-centres-add-modal-submit-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background-color: #007bff;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .oe-service-centres-add-modal-submit-btn:hover {
    background-color: #0056b3;
  }

  .oe-service-centres-add-modal-submit-btn:disabled {
    background: #333;
    cursor: not-allowed;
    opacity: .6;
  }

  @media (max-width: 480px) {
    .oe-service-centres-add-modal-box {
      max-width: 100%;
      padding: 20px 18px 30px;
      max-height: 95vh;
    }

    .oe-service-centres-add-modal-section {
      padding: 14px 16px;
      margin-bottom: 18px;
    }

    .oe-service-centres-add-modal-box h3 {
      font-size: 1.4rem;
    }
  }

  .oe-service-centres-add-modal-brand-preview {
    border: 1.8px solid #ccc;
    border-radius: 8px;
    background: #fff;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    cursor: text;
    font-size: 1rem;
    color: #444;
    user-select: none;
  }

  .oe-service-centres-add-modal-brand-preview::-webkit-scrollbar {
    height: 6px;
  }

  .oe-service-centres-add-modal-brand-preview::-webkit-scrollbar-thumb {
    background-color: #007bffaa;
    border-radius: 3px;
  }

  .oe-service-centres-add-modal-brand-chip {
    flex-shrink: 0;
    background: #d9eaff;
    color: #0056b3;
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    white-space: nowrap;
  }

  .oe-service-centres-add-modal-brand-chip .remove {
    cursor: pointer;
    font-weight: 700;
    color: #0056b3;
    transition: color 0.3s ease;
  }

  .oe-service-centres-add-modal-brand-chip .remove:hover {
    color: #ff4d4d;
  }

  .poc-entry {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
  }

  .poc-entry input[type="text"] {
    flex: 1 1 45%;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .poc-entry button {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
  }

  .poc-entry button:hover {
    background-color: #c0392b;
  }

  .add-poc-btn {
    background-color: #2ecc71;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 15px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
  }

  .add-poc-btn:hover {
    background-color: #27ae60;
  }

  @media (max-width: 600px) {
    .poc-entry {
      flex-wrap: nowrap;
      flex-direction: row;
    }
  }
  /* Remarks */

}

/* OE SKELETON STYLE STARTS FROM HERE  */
@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

/* OE SKELETON STYLE HERE  */
/* OE B2B STYLING ENDS HERE  */


/* ----------------------------------------------------- INVENTORY STYLING STARTS FROM HERE ----------------------------------------------------- */
.inventory_dashboard {
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 20px;
  background-color: #f4f6f8;
}

#inventory {
  .inventory_dashboard_top {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .inventory_dashboard_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .inventory_dashboard_back_btn,
  .inventory_dashboard_notification_btn {
    background-color: #f1f3f5;
    color: #333;
    border: none;
    padding: 0.4rem 0.8rem;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .inventory_dashboard_back_btn:hover,
  .inventory_dashboard_notification_btn:hover {
    background-color: #e0e0e0;
  }

  .inventory_dashboard_title {
    font-size: 20px;
    color: #2c3e50;
    margin: 0;
  }

  .inventory_dashboard_brand_cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
  }

  .inventory_dashboard_card {
    flex: 1 1 calc(33.333% - 0.8rem);
    background: linear-gradient(to bottom, #ffffff, #f9f9f9);
    padding: 0.8rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
  }

  .inventory_dashboard_card:hover {
    transform: translateY(-3px);
  }

  .inventory_dashboard_card h3 {
    margin-top: 0;
    font-size: 18px;
    color: #2d3748;
  }

  .inventory_dashboard_card p span {
    font-weight: 600;
    color: #fff;
  }

  .inventory_dashboard_filters_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
  }

  .inventory_dashboard_filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
  }

  .inventory_dashboard_search_container {
    position: relative;
    width: 400px;
  }

  @media (max-width: 750px) {
    .inventory_dashboard_search_container {
      width: 100%;
    }
  }

  #inventory_dashboard_search_input {
    width: 100%;
    padding: 8px 40px 8px 10px;
    box-sizing: border-box;
    /* border: none; */
    outline: none;
  }

  .inventory_dashboard_search_button {
    position: absolute;
    right: 3px;
    top: 49%;
    transform: translateY(-50%);
    height: 28px;
    padding: 0 10px;
    border: none;
    background-color: #00796b;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
  }

  .inventory_dashboard_search_button:hover {
    background-color: #00796b;
  }

  #inventory_dashboard_clear_search_input {
    position: absolute;
    right: 75px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #666;
    cursor: pointer;
    user-select: none;
    z-index: 1;
  }


  select,
  input[type="text"] {
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 13px;
    flex: 1 1 150px;
  }

  .inventory_dashboard_buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .inventory_dashboard_btn {
    background: #f1f1f1;
    color: black;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    font-size: 13px;
    font-weight: 200;
    transition: background-color 0.3s ease;
  }

  .inventory_dashboard_notification_btn {
    position: relative;
  }

  .inventory_dashboard_in_stock:disabled,
  .inventory_dashboard_out_stock:disabled,
  .inventory_dashboard_negative_stock:disabled,
  .inventory_dashboard_all_stock:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .inventory_dashboard_btn_verify {
    color: white;
    background-color: #0056b3;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    font-size: 13px;
    font-weight: 200;
    transition: background-color 0.3s ease;
  }

  .inventory_dashboard_btn_verify:disabled {
    cursor: not-allowed;
    opacity: 0.3;
  }

  .inventory_dashboard_btn.active {
    background: #00796b;
    color: white;
  }

  .inventory_dashboard_badge {
    background: red;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    top: -6px;
    right: -6px;
  }

  .inventory_dashboard_table_wrapper {
    overflow-x: auto;
    margin-top: 1rem;
    position: relative;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    min-width: 900px;
  }

  th,
  td {
    padding: 0.75rem;
    text-align: center;
    border-bottom: 1px solid #eee;
    font-size: 14px;
  }

  th {
    background: #2d3748;
    color: white;
  }

  .inventory_dashboard_remarks {
    width: 180px;
    max-width: 180px;
    word-wrap: break-word;
    white-space: normal;
    text-align: left;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .inventory_dashboard_editable,
  .inventory_dashboard_td {
    background-color: #fff6e6;
    border: 1px solid #ffa000;
    outline: none;
    font-weight: 700;
    cursor: text;
  }

  .inventory_dashboard_editable.inventory_dashboard_purchase_price {
    background-color: #e0f2f1;
    color: #00796b;
    font-weight: 700;
    border: 1px solid #ffa000;
  }

  .separator-row {
    text-align: center;
    padding: 8px;
    background-color: #f8f8f8;
  }

  .separator-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    line-height: 1.2;
  }

  .separator-content img {
    height: 30px;
    width: auto;
    vertical-align: middle;
  }


  .separator-row {
    text-align: center;
    font-weight: bold;
    color: #333;
    border: 1px solid #ffa000;
  }

  .separator-row.pirelli {
    background-color: #ffdd00;
  }

  .separator-row.metzeler {
    background-color: #2569bb;
  }

  .separator-row.michelin {
    background-color: #fff;
  }

  .inventory_dashboard_history_btn {
    padding: 6px 12px;
    font-size: 14px;
    background-color: #00796b;
    color: #e0f2f1;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: sans-serif;
  }

  .inventory_dashboard_history_btn:disabled {
    background-color: #b2dfdb;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.6;
  }

  .inventory_dashboard_total,
  .inventory_dashboard_name_td {
    background-color: #e0f2f1;
    color: #00796b;
    font-weight: 700;
    border: 1px solid #ffa000;
  }

  .inventory_dashboard_total.negative {
    background: #af0202;
    color: white;
  }

  @media (max-width: 768px) {
    .inventory_dashboard_card {
      flex: 1 1 100%;
    }

    table,
    th,
    td {
      font-size: 12px;
    }

    .inventory_dashboard_title {
      font-size: 18px;
    }

    .inventory_dashboard_brand_cards {
      flex-direction: column;
    }
  }

  .inventory_dashboard_top {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #fff;
    padding: 1.2rem;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
    font-family: Arial, sans-serif;
  }

  .inventory_dashboard_header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }

  .inventory_dashboard_back_btn {
    background: #f1f1f1;
    border: none;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .inventory_dashboard_back_btn:hover {
    background: #e4e4e4;
  }

  .inventory_dashboard_title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
  }

  .inventory_dashboard_brand_cards {
    display: flex;
    gap: 1rem;
  }

  .inventory_dashboard_card {
    flex: 1;
    background: #2d3748;
    padding: 0.9rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  }

  .inventory_dashboard_card h3 {
    margin-bottom: 0.4rem;
    font-size: 1rem;
    color: white;
  }

  .inventory_dashboard_card p {
    margin: 0.2rem 0;
    font-size: 0.9rem;
    color: white;
  }

  .inventory_dashboard_filters_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
  }

  .inventory_dashboard_filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
  }

  .inventory_dashboard_filters select,
  .inventory_dashboard_filters input {
    padding: 0.45rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 13px;
  }

  .inventory_dashboard_table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
  }

  .inventory_dashboard_table th,
  .inventory_dashboard_table td {
    border: 1px solid #ddd;
    padding: 0.4rem;
    text-align: center;
    font-size: 13px;
  }

  .inventory_dashboard_table th {
    background: #f8f8f8;
  }

  .inventory_dashboard_table td.editable {
    background: #fff8dc;
    cursor: pointer;
  }

  .inventory_dashboard_table td.editable:focus {
    outline: 2px solid #007bff;
    background: #fff;
  }
}

/* UPDATE MODAL STARTS FROM HERE  */
.inventory_dashboard_verify_update_modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 1rem;
  overflow-y: auto;
}

.inventory_dashboard_verify_update_modal_content {
  background-color: #e0f2f1;
  border-radius: 1rem;
  width: 100%;
  max-width: 960px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  padding: 1.5rem;
  max-height: 90vh;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.inventory_dashboard_verify_update_modal_content h2 {
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
  color: #333;
}

.inventory_dashboard_verify_update_modal_table-wrapper {
  overflow-x: auto;
  margin: 0 -1rem;
  padding: 0 1rem;
}

.inventory_dashboard_verify_update_modal_table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.inventory_dashboard_verify_update_modal_table th,
.inventory_dashboard_verify_update_modal_table td {
  border: 1px dotted #e0e0e0;
  padding: 0.75rem;
  text-align: center;
  vertical-align: top;
  background-color: #fff;
  color: #333;
}

.inventory_dashboard_verify_update_modal_table th {
  background-color: #f8f9fa;
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.inventory_dashboard_verify_update_modal_table .highlight {
  background-color: #fff8e1;
  font-weight: bold;
  color: #c77f00;
}

.inventory_dashboard_verify_update_modal_table .prev {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: #777;
}

.inventory_dashboard_verify_update_modal_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.inventory_dashboard_verify_update_modal_buttons button {
  flex: 1 1 48%;
  padding: 0.8rem;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

#inventory_dashboard_verify_update_modal_close {
  background: #2d3748;
  color: white;
}

#inventory_dashboard_verify_update_modal_close:hover {
  background: #262729;
}

#inventory_dashboard_verify_update_modal_update {
  background: #00796b;
  color: white;
}

#inventory_dashboard_verify_update_modal_update:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

#inventory_dashboard_verify_update_modal_update:hover {
  background: #073933;
}

.remove-entry-btn {
  padding: 0.4rem 0.8rem;
  background: #d32f2f;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.remove-entry-btn:hover {
  background: #b71c1c;
}

/* HISTORY MODAL STARTS FROM HERE  */
#inventory_dashboard_edit_history_open_btn {
  margin: 24px;
  padding: 12px 28px;
  font-size: 16px;
  background-color: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#inventory_dashboard_edit_history_open_btn:hover {
  background-color: #1669d2;
}

.inventory_dashboard_edit_history_modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.inventory_dashboard_edit_history_modal_content {
  background: #ffffff;
  width: 100%;
  max-width: 520px;
  height: 90vh;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeIn 0.25s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.inventory_dashboard_edit_history_modal_header {
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #00796b;
}

.inventory_dashboard_edit_history_modal_header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

#inventory_dashboard_edit_history_close_btn {
  font-size: 24px;
  cursor: pointer;
  color: #fff;
  border: none;
  background: transparent;
  transition: color 0.2s;
}

#inventory_dashboard_edit_history_close_btn:hover {
  color: red;
}

#inventory_dashboard_edit_history_modal_body {
  flex: 1;
  overflow-y: auto;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 8px 16px;
}

#inventory_dashboard_edit_history_top_status {
  text-align: center;
  padding: 12px;
  font-size: 14px;
  color: #5f6368;
  user-select: none;
  display: none;
}

#inventory_dashboard_edit_history_top_loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  display: none;
}

.inventory_dashboard_edit_history_spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e0e0e0;
  border-top: 3px solid #1a73e8;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

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

#inventory_dashboard_edit_history_container {
  display: flex;
  flex-direction: column-reverse;
}

.inventory_dashboard_edit_history_entry {
  background: #e0f2f1;
  border-radius: 10px;
  margin: 10px 0;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #00796b;
  transition: box-shadow 0.3s;
}

.inventory_dashboard_edit_history_entry:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.inventory_dashboard_edit_history_entry_header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 15px;
  color: #202124;
}

.inventory_dashboard_edit_history_admin_name {
  all: unset;
  color: red;
}

.inventory_dashboard_edit_history_admin_date_time {
  all: unset;
}

.inventory_dashboard_edit_history_entry_body {
  font-size: 14px;
  color: #5f6368;
  line-height: 1.5;
}

.inventory-history-entry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  background-color: white;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  white-space: nowrap;
  transition: background 0.2s ease;
}

.inventory-history-entry i {
  font-size: 10px;
  color: inherit;
}

.inventory-history-entry.sales-order {
  background-color: #d1f5f4;
  border-color: #a0e4e2;
  color: #00796b;
}

.inventory-history-entry.manual-edit {
  background-color: #fff4e5;
  border-color: #ffd6a0;
  color: #bf360c;
}

.inventory-history-entry:hover {
  opacity: 0.95;
}

.inventory_dashboard_edit_history_entry_body span {
  display: block;
  margin: 4px 0;
}

@media (max-width: 480px) {
  .inventory_dashboard_edit_history_modal_content {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  #inventory_dashboard_edit_history_open_btn {
    margin: 16px;
    width: calc(100% - 32px);
  }

  .inventory_dashboard_edit_history_entry {
    padding: 14px;
    margin: 6px 0;
  }

  .inventory_dashboard_edit_history_modal_header {
    padding: 14px 16px;
  }
}

.inventory-table-skeleton-row td {
  padding: 20px;
  background: #e0f2f1;
}

.inventory-table-skeleton-box {
  height: 14px;
  width: 100%;
  background: linear-gradient(90deg,
      #e0f2f1 25%,
      #b2dfdb 37%,
      #e0f2f1 63%);
  background-size: 400% 100%;
  border-radius: 4px;
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}


/* ----------------------------------- INVENTORY NOTIFICATION STYLING STARTS FROM HERE ----------------------------------- */
.inventory_dashboard_notification_panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: none;
  flex-direction: column;
  z-index: 9999;
  max-height: 100vh;
  min-height: 300px;
  overflow: hidden;
}

.inventory_dashboard_notification_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background-color: #00796b;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.inventory_dashboard_notification_header button {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.inventory_dashboard_notification_list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  min-height: 200px;
  -webkit-overflow-scrolling: touch;
}

.inventory_dashboard_notification_item {
  background-color: #e0f2f1;
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 6px;
  font-size: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.inventory_dashboard_notification_message {
  margin-bottom: 4px;
  line-height: 1.4;
}

.inventory_dashboard_notification_time {
  font-size: 12px;
  color: #999;
}

.inventory_dashboard_notification_loader,
.inventory_dashboard_notification_end {
  text-align: center;
  padding: 12px;
  font-size: 14px;
  color: #777;
  display: none;
}

@media (min-width: 768px) {
  .inventory_dashboard_notification_panel {
    top: 60px;
    right: 20px;
    left: auto;
    bottom: 1px;
    width: 400px;
    height: auto;
    max-height: 600px;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
}

/* ----------------------------------- INVENTORY DASHBOARD NOTIFICATION STYLING ENDS HERE ----------------------------------- */




/* ----------------------------------------------------- INVENTORY STYLING ENDS HERE ----------------------------------------------------- */



/* ----------------------------------- EDIT SALES MODAL STYLING STARTS FROM HERE ----------------------------------- */

.sales-order-edit-addsales-modal,
.sales-order-edit-addsales-modal * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
}

.sales-order-edit-addsales-h2 {
  margin-bottom: 15px;
}

.sales-order-edit-addsales-close-modal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: #888;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem 0.5rem;
  transition: color 0.2s;
}

.sales-order-edit-addsales-close-modal:hover {
  color: #333;
}

.sales-order-edit-addsales-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
}

.sales-order-edit-addsales-modal-content {
  background: #fff;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
}

h2 {
  margin-bottom: 1rem;
  color: #333;
}

.sales-order-edit-addsales-section {
  margin-bottom: 1.25rem;
}

.sales-order-edit-addsales-section>label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
}

.sales-order-edit-addsales-input-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.sales-order-edit-addsales-input-group label {
  position: absolute;
  top: 0.8rem;
  left: 0.7rem;
  font-size: 0.95rem;
  color: #999;
  pointer-events: none;
  transition: all 0.2s ease-out;
  z-index: 1;
  background-color: transparent;
  padding: 0 5px;
}

.sales-order-edit-addsales-input-group input[type="text"],
.sales-order-edit-addsales-input-group input[type="number"],
.sales-order-edit-addsales-input-group input[type="tel"],
.sales-order-edit-addsales-input-group input[type="email"],
.sales-order-edit-addsales-input-group textarea {
  width: 100%;
  padding: 0.7rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  transition: border-color .2s, padding 0.2s ease-out;
  font-size: 0.95rem;
  background-color: #fff;
  position: relative;
  z-index: 0;
}

.sales-order-edit-addsales-input-group select {
  width: 100%;
  padding: 0.7rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  transition: border-color .2s, padding 0.2s ease-out;
  font-size: 0.95rem;
  background-color: #fff;
  position: relative;
  z-index: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2C118.8L146.2%2C259.6c-4.4%2C4.4-11.4%2C4.4-15.8%2C0L5.4%2C118.8c-4.4-4.4-4.4-11.4%2C0-15.8c4.4-4.4%2C11.4-4.4%2C15.8%2C0l124.6%2C124.6l124.6-124.6c4.4-4.4%2C11.4-4.4%2C15.8%2C0C291.4%2C107.4%2C291.4%2C114.4%2C287%2C118.8z%22%2F%3E%3C%2Fsvg%3E');
  /* Custom arrow */
  background-repeat: no-repeat;
  background-position: right 0.7rem top 50%;
  background-size: 0.65em auto;
}

.sales-order-edit-addsales-input-group input:focus,
.sales-order-edit-addsales-input-group select:focus,
.sales-order-edit-addsales-input-group textarea:focus {
  outline: none;
  border-color: #0078D4;
}

.sales-order-edit-addsales-input-group input:focus+label,
.sales-order-edit-addsales-input-group input:not(:placeholder-shown)+label,
.sales-order-edit-addsales-input-group textarea:focus+label,
.sales-order-edit-addsales-input-group textarea:not(:placeholder-shown)+label,
.sales-order-edit-addsales-input-group select:focus+label {
  top: -0.6rem;
  font-size: 0.75rem;
  color: #0078D4;
  background-color: #fff;
  z-index: 2;
}

.sales-order-edit-addsales-input-group select:not([value=""])+label,
.sales-order-edit-addsales-input-group select:valid+label {
  top: -0.6rem;
  font-size: 0.75rem;
  color: #0078D4;
  background-color: #fff;
  z-index: 2;
}

.sales-order-edit-addsales-input-group input::placeholder,
.sales-order-edit-addsales-input-group textarea::placeholder {
  color: transparent;
}

.sales-order-edit-addsales-products {
  display: grid;
  gap: 0.7rem;
}

.sales-order-edit-addsales-product-row {
  background: #fafbfc;
  border: 1px solid #e0e4e8;
  border-radius: 6px;
  padding: 0.8rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  position: relative;
}

.sales-order-edit-addsales-remove-product {
  position: absolute;
  /* top: 0.5rem; right: 0.5rem; */
  top: 0px;
  right: 0px;
  background: #e04f5f;
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.sales-order-edit-addsales-remove-product:hover {
  background: #cc3f4f;
}

.sales-order-edit-addsales-suggestions {
  text-align: left;
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  width: calc(100% - 2px);
  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.sales-order-edit-addsales-suggestion {
  padding: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.sales-order-edit-addsales-suggestion.selected,
.sales-order-edit-addsales-suggestion:hover {
  background: #f0f0f0;
}

.clear-selection {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 1rem;
  font-weight: bold;
  color: #0078D4;
  cursor: pointer;
  z-index: 2;
}

.clear-selection:hover {
  color: #d00;
}

input.locked {
  background-color: #f9f9f9;
  cursor: not-allowed;
  color: #555;
}

.sales-order-edit-addsales-upload-label {
  display: block;
  background: #0078D4;
  color: #fff;
  padding: 1rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  border: 2px dashed transparent;
}

.sales-order-edit-addsales-upload-label:hover {
  background: #005a9e;
}

.sales-order-edit-addsales-upload-label input[type="file"] {
  display: none;
}

.sales-order-edit-addsales-upload-label.drag-over {
  background: #e0f2f7;
  color: #0078D4;
  border-color: #0078D4;
}

.sales-order-edit-addsales-upload-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}

.sales-order-edit-addsales-upload-preview img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.sales-order-edit-addsales-preview-box {
  position: relative;
}

.sales-order-edit-addsales-preview-box button {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #e04f5f;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sales-order-edit-addsales-toggle-container {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.sales-order-edit-addsales-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.sales-order-edit-addsales-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sales-order-edit-addsales-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.sales-order-edit-addsales-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.sales-order-edit-addsales-slider {
  background-color: #e04f5f;
}

input:focus+.sales-order-edit-addsales-slider {
  box-shadow: 0 0 1px #e04f5f;
}

input:checked+.sales-order-edit-addsales-slider:before {
  transform: translateX(16px);
}

.sales-order-edit-addsales-btn {
  background: #0078D4;
  color: #fff;
  border: none;
  padding: 0.85rem;
  font-size: 1rem;
  width: 100%;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s;
  font-weight: 600;
}

.sales-order-edit-addsales-btn:hover {
  background: #005a9e;
}

.sales-order-edit-addsales-btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  width: auto !important;
  margin-top: 8px;
}

.sales-order-edit-addsales-btn:disabled {
  opacity: 0.5;
}

.sales-order-edit-addsales-fieldset {
  border: 1px solid #e0e4e8;
  border-radius: 8px;
  padding: 1rem 1.5rem 0.5rem 1.5rem;
  margin-bottom: 1.5rem;
  background: #fff;
}

.sales-order-edit-addsales-fieldset legend {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  padding: 0 0.5rem;
  margin-left: -0.5rem;
}

@media (min-width: 600px) {
  .sales-order-edit-addsales-product-row {
    grid-template-columns: 2.5fr 1fr 1fr 1fr auto;
    align-items: center;
  }

  .sales-order-edit-addsales-customer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px 9px;
  }
}


/* ----------------------------------- EDIT SALES MODAL STYLING ENDS HERE ----------------------------------- */







/* ----------------------------------- INVENTORY DASHBOARD UPLOAD MODAL STYLING STARTS FROM HERE ----------------------------------- */
@media (max-width: 500px) {
  /* .incentiveOverlay-modal {
      width: 90%;
      padding: 20px;
    } */

  .inventory_dashboard-plus-btn {
    width: 50px;
    height: 50px;
    font-size: 26px;
  }
}


.inventory_dashboard-plus-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 20%;
  background-color: #2d3748;
  color: white;
  font-size: 32px;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: background 0.3s;
}

.inventory_dashboard-plus-btn {
  background-color: #2d3748;
}

.inventory_dashboard_upload_modal_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  /* padding: 0 15px; */
}

/* Modal box with scrollable content */
.inventory_dashboard_upload_modal_box {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.inventory_dashboard_upload_modal_heading {
  margin-bottom: 20px;
  font-size: 20px;
  text-align: center;
}

.inventory_dashboard_upload_modal_replace,
.inventory_dashboard_upload_modal_add,
.inventory_dashboard_upload_modal_purchase_price {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  position: relative;
  margin: 12px 0;
  cursor: default;
  transition: background-color 0.2s ease;
}

.inventory_dashboard_upload_modal_replace {
  background-color: #fef0f0;
  color: #a33;
  border: 1px solid #e0b4b4;
}

.inventory_dashboard_upload_modal_purchase_price {
  background-color: #0051ff29;
  color: #fff;
  border: 1px solid #1577e1;
}

.inventory_dashboard_upload_modal_add {
  background-color: #f0fef0;
  color: #2c802c;
  border: 1px solid #b4e0b4;
}

.inventory_dashboard_upload_modal_tooltip {
  position: relative;
}

.inventory_dashboard_upload_modal_tooltip .inventory_dashboard_upload_modal_tooltiptext {
  visibility: hidden;
  width: max-content;
  max-width: 240px;
  background-color: #222;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 6px 10px;
  position: absolute;
  z-index: 10;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  font-size: 13px;
  line-height: 1.4;
  transition: opacity 0.3s ease;
  white-space: normal;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.inventory_dashboard_upload_modal_tooltip .inventory_dashboard_upload_modal_tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #222 transparent transparent transparent;
}

.inventory_dashboard_upload_modal_tooltip:hover .inventory_dashboard_upload_modal_tooltiptext {
  visibility: visible;
  opacity: 1;
}


.inventory_dashboard_upload_modal_section {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
}

.inventory_dashboard_upload_modal_section h3 {
  font-size: 16px;
  margin-bottom: 12px;
  color: #333;
}

.inventory_dashboard_upload_modal_button,
.inventory_dashboard_upload_modal_input[type="file"]::file-selector-button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.inventory_dashboard_upload_modal_button:hover,
.inventory_dashboard_upload_modal_input[type="file"]::file-selector-button:hover {
  background: #0056b3;
}

.inventory_dashboard_upload_modal_button:disabled {
  cursor: not-allowed;
  opacity: .3;
}

.inventory_dashboard_upload_modal_input[type="file"] {
  font-size: 14px;
  display: block;
  width: 100%;
  margin-top: 10px;
}

.inventory_dashboard_upload_modal_close_btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: #aaa;
}

.inventory_dashboard_upload_modal_close_btn:hover {
  color: #333;
}

.inventory_dashboard_upload_modal_upload_actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.inventory_dashboard_upload_modal_table_wrapper {
  overflow-x: auto;
  margin-top: 10px;
  position: relative;
}

.inventory_dashboard_upload_modal_sample_table {
  min-width: 420px !important;
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
  background: white !important;
}

.inventory_dashboard_upload_modal_sample_table th,
.inventory_dashboard_upload_modal_sample_table td {
  border: 1px solid #ccc !important;
  padding: 8px !important;
  text-align: left !important;
}

/* Sample format header */
.inventory_dashboard_upload_modal_sample_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  font-size: 15px;
}

/* Copy icon button */
.inventory_dashboard_upload_modal_copy_icon_btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  color: #007bff;
}

.inventory_dashboard_upload_modal_copy_icon_btn:hover svg {
  fill: #0056b3;
}

@media (max-width: 480px) {
  .inventory_dashboard_upload_modal_box {
    padding: 15px;
  }

  .inventory_dashboard_upload_modal_heading {
    font-size: 18px;
  }

  .inventory_dashboard_upload_modal_sample_table th,
  .inventory_dashboard_upload_modal_sample_table td {
    padding: 6px !important;
    font-size: 13px !important;
  }
}

/* ----------------------------------- INVENTORY DASHBOARD UPLOAD MODAL STYLING ENDS HERE ----------------------------------- */


/* ----------------------------------- PENDING PAYMENT STYLING STARTS FROM HERE ----------------------------------- */
#pendingPayments {
  /* font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; */
  font-family: monospace;

  .pending-payment-dashboard-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  /* Mobile Styles */
  @media (max-width: 600px) {
    .pending-payment-dashboard-header {
      flex-direction: column;
      align-items: stretch;
    }

    .pending-payment-dashboard-header>* {
      width: 100%;
      box-sizing: border-box;
    }

    .pending-payment-dashboard-select,
    .pending-payment-dashboard-date,
    .pending-payment-dashboard-back-btn {
      font-size: 1rem;
      padding: 0.6rem;
    }
  }


  .pending-payment-dashboard-back-btn {
    /* background: #2d3748; */
    background: #ff5e00;
    border: none;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
  }

  .pending-payment-dashboard-back-btn:hover {
    opacity: 0.85;
  }

  /* Custom dropdown */
  .pending-payment-dashboard-select,
  .pending-payment-dashboard-date {
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    min-width: 160px;
  }

  /* LAYOUT */
  .pending-payment-dashboard-container {
    padding: 1rem;
    max-width: 1200px;
    margin: auto;
  }

  /* CARDS (mobile default) */
  .pending-payment-dashboard-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    margin-bottom: 1rem;
    padding: 1rem;
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem;
    transition: transform 0.2s;
  }

  .pending-payment-dashboard-card:hover {
    transform: translateY(-2px);
  }

  .pending-payment-dashboard-card strong {
    color: #ff5e00;
  }

  .pending-payment-dashboard-card-left div,
  .pending-payment-dashboard-card-right div {
    margin-top: 12px;
  }

  .pending-payment-dashboard-balance {
    color: #dc2626;
  }

  .pending-payment-dashboard-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
  }

  .pending-payment-dashboard-status.Pending {
    background: #fff3e0;
    color: #e65100;
  }

  .pending-payment-dashboard-status.Shipped {
    background: #e0f2f1;
    color: #00695c;
  }

  .pending-payment-dashboard-status.Delivered {
    background: #d4edda;
    color: #2e7d32;
  }

  .pending-payment-dashboard-status.Booked {
    background: #ede7f6;
    color: #512da8;
  }

  .pending-payment-dashboard-status.RTD {
    background: #eceff1;
    color: #455a64;
  }

  .pending-payment-dashboard-status.Partial {
    background: #e3f2fd;
    color: #0277bd;
  }

  .pending-payment-dashboard-payment-status-summary {
    position: sticky;
    justify-content: center;
    flex-wrap: wrap;
    top: 64px;
    z-index: 999;
    display: flex;
    overflow-x: auto;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: #fafafa;
    border-bottom: 1px solid #ddd;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .pending-payment-dashboard-status-item {
    flex-shrink: 0;
    background: #f1f1f1;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-weight: 500;
    color: #333;
  }

  .pending-payment-dashboard-status-item.total {
    background-color: #e0e0e0;
    font-weight: bold;
  }

  .pending-payment-dashboard-status-item.pending {
    background-color: #fff3e0;
    color: #e65100;
  }

  .pending-payment-dashboard-status-item.partial {
    background-color: #e3f2fd;
    color: #0277bd;
  }

  .pending-payment-dashboard-status-item.booked {
    background-color: #ede7f6;
    color: #512da8;
  }

  .pending-payment-dashboard-status-item.rtd {
    background-color: #eceff1;
    color: #455a64;
  }

  .pending-payment-dashboard-status-item.shipped {
    background-color: #e0f2f1;
    color: #00695c;
  }

  .pending-payment-dashboard-status-item.delivered {
    background-color: #e8f5e9;
    color: #2e7d32;
  }

  .pending-payment-dashboard-payment-status-summary::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .pending-payment-dashboard-payment-status-summary::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  .pending-payment-dashboard-payment-status-summary::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
    transition: background 0.3s;
  }

  .pending-payment-dashboard-payment-status-summary::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }

  .pending-payment-dashboard-payment-status-summary {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
  }

  /* TABLE (desktop view) */
  @media (min-width: 768px) {
    .pending-payment-dashboard-cards {
      display: none;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    th,
    td {
      padding: 0.8rem;
      border-bottom: 1px solid #eee;
      text-align: left;
      font-size: 14px;
    }

    th {
      background: #ff5e00;
      /* background: #2d3748; */
      color: #fff;
      font-weight: 600;
    }

    tr {
      cursor: pointer;
    }

    tr:hover {
      background: #f6f6f6;
    }
  }

  /* Empty Card Message */
  .pendingPaymentDashboard-no-data-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    border: 2px dashed #ccc;
    background-color: #fafafa;
    border-radius: 10px;
    margin: 20px auto;
    max-width: 500px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
  }

  .pendingPaymentDashboard-no-data-message img {
    width: 100px;
    height: 100px;
    opacity: 0.7;
    margin-bottom: 15px;
  }

  .pendingPaymentDashboard-no-data-message h3 {
    font-size: 22px;
    color: #444;
    margin-bottom: 5px;
  }

  .pendingPaymentDashboard-no-data-message p {
    font-size: 15px;
    color: #777;
  }


  /* Empty Table Message */
  .pendingPaymentDashboard-no-data-table-cell {
    text-align: center;
    background-color: #fff;
    padding: 30px 0;
    border-bottom: none;
  }

  .pendingPaymentDashboard-no-data-table-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pendingPaymentDashboard-no-data-table-wrapper img {
    width: 80px;
    height: 80px;
    opacity: 0.5;
    margin-bottom: 10px;
  }

  .pendingPaymentDashboard-no-data-table-wrapper h4 {
    font-size: 18px;
    color: #555;
    margin-bottom: 5px;
  }

  .pendingPaymentDashboard-no-data-table-wrapper p {
    font-size: 14px;
    color: #888;
  }

  /* MOBILE */
  @media (max-width: 767px) {
    .pending-payment-dashboard-table {
      display: none;
    }
  }
}

/* Skeleton loader */
.pending-payment-dashboard-skeleton {
  display: block;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg,
      #e5e7eb 25%,
      #f3f4f6 37%,
      #e5e7eb 63%);
  background-size: 400% 100%;
  animation: pending-payment-dashboard-shimmer 1.4s infinite linear;
}

@keyframes pending-payment-dashboard-shimmer {
  0% {
    background-position: -400% 0;
  }

  100% {
    background-position: 400% 0;
  }
}

/* ----------------------------------- PENDING PAYMENT STYLING ENDS HERE ----------------------------------- */


/* ----------------------------------- CUSTOMER REACHOUT STYLING (CRM) STRATING FROM HERE ----------------------------------- */
.crm-customer-outreach-body-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.crm-customer-outreach-container {
  padding: 1rem;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
  max-width: 100%;
  font-family: 'Segoe UI', sans-serif;
}

.crm-customer-outreach-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.crm-customer-outreach-header select,
.crm-customer-outreach-header input[type="date"] {
  flex: 1 1 auto;
  padding: 0.65rem 0.75rem;
  font-size: 0.9rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #fff;
  transition: border 0.3s ease;
  min-width: 160px;
}

.crm-customer-outreach-header select:focus,
.crm-customer-outreach-header input[type="date"]:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 4px rgba(37, 99, 235, 0.3);
}

.crm-customer-outreach-salesperson-filter:disabled {
  cursor: not-allowed;
}

.crm-customer-outreach-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 800px;
}

.crm-customer-outreach-thead th {
  background-color: #f3f4f6;
  padding: 0.75rem;
  font-weight: 400;
  color: #111827;
  border-bottom: 2px solid #e5e7eb;
  text-align: center;
}

.crm-customer-outreach-tbody td {
  padding: 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
  vertical-align: middle;
  color: #374151;
}

.crm-customer-outreach-row {
  cursor: pointer;
}

.crm-customer-outreach-tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.crm-customer-outreach-remarks-input {
  width: 100%;
  min-height: 36px;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: #f9fafb;
  font-size: 0.9rem;
  transition: border 0.3s;
}

.crm-customer-outreach-remarks-input:focus {
  border-color: #2563eb;
  background-color: #ffffff;
  outline: none;
}

.crm-customer-outreach-remarks-input::placeholder {
  color: #9ca3af;
  font-style: italic;
}

.crm-customer-outreach-add-button {
  padding: 0.5rem 0.9rem;
  /* background: linear-gradient(135deg, #3b82f6, #2563eb); */
  background: linear-gradient(135deg, #3b82f6, #f5233c);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease;
}

.crm-customer-outreach-add-button:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-2px);
}

.crm-customer-outreach-add-button:disabled {
  background: grey;
  opacity: 0.3;
  cursor: not-allowed;
}

.crm-medium-selector {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.crm-medium-icon {
  font-size: 1.25rem;
  color: #9ca3af;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  padding: 0.5rem;
  border-radius: 50%;
  border: 2px solid transparent;
}

.crm-medium-icon:hover {
  transform: scale(1.15);
  background-color: #f3f4f6;
}

.crm-medium-icon.selected {
  color: #10b981;
  border-color: #10b981;
  background-color: #ecfdf5;
}

.crm-medium-icon.whatsapp.selected {
  color: #25d366;
  border-color: #25d366;
  background-color: #e7fef1;
}

.crm-medium-icon.phone.selected {
  color: #3b82f6;
  border-color: #3b82f6;
  background-color: #eff6ff;
}

.crm-customer-outreach-thead th:nth-child(1) {
  width: 5%;
}

.crm-customer-outreach-thead th:nth-child(2) {
  width: 15%;
}

.crm-customer-outreach-thead th:nth-child(3) {
  width: 20%;
}

.crm-customer-outreach-thead th:nth-child(4) {
  width: 10%;
}

.crm-customer-outreach-thead th:nth-child(5) {
  width: 10%;
}

.crm-customer-outreach-thead th:nth-child(6) {
  width: 20%;
}

.crm-customer-outreach-thead th:nth-child(7) {
  width: 10%;
}

.crm-customer-outreach-thead th:nth-child(8) {
  width: 10%;
}

@media (max-width: 768px) {
  .crm-customer-outreach-header {
    flex-direction: column;
    gap: 0.75rem;
  }

  .crm-customer-outreach-table {
    font-size: 0.85rem;
    min-width: 100%;
  }

  .crm-customer-outreach-remarks-input {
    min-height: 34px;
    min-width: 144px;
  }

  .crm-medium-selector {
    gap: 0.5rem;
  }

  .crm-customer-outreach-header input[type="date"] {
    flex: 1 0 100%;
    min-width: initial;
  }
}

.crm-customer-outreach-skeleton-row {
  background: #fff;
}

.crm-customer-outreach-skeleton-td {
  padding: 10px;
}

.crm-customer-outreach-skeleton-box {
  width: 100%;
  height: 16px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: crm-customer-outreach-skeleton-loading 1.4s infinite;
}

@keyframes crm-customer-outreach-skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.crm-customeroutreach-placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
  text-align: center;
  background: #fafafa;
  border: 1px dashed #ddd;
  border-radius: 10px;
  padding: 40px 20px;
  color: #666;
  font-family: "Segoe UI", Arial, sans-serif;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.crm-customeroutreach-placeholder-content img {
  width: 100px;
  height: 100px;
  margin-bottom: 15px;
  opacity: 0.9;
  transition: transform 0.3s ease;
}

.crm-customeroutreach-placeholder-content img:hover {
  transform: scale(1.05);
  opacity: 1;
}

.crm-customeroutreach-placeholder-content p {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: #444;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .crm-customeroutreach-placeholder-content {
    padding: 30px 15px;
    min-height: 150px;
  }

  .crm-customeroutreach-placeholder-content img {
    width: 70px;
    height: 70px;
  }

  .crm-customeroutreach-placeholder-content p {
    font-size: 14px;
  }
}

/* ----------------------------------- CUSTOMER REACHOUT STYLING (CRM) ENDING HERE ----------------------------------- */
.last-seen-header {
  position: sticky;
  top: 0;
  background-color: #f8f9fa;
  z-index: 10;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dee2e6;
}

.last-seen-dashboard-back-btn {
  background-color: #2d3748;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  margin-left: 10px;
  transition: background-color 0.3s ease;
}

.last-seen-dashboard-back-btn:hover {
  background-color: #2d3749;
}

#lastOpen {
  background-color: #f8f9fa;
  min-height: 100vh;
}

.last-seen-heading {
  font-size: 1.8rem;
  font-weight: bold;
  color: #2d3748;
  /* margin-right: 10px; */
}

.last-seen-title-container {
  text-align: center;
  flex: 1;
}

.last-updated-time {
  font-size: 0.85rem;
  color: #6c757d;
  margin-top: 0.2rem;
}

.refresh-btn {
  background-color: #2d3748;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-right: 10px;
}

.refresh-btn:hover {
  background-color: #1a202c;
}

.last-seen-grid {
  margin: 15px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.last-seen-card {
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 1.2rem;
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.last-seen-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(13, 110, 253, 0.2);
}

.last-seen-email {
  font-weight: 600;
  color: #2457ad;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.last-seen-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.last-seen-item {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0;
  border-bottom: 1px dashed #dee2e6;
  font-size: 0.9rem;
}

.last-seen-section {
  color: #495057;
  font-weight: 500;
}

.last-seen-time {
  color: #6c757d;
  font-size: 0.85rem;
}

.last-seen-times {
  cursor: help;
}

/* Tooltip wrapper */
.last-seen-tooltip {
  position: relative;
  cursor: help;
}

/* Tooltip content */
.last-seen-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  /* position above */
  left: 50%;
  transform: translateX(-50%);
  background-color: #2e2e2e;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  z-index: 1000;
}

/* Tooltip arrow */
.last-seen-tooltip::before {
  content: '';
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #2e2e2e transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
  z-index: 1000;
}

/* Show tooltip on hover */
.last-seen-tooltip:hover::after,
.last-seen-tooltip:hover::before {
  opacity: 1;
}


/* Optional: Skeleton Loader Styling */
.last-seen-skeleton {
  padding: 1rem;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.skeleton-email {
  width: 60%;
  height: 16px;
  background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  margin-bottom: 1rem;
  animation: shimmer 1.5s infinite;
}

.skeleton-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.skeleton-line {
  height: 12px;
  width: 100%;
  margin-bottom: 0.6rem;
  background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
}


@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}


.last-seen-time {
  background-color: #0056b31c;
  padding: 4px;
  border-radius: 5px;
  color: green;
}

@media (max-width: 600px) {
  .last-seen-header {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 10px;
    /* adds spacing between children when stacked */
  }

  .last-seen-dashboard-back-btn,
  .refresh-btn {
    width: 100%;
    margin: 0;
  }

  .last-seen-title-container {
    flex: unset;
    width: 100%;
  }

  .last-seen-heading {
    font-size: 1.4rem;
  }

  .last-updated-time {
    font-size: 0.8rem;
  }
}




/* ------------------------- NOTIFICATION STYLING STARTS FROM HERE ------------------------- */
#options {
  margin-top: 20px;
}

#notificationBtn {
  position: absolute;
  top: 20%;
  right: 30px;
  padding: 12px 14px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 20%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

#notificationBtn:hover {
  background-color: #000;
  transform: scale(1.1);
}

#notificationBtn .notification-count {
  position: absolute;
  top: -6px;
  right: -12px;
  background-color: #f15922;
  color: white;
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.showSalesTopBar {
  position: relative;
  display: flex;
  align-items: center;
  /* gap: 20px;      */
  padding: 10px 0;
}

.sales-global-notification-bell-wrapper {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.sales-global-notification-bell-btn {
  position: relative;
  background: #2c2c2e;
  border: none;
  padding: 10px 14px;
  border-radius: 50%;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}

.sales-global-notification-count {
  position: absolute;
  top: 0px;
  right: 0px;
  background: #ff5e00;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 50%;
  transform: translate(50%, -50%);
}

/* Notification Panel */
.sales-global-notification-container {
  display: none;
  justify-content: center;
  align-items: flex-start;
  margin-top: 80px;
  position: absolute;
  z-index: 1001;
  top: 0px;
  right: 20px;
}

.sales-global-notification-panel {
  min-width: 420px;
  background: #1c1c1e;
  border-radius: 14px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

/* Tabs */
.sales-global-notification-tabs {
  display: flex;
  background: #2c2c2e;
  border-bottom: 1px solid #3a3a3c;
}

.sales-global-notification-tab {
  flex: 1;
  padding: 12px;
  background: transparent;
  border: none;
  color: #999;
  font-size: 0.95rem;
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.sales-global-notification-tab:hover {
  color: #fff;
}

.sales-global-notification-tab.active {
  border-bottom: 2px solid #ff5e00;
  color: #fff;
  font-weight: 600;
}

.sales-global-notification-badge {
  background: #555;
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 0.75rem;
}

/* Header */
.sales-global-notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #2c2c2e;
}

.sales-global-notification-header h2 {
  font-size: 1rem;
  color: #fff;
}

.sales-global-notification-clear-btn {
  background: none;
  color: #aaa;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: 0.3s;
}

.sales-global-notification-clear-btn:hover {
  color: #fff;
  border-color: #555;
}

/* Notification List */
.sales-global-notification-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sales-global-notification-item {
  background: #2c2c2e;
  border-radius: 10px;
  padding: 12px 38px 12px 14px;
  color: #ddd;
  font-size: 0.85rem;
  line-height: 1.4;
  position: relative;
  border: 1px solid #3a3a3c;
  transition: background 0.3s;
  cursor: pointer;
}

.sales-global-notification-item:hover {
  background: #333;
}

.sales-global-notification-close-btn {
  position: absolute;
  right: 10px;
  top: 8px;
  background: none;
  border: none;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
  transition: 0.2s;
}

.sales-global-notification-close-btn:hover {
  color: #ff5e00;
}

.sales-global-notification-close-notification-button {
  position: absolute;
  right: 0px;
  top: 3px;
  background: none;
  border: none;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
  transition: 0.2s;
}

.sales-global-notification-close-notification-button:hover {
  color: #ff5e00;
}

.sales-global-notification-date {
  display: block;
  color: #fff;
  font-size: 0.75rem;
  margin-top: 6px;
}

/* Mobile */
@media (max-width: 600px) {
  .sales-global-notification-panel {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    height: 100vh;
    max-height: 100vh;
  }

  .sales-global-notification-tab {
    font-size: 0.9rem;
    padding: 10px;
  }

  .sales-global-notification-container {
    margin-top: 0px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }
}

/* ------------------------- NOTIFICATION STYLING ENDS HERE ------------------------- */


/* NEW ADMIN PANEL BUTTONS STYLING STARTS FROM HERE  */
.nav-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 20px;
  justify-items: center;
}

.adminpanel_section_button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #2d3748;
  border-radius: 10px;
  text-decoration: none;
  color: white;
  padding: 2px 15px;
  width: 100%;
  max-width: 320px;
  height: 65px;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.adminpanel_section_button:hover {
  background-color: #f15922;
  transform: translateY(-4px);
}

.adminpanel_section_button:active {
  transform: scale(0.96);
}

.adminpanel_section_button_folder {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.adminpanel_section_button_back {
  width: 80%;
  z-index: 1;
}

.adminpanel_section_button_page {
  position: absolute;
  width: 55%;
  z-index: 2;
  transition: all 0.3s ease;
}

.adminpanel_section_button_front {
  position: absolute;
  width: 85%;
  z-index: 3;
  opacity: 0.95;
  transform-origin: bottom;
  transition: all 0.3s ease;
}

.adminpanel_section_button:hover .adminpanel_section_button_page {
  transform: translateY(-5px);
}

.adminpanel_section_button:hover .adminpanel_section_button_front {
  transform: rotateX(30deg);
}

.adminpanel_section_button_text {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: left;
  line-height: 1.3;
}

@media (min-width: 600px) {
  .nav-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .nav-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
}

* {
  -webkit-tap-highlight-color: transparent;
  /* -webkit-user-select: none;
  user-select: none; */
}

/* NEW ADMIN PANEL BUTTONS STYLING ENDS HERE  */
.leaderboard .backBtn,
.leads .backBtn,
#OE-B2BWorkshop .backBtn,
.order-table-section .backBtn {
  margin-top: 20px;
}


#checklists {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  .checklist_dashboard_header {
    background-color: #ffffff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .checklist_dashboard_header h1 {
    margin: 0;
    font-size: 22px;
    cursor: pointer;
  }

  .checklist_dashboard_header-icon {
    cursor: pointer;
  }

  .checklist_dashboard_container {
    padding: 20px;
    max-width: 800px;
    /* max-width: 75%; */
    margin: auto;
    background: #fff;
    min-height: 100vh;
    box-sizing: border-box;
  }

  .checklist_dashboard_title {
    text-align: center;
    color: #2c3e50;
    font-size: 24px;
    margin-bottom: 20px;
  }

  /* Form Inputs */
  .checklist_dashboard_form input[type="text"],
  .checklist_dashboard_form textarea {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
    box-sizing: border-box;
    resize: vertical;
  }

  /* Checklist item input and add button container */
  .checklist_dashboard_checklist_input {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: nowrap;
  }

  /* Checklist item text input */
  .checklist_dashboard_checklist_input input[type="text"] {
    flex: 1;
    min-width: 0;
  }

  /* Add Item button */
  .checklist_dashboard_checklist_input button {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s;
    white-space: nowrap;
    user-select: none;
    margin-top: 10px;
  }

  .checklist_dashboard_checklist_input button:hover {
    background: #0056b3;
  }

  /* Temporary checklist (before saving note) */
  .checklist_dashboard_temp_checklist {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
    max-height: 150px;
    overflow-y: auto;
  }

  .checklist_dashboard_temp_checklist li {
    display: flex;
    justify-content: space-between;
    background: #f1f1f1;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 14px;
  }

  .checklist_dashboard_temp_checklist li button {
    background: #dc3545;
    border: none;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    user-select: none;
  }

  /* Add Note button */
  .checklist_dashboard_add_note {
    width: 100%;
    background-color: #28a745;
    border: none;
    padding: 14px;
    color: white;
    border-radius: 8px;
    font-size: 16px;
    margin-top: 15px;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.3s;
    user-select: none;
  }

  .checklist_dashboard_add_note:hover {
    background-color: #1e7e34;
  }

  /* Notes list container */
  .checklist_dashboard_notes_list {
    margin-top: 30px;
  }

  /* Individual note card */
  .checklist_dashboard_note_card {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 18px;
    box-sizing: border-box;
    transition: background-color 0.3s;
  }

  /* Mark done background */
  .checklist_dashboard_note_card.done {
    background-color: #e0f7e9;
  }

  /* Note title and content */
  .checklist_dashboard_note_card.done h3,
  .checklist_dashboard_note_card.done .checklist_dashboard_note_content,
  .checklist_dashboard_note_card.done .checklist_dashboard_note_checklist span {
    text-decoration: line-through;
    color: #666;
  }

  /* Meta info */
  .checklist_dashboard_note_meta {
    font-size: 12px;
    color: grey;
    margin-top: 10px;
    margin-bottom: 10px;
    user-select: none;
  }

  /* Note content */
  .checklist_dashboard_note_content {
    font-size: 15px;
    margin-bottom: 10px;
    white-space: pre-wrap;
  }

  /* Checklist inside note */
  .checklist_dashboard_note_checklist {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 10px;
  }

  .checklist_dashboard_note_checklist li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    font-size: 14px;
    user-select: none;
  }

  .checklist_dashboard_item {
    font-weight: 500;
  }

  .checklist_dashboard_note_card h3 {
    all: unset;
    font-size: 20px;
    font-weight: bold;
  }

  .checklist_dashboard_note_details p {
    font-weight: 500;
    color: grey;
  }

  .checklist_dashboard_note_checklist input[type="checkbox"] {
    margin-right: 12px;
    cursor: pointer;
  }

  /* Buttons container */
  .checklist_dashboard_note_actions {
    margin-top: 12px;
    user-select: none;
  }

  /* Buttons in note cards */
  .checklist_dashboard_note_actions button {
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 10px;
    font-size: 13px;
    font-weight: 600;
    transition: background-color 0.25s;
    user-select: none;
  }

  .checklist_dashboard_btn_delete {
    background: #dc3545;
    color: white;
  }

  .checklist_dashboard_btn_delete:hover {
    background: #a71d2a;
  }

  .checklist_dashboard_btn_toggle {
    background: #ffc107;
    color: black;
  }

  .checklist_dashboard_btn_toggle:hover {
    background: #d39e00;
  }

  .checklist_dashboard_btn_expand {
    background: #17a2b8;
    color: white;
  }

  .checklist_dashboard_btn_expand:hover {
    background: #117a8b;
  }

  /* Details toggle */
  .checklist_dashboard_note_details {
    display: none;
  }

  .checklist_dashboard_note_card.expanded .checklist_dashboard_note_details {
    display: block;
  }

  /* Responsive */
  @media (min-width: 600px) {
    .checklist_dashboard_title {
      font-size: 28px;
    }
  }
}


/* ------------------------------------- TASK LIST STYLING STARTS FROM HERE ------------------------------------- */
#tasklists {
  h3 {
    all: unset;
  }

  font-family:Inter,
  system-ui,
  -apple-system,
  "Segoe UI",
  Roboto,
  'Helvetica Neue',
  Arial;

  .tasklists_dashboard_header {
    background-color: #ffffff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .tasklists_dashboard_header h1 {
    margin: 0;
    font-size: 22px;
    cursor: pointer;
  }

  .tasklists_dashboard_header-icon {
    cursor: pointer;
  }

  .tasklists_dashboard_logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff5e00;
    font-weight: 700;
  }

  .tasklists_dashboard_download_btn, .tasklists_dashboard_verify_all {
    border-radius: 5px;
    background: #ff8a40;
    padding: 7px 10px;
    border: none;
    color: #fff;
  }

  .tasklists_dashboard_download_btn:hover, .tasklists_dashboard_verify_all:hover {
    background: #555555;
  }

  .tasklists_dashboard_main {
    padding: 16px;
    max-width: 900px;
    margin: 16px auto;
  }

  .tasklists_dashboard_progress {
    height: 10px;
    background: #e6e6e6;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px
  }

  .tasklists_dashboard_progress>i {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff5e00, #ff8a3d)
  }

  .tasklists_dashboard_checklist_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tasklists_dashboard_card {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.04);
  }

  .tasklists_dashboard_card .tasklists_dashboard_row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }

  .tasklists_dashboard_left {
    flex: 0 0 36px
  }

  .tasklists_dashboard_content {
    flex: 1
  }

  .tasklists_dashboard_title {
    font-weight: 600;
    margin: 0 0 6px 0;
    font-size: 15px;
    margin-bottom: 6px;
  }

  .tasklists_dashboard_desc {
    margin: 0;
    color: #6b7280;
    font-size: 13px
  }

  .tasklists_dashboard_controls {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .tasklists_dashboard_file_preview {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }

  .tasklists_dashboard_thumb {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #6b7280;
    overflow: hidden;
  }

  .tasklists_dashboard_meta {
    font-size: 12px;
    color: #6b7280
  }

  label.tasklists_dashboard_switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer
  }

  input[type=checkbox] {
    width: 18px;
    height: 18px
  }

  .tasklists_dashboard_btnn {
    display: inline-block;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: #111
  }

  .tasklists_dashboard_btnn:disabled {
    cursor: not-allowed;
    opacity: .3;
  }

  .tasklists_dashboard_input {
    display: inline-block;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 10px;
    color: #111;
    font-weight: 600;
    background: transparent;
    border: 1px solid rgba(15, 23, 42, 0.06);
    outline: none;
    width: 50px;
    text-align: center;
  }

  /* Optional: styling for focus/hover to match button feel */
  .tasklists_dashboard_input:focus,
  .tasklists_dashboard_input:hover {
    border-color: rgba(15, 23, 42, 0.15);
    background-color: rgba(15, 23, 42, 0.02);
  }


  .tasklists_dashboard_btn {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 10px;
    border: 0;
    background: #ff5e00;
    color: white;
    font-weight: 600;
    cursor: pointer;
  }

  .tasklists_dashboard_btn:disabled {
    background: grey;
    cursor: not-allowed;
  }

  .tasklists_dashboard_btn.tasklists_dashboard_ghost {
    background: transparent;
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: #111
  }

  .tasklists_dashboard_btn.tasklists_dashboard_warn {
    background: #ef4444
  }

  .tasklists_dashboard_btn:disabled,
  .tasklists_dashboard_input:disabled {
    opacity: .3;
    cursor: not-allowed;
  }

  .tasklists_dashboard_actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: space-between;
    align-items: center;
  }

  .tasklists_dashboard_small {
    font-size: 13px;
    color: #6b7280
  }

  .tasklists_dashboard_footer {
    max-width: 900px;
    margin: 8px auto;
    padding: 0 16px 40px;
    font-size: 13px;
    color: #6b7280;
    text-align: center;
  }

  /* validation */
  .tasklists_dashboard_invalid {
    outline: 2px solid #fca5a5
  }

  .tasklists_dashboard_required_note {
    color: #b91c1c;
    font-size: 13px;
    margin-top: 8px
  }

  /* responsive */
  @media(min-width:700px) {
    .tasklists_dashboard_checklist_grid {
      grid-template-columns: repeat(2, 1fr)
    }
  }

  .tasklists_dashboard_action_buttons {
    white-space: nowrap;
    display: flex;
    gap: 6px;
  }

  /* badges, summary */
  .tasklists_dashboard_badge {
    background: #f3f4f6;
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 12px;
  }

  .tasklists_dashboard_summary {
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.9));
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.03);
    margin-bottom: 12px;
  }

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

  #tasklists_dashboard_todayLabel {
    color: #ff5e00;
  }

  .tasklists_dashboard_summary_actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  @media (max-width: 600px) {
    .tasklists_dashboard_actions {
      flex-direction: column;
      align-items: stretch;
    }

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

    .tasklists_dashboard_action_buttons {
      justify-content: center;
      margin-top: 8px;
    }
  }

  #tasklists_dashboard_view_modal-openModal {
    background: linear-gradient(90deg, #ff6600, #ff914d);
    color: #fff;
    border: none;
    padding: 12px 26px;
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: 0.3s ease;
  }

  #tasklists_dashboard_view_modal-openModal:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  }

  .tasklists_dashboard_view_modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    justify-content: center;
    align-items: center;
    z-index: 100;
    /* padding: 20px; */
    backdrop-filter: blur(3px);
  }

  .tasklists_dashboard_view_modal-content {
    background: #ffffff;
    /* border-radius: 12px; */
    border-radius: 0;
    width: 100%;
    max-width: none;
    overflow: hidden;
    box-shadow: none;
    flex-direction: column;
    animation: fadeUp 0.35s ease;
    width: 100vw;
    height: 100vh;
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .tasklists_dashboard_view_modal-header {
    background: linear-gradient(90deg, #ff6600, #ff914d);
    color: #fff;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
  }

  .tasklists_dashboard_view_modal_h2 {
    color: #fff;
  }

  .tasklists_dashboard_view_modal-header h2 {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
  }

  .tasklists_dashboard_view_modal-close-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
  }

  .tasklists_dashboard_view_modal-close-btn:hover {
    transform: scale(1.2);
    opacity: 0.85;
  }

  .tasklists_dashboard_view_modal-date-picker {
    padding: 16px 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    justify-content: space-between;
  }

  .tasklists_dashboard_view_modal-date-picker label {
    font-weight: 500;
    color: #2d3436;
  }

  .tasklists_dashboard_view_modal-date-picker input[type="date"] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 15px;
    color: #2d3436;
    outline: none;
    transition: 0.3s ease;
  }

  .tasklists_dashboard_view_modal-date-picker input[type="date"]:focus {
    border-color: #ff6600;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15);
  }

  .tasklists_dashboard_view_modal-table-container {
    padding: 20px 22px 30px;
    overflow-x: auto;
    overflow-y: auto;
    /* max-height: 350px; */
    transition: opacity 0.3s ease;
  }

  .tasklists_dashboard_view_modal_table {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  }

  .tasklists_dashboard_row_forcrm_data {
    background: #00796b69;
    /* color: #fff; */
    font-weight: bold;
  }

  .tasklists_dashboard_row_forcrm_data_middle {
    background: #00796b7d;
    /* color: #fff; */
    font-weight: bold;
  }

  .tasklists_dashboard_row_for_edit_button {
    border-radius: 5px;
    background: #ff8a40;
    padding: 7px 35px;
    border: none;
    color: #fff;
  }

  .tasklists_dashboard_row_for_edit_button:hover {
    background: #555555;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    min-width: 850px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
  }

  th {
    background: #555;
    color: #fff;
    text-align: center;
    padding: 12px 10px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
  }

  td {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    font-size: 15px;
    color: #2d3436;
  }

  tr:last-child td {
    border-bottom: none;
  }

  td span {
    font-size: 20px;
    transition: transform 0.2s, opacity 0.2s;
  }

  td span:hover {
    transform: scale(1.25);
    opacity: 0.85;
  }

  .tasklists_dashboard_view_modal-done {
    color: #27ae60;
    position: relative;
  }

  .tasklists_dashboard_updated_value {
    position: absolute;
    left: 15px;
    font-size: 12px;
    color: #fff;
    background: red;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 50px;
  }

  .tasklists_dashboard_view_modal-not-done {
    color: #e74c3c;
  }

  .tasklists_dashboard_row {
    cursor: pointer;
  }

  .tasklist-skeleton-row .skeleton-cell {
    height: 18px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.2s ease-in-out infinite;
    border-radius: 4px;
  }

  @keyframes skeleton-loading {
    0% {
      background-position: 200% 0;
    }

    100% {
      background-position: -200% 0;
    }
  }

  .tasklists_dashboard_show_verification_modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
    padding: 16px;
  }

  .tasklists_dashboard_show_verification_modal-box {
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: fadeInScale 0.25s ease;
  }

  @keyframes fadeInScale {
    from {
      opacity: 0;
      transform: scale(0.9);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .tasklists_dashboard_show_verification_modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0f172a;
    color: #fff;
    padding: 14px 18px;
  }

  .tasklists_dashboard_show_verification_modal-header h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.3px;
  }

  .tasklists_dashboard_show_verification_modal-close {
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .tasklists_dashboard_show_verification_modal-close:hover {
    color: #fff;
  }

  .tasklists_dashboard_show_verification_modal-body {
    padding: 18px;
  }

  .tasklists_dashboard_show_verification_modal-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    margin-bottom: 12px;
    background: #f1f5f9;
    padding: 8px 10px;
    border-radius: 8px;
  }

  .tasklists_dashboard_show_verification_modal-files {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .tasklists_dashboard_show_verification_modal-file {
    background: #f9fafb;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;

    text-decoration: none;
    color: #1d4ed8;
    font-weight: 500;
  }

  .tasklists_dashboard_show_verification_modal-file:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    transform: translateY(-2px);
  }

  #tasklists_dashboard_show_verification_modal-title {
    color: #fff;
  }

  @media (max-width: 480px) {
    .tasklists_dashboard_show_verification_modal-box {
      max-width: 95%;
    }

    .tasklists_dashboard_show_verification_modal-header h2 {
      font-size: 0.9rem;
    }

    .tasklists_dashboard_show_verification_modal-file a {
      font-size: 0.9rem;
    }
  }

  .tasklists_dashboard_btn.drag-over {
    border-color: #4a90e2;
    background-color: #e6f2ff;
    color: #004a99;
    transition: all 0.2s ease;
  }


}

/* ------------------------------------- TASK LIST STYLING ENDS HERE ------------------------------------- */

/* ------------------------------------- CRM ADD FILES SECTION STARTS FROM HERE ------------------------------------- */
.crm-leadModal-mistralai-wrapper {
  background-color: #2d3748;
  padding: 20px;
  border-radius: 12px;
  margin: 20px auto;
  box-shadow: 0 8px 20px rgba(45, 55, 72, 0.5);
  color: #e2e8f0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.crm-leadModal-mistralai-upload-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crm-leadModal-mistralai-dropzone {
  background-color: #4a5568;
  color: #cbd5e0;
  text-align: center;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  transition: background-color 0.3s;
}

.crm-leadModal-mistralai-dropzone:hover,
.crm-leadModal-mistralai-dropzone.dragover {
  background-color: #2c5282;
  color: #edf2f7;
}

.crm-leadModal-mistralai-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* min-height: 80px; */
}

.crm-leadModal-mistralai-img-box {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #718096;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
  background-color: #1a202c;
}

.crm-leadModal-mistralai-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.crm-leadModal-mistralai-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #e53e3e;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 4px #e53e3e;
  transition: background-color 0.2s ease;
}

.crm-leadModal-mistralai-remove-btn:hover {
  background-color: #c53030;
}

.crm-leadModal-mistralai-extract-btn {
  margin-top: 15px;
  background-color: #3182ce;
  border: none;
  color: white;
  padding: 10px 28px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s ease;
  min-width: 140px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.crm-leadModal-mistralai-extract-btn:disabled {
  background-color: #718096;
  cursor: not-allowed;
}

.crm-leadModal-mistralai-extract-btn:not(:disabled):hover {
  background-color: #2b6cb0;
}

@keyframes crm-leadModal-mistralai-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.crm-leadModal-mistralai-loading-icon {
  display: inline-block;
  animation: crm-leadModal-mistralai-spin 1s linear infinite;
  font-size: 18px;
}

.crm-leadModal-mistralai-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
}


.crm-leadModal-mistralai-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.crm-leadModal-mistralai-toggle-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.crm-leadModal-mistralai-toggle-label {
  color: #cbd5e0;
  font-size: 15px;
  font-weight: 600;
}

.crm-leadModal-mistralai-toggle {
  position: relative;
  width: 48px;
  height: 24px;
  display: inline-block;
}

.crm-leadModal-mistralai-toggle input {
  display: none;
}

.crm-leadModal-mistralai-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #4a5568;
  border-radius: 24px;
  transition: 0.3s;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
}

.crm-leadModal-mistralai-toggle-slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 2px;
  top: 2px;
  background-color: #e2e8f0;
  border-radius: 50%;
  transition: 0.3s;
}

.crm-leadModal-mistralai-toggle input:checked+.crm-leadModal-mistralai-toggle-slider {
  background-color: #2b6cb0;
}

.crm-leadModal-mistralai-toggle input:checked+.crm-leadModal-mistralai-toggle-slider::before {
  transform: translateX(24px);
  background-color: white;
}

@media (max-width: 480px) {
  .crm-leadModal-mistralai-action-row {
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    align-items: center;
  }

  .crm-leadModal-mistralai-toggle-wrapper {
    justify-content: center;
  }

  .crm-leadModal-mistralai-extract-btn {
    align-self: center;
  }
}

/* ------------------------------------- CRM ADD FILES SECTION ENDS HERE ------------------------------------- */


/* ------------------------------------- OE REMARKS STYLING STARTS FROM HERE ------------------------------------- */
.oe-service-remarks-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.oe-service-remarks-modal-box {
  background: #fff;
  width: 90%;
  max-width: 420px;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  animation: popup 0.25s ease-out;
}

.oe-service-remarks-modal-title {
  margin-top: 0;
  font-size: 1.3rem;
}

.oe-service-remarks-modal-textarea {
  width: 100%;
  height: 120px;
  padding: 10px;
  resize: vertical;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  margin-top: 10px;
  box-sizing: border-box;
}

.oe-service-remarks-modal-submit {
  width: 100%;
  background: #1a202c;
  color: white;
  border: none;
  padding: 12px;
  margin-top: 15px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
}

.oe-service-remarks-modal-submit:hover {
  background: #131416;
}

.oe-service-remarks-modal-submit:disabled {
  background: grey;
  opacity: 0.5;
  cursor: not-allowed;
}

.oe-service-remarks-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

@keyframes popup {
  from {
    transform: scale(0.85);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .oe-service-remarks-modal-box {
    width: 85%;
  }
}

.oe-service-view-remarks-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}

.oe-service-view-remarks-modal-content {
  background: #fff;
  margin: 40px auto;
  padding: 20px;
  width: 90%;
  max-width: 450px;
  border-radius: 10px;
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
  word-break: break-word;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.oe-service-view-remarks-close {
  position: sticky;
  top: 0;
  float: right;
  font-size: 26px;
  cursor: pointer;
  background: #fff;
  padding: 0 5px;
  z-index: 10;
}

#oe-service-view-remarks-company-name {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  word-break: break-word;
}

#oe-service-view-remarks-skeleton {
  margin-top: 5px;
}

.oe-service-view-remarks-skeleton-line {
  height: 14px;
  background: #e2e2e2;
  margin: 10px 0;
  border-radius: 4px;
  animation: oe-service-view-remarks-shimmer 1.5s infinite;
}

@keyframes oe-service-view-remarks-shimmer {
  0% {
    opacity: .6;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: .6;
  }
}

.oe-service-view-remarks-item {
  padding: 12px 0;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  gap: 6px;
  white-space: normal;
  overflow-wrap: break-word;
}

.oe-service-view-remarks-text {
  font-size: 15px;
  line-height: 1.4;
  color: #222;
  word-break: break-word;
}

.oe-service-view-remarks-meta small {
  color: #555;
}

.oe-service-view-remarks-item:last-child {
  border-bottom: none;
}

@media (max-width: 480px) {
  .oe-service-view-remarks-modal-content {
    width: 84%;
    padding: 16px;
  }

  #oe-service-view-remarks-company-name {
    font-size: 18px;
  }

  .oe-service-view-remarks-text {
    font-size: 14px;
  }
}

/* ------------------------------------- OE REMARKS STYLING ENDS HERE ------------------------------------- */


/* ------------------------------------- OE HEADER STYLING STARTS FROM HERE ------------------------------------- */
/* ---------------- AI GLASS PANEL ---------------- */
.oe-service-centres-top-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  border: 1px solid rgba(255,255,255,0.35);
  margin-bottom: 20px;
}

/* ---------------- SEARCH BAR ---------------- */
.oe-service-centres-search-wrapper {
  display: flex;
  align-items: center;
  background: rgba(248, 250, 255, 0.75);
  border: 1px solid rgba(210, 215, 225, 0.7);
  border-radius: 8px;   
  padding: 0 10px;
  height: 38px;         
  flex: 1 1 330px;
  width: 100%;
  transition: 0.3s ease;
  box-sizing: border-box;
}

.oe-service-centres-search-wrapper:focus-within {
  border-color: #6a9bff;
  box-shadow: 0 0 10px rgba(88,135,255,0.30);
  background: rgba(235,240,255,0.95);
}

.oe-service-centres-search-wrapper input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  padding: 4px 6px; 
  height: 100%;
  display: flex;
  align-items: center;
}

/* ---------------- SEARCH & CLEAR ICONS ---------------- */
#oe-service-centres-clearBtn,
#oe-service-centres-searchBtn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 17px;
  padding: 4px 6px;
  color: #4a6cff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;          
}

#oe-service-centres-searchBtn:hover {
  transform: scale(1.15);
}

/* ---------------- SELECT BOXES ---------------- */
.oe-service-centres-top-controls select {
  padding: 6px 10px;
  height: 38px;  
  border-radius: 8px;
  border: 1px solid rgba(210, 215, 225, 0.7);
  background: rgba(255,255,255,0.7);
  font-size: 13.5px;
  cursor: pointer;
  flex: 1 1 calc(25% - 15px);
  min-width: 150px;
  transition: 0.25s ease;
}

.oe-service-centres-top-controls select:hover {
  border-color: #6a9bff;
  background: rgba(240,245,255,0.8);
  box-shadow: 0 3px 10px rgba(120,140,255,0.25);
}

/* ---------------- ADD BUTTON ---------------- */
.oe-service-centres-add-btn {
  background: #2c3e50;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 16px;
  height: 38px;        
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  flex: 1 1 150px;
  transition: 0.25s ease;
}

.oe-service-centres-add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(70,105,255,0.45);
}

/* ---------------- MOBILE OPTIMIZATION ---------------- */
@media (max-width: 768px) {
  .oe-service-centres-top-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .oe-service-centres-search-wrapper,
  .oe-service-centres-top-controls select,
  .oe-service-centres-add-btn {
    width: 100%;
    flex: none;
  }

  .oe-service-centres-top-controls select {
    margin-top: 4px;
  }
}

/* ------------------------------------- OE CONTACTED BUTTON STYLING ------------------------------------- */
.oe-service-centres-table-wrapper {
  overflow-x: auto;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 18px rgba(0,0,0,0.05);
  padding: 0;
}

#oe-service-centres-dataTable {
  width: 100%;
  border-collapse: collapse;
  font-family: "Inter", sans-serif;
  font-size: 14px;
}

#oe-service-centres-dataTable thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #2c3e50;
  color: #fff;
  padding: 14px 10px;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
}

#oe-service-centres-dataTable thead::after {
  content: "";
  position: sticky;
  top: 0;
  height: 4px;
  display: block;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent);
  width: 100%;
}

#oe-service-centres-dataTable td {
  padding: 14px 10px;
  border-bottom: 1px solid #f1f1f1;
  text-align: center;
  color: #333;
}

#oe-service-centres-dataTable tbody tr:hover {
  background: #f9fafb;
  transition: 0.2s;
}

.oe-category-badge {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 10px;
  font-weight: 600;
}

.oe-category-badge-b2b { background: #e7f5ff; color: #1c7ed6; }
.oe-category-badge-oe  { background: #e6f4ea; color: #2e7d32; }
.oe-category-badge-na  { background: #fff4e6; color: #d9480f; }

.oe-service-centres-action-buttons {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.oe-service-centres-action-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.oe-service-centres-edit    { background: #e7f1ff; color: #1c4ed8; }
.oe-service-centres-delete  { background: #ffe5e5; color: #d32f2f; }
.oe-service-centres-add-remarks { background: #e6f4ea; color: #1b5e20; }
.oe-service-centres-view-remarks { background: #ececec; color: #444; }
.oe-service-centres-contacted { background: #ffe0008c; color: #000; }

.oe-service-centres-action-btn:hover {
  transform: translateY(-1px);
  filter: brightness(0.96);
}

.oe-service-centres-view-remarks:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.skeleton-box {
  background: linear-gradient(90deg, #ededed 0%, #f7f7f7 50%, #ededed 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: shimmer 1.3s infinite linear;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skel-xs { height: 10px; width: 30px; }
.skel-sm { height: 12px; width: 60px; }
.skel-md { height: 14px; width: 120px; }
.skel-lg { height: 14px; width: 180px; }
.skel-xl { height: 16px; width: 240px; }

.skel-circle {
  height: 26px;
  width: 26px;
  border-radius: 50%;
}

.skel-badge {
  height: 16px;
  width: 70px;
  border-radius: 12px;
}

.skel-btn {
  height: 20px;
  width: 60px;
  border-radius: 6px;
}

.skel-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ------------------------------------- OE HEADER STYLING ENDS HERE ------------------------------------- */

/* ------------------------------------- TASK LIST EDIT MODAL STYLING STARTS FROM HERE ------------------------------------- */
  .tasklists_dashboard_edit_modal-open-btn{
    appearance:none;
    border:0;
    padding:12px 18px;
    border-radius:10px;
    background:#ff5e00;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(255,94,0,0.18);
  }

  .tasklists_dashboard_edit_modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(2,6,23,0.55);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:1200;
    padding:24px;
  }
  .tasklists_dashboard_edit_modal-overlay.is-open{
    display:flex;
  }

  .tasklists_dashboard_edit_modal-content{
    width:100%;
    max-width:720px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 20px 60px rgba(2,6,23,0.35);
    overflow:hidden;
    transform:translateY(12px);
  }

  .tasklists_dashboard_edit_modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 20px;
    border-bottom:1px solid #edf2f7;
  }
  .tasklists_dashboard_edit_modal-title{
    font-size:18px;
    font-weight:700;
    color:#0f172a;
  }
  .tasklists_dashboard_edit_modal-close{
    background:transparent;
    border:0;
    font-size:20px;
    padding:6px 8px;
    border-radius:8px;
    cursor:pointer;
    color:#6b7280;
  }
  .tasklists_dashboard_edit_modal-close:hover{
    background:#f3f4f6
  }

  .tasklists_dashboard_edit_modal-body{
    padding:20px;
    max-height:60vh;
    overflow:auto
  }

  .tasklists_dashboard_edit_modal-form{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px
  }
  .tasklists_dashboard_edit_modal-row{
    display:flex;
    flex-direction:column;
    gap:6px
  }
  .tasklists_dashboard_edit_modal-label{
    font-size:13px;
    color:#6b7280;
  }
  .tasklists_dashboard_edit_modal-input{
    height:44px;
    padding:10px;
    border-radius:8px;
    border:1px solid #e6e9ef;
    font-size:15px;
    outline:none;
    box-sizing:border-box;
  }
  .tasklists_dashboard_edit_modal-input:focus{
    box-shadow:0 6px 18px rgba(15,23,42,0.06);
    border-color:#ff5e00
  }

  .tasklists_dashboard_edit_modal-full{
    grid-column:1/-1
  }

  .tasklists_dashboard_edit_modal-actions{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:flex-end;
    padding:14px 20px;
    border-top:1px solid #f1f5f9
  }
  .tasklists_dashboard_edit_modal-submit{
    background:#ff5e00;
    color:#fff;
    border:0;
    padding:10px 16px;
    border-radius:10px;
    font-weight:700;
    cursor:pointer
  }
  .tasklists_dashboard_edit_modal-submit:disabled {
    cursor: not-allowed;
  }
  .tasklists_dashboard_edit_modal-cancel{
    background:transparent;
    border:0;
    padding:10px 16px;
    border-radius:10px;
    cursor:pointer;
    color:#6b7280
  }

  @media (max-width:560px){
    .tasklists_dashboard_edit_modal-form{grid-template-columns:1fr}
    .tasklists_dashboard_edit_modal-content{max-width:520px}
  }

  /* ------------------------------------- TASK LIST EDIT MODAL STYLING ENDS HERE ------------------------------------- */

  /* ------------------------------------- TASK LIST ADD MONTHLY MODAL STYLING STARTS FROM HERE ------------------------------------- */

  .tasklists_dashboard_monthly_submit_modal-open-btn{
      appearance:none;
      border:0;
      padding:12px 18px;
      border-radius:10px;
      background:#ff5e00;
      color:#fff;
      font-weight:600;
      cursor:pointer;
      box-shadow:0 6px 18px rgba(255,94,0,0.18);
    }

    /* overlay */
    .tasklists_dashboard_monthly_submit_modal-overlay{
      position:fixed;
      inset:0;
      background:rgba(2,6,23,0.55);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:1200;
      padding:24px;
    }
    .tasklists_dashboard_monthly_submit_modal-overlay.is-open{
      display:flex;
    }

    /* modal card */
    .tasklists_dashboard_monthly_submit_modal-content{
      width:100%;
      max-width:720px;
      background:#fff;
      border-radius:12px;
      box-shadow:0 20px 60px rgba(2,6,23,0.35);
      overflow:hidden;
      transform:translateY(12px);
    }

    .tasklists_dashboard_monthly_submit_modal-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:18px 20px;
      border-bottom:1px solid #edf2f7;
    }
    .tasklists_dashboard_monthly_submit_modal-title{
      font-size:18px;
      font-weight:700;
      color:#0f172a;
    }
    .tasklists_dashboard_monthly_submit_modal-close{
      background:transparent;
      border:0;
      font-size:20px;
      padding:6px 8px;
      border-radius:8px;
      cursor:pointer;
      color:#6b7280;
    }
    .tasklists_dashboard_monthly_submit_modal-close:hover{
      background:#f3f4f6;
    }

    .tasklists_dashboard_monthly_submit_modal-body{
      padding:20px;
      max-height:60vh;
      overflow:auto;
    }

    .tasklists_dashboard_monthly_submit_modal-category-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:12px;
      margin-bottom:20px;
    }

    .tasklists_dashboard_monthly_submit_modal-category-item{
      padding:14px;
      border:1px solid #e5e7eb;
      border-radius:12px;
      text-align:center;
      font-weight:600;
      cursor:pointer;
      user-select:none;
      transition: border-color 0.2s;
    }
    .tasklists_dashboard_monthly_submit_modal-category-item.active{
      border-color: #ff5e00;
    }

    .tasklists_dashboard_monthly_submit_modal-salesperson-list{
      display:flex;
      flex-direction:column;
      gap:12px;
      margin-top: 10px;
    }

    .tasklists_dashboard_monthly_submit_modal-sp-row{
      display:flex;
      justify-content:space-between;
      padding:10px 14px;
      border:1px solid #e5e7eb;
      border-radius:8px;
      align-items:center;
      background:#fff;
    }

    /* Small inputs but styled like your original */
    .tasklists_dashboard_monthly_submit_modal-input{
      height:32px;        /* smaller height */
      width:60px;         /* smaller width */
      padding:6px 8px;
      border-radius:8px;
      border:1px solid #e6e9ef;
      font-size:15px;
      outline:none;
      box-sizing:border-box;
      text-align:center;
      transition: box-shadow 0.3s, border-color 0.3s;
    }
    .tasklists_dashboard_monthly_submit_modal-input:focus{
      box-shadow:0 6px 18px rgba(15,23,42,0.06);
      border-color:#ff5e00;
    }

    .tasklists_dashboard_monthly_submit_modal-actions{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:flex-end;
      padding:14px 20px;
      border-top:1px solid #f1f5f9;
    }

    .tasklists_dashboard_monthly_submit_modal-submit{
      background:#ff5e00;
      color:#fff;
      border:0;
      padding:10px 16px;
      border-radius:10px;
      font-weight:700;
      cursor:pointer;
    }
    .tasklists_dashboard_monthly_submit_modal-cancel{
      background:transparent;
      border:0;
      padding:10px 16px;
      border-radius:10px;
      cursor:pointer;
      color:#6b7280;
    }

    /* responsive */
    @media (max-width:560px){
      .tasklists_dashboard_monthly_submit_modal-content{
        max-width:520px;
      }
      .tasklists_dashboard_monthly_submit_modal-category-grid{
        grid-template-columns:1fr;
      }
    }

    /* ------------------------------------- TASK LIST ADD MONTHLY MODAL STYLING ENDS HERE ------------------------------------- */


    /* ---------------------------------- WHATSAPP ACTIVITY STATUS DASHBOARD STYLING STARTS FROM HERE ---------------------------------- */
    #whatsAppBot {
      .whatsAppBot_dashboard_header {
        background-color: #ffffff;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: sticky;
        top: 0;
        z-index: 10;
      }

      .whatsAppBot_dashboard_header h1 {
        margin: 0;
        font-size: 22px;
        cursor: pointer;
      }

      .whatsAppBot_dashboard_header-icon {
        cursor: pointer;
      }

      .whatsapp_bot_container {
        max-width: 900px;
        margin: auto;
        padding: 16px;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      }

      .whatsapp_bot_card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #ffffff;
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 12px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        gap: 14px;
      }

      .whatsapp_bot_left {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
      }

      .whatsapp_bot_avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 16px;
        color: #374151;
        overflow: hidden;
      }

      .whatsapp_bot_avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .whatsapp_bot_info {
        display: flex;
        flex-direction: column;
      }

      .whatsapp_bot_name {
        font-weight: 600;
        font-size: 15px;
      }

      .whatsapp_bot_phone {
        font-size: 13px;
        color: #6b7280;
      }

      .whatsapp_bot_status {
        font-size: 13px;
        margin-top: 2px;
      }

      .whatsapp_bot_status.online { color: #16a34a; }
      .whatsapp_bot_status.offline { color: #dc2626; }

      .whatsapp_bot_actions {
        display: flex;
        gap: 8px;
      }

      .whatsapp_bot_btn {
        border: none;
        padding: 8px 14px;
        border-radius: 20px;
        font-size: 13px;
        cursor: pointer;
        min-width: 90px;
      }

      .whatsapp_bot_btn_online { background: #e7f9ef; color: #16a34a; }
      .whatsapp_bot_btn_offline { background: #fdecec; color: #dc2626; }

      .whatsapp_bot_btn_active {
        box-shadow: inset 0 0 0 2px currentColor;
        font-weight: 600;
      }

      .whatsapp_bot_skeleton {
        background: linear-gradient(
          90deg,
          #e5e7eb 25%,
          #f3f4f6 37%,
          #e5e7eb 63%
        );
        background-size: 400% 100%;
        animation: skeleton-loading 1.4s ease infinite;
        border-radius: 6px;
      }

      @keyframes skeleton-loading {
        0% { background-position: 100% 50%; }
        100% { background-position: 0 50%; }
      }

      .whatsapp_bot_skeleton-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
      }

      .whatsapp_bot_skeleton-line {
        height: 12px;
        width: 140px;
        margin-bottom: 6px;
      }

      .whatsapp_bot_skeleton-line.short {
        width: 90px;
      }

      .whatsapp_bot_skeleton-btn {
        height: 34px;
        width: 90px;
        border-radius: 20px;
      }

      @media (max-width: 600px) {
        .whatsapp_bot_card {
          flex-direction: column;
          align-items: stretch;
        }

        .whatsapp_bot_actions {
          width: 100%;
        }

        .whatsapp_bot_btn {
          flex: 1;
        }
      }
    }

    /* ---------------------------------- WHATSAPP ACTIVITY STATUS DASHBOARD STYLING ENDS HERE ---------------------------------- */