body {
  background-color: var(--backgroundColor);
  color: var(--fontColor);
}

input,
textarea {
  color: var(--component-fontColor);
}

/* Custom for mat-slide-toggle */
.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
  background-color: var(--secondaryColor);
}
.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: var(--secondaryColorAlpha50);
}
.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-ripple .mat-ripple-element {
  background-color: var(--secondaryColorAlpha12);
}

/* Custom for mat-menu */

.address-menu-content {
  /* hacky workaround to style the menu panel width */
  max-width: calc((100vw - 16px)*0.96) !important;
  width: calc(1084px*0.96) !important;
}

/* Custom for mat-calendar */

.mat-calendar-body-selected {
  background-color: var(--primaryColor);
}

.mat-calendar {
  font-family: var(--fontFamily);
  color: #333;
}

/* Custom for ui select */

.ui-select-search {
  width: 100% !important;
}

.ui-select-choices.dropdown-menu {
  padding: 0px;
}

.ui-select-choices.dropdown-menu>li {
  display: block;
}

.ui-select-choices-row>a {
  padding: 3px 8px !important;
  word-break: break-all !important;
  white-space: normal !important;
}

.ui-select-choices-row.active>a {
  background-color: var(--primaryColor) !important;
}

.ui-select-choices-row>a>div {
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-select-match>span {
  display: block;
}

.ui-select-match-item>a {
  cursor: pointer;
  color: var(--secondaryColor);
}

.ui-select-match-item>span {
  vertical-align: text-bottom;
}

.ui-select-match-item {
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  white-space: nowrap;
}

.mat-expansion-panel {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.mat-expansion-panel-body {
  margin: 0 10px 16px !important;
  padding: 0 8px 16px !important;
  overflow: hidden !important;
}

.ui-select-multiple input.ui-select-search {
  background-color: inherit !important;
  outline: inherit;
  border: 1px solid var(--primaryColor) !important;
  padding: 4px !important;
  height: 30px !important;
}

.mat-expansion-panel-header-title {
  font-family: var(--fontFamily);
  font-size: 16px;
}

/* width */

.ui-select-choices.dropdown-menu::-webkit-scrollbar {
  width: 8px;
}

/* Track */

.ui-select-choices.dropdown-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

/* Handle */

.ui-select-choices.dropdown-menu::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

/* Handle on hover */

.ui-select-choices.dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #737272;
}

.div-block-nav-dialog {
  z-index: 20001;
}

.dialog-product-quantity-container .mat-dialog-container {
  padding: 4px;
}

/* Other customs reported form extra-styles.css */
.pointer {
  cursor: pointer;
}


/* Media queries */
@media only screen and (max-width: 767px) {
  .div-block-grey-basis.filter-dialog {
    display: block;
  }
}

@media only screen and (max-width: 425px) {
  .signature-container {
    width: 100% !important;
  }
}

@media only screen and (max-width: 320px) {
  .div-block-format-3-blocks {
    width: 100% !important;
  }
}

.link-block-button-qty.w-inline-block {
  touch-action: manipulation;
}

.scroll-block {
  overflow: hidden;
}


#admin-panel .CodeMirror, #admin-panel .CodeMirror-scroll {
  height: 200px !important;
  min-height: 10px !important;
  padding-bottom: 10px !important;
}

#component-description .CodeMirror {
  min-height: 230px !important;
  border: 0 !important;
  padding: 0 !important;
}

#component-description .CodeMirror .editor-preview {
  background: inherit !important;
  padding: 0px !important;
  position: relative;
}

#component-description .CodeMirror-scroll {
  display: none;
}

#component-description .CodeMirror-vscrollbar {
  display: none !important;
}

.component-description-vendor .CodeMirror {
  background-color: var(--alt2Color);
}

.paragraph-shop-full-desc {
  max-height: none;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

.m-signature-pad {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 10px;
  width: 100%;
  height: 100%;
  max-width: 700px;
  max-height: 460px;
  border: 1px solid #e8e8e8;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
  border-radius: 4px;
  padding: 16px;
}

.m-signature-pad::before, .m-signature-pad::after {
  position: absolute;
  z-index: -1;
  content: "";
  width: 40%;
  height: 10px;
  bottom: 10px;
  background: transparent;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.m-signature-pad::before {
  left: 20px;
  -webkit-transform: skew(-3deg) rotate(-3deg);
  transform: skew(-3deg) rotate(-3deg);
}

.m-signature-pad::after {
  right: 20px;
  -webkit-transform: skew(3deg) rotate(3deg);
  transform: skew(3deg) rotate(3deg);
}

.m-signature-pad--body {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid #f4f4f4;
}

.m-signature-pad--body canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.m-signature-pad--footer {
  color: #C3C3C3;
  text-align: center;
  font-size: 1.2em;
  margin-top: 8px;
}

.m-signature-pad--actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 8px;
}

.m-signature-pad--footer button {
  background-color: var(--secondaryColor);
  padding: 6px 12px;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.m-signature-pad--footer .description {
  font-size: 14px !important;
  margin-top: 18px !important;
}

/* Material icones */

.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-48 {
  font-size: 48px;
}

.material-icons.kimayoGreen {
  color: #adad5b;
}

/* Deactivate pointer event (routerLink) on mobile devices */

@media (max-width: 767px) {
  .no-mobile-event {
    cursor: default;
    pointer-events: none;
  }
}

/*
AutocompleteRenderer down arrow
 */

.handsontable .htAutocompleteArrow {
  float: right;
  font-size: 10px;
  color: #222222;
  cursor: default;
  width: 16px;
  text-align: center;
}

.handsontable .htDimmed:not(.listbox) {
  background-color: #f3f3f3;
}

.handsontable .htDimmed .htAutocompleteArrow {
  color: #636363;
}

.htCommentTextArea {
  resize: none;
  border: 1px solid black;
  font-size: 14px;
}

.htCommentTextArea:focus {
  resize: none;
  border: 1px solid black;
}

.custom-panel .ui-panel-titlebar {
  background: var(--alt1Color);
  color: var(--alt1ColorFont);
}

.custom-panel .custom-ng-button-success {
  border: 1px solid var(--primaryColor);
  color: var(--primaryColorFont);
  background: var(--primaryColor);
}

.custom-panel .custom-ng-button-success:hover {
  border: 1px solid var(--primaryColor) !important;
  background: var(--primaryColor) !important;
}

.custom-panel .custom-ng-button-success:focus {
  border: 1px solid var(--primaryColor) !important;
  background: var(--primaryColor) !important;
}

.custom-panel .custom-ng-button-success:active {
  border: 1px solid var(--primaryColor) !important;
  background: var(--primaryColor) !important;
}


/* search animation used for input fields */

@keyframes search-inprogress {
  0% {
    transform-origin: 100% 100%;
    transform: rotate(0deg);
  }
  100% {
    transform-origin: 100% 100%;
    transform: rotate(360deg);
  }
}

.search-inprogress {
  width: 24px;
  height: 24px;
  margin: 5px 5px 0 0;
  position: absolute;
  top: 3px;
  right: 10px;
}

.search-inprogress:before {
  position: absolute;
  display: block;
  content: '';
  z-index: 12;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #FFF;
}

.search-inprogress:after {
  position: absolute;
  display: block;
  content: '';
  z-index: 11;
  width: 12px;
  height: 12px;
  border-radius: 200px 0 0;
  background: linear-gradient(45deg, transparent 0, #a0a0a0 50%, #a0a0a0 100%);
  animation: search-inprogress .5s linear infinite;
}

.relative {
  position: relative;
}

/* Material stepper */
.mat-step-header .mat-step-icon {
  background-color: var(--primaryColor);
}

.mat-horizontal-stepper-content {
  overflow: visible !important;
}

.mat-horizontal-content-container {
  padding: 0 0 24px 8px !important;
}

/* Material FAB: make sure the icon is centered */
.order-new-button .mat-button-wrapper .mat-icon.material-icons {
  display: block;
}

.display-none {
  display: none;
}

.invisible {
  visibility: hidden;
}

/* PrimeNG Autocomplete */
.ui-autocomplete-list-item {
  color: #000000;
}

.ui-autocomplete-list-item:nth-child(even) {
  border-color: #f5f5f5;
  background: #f5f5f5;
}

.ui-autocomplete-list-item.ui-state-highlight {
  border-color: var(--primaryColor);
  background: var(--primaryColor);
  color: var(--primaryColorFont);
}

.ui-dropdown-item.ui-state-highlight {
  border-color: var(--primaryColor);
  background: var(--primaryColor);
  color: var(--primaryColorFont);
}

/*
 * Section content height to make sure the footer is at the bottom of the page:
 *   view height - header size - top margin - Kimayo logo height
 */
.sectioncontent {
  min-height: calc(100vh - 60px - 13px - 170px);
}

@media (max-width: 479px) {
  .sectioncontent {
    min-height: calc(100vh - 50px - 13px - 170px);
  }
}

/*
 * Style for order-new page
 */
.order-new-navigation-button-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end;

  padding-right: 10px;
}

.order-new-navigation-button-container > * {
  margin: 0 8px 0 8px;
}

.linkblockbuttonv2.link-block-button-order-new {
  width: 170px;
  height: 34px;
}

.linkblockbuttonv2.link-block-button-order-new > i {
  font-size: 18px;
}

.linkblockbuttonv2.link-block-button-order-new > .button-label {
  min-width: 110px;
  padding-left: 7px;
  text-align: center;
  line-height: 14px;
}

.google-api ul::after {
  content: url('../images/powered_by_google_on_white.png');
  float: right;
  margin-top: 2px;
}

input[autocomplete="off"]::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  height: 0;
  width: 0;
  margin: 0;
}

input.ng-submited.ng-invalid, .ng-submited.ng-invalid input {
  border-color: #ff0000 !important;
  background-color: #ffc4d7 !important;
}

/*
 * PrimeNG dialog
 */
.ui-dialog {
  max-width: 95%;
}

/* Hide unwanted button for PhotoSwipe */
.pswp__button--share {
  display: none;
}

.pswp--supports-fs .pswp__button--fs {
  display: none;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: none;
}

@media (max-width: 480px) {
  #toast-container > div {
      width: 16em !important;
  }
}

@media (max-width: 320px) {
  #toast-container > div {
      width: 14em !important;
  }
}

/*
 * PrimeNG grid
 */
/* Add the grid item =20% for primeng dataview */
@media screen and (min-width: 40.063em) {
  .ui-md-25 {
    width: 20%;
    padding: 0.5em;
  }
}

/* Hack to have a centered child element in full-width mode */
.full-width {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

/*
 * SnackBar customization for mobile mode of order-new
 */
.mat-snack-bar-container.kyo-order-new-mobile-snack-undo {
  margin-bottom: calc(59px + env(safe-area-inset-bottom)) !important;
  border-radius: 0;
  padding: 7px 24px;
}

/* Form errors */
.form-error {
  border-color: red;
}

.form-error-msg {
  font-size: 0.8em;
  font-style: italic;
  color: red;
}

.form-field-required {
  color: red;
}

/* Prime NG font */
.ui-widget-header .ui-inputtext,
.ui-widget-content .ui-inputtext,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: inherit;
}

/* HandsOnTable sort arrows */
.handsontable .columnSorting.ascending::after {
  font-size: 13px;
}

.handsontable .columnSorting.descending::after {
  font-size: 13px;
}

.overflow-hidden {
  overflow: hidden;
}

.text-field-home.red {
  border-color: var(--secondaryColor);
}

.linkblock-button-home.red {
  background-color: var(--secondaryColor);
  color: var(--secondaryColorFont);
}

.doc-details-discount-toggle {
  bottom: 0;
  left: 0;
  position: absolute;
}

.doc-details-discount-image {
  vertical-align: middle;
  font-size: 22px;
  margin-right: 10px;
  color: var(--secondaryColor);
}

@media (max-width: 479px) {
  .doc-details-discount-toggle {
    bottom: 0;
    left: 0;
    position: static;
    width: 100%;
    margin-top: 10px;
  }
}

/* Hide scrollbar */
.kyo-hide-scrollbar {
  -ms-overflow-style: none;  /* IE 10+ */
  scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar */
.kyo-hide-scrollbar::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

/* Override webflow style */
.div-block-order-details-product-wrap {
  margin-bottom: 12px;
  border-bottom: 3px solid #eaeaea;
}

.div-block-order-details-product-wrap .div-block-order-details-product {
  padding-bottom: 0px;
  border-bottom: 0px;
}

.div-block-order-details-product-wrap .div-block-order-details-product.product-extra-info {
  padding: 12px;
  border: 1px solid #bdbdbd;
}

@media (max-width: 479px) {
  .div-block-order-details-product-wrap {
    margin-bottom: 6px;
  }

  .div-block-order-details-product-wrap .div-block-order-details-product.product-extra-info {
    padding: 6px;
  }
}

.linkblockbuttonv2:focus {
  outline: none;
  border: 1px solid #4D90FE;
  -webkit-box-shadow: 0px 0px 5px #4D90FE;
  box-shadow: 0px 0px 5px #4D90FE;
}

.nowrap {
  white-space: nowrap;
}

/* Shorthand for inline-block and nowrap */
.inowrap {
  white-space: nowrap;
  display: inline-block;
}

/* PrimeNG splitbutton in fileupload button bar fix */
.ui-fileupload-buttonbar .ui-splitbutton .ui-button {
  margin-right: 0;
}

@media (max-width: 40em) {
  .ui-fileupload-buttonbar .ui-splitbutton {
    width: 100%;
    display: inline-flex;
  }

  .ui-fileupload-buttonbar .ui-splitbutton .ui-button {
    width: initial;
    display: initial;
    flex-grow: 1;
  }

  .ui-fileupload-buttonbar .ui-splitbutton .ui-button.ui-splitbutton-menubutton {
    flex-grow: 0;
  }
}

/* Fix webflow overwriting primeNg style */
label.ui-chkbox-label {
  display: initial;
  font-weight: initial;
}

/* Fix webflow overwriting primeNg style */
label.ui-radiobutton-label {
  display: initial;
  font-weight: initial;
}

/* Fix font-awesome overwriting primeNg style */
.ui-radiobutton-icon.ui-clickable.fa.fa-circle {
  font-size: 0.5em;
  line-height: inherit;
  display: block;
}

.kyo-badge {
  position: absolute;
  padding: 0px 8px;
  background: red;
  color: white;
  min-width: 25px;
  height: 25px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.div-block-fixed-cat-tree {
  top: 60px;
}

@media (max-width: 479px) {
  .div-block-fixed-cat-tree {
    top: 50px;
  }
}

.navbar {
  background-color: var(--primaryColor);
  color: var(--primaryColorFont);
}

.nav-link {
  color: var(--primaryColorFont);
}

.div-block-2 {
  background-color: var(--primaryColor);
}

.linkblockbutton.link-block-button-addtocart.productoverlay {
  background-color: var(--primaryColor);
  border-color: var(--secondaryColor);
}

.linkblock-button-home.green {
  background-color: var(--primaryColor);
  color: var(--primaryColorFont);
}

.link-block-button-qty {
  background-color: var(--primaryColor);
}

.div-block-button-content {
  background-color: var(--primaryColor);
}

.text-field-home.green {
  border-color: var(--primaryColor);
}

.div-navbar {
  background-color: var(--primaryColor);
}

.div-block-login-dialog {
  background-color: var(--primaryColor);
}

.div-block-navbar {
  background-color: var(--primaryColor);
}

.div-block-nav-dialog {
  background-color: var(--primaryColor);
}

.link-block-mini-add-basket {
  background-color: var(--primaryColor);
}

.div-mobile-login-contain {
  background-color: var(--primaryColor);
  color: var(--alternateFontColor);
}

.div-mobile-login-contain .link-standard-red {
  color: var(--secondaryColorAlternate);
}

@media (max-width: 767px) {
  .div-block-nav-dialog {
    background-color: var(--primaryColor);
  }
}

@media (max-width: 479px) {
  .linkblockbutton.link-block-button-addtocart {
    background-color: var(--primaryColor);
  }
}

.divblockordertop {
  border-color: var(--alt1Color);
}

.divblockorderbot {
  border-right-color: var(--alt1Color);
  border-bottom-color: var(--alt1Color);
  border-left-color: var(--alt1Color);
  background-color: var(--alt1Color);
}

.divblockorderbot .text-block-order-title {
  color: var(--alt1ColorFont);
}

.linkblock-button-home.brown {
  background-color: var(--alt1Color);
  color: var(--alt1ColorFont);
}

.divblockcategorytop {
  border-color: var(--alt1Color);
}

.divblockcategorybot {
  border-right-color: var(--alt1Color);
  border-bottom-color: var(--alt1Color);
  border-left-color: var(--alt1Color);
  background-color: var(--alt1Color);
}

.tab-link {
  border-top-color: #fafaf8;
  border-bottom-color: var(--alt1Color);
}

.tab-link.w--current {
  border-color: var(--alt1Color) var(--alt1Color) transparent;
}

.div-block-tabs-border {
  border-bottom-color: 2px solid var(--alt1Color);
}

.divblockorderdetailstop {
  border-color: var(--alt1Color);
  background-color: var(--component-backgroundColor);
  color: var(--component-fontColor);
}

.divblockorderdetailstop .text-block-order-details {
  color: var(--component-fontColor);
}

.div-block-border-basis {
  border-color: var(--alt1Color);
}

.text-field-home.brown {
  border-color: var(--alt1Color);
}

.divblockordertopv2 {
  border-color: var(--alt1Color);
  background-color: var(--alt1Color);
  color: var(--alt1ColorFont);
}

.divblockorderbotv2 {
  border-right-color: var(--alt1Color);
  border-bottom-color: var(--alt1Color);
  border-left-color: var(--alt1Color);
  background-color: var(--cardBackgroundColor);
  color: var(--cardFontColor);
}

.div-block-address-select {
  border-color: var(--alt1Color);
}

.div-block-dashboard-card {
  border-color: var(--alt1Color);
}

.div-block-order-details-status {
  border-color:var(--alt1Color);
}

.div-block-6 {
  border-color: var(--alt1Color);
  background-color: var(--alt2Color);
}

.nav-link:hover {
  border-bottom-color: var(--secondaryColor);
  color: var(--secondaryColor);
}

.nav-link.noselect.w--current {
  color: var(--secondaryColor);
}

.div-block {
  background-color: var(--secondaryColor);
}

.div-block-3 {
  background-color: var(--secondaryColor);
}

.text-block-order-details {
  color: var(--fontColor);
}

.text-block-order-details.text-red {
  color: var(--accentFontColor);
}

.text-block-order-details.text-red-shrink {
  color: var(--accentFontColor);
}

.text-block-product-header {
  color: var(--accentFontColor);
  overflow-wrap: anywhere;
}

.link-standard-red {
  color: var(--secondaryColor);
}

.text-block-euro {
  color: var(--accentFontColor);
}

.field-label.checkout-total.text-red {
  color: var(--secondaryColor);
}

.text-block-home-bullets {
  border-bottom-color: var(--secondaryColor);
}

.div-block-image-decoration {
  border-color: var(--secondaryColor);
}

.div-block-19-2 {
  border-color: var(--secondaryColor);
}

.span-text-red {
  color: var(--accentFontColor);
}

.text-block-about.last-block {
  border-bottom-color: var(--secondaryColor);
}

.text-field-login.red {
  border-color: var(--secondaryColor);
}

.linkblock-button-login.red {
  background-color: var(--secondaryColor);
  color: var(--secondaryColorFont);
}

.text-span-material-icon.undoicon {
  color: var(--secondaryColor);
}

.div-nav-dialog-header {
  background-color: var(--secondaryColor);
}

.text-block-nav-header {
  color: var(--secondaryColorFont);
}

.link-block-mini-add-basket.w--current {
  border-color: var(--secondaryColor);
}

.link-block-mini-add-basket.red {
  background-color: var(--secondaryColor);
}


.link-block-mini-add-basket.border {
  border-color: var(--secondaryColor);
}

.div-block-aisles-label {
  background-color: var(--secondaryColor);
}

.link-ctrlbar-icon {
  color: var(--secondaryColor);
}

.text-block-ship-details.text-red {
  color: var(--accentFontColor);
}

.hero-button.static-red {
  background-color: var(--secondaryColor);
}

.big-text-section {
  background-color: var(--secondaryColor);
}

.text-block-dashboard-header {
  color: var(--secondaryColor);
}

.link-home {
  color: var(--secondaryColor);
}

.text-block-3 {
  color: var(--secondaryColor);
}

@media (max-width: 767px) {
  .div-block-icon-filter {
    background-color: var(--secondaryColor);
  }

  .link-ctrlbar-icon {
    color: var(--secondaryColor);
  }

  .link-search-reduce-icon {
    color: var(--secondaryColor);
  }

  .text-block-subbasket-value {
    /*color: var(--secondaryColor);*/
    color: var(--accentFontColor);
  }
}

.div-block-order-details-product {
  border-bottom-color: var(--alt2Color);
}

.div-block-product-producer {
  background-color: var(--alt2Color);
  color: var(--alt2ColorFont);
}

.txtwhitespace {
  color: var(--component-fontColor);
}

.divblockvendorbot {
  border-right-color: var(--alt2Color);
  border-bottom-color: var(--alt2Color);
  border-left-color: var(--alt2Color);
  background-color: var(--alt2Color);
}

.divblockvendortop {
  border-color: var(--alt2Color);
}

.div-block-image-favorite {
  border-color: var(--alt2Color);
}

.div-block-shop-vendor-desc {
  background-color: var(--alt2Color);
  color: var(--alt2ColorFont);
}

.div-block-shop-vendor-logo {
  border-color: var(--alt2Color);
}

.div-block-nav-mobile {
  border-bottom-color: var(--alt2Color);
}

.image-shop-info-grid {
  border-color: var(--alt2Color);
}

.linkblockbuttonv2.link-block-button-snooze {
  background-color: var(--alt2Color);
  color: var(--alt2ColorFont);
}

.linkblockbuttonv2.link-block-button-moreproduct {
  background-color: var(--alt2Color);
  color: var(--alt2ColorFont);
}

.linkblockbuttonv2.link-block-button-checkout-add {
  background-color: var(--alt2Color);
  color: var(--alt2ColorFont);
}

/* Style for the main action buttons */
.ui-fileupload.main-button > div > .ui-fileupload-choose.ui-button.ui-widget,
.ui-widget.ui-button.main-button,
.linkblockbuttonv2 {
  color: var(--actionButtonColorFont) !important;
  background-color: unset;
  background-image: linear-gradient(-180deg, var(--actionButtonBackgroundColor) 0%, var(--actionButtonBackgroundColorDarken5) 100%);
  border: 1px solid;
  border-color: var(--actionButtonBackgroundColorDarken5);
}

.linkblockbuttonv2:disabled {
  opacity: 0.35;
}

.ui-fileupload.main-button > div > .ui-fileupload-choose.ui-button.ui-widget:hover,
.ui-widget.ui-button.main-button:hover,
.linkblockbuttonv2:hover {
  background-image: linear-gradient(-180deg, var(--actionButtonBackgroundColorDarken5) 0%, var(--actionButtonBackgroundColorDarken10) 100%);
  box-shadow: var(--actionButtonBackgroundColorDarken5) 0 3px 8px;
  border-color: var(--actionButtonBackgroundColorDarken10);
}

/* Style for the cancel action buttons */
.linkblockbuttonv2.submit-button,
.linkblockbuttonv2.cancel-button {
  padding: 0 16px;
}

.ui-widget.ui-button.cancel-button,
.linkblockbuttonv2.cancel-button {
  color: var(--secondaryColorFont) !important;
  background-color: unset;
  background-image: linear-gradient(-180deg, var(--secondaryColor) 0%, var(--secondaryColorDarken5) 100%);
  border: 1px solid;
  border-color: var(--secondaryColorDarken5);
}

.ui-widget.ui-button.cancel-button:hover,
.linkblockbuttonv2.cancel-button:hover {
  background-image: linear-gradient(-180deg, var(--secondaryColorDarken5) 0%, var(--secondaryColorDarken10) 100%);
  box-shadow: var(--secondaryColorDarken5) 0 3px 8px;
  border-color: var(--secondaryColorDarken10);
}

/* Style for the alternate action buttons */
.ui-widget.ui-button.alternate-button,
.linkblockbuttonv2.link-block-button-cancel {
  color: var(--alt2ColorFont) !important;
  background-color: unset;
  background-image: linear-gradient(-180deg, var(--alt2Color) 0%, var(--alt2ColorDarken5) 100%);
  border: 1px solid;
  border-color: var(--alt2ColorDarken5);
}

.ui-widget.ui-button.alternate-button:hover,
.linkblockbuttonv2.link-block-button-cancel:hover {
  background-image: linear-gradient(-180deg, var(--alt2ColorDarken5) 0%, var(--alt2ColorDarken10) 100%);
  box-shadow: var(--alt2ColorDarken5) 0 3px 8px;
  border-color: var(--alt2ColorDarken10);
}

.linkblockbuttonv2.link-block-checkout-dialog-cancel {
  background-color: var(--alt2Color);
  color: var(--alt2ColorFont);
}

.div-block-checkout-dialog-line {
  border-bottom-color: var(--alt2Color);
}

.div-block-checkout-discount {
  border-bottom-color: var(--alt2Color);
}

.div-block-6 {
  background-color: var(--alt2Color);
}

@media (max-width: 767px) {
  .link-icon-filter {
    color: var(--alt2Color);
  }
}

@media (max-width: 479px) {
  .text-field-qty-checkout-v2 {
    border-color: var(--alt2Color);
  }
}

.divblocksearch.fixedtop,
.div-signup-form-success,
.div-block-filters-buffer,
.divblocksearchv2,
.div-block-fixed-cat-tree
{
  background-color: var(--backgroundColor);
}

.div-block-content-not-found {
  line-height: normal;
}

.div-block-content-not-found i {
  font-size: 256px;
  width: 256px;
}

.divblockheader {
  line-height: normal;
}

.icon-email-sent {
  display: inherit;
  font-size: 45px;
  margin-right: 15px;
  margin-bottom: 14px;
  line-height: normal;
  margin-top: 6px;
}

.search-decorations {
  font-size: 24px;
  color: var(--secondaryColor);
  line-height: normal;
  display: inherit;
  margin-left: 9px;
}

.search-decorations.right.noevents {
  pointer-events: none;
}

@media (max-width: 767px) {
  .search-decorations {
    font-size: 34px;
    margin-left: 0px;
    cursor: pointer;
  }

  .search-decorations.right {
    position: relative;
    left: -6px;
  }
}

.textblockbutton.textblockbutton-moreproduct {
  color: inherit;
}

.text-block-header
{
  color: var(--fontColor);
}

/* Let the parent set the color */
.textblockbutton {
  color: inherit;
}

.text-block-ship-details {
  color: var(--component-fontColor);
}

.text-block-no-content-header {
  color: var(--fontColor);
}

.text-block-ht {
  color: var(--alt2ColorFont);
}

.text-block-undo.txtwhitespace{
  color: #ffffff;
}

.text-block-confirm-signup {
  color: var(--alternateFontColor);
}

.black-shadow {
  box-shadow: 3px 3px 7px 0 #000
}

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

.justify-text {
  text-align: justify;
}

.sectioncontent .div-mobile-login-contain div.form-container {
  position: relative;
}
.ui-float-label > textarea ~ label {
  top: 1em;
}

.ui-float-label.always-float > label {
  top: -.75em;
  font-size: 12px;
}

.item-added {
  color: #406619;
  background: #eaf2c2;
}

.item-removed {
  color: #b30000;
  background: #fadad7;
  text-decoration: line-through;
}

.item-modified {
  color: #2F8D90;
  background: #bee8e9;
}

.document-product-line-number {
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 23px;
  width: 23px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--documentBottomTitle);
}

@media only screen and (max-width: 479px) {
  .document-product-line-number {
    display: none;
  }
}

.kyo-tooltip-container {
  position: relative;
}

.toast-close-button {
  margin-right: 0.3em;
}

.mat-slide-toggle-content {
  font-family: unset;
  font-weight: 400;
}

.add-colon::after {
  content: var(--colonContent);
}

.add-currency::after {
  content: '\00a0€';
}

.add-percent::after {
  content: '\00a0%';
}

.space-around::after {
  content: ' ';
}

.space-around::before {
  content: ' ';
}

.add-required-asterisk::after {
  content: '\00a0*';
  color: #f44336;
}

.secondary-color {
  color: var(--secondaryColor);
}

.accent-font-color {
  color: var(--accentFontColor);
}

textarea {
  resize: vertical;
}

.truncate-width {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-inputgroup {
  border-radius: 3px;
}

.ui-inputgroup-addon {
  transition: .2s;
}

.ui-inputgroup:has(.ui-inputtext:focus) {
  -webkit-box-shadow: 0px 0px 5px #1f89ce;
  box-shadow: 0px 0px 5px #1f89ce;
}

.ui-inputgroup > .ui-inputtext:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.ui-inputtext:enabled:hover ~ .ui-inputgroup-addon {
  border-color: #c0c0c0;
}

.ui-inputtext:focus ~ .ui-inputgroup-addon {
  border-color: #c0c0c0;
}

.ui-inputtext:disabled ~ .ui-inputgroup-addon {
  opacity: 0.35;
}

.ui-inputtext.ng-dirty.ng-invalid ~ .ui-inputgroup-addon {
  color: #eb1c26;
  border-color: #f44336;
  background: #f4433610;
}

.show-hidden-element {
  display: block !important;
  visibility: hidden !important;
}

.divblockheader.increased-margin {
  margin-bottom: 24px;
  margin-top: 16px;
}

.font-bold {
  font-weight: 700;
}

/* Scrollbar CSS, source: https://codepen.io/stephenpaton-tech/full/JjRvGmY */
.scrollbar{
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;

  /* Reserve space for the scrollbar */
  scrollbar-gutter: stable;
}

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

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

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 10px;
  border: 3px solid #f1f1f1;
}

.scrollbar::-webkit-scrollbar-button {
  display:none;
}

.standard-link {
  text-decoration: underline;
  color: var(--fontColor);
}

.disabled-link {
  pointer-events: none;
  cursor: default;
  opacity: 0.35;
}

.wrap-anywhere {
  overflow-wrap: anywhere;
}

.strikethrough-diagonal {
  position: relative;
  color: red !important;
  font-weight: bold;

  &:before {
    position: absolute;
    content: '';
    left: 0;
    top: 45%;
    right: 0;
    border-top: 3px solid;
    border-color: inherit;
    -webkit-transform: skewY(-10deg);
    -moz-transform: skewY(-10deg);
    transform: skewY(-10deg);
  }
}

.btn-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.primeng-input-style {
  background: #ffffff;
  color: #222222;
  border: 1px solid #d6d6d6;
  border-radius: 3px;
  margin: 0;
  outline: medium none;
  padding: .25em;
}