/*------------------------------*/
/* Common                       */
/*------------------------------*/

.dd-view-host { position: relative; }

.dd-view-host:empty { display: none; }

dd-icon[name="invalid"] {
   width: var(--dd-icon-size-small);
   height: var(--dd-icon-size-small);
}

dd-icon[name="overexposition"] { color: var(--dd-color-active) }

dd-icon[name="db-adopt"] { color: var(--dd-color-done); }

dd-icon[name="db-delete"] { color: var(--dd-color-warning); }

svg.icon {
   width: var(--dd-icon-size);
   height: var(--dd-icon-size);
   fill: currentColor;
}

dd-help-id { display: none; }


/*------------------------------*/
/* Company Logo                 */
/*------------------------------*/

:root {
   --dd-company-logo-opacity: 1;
   --dd-company-logo-width: 500px;
}

.company-logo {
   max-width: var(--dd-company-logo-width);
   height: auto;
   opacity: var(--dd-company-logo-opacity);
}

/*------------------------------*/
/* Feature Plugin Logo Settings */
/*------------------------------*/

.feature-plugin-logo {
   width: auto;
   height: auto;
   object-fit: contain;
   max-width: 250px;
   margin-right: var(--dd-device-header-image-margin-right);
}

/*------------------------------*/
/* Help Overlay                 */
/*------------------------------*/

.help-overlay {
   background: black;
   cursor: help;
   height: 100vh;
   width: 100vw;
   left: 0;
   top: 0;
   opacity: 0.4;
   pointer-events: auto;
   position: fixed;
   z-index: 20000;
}


/*------------------------------*/
/* Main Screen                  */
/*------------------------------*/

.acquisition-type-popup {
   width: 18px;
   padding-left: 0;
   padding-right: 0;
}

.examine-patient {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
}

.examination-region { margin: 2px 0; }

.image-filter {
   background: var(--dd-primary-color-830);
   padding: 2px 0;
}

.main-functions {
   align-items: center;
   padding-left: 12px;
   padding-right: 12px;
   gap: var(--dd-toolbar-icon-button-spacing);
   --dd-toolbar-link-button-spacing: 12px;
}

.main-functions,
.main-functions dd-toolbar { height: 56px; }

.main-functions .company-logo {
   height: 32px;
   width: 84px;
   margin-left: 6px;
}

.main-functions .bread-crumb-view { padding: 0; }

.main-functions dd-toolbar > dd-toolbar { margin-right: var(--dd-toolbar-icon-button-spacing); }

.main-functions dd-toolbar:last-child:not([has-overflow-menu]) { margin-right: 0; }

.multi-select-bar { background: var(--dd-primary-color-830); }

.multi-select-functions { --dd-toolbar-spacing: var(--dd-toolbar-icon-button-spacing); }

.notification-view {
   max-width: 540px;
   max-height: 150px;
}

.notification-layout {
   gap: var(--dd-page-padding-x);
   align-items: start;
}

.notification-text { margin-top: 6px; }

.patient-list { width: 100%; }

.status-bar {
   background: var(--dd-primary-color-700);
   min-height: 36px;
   padding: 0 12px;
   --dd-background: var(--dd-primary-color-700);
}

.status-message.dd-pulsating { animation-iteration-count: 4; }

.main-functions,
.examination-functions,
.video-preview-functions {
   background: var(--dd-primary-color-700);
   --dd-background: var(--dd-primary-color-700);
   --dd-divider-color: var(--dd-primary-color-500);
}

.gender-selection { --dd-toggle-button-min-width: 32px; }


/*------------------------------*/
/* Examination Functions        */
/*------------------------------*/

.examination-functions {
   align-items: center;
   box-sizing: border-box;
   height: 36px;
   width: 100%;
   column-gap: 12px;
   padding: 0 12px;
}

.examination-functions > * {
   overflow: hidden;
   min-width: 0;
}

.examination-functions dd-toolbar { height: 36px; }

.examination-functions .dd-busy-indicator { display: contents; }

.patient-key { color: var(--dd-primary-color-050); }

.patient-search-hit { color: var(--dd-primary-color-100); }


/*------------------------------*/
/* Workspace Functions          */
/*------------------------------*/

:root { --dd-presentation-state-name-max-width: 400px; }

.workspace-functions {
   height: 48px;
   background: var(--dd-primary-color-870);
   padding: 0 8px;
   --dd-background: var(--dd-primary-color-870);
   --dd-toolbar-spacing: var(--dd-toolbar-icon-button-spacing);
}


/*------------------------------*/
/* Image Selection              */
/*------------------------------*/

.image-selector { background: var(--dd-primary-color-830); }

.image-group,
.acquisition-box { border-bottom: 1px solid var(--dd-body-background); }

.image-group { --dd-expander-content-background: var(--dd-primary-color-900); }

dd-expander.image-group { --dd-expander-header-min-height: 36px; }

.image-group-content { gap: 4px; }

.image-transfer-box {
   display: flex;
   flex-direction: column;
   align-content: center;
   padding: 31% 16px; /* make roughly the same height as the thumbnail view replacing the transfer */
   background: var(--dd-workspace-background);
   border: 2px solid var(--dd-workspace-background);
   border-radius: 4px
}

.image-transfer-box.loaded { border-color: var(--dd-color-highlight); }

.image-thumbnail-view {
   background: var(--dd-primary-color-930);
   padding: 4px;
   gap: 2px;
   border: 2px solid var(--dd-background);
   border-radius: 4px;
}

.image-thumbnail-view.loaded {
   background: var(--dd-background-selected);
   border-color: var(--dd-color-highlight);
}

.thumbnail-overlay {
   box-sizing: border-box;
   height: 100%;
   width: 100%;
   padding: 4px;
   --dd-toolbar-spacing: var(--dd-toolbar-icon-button-spacing);
}

.thumbnail-overlay dd-icon,
.thumbnail-overlay dd-icon-button,
.thumbnail-overlay dd-checkbox,
.thumbnail-overlay .dd-nowrap { background: var(--dd-background-overlay); }

.thumbnail-overlay :not(dd-icon-button) > dd-icon {
   border-radius: var(--dd-icon-button-border-radius);
   padding: var(--dd-icon-button-padding-smaller);
}

.thumbnail-overlay dd-checkbox,
.thumbnail-overlay span.dd-nowrap,
.thumbnail-overlay div.dd-nowrap {
   border-radius: var(--dd-icon-button-border-radius);
   box-sizing: border-box;
   height: calc(var(--dd-icon-size-smaller) + 2 * var(--dd-icon-button-padding-smaller));
   min-width: calc(var(--dd-icon-size-smaller) + 2 * var(--dd-icon-button-padding-smaller));
}

.thumbnail-overlay dd-checkbox { justify-content: center; }

.thumbnail-overlay span.dd-nowrap,
.thumbnail-overlay div.dd-nowrap {
   line-height: var(--dd-icon-size-smaller); /* center vertically */
   padding: var(--dd-icon-button-padding-smaller) 6px;
}

dd-icon[name="grip"] { color: var(--dd-color-disabled); }


/*------------------------------*/
/* Dose Indicator               */
/*------------------------------*/

.dose-indicator {
   display: grid;
   grid-template-columns: 2px 2px 2px;
}

.dose-indicator-track { background: var(--dd-color-disabled); }

.dose-indicator-limit-upper { border-bottom: 2px solid var(--dd-color-disabled); }

.dose-indicator-limit-lower { border-top: 2px solid var(--dd-color-disabled); }


/*------------------------------*/
/* Image Acquisition            */
/*------------------------------*/

:root { --dd-acquisition-layout-spacing: 6px; }

.acquisition-box {
   min-height: 36px;
   padding: 6px 12px;
}

.acquisition-box,
.connect-acquisition-screen {
   background: var(--dd-primary-color-870);
   --dd-background: var(--dd-primary-color-870);
}

.acquisition-layout { gap: var(--dd-acquisition-layout-spacing); }

.acquisition-source {
   --dd-input-field-height: 46px;
   --dd-input-field-padding-x: 6px;
   --dd-input-field-placeholder-font-style: normal;
   --dd-input-field-placeholder-text-align: left;
}

.acquisition-source:not([disabled]) { --dd-color-placeholder: var(--dd-color-standard); }

.acquisition-source [slot="prefix"] > *:last-child { margin-right: var(--dd-input-field-padding-x); }

.acquisition-source > .dd-read-only-field-content { width: 100% }

.acquisition-type-button,
.acquisition-mode-button {
   display: inline-flex;
   background: var(--dd-input-field-button-background);
   font: var(--dd-font-body);
   min-height: 46px;
   padding-right: 8px;
   --dd-button-label-padding: 0 0 0 calc(var(--dd-input-field-padding-x) + var(--dd-input-field-item-padding-x));
   --dd-opacity-disabled: 1;
}

.acquisition-type-button[disabled],
.acquisition-mode-button[disabled] {
   background: transparent;
   border: var(--dd-input-field-border-disabled);
   color: var(--dd-color-disabled);
}

.acquisition-source[disabled] { --dd-input-field-background-disabled: transparent; }

.selected-mode-layout {
   align-items: center;
   gap: 8px;
}

.selected-mode-layout .xray-params {
   align-items: start;
   font: var(--dd-font-caption);
   letter-spacing: var(--dd-letter-spacing-airy);
   color: var(--dd-color-secondary);
}

.selected-mode-icons {
   align-items: center;
   gap: 2px;
}

.acquisition-preview-stream {
   background: var(--dd-workspace-background);
   max-height: 100%;
   width: 100%;
   object-fit: contain;
}


/*------------------------------*/
/* Parameter Tree               */
/*------------------------------*/

.parameter-tree {
   width: 100%;
   --dd-split-layout-handle-color: var(--dd-color-disabled);
}

.parameter-groups {
   height: 100%;
   width: 100%;
   min-width: 100px;
   flex: 0 0 280px;
}

.parameter-form {
   height: 100%;
   width: 100%;
   min-width: 100px;
   padding-left: var(--dd-form-layout-column-spacing);
}


/*------------------------------*/
/* Toolbox                      */
/*------------------------------*/

.toolbox {
   border-bottom: 1px solid var(--dd-body-background);
   --dd-expander-content-background: var(--dd-primary-color-900);
   --dd-icon-button-background: var(--dd-icon-button-background-opaque);
   --dd-toggle-button-background: var(--dd-icon-button-background-opaque);
}

dd-expander.toolbox {
   --dd-expander-header-min-height: 36px;
   --dd-expander-padding-y: 8px;
}

.toolbox-header { height: 100%; }

.toolbox-content {
   --dd-background: var(--dd-primary-color-900);
   --dd-expander-content-background: transparent;
   --dd-expander-header-min-height: 0;
   --dd-font-heading: var(--dd-font-body);
   --dd-row-background-dark: var(--dd-background);
   --dd-row-background-light: var(--dd-primary-color-870);
   --dd-toolbar-spacing: 6px;
   --dd-select-field-input-width: var(--dd-select-field-input-width-small);
}

.toolbox-content dd-expander {
   --dd-expander-padding-x: 0;
   --dd-expander-padding-y: 6px;
}

.toolbox-content dd-toolbar:not(:last-child),
.toolbox-content dd-checkbox:not(:last-child),
.toolbox-content .dd-slider-container:not(:last-child),
.toolbox-content > .dd-toggle-group:not(:last-child),
.toolbox-content > .dd-form-item:not(:last-child) { margin-bottom: 6px; }

.toolbox-content .dd-slider-container:not(:last-child) { margin-bottom: 8px; }

.line-thickness { background: var(--dd-color-emphasize); }

dd-list-item[selected] .line-thickness { background: var(--dd-color-selected); }


/*------------------------------*/
/* Workspace                    */
/*------------------------------*/

:root {
   --dd-frame-border-width: var(--dd-border-width-selected);
   --dd-frame-border-color: var(--dd-primary-color-870);
   --dd-frame-border-color-active: var(--dd-border-color-selected);
   --dd-frame-border-color-next: var(--dd-primary-color-300);
   --dd-frame-border-active: var(--dd-frame-border-width) solid var(--dd-frame-border-color-active);
   --dd-frame-border-normal: var(--dd-frame-border-width) solid var(--dd-frame-border-color);
   --dd-frame-border-next: var(--dd-frame-border-width) solid var(--dd-frame-border-color-next);
   --dd-frame-header-background-normalized: rgba(35, 35, 35, 0.87); /* --dd-primary-color-870 plus alpha channel */
   --dd-frame-header-padding: 0 0 0 8px;
   --dd-workspace-background: var(--dd-primary-color-darkest);
   --dd-interactive-border-size-area-padding: 3px;
}

.workspace-container,
.empty-workspace-container {
   height: 100%;
   width: 100%;
   background: var(--dd-workspace-background);
   box-sizing: border-box;
}

.empty-workspace-container {
   display: grid;
   place-items: center;
   --dd-company-logo-opacity: 0.5;
}

.empty-workspace-container.fade-in {
   animation-name: empty-workspace-fade-in;
   animation-duration: 2s;
   animation-iteration-count: 1;
}

@keyframes empty-workspace-fade-in {
   0% { opacity: 0; }

   50% { opacity: 0; }

   100% { opacity: 1; }
}

.empty-workspace-content {
   display: flex;
   flex-direction: column;
   gap: 24px;
   max-width: var(--dd-company-logo-width);
}

.normalized-frame-layout { --dd-frame-header-display: none; }

.normalized-frame-layout:hover { --dd-frame-header-display: flex; }

.normalized-frame-layout dd-toolbar {
   --dd-background: transparent;
   --dd-icon-button-background: transparent;
}

dd-interactive-border > .normalized-frame-layout { padding: var(--dd-interactive-border-size-area-padding); }

.frame-header-normalized,
.frame-header-normalized-empty,
.frame-header-active,
.frame-header-maximized,
.frame-header-next {
   box-sizing: border-box;
   height: 32px;
   padding: var(--dd-frame-header-padding);
}

.frame-header-normalized {
   border-left: var(--dd-frame-border-normal);
   border-right: var(--dd-frame-border-normal);
   border-top: var(--dd-frame-border-normal);
   border-bottom: var(--dd-frame-border-width) solid transparent;
   background: var(--dd-frame-header-background-normalized);
   display: var(--dd-frame-header-display);
}

.frame-header-normalized-empty {
   border-left: var(--dd-frame-border-normal);
   border-right: var(--dd-frame-border-normal);
   border-top: var(--dd-frame-border-normal);
   border-bottom: var(--dd-frame-border-width) solid transparent;
   background: var(--dd-frame-border-color);
   display: var(--dd-frame-header-display);
}

.frame-header-active {
   border: var(--dd-frame-border-active);
   background: var(--dd-frame-header-background-normalized);
}

.frame-header-maximized {
   border: var(--dd-frame-border-normal);
   background: var(--dd-frame-border-color);
}

.frame-header-next {
   border-left: var(--dd-frame-border-next);
   border-right: var(--dd-frame-border-next);
   border-top: var(--dd-frame-border-next);
   padding-bottom: var(--dd-frame-border-width);
   background: var(--dd-frame-border-color);
}

.frame-header-tools {
   padding: 0;
   --dd-icon-button-border-radius: 0;
   --dd-toolbar-icon-button-spacing: 0;
}

.frame-content-normalized {
   border: var(--dd-frame-border-normal);
   height: calc(100% - 2 * var(--dd-frame-border-width));
   background: var(--dd-workspace-background);
}

.frame-content-empty {
   border: var(--dd-frame-border-normal);
   background: var(--dd-workspace-background);
}

.frame-content-maximized {
   border-left: var(--dd-frame-border-normal);
   border-right: var(--dd-frame-border-normal);
   border-bottom: var(--dd-frame-border-normal);
   background: var(--dd-workspace-background);
}

.frame-empty-next {
   border-color: var(--dd-frame-border-color-next);
   border-top: hidden;
}

.drag-preview-frame dd-toolbar {
   --dd-background: transparent;
   --dd-icon-button-background: transparent;
}

.dragged-image {
   display: flex;
   background: black;
   border: 2px solid black;
   border-radius: 4px;
   width: 127px;
   justify-content: center;
}

.image-caption {
   --dd-toolbar-spacing: 2px;
   --dd-divider-color: var(--dd-color-standard);
}

.image-caption-inspect {
   --dd-toolbar-spacing: 6px;
   --dd-divider-color: var(--dd-color-standard);
}

.image-text-overlay {
   background: var(--dd-primary-color-darkest);
   border: 1px solid var(--dd-primary-color-lightest);
   padding: var(--dd-tooltip-padding);
}

.uniform-layout-grid { gap: 2px; }


/*------------------------------*/
/* Video Preview                */
/*------------------------------*/

.video-preview-functions {
   height: 40px;
   padding: 0 4px;
}

.video-preview-side-bar {
   background: var(--dd-primary-color-870);
   padding: 8px 0;
   min-width: 200px;
   max-width: 320px;
   flex: 0 0 250px;
   gap: 8px;
   --dd-background: var(--dd-primary-color-870);
}

.video-acquisition-box {
   background: var(--dd-primary-color-870);
   gap: 8px;
   --dd-background: var(--dd-primary-color-870);
}

.video-acquisition-box,
.video-preview-tools,
.video-acquisition-tools { margin: 0 12px; }

.video-acquisition-type {
   display: flex;
   align-items: center;
   gap: 8px;
}

.video-acquisition-source {
   --dd-input-field-padding-x: 6px;
   --dd-color-placeholder: var(--dd-color-standard);
   --dd-input-field-placeholder-font-style: normal;
   --dd-input-field-placeholder-text-align: left;
}

.video-acquisition-source[disabled] { --dd-input-field-background-disabled: transparent; }

.video-acquisition-mode-button {
   display: inline-flex;
   background: var(--dd-input-field-button-background);
   font: var(--dd-font-body);
   padding: 8px;
}

.video-acquisition-mode-button[disabled] {
   background: transparent;
   border: var(--dd-input-field-border-disabled);
}

.video-image-selector {
   padding: 2px 12px 8px 12px;
   gap: 4px;
}


/*------------------------------*/
/* Tooth Scheme                 */
/*------------------------------*/

.tooth-shape:hover .tooth-shape-disabled {
   fill: var(--dd-primary-color-500);
   stroke-width: 2px;
   stroke: var(--dd-primary-color-200);
   cursor: pointer;
}

.tooth-shape:hover .tooth-shape-disabled-text {
   color: var(--dd-primary-color-100);
   cursor: pointer;
}

.tooth-shape:hover .tooth-shape-enabled,
.tooth-shape:hover .tooth-shape-enabled-text { cursor: pointer; }

.tooth-shape-small:hover .tooth-shape-disabled-small {
   fill: var(--dd-primary-color-500);
   stroke-width: 1px;
   stroke: var(--dd-primary-color-200);
   cursor: pointer;
}

.tooth-shape-small:hover .tooth-shape-disabled-text {
   color: var(--dd-primary-color-100);
   cursor: pointer;
}

.tooth-shape-small:hover .tooth-shape-enabled-small,
.tooth-shape-small:hover .tooth-shape-enabled-text { cursor: pointer; }

.tooth-shape-line {
   stroke-width: 1px;
   stroke: currentColor;
}

.tooth-shape-passive { fill: var(--dd-primary-color-500); }

.tooth-shape-enabled {
   fill: var(--dd-background-selected);
   stroke-width: 2px;
   stroke: var(--dd-border-color-selected);
}

.tooth-shape-enabled-small {
   fill: var(--dd-background-selected);
   stroke-width: 1px;
   stroke: var(--dd-border-color-selected);
}

.tooth-shape-disabled {
   fill: var(--dd-primary-color-700);
   stroke-width: 2px;
   stroke: var(--dd-primary-color-400);
}

.tooth-shape-disabled-small {
   fill: var(--dd-primary-color-700);
   stroke-width: 1px;
   stroke: var(--dd-primary-color-400);
}

.tooth-shape-disabled-text {
   color: var(--dd-primary-color-300);
   font-size: var(--dd-font-size-small);
}

.tooth-shape-enabled-text {
   color: var(--dd-border-color-selected);
   font-size: var(--dd-font-size-small);
}


/*------------------------------*/
/* Worklist                     */
/*------------------------------*/

.work-item-state-awaiting::after,
.work-item-state-inprogress::after,
.work-item-state-paused::after,
.work-item-state-completed::after,
.work-item-state-discontinued::after {
   content: "";
   min-height: 6px;
   max-height: 6px;
   min-width: 6px;
   max-width: 6px;
   border-radius: 3px;
}

.work-item-state-awaiting::after { background: transparent; }

.work-item-state-inprogress::after { background: var(--dd-color-highlight); }

.work-item-state-paused::after { background: currentColor; }

.work-item-state-completed::after { background: var(--dd-color-done); }

.work-item-state-discontinued::after { background: var(--dd-color-canceled); }


/*------------------------------*/
/* Proof Color Scheme           */
/*------------------------------*/

.proof-color-scheme {
   display: grid;
   place-items: stretch;
   grid-template-columns: 24px auto auto;
   grid-auto-rows: 48px;
   --dd-proof-color-scheme-border: thin solid var(--dd-primary-color-500);
   border-bottom: var(--dd-proof-color-scheme-border);
   border-right: var(--dd-proof-color-scheme-border);
}

.proof-color, .proof-color-description {
   border-top: var(--dd-proof-color-scheme-border);
   border-left: var(--dd-proof-color-scheme-border);
}

.proof-color-limit {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 12px;
   border-left: var(--dd-proof-color-scheme-border);
}

.proof-color-description {
   display: flex;
   align-items: center;
   justify-items: start;
   padding: 0 12px;
}

/*------------------------------*/
/* Image selection for import   */
/*------------------------------*/

.connect-image-selection-splitter { gap: 8px }

.connect-image-groups {
   min-width: 500px;
   min-height: 400px;
   height: 100%
}

.connect-image-preview {
   gap: var(--dd-form-layout-row-spacing);
   min-width: 320px;
   height: 100%
}

/*------------------------------*/
/* Inspect                      */
/*------------------------------*/

:root { --dd-check-page-selector-height: 48px; }

.check-page-selector {
   background: var(--dd-tabs-background);
   padding-right: 16px;
   height: var(--dd-check-page-selector-height);
}

.check-page-selector > dd-tabs {
   display: grid;
   flex: initial;
   height: var(--dd-check-page-selector-height);
}

.check-page-selector > dd-tabs > dd-tab { flex: initial; }

.image-list {
   background: var(--dd-primary-color-900);
   padding: 8px 12px;
   gap: 4px;
   --dd-background: var(--dd-primary-color-900);
}

.inspect-module-container {
   background: var(--dd-primary-color-870);
   --dd-background: var(--dd-primary-color-870);
}

.inspect-module-container > dd-page[has-footer],
.check-page-container > dd-page[has-footer] { border-bottom: thin solid var(--dd-divider-color); }

.inspect-workspace-container {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-auto-flow: column;
   grid-auto-columns: auto;
   width: 100%;
   height: 100%;
   background: var(--dd-workspace-background);
   box-sizing: border-box;
   padding-top: 2px;
   padding-bottom: 2px;
   --dd-background: var(--dd-workspace-background);
}

.value-inside-tolerance { color: var(--dd-color-valid); }

.value-almost-outside-tolerance,
.value-outside-tolerance { color: var(--dd-color-invalid); }

.acquisition-check dd-form-item > dd-link-button:not(:last-child) { margin-right: var(--dd-form-layout-column-spacing); }

:root { --dd-fraction-row-spacing: 16px; }

.fraction { align-self: baseline; }

.fraction-editable { min-width: calc(var(--dd-number-field-input-width) + var(--dd-validation-state-width)); }

.fraction-readonly { min-width: 120px; }

.fraction-line {
   background: currentColor;
   height: 1px;
   margin-top: 5px;
   margin-bottom: 5px;
   width: 100%;
   margin-left: -5px;
}

.fraction-label { margin-bottom: var(--dd-form-layout-row-spacing); }

.fraction-operator {
   height: var(--dd-input-field-height);
   display: flex;
   justify-content: center;
   flex-direction: column;
}


/*------------------------------*/
/* Configuration                */
/*------------------------------*/

.bread-crumb-view {
   background: transparent;
   color: var(--dd-color-secondary);
   padding: 12px var(--dd-page-padding-x) 0 var(--dd-page-padding-x);
   min-height: 34px;
   --dd-toolbar-link-button-spacing: 4px;
}

.bread-crumb-view > :last-child { color: var(--dd-color-emphasize); }

.configuration-tabs { margin-top: 1px; }

:root {
   --dd-device-header-image-margin-right: 24px;
}

.device-header-image {
   max-height: 80px;
   max-width: 80px;
   margin-right: var(--dd-device-header-image-margin-right);
}

.device-header-title { font: var(--dd-font-title); }


/*------------------------------*/
/* Oscilloscope                 */
/*------------------------------*/

.dd-osc-graph.primary-line {
   stroke: var(--dd-color-highlight);
   stroke-width: 3;
}

.dd-osc-graph.secondary-line {
   stroke: var(--dd-color-standard);
   stroke-width: 2;
   stroke-dasharray: 6;
}

.dd-osc-graph.highlighted { stroke: #4E727A; }


/*------------------------------*/
/* Other                        */
/*------------------------------*/

:root { --dd-collapse-side-bar-button-width: 10px; }

.collapse-side-bar-button {
   cursor: default;
   background: var(--dd-primary-color-870);
   border-radius: 0;
   height: 100%;
   width: var(--dd-collapse-side-bar-button-width);
   padding: 0;
}


/*------------------------------*/
/* Rfid Reader                  */
/*------------------------------*/

.rfid-base {
   width: 150px;
   height: 150px;
   position: relative;
}

.rfid-plate {
   transform: scale(1.0);
   left: -150px;
}

.rfid-animated {
   animation-name: rfid-plate-reader;
   animation-duration: 4s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
}

.rfid-reader { left: 300px; }

.rfid-content {
   max-height: 200px;
   min-width: 450px;
}

@keyframes rfid-plate-reader {
   0% {
      left: -150px;
      top: 0;
      transform: scale(1.0);
   }

   30% {
      top: 20px;
      transform: scale(1.2);
   }

   60% {
      left: 150px;
      top: 0;
      transform: scale(1.0);
   }

   80% {
      left: 150px;
      top: 0;
      transform: scale(1.0);
   }

   100% {
      left: -150px;
      transform: scale(1.0);
   }
}

/*------------------------------*/
/* Dropzone                     */
/*------------------------------*/

.dropzone-container {
   width: 100%;
   height: 100%;
   position: absolute;
   display: none;
   top: 0;
   left: 0;
}

.dropzone-area-description-text-background {
   color: var(--dd-primary-color-970);
   font-size: 200%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: rgba(170, 170, 170, .5); /*uses the base colors --dd-primary-color-300*/
   border: 1px solid rgba(170, 170, 170, .8); /*uses the base colors --dd-primary-color-300*/
   border-radius: 4px;
   position: absolute;
   pointer-events: none;
}

.dropzone-area-description-text { margin: 10px 40px; }

.dropzone-container input[type=file] {
   position: absolute;
   width: 100%;
   height: 100%;
   opacity: 0;
}

.dropzone-area {
   border: 2px dashed var(--dd-primary-color-300);
   background: rgba(0, 0, 0, .5);
   border-radius: 8px;
   width: 100%;
   display: flex;
   margin: 2px;
   align-items: center;
}