/* UI2 System - SCSS Migration
 * Migrated from public/css/ui2/ui2.sass
 * This replaces the legacy ui2.sass with modern SCSS structure
 */
:root {
  /* Blues */
  --simpro-blue: #1976d2;
  --simpro-light-blue: #229bff;
  --simpro-mobile-light-blue: #3bb5e2;
  --simpro-lighter-blue: #91bce7;
  --simpro-dark-blue: #0e527f;
  --simpro-payments-blue: #002f87;
  --simpro-payments-dark-blue: rgb(10 21 37);
  --simpro-payments-yellow: #ffdd00;
  /* Greens */
  --simpro-green: #2a7235;
  --simpro-light-green: #c9fac1;
  /* Oranges/Yellows/Reds */
  --simpro-light-orange: #faaf3c;
  --simpro-yellow: #feed78;
  --simpro-orange: #ff7740;
  --simpro-red: #de104f;
  --simpro-light-red: #ff7070;
  /* Text Colors */
  --simpro-body-text: #222222;
  --simpro-header-text: var(--simpro-grey-900);
  --simpro-text-primary: #212529; /* Primary text color for body copy and main content */
  --simpro-text-secondary: #6c757d; /* Secondary text color for less prominent information or subtext */
  --simpro-text-disabled: #adb5bd; /* Text color for disabled interactive elements or content */
  --simpro-text-brand: #007bff; /* Text color for brand emphasis */
  --simpro-text-success: #28a745; /* Text color for success messages or indicators */
  --simpro-text-warning: #ffc107; /* Text color for warning messages or indicators */
  --simpro-text-info: #17a2b8; /* Text color for informational messages or indicators */
  --simpro-text-critical: #dc3545; /* Text color for critical errors or destructive action indicators */
  /* Whites/Blacks */
  --simpro-white: #ffffff;
  --simpro-black: #000000;
  /* Canonical Greys (grey-0 to grey-900) */
  --simpro-grey-0: #f7f7f7;
  --simpro-grey-100: #e2e2e2;
  --simpro-grey-200: #eeeeee;
  --simpro-grey-300: #dddddd;
  --simpro-grey-400: #cccccc;
  --simpro-grey-500: #aaaaaa;
  --simpro-grey-600: #888888;
  --simpro-grey-700: #555555;
  --simpro-grey-800: #333333;
  --simpro-grey-900: #222222;
  --simpro-top-bar-color: #f0f1f2;
  /* Alert Colors with all variations */
  --simpro-alert-primary: var(--simpro-dark-blue);
  --simpro-alert-primary-bg: var(--simpro-lighter-blue);
  --simpro-alert-secondary: #383d41;
  --simpro-alert-secondary-bg: #4f5459;
  --simpro-alert-success: #41b555;
  --simpro-alert-success-bg: #91c891;
  --simpro-alert-danger: #721c24;
  --simpro-alert-danger-bg: #f5c6cb;
  --simpro-alert-warning: #f2c94c;
  --simpro-alert-warning-bg: #fff3cd;
  --simpro-alert-info: #0c5460;
  --simpro-alert-info-bg: #d1ecf1;
  --simpro-alert-light: #818182;
  --simpro-alert-light-bg: #b2b2b2;
  --simpro-alert-dark: #1b1e21;
  --simpro-alert-dark-bg: #1f2124;
  /* UI Component Colors */
  --simpro-focus: #ddeffc;
  --simpro-hover-blue: #bfdaff;
  --simpro-tab-content-border: #cccccc;
  --simpro-border: #f3f3f3;
  --simpro-border-grey: #dddddd;
  --simpro-purple: #6f42c1;
  /* Background Colors */
  --simpro-background-primary: #f8f9fa; /* Primary application background color */
  --simpro-background-inverse: #343a40; /* Background color for inverse-themed sections or components */
  --simpro-background-surface-hover: #f1f3f5; /* Background color for interactive surfaces on hover */
  --simpro-background-surface-selected: #e0e7ff; /* Background color for selected items or surfaces (brand-tinted) */
  --simpro-background-surface-selected-hover: #d1dfff; /* Background color for hovered selected items or surfaces */
  --simpro-background-surface-secondary: #fafafa; /* Secondary surface color for subtle differentiation or sections */
  --simpro-background-brand: #007bff; /* Background color for primary brand actions or highlights */
  --simpro-background-brand-hover: #0056b3; /* Hover state for brand background color */
  --simpro-background-success-bold: #28a745; /* Stronger background color for emphasized success states */
  --simpro-background-info-bold: #17a2b8; /* Stronger background color for emphasized info states */
  --simpro-background-critical-bold: #dc3545; /* Stronger background color for emphasized critical/error states */
  /* Borders*/
  --simpro-border-primary: #ced4da;
  --simpro-border-brand: #007bff; /* Border color for brand emphasis or brand-related components */
  --simpro-border-success: #28a745; /* Border color for success state indicators */
  --simpro-border-warning: #ffb300; /* Border color for warning state indicators */
  --simpro-border-info: #17a2b8; /* Border color for informational state indicators */
  --simpro-border-critical: #dc3545; /* Border color for critical error state indicators */
  /* Z-Index Stack */
  --simpro-z-index-sticky-header: 500;
  --simpro-z-index-suggest-select-results: 600;
  --simpro-z-index-top-bar: 997;
  --simpro-z-index-left-menu: 998;
  --simpro-z-index-tooltip: 998;
  --simpro-z-index-dialog-box: 999;
  --simpro-z-index-file-upload-container: 1000;
  --simpro-z-index-over-dialog-box: 1000;
  --simpro-z-index-ui-date-picker: 1000;
  --simpro-z-index-dialog-box-tooltip: 1001;
  --simpro-z-index-loading-items: 1100;
  --simpro-z-index-loading-image: 99999;
}

/* Asset Paths */
/* UI2 System - SCSS Migration
 * Migrated from public/css/ui2/ui2.sass
 * This replaces the legacy ui2.sass with modern SCSS structure
 */
/* Global mixins and variables - migrated from _mixins.sass */
/* These functions are needed to produce proper unicode output in non-compressed compiled sass files. Accepts unescaped unicode character/s eg. 6301 */
/* UI2 Page Layout - migrated from _page.sass */
@font-face {
  font-family: "v12-icons";
  src: url("fonts/v12-icons.eot");
  src: url("fonts/v12-icons.eot") format("embedded-opentype"), url("fonts/v12-icons.woff") format("woff"), url("fonts/v12-icons.svg") format("svg"), url("fonts/v12-icons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
#mainContainer {
  margin-left: 50px;
  transition: margin-left 0.4s;
}
.menuExpanded #mainContainer {
  margin-left: 170px;
}
.menuHidden #mainContainer {
  margin-left: 0;
}
.iframe-body #mainContainer {
  margin-left: 0 !important;
}

#main {
  box-sizing: border-box;
  margin: 0 1.3%;
  padding-top: 50px;
}
#main.iframe {
  padding: 20px 12px 0 12px;
}

#verticalNav .content {
  display: none;
}
#verticalNav .top {
  padding: 9px 0;
}
#verticalNav .top .icon-up-arrow {
  padding: 5px 2px;
  border-top: 1px solid var(--simpro-grey-400);
  width: 10px;
  display: inline-block;
}

@media screen and (max-width: 1400px) {
  .menuExpanded #mainContainer {
    margin-left: 50px;
  }
}
/* UI2 System - SCSS Migration
 * Migrated from public/css/ui2/ui2.sass
 * This replaces the legacy ui2.sass with modern SCSS structure
 */
/* UI2 Top Bar Layout - migrated from _topBar.sass */
#topBar-ui2 {
  background-color: var(--simpro-top-bar-color);
  position: fixed;
  display: flex;
  top: 0;
  left: 50px;
  right: 0;
  height: 40px;
  z-index: 99;
  transition: left 0.4s;
}
.menuExpanded #topBar-ui2 {
  left: 170px;
}
.menuHidden #topBar-ui2 {
  left: 0;
}

#topBarItems-ui2 {
  padding: 0;
  list-style: none;
  z-index: 106;
  height: 40px;
  margin-right: 10px;
  white-space: nowrap;
}
#topBarItems-ui2 .alertsBubble a {
  color: var(--simpro-grey-100);
  height: 22px;
  font-size: 12px;
  font-weight: normal;
}
#topBarItems-ui2 li > a [class^=icon] {
  font-size: 18px;
  vertical-align: -11%;
}
#topBarItems-ui2 .icon-logout {
  font-size: 14px;
}
#topBarItems-ui2 .alertsBubble {
  position: relative;
  top: -8px;
}
#topBarItems-ui2 .alertsBubble {
  min-width: 15px;
  height: 20px;
  border-radius: 20px;
  line-height: 21px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  background-color: var(--simpro-red);
  display: inline-block;
  color: var(--simpro-white);
  padding: 0 5px;
  border-radius: 20px;
  background-color: var(--simpro-red);
  z-index: 1;
}
#topBarItems-ui2 .alertsBubble a {
  color: var(--simpro-white);
}
#topBarItems-ui2 .announcementBubble {
  min-width: 15px;
  height: 25px;
  border-radius: 25px;
  line-height: 26px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  background-color: var(--simpro-orange);
  display: inline-block;
  color: var(--simpro-white);
  padding: 0 5px;
  border-radius: 25px;
  background-color: var(--simpro-orange);
}
#topBarItems-ui2 > li {
  padding: 10px 13px 5px 13px;
  display: inline-block;
  float: none;
  position: relative;
  z-index: 10;
}
#topBarItems-ui2 > li:hover ul {
  left: 50%;
  top: 22px;
  margin-left: -144px;
  visibility: visible;
  opacity: 1;
  transition-delay: 250ms;
}
#topBarItems-ui2 > li ul {
  box-shadow: 0 3px 3px var(--simpro-grey-300);
  width: 160px;
  height: auto;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  z-index: 10;
  margin: 14px 0 0 -2px;
  padding-top: 5px;
  background: var(--simpro-white);
}
#topBarItems-ui2 > li ul:before {
  /* Add the little pointer arrow at the top of the menu */
  content: "\e929";
  font-family: "v12-icons";
  width: 10px;
  height: 10px;
  font-size: 8px;
  color: var(--simpro-white);
  position: absolute;
  top: -6px;
  left: 90%;
  margin-left: -5px;
  z-index: 11;
}
#topBarItems-ui2 > li ul.last {
  margin-left: -67px;
}
#topBarItems-ui2 > li ul a {
  display: block;
  margin-left: 0;
}
#topBarItems-ui2 > li ul li #loggedUserText {
  color: #808080;
}
#topBarItems-ui2 > li ul li #loggedUserName {
  color: var(--simpro-black);
  font-weight: bold;
  white-space: normal;
}
#topBarItems-ui2 > li ul li:hover {
  background: #bfdaff;
}
#topBarItems-ui2 > li ul li a {
  padding: 6px 5px 3px 10px;
  font-size: 12px;
  color: var(--simpro-blue);
  white-space: normal;
}
#topBarItems-ui2 > li ul .loggedUserContainer {
  padding: 6px 5px 6px 10px;
  border-bottom: 1px solid var(--simpro-grey-200);
}
#topBarItems-ui2 > li ul .loggedUserContainer:hover {
  background: none;
}

/** Global Search **/
#globalSearchContainer {
  height: 42px;
  width: auto !important;
  min-width: 20% !important;
  max-width: 350px !important;
  float: right;
  margin: 0;
  position: relative;
}
@media screen and (max-width: 1200px) {
  #globalSearchContainer {
    max-width: 250px;
  }
}
@media only screen and (min-width: 1366px) and (max-width: 1420px) {
  #globalSearchContainer {
    max-width: 300px;
  }
}
@media only screen and (min-width: 1420px) and (max-width: 1580px) {
  #globalSearchContainer {
    max-width: 400px;
  }
}

#globalSearchForm,
#toggleSavedSearches {
  border: 0 !important;
}

#globalSearchForm {
  margin: 4px 8px 0 0;
}

#globalSearchForm,
#globalSearch {
  height: 30px !important;
}

#toggleSavedSearches {
  background-color: var(--simpro-grey-0) !important;
}
#toggleSavedSearches .icon-bookmark {
  font-size: 14px;
}

#globalSearch:focus {
  background-color: var(--simpro-white);
}

#globalSearchButton,
.savedSearchBtn,
#voipSettings,
.topBarIcon {
  color: #1976d2 !important;
}

.savedSearchBtn {
  margin-top: -4px; /* offset margin from #globalSearchForm */
  padding: 5px 5px 5px 20px !important;
}

#globalSearchButton {
  margin-top: -4px;
  border-left: 0 !important;
  width: 35px !important;
}

#savedSearchesCont ul {
  margin-top: 12px !important;
}
#savedSearchesCont ul .menuContent li a:hover {
  background: var(--simpro-focus);
}

/** Company Selector & Company Name Display **/
.companyNameBlock {
  padding: 5px 10px;
  height: 80%;
  width: 13%;
  margin: 5px 0 0 15px;
  display: inline;
  float: left;
  box-sizing: border-box;
}
.companyNameBlock .companyDiv-ui2 {
  display: flex;
}

#companySelectorDiv {
  cursor: pointer;
}

#companyIconDiv {
  flex-basis: 20px;
  flex-shrink: 0;
  margin-right: 5px;
  font-size: 16px;
}

#companyNameDiv {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

#companyListChevronDiv {
  margin-top: -3px;
  flex-basis: 20px;
  flex-shrink: 0;
  font-size: 20px;
  color: var(--simpro-blue);
}

#companySelector-ui2:hover {
  border-radius: 5px 5px 0 0;
  background-color: var(--simpro-hover-blue);
}

#companyDropDown {
  position: absolute;
  overflow-y: auto;
  z-index: 99;
  background: var(--simpro-white);
  margin-left: 0 !important;
  display: none;
  border-left: 1px solid var(--simpro-grey-300);
  border-right: 1px solid var(--simpro-grey-300);
  border-bottom: 1px solid var(--simpro-grey-300);
  padding: 5px;
  max-height: 600px;
  left: 15px;
}
#companyDropDown .companyChange {
  padding: 5px;
  display: flex;
  cursor: pointer;
}
#companyDropDown .companyChange:hover {
  background-color: var(--simpro-focus);
}
#companyDropDown .companyChange .companyIconDiv {
  font-size: 12px;
  margin-right: 7px;
  margin-left: 2px;
}
#companyDropDown .companyChange .companyNameDiv {
  font-size: 12px;
}

#headerVoip {
  visibility: visible;
}

#headerAlerts,
#pushNotificationsBubble {
  visibility: hidden;
  margin-left: -20px;
}

.greyScrollbar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px color-mix(in srgb, var(--simpro-black) 30%, transparent);
  border-radius: 6px;
  background-color: var(--simpro-white);
}

.greyScrollbar::-webkit-scrollbar {
  width: 8px;
  background-color: var(--simpro-white);
}

.greyScrollbar::-webkit-scrollbar-thumb {
  border-radius: 6px;
  box-shadow: inset 0 0 6px color-mix(in srgb, var(--simpro-black) 30%, transparent);
  background-color: var(--simpro-grey-500);
}

thead.tableFloatingHeaderOriginal {
  top: 40px !important;
  background-color: var(--simpro-grey-200);
  border-bottom: 1px solid var(--simpro-grey-300);
}

@media screen and (max-width: 1400px) {
  .menuExpanded #topBar-ui2 {
    left: 50px;
  }
}
/* UI2 System - SCSS Migration
 * Migrated from public/css/ui2/ui2.sass
 * This replaces the legacy ui2.sass with modern SCSS structure
 */
/* UI2 Quick Links - migrated from _quicklinks.sass */
.quickLinkItem {
  position: relative;
  padding: 10px 10px 7px 10px !important;
  border-radius: 3px 3px 0 0;
  min-width: 8%;
  cursor: pointer;
  color: var(--simpro-blue);
  margin-right: 3px;
  max-width: 20%;
  text-align: center;
  display: flex;
}
.quickLinkItem.activeQuickLink {
  background: var(--simpro-white);
  cursor: default;
}
.quickLinkItem:not(.activeQuickLink):hover {
  background: var(--simpro-grey-0);
}
.quickLinkItem:before {
  content: "";
  position: absolute;
  top: 8px;
  left: -2px;
  width: 1px;
  bottom: 8px;
  background-color: var(--simpro-grey-300);
}
.quickLinkItem .companyColourLine {
  position: absolute;
  bottom: 5px;
  left: 15px;
  right: 15px;
  height: 1px;
}
.quickLinkItem .backLink {
  position: absolute;
  top: 5px;
  right: 3px;
}
.quickLinkItem .backLink .backLink:hover {
  color: var(--simpro-red);
}

.quickLinkText {
  display: inline-block;
  flex-grow: 1;
  padding-right: 6px;
  color: var(--simpro-body-text);
}

.quickLinkIcon {
  margin: 2px 5px 0 0;
  font-size: 14px;
}

.closeQuickLink {
  width: 15px;
  height: 15px;
  font-size: 15px;
  border-radius: 50%;
  color: var(--simpro-grey-0);
  background-color: var(--simpro-grey-100);
}
.closeQuickLink:hover {
  background-color: var(--simpro-blue);
}

.quickLinks {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 3px;
  height: 38px;
  padding-left: 12px;
}

.quickLinkAction {
  padding-top: 40px;
}
.quickLinkAction--position {
  margin-left: 15px;
  padding-top: 15px;
  position: absolute;
  font-size: x-large;
  border-top: 1px solid lightgrey;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

#quickLinksTopBar {
  flex-grow: 1;
  min-width: 40%;
}

#createCloseQuicklinkTitle {
  font-weight: bold;
}

/* UI2 System - SCSS Migration
 * Migrated from public/css/ui2/ui2.sass
 * This replaces the legacy ui2.sass with modern SCSS structure
 */
/* UI2 Left Menu - migrated from _leftMenu.sass */
.pageMargin {
  margin: 0 1.04167%;
}

#leftMenu-ui2 {
  box-sizing: border-box;
  position: fixed;
  background-color: var(--simpro-blue);
  z-index: 104;
  height: 100%;
  width: 50px;
  left: 0;
  top: 0;
  transition: width 0.4s;
}
.menuExpanded #leftMenu-ui2 {
  width: 170px;
}
#leftMenu-ui2 *,
#leftMenu-ui2 *:before,
#leftMenu-ui2 *:after {
  box-sizing: inherit;
}

.icon-leftMenu-toggle {
  display: inline-block;
  transition: transform 0.4s;
}
.icon-leftMenu-toggle:before {
  content: "\e912";
  position: relative;
  top: -6px;
  left: 1px;
  color: var(--simpro-white) !important;
  font-size: 40px;
}
.menuExpanded .icon-leftMenu-toggle {
  transform: scaleX(-1);
}
.menuExpanded .icon-leftMenu-toggle:before {
  left: 0;
}
.icon-leftMenu-toggle + .leftMenuItem-detail {
  vertical-align: 22px;
}
.icon-leftMenu-toggle.leftMenuItem-icon {
  left: 5px;
  bottom: 1px;
}

.leftMenu-hideLabel {
  position: relative;
  top: 2px;
  left: 1px;
}

#leftMenuInner-ui2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
#leftMenuInner-ui2 hr {
  border-top: 1px solid var(--simpro-lighter-blue);
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 12px;
}

.leftMenu-logoContainer {
  font-size: 24px;
  height: 40px;
  padding-top: calc((40px - 30px) / 2);
  margin-bottom: 7px;
}

#logoCollapsed {
  opacity: 1;
  display: block;
  text-align: center;
  animation: fademenu 0.5s;
  font-size: 26px;
}
.menuExpanded #logoCollapsed {
  display: none;
}

#logoExpanded {
  height: 30px;
  display: none;
  margin: 0 auto;
  animation: fademenu 0.5s;
}
.menuExpanded #logoExpanded {
  display: block;
}

.leftMenu-itemsList {
  width: 100%;
}

.leftMenuItem {
  display: block;
  height: 42px;
  white-space: nowrap;
  margin-left: 5px;
  padding: 11px 0 31px 3px;
  border-radius: 5px 0 0 5px;
  cursor: pointer;
}
.leftMenuItem .leftMenuItem-parent,
.leftMenuItem a {
  color: var(--simpro-white);
}
.menuClick .leftMenuItem:hover {
  background-color: var(--simpro-dark-blue);
}
.leftMenuItem.selected {
  background-color: var(--simpro-dark-blue);
}
.leftMenuItem.selected .leftMenuItem-icon {
  color: var(--simpro-white);
}
.leftMenuItem.selected .leftMenu-submenu {
  display: flex;
  flex-direction: column;
}
.leftMenuItem:has(span.leftMenu-hideLabel) {
  height: 50px;
}

@keyframes fademenu {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.leftMenu-submenu {
  display: none;
  position: fixed;
  background: var(--simpro-dark-blue);
  left: 50px;
  z-index: 101;
  color: var(--simpro-white);
  transition: left 0.4s;
  cursor: auto;
  border-radius: 0 3px 3px 0;
}
.menuExpanded .leftMenu-submenu {
  left: 170px;
}
.leftMenu-submenu li {
  border-left: 3px solid transparent;
  padding: 0;
  margin-right: 5px;
}
.leftMenu-submenu li.leftSubmenu-small {
  margin: -2px 5px 3px 5px;
  padding: 0 15px;
  font-size: 12px;
  color: var(--simpro-grey-500);
  font-weight: normal;
}

.leftSubmenu-columnContainer {
  display: flex;
  padding-bottom: 3px;
}

.leftSubmenu-column {
  min-width: 165px;
  max-width: 250px;
}

.leftSubmenu-columns-3:nth-of-type(2) {
  min-width: 210px !important;
}

.leftSubmenuItem a {
  display: block;
  cursor: pointer;
  font-size: 14px;
  padding: 7px 15px;
  font-weight: normal;
}
.leftSubmenuItem:hover {
  background-color: var(--simpro-light-blue);
  border-left: 3px solid;
}
.leftSubmenuItem:hover a {
  color: var(--simpro-white) !important;
}
.leftSubmenuItem .tooltip {
  color: var(--simpro-grey-900) !important;
  font-size: 12px !important;
}

.leftMenuItem-icon {
  font-size: 24px;
  position: relative;
  left: 3px;
  color: var(--simpro-lighter-blue);
}

.leftSubmenuItem-icon {
  vertical-align: -2px;
  margin-right: 4px;
}

.leftSubmenuItem-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#leftMenu-toggle-ui2 {
  background-color: var(--simpro-light-blue);
  position: absolute;
  bottom: 0;
}
#leftMenu-toggle-ui2 > li a {
  color: var(--simpro-white);
}
#leftMenu-toggle-ui2 > li:hover {
  background-color: var(--simpro-light-blue);
}
#leftMenu-toggle-ui2 > li.selected {
  background-color: var(--simpro-light-blue);
}

.leftMenuItem-detail {
  font-size: 14px;
  vertical-align: 8px;
  padding-left: 15px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease 0s;
}
.menuExpanded .leftMenuItem-detail {
  transition: opacity 0.4s ease 0.2s;
  opacity: 1;
}

.submenuTitle {
  margin: 5px 5px 0 5px;
  font-size: 16px;
  font-weight: bold;
  padding: 0 15px;
}
.submenuTitle .leftSubmenu-icon {
  font-size: 16px;
}

.leftSubmenu-header {
  margin-left: 10px;
  font-size: 18px;
}

.blueScrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px color-mix(in srgb, var(--simpro-black) 30%, transparent);
  border-radius: 6px;
  background-color: #2980b9;
}

.blueScrollbar::-webkit-scrollbar {
  width: 8px;
  background-color: #2980b9;
}

.blueScrollbar::-webkit-scrollbar-thumb {
  border-radius: 6px;
  -webkit-box-shadow: inset 0 0 6px color-mix(in srgb, var(--simpro-black) 30%, transparent);
  background-color: var(--simpro-lighter-blue);
}

.positionBottom {
  bottom: 0 !important;
}

@media screen and (max-width: 1400px) {
  #leftMenu-toggle-ui2 {
    display: none;
  }
  .menuExpanded #logoCollapsed {
    display: block;
  }
  .menuExpanded #logoExpanded {
    display: none;
  }
  .menuExpanded #leftMenu-ui2 {
    width: 50px;
  }
  .menuExpanded .leftMenu-submenu {
    left: 50px;
  }
  .menuExpanded .leftMenuItem-detail {
    opacity: 0;
  }
}
#leftMenu-items-ui2 .leftMenuItem .divider {
  border-top: 1px solid var(--simpro-lighter-blue);
  width: 95%;
  height: 1px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
}

.left-submenu-addons li {
  border-left: 3px solid transparent;
}
.left-submenu-addons li:hover {
  background-color: #206897;
  border-left-color: #ffdd00;
}

.addon-menu-simpro-payments {
  font-family: "Cocogoose Pro", sans-serif;
  font-weight: 400;
  color: #ffdd00;
  text-transform: uppercase;
  display: flex;
  font-size: 14pt;
  padding-left: 15px;
  gap: 6px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.addon-menu-simpro-payments img {
  width: 80px;
}
.addon-menu-simpro-payments span {
  padding-top: 5px;
}