/* UploadCare Config. Light or dark is the member's choice – Dark.css sets --darkmode,
   and the widgets are light without it */
.bettertools-config {
  /* Better Pricing's green – the success green of the buttons, #14a44d */
  --h-accent: 144;
  --s-accent: 78%;
  --l-accent: 36%;
}
/* End UploadCare Config */
body {
    background-color: hsl(0deg 0% 61.96% / 21%);
}
/* Commission can be turned off on the Settings page, and turning it off is a matter of
   visibility: every piece of commission in the interface – the Commission action on a
   document, the statistics view on the dashboard, the commission tiers menu entry and the
   tiers on a user – carries commissionElement, and this one rule is what takes them off the
   screen. The body wears commissionDisabled while the setting is off (see
   SiteConfigExtension::getCommissionBodyClass), so nothing has to be rendered differently
   and turning commission back on is the same class going away again.
   !important, because some of what it hides is toggled by javascript – the dashboard switch
   takes d-none off the view it opens, and would otherwise put a hidden view back on screen. */
body.commissionDisabled .commissionElement {
  display: none !important;
}
#main-navbar .container-fluid{
  min-height: 42px !important;
}
/* Fix for dropdown corners */
.dropdown-menu>li:last-child .dropdown-item {
  border-top-left-radius: var(--mdb-dropdown-item-border-radius);
  border-top-right-radius: var(--mdb-dropdown-item-border-radius);
  border-bottom-left-radius: var(--mdb-dropdown-item-border-radius);
  border-bottom-right-radius: var(--mdb-dropdown-item-border-radius);
}
.text-lower, .text-lowercase {
  text-transform: lowercase;
}
.bg-body-tertiary{
  background-color: initial !important;
}
.table>:not(caption)>*>* {
  background-color: initial !important; 
}
#main-navbar{
    z-index: 2000;
}
.modal{
    z-index: 10000;
}
.toast-fixed{
    z-index: 13060;
}
.popconfirm-backdrop {
  z-index: 2005;
}
.modal-backdrop {
  z-index: 2006;
}
/* The date picker appends its backdrop and its calendar to the body, so it has to clear
   whatever it was opened from. That used to be the page alone, where 2026/2027 put it over
   the navbar and the modal backdrop – but .modal above is raised to 10000 here, so the first
   picker to live in a modal (the due date in the partial invoice modal) opened behind the
   modal and looked like nothing had happened at all.
   InputFields.init() now appends a picker inside the modal it belongs to, which settles both
   this and the modal's focus trap – but only for a modal with an id to point at, so the
   numbers have to be right for the body as well.
   The order they keep: navbar 2000, modal 10000, the picker over it, and the loading wall
   (13000) and the toasts (13060) over everything – a picker must not cover the wall that
   says the page is busy. */
.datepicker-backdrop{
  z-index: 10026;
}
.datepicker-modal-container{
  z-index: 10027;
}
/* A tooltip is put at the end of the body with MDB's 1080, under the modals raised to 10000
   above – so the tooltip of a button in a modal (the reset of the dashboard settings, say) was
   drawn behind the modal it belongs to. It goes over the modals and their pickers, and still
   under the loading wall and the toasts. */
.tooltip{
  z-index: 10030;
}
/* The same for a popconfirm – the Table Editor's "delete this row?" is put at the end of the body
   as well, and the one of a table in a modal (the extra fields of an option) was behind it */
.popconfirm-popover, .popconfirm-modal{
  z-index: 10028;
}
main{
    margin-top: 68px;
}
.text-bold{
  font-weight: bold;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
/* HomePage */
#promotion {
  position: relative; 
  height: 100vh;
  width: 100%;
}
#promotion::before {    
  content: "";
  background-image: url('../images/promotions/promotion_dk.webp');
  background-size: cover;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.25;
  background-position: center;
  background-repeat: no-repeat;
}
#promotion h1{
  font-family: Helvetica;
  font-weight: bold;
  font-size: 96px;
  line-height: 96px;
}
#promotion h1,
#promotion h2,
#promotion h3,
#promotion h4,
#promotion h5, 
#promotion #logo,
#promotion a {
  position: relative;
}
#promotion #logo{
  max-width: 450px;
  width: 100%;
}
/* Customization */
.toast-success {
  background-color: #4CAF50 !important;
}
.form-control.is-valid, .was-validated .form-control:valid {
  margin-bottom: 0rem;
}
.form-outline .form-control.was-edited.is-valid~.form-notch .form-notch-leading, 
.form-outline .form-control.was-edited.is-valid~.form-notch .form-notch-middle, 
.form-outline .form-control.was-edited.is-valid~.form-notch .form-notch-trailing, 
.was-validated .form-outline .form-control.was-edited:valid~.form-notch .form-notch-leading, 
.was-validated .form-outline .form-control.was-edited:valid~.form-notch .form-notch-middle, 
.was-validated .form-outline .form-control.was-edited:valid~.form-notch .form-notch-trailing {
  border-color: #FF9800;
}
.form-outline .form-control.was-edited.is-valid:focus~.form-notch .form-notch-leading, 
.was-validated .form-outline .form-control.was-edited:valid:focus~.form-notch .form-notch-leading {
  box-shadow: -1px 0 0 0 #FF9800, 0 1px 0 0 #FF9800, 0 -1px 0 0 #FF9800;
}
.form-outline .form-control.was-edited.is-valid:focus~.form-notch .form-notch-middle, 
.was-validated .form-outline .form-control.was-edited:valid:focus~.form-notch .form-notch-middle {
  box-shadow: 0 1px 0 0 #FF9800;
}
.form-outline .form-control.was-edited.is-valid:focus~.form-notch .form-notch-trailing, 
.was-validated .form-outline .form-control.was-edited:valid:focus~.form-notch .form-notch-trailing {
  box-shadow: 1px 0 0 0 #FF9800, 0 -1px 0 0 #FF9800, 0 1px 0 0 #FF9800;
}
.lightbox-gallery {
  --mdb-lightbox-zindex: 11000;
}
.deleteUploadCareImage{
  cursor: pointer;
}
.addition img.customIcon{
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
}
body.no-scroll{
  overflow: hidden;
}
#loadingWall{
  height: 100%;
  width: 100%;
  position: fixed !important;
  z-index: 13000;
  top: 0px;
}
#loadingWall .loading-spinner {
  z-index: 20001;
}
.loading-backdrop{
  opacity: 0.8 !important;
  background-color: rgb(13 7 24) !important;
}
.uploadcareimage:hover{
  cursor: zoom-in;
}
.was-validated .form-outline .form-control.was-edited:valid.active~.form-notch .form-notch-middle{
  border-top:none !important;
}
.form-outline .form-control.form-control-sm.active~.form-label, .form-outline .form-control.form-control-sm:focus~.form-label {
  transform: translateY(-.85rem) translateY(.1rem) scale(.8);
  left: 0.65rem !important;
}
div.table div.ps__rail-y{
  display: none;
}
.dropup .dropdown-toggle:after {
  margin-left: 0px !important;
}
.dropup .dropdown-toggle.hasText:after{
  margin-left: 10px !important;
}
.ps__rail-x{
  display: none !important;
}
.ps .ps__rail-x.ps--clicking, .ps .ps__rail-x:focus, .ps .ps__rail-x:hover, .ps .ps__rail-y.ps--clicking, .ps .ps__rail-y:focus, .ps .ps__rail-y:hover {
  height: 0px !important;
}
.ps__rail-x.ps--clicking .ps__thumb-x, .ps__rail-x:focus>.ps__thumb-x, .ps__rail-x:hover>.ps__thumb-x{
  padding: 2px !important;
}
/*
.dropdown-menu>li:last-child, .dropdown-menu>li:last-child .dropdown-item {
  border-top-left-radius: var(--mdb-dropdown-item-border-radius) !important;
  border-top-right-radius: var(--mdb-dropdown-item-border-radius) !important;
}
*/
.form-outline-sm .autocomplete-loader{
  width: 0.9rem !important;
  height: 0.9rem !important;
}
#datatable-custom .form-check{
  margin-right: 0px !important;
  padding-right: 0px !important;
  width: 22px;
}
#datatable-custom td[data-mdb-field="checkbox"] {
  width: 22px !important;
  padding: 1rem 0px;
}
/*
#datatable-custom th:first-child{
  padding: 1rem 0px !important;
}
*/
.form-check-input:checked:focus:before {
  box-shadow: none !important;
}
.complexCalculationForm #productMenuButton{
  width: 10px;
}
.normalCalculationForm #productMenuButton,
.normalCalculationForm #supplierMenuButton{
  margin-left: 0.25rem !important; 
  margin-top: 0.7rem !important; 
  width: 10px;
}
#CircumferenceBox{
  min-width: 100px;
  min-height: 100px;
  width: 100%;
  height: 100%;
}
.circumferenceBoxCheckBox{
  margin-top: 5px !important;
}
.circumferenceBoxBorder{
  background-color: #232538 !important;
}
#pagination, .pagination{
  font-size: 0.9rem;
}
#RowsAmountButton{
  text-transform: none !important;
}
.iconpicker-holder, #StatusPickerModalSelector, #EmployeeModalSelector{
  max-height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
}
/* The icons in a grid of even columns, so a search which leaves a few of them doesn't spread
   them across the width – see IconPicker.ss */
.iconpicker-box{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  justify-items: center;
}
.iconPickerIcon,
.statusItem,
.statusPickerChangeIcon,
.employeePickerChangeIcon{
  cursor: pointer;
}
/* A disabled icon picker still shows what is saved – it just can't be changed. The javascript
   leaves the listeners off as well (IconPickers.js). A disabled colour field is a disabled
   input, which Coloris doesn't open. */
.iconpicker-holder.disabled{
  pointer-events: none;
  opacity: 0.65;
}
/* The label of a colour field, the size and colour a field's label has once it sits in the
   notch of the field: MDB draws that label at 80% of its size (scale(0.8)), which is 1rem for
   the standard and the large fields and .775rem for the small ones – see ColorPicker.ss */
.bpColorFieldLabel{
  display: block;
  font-size: 0.8rem;
  color: var(--mdb-form-control-label-color);
  margin-bottom: 0.25rem;
}
.bpColorFieldLabel.bpColorFieldLabelSmall{
  font-size: 0.62rem;
}
/* How the price factors make a price, in the price information of both calculators – see
   PriceFactorHelper::breakdown. Rows as tight as lines of text, and the numbers lined up on
   the right. */
.priceFactorBreakdownTable{
  margin-top: 0.25rem;
}
.priceFactorBreakdownTable td{
  padding: 0.1rem 0.25rem;
  background-color: transparent;
  vertical-align: top;
}
.priceFactorBreakdownTable td:first-child{
  padding-left: 0;
}
.priceFactorBreakdownTable td.text-end{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.priceFactorBreakdownTable tr.border-top td{
  padding-top: 0.3rem;
}
/* The picker Coloris opens is put at the end of the body with a z-index of 1000, which is under
   MDB's modals (10000 in MDB 9) – the colour field of the additions guide opened it behind the
   guide. It is put above them, here and on the element itself (see ColorPickers.js). */
#clr-picker{
  z-index: 10100;
}
/* A colour field is as wide as any other field. Coloris wraps it in .clr-field, which is an
   inline-block of its own width – see ColorPickers.js */
.clr-field{
  display: block;
  width: 100%;
}
/* The swatch fills the left end of the field – no gap to the edge, as tall as the field and
   with the field's own rounded corners on its left */
.clr-field input.bpColorField{
  width: 100%;
  padding-left: 2rem;
}
.clr-field button{
  left: 0;
  right: auto;
  width: 2.5rem;
  height: 100%;
  border-radius: var(--mdb-border-radius, 0.25rem) 0 0 var(--mdb-border-radius, 0.25rem);
}
.statusItemHolder {
  width: 100px; 
}
.modelStatusItem{
  width: 30px !important;
  height: 30px !important;
}
/* The employee icon on the edit page is the same circle as the status icon, but it has no
   colour of its own to fill it with – who is responsible is read from the tooltip, not from
   a colour – so it uses the theme primary. The muted variant is nobody assigned yet. */
.modelEmployeeItem{
  width: 30px !important;
  height: 30px !important;
  background-color: var(--mdb-primary);
}
.modelEmployeeItem.noEmployees{
  background-color: var(--mdb-secondary);
}
.statusItem{
  width: 65px !important;
  height: 65px !important;
  border: 1px solid transparent; /* Prevent shift when hovered */
}
#salesPriceMenuButton{
  margin-top: 0.7rem !important;
}
.toast-warning {
    background-color: #FF9800;
    color: var(--mdb-warning-text-emphasis);
    border-color: #e58a04;
}
@media only screen and (min-device-width: 768px) {
  .disabled-scroll.replace-scrollbar {
      --mdb-lightbox-disabled-scroll-media-padding-right: 0px;
  }
}
@media only screen and (max-device-width: 768px) {
  .statusItemHolder {
    width: 65px;
    font-size: 0.8rem; 
  }
  #datatable-custom td:first-child {
    width: initial !important;
  }
}

/* WYSIWYG rich text editor (email body fields) – see functions/Wysiwyg.js */
.wysiwygField {
  margin-bottom: 1rem;
}
.wysiwygToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border: 1px solid #bdbdbd;
  border-bottom: none;
  border-radius: 0.25rem 0.25rem 0 0;
  background-color: rgba(255, 255, 255, 0.04);
}
.wysiwygButton {
  border: none;
  background: transparent;
  color: inherit;
  width: 30px;
  height: 30px;
  border-radius: 0.25rem;
  cursor: pointer;
  line-height: 1;
}
.wysiwygButton:hover {
  background-color: rgba(255, 255, 255, 0.12);
}
.wysiwygEditor {
  min-height: 140px;
  max-height: 400px;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid #bdbdbd;
  border-radius: 0 0 0.25rem 0.25rem;
  outline: none;
}
.wysiwygEditor p {
  margin: 0 0 0.5rem 0;
}
.wysiwygEditor a {
  color: var(--contrast-color-light, #15a44d);
}
.wysiwygLabel {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* A document count on the dashboard – in the commission blocks, in the revenue table and in
   the notes under the revenue headlines – is a link which downloads the list of exactly the
   documents that number was added up from (see DocumentListExportHelper).
   It sits inside running text, in a big card value and in a table cell, so it wears whatever
   it stands in rather than a button's own size and weight: only the underline says it is a
   link. Colour is never the thing which marks it, so it keeps the ink around it and moves to
   the contrast colour on hover, where a pointer is already saying the same thing. */
.documentsLink{
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  vertical-align: baseline;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.documentsLink:hover,
.documentsLink:focus-visible{
  color: var(--contrast-color-light, #15a44d);
  text-decoration: underline;
}

/* The little commission chart on the dashboard statistics (DashboardCommissions.ss).
   One series, so one colour – the bars differ in height, not in hue. Every bar carries its
   own value above it, so nothing is read off the colour alone. */
.statisticsChartPlot,
.statisticsChartAxis{
  display: flex;
  gap: 1.5rem;
}
.statisticsChartPlot{
  align-items: flex-end;
  /* The axis the bars stand on. Recessive: it orients the eye, it isn't data. */
  border-bottom: 1px solid var(--bp-chart-baseline);
}
.statisticsChartAxis{
  padding-top: 0.5rem;
}
.statisticsChartColumn,
.statisticsChartLabel{
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The height a bar is measured against. Deliberately not filled: a shaded track behind a
   part-height bar reads as a second stacked segment, which is a different chart. */
.statisticsChartTrack{
  height: 110px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.statisticsChartBar{
  /* Thin marks – three bars stretched across the card read as blocks, not as a chart */
  width: 100%;
  max-width: 64px;
  height: 0;
  background-color: var(--bp-chart-bar);
  /* Rounded data-end, square where it meets the axis */
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}
.statisticsChartValue{
  /* The value wears text ink, not the series colour */
  color: var(--bp-card-value);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 575.98px){
  .statisticsChartPlot,
  .statisticsChartAxis{
    gap: 0.75rem;
  }
  .statisticsChartTrack{
    height: 80px;
  }
  .statisticsChartBar{
    max-width: 44px;
  }
  /* A six figure amount still has to fit the column on a phone rather than trailing off
     into an ellipsis */
  .statisticsChartValue{
    font-size: 0.8rem;
  }
}

/* The revenue chart on the dashboard revenue view (DashboardRevenue.ss). Each bar is one
   month's revenue, split into the margin it left and what it cost to make – the two segments
   add up to the bar, so this is a part of a whole and not two scales. Two series, so the
   legend names them, the hover names them again, and the table below carries every number in
   text. Same geometry as the commission chart above it: the two sit in the same dashboard. */
.revenueChartPlot,
.revenueChartAxis{
  display: flex;
  gap: 1.5rem;
}
.revenueChartPlot{
  align-items: flex-end;
  /* The axis the bars stand on. Recessive: it orients the eye, it isn't data. */
  border-bottom: 1px solid var(--bp-chart-baseline);
}
.revenueChartAxis{
  padding-top: 0.5rem;
}
.revenueChartColumn,
.revenueChartLabel{
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The height a bar is measured against. Deliberately not filled – a shaded track behind a
   part-height bar reads as a third segment, which is a different chart. */
.revenueChartTrack{
  height: 110px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.revenueChartBar{
  /* Thin marks – three bars stretched across the card read as blocks, not as a chart */
  width: 100%;
  max-width: 64px;
  height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: height 0.3s ease;
}
.revenueChartCost,
.revenueChartMargin{
  width: 100%;
  transition: height 0.3s ease;
}
.revenueChartCost{
  background-color: var(--bp-chart-bar-secondary);
  /* Rounded data-end, square where the two segments meet */
  border-radius: 4px 4px 0 0;
  /* The 2px the segments are held apart by lets the card show between them, so the split
     reads as two marks rather than one two-tone block – transparent, so it needs no surface
     colour of its own and follows the card into dark mode */
  border-bottom: 2px solid transparent;
  background-clip: padding-box;
}
.revenueChartMargin{
  /* The margin is what is kept, so it stands on the axis */
  background-color: var(--bp-chart-bar);
}
.revenueChartValue{
  /* The value wears text ink, not the series colour */
  color: var(--bp-card-value);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Identity is never colour alone: the swatch always travels with its name */
.revenueChartSwatch{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 0.4rem;
  vertical-align: baseline;
}
.revenueChartSwatchMargin{
  background-color: var(--bp-chart-bar);
}
.revenueChartSwatchCost{
  background-color: var(--bp-chart-bar-secondary);
}
@media (max-width: 575.98px){
  .revenueChartPlot,
  .revenueChartAxis{
    gap: 0.75rem;
  }
  .revenueChartTrack{
    height: 80px;
  }
  .revenueChartBar{
    max-width: 44px;
  }
  /* A six figure amount still has to fit the column on a phone rather than trailing off
     into an ellipsis */
  .revenueChartValue{
    font-size: 0.8rem;
  }
}

/* The notification of a price table AI analysis running in the background */
.aiImportJobWatcher{
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    width: 330px;
    max-width: calc(100vw - 2rem);
    z-index: 1040;
}

/* The edit and delete buttons of an MDB Table Editor row – and the save and discard buttons
   while the row is edited – sit at the right edge of the table, in every table editor (see
   PatternEditor.js). The Table Editor draws them in the last cell without saying anything
   about its alignment. */
.table-editor tbody td:last-child:has(> .edit-button, > .delete-button, > .popconfirm-toggle, > .save-button, > .discard-button){
    text-align: right;
    white-space: nowrap;
}

/* An employee as a chip – in the employee filter (EmployeeFilterDropdown.ss) and the employee
   picker (Modals.ss): the photo, the name and the checkbox in a row. The name wraps onto a
   second line rather than scrolling, and the photo is a 32px square whatever its shape. */
.employeeChip{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: auto;
  min-height: 44px;
  padding: 6px 10px;
  cursor: pointer;
}
.employeeChip .employeeChipPhoto{
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0;
  float: none;
  object-fit: cover;
}
.employeeChip .employeeChipNoPhoto{
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}
.employeeChip .employeeChipName{
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}
.employeeChip .form-check{
  flex: 0 0 auto;
  padding-left: 0;
}
/* The employee filter's dropdown: as wide as a name, and scrolling – up and down only – when
   there are more employees than there is room for */
.employeeFilterMenu{
  width: 280px;
  max-width: calc(100vw - 32px);
}
#EmployeeFilterDropdownMenu{
  max-height: 360px;
  overflow-x: hidden;
  overflow-y: auto;
}
/* The panes of the tabs on an edit form (Tabs.ss) sit in a frame of their own – a surface a
   step off the card, with room inside it. The colours are the theme's: Light.css and Dark.css */
.bpTabsContent{
  background-color: var(--bp-tabs-pane-bg);
  border: 1px solid var(--bp-tabs-pane-border);
  border-radius: 0.5rem;
  padding: 1.25rem;
}
/* The button in the header of a row action's column, which does the action to every row at once
   (HeaderActionMethod – see ModelEdit.js). The rows' buttons are white on the row's colour; the
   header has no colour of its own, so this one takes the header's text colour, in either theme */
.actionHeaderButton{
  color: inherit;
}
.actionHeaderButton:hover,
.actionHeaderButton:focus{
  color: inherit;
  background-color: rgb(128 128 128 / 0.15);
}
/* The actions dropdown at the top of a document (EditActionsDropdown.ss): only the three dots,
   no arrow, and Create as a submenu. The dropdown is the first button of the header, so the
   submenu has room to open to the right of it – on hover with a mouse, on a click everywhere
   (ModelEdit.js) */
.noCaret::after{
  display: none !important;
}
.editActionsSubmenu{
  position: relative;
}
.editActionsSubmenuToggle{
  display: flex;
  align-items: center;
}
.editActionsSubmenuArrow{
  margin-left: auto;
  padding-left: 1rem;
}
.editActionsSubmenuMenu{
  top: -0.5rem;
  left: 100%;
  right: auto;
  margin-left: 0.125rem;
}
@media (hover: hover) and (min-width: 576px){
  .editActionsSubmenu:hover > .editActionsSubmenuMenu{
    display: block;
  }
}
/* On a phone there is no room beside the menu, so the submenu opens under Create instead */
@media (max-width: 575.98px){
  .editActionsSubmenuMenu{
    position: static;
    box-shadow: none;
    margin: 0;
    padding-top: 0;
    padding-left: 1rem;
  }
  .editActionsSubmenuArrow{
    transform: rotate(90deg);
  }
}
/* The buttons in the header of an edit page (ModelEdit.ss) on a phone. In one line they are
   squeezed until the save button breaks in two, so each group gets a line of its own – the
   tools (reload, the actions, the calendar) above, what is done to the item (duplicate,
   delete, save) under them – on a document the actions, reload, the document and the
   calendar above, and save and delete under them – with the buttons sharing the line evenly, and save a double share */
@media (max-width: 575.98px){
  .modelEditHeaderButtons{
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem;
  }
  .modelEditHeaderGroup{
    width: 100%;
    gap: 0.5rem;
  }
  .modelEditHeaderGroup > *{
    flex: 1 1 0;
    min-width: 0;
    margin-left: 0 !important;
  }
  .modelEditHeaderGroup > .btn-group{
    flex-grow: 2;
  }
  .modelEditHeaderGroup > .btn-group > .save{
    flex: 1 1 auto;
    white-space: nowrap;
  }
  .modelEditHeaderGroup > .dropdown > .btn{
    width: 100%;
  }
}

/* The status and the employee fields on a document, each framed as a box of its own
   (StatusField.ss, EmployeeField.ss) – the field and its pencil on one line inside it */
.pickerFieldBox {
  border: 1px solid var(--mdb-border-color, #e0e0e0);
  border-radius: 0.5rem;
  padding: 0.4rem 0.75rem;
  min-height: 3.25rem;
}

.pickerFieldBox .statusPickerChangeIcon,
.pickerFieldBox .employeePickerChangeIcon {
  cursor: pointer;
  padding: 0.25rem;
}

/* The totals of a document on its edit page (TotalField.ss), framed the same way as the status
   and the employee fields (.pickerFieldBox) */
.totalFieldBox {
  border: 1px solid var(--mdb-border-color, #e0e0e0);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}
/* The price group of a curtain priced by the metre says nothing, so the pattern editor hides its
   column – the third: code, description, price group, price. Hidden, not taken out, so the
   values are kept when the calculation type is changed back (PatternEditor.js) */
.patternEditorHidePriceGroup .patternEditorTable th:nth-child(3),
.patternEditorHidePriceGroup .patternEditorTable td:nth-child(3){
    display: none;
}
/* And the price of a pattern on a product priced from a price table or a square metre table –
   the table is the price – the fourth column */
.patternEditorHidePrice .patternEditorTable th:nth-child(4),
.patternEditorHidePrice .patternEditorTable td:nth-child(4){
    display: none;
}
/* A rule's empty value, added after the product was saved, is invalid on a validated form. MDB
   keeps a margin under an invalid field for its feedback, which the rules editor has none of –
   inside the form-outline it made the field taller than its row. See AdditionRules.js */
.additionRules .form-control.is-invalid, .was-validated .additionRules .form-control:invalid {
  margin-bottom: 0;
}
/* A grouped product's internal instructions, under its lines in the lines table and in the read
   view of a document – the line breaks the user typed are kept. See docs/internalinstructions.md */
.internalInstructionsText {
  white-space: pre-line;
}
/* The text of the extra fields of an option, under the description of its line in the lines
   table and in the read view of a document – the line breaks of the option's text are kept. See
   ProductOptionHelper::markOptionExtraTexts and docs/productoptions.md */
.optionExtraText, .documentReadViewOptionExtraText {
  white-space: pre-line;
}