:root {
  --toast-success-base: #2e7d07;
  --toast-success-40: #a4c495; /* 40% lighter than base color */
  --toast-success-20: #cbdbc3; /* 20% lighter than base color */

  --toast-danger-base: #ce2513;
  --toast-danger-40: #e4a19a; /* 40% lighter than base color */
  --toast-danger-20: #ebc9c6; /* 20% lighter than base color */

  --toast-warning-base: #d8a408;
  --toast-warning-40: #e8d495; /* 40% lighter than base color */
  --toast-warning-20: #ede3c4; /* 20% lighter than base color */

  --toast-info-base: #39afd1;
  --toast-info-40: #a9d8e6; /* 40% lighter than base color */
  --toast-info-20: #cde5ec; /* 20% lighter than base color */
}

/* Shared styles */

/*
// hyper layout overrides 
// we are using the 'detached' layout, 'modern' theme 
*/

body[data-layout="detached"] .leftside-menu {
  /* since ours is not actually detached - kr */
  margin-top: 0;
  height: auto;
}

/*
// end hyper layout overrides  
*/

/*
// bootstrap overrides  
*/

/* grid */
/* Sometimes a column may be empty, like on a datatable if an element is not rendered, so remove the col padding - kr  */
.row [class^='col']:empty {
  padding: 0;
}

/*
// end bootstrap overrides  
*/

/*
// theme overrides  
*/

/* Theme 'warning' color is yellow and fails contrast tests, so we're adding an icon <i> wherever 'warning-text' would appear in the UI. No other theme color text will be getting the icon. */
/* This is just to set the padding on the background color so it sizes correctly - kr */
/*i.bg-warning.rounded-circle {
  padding: .333em;
}*/

/* OR via css, but this would need to go in the theme_scss for color variables - kr */


span.text-warning {
  color: unset !important;
  position: relative;
  padding-left: 1.5em; /* make space for the width of the absolutely positioned icon */
}

  span.text-warning::before, span.text-warning::after {
    /* defaults for font-awesome duotone in css pseudo-elements */
    font-family: "Font Awesome 5 Duotone";
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    /* position both layers of the icon to the left, set our fixed-width width, horizontally center layers, and then vertically align them so they flex with different line heights */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25em;
    text-align: center;
  }
/* Set the default opacity levels and colors for each layer */
  span.text-warning::before {
    color: var(--bs-dark, inherit);
    opacity: 1;
  }

  span.text-warning::after {
    color: var(--bs-warning, inherit);
    opacity: 1;
  }
/* Exclamation */
  span.text-warning::before {
    content: "\f071";
  }

/* Triangle background */
  span.text-warning::after {
    content: "\10f071";
  }




/*
// end theme overrides  
*/

/*
// select2 overrides  
*/

/* our Hotspot data names are all one word PascalCased so don't break in the select dropdown. This will allow them to wrap - kr */
/* from https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
/* adding .dont-break-long-text class for use other places - kr  */

#select2-ddlHotSpots-results, .wrap-long-text {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* When a multi-select is in a Bootstrap dropdown, the width stays at 0px because the element is hidden, causing the placeholder to not show. This sets its width to 100% to override the inline 0px set in select2's js. */

.dropdown .select2-container .select2-selection--multiple .select2-search__field {
  width: 100% !important;
}

/* Disabled Select2 styling */
.select2-container--default.select2-container--disabled .select2-selection {
  background-color: #C7C7C7;
}

/*
// end select2 overrides  
*/

/*
// jquery scrolling tabs overrides  
*/

.scrtabs-tab-container {
  /* to allow for the border tabs we're using via Hyper - kr */
  height: 52px;
}

.scrtabs-tabs-fixed-container {
  /* to allow for the border tabs we're using via Hyper - kr */
  height: 52px;
}

.scrtabs-tab-scroll-arrow.scrtabs-tab-scroll-arrow-right, .scrtabs-tab-scroll-arrow.scrtabs-tab-scroll-arrow-left {
  border: none;
  color: inherit;
  font-size: inherit;
  height: inherit;
  padding-left: .35rem;
}

.scrtabs-tab-scroll-arrow.scrtabs-disable, .scrtabs-tab-scroll-arrow.scrtabs-disable .scrtabs-click-target {
  opacity: .5;
}

/*
// end jquery scrolling tabs overrides  
*/


/* Modal header, body, footer overrides of Bootstrap per SV comps - kr  */
/* Now done via variables in default.scss and modified src\scss\custom\components\_modal.scss */


/*
// datatables  
*/

/* we're using the bootstrap custom form controls for the datatable checkbox, but it has a min-height that blows out the header height. This overrides that - kr  */
.dataTable th .form-check {
  min-height: auto;
  margin-bottom: 0;
}
  .dataTable th .form-check .form-check-input {
    width: 1rem;
    height: 1rem;
  }

/* adding a colon and right margin to responsive titles for readability - kr */
.dtr-title::after {
  content: ":";
  margin-right: .25rem;
}

/* Table cell overrides to center th/tds when toggle, checkbox, radio or image icon present and/or sortable - kr */

/* center all of them */
.table tr th:is(.ig-checkbox-cell, .ig-radio-cell, .ig-toggle-cell, .ig-color-swatch-cell, .ig-icon-cell) {
  text-align: center;
  /* Forcing them to only be the width of their content -kr */
  width: 1% !important;
}

.table tr:not(.child) td:is(.ig-checkbox-cell, .ig-radio-cell, .ig-toggle-cell, .ig-color-swatch-cell, .ig-icon-cell) {
  text-align: center;
}

/* To center the toggle switches, image icons, etc. on tables they appear when they have sorting on, overriding right padding to td to match datatable sort caret in header. - kr */

td.ig-cell-sorting {
  padding-right: 30px;
}

/* end Table cell overrides */

/*
// adding checkbox styles from dataTables.checkboxes.css since we're not using those classes any longer - kr
*/
.ig-checkbox-cell {
  cursor: pointer;
}

/* Removing the top/bottom padding from the Actions col cells, adding it to the .action-icon class in _tables.scss - kr  */
.table td.ig-actions-cell {
  padding-top: 0;
  padding-bottom: 0;
}

/* DTs sets the width for responsive based on content of col that was just hidden. This will force the table header for the control to 1% so it is always aligned right - kr  */
table.dataTable th.control {
  width: 1% !important;
}

/* Center the plus button on the DataTable "controls" - abc */
table.dataTable > tbody > tr:not(.child) > td:last-child:before,
table.dataTable > tbody > tr:not(.child) > th:last-child:before {
  position: relative;
  margin-top: 1px !important;
}

/* Print styles for more complex tables that get cut off when printing - abc */
table.printing-datatable th.sorting:before {
  display: none !important;
}

table.printing-datatable th,
table.printing-datatable td {
  padding-left: 0.5em !important;
  padding-right: 0.5em !important;
}

/*
// end datatables  
*/

/*
// non-datatables  
*/

td small{
  display:block;
  margin-top: .5rem;
}

/*
// end non-datatables  
*/

/*----------------------------------------------------------------------------------------------------*/

/* used in some files in \Views\Schedules\Editors - TODO: refactor - kr */ 

.inputGroup {
  margin: 0;
}

  .inputGroup label {
    display: inline-flex;
    /*cursor: pointer;*/
  }

    .inputGroup label input {
      margin: 2px;
      height: 16px;
      width: 16px;
    }

    .inputGroup label label {
      padding: 0 3px;
      white-space: nowrap;
    }

.inlineGroup {
  margin: 0;
}

  .inlineGroup label label {
    margin-top: 0;
  }

.dropdownGroup {
  margin: 0;
}

  .dropdownGroup label {
    display: inline-flex;
    margin-top: 5px;
  }

/* end used in some files in \Views\Schedules\Editors */

/* There is a bootstrap class for this - .d-none - that we can use instead - kr */
.hidden {
  display: none !important;
}

/*----------------------------------------------------------------------------------------------------*/

#divProcessing {
  display: flex;
  position: fixed;
  background-color: rgba(255,255,255,0.5);
  z-index: 10000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/*----------------------------------------------------------------------------------------------------*/

/*
// Media Upload section
*/

/* darkens background when dragging a file over Dropzone */
div[id*='Dropzone'].dz-drag-hover {
  background-color: rgba(128, 128, 128, 0.2);
}

/*#divDropzonePreviews [data-dz-thumbnail] {
  max-height: 200px;
}

#divDropzonePreviews [data-remove] {
  background-color: rgba(239,239,239,1);
  display: none;
  position: absolute;
}*/
/* Show delete button when hovering over thumbnail */
/*#divDropzonePreviews .file-preview-thumbnail:hover > [data-remove] {
  display: block;
}

.dz-image-preview .form-group {
  min-width: 90px;
}*/

/*
// end media upload section
*/

/*----------------------------------------------------------------------------------------------------*/

/*
// HNode section
*/

/* remove list styling */
li[role="treeitem"], li[role="none"] {
  display: block;
}

/* decrease ul and caret button padding from defaults */
ul[role="tree"] ul.nodeBranch {
  padding-left: 24px;
}

button[id^="btnBranch"] {
  padding: 0 10px;
}

/*  Caret Rotation */
[role="tree"] [aria-expanded="false"]:not([title^="Hotspot"]) .far {
  transition: transform ease-out 0.25s;
}

[role="tree"] [aria-expanded="true"]:not([title^="Hotspot"]) .far {
  /* rotate down */
  transform: rotate(90deg);
  transition: transform ease-out 0.25s;
}

/* line them up when checkboxes instead of radios [ex: application copy up] */
.treeNode .form-check {
  display: inline-block;
}

/* align tree radios */
ul[role="tree"] .form-check {
  padding-left: 30px;
}

/* Align 1st level hotpsot collapse DIV to related LI not parent UL  */
.treeNode[role="none"] > .nodeItem-hotspot {
  margin-left: 30px;
}

/*
// end HNode section
*/

/*----------------------------------------------------------------------------------------------------*/

/*
// Fitment Module section
*/

#divFitmentContent {
  background-color: #e2e2e2;
  height: 530px;
  overflow-y: auto;
}

#divFitmentTree label {
  font-weight: normal;
}

#divFitmentTree:empty {
  display: none;
}

#divFitmentTree:not(:empty) {
  display: block;
}

/* Display message when there is no fitment for the current selection */
#divFitmentTree:empty + #divFitmentPrompt {
  display: flex;
}

#divFitmentTree:not(:empty) + #divFitmentPrompt {
  display: none;
}

/*  Caret rotation */
#divFitmentTree .fa-caret-right[aria-expanded="false"] {
  transition: linear transform 0.25s;
}

#divFitmentTree .fa-caret-right[aria-expanded="true"] {
  transform: rotate(90deg);
  transition: linear transform 0.25s;
}

#divVehicleClasses #divHNodeTree {
  height: 522px;
  overflow-y: auto;
}
/*
// end Fitment Module section
*/

/*----------------------------------------------------------------------------------------------------*/

/*
// Part/Accessory Search section
*/

/* DROPDOWNS
*/

/* we want the Part/Accessories Search dropdown to be larger than others, and 100% on small breakpoints - kr */
#divPartsSearch #searchMoreFilters + .dropdown-menu, #divAccessoriesSearch #searchMoreFilters + .dropdown-menu {
  min-width: 15rem;
  width: 100%;
}

/*
// end Part Search section
*/

/*----------------------------------------------------------------------------------------------------*/

/*
// Part/Accessory Summary section
*/

/* accordion headers */
/* setting icon to inherit line heights so the accordion header stays the same height when going from text to icon. I thought that was the FA default, but ¯\_(ツ)_/¯ - kr */
/* Targeting fa- should be generic enough and still work if we go to v6 */
.accordion-button [class*="fa-"] {
  line-height: inherit;
}

/* per SV 11/16/21 - h3 headers in the Summary Details should not have top/bottom margins. Some have the my-0 class but not all do so this changes them all - kr  */

/* per SV 05/10/23 - Putting marging TOP back on h3 headers in the Summary Details. Need to use mb-0 class going forward, not my-0 - kr  */

#divSummaryAccordion #divDetails h3 {
  margin-bottom: 0;
}

/* end accordion headers */

/* Media accordion */

/* overriding the card body padding to allow for image column margins */
/* card body padding is 24, so setting to 8 + 16 from col = 24 */
#divPartMedia .card-body {
  padding-bottom: .5rem;
}
/* on sm breakpoint down, card body padding goes from 24 to 16, so setting to 0 + 16 from col = 16 */
@media (max-width: 767.98px) {
  #divPartMedia .card-body {
    padding-bottom: 0;
  }
}

#divPartMedia div[class^="col-"] {
  margin-bottom: 1rem;
}

  #divPartMedia div[class^="col-"] img {
    max-height: 124px;
  }

/* end Media accordion */

/* history tab */
/* Need to hide the message there are no changes when 1st message populated via ajax   */
.js-note-repeater > .inbox-item + .note-emptyList {
  display: none;
}

/* end history tab */

/*
// end Part Summary section
*/

/*----------------------------------------------------------------------------------------------------*/

/*
// Custom Overrides section
*/

/* using font-awesome icons for alerts with validation summaries - kr */
/* This is specific to if there is a ul/li in the alert, which _should_ only be dismissible alerts at the top of the page with a close button. **(turns out this was not the cae, removed dbl classing to .alert-dismissable - kr)** When not in a list, the icon is added inside the alert div itself - kr  */

.alert ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.alert li {
  padding-left: 1.5rem;
}

  .alert li:not(:only-child) {
    margin-bottom: 1rem;
  }

    .alert li:not(:only-child):last-child {
      margin-bottom: 0;
    }

  .alert li::before {
    /* defaults for font-awesome in css pseudo-elements */
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-left: -1.5rem; /* same as padding-left set on li */
    width: 1.5rem; /* same as padding-left set on li */
  }

/* danger */
.alert.alert-danger li::before {
  /* specific css */
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f06a";
}

/* info */
.alert.alert-info li::before {
  /* specific css */
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f05a";
}

/* success */
.alert.alert-success li::before {
  /* specific css */
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f058";
}

/* warning */
.alert.alert-warning li::before {
  /* specific css */
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f071";
}

/* FORMS  */


/*
// NOT applying .form-label class to any checkboxes and radio buttons like on Part Class tree, Role Details, etc. They should have .form-check-label class on them, but either way stay at body font size. kr */
label:not(.form-label) {
  font-size: var(--bs-body-font-size);
  font-weight: normal;
}

/* Bootstrap reboot resets <legend> but we want it to be the same size as our form labels*/
fieldset legend {
  font-size: .75rem;
  font-weight: 600;
  margin-bottom: .25rem;
}

/* Bootstrap timepicker */
/* Need to override position since they have to be attached outside the input group to the containing DIV in DateTimeModel.cshtml. This sets position on the container. Posistion values defined in timepicker.scss - kr */
div[id*='TimePicker'] {
  position: relative;
}


      /* form validation  */
      /* Per DSM - validation message in bold(semibold) and includes icon */
      /* this modifies the .invalid-feedback class from bootstrap - kr  */
      .invalid-feedback {
        font-weight: 600;
      }

        .invalid-feedback::before {
          /* defaults for font-awesome in css pseudo-elements */
          display: inline-block;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          -webkit-font-smoothing: antialiased;
          /* specific css */
          font-family: "Font Awesome 7 Pro";
          font-weight: 400;
          content: "\f06a";
          margin-right: .25rem;
        }

      /* end form validation  */



/* Form field "required" visual indicator */
/* see #4777 for history and steps forward when more languages are added */
label.required::before {
  content: "\002A";
  speak: never;
  speak: none;
}

html[lang="en"] label.required::before,
html[lang="en-US"] label.required::before {
  content: "\002A" / "Required";
}

html[lang="fr-CA"] label.required::before {
  content: "\002A" / "Obligatoire";
}



/* css to fix button alignment on Training and OEM codes validations */
/* only want on all but small breakpoint */
@media (min-width: 576px) {
  :where(#divAutomotiveCodesEditor , #divTrainingEditor):has(input.is-invalid) > div[class^='col'] > .row > div:last-child {
    align-self: start !important;
    margin-top: calc(var(--bs-body-font-size) * 1.7);
  }
}

/* end FORMS  */

/*
// end Custom Overrides section
*/

/* color chicklet */

/* css for color chicklet used on Part Detail, Summary, History, Color table, etc. */
.colorSwatch {
  border: 1px solid #c7c7c7;
  display: inline-block;
  font-weight: initial;
  height: 24px;
  width: 24px;
  padding:0;
  vertical-align: text-bottom;
}
/* empty color swatch is a stacked font-awesome square & slash with a few tweaks */
.colorSwatchEmpty {
  /* Need to add !important since font-awesome kit css comes after - kr */
  width: 1.25rem !important;
  line-height: 1.5rem !important;
}

  .colorSwatchEmpty .fa-square-full {
    color: var(--bs-gray);
  }

  .colorSwatchEmpty .fa-slash {
    transform: rotate(6deg);
    /* $red2 - danger */
    color: var(--bs-danger);
  }

/* end color chicklet */

/* Use .read-more-container class on collapable area for Bootstrap collapse when using a read-more CTA */

.read-more-container {
  margin-bottom: 0;
}

  .read-more-container.collapse:not(.show) {
    height: 2.85rem !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .read-more-container.collapsing {
    min-height: 2.85rem !important;
  }

  .read-more-container > p:last-child {
    margin-bottom: 0;
  }

/* end Bootstrap collapse for read-more UI */


/* Dealer styles */

#lstOrdersEmailList .js-email-text {
  padding-top: .25rem;
}

/* Hiding old functionality - kr */
/* There are a few things in Legacy that are not used but we're just hiding for now just in case they're needed in the future  */

/* LLumar radio option in cart Configuration b/c no one should ever need to check it - kr */
/* We don't have IDs on the Cards so using attributes of the hidden inputs before the radio block - kr  */
input[id*="hdnCartConfiguration"] ~ div:first-of-type .form-check:last-child {
  display: none;
}

/* end Dealer styles */


/* helper classes */
.border-radius-0 {
    border-radius: 0px;
}

.grid-row {
  grid-auto-flow: row;
}

.grid-column {
  grid-auto-flow: column;
}

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

.mvh-50 {
  max-height: 50vh;
}

.white-space-normal {
  white-space:normal;
}

.form-check-input[role='switch'] {
  /* temporary(?) fix added until we can figure out what's going on with Bootstrap not pulling in the border-radius include */
  /* see defect #16936 and defect #18000 for more information */
  border-radius: 2em;
}

/* DataTables Toggle Styles - When label is blank or missing */
.dataTables_wrapper input[data-switch] + label[data-on-label=""],
.dataTables_wrapper input[data-switch] + label[data-off-label=""],
.dataTables_wrapper input[data-switch] + label:not([data-on-label]),
.dataTables_wrapper input[data-switch] + label:not([data-off-label]) {
  width: 32px;
  height: 16px;
  margin-top: 5px;
}

.dataTables_wrapper input[data-switch] + label[data-on-label=""]:after,
.dataTables_wrapper input[data-switch]:checked + label[data-off-label=""]:after,
.dataTables_wrapper input[data-switch] + label:not([data-on-label]):after,
.dataTables_wrapper input[data-switch]:checked + label:not([data-off-label]):after {
  width: 11px;
  height: 11px;
  top: 2.5px;
}

.dataTables_wrapper input[data-switch]:checked + label[data-on-label=""]:after,
.dataTables_wrapper input[data-switch]:checked + label:not([data-on-label]):after {
  left: 18px;
}

/* Menu Styles */
.side-nav .side-nav-second-level .menuitem-active {
  position: relative;
}

.side-nav .side-nav-second-level .menuitem-active > a {
  /*color: var(--bs-white) !important;*/
  display: flex;
  align-items: center;
  padding-left: 81px;
}

.side-nav .side-nav-second-level .menuitem-active > a:before {
  content: '';
  display: inline-block;
  width: 4px;
  /* height: calc(1rem * 1.5); causing the sub-nav height to be 56px instead of 53px */
  height: 80%;
  margin-right: 1rem;
  background: var(--bs-primary);
  position: absolute;
  margin-left: -15px;
}

.side-nav .side-nav-second-level .menuitem-active .side-nav-third-level a {
    padding-left:100px;
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-second-level .side-nav-item.menuitem-active:hover > a:before,
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-second-level .side-nav-item.menuitem-active:hover > a:before {
  background: var(--bs-white);
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul a,
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapsing > ul a {
  padding: 16px 20px;
}

/* Error Pages */
body.error-page .content,
body.error-page .content > .container-fluid {
    height:100%;
}

.fs-0 {
  font-size: 2.5rem;
}

.fs-none {
  font-size: 0!important;
}

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp.lines2 {
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

/* When printing, some browsers (namely Firefox) tries to color adjust for better color contrast. Very cool feature, but sometimes we don't want that. */
.no-print-color-adjust {
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

/* Sales Performance Report */
@media print {
  #divSalesRank,
  #divStatusListItems {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }
}


@media print {
  /* Print: Grid */
  [class^="col-print"] {float:left;}
  .col-print-1 {width:8.33333333%;}
  .col-print-2 {width:16.66666667%;}
  .col-print-3 {width:25%;}
  .col-print-4 {width:33.33333333%;}
  .col-print-5 {width:41.66666667%;}
  .col-print-6 {width:50%;}
  .col-print-7 {width:58.33333333%;}
  .col-print-8 {width:66.66666667%;}
  .col-print-9 {width:75%;}
  .col-print-10{width:83.33333333%;}
  .col-print-11{width:91.66666667%;}
  .col-print-12{width:100%;}

  /* Print: Order */
  .order-print-0 {order:0 !important;}
  .order-print-1 {order:1 !important;}
  .order-print-2 {order:2 !important;}
  .order-print-3 {order:3 !important;}
  .order-print-4 {order:4 !important;}
  .order-print-5 {order:5 !important;}

  /* Print: Text Alignment */
  .text-print-start {text-align:left !important;}
  .text-print-center {text-align:center !important;}
  .text-print-end {text-align:right !important;}

  /* Print: Margin Resets */
  .my-print-0 {margin:0!important;}
  .mx-print-0 {margin:0!important;}

  /* Print: Padding Resets */
  .py-print-0 {padding:0!important;}
  .px-print-0 {padding:0!important;}
}


/* Add the "print-modal" class to the body when wanting to print the content of a modal and not show the content behind the modal - abc */
@media print {
  body.modal-open.print-modal .wrapper .content-page {
      overflow: visible !important;
  }
  body.modal-open.print-modal .modal {
    border-color: transparent !important;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    overflow: visible !important;
  }

  body.modal-open.print-modal .modal .modal-dialog {
    margin: 0;
    max-width: 100% !important;
  }

    body.modal-open.print-modal .modal .modal-dialog .modal-content {
      overflow: visible !important;
      border-color: transparent;
    }

  body.modal-open.print-modal .modal .modal-header .btn-close {
    display: none;
  }
}

/* Add body class "print-layout-landscape" when the page should default print layout to landscape */
@media print {
  @page PrintLandscape {
    size: landscape;
  }
}

body.print-layout-landscape {
  page: PrintLandscape;
}


/* Catalog Settings Tab border offset */
@media (min-width: 576px) {
  #lstDealerTabs {margin-right:100px;}
  #lstDealerTabs.wider {margin-right:200px;}
}

.card-title {
  margin-bottom: 1rem;
}


/* Font Awesome, Font Stack Half Sizes */
.fa-stack.fa-stack-half-sizes .fa-stack-2x {
  font-size: 1em;
}

.fa-stack.fa-stack-half-sizes .fa-stack-1x {
  font-size: 0.5em;
}


/* Modal: Size XXL */
@media (min-width: 576px) {
  .modal-xxl {
    --bs-modal-width: 550px;
  }
}

@media (min-width: 768px) {
  .modal-xxl {
    --bs-modal-width: 750px;
  }
}

@media (min-width: 992px) {
  .modal-xxl {
    --bs-modal-width: 950px;
  }
}

@media (min-width: 1200px) {
  .modal-xxl {
    --bs-modal-width: 1140px;
  }
}

@media (min-width: 1500px) {
  .modal-xxl {
    --bs-modal-width: 1400px;
  }
}


/* Cart Button Styles */
#btnOpenYourCart {
  .fa-shopping-cart:before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 18px;
    font-size: 1rem;
    color: var(--bs-primary);
    border-radius: 50%;
  }

  @media (min-width: 576px) {
    .fa-shopping-cart {
      font-weight: 400;

      &:before {
        background: var(--bs-primary);
        color: var(--bs-white);
      }
    }
  }

  #spnCartQuantityBadge {
    display: flex;
    justify-content: center;
    align-items: center;
    /*width: 1.75rem;*/
    min-width: 1.75rem;
    height: 1.75rem;
    top: -18px;
    left: 20px;
    color: var(--bs-primary) !important;
    background: var(--bs-white) !important;
    border: 2px solid var(--bs-primary);
    padding:0 5px;
  }

  @media (min-width: 576px) {
    #spnCartQuantityBadge {
      top: -21px;
      left: 18px;
    }
  }
}

/* Distributor Cart Styles */
#tblYourCartAccessories div[data-quantity] .input-group {
  width:auto;
}
#tblYourCartAccessories div[data-quantity] .input-group input {
  max-width:40px;
  text-align:center;
  padding:0;
}/*
#spnCartQuantityBadge {
  top: -1.2em;
  right: -10px;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  font-size: 12px;
}*/

/* Distributor > Accessory Detail */
#dlgProductDetailsWrapper {
  margin-left: -20px;
  margin-right: -20px;
}

@media (min-width: 576px) {
  #dlgProductDetailsWrapper {
    margin-left: -40px;
    margin-right: -40px;
  }
}

/* Accessory Detail > Quantity stepper (match Your Cart) */
#dlgProductDetails,
#dlgConfirmStock,
#dlgSplitOrder {
  .bootstrap-touchspin {
    width:auto;

    input {
      max-width:40px;
      text-align:center;
      padding:0;
    }
  }

  .input-group-btn {
    &.input-group-prepend {
      margin-right:10px;
    }

    &.input-group-append {
      margin-left:10px;
    }

    button {
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(var(--bs-primary-rgb), .1);
      border-radius:50%;
      aspect-ratio:1;
      padding:0.50rem!important;
    }
  }
}

/* Distributor > RMA Form */
#navRMARequest {
    &:not(.menuitem-active) {
      .fa-undo {
        text-shadow:
          -1px -1px 0 var(--bs-component-active-bg),  
          1px -1px 0 var(--bs-component-active-bg),
          -1px 1px 0 var(--bs-component-active-bg),
          1px 1px 0 var(--bs-component-active-bg);
      }
    }
  .fa-undo {
    position:absolute;
    top:8px;
    left:9px;
    font-size:0.50rem;
        text-shadow:
          -0.25px -0.25px 0 #1e1e1e,  
          0.25px -0.25px 0 #1e1e1e,
          -0.25px 0.25px 0 #1e1e1e,
          0.25px 0.25px 0 #1e1e1e;
  }
}


/* POPOVER styles */
.popover {
  --bs-popover-zindex: 1060; /* Needed this to be in front of modals. */
}


/* TOAST styles */
/* Move these to a better spot and work with the specificity better so !important can be removed - abc */
.toast-container {
  --bs-toast-zindex: 1040; /* needed to make the toasts fall behind the modal and modal overlay's z-index of 1050 and 1055 */
  top: 3rem !important;
  opacity:0.95;
}

.toast {
  --bs-toast-font-size: var(--bs-body-font-size);
}

  /* Toast: Success */
  .toast .bg-success-lighten {
    background-color: var(--toast-success-20) !important;
    border: 1px solid var(--toast-success-40) !important;
  }

    .toast .bg-success-lighten .toast-loader {
      background-color: var(--toast-success-base) !important;
    }

    .toast .bg-success-lighten .text-success,
    .toast .bg-success-lighten .toast-close {
      color: var(--toast-success-base) !important;
    }

  /* Toast: Danger */
  .toast .bg-danger-lighten {
    background-color: var(--toast-danger-20) !important;
    border: 1px solid var(--toast-danger-40) !important;
  }

    .toast .bg-danger-lighten .toast-loader {
      background-color: var(--toast-danger-base) !important;
    }

    .toast .bg-danger-lighten .text-danger,
    .toast .bg-danger-lighten .toast-close {
      color: var(--toast-danger-base) !important;
    }

  /* Toast: Warning */
  .toast .bg-warning-lighten {
    background-color: var(--toast-warning-20) !important;
    border: 1px solid var(--toast-warning-40) !important;
  }

    .toast .bg-warning-lighten .toast-loader {
      background-color: var(--toast-warning-base) !important;
    }

    .toast .bg-warning-lighten .text-warning,
    .toast .bg-warning-lighten .toast-close {
      color: var(--toast-warning-base) !important;
    }

  /* Toast: Info */
  .toast .bg-info-lighten {
    background-color: var(--toast-info-20) !important;
    border: 1px solid var(--toast-info-40) !important;
  }

    .toast .bg-info-lighten .toast-loader {
      background-color: var(--toast-info-base) !important;
    }

    .toast .bg-info-lighten .text-info,
    .toast .bg-info-lighten .toast-close {
      color: var(--toast-info-base) !important;
    }

/* end TOAST styles */


/* start Alert color overrides */
.alert {
  color: #1E1E1E;
  background-color: var(--bs-alert-bg);
  border-color: var(--bs-alert-border-color);
  --bs-link-color:#1E1E1E;

  :before,
  > [class*='fa-'] {
    color:var(--bs-alert-color);
  }
}

.alert.alert-info {
  --bs-alert-bg: #CDE5EC;
  --bs-alert-color: #39AFD1;
  --bs-alert-border-color: #A9D8E6;
}
.alert-success {
  --bs-alert-bg: rgba(203, 219, 195, 0.96); /* --toast-success-20 at the toasts' opacity */
  --bs-alert-color: #2E7D07;
  --bs-alert-border-color: #A4C495;
}
.alert-warning {
  --bs-alert-bg: #EDE3C4;
  --bs-alert-color: #D8A408;
  --bs-alert-border-color: #E8D495;
}
.alert-danger {
  --bs-alert-bg: #EBC9C6;
  --bs-alert-color: #CE2513;
  --bs-alert-border-color: #E4A19A;
}

/* Html.Alert always renders btn-close-white; keep the white X only on alerts with forced white text */
.alert:not(.text-white) .btn-close-white {
  filter: none;
}

/* Page-level alerts (successAlert section / validation messages) sit flush under the header without this */
.content > .container-fluid > .alert {
  margin-top: 0.75rem;
}
/* end Alert color overrides */


/* start Inventory Badge styles */
.inventory-badge {
  --bs-info-rgb: 205, 229, 236;
  --bs-success-rgb: 203, 219, 195;
  --bs-warning-rgb: 237, 227, 196;
  --bs-danger-rgb: 235, 201, 198;
  display: inline-flex;
}
.inventory-badge .dot {
  content: '';
  display: inline-block;
  position: relative;
  background: red;
  border-radius: 50%;
  width: 16px;
  height: 16px;
}
.inventory-badge .dot::before,
.inventory-badge .dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.inventory-badge .dot::before {
  padding: 5px;
}

.inventory-badge .dot::after {
  padding: 3px;
}

/* color overrides */
.inventory-badge .bg-success .dot {
  background: rgba(255, 255, 255, 0.40);
}
.inventory-badge .bg-success .dot::before {
  background: rgba(255, 255, 255, 0.70);
}
.inventory-badge .bg-success .dot::after {
  background: #2E7D07;
}

.inventory-badge .bg-warning .dot {
  background: rgba(255, 255, 255, 0.70);
}
.inventory-badge .bg-warning .dot::before {
  background: #D8A408;
}
.inventory-badge .bg-warning .dot::after {
  display: none;
}

.inventory-badge .bg-danger .dot {
  background: rgba(255, 255, 255, 0.70);
}
.inventory-badge .bg-danger .dot::before {
  background: #CE2513;
}
.inventory-badge .bg-danger .dot::after {
  display:none;
}
/* end Inventory Badge styles */

/* Fix: Chrome, the checkboxes aren't displaying on print */
/* move to theme files? */
.form-check .form-check-input {
  -webkit-print-color-adjust: exact;
}

/* Toggle switches keep the full pill shape on themes without $enable-rounded (see PR 132),
   scoped to .form-switch so plain checkboxes keep the theme's corners (#23551) */
.form-check.form-switch .form-check-input[type=checkbox] {
  border-radius: 2em;
}

/* Button Border color reset */
.btn-outline-dark {
  --bs-btn-border-color: #858a92;
}

.aspect-ratio-1 {
  aspect-ratio: 1;
}

.left-0 {
  left:0;
}

.right-0 {
  right: 0;
}


/* Styles for Position Sticky Top - <body> tag needs to have "has-accessory-filter" class added to work - abc */
body.has-accessory-filter .position-sticky-top {
  position:sticky;
  top:0;
  max-height:100vh;
  overflow-x:auto;
}
body.has-accessory-filter,
body.has-accessory-filter .wrapper > .content-page {
  overflow: visible !important;
}


/* Accessory Search Filter */
#divSearchResults {
  .nav-link.active {
    display: flex;
    font-weight: bold;
    /* the tab buttons carry text-dark for their inactive state; its !important would
       otherwise beat the theme's active pill color (white in every theme) */
    color: var(--bs-nav-pills-link-active-color) !important;

    &:after {
      content:"\f00c"; /* checkmark */
      font-family:"Font Awesome 7 Pro";
      margin-left:auto;
      color:inherit;

      /* LG and up */
      @media (min-width: 992px) {
        content:"\f054"; /* right arrow */
      }
    }
  }


  /* The retail catalog activates .position-sticky-top through body.has-accessory-filter; the admin
     Accessories page and the Add Accessories modal never get that body class, so activate it here.
     In the modal the nearest scroll container is .modal-body, on the page it is the window - sticky
     works against either. The wrapper needs the full column height or the pinned block has no room
     to travel. */
  .divFilterWrapper {
    height: 100%;
  }

  .position-sticky-top {
    position: sticky;
    top: 0;
    /* the cap must be SHORTER than the visible scrollport or overflow-y never engages -
       13rem covers the Add Accessories modal's chrome (dialog margins, header, footer,
       body padding); on the standalone page it just leaves a little unused room */
    max-height: calc(100vh - 13rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* featured/custom accessory badges; both greens are straight from the Figma comp -
     #314C0E for the star/check glyphs, #DBE9C8 for the circle behind them */
  .accessory-badge {
    color: #314C0E;
    background-color: #DBE9C8;
    font-size: 1.125rem;

    /* the margins shift the star up-left within the centered badge, opening the corner the check overlaps */
    .fa-star {
      font-size: 14px;
      margin-right: 1px;
      margin-bottom: 1px;
    }
  }

  /* the "N added" confirmation uses the toast/alert success green, not the brighter theme success;
     same override shape as the toasts use (utility class needs the !important met in kind) */
  .js-accessory-added.text-success {
    color: var(--toast-success-base) !important;
  }

  /* the corner check on the featured-accessory star badge; the white background circle is the ring */
  .featured-check {
    right: 3px;
    bottom: 5px;
    font-size: .45em;
    line-height: 1;
    padding: 1px;
    background: var(--bs-white);
    border-radius: 50%;
  }

  #divAccessoriesPages {
    .select2 {
      .select2-selection__rendered {
        display: flex;
        height: 100%;
        align-items: center;
      }
    }
  }
}


#divFilters > .position-sticky-top {
  max-height: 80vh;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.1);
}

@media (min-width: 992px) {
  #divFilters > .position-sticky-top {
    max-height: 100vh;
    box-shadow: none;
  }
}

.bg-white-90 {
  background-color: rgba(255, 255, 255, 0.90) !important;
}

.backdrop-blur-5 {
  backdrop-filter: blur(5px);
}

.heading-with-lines {
  display:flex;
  justify-content:center;
  align-items:center;
  text-wrap-mode: nowrap;

  &::before,
  &::after {
    content:'';
    display:inline-block;
    width:100%;
    height:1px;
    background:var(--bs-gray-300);
  }

  &::before {
    margin-right:20px;
  }
  &::after {
      margin-left:20px;
  }

  @media (min-width: 768px) {
    &::before,
    &::after {
      width: 70px;
    }
  }
}

/* Your Cart Styles */
#dlgYourCart {
  #tblYourCartAccessories {
    .input-group-btn {
      &.input-group-prepend {
        margin-right:10px;
      }

      &.input-group-append {
        margin-left:10px;
      }

      button {
        display:flex;
        align-items:center;
        justify-content:center;
        background:rgba(var(--bs-primary-rgb), .1);
        border-radius:50%;
        aspect-ratio:1;
        padding:0.50rem!important;
      }
    }
  }
}

/* Retail Catalog */
#divViewOnVehicleOnlyToggle {
  input, label {
    float:none; /* Why is Bootstrap still using floats?! */
    white-space: nowrap;
  }
}


/* Line clamp used with toggleContentButtons() in /scripts/ig/ui.js */
.content-toggle {
  .content:not(.expanded) {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* This class was removed by FontAwesome, so we're adding it back for the 5.14.0 to 7.2.0 migration */
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}


/* Split Order modal. The accessory thumbnails come from the same media as the order's accessories, at
   whatever aspect ratio the vendor supplied, so the box is fixed and the image is contained inside it -
   rows have to line up down the list, and a tall image would otherwise set the row's height. */
#dlgSplitOrder {
  .ig-split-order-image {
    width: 80px;
    height: 80px;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}