/***************************************
   GLOBAL MAIN MENU (UPDATED FOR ANGULAR 12)
****************************************/
/* Restore Kendo clear filter icon */
body .p-slidemenu .p-slidemenu-backward > .p-menuitem-link:hover {
  background-color: #191919 !important;
  color: #dedede !important;
}

.k-icon.k-i-filter-clear,
.k-svg-icon.k-svg-i-filter-clear {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Undo PrimeNG Nova Light override */
.k-icon {
 /* //font-size: 16px !important;*/
}

/* Make the clear icon/button clickable */
.k-i-filter-clear,
.k-button-icon[title="Clear"] {
  pointer-events: auto !important;
  cursor: pointer !important;
}

  /* Optional: smooth fade-out if you add a "hidden" class on click */
  .k-i-filter-clear.hidden,
  .k-button-icon[title="Clear"].hidden {
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }
/* Neutralize PrimeNG's hide class */
.p-slidemenu .p-slidemenu-content {
  overflow-y: auto;
  overflow-x: hidden !important;
  position: relative;
  width: 349px;
  height: 1000px;
}



/* LOGIN MENU */
.login-menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  background: #fff;
  padding: 10px 15px 10px 25px;
  height: 50px;
  width: 365px; /* FIXED WIDTH */
  overflow: hidden;
  white-space: nowrap;
}

  .login-menu .k-icon.k-i-user {
    font-size: 20px !important;
    margin-right: 10px;
  }

/* USER ICON */
.user-icon {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  width: 24px;
  border-radius: 50%;
}

span.user {
  text-align: left !important;
  position: absolute;
  left: 50px;
}

/* MAIN MENU BUTTON */
.mainMenu {
  margin: 0px 10px 0 32px;
}

.p-button {
  width: 3em !important;
  height: 3em !important;
  background: #666677 !important;
  border: none !important;
}

button .pi-bars {
  font-size: 26px !important;
}

/* ACTIVE MENU ICON COLOR */
body .p-slidemenu .p-menuitem-active > .p-menuitem-link .p-menuitem-icon,
body .p-slidemenu .p-menuitem-active > .p-menuitem-link .p-submenu-icon {
  color: #f13c30 !important;
}

/* HOVER STATE */
body #menuBtn.p-button:enabled:hover {
  background: #ee3322 !important;
}

/* MENU BUTTON SHAPE */
body #menuBtn.p-button.p-button-icon-only {
  width: 3em !important;
  height: 3em !important;
  border-radius: 5px !important;
}

/***************************************
   SLIDE MENU (UPDATED FOR PRIME NG 12)
****************************************/

.p-slidemenu-wrapper,
.p-slidemenu-content {
  min-height: 125vh;
}

.p-slidemenu {
  left: 0 !important;
  width: 350px; /* FIXED WIDTH */
  height: 100vh;
  top: 48px !important;
  background: #666677;
  z-index: 5 !important;
  border: none;
}

body .p-menu .p-menuitem-link,
body .p-slidemenu .p-menuitem-link {
  background: #666677 !important;
  padding: 15px !important;
  text-transform: uppercase;
}

  body .p-menu .p-menuitem-link:hover,
  body .p-slidemenu .p-menuitem-link:hover {
    background: #7a7a8c !important;
  }

body .p-menu .p-menuitem-text,
body .p-slidemenu .p-menuitem-text {
  color: #fff !important;
}

body .p-menu .p-menuitem-icon,
body .p-slidemenu .p-menuitem-icon {
  color: #fff !important;
  float: right;
}

.p-slidemenu .p-submenu-icon {
  color: #fff;
}

.p-slidemenu .p-slidemenu-rootlist {
  width: 100% !important;
}

.p-slidemenu .p-menuitem-active > .p-submenu > .p-submenu-list {
  width: 100% !important;
}

/***************************************
   PROFILE MENU
****************************************/

#profile-menu .p-animation-container,
#profile-menu.p-animation-container > .p-popup {
  margin-top: 10px;
  background: #666677 !important;
  width: 400px;
  min-height: 200vh;
}

.profile-menu-header {
  background: #fff;
  padding: 15px;
  font-size: 20px;
}

#profile-menu ul {
  margin: 0;
  padding: 0;
}

#profile-menu li {
  color: #f9f9f9;
  list-style: none;
  font-size: 16px;
  padding: 15px;
}

.listItem {
  display: block;
  color: #fff;
  font-size: 16px;
  padding: 15px 15px 15px 45px;
}

  .listItem:hover {
    background: #7a7a8c;
  }

/***************************************
   RESPONSIVE MENU FIXES
****************************************/

@media only screen and (max-width: 1050px) {

  body #menuBtn.p-button.p-button-icon-only {
    background-color: transparent !important;
    color: #212121 !important;
  }

  .hideInResponsive {
    display: none !important;
  }

  .sign-in-container {
    width: 65% !important;
    top: 55px !important;
  }

  .p-slidemenu {
    width: 300px !important; /* MOBILE WIDTH */
  }
}
/* Force PrimeNG SlideMenu width */
.p-slidemenu {
  width: 21.8rem !important;
  max-width: 21.8rem !important;
}



body .p-menuitem-content
{
    width:348px !important;
}


.p-icon.p-submenu-icon {
  visibility: hidden;
}

.submenu-icon-hidden .p-icon.p-submenu-icon {
  visibility: hidden !important;
}

.submenu-icon-visible .p-icon.p-submenu-icon {
  visibility: visible !important;
}

.k-button, .k-button-secondary {
  border-color: rgba(0, 0, 0, 0.08) !important;
}





/* Do NOT touch left/position of lists – let PrimeNG handle sliding */

/* Just stop clipping so the back button can show fully */
body .p-slidemenu,
body .p-slidemenu-wrapper,
body .p-slidemenu-content {
  overflow: visible !important;
}
  body .p-slidemenu .p-slidemenu-backward {
   /* display: flex !important;*/ /* overrides inline display:none */
    align-items: center;
    width: 184.3% !important; /* fixes half‑visible issue */
    background: white !important; /* you asked for white background */
    padding: 8px 12px;
    position: absolute !important;
    z-index: 999 !important;
  }


  body .p-slidemenu a.p-slidemenu-backward.p-menuitem-link:hover {
    background: #dbdbdb !important;
    color: #333333 !important;
  }


  body .p-slidemenu a.p-slidemenu-backward.p-menuitem-link {
    background-color: white !important; /* your color */
  }

  /* HIDE back button when root menu is active */
  body .p-slidemenu[aria-activedescendant="newSlideMenu_1"] .p-slidemenu-backward,
  body .p-slidemenu[aria-activedescendant="newSlideMenu_6"] .p-slidemenu-backward {
    display: none !important;
  }

  /* SHOW back button for all other menus */
  body .p-slidemenu .p-slidemenu-backward {
  /*  display: flex !important;*/
  }

  /* Remove underline from all menu items */
  body .p-slidemenu .p-menuitem-link,
  body .p-slidemenu .p-menuitem-link:focus,
  body .p-slidemenu .p-menuitem-link:active,
  body .p-slidemenu .p-menuitem-link:hover {
    text-decoration: none !important;
    outline: none !important;
  }

svg {
  visibility: hidden;
}
body .p-slidemenu .p-slidemenu-backward {
  font-weight: bold !important;
  color: black !important;
  text-transform: none !important;
}
@media only screen and (min-width: 991px) and (max-width: 1366px) {
  .p-button.p-button-icon-only .p-button-icon {
    font-size: 27px !important;
  }
}
/* ===============================
   KENDO PAGER – FINAL FIX
   =============================== */

/* RESET all pager buttons (numbers + first/last/prev/next) */
.k-pager-nav.k-button,
.k-pager-numbers .k-link {
  background-color:     #fafafa !important; /* white on first load */
  color: red !important; /* red text */
  border: none !important;
  box-shadow: none !important;
}

/* First page MUST NOT be red background */
.k-pager-numbers .k-state-selected {
  background-color: #fafafa !important;
  color: red !important;
}

/* ===============================
   HOVER (ALL buttons)
   =============================== */
.k-pager-nav.k-button:hover,
.k-pager-numbers .k-link:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-radius: 4px;
}

/* ===============================
   CLICKED PAGE ONLY
   =============================== */
.k-pager-numbers .k-state-selected:focus,
.k-pager-numbers .k-state-selected:active,
.k-pager-numbers .k-state-selected.k-selected {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-radius: 4px;
}

/* ===============================
   FIX FIRST / LAST buttons
   =============================== */
/* ===============================
   GO TO FIRST
   =============================== */
.k-pager-first.k-pager-nav.k-button {
  background-color: #fafafa !important;
  color: black !important;
  border: none !important;
  box-shadow: none !important;
}

  .k-pager-first.k-pager-nav.k-button:hover {
    background-color: #fafafa !important;
    color: black !important;
  }

  .k-pager-first.k-pager-nav.k-button.k-disabled {
    background-color: #fafafa !important;
    color: black !important;
    cursor: not-allowed !important;
  }


/* ===============================
   GO TO PREVIOUS
   =============================== */
.k-pager-prev.k-pager-nav.k-button {
  background-color: #fafafa !important;
  color: black !important;
  border: none !important;
  box-shadow: none !important;
}

  .k-pager-prev.k-pager-nav.k-button:hover {
    background-color: #fafafa !important;
    color: black !important;
  }

  .k-pager-prev.k-pager-nav.k-button.k-disabled {
    background-color: #fafafa !important;
    color: black !important;
    cursor: not-allowed !important;
  }


/* ===============================
   GO TO NEXT
   =============================== */
/* GO TO NEXT – default */
/* =========================
   GO TO FIRST PAGE
   ========================= */
.k-pager-nav.k-button.k-icon-button.k-button-md.k-button-flat-base.k-button-flat {
  background-color: #fafafa !important;
  color: black !important;
  border: none !important;
  box-shadow: none !important;
}
/* Default state */
.k-link.k-pager-nav.k-pager-first {
  background-color: #fafafa !important;
  color: black !important;
  border: none !important;
  box-shadow: none !important;
}

  /* Hover state */
  .k-link.k-pager-nav.k-pager-first:hover {
    background-color: #fafafa !important;
    color: black !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Disabled state */
  .k-link.k-pager-nav.k-pager-first.k-disabled {
    background-color: #fafafa !important;
    color: black !important;
    cursor: not-allowed !important;
  }
/* ===============================
   GO TO LAST
   =============================== */
.k-pager-last.k-pager-nav.k-button {
  background-color: #fafafa !important;
  color: black !important;
  border: none !important;
  box-shadow: none !important;
}

  .k-pager-last.k-pager-nav.k-button:hover {
    background-color: #fafafa !important;
    color: black !important;
  }

  .k-pager-last.k-pager-nav.k-button.k-disabled {
    background-color: #fafafa !important;
    color: black !important;
    cursor: not-allowed !important;
  }
.k-dropdown:hover .k-select,
.k-dropdown.k-state-focused .k-select {
  border-left: none !important;
}

/* Optional: improve disabled look */
.k-dropdown.k-disabled .k-dropdown-wrap,
.k-button:disabled,
.k-button.k-disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

.k-picker .k-input-button {
  background: none !important;
  border-color: transparent !important;
}


.k-dropdown.readonly .k-dropdown-wrap {
  pointer-events: none !important; /* blocks mouse clicks */
  opacity: 1 !important; /* keep normal look */
  background-color: #f5f5f5 !important;
}

.k-icon-button.k-disabled:hover,
.k-icon-button[aria-disabled="true"]:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* disable only the arrow icon-button */
.k-input-button.k-button.k-icon-button {
 /* pointer-events: none !important;
  opacity: 2!important;
  cursor: not-allowed !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;*/
}
.k-list > .k-state-focused.k-state-selected,
.k-listview > .k-state-focused.k-state-selected,
.k-state-focused.k-state-selected,
td.k-state-focused.k-state-selected {
  background: #1b364e !important;
  color: #fff;
}
.p-menuitem-text {
  font-family: "Open Sans", "Helvetica Neue", sans-serif !important;
  font-size: 14px !important;
  text-decoration: none !important;
 
 
}

.p-slidemenu.p-menuitem-text {
  vertical-align: middle;

}
.p-slidemenu.p-menuitem-link {
  background: #666677 !important;
  padding: 15px !important;
  position: absolute;
}
.p-ripple.p-element.p-menuitem-link {
top:10px
}
body .p-slidemenu.p-menuitem-link.p-menuitem-text {

}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  /* font-weight: 400; */
  line-height: 1.5;
  color: #212529;
  /* text-align: left; */
  background-color: #fff;
}
/* PrimeNG menus: force text left */
.p-menu .p-menuitem-link,
.p-menubar .p-menuitem-link,
.p-tieredmenu .p-menuitem-link,
.p-panelmenu .p-panelmenu-header-link {
  justify-content: flex-start !important; /* important for flex */
  text-align: left !important;
}

/* Text part */
.p-menu .p-menuitem-text,
.p-menubar .p-menuitem-text,
.p-tieredmenu .p-menuitem-text,
.p-panelmenu .p-menuitem-text {
  text-align: left !important;
  width: 100%;
}

/* Make clickable area full width */
.p-menu .p-menuitem-link,
.p-tieredmenu .p-menuitem-link {
  width: 100%;
}
.p-slidemenu .p-menuitem-link:not(.p-slidemenu-backward) {
  /* cursor: pointer; */
  display: block;
  align-items: center;
  text-decoration: none;
  overflow: hidden;
  position: relative;
}


body .p-slidemenu .p-menptem.p-menptem-active {
  color: #f13c30 !important;
}

.k-panelbar .k-panelbar-item .k-link {
  font-size: 14px !important;
  text-transform: uppercase !important;
/*  font-weight: normal !important;*/
}
.cart-review-footer-price-with-freight {
  margin-left: -148px;
}
.post-indicator-text {
  margin-top: -11px;
}
.k-dropdownlist .k-input-button.k-button.k-icon-button {
  pointer-events: none;
  cursor: not-allowed;
  -webkit-text-fill-color: #000 !important;
  /*opacity: 1;*/
}



body .p-slidemenu .p-slidemenu-backward .p-menuitem-icon,
body .p-slidemenu .p-slidemenu-backward .pi {
  color: #fff !important;
}
.cartTotalInGrid {
  margin-left: -215px;
}
@media only screen and (min-width: 991px) and (max-width: 1366px) {
  span.k-icon.k-i-user {
    font-size: 18px !important;
  }
}
@media only screen and (min-width: 991px) and (max-width: 2400px) {
  .account-list-items .k-icon {
    font-size: 25px !important;
    margin: 0 5px !important;
  }
}

button.k-button.k-button-md.k-rounded-md.k-button-solid.k-button-solid-primary.sign-in-button {
  background-color: #ee3322 !important;
  color: #ffffff !important;
  font-weight: bold;
}
.signIn-content p {
  color: #005b9f;
}

.signIn-content a:active {
  color: #005b9f;
}

.signIn-content p,
.signIn-content a {
  font-size: 16px;
}
.k-button.mr-2.k-primary.k-state-focused {
  border-color: #005b9f;
}


.k-grid-header .k-header {
  font-weight: bold !important;
}

.manageCompany #k-panelbar-1-item-default-2 .k-panelbar-item-text::before,
.manageCompany #k-panelbar-1-item-default-2[aria-expanded="true"] .k-panelbar-item-text::before,
.manageCompany #k-panelbar-1-item-default-2[aria-selected="true"] .k-panelbar-item-text::before {
  content: "\e813" !important; /* force it to not get reset */
  font-family: "WebComponentsIcons" !important;
  display: inline-block;
  margin-right: 8px;
  font-size: 16px;
  line-height: 1;
  color: #ffffff;
}
/* 1) Add ONE icon before the text (stable selector) */
.manageCompany .k-panelbar-item-text::before {
  content: "\e813" !important; /* force it (prevents disappearing) */
  font-family: "WebComponentsIcons" !important;
  display: inline-block;
  margin-right: 8px;
  font-size: 16px;
  line-height: 1;
  color: #ffffff;
}

/* 2) Optional: keep the title text as you typed (not uppercase) */
.manageCompany .k-panelbar-item-text {
  text-transform: none !important;
  margin-left:20px
}

/* 3) Optional: if Kendo already shows a built-in icon and you want ONLY your icon */
.manageCompany .k-panelbar-item-icon,
.manageCompany .k-panelbar-item-icon svg {
  display: none !important;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

.k-animation-container .k-list-item,
.k-popup .k-list .k-item,
.k-list .k-item {
  display: block !important;
  box-sizing: border-box !important;
  white-space: nowrap !important; 
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  padding: 2px !important;
  margin: 0 !important;
}
.input-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;

}


#icon_move {
  margin-left: -6px;
}
.suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #ff6358;
  pointer-events: none
}
.k-checkbox {
  border-radius: 0px !important;
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  max-width: 25px !important;
  max-height: 25px !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
  transform-origin: center
}
.k-checkbox {
}


  .k-checkbox:checked::after,
  .k-checked::after {
    content: "";
    position: absolute;
    border: solid #ffffff !important;
    border-width: 0 2.6px 2.6px 0 !important;
    top: 5px;
    left: 9px;
    height: 11px;
    transform: rotate(45deg);
    transform-origin: center;
    width: 6.5px;
  }

.k-column-list-item .k-checkbox {
  border-radius: 3.1px !important;
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  max-width: 25px !important;
  max-height: 25px !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
  transform-origin: center
}
.k-column-list-item .k-checkbox {
  transform: scale(.65) !important;
}

  .k-column-list-item .k-checkbox:checked::after,
  .k-column-list-item .k-checked::after {
    content: "";
    position: absolute;
    border: solid #ffffff !important;
    border-width: 0 3.4px 3.4px 0 !important;
    width: 9.2px;
    height: 15px;
   top: 3px;
    left: 9px;
    transform: rotate(45deg);

  }
@media only screen and (min-width: 991px) and (max-width: 1366px) {
  .k-checkbox {
    width: 25px !important;
    height: 25px !important;
    transform: scale(1) !important;
  }
    .k-checkbox:checked::after,
    .k-checked::after {
      content: "";
      position: absolute;
      border: solid #ffffff !important;
      border-width: 0 2px 2px 0 !important;
      width: 6px;
      height: 10px;
      top: 6px;
      left: 10px;
      transform: rotate(45deg);
      transform-origin: center
    }


  .k-column-list-item .k-checkbox {
    width: 25px !important;
    height: 25px !important;
    transform: scale(1) !important;
  }


  .k-column-list-item .k-checkbox:checked::after,
  .k-column-list-item .k-checked::after {
    content: "";
    position: absolute;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    width: 6px;
    height: 10px;
    top: 6px;
    left: 10px;
    transform: rotate(45deg);
    transform-origin: center
  }

}
k-i-success {
  font-size: 50px !important;
  color: green !important;
}
.center-btn {
  display: flex;
  justify-content: center;
  width: 100%;
}
.center-btn1 {
  display: flex;

  width: 100%;
}

.lbl_height {
  margin-bottom: -0.65rem !important;
  float: left;
}


.p-button-icon .k-icon .k-i-rows{
    font-size:25px!important
}
.p-slidemenu .p-slidemenu-content {
  overflow: hidden !important;
}

/* Configuration product css globally fixed*/
.configure_dropdown {
  margin-left: 7px;
  width: 86%;
  height: 25px;
  margin-top: 5px;
}

.input-group-append, .input-group-prepend {
  display: -ms-flexbox;
  display: flex;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}
.input-group-append1, .input-group-prepend {
  display: -ms-flexbox;
  display: flex;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: .25rem;
}
/* Configuration product css globally fixed*/
.k-textbox:focus-within {
  border-color: rgba(0, 0, 0, 0.16)!important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08)!important;
}
.k-grid td.k-selected, .k-grid .k-table-row.k-selected > td, .k-grid .k-table-td.k-selected, .k-grid .k-table-row.k-selected > .k-table-td {
  background-color: #a7d2d0 !important;
}

.freight-popup .k-list-item {
  white-space: normal !important;
  text-align: left
}
#newuser_icon {
  margin-left: -6px;
}

#addmicroandedit {
  width: 22%;
  margin-left: 10px;
  height: 25px;
}
#additemtextbox {
  width: 33%;
  flex: 0 0 175px;
}
#baseprice {
  width: 27%;
  flex: 0 0 146px;
}
.dropdown_left {
  height: 25px;
  margin-left: 8px;
  margin-top: 4px;
}
.input-wrappers {
  display: flex;
  align-items: center;
  /* gap: 6px; */
}

.width_description {
  width: 35%;
}
/*.my-custom-grid td.k-selected,
.my-custom-grid .k-table-row.k-selected > td,
.my-custom-grid .k-table-td.k-selected,
.my-custom-grid .k-table-row.k-selected > .k-table-td {
  background-color: transparent !important;
}*/
.my-custom-grid .k-grid td.k-state-selected, .my-custom-grid .k-grid tr.k-state-selected > td {
  background-color: #a7d2d0 !important;
}
@media (max-width: 900px) {
    .k-animation-container .k-list-item,
    .k-popup .k-list .k-item,
    .k-list .k-item {
      font-size: 11px;
    }
    .k-input-value-text {
      font-size: 11px;
    }
  }