@font-face {
  font-family: Ubuntu Regular;
  font-style: normal;
  src: local(), url('fonts/Ubuntu/Ubuntu-Regular.ttf') format('truetype');
}

@font-face {
  font-family: Ubuntu Medium;
  font-style: normal;
  src: local(), url('fonts/Ubuntu/Ubuntu-Medium.ttf') format('truetype');
}

*, *:before, *:after {
  box-sizing: inherit;
}

html {
  font-size: 16px;
  box-sizing: border-box;
  height: 100%;
}

body {
  line-height: 1.5;
  font-family: 'Ubuntu Regular', sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  font-size: 1rem;
  background-color: #284457;
  color: var(--color-text-primary);
}

strong, b, h1, h2, h3, h4, h5, h6 {
  font-family: 'Ubuntu Medium', sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

@media (hover: hover) {

  
  
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
*::-webkit-scrollbar-track {
    background: #182934;
  }
  
*::-webkit-scrollbar-thumb {
    background: var(--color-text-secondary);
  }
  
*::-webkit-scrollbar-thumb:hover {
    background: #696f76;
  }

}

:root {
  --font-size-label: 0.8rem;
  --space-xs: 0.125rem;
  --font-size-small: 0.875rem;
  --label-margin-top: 0.3rem;
  --color-interactive-hover: #113f5b;
  --border-width-thin: 1px;
  --space-md: 0.375rem;
  --font-size-icon: 1rem;
  --mobile-breakpoint: 600px;
  --space-lg: 0.5rem;
  --color-bg-overlay: #FFFFFF;
  --border-width-default: 1px;
  --space-xl: 0.75rem;
  --border-radius-default: 3px;
  --object-content-gap: 0.25rem;
  --space-sm: 0.25rem;
  --label-margin-bottom: 0.03rem;
  --color-interactive-success: #00D7AF;
  --line-height-base: 1.3;
  --color-text-inverse: #000000;
  --color-interactive-primary: #092130;
  --color-border-default: #828890;
  --color-border-focus: #00D7AF;
  --color-border-danger: #FF4D4D;
  --border-radius-large: 4px;
  --color-bg-primary: #092130;
  --line-height-label: 1.2;
  --object-padding-x: 0.5rem;
  --color-bg-secondary: #1D3343;
  --color-bg-surface: #3A4E5E;
  --border-width-thick: 2px;
  --sidebar-width: 275px;
  --color-text-secondary: #828890;
  --color-text-muted: #828890b3;
  --object-padding-y: 0.1rem;
  --color-interactive-danger: #FF4D4D;
  --value-margin-bottom: 0.25rem;
  --color-text-primary: #F5F5F5;
  --line-height-compact: 1.1;
  --object-border-width: 2px;
  --font-size-base: 1rem;
  --color-border-dark: #1D3343;
  --border-radius-small: 2px;
  --border-style-default: solid;
}

#app {
  right: 0;
  top: 0;
  grid-template-rows: 1fr;
  touch-action: none;
  position: fixed;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  bottom: 0;
  left: 0;
}

#app:has(.route-planner-feed-distribution) {
  grid-template-columns: auto 1fr;
}

#app #designer {
  height: 100vh;
  padding: 1.0rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

#app #designer .design {
  flex: 1 1 auto;
  min-height: 0;
}

#app .b {
  font-family: 'Ubuntu Medium', sans-serif;
}

:root {
  --header-color: var(--color-text-primary);
  --value-label-color: var(--color-text-primary);
  --value-color: var(--color-interactive-success);
}

#app .fa-svg-icon {
  width: 1em;
  height: 1em;
}

#app .product-type-icons {
  display: inline-flex;
  align-items: center;
  min-width: 1.5em;
  margin-right: 0.25em;
  gap: 0.125em;
}

#app .header {
  color: var(--header-color);
  font-weight: bold;
  margin-bottom: 0.25rem;
}

#app kbd {
  line-height: 1;
  font-family: 'Ubuntu Medium', sans-serif;
  border: var(--border-style-default) var(--border-width-default) var(--color-border-default);
  text-transform: none;
  vertical-align: middle;
  padding: 0.125rem 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  font-size: 0.875rem;
  background-color: var(--color-bg-surface);
  border-radius: var(--border-radius-small);
  display: inline-block;
  color: var(--color-text-primary);
}

#app .hint {
  color: var(--color-interactive-success);
  font-size: var(--font-size-small);
}

#app .hint kbd {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0.0625rem 0.375rem;
}

#app .value-label {
  color: var(--value-label-color);
}

#app .value {
  color: var(--value-color);
}

#app .location-input-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 400px;
  width: 100%;
}

#app .location-input-form input {
  font-size: var(--font-size-base);
  padding: var(--space-sm);
  border: var(--border-style-default) var(--border-width-default) var(--color-border-default);
  border-radius: var(--border-radius-small);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

#app .location-input-form input::placeholder {
  color: var(--color-text-secondary);
}

#app .location-input-form input:focus-visible {
  outline: none;
}

#app .location-input-form button {
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  border-radius: var(--border-radius-small);
  font-size: var(--font-size-base);
  background-color: var(--color-interactive-success);
  color: var(--color-text-inverse);
  border: none;
}

#app .location-input-form button:hover {
  opacity: 0.8;
}

#app .landing-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  padding-top: 6rem;
  min-height: 100vh;
  width: 100vw;
}

#app .landing-page img {
  max-width: 400px;
  width: 80%;
  height: auto;
}

#app .landing-page .content {
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 400px;
  width: 100%;
}

#app .landing-page .content h1 {
  margin: 0.5rem 0;
}

form {
  cursor: default;
}

.form {
  gap: var(--space-xs);
  border: var(--border-style-default) var(--border-width-default) var(--color-border-default);
  padding: var(--space-sm);
  flex-direction: column;
  position: absolute;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  display: flex;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.form label {
  display: block;
  color: var(--color-text-primary);
}

.form input {
  font-size: var(--font-size-base);
  padding: var(--space-xs);
  border: var(--border-style-default) var(--border-width-default) var(--color-border-default);
  border-radius: var(--border-radius-small);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.form input::placeholder {
  color: var(--color-text-secondary);
  font-style: italic;
  font-size: var(--font-size-small);
  opacity: 0.8;
}

.form .hinted-input {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.form .hinted-input input {
  width: 2.2rem;
}

.form .hinted-input .hint {
  color: var(--color-text-secondary);
  font-style: italic;
  font-size: var(--font-size-small);
}

.form .form-buttons {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

.form .form-buttons button {
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  border-radius: var(--border-radius-small);
  font-size: var(--font-size-base);
}

.form .form-buttons button.primary {
  background-color: var(--color-interactive-success);
  color: var(--color-text-inverse);
  border: none;
}

.form .form-buttons button.primary:hover {
  background-color: var(--color-interactive-hover);
  opacity: 0.9;
}

.form .form-buttons button.secondary {
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
  border: var(--border-style-default) var(--border-width-default) var(--color-border-default);
}

.form .form-buttons button.secondary:hover {
  background-color: var(--color-bg-secondary);
}

.select select {
  font-size: var(--font-size-base);
  padding: var(--space-xs);
  border: var(--border-style-default) var(--border-width-default) var(--color-border-default);
  border-radius: var(--border-radius-default);
  height: 1.8rem;
  box-sizing: border-box;
  width: 100%;
}

.select.colored select {
  color: var(--color-text-inverse);
}

#app .sidebar {
  width: 100%;
  gap: var(--space-lg);
  height: 100vh;
  overflow-y: auto;
  padding: var(--space-lg);
  flex-direction: row;
  border-right: var(--border-style-default) var(--border-width-thick) var(--color-border-dark);
  z-index: 100;
  flex-wrap: wrap;
  align-content: start;
  background-color: var(--color-bg-primary);
  display: flex;
  color: var(--color-text-primary);
}

#app .sidebar .sidebar-content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: start;
  gap: var(--space-lg);
}

#app .sidebar .hide-on-screen {
  display: none;
}

#app .sidebar .fleet-info {
  width: 100%;
}

#app .sidebar .fleet-info-edit {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-lg);
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-lg);
}

#app .sidebar .fleet-info-edit .form-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

#app .sidebar .fleet-info-edit .form-item .value-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: bold;
  margin-bottom: var(--space-xs);
  width: 100%;
  justify-content: space-between;
}

#app .sidebar .fleet-info-edit .form-item .value-label button {
  color: var(--color-interactive-success);
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

#app .sidebar .fleet-info-edit .form-item .value-label button:hover {
  opacity: 0.8;
}

#app .sidebar .fleet-info-edit .form-item .form-field {
  width: 100%;
}

#app .sidebar .fleet-info-edit .form-item .form-field-description {
  padding-top: 12px;
}

#app .sidebar .fleet-info-edit .form-item .form-field-description h3 {
  font-size: var(:--font-size-label);
  margin: 0;
}

#app .sidebar .fleet-info-edit .form-item input {
  box-sizing: border-box;
  padding: var(--space-sm);
  border: var(--border-style-default) var(--border-width-default) var(--color-border-default);
  border-radius: var(--border-radius-large);
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

#app .sidebar .fleet-info-edit .form-item input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0.25rem var(--color-border-focus);
}

#app .sidebar .fleet-info-edit .form-item textarea {
  border: var(--border-style-default) var(--border-width-default) var(--color-border-default);
  padding: var(--space-sm);
  min-height: 4rem;
  font-size: var(--font-size-base);
  background-color: var(--color-bg-surface);
  border-radius: var(--border-radius-large);
  box-sizing: border-box;
  resize: vertical;
  color: var(--color-text-primary);
}

#app .sidebar .fleet-info-edit .form-item textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0.25rem var(--color-border-focus);
}

#app .sidebar .title {
  display: flex;
  gap: var(--space-lg);
  line-height: 1.5rem;
  justify-content: center;
}

#app .sidebar .title .icon {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  text-align: center;
}

#app .sidebar .title .icon .fas {
  font-size: var(--font-size-icon);
  line-height: 1.2rem;
}

#app .sidebar .library {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: start;
  gap: var(--space-sm);
}

#app .sidebar .library .library-item, #app .sidebar .library .design-object-proxy-item {
  justify-content: center;
  align-items: start;
  padding: 0.5rem 1.5rem;
  flex-direction: column;
  cursor: default;
  border-radius: var(--border-radius-large);
  display: flex;
  flex: 0 0 100%;
  color: var(--color-text-primary);
}

#app .sidebar .library .library-item {
  border: var(--border-style-default) var(--border-width-default) var(--color-border-default);
  background-color: var(--color-bg-surface);
}

#app .sidebar .library .library-item.draggable {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  cursor: grab;
}

#app .sidebar .library .design-object-proxy-item {
  width: calc(var(--sidebar-width) - (var(--space-lg) * 2));
  cursor: default;
  pointer-events: none;
  z-index: 9999;
  border: dashed var(--border-width-default) var(--color-border-focus);
  background-color: rgba(from var(--color-bg-secondary) r g b / 0.75);
}

#app #designer .fleet-selector {
  border-bottom: var(--border-style-default) var(--border-width-default) var(--color-border-default);
  margin-bottom: 1rem;
}

#app #designer .fleet-selector .fleet-select {
  padding: 0.5rem 1rem;
}

#app .dev-panel {
  padding-top: 1rem;
  padding-botton: 1rem;
}

#app .dev-panel .dev-panel-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#app .dev-panel .dev-panel-content .setting {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#app .dev-panel .dev-panel-content .language-switch {
  display: flex;
  gap: 1rem;
}

@keyframes shimmer {

0% {
    left: -100%;
  }
  
100% {
    left: 100%;
  }

}

#app .sidebar.loading .fleet-info {
  pointer-events: none;
}

#app .sidebar.loading .fleet-info .value {
  color: transparent;
  background-color: var(--color-bg-secondary);
}

#app .sidebar.loading .fleet-info .indicate-loading {
  background-color: var(--color-bg-secondary);
  position: relative;
  overflow: hidden;
}

#app .sidebar.loading .fleet-info .indicate-loading::before {
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  animation: shimmer 1.5s infinite;
  z-index: 1;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  left: -100%;
}

#app .sidebar.readonly .fleet-info button {
  display: none !important;
}

#app .sidebar.readonly .fleet-info input {
  display: none;
}

#app .sidebar.readonly .fleet-info .readme {
  border: var(--border-style-default) var(--border-width-thick) var(--color-border-dark);
  border-radius: 4px;
  background-color: var(--color-bg-secondary);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
  white-space: pre-wrap;
}

#app .sidebar.readonly .library {
  pointer-events: none;
  user-select: none;
}

#app .sidebar.readonly .library .library-item.draggable {
  background-color: var(--color-bg-surface);
  cursor: default;
}

#app .sidebar.responsive-mode {
  max-height: 15svh;
  transition: max-height 0.3s ease;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0;
}

#app .sidebar.responsive-mode.expanded {
  max-height: 100%;
}

#app .sidebar.responsive-mode .sidebar-expand-toggle-row {
  background-color: var(--color-bg-primary);
  border-bottom: var(--border-style-default) var(--border-width-default) var(--color-border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#app .sidebar.responsive-mode .sidebar-expand-toggle-row .sidebar-expand-toggle {
  padding: var(--space-md);
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(0deg);
}

#app .sidebar.responsive-mode .sidebar-expand-toggle-row .sidebar-expand-toggle svg {
  stroke: var(--color-interactive-success);
}

#app .sidebar.responsive-mode .sidebar-expand-toggle-row .sidebar-expand-toggle:active {
  opacity: 0.7;
}

#app .sidebar.responsive-mode .sidebar-content {
  overflow-y: auto;
  padding: var(--space-lg);
}

#app .sidebar.responsive-mode.expanded .sidebar-expand-toggle {
  transform: rotate(180deg);
}

#app .sidebar:has(.route-planner-feed-distribution) {
  width: fit-content;
  flex-direction: column;
  flex-wrap: nowrap;
}

#app .sidebar:has(.route-planner-feed-distribution) .fleet-info {
  width: auto;
}

#app .sidebar .route-planner-feed-distribution {
  width: max-content;
  margin: 1em 0;
}

#app .sidebar .route-planner-feed-distribution .header-container {
  display: flex;
  flex-direction: row;
  gap: 1em;
  margin-bottom: 1em;
}

#app .sidebar .route-planner-feed-distribution .header-container .header {
  flex: 0 0 auto;
}

#app .sidebar .route-planner-feed-distribution .header-container .read-receipt {
  flex: 1 1 auto;
  text-align: right;
}

#app .sidebar .route-planner-feed-distribution .header-container .read-receipt .confirmed {
  color: var(--color-interactive-success);
}

#app .sidebar .route-planner-feed-distribution .header-container .read-receipt .not-confirmed {
  color: var(--color-status-error);
}

#app .sidebar .route-planner-feed-distribution .header-container .read-receipt .not-confirmed .button-container {
  margin-top: 0.5em;
}

#app .sidebar .route-planner-feed-distribution .header-container .read-receipt .not-confirmed .button-container .confirm-button {
  padding: 0.5em 1em;
  font-size: 0.9em;
  font-weight: bold;
  color: #1a1a1a;
  background-color: var(--color-interactive-success);
  border: none;
  border-radius: var(--border-radius-large);
  cursor: pointer;
}

#app .sidebar .route-planner-feed-distribution .header-container .read-receipt .not-confirmed .button-container .confirm-button:hover {
  opacity: 0.85;
}

#app .sidebar .route-planner-feed-distribution .order-feed-distribution {
  margin-top: 1em;
  display: grid;
  grid-template-columns: min-content;
}

#app .sidebar .route-planner-feed-distribution .order-feed-distribution & > :not(:first-child) {
  margin-top: 0.6em;
}

#app .sidebar .route-planner-feed-distribution .order-feed-distribution .order-title {
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
}

#app .sidebar .route-planner-feed-distribution .ordered-amounts-table {
  width: auto;
  border-collapse: collapse;
}

#app .sidebar .route-planner-feed-distribution .ordered-amounts-table td {
  padding: 0.25em 0.5em;
  vertical-align: middle;
  white-space: nowrap;
}

#app .sidebar .route-planner-feed-distribution .ordered-amounts-table .product {
  display: flex;
  align-items: center;
}

#app .sidebar .route-planner-feed-distribution .ordered-amounts-table .color-indicator {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
  flex-shrink: 0;
}

#app .sidebar .route-planner-feed-distribution .ordered-amounts-table .right-align {
  text-align: right;
}

#app .sidebar .route-planner-feed-distribution .feed-distribution-table {
  border-collapse: collapse;
  width: auto;
}

#app .sidebar .route-planner-feed-distribution .feed-distribution-table tr {
  border-bottom: 1px solid var(--color-border-default);
}

#app .sidebar .route-planner-feed-distribution .feed-distribution-table th, #app .sidebar .route-planner-feed-distribution .feed-distribution-table td {
  padding: 0.25em 0.5em;
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
}

#app .sidebar .route-planner-feed-distribution .feed-distribution-table .product {
  display: flex;
  align-items: center;
}

#app .sidebar .route-planner-feed-distribution .feed-distribution-table .color-indicator {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.7em;
  flex-shrink: 0;
}

#app .sidebar .route-planner-feed-distribution .feed-distribution-table .right-align {
  text-align: right;
}

#app .sidebar .route-planner-feed-distribution .fleet-silo-distribution {
  margin-top: 0em;
}

#app .sidebar .route-planner-feed-distribution .fleet-silo-distribution .fleet-name {
  margin-bottom: 0.25em;
}

#app .sidebar .route-planner-feed-distribution .bag-distribution {
  margin-top: 0.5em;
}

#app .sidebar .route-planner-feed-distribution .comment {
  margin-top: 0.5em;
}

#app .sidebar .route-planner-feed-distribution .comment .comment-content {
  white-space: pre-wrap;
}

#app .sidebar .route-planner-feed-distribution .error-details {
  max-width: 400px;
  border: 2px solid var(--color-status-error);
  padding: 0.5em;
  white-space: pre-wrap;
  margin-top: 0.5em;
  font-size: 0.85em;
  background-color: #fff;
  border-radius: var(--border-radius-large);
  color: #000;
}

#app .sidebar .route-planner-feed-distribution .last-edited-by {
  font-style: italic;
  margin-top: 0.2em;
}

#app .sidebar .route-planner-feed-distribution .contact-phones {
  margin-top: 1em;
}

#app .sidebar .route-planner-feed-distribution .no-distribution {
  font-weight: bold;
}

#app .sidebar .route-planner-feed-distribution .color-red {
  color: var(--color-status-error);
}

#app .sidebar .route-planner-feed-distribution .color-green {
  color: var(--color-interactive-success);
}

#app .design .augmented-layout {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

#app .design .augmented-layout .augmented-corner, #app .design .augmented-layout .augmented-edge {
  position: absolute;
  background: #33333311;
  border: var(--border-style-default) var(--border-width-default) var(--color-border-default);
  padding: 2px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

#app .design .augmented-layout .augmented-corner.top-left {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

#app .design .augmented-layout .augmented-corner.top-right {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

#app .design .augmented-layout .augmented-corner.bottom-right {
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
}

#app .design .augmented-layout .augmented-corner.bottom-left {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
}

#app .design .augmented-layout .augmented-edge.top {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

#app .design .augmented-layout .augmented-edge.right {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%) rotate(90deg);
}

#app .design .augmented-layout .augmented-edge.bottom {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

#app .design .augmented-layout .augmented-edge.left {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}

#app .design:not(.has-drag-active) .augmented-layout {
  transition: all 0.25s ease;
}

#app .workarea {
  background: repeating-linear-gradient(45deg, #1d334380, #1d334380 1px, transparent 1px, transparent 7px), #092130;
}

#app .loading, #app .error-state {
  width: 100vw;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  flex-direction: column;
  text-align: center;
  z-index: 999;
  min-height: 100vh;
  display: flex;
}

#app .loading i, #app .error-state i {
  font-size: 3rem;
  color: var(--color-interactive-success);
}

#app .loading p, #app .error-state p {
  margin: 0.5rem 0;
  max-width: 500px;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

#app .loading button, #app .error-state button {
  margin-top: 0.5rem;
}

#app #designer {
  position: relative;
}

#app #designer .zoom-widget {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 1rem;
  gap: 4px;
  right: 1rem;
  z-index: 1;
}

#app #designer .zoom-widget .zoom-controls {
  display: flex;
  gap: 4px;
}

#app #designer .submit-form {
  position: fixed;
  display: flex;
  bottom: 1rem;
  gap: 4px;
  right: 1rem;
  z-index: 200;
}

#app .design {
  position: relative;
  display: block;
  color: #F5F5F5;
}

#app .design .toolbar {
  position: absolute;
  top: 50px;
  left: calc(var(--left-margin) / 2);
  transform: translateX(-50%);
  cursor: default;
  z-index: 1000;
  user-select: none;
}

#app .design .compass-container {
  width: 90px;
  top: 90px;
  height: 90px;
  user-select: none;
  transform: translateX(-50%);
  position: absolute;
  z-index: 1000;
  cursor: pointer;
  left: calc(var(--left-margin) / 2);
}

#app .design .compass-container .compass {
  width: 90px;
  height: 90px;
  transform: rotate(var(--rotation));
  transform-origin: center;
  pointer-events: none;
}

#app .design .drop-target {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: auto;
  height: auto;
}

#app .design .drop-target.active {
  border: dashed var(--border-width-default) var(--color-border-focus);
}

#app .design.has-drag-active .is-dragged.transition {
  transition: all 0.25s ease;
}

#app .design:not(.has-drag-active) {
  transition: all 0.25s ease;
}

#app .design:not(.has-drag-active) .object {
  transition: all 0.25s ease;
}

#app .hidden {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  opacity: 0;
}

#app .design .fleet {
  position: relative;
  box-shadow: inset 0 0 0 2px #828890;
  border-radius: 4px;
}

#app .design .fleet .fleet-blank-slate {
  justify-content: center;
  height: 100%;
  align-items: center;
  padding: 2rem;
  flex-direction: column;
  text-align: center;
  min-height: 200px;
  display: flex;
  color: var(--color-text-secondary);
}

#app .design .fleet .fleet-blank-slate .title {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-medium);
  margin-bottom: 1rem;
  color: var(--color-text-primary);
}

#app .design .fleet .fleet-blank-slate .hint {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

#app .design .fleet .object {
  position: absolute;
  padding: 0.1rem 0.5rem;
  transform-origin: center center;
  transition: background-color 0.25s ease;
  box-shadow: inset 0 0 0 2px #828890;
  height: var(--height);
  width: var(--width);
  --rotation-offset: calc(var(--width) / 2 - var(--height) / 2);
}

#app .design .fleet .object .object-buttons {
  gap: 2px;
  right: 0;
  border-width: 1px;
  top: 0;
  position: absolute;
  z-index: 10;
  display: flex;
  transition: opacity 0.25s ease;
  background: #092130;
  opacity: 0;
}

#app .design .fleet .object .object-buttons button {
  width: 24px;
  justify-content: center;
  height: 24px;
  border: none;
  align-items: center;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px #828890;
  border-radius: 2px;
  display: flex;
  background: transparent;
  color: #F5F5F5;
}

#app .design .fleet .object .object-buttons button.delete-button {
  background: red;
}

#app .design .fleet .object:hover:not(.is-dragged):not(.is-editing-title) {
  opacity: 1;
}

#app .design .fleet .object:hover:not(.is-dragged):not(.is-editing-title) .object-buttons {
  opacity: 1;
}

#app .design .fleet .object .title-editor {
  position: absolute;
  top: 48px;
}

#app .design .fleet .object.container, #app .design .fleet .object.object-ensilage-camlock {
  background-color: #1D3343;
  border-radius: 4px;
}

#app .design .fleet .object.object-ensilage-camlock .title-content {
  display: none;
}

#app .design .fleet .object.object-fleet-house {
  background-color: #3A4E5E;
  border-radius: 4px;
}

#app .design .fleet .object.object-feed-tubes {
  box-shadow: none;
  background-color: #FF4D4D;
}

#app .design .fleet .object.object-fender {
  box-shadow: none;
  background: linear-gradient(90deg, #1D3343 90px, transparent 50px), linear-gradient(90deg, transparent calc(100% - 40px), #1D3343 calc(100% - 40px)), repeating-linear-gradient(90deg, #F9FFB9, #F9FFB9 25px, transparent 20px, transparent 45px);
  background-color: #1D3343;
}

#app .design .fleet .object.object-fender .object-buttons {
  right: 10px;
}

#app .design .fleet .object.object-land {
  box-shadow: none;
  background-color: #092130;
}

#app .design .fleet .object.object-fish-cages {
  box-shadow: none;
  background-color: #1D3343;
}

#app .design .fleet .object.boat {
  background-color: #1D3343;
  align-content: center;
  display: flex;
  flex-wrap: wrap;
  padding-left: 50px;
}

#app .design .fleet .object.boat.mooring-starboard {
  border-top-right-radius: 50%;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 4px;
}

#app .design .fleet .object.boat.mooring-starboard.edge-top {
  border-top-right-radius: 50%;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 4px;
}

#app .design .fleet .object.boat.mooring-starboard.edge-right {
  border-top-right-radius: 50%;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 4px;
}

#app .design .fleet .object.boat.mooring-starboard.edge-bottom {
  border-top-left-radius: 50%;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 4px;
}

#app .design .fleet .object.boat.mooring-starboard.edge-left {
  border-top-right-radius: 50%;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 4px;
}

#app .design .fleet .object.boat.mooring-port.edge-top {
  border-top-left-radius: 50%;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 4px;
}

#app .design .fleet .object.boat.mooring-port.edge-right {
  border-top-left-radius: 50%;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 4px;
}

#app .design .fleet .object.boat.mooring-port.edge-bottom {
  border-top-right-radius: 50%;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 4px;
}

#app .design .fleet .object.boat.mooring-port.edge-left {
  border-top-left-radius: 50%;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 4px;
}

#app .design .fleet .object.object-dp-reflex {
  box-shadow: none;
  padding: 0;
}

#app .design .fleet .object.attached-edge::after, #app .design .fleet .object.attached-edge::before {
  content: '';
  position: absolute;
  background-color: #3EB397;
}

#app .design .fleet .object.attached-edge.edge-top::after, #app .design .fleet .object.attached-edge.edge-bottom::after {
  width: 20px;
  height: 4px;
  left: 50%;
  transform: translateX(-50%);
}

#app .design .fleet .object.attached-edge.edge-top::after {
  top: -2px;
}

#app .design .fleet .object.attached-edge.edge-bottom::after {
  bottom: -2px;
}

#app .design .fleet .object.attached-edge.edge-left::before, #app .design .fleet .object.attached-edge.edge-right::before {
  width: 4px;
  height: 20px;
  top: 50%;
  transform: translateY(-50%);
}

#app .design .fleet .object.attached-edge.edge-right::before {
  right: -2px;
}

#app .design .fleet .object.attached-edge.edge-left::before {
  left: -2px;
}

#app .design .fleet .object .header {
  position: relative;
}

#app .design .fleet .object .header.centered-icon-layout {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100%;
}

#app .design .fleet .object .header .title {
  display: flex;
  align-items: start;
  gap: 0.25rem;
}

#app .design .fleet .object .header .title .object-icon {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
}

#app .design .fleet .object .header .title .title-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

#app .design .fleet .object .header .title .comment {
  display: block;
  color: #828890;
  font-size: var(--font-size-small);
}

#app .design .fleet .object .header .title .icon:last-child {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  padding: 0 0.2rem;
  margin-right: -0.35rem;
  cursor: pointer;
}

#app .design .fleet .object .header .title.centered-icon-layout {
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  height: 100%;
  gap: 0.75rem;
}

#app .design .fleet .object .header .title.centered-icon-layout .object-icon {
  margin-bottom: 0;
}

#app .design .fleet .object .header .title.centered-icon-layout .title-content {
  flex: 0 0 auto;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
}

#app .design .fleet .object.warning {
  border-color: red;
}

#app .design .fleet .object.validation-error {
  box-shadow: inset 0 0 0 3px #FF4D4D;
}

#app .design .fleet .object:hover .header .title .icon:last-child {
  color: #F5F5F5;
  opacity: 1;
}

#app .design .fleet .object.edge-left.align-center {
  transform-origin: center center;
  transform: rotate(-90deg) translate(calc(var(--width) / -2 - var(--height) / -2), calc(var(--width) / -2 - var(--height) / -2));
}

#app .design .fleet .object.edge-left.align-stretch, #app .design .fleet .object.edge-left.align-none {
  transform-origin: right center;
  transform: rotate(-90deg) translate(calc(var(--height) / 2), calc(var(--width) * -1 - var(--height) / -2));
}

#app .design .fleet .object.edge-right.align-center {
  transform-origin: center center;
  transform: rotate(90deg) translate(calc(var(--width) / 2 - var(--height) / 2), calc(var(--width) / 2 - var(--height) / 2));
}

#app .design .fleet .object.edge-right.align-stretch, #app .design .fleet .object.edge-right.align-none {
  transform-origin: left center;
  transform: rotate(90deg) translate(calc(var(--height) / -2), calc(var(--height) / -2));
}

#app .design .fleet .object.drag-handle {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

#app .design .fleet .object.drag-handle:active {
  cursor: grabbing;
}

#app .design .fleet .object.resizable .resize-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #1D3343;
  border: solid 1px #828890;
  user-select: none;
  -webkit-user-select: none;
}

#app .design .fleet .object.resizable .resize-handle::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
}

#app .design .fleet .object.resizable .resize-handle.top-left {
  top: -5px;
  left: -5px;
  cursor: nwse-resize;
}

#app .design .fleet .object.resizable .resize-handle.top-right {
  top: -5px;
  right: -5px;
  cursor: nesw-resize;
}

#app .design .fleet .object.resizable .resize-handle.bottom-left {
  bottom: -5px;
  left: -5px;
  cursor: nesw-resize;
}

#app .design .fleet .object.resizable .resize-handle.bottom-right {
  bottom: -5px;
  right: -5px;
  cursor: nwse-resize;
}

#app .design .fleet .object.resizable .resize-handle.right {
  top: calc(50% - 8px);
  right: -8px;
  cursor: ew-resize;
}

#app .design .fleet .object.resizable .resize-handle.left {
  top: calc(50% - 8px);
  left: -8px;
  cursor: ew-resize;
}

#app .design .fleet .object.resizable .resize-handle.top {
  top: -8px;
  left: calc(50% - 8px);
  cursor: ns-resize;
}

#app .design .fleet .object.resizable .resize-handle.bottom {
  bottom: -8px;
  left: calc(50% - 8px);
  cursor: ns-resize;
}

#app .design .fleet .object.resizable.edge-right .resize-handle.right, #app .design .fleet .object.resizable.edge-left .resize-handle.right {
  cursor: ns-resize;
}

#app .design .object .content {
  display: flex;
  flex-direction: column;
  gap: var(--label-margin-top);
  height: fit-content;
  overflow: visible;
}

#app .design .object .content .quantity {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

#app .design .object .content .quantity .value-label {
  font-size: var(--font-size-small);
  line-height: var(--line-height-compact);
  margin: 0;
  margin-bottom: var(--label-margin-bottom);
}

#app .design .object .content .quantity .value-item * {
  font-size: var(--font-size-small);
  line-height: var(--line-height-compact);
  margin: 0;
}

#app .design .object .content .quantity .value-item {
  font-size: var(--font-size-small);
  line-height: var(--line-height-compact);
  margin: 0;
}

#app .design .object .content .quantity .value-item.input-field {
  display: flex;
  align-items: center;
  background: var(--color-bg-overlay);
  border: var(--border-style-default) var(--border-width-default) var(--color-border-default);
  border-radius: var(--border-radius-default);
  padding: var(--space-xs) var(--space-xs);
}

#app .design .object .content .quantity .value-item.input-field input {
  border: none;
  flex: 1;
  width: 100%;
  padding: var(--space-xs);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

#app .design .object .content .quantity .value-item.input-field input:focus {
  outline: none;
  box-shadow: none;
}

#app .design .object .content .quantity .value-item.input-field input::-webkit-outer-spin-button, #app .design .object .content .quantity .value-item.input-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#app .design .object .content .quantity .value-item.input-field .unit {
  font-size: var(--font-size-base);
  margin-right: var(--space-sm);
  margin-left: var(--space-xs);
  color: var(--color-text-secondary);
}

#app #designer .design .product-label, #app #designer .design .comment, #app #designer .design .title-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}

#app #designer .design .product-label {
  font-size: var(--font-size-base);
  --border-width: var(--border-width-default);
  --padding: var(--space-xs);
  padding: var(--padding);
  border: var(--border-style-default) var(--border-width) var(--color-border-default);
  border-radius: var(--border-radius-default);
  position: relative;
}

#app #designer .design .product-label.colored {
  color: var(--color-text-inverse);
}

#app #designer .design .product-label.colored select {
  color: var(--color-text-inverse);
}

#app #designer .design:not(.has-drag-active) .product-label:hover {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  width: max-content;
  max-width: none;
}

#app #designer.readonly {
  user-select: none;
  touch-action: auto;
}

#app #designer.readonly * {
  transition: none;
}

#app #designer.readonly .design {
  pointer-events: auto;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

#app #designer.readonly .resize-handle {
  display: none;
}

#app #designer.readonly .toolbar button {
  display: none;
}

#app #designer.readonly .submit-form button {
  display: unset;
  pointer-events: all;
}

#app #designer.readonly .zoom-widget * {
  pointer-events: auto;
}

#app #designer.readonly .object {
  pointer-events: none;
}

#app #designer.readonly .object.attached-edge::before, #app #designer.readonly .object.attached-edge::after {
  display: none;
}

#app #designer.readonly .object:hover:not(.is-dragged):not(.is-editing-title) .object-buttons {
  opacity: 0;
}

#app #designer.readonly .object:hover .header .title .icon:last-child {
  opacity: 0;
}

#app #designer.responsive-mode {
  max-height: 85svh;
}

#app #designer.zoom-fit .zoom-widget {
  display: none;
}

@media (max-width: 600px) {

  
  
  #app .loading, #app .error-state {
    padding: 1rem;
    min-height: 200px;
    max-width: calc(100vw - 2rem);
  }

}

#app .toast {
  width: 100%;
  max-width: min(90vw, 500px);
  top: 50%;
  border: var(--border-style-default) var(--border-width-default) var(--color-border-default);
  transform: translate(-50%, -50%);
  position: fixed;
  animation: fade-in 0.3s ease-out;
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  background-color: var(--color-bg-surface);
  border-radius: var(--border-radius-default);
  color: var(--color-text-primary);
  left: 50%;
}

#app .toast.toast-error {
  border-color: var(--color-border-danger);
}

#app .toast .toast-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-weight: bold;
  border-bottom: var(--border-style-default) var(--border-width-default) var(--color-border-default);
}

#app .toast .toast-header i {
  font-size: 1.2em;
  color: var(--color-interactive-success);
}

#app .toast .toast-header .close-button {
  justify-content: center;
  border: none;
  align-items: center;
  padding: 0.25rem;
  cursor: pointer;
  margin-left: auto;
  display: flex;
  transition: opacity 0.2s ease;
  background: transparent;
  color: var(--color-text-secondary);
  opacity: 0.7;
}

#app .toast .toast-header .close-button:hover {
  opacity: 1;
  color: var(--color-text-primary);
}

#app .toast .toast-messages {
  list-style: none;
  padding: 0.75rem 1rem;
  margin: 0;
}

#app .toast .toast-messages li {
  padding: 0.25rem 0;
}

#app .toast .toast-messages li:not(:last-child) {
  margin-bottom: 0.5rem;
}

@media (max-width: 600px) {

  
  
  
  
  #app #designer .toast {
    max-width: calc(100vw - 2rem);
    font-size: var(--font-size-small);
  }

}

svg.dp-reflex .st0 {
  fill: var(--color-interactive-success);
}

svg.dp-reflex .st1 {
  fill: none;
  stroke: var(--color-bg-overlay);
  stroke-miterlimit: 10;
  stroke-width: 2px;
}

svg.ensilage-camlock {
  stroke-miterlimit: 10;
}

svg.ensilage-camlock .st0 {
  fill: var(--color-interactive-success);
}

svg.ensilage-camlock .st1 {
  fill: var(--color-bg-overlay);
  stroke: var(--color-bg-overlay);
  stroke-width: 16.2px;
}

svg.ensilage-camlock .st2 {
  fill: #68b42e;
  stroke: #8a9190;
  stroke-width: 25.3px;
}

#app .print-page-header {
  display: none;
}

@media print {

  body {
    background-color: transparent !important;
    color: #000 !important;
    height: auto !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  #app {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column;
  }
  
  .zoom-widget, .submit-form, .toast, .toolbar, .compass-container, .drop-target, .dev-panel, .sidebar-expand-toggle-row, .control-panel, .print-design {
    display: none !important;
  }
  
  .print-page-header {
    border-bottom: 2px solid #000;
    width: 100vw !important;
    padding-bottom: 0.2rem !important;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem !important;
    font-weight: bold;
    order: 1;
    font-size: 1.0rem;
    display: flex !important;
  }
  
  .print-page-header .location {
    color: #000 !important;
  }
  
  .print-page-header .fleet {
    color: #000 !important;
  }
  
  .sidebar {
    width: 100% !important;
    height: auto !important;
    border: none !important;
    padding: 0 !important;
    flex-direction: column !important;
    position: static !important;
    order: 10;
    overflow: visible !important;
    font-size: 15px !important;
    display: flex !important;
    background: transparent !important;
    color: #000 !important;
  }
  
  .sidebar .library {
    display: none !important;
  }
  
  .sidebar .dev-panel {
    display: none !important;
  }
  
  .sidebar .route-planner-feed-distribution {
    display: none !important;
  }
  
  .sidebar .route-planner-feed-distribution .print-page-header {
    display: none !important;
  }
  
  
  
  .sidebar.distribution .route-planner-feed-distribution {
    display: block !important;
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: #000 !important;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .print-page-header {
    display: flex !important;
    margin-bottom: 0.1em;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .header-container {
    margin-bottom: 0.1em;
    gap: 0;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .header-container .header {
    color: #000 !important;
  }
  
  
  
  .sidebar.distribution .route-planner-feed-distribution .header-container .read-receipt * {
    color: #000 !important;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .header-container * {
    padding: 0 !important;
    line-height: 1.2 !important;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .confirm-button {
    display: none !important;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .color-indicator {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .order-feed-distribution {
    margin-top: 0.5rem !important;
    display: block !important;
    width: 100% !important;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .order-feed-distribution h3.order-title {
    margin: 0.15em 0 0.05em 0 !important;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .order-feed-distribution & > * {
    margin-top: 0.05em;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .ordered-amounts-table {
    border-collapse: collapse;
    width: 100% !important;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .ordered-amounts-table td {
    padding: 1px 1px !important;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .feed-distribution-table {
    border-collapse: collapse;
    width: 100% !important;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .feed-distribution-table th, .sidebar.distribution .route-planner-feed-distribution .feed-distribution-table td {
    padding: 1px 4px !important;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .fleet-silo-distribution {
    width: 100% !important;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .fleet-silo-distribution .fleet-name {
    margin-top: 0.5em;
    margin-bottom: 0;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .bag-distribution {
    margin-top: 0.05em;
    width: 100% !important;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .comment {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .comment .comment-header {
    margin: 0;
  }
  
  
  
  .sidebar.distribution .route-planner-feed-distribution .last-edited-by {
    margin-top: 0.05em !important;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .contact-phones {
    margin-top: 0.15em;
    width: 100% !important;
  }
  
  .sidebar.distribution .route-planner-feed-distribution .contact-phones h3 {
    margin: 0;
    display: inline;
  }
  
  .sidebar.distribution .fleet-info {
    display: none !important;
  }
  
  
  
  .sidebar.fleet .fleet-info {
    position: absolute !important;
    top: 100vh !important;
    left: 0 !important;
    width: 100% !important;
  }
  
  .sidebar.fleet .fleet-info .fleet-info-header {
    display: none !important;
  }
  
  .sidebar.fleet .fleet-info .fleet-info-edit {
    display: none !important;
  }
  
  .sidebar.fleet .fleet-info .readme {
    white-space: pre-wrap;
    color: #000 !important;
    background: transparent !important;
    border: none !important;
    display: block !important;
  }
  
  
  
  .sidebar.fleet.has-feed-distribution .fleet-info {
    display: none !important;
  }
  
  #designer {
    display: none !important;
  }
  
  #designer.fleet {
    display: block !important;
    position: relative !important;
    order: 1;
    padding: 0 !important;
  }
  
  #designer.fleet .design {
    width: var(--print-design-width) !important;
    top: 3rem;
    height: var(--print-design-height) !important;
    transform-origin: top left;
    transform: scale(var(--print-scale)) !important;
    position: absolute !important;
    min-height: 0 !important;
    overflow: visible !important;
    left: 0;
  }
  
  #designer.fleet .design .resize-handle {
    display: none !important;
  }
  
  #designer.fleet .fleet.workarea {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: none !important;
    box-shadow: inset 0 0 0 2px #092130 !important;
  }
  
  #designer.fleet .fleet.workarea .object {
    box-shadow: inset 0 0 0 2px #092130 !important;
  }
  
  
  
  
  
  #designer.fleet .fleet.workarea .object .header .title .title-content {
    color: #000000 !important;
  }
  
  #designer.fleet .fleet.workarea .object .object-buttons {
    display: none !important;
  }
  
  #designer.fleet .fleet.workarea .object .content {
    color: #000000 !important;
  }
  
  
  
  #designer.fleet .fleet.workarea .object .content .quantity .value-label {
    color: #092130 !important;
  }
  
  #designer.fleet .fleet.workarea .object .content .quantity .value-item {
    color: #000000 !important;
  }
  
  #designer.fleet .fleet.workarea .object .product-label {
    background: transparent !important;
    color: #000000 !important;
    border-color: #092130 !important;
  }
  
  #designer.fleet .fleet.workarea .object .comment {
    color: #092130 !important;
  }
  
  #designer.fleet .fleet.workarea .object.container, #designer.fleet .fleet.workarea .object.object-fleet-house, #designer.fleet .fleet.workarea .object.object-ensilage-camlock {
    color: #000000 !important;
    background: transparent !important;
  }
  
  #designer.fleet .fleet.workarea .object.object-dp-reflex {
    box-shadow: none !important;
  }
  
  
  
  
  
  
  
  #designer.fleet .fleet.workarea .object.outside-attachment .header .title .title-content {
    color: white !important;
  }
  
  
  
  
  
  #designer.fleet svg.dp-reflex .st0 {
    fill: #000000 !important;
  }
  
  #designer.fleet svg.dp-reflex .st1 {
    stroke: #000000 !important;
    stroke-width: 2px !important;
  }
  
  
  
  #designer.fleet svg.ensilage-camlock .st0 {
    fill: #000000 !important;
  }
  
  #designer.fleet svg.ensilage-camlock .st1 {
    fill: transparent !important;
    stroke: #000000 !important;
  }
  
  #designer.fleet svg.ensilage-camlock .st2 {
    fill: transparent !important;
    stroke: #828890 !important;
  }
  
  #designer.fleet svg {
    overflow: visible !important;
  }
  
  #designer.fleet .grid-background {
    display: none !important;
  }

}