/* UploadCare Config */
.bettertools-config {
  --darkmode: 1;
  --h-accent: 274;
  --s-accent: 100%;
  --l-accent: 61%;
}
/* End UploadCare Config */
body {
    background-color: hsl(0deg 0% 61.96% / 21%);
}
/* 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;
}
.datepicker-backdrop{
  z-index: 2026;
}
.datepicker-modal-container{
  z-index: 2027;
}
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: scroll;
}
.iconPickerIcon,
.statusItem,
.statusPickerChangeIcon,
.employeePickerChangeIcon{
  cursor: pointer;
}
/* A disabled colour or icon picker still shows what is saved – it just can't be changed.
   The javascript leaves the listeners off as well (ColorPickers.js / IconPickers.js). */
.color-picker.disabled,
.iconpicker-holder.disabled{
  pointer-events: none;
  opacity: 0.65;
}
.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:focus {
  border-color: var(--contrast-color-light, #15a44d);
  box-shadow: inset 0 0 0 1px var(--contrast-color-light, #15a44d);
}
.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;
  }
}