@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/font/IBMPlexSans-Regular.0148c4ca34.woff2) format("woff2");
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/font/IBMPlexSans-Medium.a2411df190.woff2) format("woff2");
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/font/IBMPlexSans-SemiBold.d1f5f89450.woff2) format("woff2");
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/font/IBMPlexSans-Bold.be843c5b08.woff2) format("woff2");
}

body {
  font-family: var(--MDsim-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--MDsim-background-color);
  margin: 0;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
}

:root, [data-theme="dark"] {
  --MDsim-font-color: #fff;
  --MDsim-icon-color: #fff;
  --MDsim-highlighted-font-color: #102835;
  --MDsim-selected-color: #98c6e5;
  --MDsim-highlight-color: #98c6e5;
  --MDsim-button-color: #0082a9;
  --MDsim-slider-color: #7b98aca6;
  --MDsim-button-disabled-color: #136582;
  --MDsim-row-color: #0082a9;
  --MDsim-function-color: #0082a9;
  --MDsim-header-color: #21516a;
  --MDsim-background-login-color: #00546e;
  --MDsim-background-box-color: #21516a;
  --MDsim-background-modal-color: #153546;
  --MDsim-background-placeholder-color: #224456;
  --MDsim-background-color: #102835;
  --MDsim-error-color: #ed6a5e;
  --MDsim-green-color: #2fa61f;
  --MDsim-warning-color: #ff9800;
  --MDsim-yellow-color: #ffe44a;
  --MDsim-disabled-color: gray;
  --MDsim-black-color: #000;
  --MDsim-transparent-color: transparent;
  --MDsim-neutral-toggle-background: #abb2b7;
  --MDsim-neutral-toggle-knob: #d9d9d9;
  --MDsim-gradient-dark-green: #2fa61f;
  --MDsim-gradient-light-green: #3bab22;
  --MDsim-gradient-brillant-green: #87ff01;
  --MDsim-gradient-pale-green: #c9ff8c;
  --MDsim-gradient-light-yellow: #fbe34a;
  --MDsim-gradient-yellow: #ffdc00;
  --MDsim-gradient-orange: #d16900;
  --MDsim-gradient-dark-orange: #c64b1a;
  --MDsim-gradient-red: #b51c0b;
  --MDsim-gradient-dark-red: #b41b0b;
}

:root {
  --MDsim-font-family: "IBM Plex Sans", sans-serif;
  --MDsim-font-size-xxsmall: 8px;
  --MDsim-font-size-xsmall: 9px;
  --MDsim-font-size-small: 10px;
  --MDsim-font-size-medium: 12px;
  --MDsim-font-size-large: 14px;
  --MDsim-font-size-xlarge: 16px;
  --MDsim-font-size-title: 20px;
  --MDsim-font-size-title-large: 24px;
  --MDsim-font-size-title-xlarge: 30px;
  --MDsim-font-size-title-xxlarge: 36px;
  --MDsim-font-weight-light: 300;
  --MDsim-font-weight-regular: 400;
  --MDsim-font-weight-medium: 500;
  --MDsim-font-weight-bold: 600;
  --MDsim-font-weight-xbold: 700;
  --MDsim-transition-colors: colors .15s ease-in-out;
  --MDsim-transition-opacity: opacity .15s ease-in-out;
  --MDsim-transition-background-color: background-color .15s ease-in-out;
  --MDsim-transition-border-color: border-color .15s ease-in-out;
  --MDsim-transition-box-shadow: box-shadow .15s ease-in-out;
  --MDsim-transition-all: all .15s ease-in-out;
  --MDsim-main-layout-height: 100vh;
  --MDsim-main-layout-width: 100vw;
  --MDsim-app-grid-row-gap: 25px;
  --MDsim-app-grid-column-gap: 30px;
  --MDsim-grid-template-rows: 50px 1fr auto;
  --MDsim-grid-template-columns: auto 1fr auto;
  --MDsim-content-area-height: calc(100vh - var(--MDsim-top-bar-height));
  --MDsim-top-bar-margins: 30px;
  --MDsim-bottom-bar-margins: 30px;
  --MDsim-top-bar-gap: 25px;
  --MDsim-top-bar-right-gap: 12px;
  --MDsim-action-buttons-gap: 5px;
  --MDsim-pain-type-button-gap: 6px;
  --MDsim-border-radius-small: 5px;
  --MDsim-border-radius-medium: 10px;
  --MDsim-border-radius-large: 15px;
  --MDsim-border-radius-xlarge: 20px;
  --MDsim-border-radius-xxlarge: 25px;
  --MDsim-border-radius-xxxlarge: 30px;
  --MDsim-border-radius-circle: 50%;
  --MDsim-border-width-thin: 1px;
  --MDsim-border-width-medium: 2px;
  --MDsim-border-width-thick: 3px;
  --MDsim-border-width-xthick: 4px;
  --MDsim-border-style: solid;
  --MDsim-sidebar-padding: 15px;
  --MDsim-sidebar-elements-gap: 25px;
  --MDsim-left-side-bar-width-small: 250px;
  --MDsim-left-side-bar-width-medium: 270px;
  --MDsim-left-side-bar-width-large: 350px;
  --MDsim-right-side-bar-width-small: 300px;
  --MDsim-right-side-bar-width-medium: 350px;
  --MDsim-right-side-bar-width-large: 400px;
  --MDsim-form-controls-height: 30px;
  --MDsim-button-height: 32px;
  --MDsim-button-width: 120px;
  --MDsim-measurement-width: 60px;
  --MDsim-measurement-height: 25px;
  --MDsim-icon-button-height: 30px;
  --MDsim-icon-button-width: 30px;
  --MDsim-icon-button-height-small: 25px;
  --MDsim-icon-button-width-small: 25px;
  --MDsim-icon-button-width-xsmall: 20px;
  --MDsim-icon-button-height-xsmall: 20px;
  --MDsim-icon-button-height-micro: 16px;
  --MDsim-icon-button-width-micro: 16px;
  --MDsim-icon-button-height-medium: 50px;
  --MDsim-icon-button-width-medium: 50px;
  --MDsim-icon-button-height-large: 60px;
  --MDsim-icon-button-width-large: 60px;
  --MDsim-icon-button-width-xlarge: 80px;
  --MDsim-icon-button-height-xlarge: 80px;
  --MDsim-icon-button-height-long: 50px;
  --MDsim-icon-button-width-long: 50px;
  --MDsim-icon-button-width-without-background: 16px;
  --MDsim-icon-button-height-without-background: 16px;
  --MDsim-icon-button-width-without-background-large: 25px;
  --MDsim-icon-button-height-without-background-large: 25px;
  --MDsim-icon-svg-width-small: 12px;
  --MDsim-icon-svg-height-small: 12px;
  --MDsim-icon-svg-width: 16px;
  --MDsim-icon-svg-height: 16px;
  --MDsim-icon-svg-width-medium: 20px;
  --MDsim-icon-svg-height-medium: 20px;
  --MDsim-icon-svg-width-large: 40px;
  --MDsim-icon-svg-height-large: 40px;
  --MDsim-icon-svg-width-xlarge: 50px;
  --MDsim-icon-svg-height-xlarge: 50px;
  --MDsim-icon-svg-width-xxlarge: 60px;
  --MDsim-icon-svg-height-xxlarge: 60px;
  --MDsim-icon-svg-width-xxxlarge: 80px;
  --MDsim-icon-svg-height-xxxlarge: 80px;
  --MDsim-icon-svg-width-xxxxlarge: 100px;
  --MDsim-icon-svg-height-xxxxlarge: 100px;
  --MDsim-icon-svg-width-without-background: 20px;
  --MDsim-icon-svg-height-without-background: 20px;
  --MDsim-icon-svg-width-without-background-large: 35px;
  --MDsim-icon-svg-height-without-background-large: 35px;
  --MDsim-widget-box-title-height-small: 30px;
  --MDsim-widget-box-title-height-large: 40px;
  --MDsim-footer-height: 50px;
  --MDsim-top-bar-right-padding: 10px;
  --MDsim-top-bar-action-buttons-width: 7vw;
  --MDsim-top-bar-action-buttons-right-padding: 15px;
  --MDsim-top-bar-plan-state-width: 550px;
  --MDsim-top-bar-height: 70px;
  --MDsim-top-bar-left-padding: 50px;
  --MDsim-navigation-bar-logo-height: 15px;
  --MDsim-navigation-bar-hospital-height: 30px;
  --MDsim-search-fields-height: 30px;
  --MDsim-text-box-height: 25px;
  --Toggle-theme-width: 50px;
  --Toggle-theme-height: 23px;
  --Toggle-theme-bubble-left: 2px;
  --Toggle-theme-bubble-bottom: 1px;
  --Toggle-theme-bubble-border: 2px;
  --Toggle-theme-bubble-size: calc(var(--Toggle-theme-height) -
      (
        var(--Toggle-theme-bubble-bottom) * 2 +
          var(--Toggle-theme-bubble-border) * 2
      ));
  --Slider-height: 30px;
  --Slider-bubble-top: 10px;
  --Slider-bubble-size: calc(var(--Slider-height) - (var(--Slider-bubble-top) * 2));
  --MDsim-patient-table-row-height: 15px;
  --MDsim-patient-dashboard-grid-gap: 30px;
  --MDsim-patient-dashboard-grid-margin-left: calc(-1 * var(--MDsim-patient-dashboard-grid-gap));
  --MDsim-patient-dashboard-grid-margin-right: calc(-1 * var(--MDsim-patient-dashboard-grid-gap));
  --MDsim-spinesim-study-details-elements-width: 86px;
  --MDsim-spinesim-study-details-elements-height: 130px;
  --MDsim-pain-modal-width: 65vw;
  --MDsim-pain-modal-height: 80vh;
  --MDsim-pain-gradient-width: 60px;
  --MDsim-pain-qualification-widget-width: 380px;
  --MDsim-pain-level-button-height: 30px;
  --MDsim-pain-type-button-padding: 8px 4px;
  --MDsim-pain-widget-gap: 20px;
  --MDsim-pain-section-gap: 15px;
  --MDsim-pain-svg-container-height: 95%;
  --MDsim-pain-svg-min-height: 400px;
  --MDsim-pain-thumbnail-inline-padding: 5px;
  --MDsim-modal-border-radius: 25px;
  --MDsim-modal-padding: 25px;
  --MDsim-modal-content-padding: 10px;
  --MDsim-modal-section-gap: 25px;
  --MDsim-modal-element-gap: 15px;
  --MDsim-modal-small-gap: 10px;
  --MDsim-modal-title-font-size: 30px;
  --MDsim-modal-subtitle-font-size: 18px;
  --MDsim-modal-section-title-gap: 5px;
  --MDsim-modal-button-min-width: 120px;
  --MDsim-modal-textarea-padding: 15px;
  --MDsim-modal-textarea-min-height: 180px;
  --MDsim-modal-checkbox-size: 16px;
  --MDsim-modal-radio-size: 16px;
  --MDsim-modal-input-gap: 50px;
  --MDsim-modal-button-gap: 15px;
  --MDsim-modal-checkbox-option-height: 35px;
  --MDsim-modal-close-button-position: 10px;
  --MDsim-modal-content-width: 90%;
  --MDsim-modal-width: 95vw;
  --MDsim-modal-height: 95vh;
  --MDsim-modal-min-height: 500px;
  --MDsim-modal-shadow: 0px 0px 10px;
  --MDsim-modal-asset-card-gap: 15px;
  --MDsim-modal-asset-grid-min-width: 120px;
  --MDsim-align-parameter-select-height: 20px;
  --MDsim-align-tool-widget-vertical-gap: 15px;
  --MDsim-settings-items-gap: 30px;
}

.snackbar-success .snackbar-content {
  --snackbar-bg-color: #e9f6ec;
  --snackbar-icon-color: #2d8a44;
  --snackbar-title-color: #2c6a3c;
  --snackbar-message-color: #3f4f42;
  --snackbar-close-color: #2d8a44;
  --snackbar-border-color: #cde7d6;
}

[data-theme="dark"] .snackbar-success .snackbar-content {
  --snackbar-bg-color: #1f3a2b;
  --snackbar-icon-color: #79d79e;
  --snackbar-title-color: #c5f1d3;
  --snackbar-message-color: #e7f2ea;
  --snackbar-close-color: #79d79e;
  --snackbar-border-color: #2f6b45;
}

.snackbar-info .snackbar-content {
  --snackbar-bg-color: #e4f0fb;
  --snackbar-icon-color: #3f82c3;
  --snackbar-title-color: #2d6fad;
  --snackbar-message-color: #3b4d63;
  --snackbar-close-color: #3f82c3;
  --snackbar-border-color: #c9ddf3;
}

[data-theme="dark"] .snackbar-info .snackbar-content {
  --snackbar-bg-color: #0f2941;
  --snackbar-icon-color: #7ebcff;
  --snackbar-title-color: #c4e1ff;
  --snackbar-message-color: #e9f3ff;
  --snackbar-close-color: #7ebcff;
  --snackbar-border-color: #2f5f9c;
}

.snackbar-warning .snackbar-content {
  --snackbar-bg-color: #fdf0e1;
  --snackbar-icon-color: #d68a26;
  --snackbar-title-color: #b86a0f;
  --snackbar-message-color: #5b4330;
  --snackbar-close-color: #d68a26;
  --snackbar-border-color: #f2d6b5;
}

[data-theme="dark"] .snackbar-warning .snackbar-content {
  --snackbar-bg-color: #3a2a12;
  --snackbar-icon-color: #ffbf66;
  --snackbar-title-color: #ffd79a;
  --snackbar-message-color: #f5ead9;
  --snackbar-close-color: #ffbf66;
  --snackbar-border-color: #b47522;
}

.snackbar-error .snackbar-content {
  --snackbar-bg-color: #f8eaea;
  --snackbar-icon-color: #d64545;
  --snackbar-title-color: #b23a3a;
  --snackbar-message-color: #5a4141;
  --snackbar-close-color: #d64545;
  --snackbar-border-color: #e6c3c3;
}

[data-theme="dark"] .snackbar-error .snackbar-content {
  --snackbar-bg-color: #3a1b1b;
  --snackbar-icon-color: #ff9b9b;
  --snackbar-title-color: #ffc7c7;
  --snackbar-message-color: #f4e1e1;
  --snackbar-close-color: #ff9b9b;
  --snackbar-border-color: #b64b4b;
}

.snackbar-loading .snackbar-content {
  --snackbar-bg-color: #f0f4f8;
  --snackbar-icon-color: #5a7d9a;
  --snackbar-title-color: #3d5a73;
  --snackbar-message-color: #4a5568;
  --snackbar-close-color: #5a7d9a;
  --snackbar-border-color: #d1dce5;
}

[data-theme="dark"] .snackbar-loading .snackbar-content {
  --snackbar-bg-color: #1a2d3d;
  --snackbar-icon-color: #7eb8da;
  --snackbar-title-color: #b8d4e8;
  --snackbar-message-color: #d0e0ed;
  --snackbar-close-color: #7eb8da;
  --snackbar-border-color: #3d6080;
}

.react-grid-layout {
  transition: height .2s;
  position: relative;
}

.react-grid-item {
  transition: left .2s, top .2s, width .2s, height .2s;
}

.react-grid-item img {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}

.react-grid-item.resizing {
  z-index: 1;
  will-change: width, height;
  transition: none;
}

.react-grid-item.react-draggable-dragging {
  z-index: 3;
  will-change: transform;
  transition: none;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  opacity: .2;
  z-index: 2;
  -webkit-user-select: none;
  user-select: none;
  -o-user-select: none;
  background: red;
  transition-duration: .1s;
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.react-grid-item > .react-resizable-handle {
  width: 20px;
  height: 20px;
  position: absolute;
}

.react-grid-item > .react-resizable-handle:after {
  content: "";
  border-bottom: 2px solid #0006;
  border-right: 2px solid #0006;
  width: 5px;
  height: 5px;
  position: absolute;
  bottom: 3px;
  right: 3px;
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  cursor: sw-resize;
  bottom: 0;
  left: 0;
  transform: rotate(90deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  cursor: se-resize;
  bottom: 0;
  right: 0;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  cursor: nw-resize;
  top: 0;
  left: 0;
  transform: rotate(180deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  cursor: ne-resize;
  top: 0;
  right: 0;
  transform: rotate(270deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-w, .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  cursor: ew-resize;
  margin-top: -10px;
  top: 50%;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-n, .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  cursor: ns-resize;
  margin-left: -10px;
  left: 50%;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}

.react-resizable {
  position: relative;
}

.react-resizable-handle {
  box-sizing: border-box;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-origin: content-box;
  width: 20px;
  height: 20px;
  padding: 0 3px 3px 0;
  position: absolute;
}

.react-resizable-handle-sw {
  cursor: sw-resize;
  bottom: 0;
  left: 0;
  transform: rotate(90deg);
}

.react-resizable-handle-se {
  cursor: se-resize;
  bottom: 0;
  right: 0;
}

.react-resizable-handle-nw {
  cursor: nw-resize;
  top: 0;
  left: 0;
  transform: rotate(180deg);
}

.react-resizable-handle-ne {
  cursor: ne-resize;
  top: 0;
  right: 0;
  transform: rotate(270deg);
}

.react-resizable-handle-w, .react-resizable-handle-e {
  cursor: ew-resize;
  margin-top: -10px;
  top: 50%;
}

.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}

.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}

.react-resizable-handle-n, .react-resizable-handle-s {
  cursor: ns-resize;
  margin-left: -10px;
  left: 50%;
}

.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}

.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}

* {
  transition: color .2s, box-shadow .5s, background-color .5s, margin-left .5s, height .5s, width .5s;
}

input, select, textarea, button {
  font-family: inherit;
}

.App {
  background: var(--MDsim-background-color);
  width: 100vw;
  height: 100vh;
  color: var(--MDsim-font-color);
  font-size: 16px;
  font-family: var(--MDsim-font-family);
  -webkit-user-select: none;
  user-select: none;
  flex-direction: column;
  font-weight: 400;
  display: flex;
  position: relative;
  overflow-x: hidden;
}

.App-title-windows {
  font-size: var(--MDsim-font-size-title);
  font-weight: 600;
}

.App-title-widgets {
  font-size: var(--MDsim-font-size-title);
}

.App-text-medium {
  font-size: var(--MDsim-font-size-medium);
}

.App-text-xsmall {
  font-size: var(--MDsim-font-size-xsmall);
}

.App-text-small {
  font-size: var(--MDsim-font-size-small);
}

.App-text-large {
  font-size: var(--MDsim-font-size-large);
}

.App-text-xlarge {
  font-size: var(--MDsim-font-size-xlarge);
}

.App-styled-text {
  color: var(--MDsim-font-color);
  font-style: italic;
  text-decoration: none;
}

.App-styled-link {
  color: var(--MDsim-font-color);
  text-decoration: underline;
}

.App-bold-text {
  font-weight: 600;
}

.App-normal-text {
  font-weight: 400;
}

svg path {
  fill: var(--MDsim-icon-color);
}

svg .stroke-path {
  fill: none;
  stroke: var(--MDsim-font-color, white);
}

svg .filled-path {
  fill: var(--MDsim-background-box-color, white);
}

.App-option-circle {
  border: 2px solid var(--MDsim-font-color);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin-left: 10px;
  margin-right: 20px;
}

.App-no-link-style {
  color: inherit;
  text-decoration: none;
}

::-webkit-scrollbar {
  display: none;
}

* {
  scrollbar-width: none;
}

.snackbar-container {
  z-index: 10000;
  opacity: 0;
  width: 320px;
  transition: var(--MDsim-transition-all);
  position: fixed;
  right: 20px;
}

.snackbar-container.snackbar-top {
  top: 20px;
  transform: translateY(-16px);
}

.snackbar-container.snackbar-bottom {
  bottom: 20px;
  transform: translateY(16px);
}

.snackbar-container.snackbar-visible {
  opacity: 1;
  transform: translateY(0);
}

.snackbar-container.snackbar-exiting {
  opacity: 0;
}

.snackbar-container.snackbar-exiting.snackbar-top {
  transform: translateY(-20px);
}

.snackbar-container.snackbar-exiting.snackbar-bottom {
  transform: translateY(20px);
}

.snackbar-content {
  border: 1px solid var(--snackbar-border-color, transparent);
  background-color: var(--snackbar-bg-color);
  border-radius: 12px;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  display: flex;
  box-shadow: 0 8px 26px #10182814;
}

.snackbar-icon {
  width: 28px;
  height: 28px;
  color: var(--snackbar-icon-color);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  display: flex;
}

.snackbar-text {
  text-align: left;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.snackbar-title {
  color: var(--snackbar-title-color);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.snackbar-message {
  color: var(--snackbar-message-color);
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}

.snackbar-close-button {
  cursor: pointer;
  color: var(--snackbar-close-color);
  opacity: .8;
  transition: var(--MDsim-transition-opacity), var(--MDsim-transition-background-color);
  background: none;
  border: none;
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
  padding: 6px;
  display: flex;
}

.snackbar-close-button:hover {
  opacity: 1;
  background-color: #0000000a;
}

.snackbar-close-button:active {
  opacity: .8;
}

.notification-stack {
  z-index: 10000;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
  flex-direction: column-reverse;
  gap: 12px;
  max-height: calc(100vh - 40px);
  padding-block: 15px;
  display: flex;
  position: fixed;
  bottom: 10px;
  right: 20px;
  overflow-y: auto;
}

.notification-stack.fade-top {
  mask-image: linear-gradient(#0000 0%, #000 20px);
}

.notification-stack.fade-bottom {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 20px), #0000 100%);
  mask-image: linear-gradient(#000 calc(100% - 620px), #0000 100%);
}

.notification-stack.fade-top.fade-bottom {
  mask-image: linear-gradient(#0000 0%, #000 20px calc(100% - 20px), #0000 100%);
}

.notification-stack::-webkit-scrollbar {
  display: none;
}

.notification-stack .snackbar-container {
  position: relative;
  top: auto;
  bottom: auto;
  right: auto;
}

.notification-stack.notification-stack-top {
  flex-direction: column;
  top: 20px;
  bottom: auto;
}

.notification-stack.notification-stack-bottom {
  flex-direction: column-reverse;
  top: auto;
  bottom: 20px;
}

@media (width <= 640px) {
  .snackbar-container {
    width: auto;
    min-width: 0;
    max-width: none;
    left: 12px;
    right: 12px;
  }

  .notification-stack {
    left: 12px;
    right: 12px;
  }
}

.snackbar-loading-dots {
  gap: 3px;
  margin-left: 4px;
  display: inline-flex;
}

.snackbar-loading-dots span {
  background-color: currentColor;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  animation: 1.4s ease-in-out infinite both loadingDot;
}

.snackbar-loading-dots span:first-child {
  animation-delay: -.32s;
}

.snackbar-loading-dots span:nth-child(2) {
  animation-delay: -.16s;
}

.snackbar-loading-dots span:nth-child(3) {
  animation-delay: 0s;
}

@keyframes loadingDot {
  0%, 80%, 100% {
    opacity: .3;
    transform: scale(.8);
  }

  40% {
    opacity: 1;
    transform: scale(1);
  }
}

.App-tooltip-wrapper {
  justify-content: center;
  align-items: center;
  width: fit-content;
  display: flex;
  position: relative;
}

.App-tooltip-content {
  background-color: var(--MDsim-background-color);
  color: var(--MDsim-font-color);
  text-align: center;
  z-index: 10000;
  white-space: normal;
  border: 1px solid var(--MDsim-highlight-color);
  pointer-events: none;
  border-radius: 5px;
  max-width: 250px;
  padding: 5px;
  position: fixed;
}

.App-tooltip-content.jsx-content {
  text-align: left;
  max-width: 300px;
  padding: 8px 10px;
  line-height: 1.4;
}

.App-tooltip-content.jsx-content ul {
  margin: 5px 0;
  padding-left: 20px;
  list-style-type: disc;
}

.App-tooltip-content.jsx-content ol {
  margin: 5px 0;
  padding-left: 20px;
  list-style-type: decimal;
}

.App-tooltip-content.jsx-content li {
  margin: 3px 0;
}

.App-tooltip-content.jsx-content p {
  margin: 5px 0;
}

.App-tooltip-content.jsx-content strong {
  color: var(--MDsim-highlight-color);
  font-weight: 600;
}

.App-tooltip-content.jsx-content em {
  font-style: italic;
}

.App-tooltip-content.jsx-content br {
  line-height: 1.6;
}

.App-tooltip-content.top:after {
  content: "";
  border-style: solid;
  border-width: 6px 6px 0;
  border-color: var(--MDsim-highlight-color) transparent transparent transparent;
  margin-left: -6px;
  position: absolute;
  top: 100%;
  left: 50%;
}

.App-tooltip-content.top:before {
  content: "";
  border-style: solid;
  border-width: 5px 5px 0;
  border-color: var(--MDsim-background-color) transparent transparent
    transparent;
  z-index: 1;
  margin-left: -5px;
  position: absolute;
  top: 100%;
  left: 50%;
}

.App-tooltip-content.bottom:after {
  content: "";
  border-style: solid;
  border-width: 0 6px 6px;
  border-color: transparent transparent var(--MDsim-highlight-color) transparent;
  margin-left: -6px;
  position: absolute;
  bottom: 100%;
  left: 50%;
}

.App-tooltip-content.bottom:before {
  content: "";
  border-style: solid;
  border-width: 0 5px 5px;
  border-color: transparent transparent var(--MDsim-background-color)
    transparent;
  z-index: 1;
  margin-left: -5px;
  position: absolute;
  bottom: 100%;
  left: 50%;
}

.App-tooltip-content.left:after {
  content: "";
  border-style: solid;
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent var(--MDsim-highlight-color);
  margin-top: -6px;
  position: absolute;
  top: 50%;
  left: 100%;
}

.App-tooltip-content.left:before {
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent
    var(--MDsim-background-color);
  z-index: 1;
  margin-top: -5px;
  position: absolute;
  top: 50%;
  left: 100%;
}

.App-tooltip-content.right:after {
  content: "";
  border-style: solid;
  border-width: 6px 6px 6px 0;
  border-color: transparent var(--MDsim-highlight-color) transparent transparent;
  margin-top: -6px;
  position: absolute;
  top: 50%;
  right: 100%;
}

.App-tooltip-content.right:before {
  content: "";
  border-style: solid;
  border-width: 5px 5px 5px 0;
  border-color: transparent var(--MDsim-background-color) transparent
    transparent;
  z-index: 1;
  margin-top: -5px;
  position: absolute;
  top: 50%;
  right: 100%;
}

.App-icon-button {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.App-icon-button.disabled {
  cursor: not-allowed;
  opacity: .5;
}

.App-icon-button > div {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.App-icon-button-long {
  height: var(--MDsim-form-controls-height);
  width: var(--MDsim-icon-button-width-long);
  border-radius: 25px;
}

.App-icon-button-circle {
  height: var(--MDsim-icon-button-height);
  width: var(--MDsim-icon-button-width);
  border-radius: 50%;
}

.App-icon-button-small {
  height: var(--MDsim-icon-button-height-small);
  width: var(--MDsim-icon-button-width-small);
}

.App-icon-button-micro {
  height: var(--MDsim-icon-button-height-micro);
  width: var(--MDsim-icon-button-width-micro);
}

.App-icon-button-medium {
  height: var(--MDsim-icon-button-height-medium);
  width: var(--MDsim-icon-button-width-medium);
}

.App-icon-button-large {
  height: var(--MDsim-icon-button-height-large);
  width: var(--MDsim-icon-button-width-large);
}

.App-icon-button-xlarge {
  height: var(--MDsim-icon-button-height-xlarge);
  width: var(--MDsim-icon-button-width-xlarge);
}

.App-icon-button-light {
  background-color: var(--MDsim-button-color);
  box-shadow: 0 0 1em 0 var(--MDsim-background-box-color);
}

.App-icon-button-light:hover {
  background-color: var(--MDsim-highlight-color);
  box-shadow: 0 0 1em 0 var(--MDsim-highlight-color);
}

.App-icon-button-dark {
  background-color: var(--MDsim-background-box-color);
  box-shadow: 0 0 1em 0 var(--MDsim-background-color);
}

.App-icon-button-dark:hover {
  background-color: var(--MDsim-button-color);
  box-shadow: 0 0 1em 0 var(--MDsim-button-color);
}

.icon-size-small svg {
  height: var(--MDsim-icon-svg-width-small);
  width: var(--MDsim-icon-svg-height-small);
}

.icon-size-default svg {
  height: var(--MDsim-icon-svg-width);
  width: var(--MDsim-icon-svg-height);
}

.icon-size-medium svg {
  height: var(--MDsim-icon-svg-height-medium);
  width: var(--MDsim-icon-svg-width-medium);
}

.icon-size-large svg {
  height: var(--MDsim-icon-svg-height-large);
  width: var(--MDsim-icon-svg-width-large);
}

.icon-size-xlarge svg {
  height: var(--MDsim-icon-svg-height-xlarge);
  width: var(--MDsim-icon-svg-width-xlarge);
}

.icon-size-xxlarge svg {
  height: var(--MDsim-icon-svg-height-xxlarge);
  width: var(--MDsim-icon-svg-width-xxlarge);
}

.icon-size-xxxlarge svg {
  height: var(--MDsim-icon-svg-height-xxxlarge);
  width: var(--MDsim-icon-svg-width-xxxlarge);
}

.icon-size-xxxxlarge svg {
  height: var(--MDsim-icon-svg-height-xxxxlarge);
  width: var(--MDsim-icon-svg-width-xxxxlarge);
}

.App-icon-button svg .filled-path {
  fill: var(--MDsim-font-color);
}

.App-icon-button svg .stroke-path {
  stroke: var(--MDsim-highlight-color);
}

.App-icon-button-toggled svg .filled-path {
  fill: var(--MDsim-font-color) !important;
}

.App-icon-button-toggled svg .stroke-path {
  fill: var(--MDsim-highlight-color) !important;
  stroke: var(--MDsim-highlight-color) !important;
}

.validation-history-buttons {
  z-index: 10;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  display: flex;
  position: absolute;
  top: 10px;
  left: 10px;
}

.validation-history-icon-light svg path {
  fill: #fff !important;
  stroke: #0000 !important;
}

.validation-history-icon-light svg line {
  stroke: #fff !important;
}

.validation-history-icon-dark svg path {
  fill: #000 !important;
  stroke: #0000 !important;
}

.validation-history-icon-dark svg line {
  stroke: #000 !important;
}

.validation-history-icon-disabled {
  opacity: .3;
  cursor: not-allowed;
  pointer-events: none;
}

.validation-history-icon {
  transition: opacity .2s;
}

.validation-history-icon:not(.validation-history-icon-disabled):hover {
  opacity: .8;
}

.App-button {
  height: var(--MDsim-button-height);
  width: var(--MDsim-button-width);
  max-width: var(--MDsim-button-width);
  box-sizing: border-box;
  text-wrap: nowrap;
  cursor: pointer;
  color: var(--MDsim-background-font-color);
  background-color: var(--MDsim-button-color);
  border: 0;
  border-radius: 25px;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: all .3s;
  display: flex;
}

.widget-action-button {
  width: 100%;
}

.App-button:not(:disabled):hover {
  color: var(--MDsim-background-font-color);
  background-color: var(--MDsim-button-color);
  box-shadow: 0 0 .5em 0 var(--MDsim-button-color);
}

.App-button:active {
  color: var(--MDsim-highlighted-font-color);
  background-color: var(--MDsim-highlight-color);
  box-shadow: 0 0 1em 0 var(--MDsim-highlight-color);
}

.App-button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.App-button.warning {
  background-color: var(--MDsim-warning-color);
}

.App-button.alert {
  background-color: var(--MDsim-error-color);
}

.App-button.active {
  color: var(--MDsim-highlighted-font-color);
  background-color: var(--MDsim-highlight-color);
  box-shadow: 0 0 1em 0 var(--MDsim-highlight-color);
}

.App-button.active:hover {
  color: var(--MDsim-highlighted-font-color);
  background-color: var(--MDsim-highlight-color);
  box-shadow: 0 0 1.2em 0 var(--MDsim-highlight-color);
}

.App-button-with-icon-wrapper {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  display: flex;
}

.App-button-with-icon-value {
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.App-button-with-icon-wrapper svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.App-button-light-blue {
  background-color: var(--MDsim-button-color);
  box-shadow: 0 0 1em 0 var(--MDsim-background-box-color);
}

.App-button-light-blue:hover {
  background-color: var(--MDsim-highlight-color);
  box-shadow: 0 0 1em 0 var(--MDsim-highlight-color);
}

.App-button-dark-blue {
  background-color: var(--MDsim-background-box-color);
  box-shadow: 0 0 1em 0 var(--MDsim-background-box-color);
}

.App-button-dark-blue:hover {
  background-color: var(--MDsim-highlight-color);
  box-shadow: 0 0 1em 0 var(--MDsim-highlight-color);
}

.App-button-in-top-bar {
  height: var(--MDsim-button-height);
  flex-shrink: 0;
  width: fit-content;
  min-width: 120px;
  max-width: 150px;
}

.range-slider-container {
  pointer-events: auto;
  touch-action: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  display: flex;
  position: relative;
}

.range-slider-container.range-slider-vertical {
  height: auto;
  min-height: 200px;
}

.range-slider-markers {
  pointer-events: none;
  z-index: 5;
  width: 100%;
  height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.range-slider-marker {
  z-index: 10;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  display: flex;
  position: absolute;
  transform: translateX(-50%);
}

.range-slider-marker .marker-arrow, .range-slider-marker-arrow {
  border: 8px solid #0000;
  border-top: 0;
  border-bottom: 15px solid;
  width: 0;
  height: 0;
}

.marker-label {
  white-space: nowrap;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  text-shadow: 0 1px 2px #0000001a;
  font-size: 11px;
  font-weight: 500;
}

.App-slice-controller {
  appearance: none;
  cursor: col-resize;
  background-color: var(--MDsim-slider-color);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 10;
  border-radius: 10px;
  outline: none;
  width: 100%;
  height: 4px;
  padding: 0;
  position: relative;
  pointer-events: auto !important;
}

.App-slice-controller:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.App-slice-controller::-webkit-slider-runnable-track {
  height: var(--Slider-height);
}

.App-slice-controller:disabled::-webkit-slider-runnable-track {
  opacity: .5;
}

.App-slice-controller::-moz-range-track {
  height: var(--Slider-height);
}

.App-slice-controller:disabled::-moz-range-track {
  opacity: .5;
}

.App-slice-controller::-webkit-slider-thumb {
  appearance: none;
  width: var(--Slider-bubble-size);
  height: var(--Slider-bubble-size);
  background: var(--MDsim-icon-color);
  cursor: pointer;
  top: var(--Slider-bubble-top);
  z-index: 10;
  border-radius: 50%;
  position: relative;
}

.App-slice-controller:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
  opacity: .5;
}

.App-slice-controller::-moz-range-thumb {
  height: var(--Slider-bubble-size);
  width: var(--Slider-bubble-size);
  background: var(--MDsim-icon-color);
  cursor: pointer;
  top: var(--Slider-bubble-top);
  border-radius: 50%;
  position: relative;
}

.App-slice-controller:disabled::-moz-range-thumb {
  cursor: not-allowed;
  opacity: .5;
}

.image-viewer {
  border-radius: 20px;
  outline: 1.5px solid #fff3;
  justify-content: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.image-viewer-content {
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.image-viewer img {
  object-fit: contain;
  border-radius: 20px;
  width: 100%;
  height: 100%;
}

.image-viewer-lock, .image-viewer-close {
  z-index: 10;
  position: absolute;
  top: 10px;
  right: 10px;
}

.image-viewer-button-no-bg.App-button {
  box-shadow: none !important;
  background: none !important;
}

.image-viewer-icon-light .App-button-with-icon-value, .image-viewer-icon-dark .App-button-with-icon-value {
  color: var(--MDsim-font-color) !important;
}

.image-viewer-slider {
  z-index: 10;
  width: 250px;
  position: absolute;
  bottom: 100px;
  transform: rotate(-90deg);
}

.image-viewer-zoom-container {
  z-index: 10;
  flex-direction: column;
  align-items: center;
  min-height: 250px;
  display: flex;
  position: relative;
}

.image-viewer-zoom-icon-button {
  color: var(--MDsim-font-color);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  min-width: 24px;
  min-height: 24px;
  padding: 4px;
  transition: opacity .2s;
  display: flex;
}

.image-viewer-zoom-icon-button:hover {
  opacity: .7;
}

.image-viewer-zoom-icon-button:active {
  opacity: .5;
}

.image-viewer-zoom-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.image-viewer-zoom-slider-wrapper {
  pointer-events: auto;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.image-viewer-zoom-slider {
  z-index: 10;
  width: 200px;
  position: relative;
  transform: rotate(-90deg);
  pointer-events: auto !important;
}

.image-viewer-zoom-slider .range-slider-container {
  pointer-events: auto !important;
}

.image-viewer-zoom-slider input[type="range"] {
  z-index: 100;
  position: relative;
  pointer-events: auto !important;
}

.image-viewer-zoom-label {
  white-space: nowrap;
  pointer-events: none;
  text-align: center;
  min-width: 40px;
  transition: var(--MDsim-transition-all);
  z-index: 1;
  font-size: 12px;
  font-weight: 500;
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
}

.image-viewer-icon-light .image-viewer-zoom-icon, .image-viewer-icon-dark .image-viewer-zoom-icon {
  color: var(--MDsim-font-color);
}

.image-viewer-zoom-controls {
  z-index: 10;
  flex-direction: column;
  align-items: center;
  gap: 0;
  display: flex;
  position: absolute;
  bottom: 20px;
  right: 25px;
}

.image-viewer-controls {
  z-index: 10;
  flex-direction: column;
  align-items: center;
  gap: 0;
  display: flex;
  position: absolute;
  bottom: 20px;
  right: 5px;
}

.image-viewer-controls .range-slider-container.range-slider-vertical {
  width: var(--Slider-height);
  min-width: var(--Slider-height);
}

.image-viewer-controls .vertical-range-slider-container {
  margin-bottom: 15px;
}

.image-viewer-icon-light svg path {
  fill: var(--MDsim-font-color) !important;
}

.image-viewer-icon-light svg line {
  stroke: var(--MDsim-font-color) !important;
}

.image-viewer-icon-dark svg path {
  fill: var(--MDsim-font-color) !important;
}

.image-viewer-icon-dark svg line {
  stroke: var(--MDsim-font-color) !important;
}

.brightness-contrast-controls {
  z-index: 10;
  flex-direction: column;
  display: flex;
  position: absolute;
  bottom: 70px;
  right: 5px;
  transform: rotate(-90deg);
}

.brightness-contrast-wrapper {
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  display: flex;
}

.brightness-contrast-label {
  transform: rotate(90deg);
}

.image-viewer-icon-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.image-viewer-icon-with-bg {
  background-color: #0000004d;
  border-radius: 50%;
}

.image-viewer-notification {
  color: var(--MDsim-font-color);
  pointer-events: none;
  opacity: 0;
  transition: var(--MDsim-transition-all);
  z-index: 11;
  background-color: #000000b3;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 12px;
  position: absolute;
  bottom: 60px;
  right: 10px;
  transform: translateY(10px);
}

.image-viewer-notification.visible {
  opacity: 1;
  transform: translateY(0);
}

.image-viewer-flash {
  background-color: var(--MDsim-font-color);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  border-radius: 20px;
  position: absolute;
  inset: 0;
}

.image-viewer-flash.active {
  animation: .5s ease-out flash-animation;
}

@keyframes flash-animation {
  0% {
    opacity: 0;
  }

  25% {
    opacity: .8;
  }

  100% {
    opacity: 0;
  }
}

.App-neutral-toggle-container-vertical {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  display: flex;
}

.App-neutral-toggle-container-horizontal {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  display: flex;
}

.App-neutral-toggle-label-top, .App-neutral-toggle-label-left, .App-neutral-toggle-label-right {
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-font-color);
  font-family: var(--MDsim-font-family);
  -webkit-user-select: none;
  user-select: none;
}

.App-neutral-toggle-label-active {
  font-weight: 600;
}

.App-neutral-toggle-switch {
  width: var(--Toggle-theme-width);
  height: var(--Toggle-theme-height);
  cursor: pointer;
  display: inline-block;
  position: relative;
}

.App-neutral-toggle-switch-off, .App-neutral-toggle-switch-on {
  border-radius: var(--Toggle-theme-height);
  transition: background-color .5s;
  position: absolute;
  inset: 0;
}

.App-neutral-toggle-switch-off:before, .App-neutral-toggle-switch-on:before {
  content: "";
  height: var(--Toggle-theme-bubble-size);
  width: var(--Toggle-theme-bubble-size);
  background-color: var(--MDsim-neutral-toggle-knob);
  border-radius: 50%;
  transition: left .5s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.App-neutral-toggle-switch-off:before {
  left: 4px;
}

.App-neutral-toggle-switch-on:before {
  left: calc(var(--Toggle-theme-width) - var(--Toggle-theme-bubble-size) - 4px);
}

.App-neutral-toggle-switch-off {
  background-color: var(--neutral-toggle-off-bg, var(--MDsim-neutral-toggle-background));
}

.App-neutral-toggle-switch-on {
  background-color: var(--neutral-toggle-on-bg, var(--MDsim-neutral-toggle-background));
}

.App-neutral-toggle-switch-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.App-remote-viewer {
  background-color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.App-remote-viewer img {
  pointer-events: none;
  object-fit: contain;
  width: 100%;
  height: 100%;
  z-index: 1 !important;
}

.App-remote-viewer-watermark {
  color: #fff;
  z-index: 10;
  white-space: nowrap;
  pointer-events: none;
  background-color: #00000080;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 12px;
  font-weight: 500;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.App-remote-viewer-watermark--bottom-right {
  color: #fff;
  z-index: 10;
  white-space: nowrap;
  pointer-events: none;
  background-color: #1e64dc66;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 12px;
  font-weight: 500;
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.App-remote-viewer-slider-container {
  z-index: 20;
  justify-content: center;
  align-items: end;
  width: 50%;
  display: flex;
  position: absolute;
  bottom: 3%;
  left: 25%;
}

@keyframes pulse-frame {
  0% {
    box-shadow: inset 0 0 0 1px rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), .35),
      inset 0 0 18px rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), .1);
    opacity: .7;
  }

  100% {
    box-shadow: inset 0 0 0 2px rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), .75),
      inset 0 0 28px rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), .18);
    opacity: 1;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.ViewLoader-wrapper {
  border-radius: 20px;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.ViewLoader-wrapper.loading {
  border-radius: 20px;
  position: relative;
}

.ViewLoader-wrapper.loading:before {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  z-index: 101;
  animation: 1.8s ease-in-out infinite alternate pulse-frame;
  position: absolute;
  inset: 0;
}

.ViewLoader-overlay {
  backdrop-filter: blur(8px);
  z-index: 100;
  box-sizing: border-box;
  background: linear-gradient(135deg, #18181bf2 0%, #232328f2 100%);
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: flex;
  position: absolute;
  inset: 0;
}

.ViewLoader-content {
  transform-origin: center;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  animation: .3s ease-out fadeIn;
  display: flex;
  position: relative;
}

.ViewLoader-spinner {
  width: 80px;
  height: 80px;
  position: relative;
}

.ViewLoader-spinner-ring {
  border: 3px solid #0000;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
}

.ViewLoader-spinner-ring:first-child {
  border-top-color: var(--MDsim-highlight-color);
  animation: 1.5s linear infinite spin;
}

.ViewLoader-spinner-ring:nth-child(2) {
  border-top-color: rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), .6);
  width: 70%;
  height: 70%;
  animation: 1.2s linear infinite spin-reverse;
  top: 15%;
  left: 15%;
}

.ViewLoader-spinner-ring:nth-child(3) {
  border-top-color: rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), .3);
  width: 40%;
  height: 40%;
  animation: 1s linear infinite spin;
  top: 30%;
  left: 30%;
}

.ViewLoader-message {
  color: var(--MDsim-font-color);
  font-size: var(--MDsim-font-size-medium, 16px);
  text-align: center;
  letter-spacing: .3px;
  text-wrap: balance;
  max-width: min(32rem, 100%);
  font-weight: 500;
}

.ViewLoader-progress {
  flex-direction: column;
  gap: 12px;
  min-width: 280px;
  display: flex;
}

.ViewLoader-progress-bar {
  background: #ffffff1a;
  border-radius: 10px;
  width: 100%;
  height: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 4px #0003;
}

.ViewLoader-progress-fill {
  background: linear-gradient(90deg,
    var(--MDsim-highlight-color) 0%,
    rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), .8) 100%);
  height: 100%;
  box-shadow: 0 0 10px rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), .5);
  border-radius: 10px;
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

.ViewLoader-progress-fill:before {
  content: "";
  background: linear-gradient(90deg, #0000, #ffffff4d, #0000);
  animation: 1.5s infinite shine;
  position: absolute;
  inset: 0;
}

.ViewLoader-progress-text {
  color: rgba(var(--MDsim-font-color-rgb, 255, 255, 255), .9);
  font-size: var(--MDsim-font-size-small, 14px);
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
  font-weight: 500;
}

.Visualization-region-container {
  background-color: var(--MDsim-black-color);
  border-radius: 20px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  overflow: hidden;
}

.Visualization-region-header {
  box-sizing: border-box;
  height: var(--MDsim-widget-box-title-height-large);
  background-color: var(--MDsim-button-color);
  z-index: 2;
  border-radius: 20px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px;
  display: flex;
}

.Visualization-region-date {
  opacity: .8;
  margin-left: 10px;
  font-size: .9em;
}

.Visualization-region-content {
  box-sizing: border-box;
  grid-template-columns: .5fr 8fr .5fr;
  width: 100%;
  height: 100%;
  display: grid;
  overflow: hidden;
}

.Visualization-region-content-no-tabs {
  box-sizing: border-box;
  grid-template-columns: 8fr .5fr;
  width: 100%;
  height: 100%;
  display: grid;
  overflow: hidden;
}

.Visualization-region-views {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1%;
  display: flex;
  overflow-y: auto;
}

.Visualization-region-tools-wrapper {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.Visualization-region-tools {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding-inline: 10px;
  display: flex;
}

.Visualization-region-tools-side {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.Check-closing {
  pointer-events: none;
  animation: .5s ease-out forwards checkCloseAnimation;
}

@keyframes checkCloseAnimation {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(.8);
  }
}

.no-view-message {
  width: 100%;
  height: 100%;
  color: var(--MDsim-font-color);
  font-size: var(--MDsim-font-size-medium);
  text-align: center;
  opacity: .7;
  justify-content: center;
  align-items: center;
  display: flex;
}

.close-button-container {
  z-index: 1001;
  position: absolute;
  top: 10px;
  right: 10px;
}

.close-button-container .App-tooltip-content {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.close-button-container .App-tooltip-content.bottom:after, .close-button-container .App-tooltip-content.bottom:before {
  display: block;
}

.tool-pop-up {
  background-color: var(--MDsim-background-box-color);
  z-index: 5000;
  opacity: 0;
  visibility: hidden;
  border-radius: 20px;
  transition: opacity .3s, transform .3s, visibility .3s;
  overflow: hidden;
  box-shadow: 0 4px 12px #00000026;
}

.tool-pop-up.active {
  opacity: 1;
  visibility: visible;
}

.tool-pop-up:before {
  content: "";
  opacity: 0;
  border-left: 10px solid #0000;
  border-right: 10px solid #0000;
  transition: opacity .3s, transform .3s;
  position: absolute;
  left: 50%;
}

.tool-pop-up.top:before {
  border-top: 10px solid var(--MDsim-background-box-color);
  bottom: -10px;
  transform: translateX(-50%) translateY(-10px);
}

.tool-pop-up.bottom:before {
  border-bottom: 10px solid var(--MDsim-background-box-color);
  top: -10px;
  transform: translateX(-50%) translateY(10px);
}

.tool-pop-up.active:before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.tool-pop-up-content {
  padding: 16px;
}

.tool-pop-up-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  display: flex;
}

.tool-pop-up-title {
  color: var(--MDsim-font-color);
}

.tool-pop-up-body {
  color: var(--MDsim-font-color);
  font-size: 14px;
}

.tool-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  display: grid;
}

.angle-grid {
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

.advanced-angle-grid {
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.tool-grid .Tool {
  background-color: var(--MDsim-background-modal-color);
  cursor: pointer;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  transition: background-color .3s;
  display: flex;
}

.tool-grid .Tool:hover {
  background-color: var(--MDsim-hover-color);
}

.App-select-parent {
  min-width: 100px;
  height: var(--MDsim-button-height);
  border-radius: var(--MDsim-border-radius-xxlarge);
  background-color: var(--MDsim-background-box-color);
  transition: var(--MDsim-transition-all);
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  padding-inline: 12px;
  display: flex;
  position: relative;
}

.App-select-parent.disabled {
  background-color: var(--MDsim-disabled-background-color, #0000001a);
  opacity: .6;
  cursor: not-allowed;
}

.App-select-parent:focus-within {
  border-color: var(--MDsim-selected-color);
}

.App-select {
  cursor: pointer;
  height: 100%;
  color: var(--MDsim-font-color);
  background-color: var(--MDsim-background-box-color);
  text-align: center;
  font-size: 12px;
  font-family: var(--MDsim-font-family);
  border: none;
  border-radius: 15px;
  outline: none;
  width: 100%;
}

.App-select:focus, .App-select:focus-visible {
  outline: none;
}

.App-select.disabled, .App-select:disabled {
  color: var(--MDsim-disabled-color);
  cursor: not-allowed;
  background-color: #0000;
}

.App-select-placeholder, .App-select-option {
  color: #a3d3ec;
}

.labeled-select-container {
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  display: grid;
}

.labeled-select-container:not(:has(.labeled-select-label)), .labeled-select-container.no-label {
  align-items: center;
  display: flex;
}

.labeled-select-label {
  text-align: left;
}

.labeled-select-container .App-select-parent {
  min-width: unset;
  width: 100%;
}

.RangeSelect-container {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  width: 100%;
  display: grid;
}

.RangeSelect-container .App-select-parent {
  width: 100%;
}

.RangeSelect-divider {
  color: var(--MDsim-font-color);
  -webkit-user-select: none;
  user-select: none;
  font-size: 14px;
  font-weight: 500;
}

.RangeSelect-divider.disabled {
  color: var(--MDsim-disabled-color);
  opacity: .6;
}

.App-select-parent.error {
  border: 2px solid var(--error-color, #f44);
  box-shadow: 0 0 .3em 0 var(--error-color, #f44);
}

.error-message {
  color: var(--error-color, #f44);
  margin-top: 4px;
  font-size: 12px;
  position: absolute;
  top: 100%;
  left: 0;
}

.vertebra-management-container {
  flex-direction: column;
  gap: 10px;
  width: 100%;
  display: flex;
}

.vertebra-management-actions {
  justify-content: center;
  padding-top: 10px;
  display: flex;
}

.vertebra-management-actions .App-button {
  height: var(--MDsim-form-controls-height);
  background-color: var(--MDsim-background-box-color);
  color: var(--MDsim-font-color);
  cursor: pointer;
  box-shadow: 0 0 1em 0 var(--MDsim-background-color);
  border: none;
  border-radius: 15px;
  padding: 0 20px;
}

.vertebra-management-actions .App-button-disabled {
  opacity: .5;
  cursor: not-allowed;
}

.vertebra-management-actions .App-button:hover:not(.App-button-disabled) {
  background-color: var(--MDsim-hover-color);
}

.tools-and-dev-tools-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  display: flex;
}

.tools-container {
  flex-direction: column;
  justify-content: space-evenly;
  gap: 10px;
  display: flex;
}

.tool-pop-up-container {
  z-index: 1000;
  pointer-events: none;
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
}

.tool-pop-up-container .tool-pop-up {
  pointer-events: auto;
}

.check-tools-container {
  flex-direction: column;
  justify-content: space-evenly;
  display: flex;
}

.base-check-tools-container, .future-functionalities-container {
  flex-direction: column;
  justify-content: space-evenly;
  gap: 10px;
  display: flex;
}

.App-toggle-button {
  cursor: pointer;
  background-color: var(--MDsim-background-box-color);
  box-shadow: 0 0 1em 0 var(--MDsim-background-box-color);
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: relative;
}

.App-toggle-button:hover {
  background-color: var(--MDsim-highlight-color);
  box-shadow: 0 0 1em 0 var(--MDsim-highlight-color);
}

.App-toggle-button:hover .App-toggle-button-icon-container svg path {
  fill: var(--MDsim-background-box-color);
  stroke: var(--MDsim-background-box-color);
}

.App-toggle-button:hover .App-toggle-button-icon-container svg circle, .App-toggle-button:hover .App-toggle-button-icon-container svg line, .App-toggle-button:hover .App-toggle-button-icon-container svg polyline, .App-toggle-button:hover .App-toggle-button-icon-container svg polygon, .App-toggle-button:hover .App-toggle-button-icon-container svg image {
  stroke: var(--MDsim-background-box-color);
}

.App-toggle-button.disabled {
  cursor: not-allowed;
  opacity: .5;
  pointer-events: none;
}

.App-toggle-button.disabled:hover {
  background-color: var(--MDsim-background-box-color);
  box-shadow: 0 0 1em 0 var(--MDsim-background-box-color);
}

.App-toggle-button-circle {
  height: var(--MDsim-icon-button-height);
  width: var(--MDsim-icon-button-width);
  border-radius: 50%;
}

.App-toggle-button-long {
  height: var(--MDsim-form-controls-height);
  width: var(--MDsim-icon-button-width-long);
  border-radius: 25px;
}

.App-toggle-button-square {
  height: var(--MDsim-icon-button-height-medium);
  width: var(--MDsim-icon-button-height-medium);
  border-radius: 20%;
}

.App-toggle-button-small {
  height: var(--MDsim-icon-button-height-small);
  width: var(--MDsim-icon-button-width-small);
}

.App-toggle-button-selected, .App-toggle-button-selected:hover, .App-toggle-button-selected.disabled:hover {
  background-color: var(--MDsim-highlight-color);
}

.App-toggle-button-no-bg {
  box-shadow: none;
  height: var(--MDsim-icon-button-height-without-background-xlarge);
  width: var(--MDsim-icon-button-width-without-background-xlarge);
  background-color: #0000;
}

.App-toggle-button-no-bg:hover {
  box-shadow: none;
  background-color: #0000;
}

.App-toggle-button-no-bg:hover .App-toggle-button-icon-container svg path {
  fill: var(--MDsim-icon-color);
  stroke: var(--MDsim-icon-color);
}

.App-toggle-button-no-bg:hover .App-toggle-button-icon-container svg circle, .App-toggle-button-no-bg:hover .App-toggle-button-icon-container svg line, .App-toggle-button-no-bg:hover .App-toggle-button-icon-container svg polyline, .App-toggle-button-no-bg:hover .App-toggle-button-icon-container svg polygon {
  stroke: var(--MDsim-icon-color);
}

.App-toggle-button-no-bg.App-toggle-button-selected, .App-toggle-button-no-bg.App-toggle-button-selected:hover {
  background-color: var(--MDsim-transparent-color);
}

.App-toggle-button-icon {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.App-toggle-button-icon-container {
  justify-content: center;
  align-items: center;
  display: flex;
}

.App-toggle-button-icon-container.selected svg path {
  fill: var(--MDsim-background-box-color);
  stroke: var(--MDsim-background-box-color);
}

.App-toggle-button-icon-container.selected svg circle, .App-toggle-button-icon-container.selected svg line, .App-toggle-button-icon-container.selected svg polyline, .App-toggle-button-icon-container.selected svg polygon {
  stroke: var(--MDsim-background-box-color);
}

.App-toggle-button-text {
  text-align: center;
  word-wrap: normal;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.App-toggle-button svg {
  height: var(--MDsim-icon-svg-height-large);
  width: var(--MDsim-icon-svg-width-large);
}

.icon-size-small svg {
  height: var(--MDsim-icon-svg-width-small);
  width: var(--MDsim-icon-svg-height-small);
}

.icon-size-default svg {
  height: var(--MDsim-icon-svg-width);
  width: var(--MDsim-icon-svg-height);
}

.icon-size-medium svg {
  height: var(--MDsim-icon-svg-height-medium);
  width: var(--MDsim-icon-svg-width-medium);
}

.icon-size-large svg {
  height: var(--MDsim-icon-svg-height-large);
  width: var(--MDsim-icon-svg-width-large);
}

.icon-size-xlarge svg {
  height: var(--MDsim-icon-svg-height-xlarge);
  width: var(--MDsim-icon-svg-width-xlarge);
}

.icon-size-xxlarge svg {
  height: var(--MDsim-icon-svg-height-xxlarge);
  width: var(--MDsim-icon-svg-width-xxlarge);
}

.icon-size-xxxlarge svg {
  height: var(--MDsim-icon-svg-height-xxxlarge);
  width: var(--MDsim-icon-svg-width-xxxlarge);
}

.icon-size-xxxxlarge svg {
  height: var(--MDsim-icon-svg-height-xxxxlarge);
  width: var(--MDsim-icon-svg-width-xxxxlarge);
}

.App-toggle-button-no-bg svg {
  height: var(--MDsim-icon-svg-width-without-background-large);
  width: var(--MDsim-icon-svg-height-without-background-large);
}

.App-toggle-button-no-bg.App-toggle-button-selected svg path {
  fill: var(--MDsim-highlight-color);
  stroke: var(--MDsim-highlight-color);
}

.App-toggle-button-no-bg.App-toggle-button-selected svg circle, .App-toggle-button-no-bg.App-toggle-button-selected svg line, .App-toggle-button-no-bg.App-toggle-button-selected svg polyline, .App-toggle-button-no-bg.App-toggle-button-selected svg polygon {
  stroke: var(--MDsim-highlight-color);
}

.tool-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.tool-title {
  text-align: center;
  color: var(--MDsim-font-color);
  margin-top: 5px;
}

.App-widget-align {
  gap: var(--MDsim-sidebar-elements-gap);
  box-sizing: border-box;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  overflow-y: auto;
}

.App-widget-align .App-widget-box {
  height: fit-content;
}

.Align-plan-selection-flag {
  z-index: 10;
  background-color: var(--MDsim-background-color);
  --neutral-toggle-on-bg: var(--MDsim-button-color);
  border-radius: 20px 0 0;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.Align-plan-selection-flag-wrapper {
  background-color: var(--MDsim-background-box-color);
  border-radius: 15px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 5px 7.5px;
  display: flex;
}

.Align-plan-selection-text {
  color: var(--MDsim-highlight-color);
  opacity: .8;
  font-size: var(--MDsim-font-size-medium);
  text-align: left;
}

.Align-plan-selection-toggle {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  display: flex;
}

.Align-plan-selection-toggle-text {
  color: var(--MDsim-font-color);
  font-size: var(--MDsim-font-size-medium);
  white-space: nowrap;
}

.App-widget-box {
  background-color: var(--MDsim-background-modal-color);
  border-radius: 25px;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: all .3s;
  display: flex;
  overflow-y: visible;
}

.App-widget-box.collapsed {
  height: auto;
}

.App-widget-box-side-bar {
  background-color: var(--MDsim-background-box-color);
  box-shadow: 0 0 .5em 0 var(--MDsim-background-color);
}

.App-widget-box-no-bgColor {
  background-color: var(--MDsim-transparent-color);
  box-shadow: none;
}

.App-widget-box-title {
  width: 100%;
  height: var(--MDsim-widget-box-title-height-large);
  min-height: var(--MDsim-widget-box-title-height-large);
  background-color: var(--MDsim-button-color);
  box-sizing: border-box;
  z-index: 2;
  border-radius: 25px;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}

.App-widget-box-title-with-image {
  padding: 5px 10px 5px 5px;
}

.App-widget-box-title-without-image {
  padding: 5px 10px 5px 25px;
}

.App-widget-box-title-small {
  height: var(--MDsim-widget-box-title-height-small);
  min-height: var(--MDsim-widget-box-title-height-small);
}

.App-widget-title-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  overflow: hidden;
}

.App-widget-box-image-container {
  border-radius: 50%;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  overflow: hidden;
}

.App-widget-box-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.App-widget-box-icons {
  align-items: center;
  gap: 5px;
  display: flex;
}

.App-widget-box-arrow-icon {
  justify-content: center;
  align-items: center;
  width: 10px;
  height: 10px;
  margin-left: 10px;
  display: flex;
}

.App-widget-box-arrow-icon-small {
  width: 6px;
  height: 6px;
}

.App-widget-box-icon {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: clamp(16px, 2vw, 24px);
  height: clamp(16px, 2vw, 24px);
  transition: transform .3s;
  display: flex;
}

.App-widget-box-icon-small {
  width: clamp(12px, 1.5vw, 18px);
  height: clamp(12px, 1.5vw, 18px);
}

.App-widget-box-contain {
  -ms-overflow-style: none;
  scrollbar-width: none;
  box-sizing: border-box;
  background-color: var(--MDsim-background-modal-color);
  z-index: 1;
  border-radius: 0 0 25px 25px;
  flex-direction: column;
  flex: 1;
  width: 100%;
  height: auto;
  padding-top: 5px;
  display: flex;
  overflow-y: auto;
}

.App-widget-box-no-bgColor .App-widget-box-contain {
  background-color: var(--MDsim-transparent-color);
}

.App-widget-box-side-bar .App-widget-box-contain {
  background-color: var(--MDsim-background-box-color);
}

.App-widget-box-contain-no-horizontal-padding {
  gap: 5px;
  padding-left: 0;
  padding-right: 0;
}

.App-widget-box-contain::-webkit-scrollbar {
  display: none;
}

.App-widget-box.collapsed .App-widget-box-contain {
  display: none;
}

.App-widget-box-icon {
  cursor: pointer;
  z-index: 2;
  transition: transform .3s;
}

.App-widget-box-icon:hover {
  opacity: .8;
}

.App-widget-box.collapsed .App-widget-box-icon.expand {
  transform: rotate(180deg);
}

.App-widget-box-title .IconButton {
  cursor: pointer;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

.App-widget-box-title .IconButton:hover {
  opacity: .8;
}

.side-widget-history {
  flex-direction: column;
  gap: 8px;
  padding: 5px;
  display: flex;
}

.history-item {
  border-radius: 8px;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
  padding: 2px;
  transition: all .2s;
  display: flex;
  position: relative;
}

.history-item:hover {
  background-color: var(--MDsim-hover-background-color, #0000000d);
}

.history-item.loading {
  opacity: .6;
  pointer-events: none;
}

.history-row {
  box-shadow: 0 0 5px 0 var(--MDsim-background-color);
  border-radius: 20px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  padding: 2px 10px;
  display: flex;
}

.history-item-checkbox {
  cursor: pointer;
  appearance: none;
  background-color: var(--MDsim-input-background-color, white);
  border-radius: 2px;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  transition: all .2s;
  position: relative;
}

.history-item-checkbox:checked {
  background-color: var(--MDsim-highlight-color);
  border-color: var(--MDsim-highlight-color);
}

.history-item-checkbox:checked:after {
  content: "✓";
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.history-item-checkbox:hover:not(:disabled) {
  border-color: var(--MDsim-highlight-color);
  box-shadow: 0 0 0 2px #4a90e233;
}

.history-item-checkbox:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.history-item-checkbox:focus {
  outline: 2px solid var(--MDsim-highlight-color);
  outline-offset: 2px;
}

.history-selection-controls {
  background-color: var(--MDsim-background-modal-color);
  border: 1px solid var(--MDsim-border-color);
  border-radius: 25px;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  display: flex;
}

.select-all-checkbox {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: 8px;
  display: flex;
}

.select-all-checkbox input[type="checkbox"] {
  cursor: pointer;
  appearance: none;
  background-color: var(--MDsim-input-background-color, white);
  border: 2px solid var(--MDsim-border-color, #ddd);
  border-radius: 2px;
  width: 10px;
  height: 10px;
  transition: all .2s;
  position: relative;
}

.select-all-checkbox input[type="checkbox"]:checked {
  background-color: var(--MDsim-highlight-color);
  border-color: var(--MDsim-highlight-color);
}

.select-all-checkbox input[type="checkbox"]:checked:after {
  content: "✓";
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.select-all-checkbox input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--MDsim-highlight-color);
}

.select-all-checkbox input[type="checkbox"]:focus {
  outline: 2px solid var(--MDsim-highlight-color);
  outline-offset: 2px;
}

.selection-count {
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-font-color);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}

.bulk-delete-container {
  border-top: 1px solid var(--MDsim-border-color);
  background-color: var(--MDsim-card-background-color);
  justify-content: end;
  align-items: center;
  padding: 8px 12px;
  display: flex;
}

.bulk-delete-button {
  border: 1px solid var(--MDsim-icon-color);
  background-color: var(--MDsim-transparent-color);
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-radius: 20px;
  width: 100%;
  padding: 10px 16px;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}

.bulk-delete-button:before {
  content: "";
  background: linear-gradient(90deg, #0000, #fff3, #0000);
  width: 100%;
  height: 100%;
  transition: left .5s;
  position: absolute;
  top: 0;
  left: -100%;
}

.bulk-delete-button:hover:not(:disabled) {
  background-color: var(--MDsim-error-color-dark, #c82333);
}

.bulk-delete-button:hover:not(:disabled):before {
  left: 100%;
}

.bulk-delete-button:active {
  transform: translateY(1px);
}

.bulk-delete-button:disabled {
  opacity: .6;
  cursor: not-allowed;
  background-color: #6c757d;
  border-color: #6c757d;
}

.interaction-buttons {
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  display: flex;
}

.history-item:focus-within {
  outline: 2px solid var(--MDsim-highlight-color);
  outline-offset: 2px;
  border-radius: 25px;
}

.history-compare-wrapper {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.history-compare-plan {
  border: 1px solid var(--MDsim-border-color);
  background-color: var(--MDsim-background-box-color, #0000000d);
  border-radius: 12px;
  padding: 8px;
}

.history-compare-plan-title {
  margin-bottom: 6px;
}

.history-compare-separator {
  background-color: var(--MDsim-border-color);
  height: 1px;
  margin: 0 4px;
}

.history-empty {
  color: var(--MDsim-font-color);
  opacity: .7;
  padding: 6px 4px;
}

@keyframes slideOut {
  0% {
    opacity: 1;
    max-height: 60px;
    transform: translateX(0);
  }

  50% {
    opacity: 0;
    max-height: 60px;
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    padding: 0;
    transform: translateX(-20px);
  }
}

.history-item.removing {
  animation: .3s ease-out forwards slideOut;
}

.rod-history-section-header {
  background-color: var(--MDsim-background-modal-color);
  text-align: start;
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  margin-top: 8px;
  padding-inline: 12px;
  display: flex;
}

.rod-history-section-header .App-text-medium {
  font-weight: 600;
}

.rod-history-section {
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
  display: flex;
}

.rod-entry-row {
  grid-template-columns: auto minmax(60px, 1fr) auto auto auto auto;
  align-items: center;
  gap: 8px;
  display: grid;
  overflow: hidden;
}

.rod-entry-range {
  min-width: 80px;
}

.rod-entry-side {
  text-align: center;
  min-width: 30px;
  font-weight: 600;
}

.rod-entry-diameter, .rod-entry-length {
  text-align: center;
  min-width: 60px;
}

.rod-entry-action {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.screw-entry {
  background-color: var(--MDsim-card-background-color);
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  display: flex;
}

.screw-count {
  color: var(--MDsim-highlight-color);
  font-weight: 600;
}

.screws-section {
  gap: 6px;
}

.global-alignment-table {
  --ga-label-col: 1.2fr;
  --ga-value-col: 1fr;
  --ga-action-col: 24px;
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.global-alignment-header-row, .global-alignment-data-row {
  grid-template-columns: var(--ga-label-col) var(--ga-value-col)
    var(--ga-value-col) var(--ga-action-col);
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  display: grid;
}

.global-alignment-header-row.compare-mode, .global-alignment-data-row.compare-mode {
  grid-template-columns: var(--ga-label-col) var(--ga-value-col)
    var(--ga-value-col) var(--ga-value-col) var(--ga-action-col);
}

.global-alignment-header-row {
  background-color: var(--MDsim-background-modal-color);
  box-sizing: border-box;
  border-radius: 20px;
  height: 30px;
  min-height: 30px;
  padding: 4px 12px;
}

.global-alignment-column-header {
  text-align: center;
  font-weight: 600;
}

.global-alignment-label {
  text-align: start;
}

.global-alignment-value {
  text-align: center;
}

.global-alignment-edit {
  justify-content: center;
  align-items: center;
  width: 24px;
  display: flex;
}

.global-alignment-spacer {
  width: 24px;
}

.global-alignment-data-row--unavailable {
  opacity: .4;
}

@media (width <= 768px) {
  .history-selection-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .selection-count {
    align-self: flex-end;
  }

  .history-row {
    gap: 6px;
    padding: 6px 8px;
  }

  .history-item-checkbox, .select-all-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }

  .bulk-delete-button {
    padding: 12px 16px;
    font-size: 13px;
  }
}

.Align-view-container {
  gap: 20px;
  width: 100%;
  height: 100%;
  display: flex;
}

.Align-single-view {
  box-sizing: border-box;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.Align-single-view .image-viewer-container {
  border-radius: 8px;
  width: 100%;
  max-width: 800px;
  height: 100%;
  max-height: 600px;
  overflow: hidden;
  box-shadow: 0 4px 12px #00000026;
}

.Align-single-view .ImageViewer {
  width: 100%;
  height: 100%;
}

.Align-tool-widget-panel {
  border-radius: var(--MDsim-border-radius-xxlarge);
  background-color: var(--MDsim-background-color);
  z-index: 10;
  flex-direction: column;
  width: 20vw;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.Align-tool-widget-panel.global-alignment {
  width: 30vw;
}

.Align-tool-widget-header {
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  display: flex;
}

.Align-tool-widget-title {
  text-wrap: wrap;
}

.Align-tool-widget-close {
  opacity: .7;
  transition: opacity .2s;
}

.Align-tool-widget-close:hover {
  opacity: 1;
}

.Align-tool-widget-content {
  flex: 1;
  padding-block: 10px;
  padding-inline: 20px;
  overflow-y: auto;
}

.rod-interaction-area {
  background-color: var(--MDsim-black-color, #f8f9fa);
  border-radius: 12px;
  outline: 1.5px solid #fff3;
  flex-direction: column;
  flex: 1;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.AlignPopupParameterSelector-viewer-container {
  background-color: var(--MDsim-black-color, #f8f9fa);
  border-radius: 20px;
  outline: 1.5px solid #fff3;
  flex-direction: column;
  width: 17vw;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.AlignPopupParameterSelector-viewer-label {
  z-index: 10;
  box-sizing: border-box;
  background-color: #0000004d;
  border-radius: 20px;
  margin-inline: 10px;
  padding-block: 5px;
  padding-inline: 15px;
  position: absolute;
  top: 10px;
}

.AlignPopupParameterSelector-viewer-content {
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
}

.no-view-message {
  color: #666;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 18px;
  font-weight: 500;
  display: flex;
}

@media (width <= 1200px) {
  .Align-tool-widget-panel {
    width: 350px;
    min-width: 300px;
  }

  .Align-view-container:has(.rod-interaction-area) {
    flex-direction: column;
    gap: 10px;
  }

  .rod-interaction-area {
    width: 100%;
    height: 300px;
    min-height: 250px;
  }

  .Align-view-container:has(.rod-interaction-area) .Align-single-view {
    flex: 1;
  }

  .AlignPopupParameterSelector-viewer-container {
    width: 320px;
    height: 100%;
  }

  .Align-view-container:has(.AlignPopupParameterSelector-viewer-container) .Align-single-view {
    flex: 1;
  }
}

@media (width <= 1400px) {
  .rod-interaction-area, .AlignPopupParameterSelector-viewer-container {
    width: 320px;
  }
}

@media (width <= 768px) {
  .Align-view-container {
    flex-direction: column;
    gap: 10px;
  }

  .Align-single-view {
    padding: 10px;
  }

  .Align-single-view .image-viewer-container {
    max-width: 100%;
    max-height: 400px;
  }

  .Align-tool-widget-panel {
    width: 100%;
    height: auto;
    max-height: 400px;
  }

  .Align-view-container:has(.rod-interaction-area) {
    flex-direction: column;
    gap: 10px;
  }

  .rod-interaction-area {
    width: 100%;
    height: 300px;
    min-height: 250px;
  }

  .Align-view-container:has(.rod-interaction-area) .Align-single-view {
    flex: 1;
  }

  .Align-view-container:has(.AlignPopupParameterSelector-viewer-container) {
    flex-direction: column;
    gap: 10px;
  }

  .AlignPopupParameterSelector-viewer-container {
    width: 100%;
    height: 300px;
    min-height: 250px;
  }

  .Align-view-container:has(.AlignPopupParameterSelector-viewer-container) .Align-single-view {
    flex: 1;
  }
}

.Visualization-region-views .Align-view-container {
  flex: 1;
  display: flex;
}

.Visualization-region-views .Align-single-view {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.Visualization-region-plan-managment {
  z-index: 1000;
  position: absolute;
  bottom: 0;
  left: 0;
}

.Align-view-container:has(.rod-interaction-area) {
  gap: 15px;
}

.Align-view-container:has(.rod-interaction-area) .Align-single-view {
  flex: 1;
}

.Align-view-container:has(.AlignPopupParameterSelector-viewer-container) {
  gap: 15px;
}

.Align-view-container:has(.AlignPopupParameterSelector-viewer-container) .Align-single-view {
  flex: 2;
}

.Align-view-container.comparison-mode {
  flex-direction: row;
  gap: 20px;
  display: flex;
}

.Align-single-view.comparison-view {
  border-radius: var(--MDsim-border-radius-xlarge);
  background-color: var(--MDsim-black-color);
  outline: 1.5px solid #ffffff1a;
  flex-direction: column;
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
}

.Align-view-label {
  color: var(--MDsim-text-color);
  border-radius: var(--MDsim-border-radius-large);
  z-index: 10;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: #000000a6;
  max-width: calc(100% - 24px);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  position: absolute;
  top: 12px;
  left: 12px;
  overflow: hidden;
  transform: none;
}

.Align-view-label--current {
  border-left: 4px solid var(--MDsim-selected-color, #00b3ff);
}

.Align-view-label--compared {
  border-left: 4px solid var(--MDsim-highlighted-font-color, #ffc857);
}

.Align-single-view.comparison-view.loading {
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.comparison-loading-message {
  color: var(--MDsim-text-secondary-color);
  padding: 20px;
  font-size: 14px;
}

@media (width <= 1200px) {
  .Align-view-container.comparison-mode {
    flex-direction: column;
  }

  .Align-single-view.comparison-view {
    min-height: 300px;
  }
}

.IncrementDecrementButtons-container {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
  display: flex;
}

.IncrementDecrementButtons-button {
  width: var(--MDsim-icon-button-width-xsmall);
  height: var(--MDsim-icon-button-height-xsmall);
  box-shadow: var(--MDsim-box-shadow);
  cursor: pointer;
  background-color: var(--MDsim-highlight-color);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.IncrementDecrementButtons-button:hover {
  background-color: var(--MDsim-font-color);
}

.IncrementDecrementButtons-button svg path {
  fill: var(--MDsim-background-box-color);
}

.measurement-display {
  background-color: var(--MDsim-transparent-color);
  border: 2px solid var(--MDsim-font-color);
  color: var(--MDsim-font-color);
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 10px;
  padding: 10px 15px;
  display: inline-flex;
}

.measurement-display.disabled {
  border: 2px solid var(--MDsim-disabled-color);
  color: var(--MDsim-disabled-color);
}

.measurement-display.editable:hover {
  border-color: var(--MDsim-highlight-color);
  transition: border-color .2s;
}

.measurement-display.editing {
  padding: 5px 10px;
}

.measurement-value {
  margin-right: 5px;
}

.measurement-value-input {
  color: var(--MDsim-font-color);
  text-align: center;
  background: none;
  border: none;
  outline: none;
  width: 40px;
  margin-right: 5px;
  font-family: inherit;
}

.measurement-value-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.measurement-value-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.labeled-slider-discrete {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.labeled-slider-discrete__header {
  justify-content: space-between;
  margin-bottom: 10px;
  display: flex;
}

.labeled-slider-discrete__label {
  color: var(--MDsim-font-color);
  font-size: 14px;
}

.labeled-slider-discrete__slider-container {
  padding-bottom: 25px;
  position: relative;
}

.labeled-slider-discrete__slider {
  appearance: none;
  background-color: var(--MDsim-slider-color, #ccc);
  border-radius: 10px;
  outline: none;
  width: 100%;
  height: 4px;
  margin: 0;
  padding: 0;
}

.labeled-slider-discrete__slider::-webkit-slider-thumb {
  appearance: none;
  background: var(--MDsim-icon-color, #fff);
  cursor: pointer;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  box-shadow: 0 0 2px #0000004d;
}

.labeled-slider-discrete__slider::-moz-range-thumb {
  background: var(--MDsim-icon-color, #fff);
  cursor: pointer;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  box-shadow: 0 0 2px #0000004d;
}

.labeled-slider-discrete__tick-marks {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.labeled-slider-discrete__tick-mark {
  pointer-events: auto;
  cursor: pointer;
  text-align: center;
  position: absolute;
  transform: translateX(-50%);
}

.labeled-slider-discrete__tick-line {
  background-color: var(--MDsim-transparent-color, #666);
  width: 2px;
  height: 10px;
  margin: 10px auto 0;
}

.labeled-slider-discrete__tick-label {
  color: var(--MDsim-font-color);
  white-space: nowrap;
  margin-top: 5px;
  font-size: 12px;
}

.labeled-slider-discrete.disabled {
  pointer-events: none;
}

.labeled-slider-discrete.disabled .labeled-slider-discrete__slider {
  background-color: var(--MDsim-disabled-color);
  cursor: not-allowed;
  opacity: .6;
}

.labeled-slider-discrete.disabled .labeled-slider-discrete__slider::-webkit-slider-thumb {
  background: var(--MDsim-disabled-color, #ccc);
  cursor: not-allowed;
}

.labeled-slider-discrete.disabled .labeled-slider-discrete__slider::-moz-range-thumb {
  background: var(--MDsim-disabled-color, #ccc);
  cursor: not-allowed;
}

.labeled-slider-discrete.disabled .labeled-slider-discrete__tick-line {
  background-color: var(--MDsim-transparent-color, #ccc);
}

.labeled-slider-discrete.disabled .labeled-slider-discrete__tick-label {
  color: var(--MDsim-disabled-color, #999);
}

.labeled-slider-discrete.disabled .labeled-slider-discrete__tick-mark {
  cursor: not-allowed;
}

.AlignPopupParameterSelector-container {
  box-sizing: border-box;
  flex-direction: column;
  height: 100%;
  padding-inline: 2%;
  display: flex;
  position: relative;
  overflow: visible hidden;
}

.AlignPopupParameterSelector-scrollable-content {
  box-sizing: border-box;
  flex-direction: column;
  flex: 1;
  align-items: center;
  padding-inline: 5px;
  display: flex;
  overflow: hidden auto;
}

.AlignPopupParameterSelector-separator {
  background-color: var(--MDsim-font-color);
  opacity: .6;
  border: none;
  flex-shrink: 0;
  width: 100%;
  height: 1px;
  margin: 15px 0;
}

.AlignPopupParameterSelector-header {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: auto;
  display: flex;
}

.AlignPopupParameterSelector-item {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 3px;
  width: 100%;
  display: flex;
}

.AlignPopupParameterSelector-first-row {
  box-sizing: border-box;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 3px;
  width: 100%;
  display: flex;
}

.AlignPopupParameterSelector-second-row {
  color: var(--MDsim-highlight-color);
  box-sizing: border-box;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  width: 100%;
  display: flex;
}

.AlignPopupParameterSelector-controls-wrapper {
  box-sizing: border-box;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  max-width: 100%;
  display: flex;
}

.AlignPopupParameterSelector-range-row {
  box-sizing: border-box;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  display: flex;
}

.AlignPopupParameterSelector-range-row .labeled-select-container {
  flex: 1;
}

.AlignPopupParameterSelector-rod-side-toggle-group {
  flex-shrink: 0;
  align-items: center;
  display: flex;
}

.AlignPopupParameterSelector-rod-side-toggle {
  flex-shrink: 0;
}

.AlignPopupParameterSelector-controls-wrapper .labeled-select-container, .AlignPopupParameterSelector-controls-wrapper .LabeledSlider-container {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
}

.AlignPopupParameterSelector-button-wrapper {
  box-sizing: border-box;
  flex-direction: row;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  display: flex;
}

.AlignPopupParameterSelector-button-wrapper .App-button {
  flex: 1;
  width: 100%;
  max-width: 100%;
}

.AlignPopupParameterSelector-measurement-container {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.AlignPopupParameterSelector-pedicleScrewHeader {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.AlignPopupParameterSelector-add-rod-section {
  flex-direction: row;
  justify-content: end;
  align-items: center;
  gap: 5px;
  width: 100%;
  display: flex;
}

.AlignPopupParameterSelector-viewer-content {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
}

.AlignPopupParameterSelector-viewer-content .ImageViewer, .AlignPopupParameterSelector-viewer-content .RemoteViewer {
  width: 100%;
  height: 100%;
}

.AlignPopupParameterSelector-subtitle {
  color: var(--MDsim-highlight-color);
}

.AlignPopupParameterSelector-moreoptions-container {
  box-sizing: border-box;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  display: flex;
}

.AlignPopupParameterSelector-moreoptions-header {
  background-color: var(--MDsim-background-box-color);
  border-radius: 20px;
  flex-direction: column;
  width: 100%;
  display: flex;
  overflow: hidden;
  box-shadow: 0 0 5px #0003;
}

.AlignPopupParameterSelector-moreoptions-header > div:first-child {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-inline: 10px;
  display: flex;
}

.AlignPopupParameterSelector-expandable-area {
  flex-direction: column;
  gap: 10px;
  max-height: 0;
  transition: max-height .1s;
  display: flex;
  overflow: hidden;
}

.AlignPopupParameterSelector-expandable-area.expanded {
  background-color: var(--MDsim-background-modal-color);
  max-height: 500px;
  margin-top: 10px;
  padding: 10px;
}

.AlignPopupParameterSelector-confirm-decline-container {
  flex-direction: row;
  justify-content: right;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  display: flex;
}

.AlignPopupParameterSelector-label {
  text-align: left;
}

.AlignPopupParameterSelector-label.disabled {
  color: var(--MDsim-disabled-color);
}

.AlignPopupParameterSelector-parameter-row {
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 10px;
  display: grid;
}

.screw-summary-row {
  align-items: flex-start;
}

.AlignPopupParameterSelector-screw-summary {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  display: flex;
}

.screw-summary-pill {
  color: var(--MDsim-font-color, #fff);
  background: #0082a926;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .8rem;
}

.screw-summary-empty {
  color: var(--MDsim-disabled-color, gray);
  font-size: .8rem;
}

.AlignPopupParameterSelector-region-controls {
  flex-direction: column;
  justify-content: right;
  gap: 5px;
  display: flex;
}

.AlignPopupParameterSelector-region-control {
  flex-direction: row;
  justify-content: right;
  align-items: center;
  display: flex;
}

.AlignPopupParameterSelector-region-control labeled-select-container {
  grid-template-columns: 8px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  display: grid;
}

.AlignPopupParameterSelector-region-label {
  color: var(--MDsim-text-color, #fff);
  margin-bottom: 2px;
  font-size: 12px;
}

.AlignPopupParameterSelector-compact-select {
  width: 100%;
}

.AlignPopupParameterSelector-screw-sizes-list {
  box-sizing: border-box;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
  display: flex;
}

.AlignPopupParameterSelector-screw-size-item {
  background-color: var(--MDsim-background-box-color);
  height: var(--MDsim-align-parameter-select-height);
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  padding-block: 3px;
  padding-inline: 8px;
  display: flex;
}

.screw-size-label {
  color: var(--MDsim-font-color, #fff);
  font-size: .9rem;
  font-weight: 500;
}

.screw-size-count {
  color: var(--MDsim-highlight-color, #0082a9);
  background: #0082a933;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: .85rem;
  font-weight: 600;
}

.AlignPopupParameterSelector-empty-message {
  text-align: center;
  color: var(--MDsim-disabled-color, gray);
  padding: 16px;
  font-size: .85rem;
  font-style: italic;
}

.AlignPopupParameterSelector-container .App-select-parent {
  height: var(--MDsim-align-parameter-select-height);
}

.AlignPopupParameterSelector-rod-header-row {
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
  display: flex;
}

.AlignPopupParameterSelector-manufacturer-row {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
  display: flex;
}

.AlignPopupParameterSelector-type-label, .AlignPopupParameterSelector-manufacturer-label {
  color: var(--MDsim-highlight-color);
  background-color: var(--MDsim-background-box-color);
  text-align: start;
  width: 50%;
  font-size: var(--MDsim-font-size-medium);
  border-radius: 20px;
  justify-content: center;
  padding: 4px 12px;
  display: inline-flex;
}

.AlignPopupParameterSelector-length-label {
  color: var(--MDsim-highlight-color);
  background-color: var(--MDsim-background-box-color);
  font-size: var(--MDsim-font-size-medium);
  box-sizing: border-box;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 4px 12px;
  display: inline-flex;
}

.AlignPopupParameterSelector-label-with-info, .AlignPopupParameterSelector-screw-disclaimer-row {
  align-items: center;
  gap: 6px;
  display: flex;
}

.AlignPopupParameterSelector-screw-disclaimer-text {
  color: var(--MDsim-warning-color, #ff9800);
  font-size: .8rem;
  font-style: italic;
}

.AlignPopupParameterSelector-extra-length-controls {
  justify-content: end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.AlignPopupParameterSelector-extra-length-controls .measurement-display {
  flex: 1;
}

.AlignPopupParameterSelector-info-button {
  flex-shrink: 0;
}

.AlignPopupParameterSelector-target-type-section, .AlignPopupParameterSelector-decompensation-section {
  align-items: start;
  gap: var(--MDsim-align-tool-widget-vertical-gap);
  box-sizing: border-box;
  flex-direction: column;
  width: 100%;
  display: flex;
}

.AlignPopupParameterSelector-target-type-title-section, .AlignPopupParameterSelector-decompensation-title-section {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
  display: flex;
}

.radio-buttons-compact {
  border: none !important;
  height: auto !important;
  padding: 8px 0 !important;
}

.radio-buttons-compact label {
  font-size: var(--MDsim-font-size-medium) !important;
}

.radio-buttons-compact input[type="radio"] {
  width: 14px !important;
  height: 14px !important;
}

.radio-buttons-compact input[type="radio"]:checked:after {
  width: 6px !important;
  height: 6px !important;
}

.LabeledMeasurement-container {
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  display: flex;
}

.LabeledMeasurement-measurement-section {
  box-sizing: border-box;
  background-color: var(--MDsim-background-box-color);
  width: var(--MDsim-measurement-width);
  height: var(--MDsim-measurement-height);
  border-radius: var(--MDsim-border-radius-xxlarge);
  color: var(--MDsim-highlight-color);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2px;
  display: flex;
}

.LabeledSlider-container.vertical {
  flex-direction: column;
  flex: 1;
  align-items: start;
  display: flex;
}

.LabeledSlider-container.horizontal {
  flex: 1;
  grid-template-columns: 1fr 1.5fr;
  align-items: center;
  display: grid;
}

.Slider-container {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  display: flex;
}

.LabeledSlider-label {
  color: var(--MDsim-font-color);
  white-space: nowrap;
  text-overflow: unset;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding-inline: 4px;
  font-size: 14px;
  display: flex;
  overflow: visible;
}

.LabeledSlider-label.disabled {
  color: var(--MDsim-disabled-color);
}

.LabeledSlider-slider {
  width: 100%;
}

.target-type-tab {
  border-radius: 25px;
  align-items: center;
  width: 100%;
  height: 20px;
  padding: 0;
  display: flex;
}

.target-type-tab-wrapper {
  z-index: 1;
  background-color: var(--MDsim-background-box-color);
  width: 100%;
  height: 100%;
  box-shadow: 0 0 .4em 0 var(--MDsim-background-color);
  border-radius: 25px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 3px;
  display: flex;
}

.target-type-button {
  cursor: pointer;
  width: 33%;
  height: 100%;
  font-family: var(--MDsim-font-family);
  font-size: var(--MDsim-font-size-medium);
  background-color: var(--MDsim-background-box-color);
  color: var(--MDsim-font-color);
  z-index: calc(100 - var(--target-index, 0));
  border: none;
  border-radius: 25px;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
  position: relative;
}

.target-type-button.active {
  background-color: var(--MDsim-selected-color);
  color: var(--MDsim-highlighted-font-color);
  z-index: 100;
}

.target-type-button:focus {
  z-index: 101;
  outline: none;
}

.target-type-button:disabled, .target-type-button.disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

.target-type-button:disabled.active, .target-type-button.disabled.active {
  opacity: .4;
}

.radio-buttons-container {
  width: 100%;
  height: var(--MDsim-form-controls-height);
  box-sizing: border-box;
  border: .5px solid var(--MDsim-highlight-color);
  border-radius: 20px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 18px;
  display: flex;
}

.radio-buttons-label {
  font-weight: 500;
  font-size: var(--MDsim-font-size-large);
  color: var(--MDsim-highlight-color);
}

.radio-buttons-container label {
  cursor: pointer;
  font-size: var(--MDsim-font-size-large);
  color: var(--MDsim-font-color);
  align-items: center;
  gap: 5px;
  display: flex;
}

.radio-buttons-container input[type="radio"] {
  appearance: none;
  border: 2px solid var(--radio-border-color, white);
  background-color: #0000;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  margin: 0;
  position: relative;
}

.radio-buttons-container input[type="radio"]:checked:after {
  content: "";
  background-color: var(--MDsim-highlight-color);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.radio-buttons-container input[type="radio"]:disabled {
  opacity: .4;
  cursor: not-allowed;
  border-color: var(--MDsim-font-color-disabled, #666);
}

.radio-buttons-container label:has(input[type="radio"]:disabled) {
  opacity: .4;
  cursor: not-allowed;
  color: var(--MDsim-font-color-disabled, #666);
}

.Align-spine-overlay-tools-container {
  z-index: 1000;
  background-color: #000000b3;
  border-radius: 5px;
  flex-direction: column;
  justify-content: center;
  width: fit-content;
  display: flex;
}

.Align-spine-overlay-option {
  cursor: pointer;
  align-items: center;
  display: flex;
}

.Align-spine-overlay-tool {
  padding: 4px;
}

.App-module-delete-plan-modal-container {
  box-sizing: border-box;
  background-color: var(--MDsim-background-modal-color);
  width: 540px;
  height: auto;
  min-height: 320px;
  color: var(--MDsim-font-color);
  border-radius: 12px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 42px;
  display: flex;
  position: relative;
}

.App-module-delete-plan-modal-close {
  z-index: 10;
  position: absolute;
  top: 15px;
  right: 15px;
}

.App-module-delete-plan-modal-close svg {
  fill: var(--MDsim-font-color);
  stroke: var(--MDsim-font-color);
}

.App-module-delete-plan-modal-header {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
  display: flex;
}

.App-module-delete-plan-modal-header h2 {
  color: var(--MDsim-font-color);
  text-align: center;
  margin: 0;
  font-size: 1.8em;
  font-weight: bold;
}

.App-module-delete-plan-modal-header svg {
  fill: var(--MDsim-font-color);
  stroke: var(--MDsim-font-color);
  width: 28px;
  height: 28px;
}

.App-module-delete-plan-modal-body {
  text-align: center;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  width: 100%;
  display: flex;
}

.App-module-delete-plan-modal-body .confirmation-question {
  color: var(--MDsim-font-color);
  word-wrap: break-word;
  text-align: center;
  margin: 0;
  font-size: 1.2em;
  line-height: 1.3;
}

.App-module-delete-plan-modal-actions {
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-top: 24px;
  display: flex;
}

.App-module-delete-plan-modal-actions .delete-button {
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-font-color);
  min-width: 120px;
  transition: var(--MDsim-transition-all);
  border-radius: 50px;
  padding: 12px 40px;
  font-weight: 500;
}

.App-module-delete-plan-modal-actions .delete-button:hover:not(:disabled) {
  box-shadow: 0 0 1.2em 0 var(--MDsim-button-color);
}

.App-module-delete-plan-modal-actions .delete-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.App-warning-icon {
  height: var(--MDsim-icon-svg-width);
  width: var(--MDsim-icon-svg-height);
  fill: var(--MDsim-background-box-color);
  margin-right: 10px;
}

.plan-tab {
  border-radius: 25px;
  align-items: center;
  width: fit-content;
  display: flex;
}

.plan-tab-plans-wrapper {
  height: var(--MDsim-button-height);
  z-index: 1;
  border-radius: 25px;
  flex-direction: row;
  align-items: center;
  width: fit-content;
  display: flex;
}

.plan-button-container {
  border-radius: 25px;
  align-items: center;
  height: 100%;
  display: flex;
  position: relative;
}

.plan-button-container.compared .plan-button, .plan-button-container.compared .plan-button-delete, .plan-button-container.compared .plan-button-duplicate {
  background-color: var(--MDsim-background-box-color);
  position: relative;
}

.plan-button {
  cursor: pointer;
  min-width: 100px;
  height: 100%;
  font-family: var(--MDsim-font-family);
  font-size: var(--MDsim-font-size-medium);
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-font-color);
  z-index: calc(100 - var(--plan-index, 0));
  border: none;
  border-radius: 25px 0 0 25px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.plan-button-container:first-child .plan-button {
  border-radius: 25px 0 0 25px;
  margin-left: 0;
}

.plan-button-container:only-child .plan-button {
  border-radius: 25px 0 0 25px;
}

.plan-button-container:not(:first-child) .plan-button {
  border-radius: 0;
  margin-left: -15px;
}

.plan-button.active {
  background-color: var(--MDsim-selected-color);
  color: var(--MDsim-highlighted-font-color);
}

.plan-button:hover {
  font-size: calc(var(--MDsim-font-size-medium) + 1px);
}

.plan-button-duplicate {
  background-color: var(--MDsim-button-color);
  width: 40px;
  height: 100%;
  z-index: calc(100 - var(--plan-index, 0));
  border-radius: 0 25px 25px 0;
  justify-content: center;
  align-items: center;
  display: flex;
  box-shadow: 4px 0 6px -2px #000c;
}

.plan-button-delete {
  background-color: var(--MDsim-button-color);
  width: 40px;
  height: 100%;
  z-index: calc(100 - var(--plan-index, 0));
  justify-content: center;
  align-items: center;
  display: flex;
}

.plan-button.active + .plan-button-delete, .plan-button-delete.active, .plan-button.active + .plan-button-duplicate, .plan-button-duplicate.active {
  background-color: var(--MDsim-selected-color);
}

.plan-duplicate-icon.active svg *, .plan-delete-icon.active svg * {
  fill: var(--MDsim-background-color) !important;
}

.plan-verified-icon {
  background-color: var(--MDsim-background-color);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  display: inline-flex;
}

.plan-verified-icon svg {
  width: 12px;
  height: 12px;
}

.plan-verified-icon svg * {
  fill: var(--MDsim-selected-color);
}

.plan-tab-actions {
  height: var(--MDsim-button-height);
  z-index: 0;
  align-items: center;
  display: flex;
}

.plan-tab-actions-add {
  background-color: var(--MDsim-background-modal-color);
  z-index: 1;
  box-sizing: content-box;
  border-radius: 0 25px 25px 0;
  justify-content: end;
  align-items: center;
  width: 50px;
  height: 100%;
  margin-left: -15px;
  padding-right: 10px;
  display: flex;
}

.plan-tab-actions-compare {
  background-color: var(--MDsim-button-color);
  z-index: 0;
  box-sizing: content-box;
  border-radius: 0 25px 25px 0;
  justify-content: end;
  align-items: center;
  width: 50px;
  height: 100%;
  margin-left: -15px;
  padding-right: 10px;
  display: flex;
}

.plan-tab-actions-add:hover, .plan-tab-actions-compare:hover {
  box-shadow: inset 0 0 0 2px var(--MDsim-selected-color);
}

.plan-tab-actions-compare.active {
  background-color: var(--MDsim-selected-color);
  box-shadow: inset 0 0 0 2px var(--MDsim-selected-color);
}

.plan-tab .App-icon-button {
  flex-shrink: 0;
}

.rods-selector {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 3%;
  display: flex;
}

.spine-container {
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.spine-label-column {
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 10px;
  margin-right: 12px;
  padding-top: 28px;
  display: flex;
}

.vertebra-label-row {
  color: var(--MDsim-disabled-color);
  white-space: nowrap;
  box-sizing: border-box;
  justify-content: start;
  align-items: center;
  width: 100%;
  padding-left: 10px;
  font-size: .9rem;
  display: flex;
}

.sacrum-labels {
  flex-direction: column;
  gap: 30px;
  line-height: 1;
  display: flex;
}

.sacrum-label {
  white-space: nowrap;
}

.spine-column {
  box-sizing: border-box;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-top: 28px;
  display: flex;
  position: relative;
}

.side-indicators {
  pointer-events: none;
  width: 50%;
  height: 28px;
  color: var(--MDsim-font-color);
  align-items: center;
  font-weight: 600;
  display: flex;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.side-indicator {
  border-radius: 999px;
  padding: 2px 6px;
  font-size: .85rem;
  position: absolute;
  box-shadow: 0 1px 3px #0f172a40;
}

.side-indicator.left {
  left: 25%;
  transform: translateX(-50%);
}

.side-indicator.right {
  right: 25%;
  transform: translateX(50%);
}

.vertebra {
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 0;
  display: flex;
  position: relative;
}

.vertebra.disabled {
  opacity: .5;
  pointer-events: none;
}

.vertebra.disabled .vertebra-svg {
  fill: #ccc !important;
}

.vertebra.unavailable {
  opacity: .4;
}

.vertebra.unavailable .vertebra-svg, .vertebra.unavailable:hover .vertebra-svg {
  filter: grayscale(.5) brightness(.8);
}

.vertebra.occupied .vertebra-svg, .vertebra.occupied.hovered .vertebra-svg {
  filter: grayscale() brightness(.72);
}

.vertebra[data-vertebra="C7"], .vertebra-label-row[data-vertebra="C7"] {
  flex: .8;
  margin-bottom: -.5vh;
}

.vertebra[data-vertebra="T1"], .vertebra-label-row[data-vertebra="T1"] {
  flex: .85;
  margin-bottom: -.5vh;
}

.vertebra[data-vertebra="T2"], .vertebra-label-row[data-vertebra="T2"] {
  flex: .9;
  margin-bottom: -.7vh;
}

.vertebra[data-vertebra="T3"], .vertebra-label-row[data-vertebra="T3"] {
  flex: .95;
  margin-bottom: -.8vh;
}

.vertebra[data-vertebra="T4"], .vertebra-label-row[data-vertebra="T4"] {
  flex: 1;
  margin-bottom: -.95vh;
}

.vertebra[data-vertebra="T5"], .vertebra-label-row[data-vertebra="T5"] {
  flex: 1.05;
  margin-bottom: -.9vh;
}

.vertebra[data-vertebra="T6"], .vertebra-label-row[data-vertebra="T6"] {
  flex: 1.1;
  margin-bottom: -1.12vh;
}

.vertebra[data-vertebra="T7"], .vertebra-label-row[data-vertebra="T7"] {
  flex: 1.15;
  margin-bottom: -1.15vh;
}

.vertebra[data-vertebra="T8"], .vertebra-label-row[data-vertebra="T8"] {
  flex: 1.2;
  margin-bottom: -1.18vh;
}

.vertebra[data-vertebra="T9"], .vertebra-label-row[data-vertebra="T9"] {
  flex: 1.25;
  margin-bottom: -1.2vh;
}

.vertebra[data-vertebra="T10"], .vertebra-label-row[data-vertebra="T10"] {
  flex: 1.3;
  margin-bottom: -1.22vh;
}

.vertebra[data-vertebra="T11"], .vertebra-label-row[data-vertebra="T11"] {
  flex: 1.35;
  margin-bottom: -1.25vh;
}

.vertebra[data-vertebra="T12"], .vertebra-label-row[data-vertebra="T12"] {
  flex: 1.4;
  margin-bottom: -1.28vh;
}

.vertebra[data-vertebra="T13"], .vertebra-label-row[data-vertebra="T13"] {
  flex: 1.45;
  margin-bottom: -1.32vh;
}

.vertebra[data-vertebra="L1"], .vertebra-label-row[data-vertebra="L1"] {
  flex: 1.45;
  margin-bottom: -1.3vh;
}

.vertebra[data-vertebra="L2"], .vertebra-label-row[data-vertebra="L2"] {
  flex: 1.5;
  margin-bottom: -1.33vh;
}

.vertebra[data-vertebra="L3"], .vertebra-label-row[data-vertebra="L3"] {
  flex: 1.55;
  margin-bottom: -1.35vh;
}

.vertebra[data-vertebra="L4"], .vertebra-label-row[data-vertebra="L4"] {
  flex: 1.6;
  margin-bottom: -1.4vh;
}

.vertebra[data-vertebra="L5"], .vertebra-label-row[data-vertebra="L5"] {
  flex: 1.65;
  margin-bottom: -1.5vh;
}

.vertebra[data-vertebra="LSTV"], .vertebra-label-row[data-vertebra="LSTV"] {
  flex: 1.7;
  margin-bottom: -1.5vh;
}

.vertebra[data-vertebra="SACRUM"], .vertebra-label-row[data-vertebra="SACRUM"] {
  flex: 4.5;
  margin-bottom: 0;
}

.vertebra-svg-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.vertebra-svg {
  z-index: 1;
  object-fit: contain;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  transition: all .2s ease-in-out;
  position: relative;
}

.vertebra.selected .vertebra-svg {
  filter: none;
}

.vertebra.pending .vertebra-svg {
  filter: brightness(1.2) saturate(1.5);
}

.vertebra.pending .vertebra-svg path {
  fill: #00aaffa7 !important;
}

.vertebra.hovered .vertebra-svg {
  filter: brightness(.5) saturate(1.3);
}

.vertebra.selected.hovered .vertebra-svg {
  filter: none;
}

.vertebra.pending.hovered .vertebra-svg {
  filter: brightness(1.2) saturate(1.5);
}

.vertebra.occupied .vertebra-svg, .vertebra.occupied.selected .vertebra-svg, .vertebra.occupied.hovered .vertebra-svg, .vertebra.occupied.pending .vertebra-svg, .vertebra.occupied.pending.hovered .vertebra-svg, .vertebra.occupied.selected.hovered .vertebra-svg {
  filter: grayscale() brightness(.72);
}

.screw {
  cursor: pointer;
  z-index: 5;
  transition: all .2s ease-in-out;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.vertebra.sacral .left-screw {
  left: 32%;
}

.vertebra.sacral .right-screw {
  right: 32%;
}

.vertebra.sacral .screw {
  top: 28%;
}

.screw.sacrum-screw-top {
  top: 28% !important;
}

.screw.sacrum-screw-bottom {
  top: 52% !important;
}

.left-screw {
  left: 25%;
}

.right-screw {
  right: 25%;
}

.screw-core {
  z-index: 3;
  background-color: #5ffffa;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 12px;
  transition: all .2s ease-in-out;
  display: flex;
}

.screw-circle {
  z-index: -1;
  border: 3px solid #1e293b;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 12px;
  transition: all .2s ease-in-out;
  display: flex;
}

.screw-dot {
  content: "";
  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  z-index: 4;
  background-color: #1e293b;
  width: 6px;
  height: 6px;
  position: absolute;
}

.screw.active .screw-circle {
  background-color: #5ffffa;
  border-color: #1e293b;
}

.screw.active .screw-dot {
  background-color: #1e293b;
}

.screw.inactive .screw-circle {
  background: #64748b;
  border-color: #334155;
}

.screw.inactive .screw-dot {
  background-color: #334155;
}

.screw:hover .screw-circle {
  transform: scale(1.15);
}

.dropdown-column {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 120px;
  padding-top: 28px;
  display: flex;
  position: relative;
}

.hrader-screws-dropdown {
  pointer-events: none;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 28px;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.dropdown-header-label {
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-font-color);
  border-radius: 999px;
  padding: 2px 6px;
  box-shadow: 0 1px 3px #0f172a40;
}

.dropdown-row {
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.dropdown-row[data-vertebra="C7"] {
  flex: .8;
  margin-bottom: -.5vh;
}

.dropdown-row[data-vertebra="T1"] {
  flex: .85;
  margin-bottom: -.5vh;
}

.dropdown-row[data-vertebra="T2"] {
  flex: .9;
  margin-bottom: -.7vh;
}

.dropdown-row[data-vertebra="T3"] {
  flex: .95;
  margin-bottom: -.8vh;
}

.dropdown-row[data-vertebra="T4"] {
  flex: 1;
  margin-bottom: -.95vh;
}

.dropdown-row[data-vertebra="T5"] {
  flex: 1.05;
  margin-bottom: -.9vh;
}

.dropdown-row[data-vertebra="T6"] {
  flex: 1.1;
  margin-bottom: -1.12vh;
}

.dropdown-row[data-vertebra="T7"] {
  flex: 1.15;
  margin-bottom: -1.15vh;
}

.dropdown-row[data-vertebra="T8"] {
  flex: 1.2;
  margin-bottom: -1.18vh;
}

.dropdown-row[data-vertebra="T9"] {
  flex: 1.25;
  margin-bottom: -1.2vh;
}

.dropdown-row[data-vertebra="T10"] {
  flex: 1.3;
  margin-bottom: -1.22vh;
}

.dropdown-row[data-vertebra="T11"] {
  flex: 1.35;
  margin-bottom: -1.25vh;
}

.dropdown-row[data-vertebra="T12"] {
  flex: 1.4;
  margin-bottom: -1.28vh;
}

.dropdown-row[data-vertebra="T13"] {
  flex: 1.45;
  margin-bottom: -1.32vh;
}

.dropdown-row[data-vertebra="L1"] {
  flex: 1.45;
  margin-bottom: -1.3vh;
}

.dropdown-row[data-vertebra="L2"] {
  flex: 1.5;
  margin-bottom: -1.33vh;
}

.dropdown-row[data-vertebra="L3"] {
  flex: 1.55;
  margin-bottom: -1.35vh;
}

.dropdown-row[data-vertebra="L4"] {
  flex: 1.6;
  margin-bottom: -1.4vh;
}

.dropdown-row[data-vertebra="L5"] {
  flex: 1.65;
  margin-bottom: -1.5vh;
}

.dropdown-row[data-vertebra="LSTV"] {
  flex: 1.7;
  margin-bottom: -1.5vh;
}

.dropdown-row[data-vertebra="SACRUM"] {
  flex: 4.5;
  margin-bottom: 0;
}

.screw-size-select {
  pointer-events: auto;
  z-index: 3;
  width: 100%;
}

.screw-size-select.sacrum-row {
  flex-direction: column;
  gap: 30px;
  width: 100%;
  display: flex;
}

.screw-size-dropdown {
  background-color: var(--MDsim-transparent-color);
  width: fit-content;
  color: var(--MDsim-font-color);
  border-radius: 8px;
  padding: 2px 4px;
  font-size: .68rem;
}

.screw-size-dropdown option {
  background-color: var(--MDsim-black-color);
  color: var(--MDsim-font-color);
}

.screw-size-dropdown:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.rod {
  z-index: 0;
  pointer-events: none;
  background-color: #2196f3;
  border-radius: 2px;
  width: 4px;
  transition: all .3s ease-in-out;
  position: absolute;
}

.OctTab-container {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 3px;
  height: 20px;
  display: flex;
}

.OctTab-title {
  border-radius: 25px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 20px;
  display: flex;
}

.OctTab-title.green {
  background-color: var(--MDsim-green-color);
}

.OctTab-title.red {
  background-color: var(--MDsim-error-color);
}

.OctTab-title.blue {
  background-color: var(--MDsim-button-color);
}

.spp-parameter {
  padding-inline: 10px;
}

.Analyse-spp-option {
  cursor: pointer;
  align-items: center;
  display: flex;
}

.Analyse-spp-option > * {
  flex: none;
}

.simple-spp-group {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.Analyse-spp-option.simple-spp {
  padding-left: 10px;
}

.Analyse-spp-option.simple-spp:hover {
  background-color: #0000;
}

.Spp-measurement-name.simple-spp-name {
  color: var(--MDsim-font-color);
  flex: 2;
  align-items: center;
  padding: 2px;
}

.simple-spp .Spp-measurement-value {
  color: var(--MDsim-font-color);
  background-color: #0000;
  border-radius: 25px;
}

.Analyse-spp-option > .Spp-measurement-name {
  flex: 2;
  align-items: center;
  padding: 2px;
}

.spp-info-button {
  vertical-align: middle;
  cursor: pointer;
  margin-left: 5px;
}

.spp-parameter-settings .Analyse-spp-option {
  cursor: default;
}

.settings-spp-option .Spp-measurement-name {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.Spp-measurement-values-container {
  justify-content: space-between;
  align-items: center;
  gap: 6%;
  display: flex;
}

.Spp-measurement-values-container.oct-view {
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  width: 144px;
  display: flex;
}

.Spp-measurement-value {
  text-align: center;
  border-radius: 25px;
  width: 20px;
  margin-right: 10px;
  padding: 2px 5px;
  transition: background-color .3s;
}

.Spp-measurement-value.red {
  background-color: var(--MDsim-error-color);
}

.Spp-measurement-value.green {
  background-color: var(--MDsim-transparent-color);
}

.Spp-measurement-value.yellow {
  background-color: var(--MDsim-warning-color);
}

.Spp-measurement-values-container.oct-view.compare-mode {
  width: 144px;
}

.Analyse-range-slider-container {
  padding-left: 10px;
  padding-right: 10px;
}

.App-option-circle {
  border: 2px solid var(--MDsim-font-color);
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  transition: background-color .3s;
}

.App-option-circle.active {
  background-color: var(--MDsim-highlight-color);
}

.App-option-circle.display-only {
  background-color: #0000;
  border-color: #0000;
}

.App-option-circle.display-only.active {
  background-color: #0000;
}

.gap-category-tabs {
  justify-content: start;
  padding: 10px;
  display: flex;
}

.gap-category-tab-wrapper {
  background: #25251e;
  background-color: var(--MDsim-background-box-color);
  border-radius: 25px;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: 15px;
  padding: 3px;
  display: flex;
  overflow: hidden;
}

.gap-category-button {
  cursor: pointer;
  min-width: 70px;
  height: 100%;
  font-family: var(--MDsim-font-family);
  font-size: var(--MDsim-font-size-medium);
  background-color: var(--MDsim-background-box-color);
  color: var(--MDsim-font-color);
  border: none;
  border-radius: 25px;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
  position: relative;
}

.gap-category-button.active {
  background-color: var(--MDsim-selected-color);
  color: var(--MDsim-highlighted-font-color);
  z-index: 100;
}

.gap-category-button:hover:not(.active) {
  background-color: var(--MDsim-selected-color);
  color: var(--MDsim-highlighted-font-color);
  opacity: .8;
}

.gap-category-button:focus {
  outline: none;
}

.colored-slider-container {
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 18px 0 10px;
  display: flex;
  position: relative;
}

.colored-slider-markers {
  pointer-events: none;
  z-index: 10;
  height: 18px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.colored-slider-marker {
  flex-direction: column;
  align-items: center;
  font-size: 9px;
  font-weight: 500;
  display: flex;
  position: absolute;
  transform: translateX(-50%);
}

.marker-label {
  white-space: nowrap;
  margin-bottom: 0;
}

.marker-arrow {
  border-top: 10px solid;
  border-left: 5.77px solid #0000;
  border-right: 5.77px solid #0000;
  width: 0;
  height: 0;
}

.colored-slider {
  -webkit-appearance: none;
  opacity: .9;
  border-radius: 5px;
  outline: none;
  width: 100%;
  height: 10px;
  transition: opacity .2s;
}

.colored-slider:disabled {
  opacity: .9;
  cursor: default;
}

.colored-slider::-webkit-slider-thumb {
  appearance: none;
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
}

.colored-slider:disabled::-webkit-slider-thumb {
  cursor: default;
}

.colored-slider::-moz-range-thumb {
  opacity: 0;
  cursor: pointer;
  background: none;
  border: none;
  width: 0;
  height: 0;
}

.colored-slider:disabled::-moz-range-thumb {
  cursor: default;
}

.measurements-type .App-widget-box-title {
  background-color: var(--MDsim-background-box-color);
}

.Analyse-spp-option {
  cursor: pointer;
  align-items: center;
  display: flex;
}

.spp-parameter-group-container .App-widget-box-title {
  background-color: var(--MDsim-background-box-color);
}

.spp-widget-general-info-and-controls {
  z-index: 10;
  background-color: var(--MDsim-background-color);
  flex-direction: row;
  justify-content: end;
  align-items: center;
  gap: 10px;
  height: 20px;
  padding-block: 5px;
  display: flex;
  position: relative;
}

.spp-widget-info {
  flex-direction: row;
  align-items: end;
  gap: 10px;
  padding-inline: 15px;
  display: flex;
}

.spp-widget-general-info-and-controls .App-button {
  background-color: var(--MDsim-background-box-color);
  width: 30px;
  height: 20px;
  color: var(--MDsim-highlight-color);
  align-items: start;
  font-weight: 550;
  line-height: 1;
}

.Analyse-spp-option > * {
  flex: none;
}

.Analyse-spp-option > .Spp-measurement-name {
  flex-direction: row;
  flex: 2;
  padding: 2px;
  display: flex;
}

.Spp-measurement-value {
  margin-right: 10px;
}

.Analyse-measurement-option {
  width: 100%;
  height: var(--MDsim-widget-box-title-height-small);
  box-sizing: border-box;
  background-color: var(--MDsim-button-color);
  cursor: pointer;
  border-radius: 25px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  padding-left: 20px;
  display: flex;
}

.Analyse-measurement-option label {
  flex: 1;
  margin-left: 5px;
}

.App-spp-widget {
  box-sizing: border-box;
  flex-direction: column;
  align-items: start;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.spp-widget-container {
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.Spp-widget-wrapper {
  padding-bottom: 10px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: start;
  gap: 10px;
  height: 100%;
  padding-inline: 10px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.Spp-widget-wrapper .App-widget-box {
  min-height: var(--MDsim-widget-box-title-height-small);
  border-radius: 0;
  flex-shrink: 0;
}

.Spp-widget-wrapper .App-widget-box.collapsed {
  height: var(--MDsim-widget-box-title-height-small);
}

.Spp-widget-wrapper .App-widget-box.expanded {
  min-height: var(--MDsim-widget-box-title-height-small);
  flex: 1;
  height: fit-content;
}

.Spp-widget-wrapper .App-widget-box .App-widget-box-contain {
  -ms-overflow-style: none;
  scrollbar-width: none;
  border-radius: 0;
  overflow: hidden auto;
}

.Spp-widget-wrapper .App-widget-box .App-widget-box-contain::-webkit-scrollbar {
  display: none;
}

.spp-parameter-group {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.Spp-widget-wrapper .App-widget-box:first-child {
  flex-grow: 0;
  flex-shrink: 0;
}

.Spp-widget-wrapper {
  max-height: 100%;
}

.Spp-widget-wrapper .App-widget-box.expanded .App-widget-box-contain {
  max-height: var(--expanded-content-max-height, 400px);
  flex: 1;
}

.App-toggle-validation-switch {
  width: var(--Toggle-theme-width);
  height: var(--Toggle-theme-height);
  cursor: pointer;
  display: inline-block;
  position: relative;
}

.App-toggle-validation-switch-off, .App-toggle-validation-switch-on {
  border-radius: var(--Toggle-theme-height);
  transition: background-color .5s;
  position: absolute;
  inset: 0;
}

.App-toggle-validation-switch-off {
  background-color: var(--MDsim-error-color);
}

.App-toggle-validation-switch-on {
  background-color: var(--MDsim-green-color);
}

.App-toggle-validation-switch-off:before, .App-toggle-validation-switch-on:before {
  content: "";
  height: var(--Toggle-theme-bubble-size);
  width: var(--Toggle-theme-bubble-size);
  background-color: #fff;
  border-radius: 50%;
  transition: left .5s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.App-toggle-validation-switch-off:before {
  left: 4px;
}

.App-toggle-validation-switch-on:before {
  left: calc(var(--Toggle-theme-width) - var(--Toggle-theme-bubble-size) - 4px);
}

.App-toggle-validation-switch-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.App-toggle-validation-icon {
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 10px;
  height: 10px;
  transition: left .5s;
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.App-toggle-validation-switch-off .App-toggle-validation-icon {
  left: calc(4px + (var(--Toggle-theme-bubble-size) - 10px) / 2);
}

.App-toggle-validation-switch-on .App-toggle-validation-icon {
  left: calc(var(--Toggle-theme-width) - var(--Toggle-theme-bubble-size) - 4px +
      (var(--Toggle-theme-bubble-size) - 10px) / 2);
}

.App-toggle-validation-switch-off .App-toggle-validation-icon svg * {
  stroke: var(--MDsim-error-color);
  fill: var(--MDsim-error-color);
}

.App-toggle-validation-switch-on .App-toggle-validation-icon svg * {
  stroke: var(--MDsim-green-color);
  fill: var(--MDsim-green-color);
}

.App-validation-flag {
  z-index: 10;
  background-color: var(--MDsim-background-color);
  border-radius: 20px 0 0;
  flex-direction: row;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-block: 10px;
  padding-inline: 10px;
  display: flex;
  position: relative;
}

.App-validation-flag-wrapper {
  background-color: var(--MDsim-background-box-color);
  border-radius: 15px;
  grid-template-columns: 5fr 2fr;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 460px;
  padding: 5px 20px;
  display: grid;
}

.App-validation-flag-text {
  color: var(--MDsim-font-color);
  opacity: .8;
  font-size: var(--MDsim-font-size-medium);
  text-align: left;
}

.App-validation-flag-toggle {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  display: flex;
}

.App-validation-flag-toggle-text {
  color: var(--MDsim-font-color);
  font-size: var(--MDsim-font-size-medium);
  white-space: nowrap;
}

.pain-assessment-thumbnail {
  box-sizing: border-box;
  background-color: var(--MDsim-background-box-color);
  cursor: pointer;
  border-radius: 10px;
  flex-direction: column;
  width: 100%;
  height: 100%;
  transition: all .2s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.pain-assessment-thumbnail:hover {
  zoom: 1.02;
}

.pain-assessment-thumbnail.selected {
  border-width: 3px;
  border: 3px solid var(--MDsim-highlight-color);
}

.pain-assessment-thumbnail-color {
  border-radius: 8px 8px 0 0;
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 60%;
  display: flex;
  position: relative;
}

.pain-assessment-thumbnail-level {
  font-size: var(--MDsim-font-size-large);
  color: var(--MDsim-font-color);
  text-shadow: 0 1px 2px var(--MDsim-highlight-color);
  text-align: center;
  font-weight: bold;
}

.pain-assessment-thumbnail-info {
  box-sizing: border-box;
  padding: var(--MDsim-pain-thumbnail-inline-padding);
  flex-direction: column;
  flex-shrink: 0;
  gap: 2px;
  width: 100%;
  height: 30%;
  display: flex;
}

.pain-assessment-thumbnail-date {
  font-size: var(--MDsim-font-size-xsmall);
  color: var(--MDsim-highlight-color);
  text-align: center;
  font-weight: 600;
}

.pain-assessment-thumbnail-areas {
  font-size: var(--MDsim-font-size-xxsmall);
  color: var(--MDsim-font-color);
  text-align: center;
  line-height: 1.3;
}

.pain-assessment-thumbnail-marker {
  background-color: var(--MDsim-highlight-color);
  width: 20px;
  height: 20px;
  color: var(--MDsim-highlighted-font-color);
  font-size: var(--MDsim-font-size-small);
  z-index: 10;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  display: flex;
  position: absolute;
  top: 4px;
  right: 4px;
}

@media (width <= 768px) {
  .pain-assessment-thumbnail {
    width: 80px;
    height: 100px;
  }

  .pain-assessment-thumbnail-level {
    font-size: var(--MDsim-font-size-medium);
  }

  .pain-assessment-thumbnail-date {
    font-size: var(--MDsim-font-size-xxsmall);
  }

  .pain-assessment-thumbnail-areas {
    font-size: 10px;
  }
}

.instance-thumbnail-wrapper {
  border-radius: 10px;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
  position: relative;
  overflow: hidden;
}

.instance-thumbnail-wrapper:hover {
  cursor: pointer;
  border: 3px solid var(--MDsim-highlight-color);
}

.thumbnail-selected-marker {
  z-index: 3;
  background-color: var(--MDsim-highlight-color);
  opacity: .9;
  box-sizing: border-box;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  padding: 5px;
  display: flex;
  position: relative;
}

.thumbnail-selected-marker svg, .thumbnail-selected-marker img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.instance-thumbnail-image {
  object-fit: scale-down;
  background-color: var(--MDsim-black-color);
  width: 100%;
  height: 100%;
}

.instance-thumbnail-placeholder {
  background-color: var(--MDsim-black-color);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.instance-thumbnail-placeholder-icon {
  color: #ffffff80;
  opacity: .7;
  width: 40%;
  height: 40%;
}

.instance-thumbnail-overlay {
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  background: linear-gradient(to top, #000 0%, #00000080 50%, #0000 100%);
  flex-direction: column;
  justify-content: end;
  align-items: center;
  gap: 40%;
  width: 100%;
  height: 100%;
  padding: 5px;
  font-size: 10px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

.text-region-overlay {
  box-sizing: border-box;
  background-color: #00000080;
  border-radius: 5px;
  width: 100%;
  padding: 2px 5px;
}

.instance-title-thumbnail, .instance-date-thumbnail {
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

.instance-label-text {
  color: var(--MDsim-font-color);
}

.instance-thumbnail-wrapper.selected:after {
  content: "";
  z-index: 2;
  background-color: #fff3;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.thumbnail-tab {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  height: 100%;
  padding: 10px;
  display: flex;
  overflow: hidden;
}

.thumbnail-tab-visible-items {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 5px;
  display: flex;
  overflow: hidden;
}

.thumbnail-tab-item {
  cursor: pointer;
  width: 10vh;
  height: 13vh;
  box-shadow: 2px 2px 2px #000c,
    2px 2px 2px var(--MDsim-highlight-color);
  border-radius: 13px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: transform .3s, box-shadow .3s;
  display: flex;
  position: relative;
}

.thumbnail-tab-item.selected {
  border: 3px solid var(--MDsim-highlight-color);
}

.thumbnail-tab-item:after {
  content: "";
  background-color: var(--MDsim-highlight-color);
  opacity: .2;
  z-index: 1;
  pointer-events: none;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.thumbnail-tab-empty {
  height: 100%;
  color: var(--MDsim-font-color);
  font-size: var(--MDsim-font-size-medium);
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
}

.thumbnail-tab-navigation {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 30px;
  min-height: 30px;
  display: flex;
}

.thumbnail-tab-navigation-placeholder {
  visibility: hidden;
  width: 100%;
  height: 30px;
  min-height: 30px;
}



.radio-density-statistics-container {
  box-sizing: border-box;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
  padding: 10px;
  display: flex;
}

.radio-density-statistics-description {
  color: var(--MDsim-highlight-color);
}

.radio-density-statistics-description .App-tooltip-content {
  color: var(--MDsim-font-color);
}

.radio-density-statistics {
  flex-direction: column;
  gap: 15px;
  padding: 10px;
  display: flex;
}

.radio-density-sliders {
  flex-flow: column wrap;
  gap: 15px;
  display: flex;
}

.radio-density-slider-infos {
  color: var(--MDsim-font-color);
  flex-direction: row;
  justify-content: space-between;
  margin-top: -5px;
  font-size: 12px;
  display: flex;
}

.threshold-label {
  color: var(--MDsim-font-color);
  font-weight: 600;
}

.threshold-label .App-tooltip-content {
  color: var(--MDsim-font-color);
  font-weight: 400;
}

.radio-density-statistics-table {
  --radio-density-table-max-height: 40vh;
  width: 100%;
  max-height: var(--radio-density-table-max-height);
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

.radio-density-statistics-loading, .radio-density-statistics-empty {
  text-align: center;
  color: var(--MDsim-highlight-color);
  padding: 20px;
}

.radio-density-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
  font-size: 12px;
}

.radio-density-table thead {
  table-layout: fixed;
  z-index: 3;
  background-color: var(--MDsim-background-color-dark);
  width: 100%;
  display: table;
  position: sticky;
  top: 0;
}

.radio-density-table tbody {
  max-height: calc(var(--radio-density-table-max-height) - 40px);
  display: block;
  overflow: hidden auto;
}

.radio-density-table th {
  text-align: center;
  color: var(--MDsim-font-color);
  border-bottom: 1px solid var(--MDsim-highlight-color);
  white-space: nowrap;
  background-color: var(--MDsim-background-color-dark);
  box-shadow: inset 0 -1px 0 var(--MDsim-highlight-color);
  padding: 8px 12px;
  font-weight: 600;
}

.radio-density-table tbody tr {
  table-layout: fixed;
  width: 100%;
  display: table;
}

.radio-density-table tbody tr:hover {
  background-color: var(--MDsim-background-color-hover);
}

.radio-density-table td {
  text-align: center;
  color: var(--MDsim-font-color);
  border-bottom: 1px solid var(--MDsim-border-color);
  padding: 8px 12px;
}

.radio-density-table .vertebra-cell {
  font-weight: 500;
}

.radio-density-table .stat-cell {
  text-align: center;
}

.Check-dx-grid {
  flex-direction: row;
  gap: 10px;
  width: 100%;
  height: 100%;
  display: flex;
}

.Check-dx-grid.single-view {
  flex-direction: row;
  width: 100%;
  height: 100%;
  display: flex;
}

.radio-density-container {
  box-sizing: border-box;
  gap: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
}

.radio-density-view {
  border-radius: var(--MDsim-border-radius-xlarge);
  flex: 3.5;
}

.radio-density-sidebar {
  background-color: var(--MDsim-black-color);
  box-sizing: border-box;
  flex-direction: column;
  gap: 10px;
  width: 300px;
  min-height: 0;
  padding-inline: 20px;
  display: flex;
}

.radio-density-info-and-controls {
  flex-direction: column;
  flex: 1.5;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  display: flex;
}

.radio-density-info {
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  gap: 6px;
  display: flex;
}

.radio-density-info-text {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.radio-density-info-title {
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-font-color);
  font-weight: 600;
  font-family: var(--MDsim-font-family);
}

.radio-density-info-subtitle {
  font-size: var(--MDsim-font-size-xsmall);
  color: var(--MDsim-font-color);
  font-family: var(--MDsim-font-family);
  opacity: .8;
  line-height: 1.3;
}

.radio-density-controls {
  flex-direction: column;
  flex: 1;
  justify-content: space-around;
  gap: 12px;
  display: flex;
}

.radio-density-controls .App-select-parent {
  box-shadow: none;
  background-color: #0000;
  padding: 0;
}

.radio-density-controls select {
  background-color: var(--MDsim-black-color);
  border: 2px solid var(--MDsim-font-color);
  color: var(--MDsim-font-color);
}

.radio-density-dimension-section {
  flex-direction: column;
  flex-shrink: 0;
  gap: 6px;
  display: flex;
}

.radio-density-dimension-title {
  font-size: var(--MDsim-font-size-small);
  color: var(--MDsim-font-color);
  font-weight: 500;
  font-family: var(--MDsim-font-family);
}

.radio-density-dimension-controls {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.radio-density-viewer-section {
  flex-direction: column;
  flex: 3;
  align-items: center;
  gap: 10px;
  min-height: 0;
  display: flex;
}

.radio-density-orientation-controls {
  flex-direction: row;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding-inline: 10px;
  display: flex;
}

.radio-density-orientation-label {
  font-size: var(--MDsim-font-size-small);
  color: var(--MDsim-font-color);
  font-weight: 500;
  font-family: var(--MDsim-font-family);
  white-space: nowrap;
}

.radio-density-viewer {
  background-color: var(--MDsim-background-color);
  border-radius: var(--MDsim-border-radius-xlarge);
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.drr-toggle-button {
  background-color: var(--MDsim-primary-color);
  color: #fff;
  border-radius: var(--MDsim-border-radius);
  cursor: pointer;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .3s;
}

.drr-toggle-button:hover:not(:disabled) {
  background-color: var(--MDsim-primary-color-hover);
  opacity: .9;
}

.drr-toggle-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.radio-density-axial-section {
  box-sizing: border-box;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 100%;
  display: flex;
}

.radio-density-axial-title {
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-font-color);
  font-weight: 600;
  font-family: var(--MDsim-font-family);
  text-align: center;
  flex-shrink: 0;
}

.radio-density-axial-viewer {
  border-radius: var(--MDsim-border-radius-xlarge);
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 1px;
  position: relative;
  overflow: hidden;
}

.radio-density-description {
  z-index: 2;
  background: linear-gradient(to top, #000000b3, #0000);
  align-items: center;
  gap: 6px;
  padding: 12px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.radio-density-info-button {
  flex-shrink: 0;
  align-self: center;
}

.radio-density-description-text {
  font-size: var(--MDsim-font-size-xsmall);
  color: var(--MDsim-font-color);
  font-family: var(--MDsim-font-family);
  text-align: left;
  flex: 0 auto;
  line-height: 1.3;
}

.radio-density-axial-controls-top-left {
  z-index: 10;
  background: none;
  position: absolute;
  top: 12px;
  left: 12px;
}

.radio-density-axial-controls-top-left .App-select-parent {
  box-shadow: none;
  background: none;
  padding: 0;
}

.radio-density-axial-controls-top-left select {
  border: 2px solid var(--MDsim-font-color);
  color: var(--MDsim-font-color);
  background-color: #0000;
}

.radio-density-axial-controls-top-left select option {
  background-color: var(--MDsim-background-color);
  color: var(--MDsim-font-color);
}

.radio-density-axial-controls-top-right {
  z-index: 10;
  align-items: end;
  gap: 8px;
  display: flex;
  position: absolute;
  top: 12px;
  right: 12px;
}

.radio-density-info-button-container {
  padding-bottom: .5px;
}

.radio-density-toggle-info-button {
  flex-shrink: 0;
  background-color: var(--MDsim-font-color) !important;
}

.radio-density-toggle-info-button:hover {
  background-color: var(--MDsim-font-color) !important;
}

.radio-density-toggle-info-button svg {
  color: var(--MDsim-black-color);
}

.radio-density-toggle-info-button line {
  stroke: var(--MDsim-black-color);
}

.radio-density-toggle-info-button circle {
  fill: var(--MDsim-black-color);
}

.radio-density-info-button {
  flex-shrink: 0;
  background-color: var(--MDsim-font-color) !important;
}

.radio-density-info-button:hover {
  background-color: var(--MDsim-font-color) !important;
}

.radio-density-info-button svg {
  color: var(--MDsim-black-color);
}

.radio-density-info-button line {
  stroke: var(--MDsim-black-color);
}

.radio-density-info-button circle {
  fill: var(--MDsim-black-color);
}

.Check-ct-grid, .Check-mr-grid {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  height: 100%;
  display: grid;
}

.Check-ct-grid.single-view, .Check-mr-grid.single-view {
  width: 100%;
  height: 100%;
  display: flex;
}

.Check-ct-grid.multi-view .second-column, .Check-mr-grid.multi-view .second-column {
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.Check-ct-grid .first-column, .Check-mr-grid .first-column {
  grid-area: 1 / 1;
  height: 100%;
}

.Check-ct-grid.two-column, .Check-mr-grid.two-column {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  height: 100%;
  display: grid;
}

.Check-ct-grid.two-column > div, .Check-mr-grid.two-column > div {
  height: 100%;
}

.Check-ct-volume-grid, .Check-mr-volume-grid {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.Check-ct-volume-grid.single-view, .Check-mr-volume-grid.single-view {
  width: 100%;
  height: 100%;
  display: flex;
}

.Check-ct-volume-grid.multi-view, .Check-mr-volume-grid.multi-view, .Check-ct-volume-grid.two-column, .Check-mr-volume-grid.two-column {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  height: 100%;
  display: grid;
}

.clinical-history-thumbnail {
  box-sizing: border-box;
  background-color: var(--MDsim-background-box-color);
  cursor: pointer;
  border-radius: 10px;
  flex-direction: column;
  width: 100%;
  height: 100%;
  transition: all .2s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.clinical-history-thumbnail:hover {
  zoom: 1.02;
}

.clinical-history-thumbnail.selected {
  border-width: 3px;
  border: 3px solid var(--MDsim-highlight-color);
}

.clinical-history-thumbnail-color {
  border-radius: 8px 8px 0 0;
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 60%;
  display: flex;
  position: relative;
}

.clinical-history-thumbnail-level {
  font-size: var(--MDsim-font-size-large);
  color: var(--MDsim-font-color);
  text-shadow: 0 1px 2px var(--MDsim-highlight-color);
  text-align: center;
  font-weight: bold;
}

.clinical-history-thumbnail-info {
  box-sizing: border-box;
  padding: var(--MDsim-pain-thumbnail-inline-padding);
  flex-direction: column;
  flex-shrink: 0;
  gap: 2px;
  width: 100%;
  height: 30%;
  display: flex;
}

.clinical-history-thumbnail-date {
  font-size: var(--MDsim-font-size-xsmall);
  color: var(--MDsim-highlight-color);
  text-align: center;
  font-weight: 600;
}

.clinical-history-thumbnail-marker {
  background-color: var(--MDsim-highlight-color);
  width: 20px;
  height: 20px;
  color: var(--MDsim-highlighted-font-color);
  font-size: var(--MDsim-font-size-small);
  z-index: 10;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  display: flex;
  position: absolute;
  top: 4px;
  right: 4px;
}

@media (width <= 768px) {
  .clinical-history-thumbnail {
    width: 80px;
    height: 100px;
  }

  .clinical-history-thumbnail-level {
    font-size: var(--MDsim-font-size-medium);
  }

  .clinical-history-thumbnail-date {
    font-size: var(--MDsim-font-size-xxsmall);
  }
}

.clinical-history-viewer {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.clinical-history-viewer-container {
  background-color: var(--MDsim-background-box-color);
  box-sizing: border-box;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  height: 100%;
  padding: 20px;
  box-shadow: 0 2px 8px #0000001a;
}

.clinical-history-viewer-header {
  border-bottom: 1px solid var(--MDsim-border-color);
  justify-content: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  display: flex;
}

.clinical-history-viewer-date {
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-highlight-color);
  font-weight: 600;
}

.clinical-history-viewer-content {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.clinical-history-viewer-metrics {
  justify-content: space-around;
  gap: 12px;
  display: flex;
}

.clinical-history-viewer-metric {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  display: flex;
}

.metric-label {
  font-size: var(--MDsim-font-size-xsmall);
  color: var(--MDsim-font-color-secondary);
  text-transform: uppercase;
}

.metric-value {
  font-size: var(--MDsim-font-size-large);
  color: var(--MDsim-font-color);
  font-weight: bold;
}

.clinical-history-viewer-conditions {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.conditions-label {
  font-size: var(--MDsim-font-size-small);
  color: var(--MDsim-font-color-secondary);
  text-transform: uppercase;
}

.conditions-list {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.condition-tag {
  background-color: var(--MDsim-highlight-color);
  color: var(--MDsim-highlighted-font-color);
  font-size: var(--MDsim-font-size-small);
  border-radius: 16px;
  padding: 4px 12px;
}

.clinical-history-viewer-notes {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.notes-label {
  font-size: var(--MDsim-font-size-small);
  color: var(--MDsim-font-color-secondary);
  text-transform: uppercase;
}

.notes-content {
  font-size: var(--MDsim-font-size-small);
  color: var(--MDsim-font-color);
  background-color: var(--MDsim-background-color);
  border-radius: 8px;
  max-height: 100px;
  margin: 0;
  padding: 8px;
  line-height: 1.5;
  overflow-y: auto;
}

.clinical-history-viewer-error, .clinical-history-viewer-loading {
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-font-color-secondary);
  text-align: center;
  padding: 20px;
}

.clinical-history-viewer-qol {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.qol-title {
  font-size: var(--MDsim-font-size-small);
  color: var(--MDsim-font-color-secondary);
  text-transform: uppercase;
}

.qol-list {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.qol-item {
  background: var(--MDsim-background-color);
  border: 1px solid var(--MDsim-border-color);
  border-radius: 8px;
  padding: 10px 12px;
}

.qol-row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  display: flex;
}

.qol-label {
  letter-spacing: .08em;
  font-weight: 600;
}

.qol-value {
  align-items: baseline;
  gap: 4px;
  display: flex;
}

.qol-current {
  font-weight: 700;
}

.qol-separator {
  opacity: .7;
}

.qol-max {
  color: var(--MDsim-highlight-color);
  font-weight: 700;
}

.qol-date {
  font-size: var(--MDsim-font-size-xsmall);
  color: var(--MDsim-font-color-secondary);
}

.data-placeholder {
  outline: dashed 1px var(--MDsim-highlight-color);
  text-align: center;
  box-sizing: border-box;
  border-radius: 10px;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  width: 65%;
  height: 12vh;
  padding: 10px;
  display: flex;
}

.data-placeholder .selected {
  box-shadow: 0 0 0 2px var(--MDsim-highlight-color);
  border-radius: 10px;
  outline: none;
}

.data-placeholder-title {
  color: var(--MDsim-font-color);
  margin-bottom: 5px;
}

.data-placeholder-comment {
  color: var(--MDsim-font-color);
  width: 90%;
}

.carousel-navigation {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.carousel-base {
  width: 100%;
}

.carousel-base path, .carousel-base ellipse, .carousel-base circle, .carousel-base line {
  stroke: var(--MDsim-highlight-color);
}

.carousel-arrow-button {
  cursor: pointer;
  z-index: 100;
  touch-action: manipulation;
  background: none;
  border: none;
  border-radius: 50%;
  width: 20%;
  height: 30%;
  position: absolute;
  bottom: 28%;
}

.carousel-prev-button {
  left: 0;
}

.carousel-next-button {
  right: 0;
}

.image-carousel {
  flex-direction: column;
  justify-content: end;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: visible;
}

.carousel-image-container {
  justify-content: center;
  align-items: start;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.carousel-image {
  object-fit: contain;
  z-index: 1;
  flex-direction: column;
  justify-content: end;
  align-items: end;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  bottom: 5%;
  overflow: visible;
}

.image-carousel .carousel-arrow-button {
  z-index: 10;
  height: 40%;
}

.medical-image-thumbnail {
  box-sizing: border-box;
  background-color: var(--MDsim-black-color);
  cursor: pointer;
  width: 100%;
  height: 100%;
  transition: var(--MDsim-transition-all);
  border-radius: 10px;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.medical-image-thumbnail:hover {
  zoom: 1.02;
}

.medical-image-thumbnail.selected {
  border-width: 3px;
  border: 3px solid var(--MDsim-highlight-color);
}

.medical-image-thumbnail-preview {
  border-radius: 8px 8px 0 0;
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 60%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.medical-image-thumbnail-image {
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: 100%;
}

.medical-image-thumbnail-placeholder {
  background-color: var(--MDsim-black-color);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  display: flex;
}

.medical-image-thumbnail-placeholder-icon {
  color: #ffffff80;
  opacity: .7;
  width: 40%;
  height: 40%;
}

.medical-image-thumbnail-placeholder-label {
  font-size: var(--MDsim-font-size-medium);
  color: #fff9;
  text-align: center;
  letter-spacing: .05em;
  font-weight: bold;
}

.medical-image-thumbnail-overlay {
  z-index: 1;
  background-color: #000000b3;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.medical-image-thumbnail-overlay-name {
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-font-color);
  text-align: center;
  z-index: 2;
  padding: 4px 8px;
  font-weight: bold;
  line-height: 1.5;
}

.medical-image-thumbnail-overlay-date {
  font-size: var(--MDsim-font-size-xsmall);
  color: var(--MDsim-font-color);
  text-align: center;
  z-index: 2;
  margin-top: 4px;
  padding: 2px 8px;
  font-weight: 600;
  line-height: 1.5;
}

.medical-image-thumbnail--annex .medical-image-thumbnail-overlay-name, .medical-image-thumbnail--annex .medical-image-thumbnail-overlay-date {
  font-size: var(--MDsim-font-size-small);
}

.medical-image-thumbnail-overlay-extra {
  font-size: var(--MDsim-font-size-xsmall);
  color: var(--MDsim-font-color);
  text-align: center;
  z-index: 2;
  opacity: .85;
  margin-top: 2px;
  padding: 2px 8px;
  font-weight: 500;
  line-height: 1.5;
}

.medical-image-thumbnail-info {
  display: none;
}

.medical-image-thumbnail-modality {
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-highlight-color);
  text-align: center;
  font-weight: bold;
  line-height: 1.3;
}

.medical-image-thumbnail-date {
  font-size: var(--MDsim-font-size-xsmall);
  color: var(--MDsim-font-color);
  text-align: center;
  font-weight: 600;
  line-height: 1.3;
}

.medical-image-thumbnail-marker {
  background-color: var(--MDsim-highlight-color);
  width: 20px;
  height: 20px;
  color: var(--MDsim-font-color);
  font-size: var(--MDsim-font-size-small);
  z-index: 10;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  display: flex;
  position: absolute;
  top: 4px;
  right: 4px;
}

.postural-image-thumbnail {
  box-sizing: border-box;
  background-color: var(--MDsim-background-box-color);
  cursor: pointer;
  width: 10vh;
  height: 15vh;
  transition: var(--MDsim-transition-all);
  border-radius: 10px;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.postural-image-thumbnail.selected {
  border-width: 3px;
  border: 3px solid var(--MDsim-highlight-color);
}

.postural-image-thumbnail-preview {
  background-color: var(--MDsim-background-color);
  border-radius: 8px 8px 0 0;
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 60%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.postural-image-thumbnail-image {
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: 100%;
}

.postural-image-thumbnail-overlay {
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: transform var(--MDsim-transition-all);
  background-color: #000000b3;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.postural-image-thumbnail:hover .postural-image-thumbnail-overlay, .postural-image-thumbnail:focus-within .postural-image-thumbnail-overlay {
  transform: scale(1.02);
}

.postural-image-thumbnail-overlay-name {
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-font-color);
  text-align: center;
  z-index: 2;
  padding: 4px 8px;
  font-weight: bold;
  line-height: 1.5;
}

.postural-image-thumbnail-overlay-date {
  font-size: var(--MDsim-font-size-xsmall);
  color: var(--MDsim-font-color);
  text-align: center;
  z-index: 2;
  margin-top: 4px;
  padding: 2px 8px;
  font-weight: 600;
  line-height: 1.5;
}

.postural-image-thumbnail-info {
  display: none;
}

.postural-image-thumbnail-orientation {
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-highlight-color);
  text-align: center;
  font-weight: bold;
  line-height: 1.3;
}

.postural-image-thumbnail-date {
  font-size: var(--MDsim-font-size-xsmall);
  color: var(--MDsim-font-color);
  text-align: center;
  font-weight: 600;
  line-height: 1.3;
}

.postural-image-thumbnail-marker {
  background-color: var(--MDsim-highlight-color);
  width: 20px;
  height: 20px;
  color: var(--MDsim-highlighted-font-color);
  font-size: var(--MDsim-font-size-small);
  z-index: 10;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  display: flex;
  position: absolute;
  top: 4px;
  right: 4px;
}

.svg-image-carousel {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: visible;
}

.carousel-svg-image-container {
  box-sizing: border-box;
  border: 0;
  justify-content: center;
  align-items: center;
  height: 80%;
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;
}

.carousel-svg-image {
  z-index: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  position: relative;
}

.carousel-svg-image svg {
  object-fit: cover;
  transform-origin: center;
  height: 100%;
}

.svg-image-carousel .carousel-navigation {
  pointer-events: none;
  flex-shrink: 0;
  height: auto;
}

.svg-image-carousel .carousel-base {
  pointer-events: none;
}

.svg-image-carousel .carousel-arrow-button {
  z-index: 120;
  pointer-events: auto;
  touch-action: manipulation;
  height: 20%;
}

.anatomy-svg-with-drawing {
  width: 100%;
  height: 100%;
}

.svg-image-carousel * {
  box-sizing: border-box;
}

.carousel-svg-image-container, .carousel-svg-image, .carousel-svg-image svg {
  border: 0;
  margin: 0;
  padding: 0;
}

.carousel-svg-image svg path:not(.pain-recorded-path):not(.pain-current-path) {
  fill: var(--MDsim-highlight-color);
}

.pain-recorded-path, .pain-current-path {
  vector-effect: non-scaling-stroke;
  fill: none;
}

.pain-assessment-viewer, .pain-assessment-viewer-container, .pain-assessment-viewer .pain-drawing-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.pain-assessment-viewer .pain-scalable-drawing-wrapper {
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.pain-assessment-viewer .pain-scalable-drawing-wrapper .svg-image-carousel {
  width: 100%;
  height: 100%;
}

.pain-assessment-viewer .pain-recorded-path {
  opacity: .9;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
  transition: opacity .2s;
}

.pain-assessment-viewer .pain-recorded-path:hover {
  opacity: 1;
}

.pain-assessment-viewer .pain-recorded-path.selected {
  opacity: 1;
  stroke-dasharray: 2 2;
  animation: 1.5s linear infinite dash-animation;
}

@keyframes dash-animation {
  to {
    stroke-dashoffset: -4px;
  }
}

.pain-assessment-viewer-error {
  width: 100%;
  height: 100%;
  color: var(--MDsim-font-color);
  font-size: var(--MDsim-font-size-medium);
  text-align: center;
  background-color: var(--MDsim-background-color);
  border: 1px solid var(--MDsim-border-color);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.pain-assessment-viewer .pain-scalable-drawing-wrapper .svg-image-carousel .carousel-navigation .carousel-arrow-button {
  z-index: 1110;
  pointer-events: auto;
}

.pain-assessment-viewer .pain-path-tooltip {
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1500;
  font-size: var(--MDsim-font-size-small);
  background: #000000d9;
  border-radius: 8px;
  padding: 8px 10px;
  position: absolute;
  transform: translate(-50%, -120%);
  box-shadow: 0 4px 12px #00000040;
}

.pain-assessment-viewer .pain-path-tooltip-level {
  font-weight: 700;
}

.pain-assessment-viewer .pain-path-tooltip-type {
  opacity: .9;
}

.DigitalTwinCreationWidget-container {
  background-color: var(--MDsim-black-color);
  border-radius: 20px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.DigitalTwinCreationWidget-content {
  grid-template-columns: 1fr 3fr 1fr;
  justify-content: end;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 2% 5%;
  display: grid;
}

.DigitalTwinCreationWidget-core-elements, .DigitalTwinCreationWidget-refine-elements {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 100%;
  display: flex;
  overflow-y: auto;
}

.DigitalTwinCreationWidget-wrapper {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  justify-self: center;
  height: 70vh;
  display: flex;
  position: relative;
  overflow: visible;
}

.DigitalTwinCreationWidget-wrapper .image-carousel {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70vh;
  display: flex;
  position: relative;
}

.DigitalTwinCreationWidget-icon {
  justify-content: center;
  align-items: start;
  width: 100%;
  height: 70vh;
  display: flex;
  position: relative;
}

.Text-area {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.Main-text {
  font-size: var(--MDsim-font-size-title-xlarge);
  color: var(--MDsim-font-color);
  font-weight: 600;
}

.Sub-text {
  font-size: var(--MDsim-font-size-small);
  color: var(--MDsim-font-color);
  text-align: center;
}

.selected-image-container {
  aspect-ratio: 10 / 12;
  background-color: var(--MDsim-background-color);
  width: 70%;
  box-shadow: 0 0 0 2px var(--MDsim-highlight-color);
  box-sizing: border-box;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.selected-image {
  object-fit: cover;
  border-radius: 8px;
  width: 100%;
  height: 85%;
}

.image-label {
  color: var(--MDsim-font-color);
  font-size: var(--MDsim-font-size-small);
  text-align: center;
  word-break: break-word;
  margin-top: 5px;
}

.selected-assessment {
  aspect-ratio: 10 / 12;
  background-color: var(--MDsim-background-color);
  width: 70%;
  box-shadow: 0 0 0 2px var(--MDsim-highlight-color);
  box-sizing: border-box;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.assessment-icon {
  color: var(--MDsim-highlight-color);
  margin-bottom: 10px;
  font-size: 24px;
}

.selected-thumbnail-wrapper {
  background-color: var(--MDsim-background-color);
  width: 65%;
  height: 12vh;
  box-shadow: 0 0 0 2px var(--MDsim-highlight-color);
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
}

.selected-assessment-wrapper .pain-assessment-thumbnail, .selected-thumbnail-wrapper .instance-thumbnail-wrapper {
  width: 100%;
  height: 100%;
}

.RemoteViewer-container {
  border-radius: 10px;
  width: 100%;
  height: 70vh;
  position: relative;
  overflow: hidden;
}

.RemoteViewer-container .App-remote-viewer {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  position: absolute;
}

.RemoteViewer-container .App-remote-viewer-slider {
  margin-left: 10%;
  top: 10px;
  width: 80% !important;
}

.selected-thumbnail-wrapper.disabled {
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
}

@keyframes pulse-overlay {
  0% {
    background-color: #18181bb3;
  }

  50% {
    background-color: #2d2d32d9;
  }

  100% {
    background-color: #18181bb3;
  }
}

@keyframes pulse-border {
  0% {
    box-shadow: 0 0 0 0
      rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), .4);
  }

  50% {
    box-shadow: 0 0 0 8px
      rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), 0);
  }
}

.DigitalTwinCreationWidget-wrapper.loading {
  position: relative;
}

.pain-assessment-container {
  border-radius: 10px;
  width: 100%;
  height: 70vh;
  position: relative;
  overflow: hidden;
}

.import-area {
  border: dashed 1px var(--MDsim-highlight-color);
  border-radius: var(--MDsim-border-radius-small);
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  flex-flow: column wrap;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 5vw;
  height: 7vw;
  display: flex;
}

.import-area-comment {
  color: var(--MDsim-font-color);
  box-sizing: border-box;
  width: 90%;
  margin-bottom: 5px;
  overflow: visible;
}

.navigation-buttons-container {
  flex-direction: row;
  justify-content: right;
  align-items: center;
  gap: 10px;
  height: 100%;
  display: flex;
}

.prev-button, .next-button, .confirm-button {
  min-width: 100px;
}

.error-input {
  border: 1px solid var(--MDsim-error-color);
  box-shadow: 0 0 3px 0 var(--MDsim-error-color);
}

.error-input-animate {
  animation: .35s ease-in-out 2 errorInputPulse;
}

@keyframes errorInputPulse {
  0% {
    box-shadow: 0 0 0 0 var(--MDsim-error-color);
  }

  50% {
    box-shadow: 0 0 6px 2px var(--MDsim-error-color);
  }

  100% {
    box-shadow: 0 0 #0000;
  }
}

.simple-date-picker {
  align-items: baseline;
  width: 100%;
  display: flex;
  position: relative;
}

.date-input {
  box-sizing: border-box;
  width: 100%;
  height: var(--MDsim-button-height);
  font-size: var(--MDsim-font-size-large);
  color: var(--MDsim-background-font-color);
  background-color: var(--MDsim-background-box-color);
  appearance: none;
  border: 0;
  border-radius: 24px;
  outline: none;
  padding: 0 16px;
  font-family: inherit;
  line-height: 1.3;
  display: flex;

  &::placeholder {
    color: var(--MDsim-highlight-color);
  }
}

.date-input.empty::-webkit-datetime-edit-text {
  color: #0000 !important;
  opacity: 0 !important;
}

.date-input.empty::-webkit-datetime-edit-month-field {
  color: #0000 !important;
  opacity: 0 !important;
}

.date-input.empty::-webkit-datetime-edit-day-field {
  color: #0000 !important;
  opacity: 0 !important;
}

.date-input.empty::-webkit-datetime-edit-year-field {
  color: #0000 !important;
  opacity: 0 !important;
}

.date-input.empty::-webkit-datetime-edit {
  opacity: 0 !important;
}

.date-input.empty::-moz-placeholder {
  opacity: 0;
  color: #0000 !important;
}

.date-input:focus::-webkit-datetime-edit-text {
  color: var(--MDsim-highlight-color);
}

.date-input:focus::-webkit-datetime-edit-month-field {
  color: var(--MDsim-highlight-color);
}

.date-input:focus::-webkit-datetime-edit-day-field {
  color: var(--MDsim-highlight-color);
}

.date-input:focus::-webkit-datetime-edit-year-field {
  color: var(--MDsim-highlight-color);
}

.date-input::-webkit-datetime-edit-text {
  color: var(--MDsim-background-font-color);
}

.date-input::-webkit-datetime-edit-month-field {
  color: var(--MDsim-background-font-color);
}

.date-input::-webkit-datetime-edit-day-field {
  color: var(--MDsim-background-font-color);
}

.date-input::-webkit-datetime-edit-year-field {
  color: var(--MDsim-background-font-color);
}

.date-input.empty::-webkit-calendar-picker-indicator {
  opacity: 1;
}

.date-placeholder {
  height: 100%;
  font-size: var(--MDsim-font-size-large);
  color: var(--MDsim-highlight-color);
  pointer-events: none;
  z-index: 10;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  background-color: var(--MDsim-background-box-color);
  border-radius: 24px;
  align-items: center;
  padding-left: 16px;
  font-family: inherit;
  line-height: 1.3;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 40px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  z-index: 2;
  opacity: 1;
  filter: brightness(0) saturate() invert(50%) sepia(45%) saturate(450%) hue-rotate(148deg) brightness() contrast(95%);
  position: absolute;
  right: 10px;
}

.date-picker-icon-tooltip-wrapper {
  z-index: 3;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.date-picker-icon-tooltip-trigger {
  cursor: pointer;
  width: 20px;
  height: 20px;
}

.radio-buttons-flat-container {
  flex-direction: column;
  align-items: start;
  gap: 10px;
  width: 100%;
  display: flex;
}

.radio-buttons-flat-options {
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
  width: 100%;
  display: flex;
}

.radio-buttons-flat-label {
  color: var(--MDsim-highlight-color);
  margin-right: 10px;
  font-weight: 500;
}

.radio-buttons-flat-container label {
  cursor: pointer;
  color: var(--radio-text-color, white);
  align-items: center;
  gap: 5px;
  display: flex;
}

.radio-buttons-flat-container input[type="radio"] {
  appearance: none;
  border: 2px solid var(--radio-border-color, white);
  background-color: #0000;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  margin: 0;
  position: relative;
}

.radio-buttons-flat-container input[type="radio"]:checked:after {
  content: "";
  background-color: var(--MDsim-highlight-color);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cornerstone-canvas {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

.cornerstone-viewer-container {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.cornerstone-viewer-container canvas {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.cornerstone-controls-hint {
  color: #fff;
  pointer-events: none;
  z-index: 10;
  background-color: #000000b3;
  border-radius: 5px;
  padding: 10px 15px;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.6;
  position: absolute;
  top: 10px;
  right: 10px;
}

.cornerstone-controls-hint div {
  margin: 2px 0;
}

.image-validation {
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  height: 100%;
  display: flex;
}

.image-validation-title {
  text-align: start;
  color: var(--MDsim-font-color);
  width: 100%;
  font-size: 24px;
  font-weight: 600;
}

.image-validation-content {
  flex-direction: row;
  flex: 1;
  gap: 20px;
  width: 100%;
  min-height: 0;
  display: flex;
}

.image-validation-column {
  background-color: var(--MDsim-black-color);
  border-radius: 20px;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  width: 100%;
  padding: 10px;
  display: flex;
}

.image-area {
  box-shadow: 0px 0px 10px var(--MDsim-highlight-color);
}

.image-preview-container {
  box-sizing: border-box;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 0;
  padding: 10px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.image-preview-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.image-preview {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.image-filename {
  color: #fff;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  z-index: 10;
  padding: 8px 12px;
  font-size: 14px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  color: var(--MDsim-font-color);
  text-align: center;
  opacity: .7;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 20px;
  font-size: 14px;
  display: flex;
}

.Vertebra-select-info {
  color: var(--MDsim-highlight-color);
  text-align: justify;
}

.Vertebra-options {
  box-sizing: border-box;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding-inline: 15px;
  display: flex;
}

.unsupported-format-note {
  color: var(--MDsim-highlight-color);
  margin-top: 8px;
  font-size: 12px;
  font-style: italic;
}

.info-area {
  background-color: var(--MDsim-background-color);
  box-sizing: border-box;
  border-radius: 20px;
  flex: .5;
}

.image-info-wrapper {
  flex-direction: column;
  justify-content: start;
  width: 100%;
  height: 100%;
  display: flex;
}

.info-header {
  box-sizing: border-box;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 20px;
  display: flex;
}

.image-info-container {
  border-radius: 20px;
  flex-direction: column;
  gap: 15px;
  height: fit-content;
  padding: 20px;
  display: flex;
}

.image-info-row {
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: 5px;
  display: grid;
  position: relative;
  overflow: visible;
}

.image-info-row-file {
  grid-template-columns: auto 1fr auto;
  gap: 10px;
}

.image-info-label {
  color: var(--MDsim-highlight-color);
  text-align: left;
  font-size: 14px;
}

.image-info-label-with-icon {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.image-info-info-button {
  cursor: pointer;
  vertical-align: middle;
}

.image-info-file {
  color: var(--MDsim-font-color);
  text-align: right;
  word-break: break-all;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  overflow: hidden;
}

.navigation-buttons {
  flex-direction: row;
  justify-content: right;
  gap: 10px;
  display: flex;
}

.datepicker-wrapper .simple-date-picker {
  width: 100%;
}

.prev-button, .next-button {
  min-width: 100px;
}

.dicom-viewer-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.dicom-viewer-area {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100% - 50px);
  min-height: 0;
  display: flex;
  position: relative;
}

.dicom-viewer-column {
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.dicom-bottom-controls {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  display: flex;
}

.validation-slice-controls {
  flex-direction: row;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  display: flex;
}

.patient-metadata-mismatch-overlay {
  backdrop-filter: blur(8px);
  z-index: 1002;
  background: #00000073;
  border-radius: 25px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.patient-metadata-mismatch-modal {
  background-color: var(--MDsim-background-modal-color);
  width: min(680px, 90%);
  min-height: 320px;
  color: var(--MDsim-font-color);
  box-shadow: 0 0 10px var(--MDsim-button-color);
  border-radius: 20px;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: 40px;
  display: flex;
  position: relative;
}

.patient-metadata-mismatch-header {
  justify-content: center;
  align-items: center;
  gap: 12px;
  display: flex;
}

.patient-metadata-mismatch-header .App-warning-icon {
  width: 36px;
  height: 36px;
}

.patient-metadata-mismatch-title {
  font-size: var(--MDsim-font-size-title-xlarge);
  margin: 0;
}

.patient-metadata-mismatch-body {
  text-align: center;
  flex-direction: column;
  gap: 20px;
  line-height: 1.5;
  display: flex;
}

.patient-metadata-mismatch-message, .patient-metadata-mismatch-submessage {
  margin: 0;
}

.patient-metadata-mismatch-submessage {
  opacity: .8;
}

.patient-metadata-mismatch-actions {
  justify-content: center;
  display: flex;
}

.patient-metadata-mismatch-actions button {
  min-width: 180px;
}

.drag-drop-area {
  border: 2px dashed var(--MDsim-icon-color);
  box-shadow: 0 0 .5em 0 var(--MDsim-highlight-color);
  text-align: center;
  background-color: #0000;
  border-radius: 25px;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  display: flex;
}

.drag-drop-area.disabled {
  pointer-events: none;
  opacity: .5;
}

.importing-spinner {
  margin-top: 15px;
  font-size: 16px;
}

.browse-buttons-container {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  display: flex;
}

.drag-drop-message-container {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.drag-drop-text-info-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  display: flex;
}

.drag-drop-text-info-bold {
  font-weight: 600;
}

.drag-drop-text-info, .drag-drop-text-info-bold {
  color: var(--MDsim-highlight-color);
}

ul, li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.file-item {
  background-color: var(--MDsim-button-color);
  font-size: var(--MDsim-font-size-medium);
  border-radius: 20px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 5px;
  padding-left: 15px;
  padding-right: 5px;
  display: flex;
}

.file-item-name {
  text-align: left;
  flex-direction: row;
  gap: 4px;
  width: 260px;
  display: flex;
}

.file-upload-base {
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.file-upload-base .upload-section {
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 300px;
  display: flex;
  position: relative;
}

.file-upload-base .drag-drop-area {
  border: 2px dashed var(--MDsim-icon-color);
  text-align: center;
  background-color: var(--MDsim-background-box-color);
  border-radius: 25px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  transition: height .3s;
  display: flex;
}

.file-upload-base .proceed-button {
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-button-text-color);
  cursor: pointer;
  border: none;
  border-radius: 25px;
  width: fit-content;
  margin-top: 10px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  transition: background-color .3s;
}

.file-upload-base .proceed-button:hover {
  background-color: var(--MDsim-button-hover-color, #0056b3);
}

.file-upload-base .proceed-button:disabled {
  background-color: var(--MDsim-disabled-color, #ccc);
  cursor: not-allowed;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.loading-overlay {
  backdrop-filter: blur(8px);
  width: 100%;
  height: 100%;
  color: var(--MDsim-font-color);
  z-index: 10000;
  background: linear-gradient(135deg, #18181bf2 0%, #232328f2 100%);
  border-radius: 25px;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.loading-content {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 20px;
  animation: .3s ease-out fadeIn;
  display: flex;
}

.loading-spinner {
  width: 80px;
  height: 80px;
  position: relative;
}

.loading-spinner-ring {
  border: 3px solid #0000;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
}

.loading-spinner-ring:first-child {
  border-top-color: var(--MDsim-button-color);
  animation: 1.5s linear infinite spin;
}

.loading-spinner-ring:nth-child(2) {
  border-top-color: rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), .6);
  width: 70%;
  height: 70%;
  animation: 1.2s linear infinite spin-reverse;
  top: 15%;
  left: 15%;
}

.loading-spinner-ring:nth-child(3) {
  border-top-color: rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), .3);
  width: 40%;
  height: 40%;
  animation: 1s linear infinite spin;
  top: 30%;
  left: 30%;
}

.loading-message {
  letter-spacing: .3px;
  font-size: 20px;
  font-weight: 500;
}

.loading-progress {
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 300px;
  display: flex;
}

.progress-bar-container {
  background: #ffffff1a;
  border-radius: 10px;
  width: 100%;
  height: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 4px #0003;
}

.progress-bar-fill {
  background: linear-gradient(90deg,
    var(--MDsim-button-color) 0%,
    rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), .8) 100%);
  height: 100%;
  box-shadow: 0 0 10px rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), .5);
  border-radius: 10px;
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

.progress-bar-shine {
  background: linear-gradient(90deg, #0000, #ffffff4d, #0000);
  animation: 1.5s infinite shine;
  position: absolute;
  inset: 0;
}

.progress-value {
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
  color: rgba(var(--MDsim-font-color-rgb, 255, 255, 255), .9);
  font-size: 16px;
  font-weight: 500;
}

.modal-base {
  background-color: var(--MDsim-background-modal-color);
  box-shadow: 0px 0px 10px var(--MDsim-button-color);
  text-align: center;
  z-index: 1000;
  width: 95vw;
  max-width: 100vw;
  height: 95vh;
  min-height: 500px;
  color: var(--MDsim-font-color);
  font-family: var(--MDsim-font-family);
  box-sizing: border-box;
  border-radius: 25px;
  flex-direction: column;
  align-items: center;
  padding: 25px;
  display: flex;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal-column {
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 90%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.modal-close-button-container {
  z-index: 1001;
  position: absolute;
  top: 10px;
  right: 10px;
}

.modal-close-button-container .App-tooltip-content {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.modal-close-button-container .App-tooltip-content.bottom:after, .modal-close-button-container .App-tooltip-content.bottom:before {
  display: block;
}

.modal-back-button-container {
  z-index: 1001;
  position: absolute;
  top: 10px;
  left: 10px;
}

.modal-back-button-container .App-tooltip-content {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.modal-back-button-container .App-tooltip-content.bottom:after, .modal-back-button-container .App-tooltip-content.bottom:before {
  display: block;
}

.modal-title {
  text-align: center;
  width: 100%;
  color: var(--MDsim-font-color);
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 600;
}

.modal-subtitle {
  text-align: center;
  color: var(--MDsim-font-color);
  width: 100%;
  padding-block: 10px;
  font-size: 18px;
}

.proceed-button, .retry-button {
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-button-text-color);
  cursor: pointer;
  transition: var(--MDsim-transition-all);
  border: none;
  border-radius: 25px;
  margin-top: 10px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
}

.proceed-button:hover, .retry-button:hover {
  background-color: var(--MDsim-button-hover-color);
}

.proceed-button:disabled {
  background-color: var(--MDsim-disabled-color);
  cursor: not-allowed;
}

.file-upload-base .upload-section {
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 300px;
  display: flex;
  position: relative;
}

.file-upload-base .drag-drop-area {
  border: 2px dashed var(--MDsim-icon-color);
  text-align: center;
  background-color: var(--MDsim-background-box-color);
  width: 100%;
  height: 100%;
  min-height: 15vh;
  transition: var(--MDsim-transition-all);
  border-radius: 25px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.file-upload-base .uploaded-files-wrapper {
  width: 100%;
  height: 100%;
  transition: var(--MDsim-transition-all);
  flex: 1;
  display: flex;
  overflow: hidden;
}

.file-upload-base .uploaded-files {
  scrollbar-width: none;
  scrollbar-color: var(--MDsim-background-color) var(--MDsim-transparent-color);
  background-color: var(--MDsim-background-box-color);
  border-radius: 20px;
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
  overflow-y: auto !important;
}

.file-import-modal-column {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.file-import-modal {
  overflow: hidden;
}

.modal-close-button-container {
  position: absolute;
  top: 10px;
  right: 10px;
}

.file-import-modal .modal-title {
  text-align: start;
  width: 100%;
  color: var(--MDsim-font-color);
  font-size: 30px;
  font-weight: 600;
}

.file-import-modal .modal-subtitle {
  text-align: center;
  color: var(--MDsim-font-color);
  width: 100%;
  font-size: 18px;
}

.file-import-modal .upload-section {
  flex-direction: column;
  flex: 1;
  justify-content: center;
  gap: 10px;
  width: 100%;
  display: flex;
  position: relative;
}

.file-import-modal .drag-drop-area {
  border: 2px dashed var(--MDsim-icon-color);
  text-align: center;
  background-color: var(--MDsim-background-box-color);
  border-radius: 25px;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0;
  transition: height .3s;
  display: flex;
}

.importing-overlay {
  width: 100%;
  height: 100%;
  color: var(--MDsim-font-color);
  z-index: 10000;
  background: #000000b3;
  border-radius: 25px;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.proceed-button, .retry-button {
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-button-text-color);
  cursor: pointer;
  border: none;
  border-radius: 25px;
  margin-top: 10px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  transition: background-color .3s;
}

.proceed-button:hover, .retry-button:hover {
  background-color: var(--MDsim-button-hover-color, #0056b3);
}

.proceed-button:disabled {
  background-color: var(--MDsim-disabled-color, #ccc);
  cursor: not-allowed;
}

@keyframes checkmark-pop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0);
  }

  50% {
    transform: scale(1.2) rotate(10deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes pulse-success {
  0% {
    box-shadow: 0 0 #28a74566;
  }

  50% {
    box-shadow: 0 0 0 20px #28a74500;
  }

  100% {
    box-shadow: 0 0 #28a74500;
  }
}

.success-message, .error-message {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 100%;
  padding: 30px 0;
  display: flex;
}

.success-icon {
  width: 80px;
  height: 80px;
  color: var(--MDsim-success-color, #28a745);
  border-radius: 50%;
  animation: .5s cubic-bezier(.68, -.55, .265, 1.55) checkmark-pop, 1.5s .5s infinite pulse-success;
}

.success-icon svg {
  filter: drop-shadow(0 2px 8px #28a7454d);
  width: 100%;
  height: 100%;
}

.success-message .modal-title {
  color: var(--MDsim-success-color, #28a745);
  width: fit-content;
  margin-top: 8px;
}

.success-message .modal-subtitle {
  color: var(--MDsim-font-color);
  font-size: 18px;
  font-weight: 500;
}

.success-detail {
  color: rgba(var(--MDsim-font-color-rgb, 255, 255, 255), .7);
  text-align: center;
  max-width: 400px;
  font-size: 15px;
  line-height: 1.5;
}

.error-message .modal-title {
  color: var(--MDsim-error-color, #dc3545);
  width: fit-content;
}

@keyframes widget-pulse-overlay {
  0% {
    background-color: var(--MDsim-background-color);
  }

  50% {
    background-color: var(--MDsim-background-box-color);
  }

  100% {
    background-color: var(--MDsim-highlight-color);
  }
}

@keyframes widget-pulse-border {
  0% {
    box-shadow: 0 0 0 0
      rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), .4);
  }

  50% {
    box-shadow: 0 0 0 4px
      rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(var(--MDsim-highlight-color-rgb, 50, 120, 255), 0);
  }
}

.WidgetLoader-wrapper {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  min-height: 60px;
  position: relative;
}

.WidgetLoader-wrapper.loading {
  box-shadow: 0 0 0 1px var(--MDsim-highlight-color);
  border-radius: 8px;
  animation: 2s infinite widget-pulse-border;
  position: relative;
}

.WidgetLoader-wrapper.loading:before {
  content: "";
  background-color: var(--MDsim-black-color);
  z-index: 100;
  border-radius: 8px;
  animation: 2s ease-in-out infinite widget-pulse-overlay;
  position: absolute;
  inset: 0;
}

.WidgetLoader-wrapper.loading:after {
  content: "";
  border: 2px solid var(--MDsim-font-color);
  border-top: 2px solid var(--MDsim-highlight-color);
  z-index: 101;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: 1s linear infinite widget-spinner;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.WidgetLoader-wrapper.loading[data-message]:after {
  content: attr(data-message);
  width: auto;
  height: auto;
  color: var(--MDsim-font-color);
  font-size: var(--MDsim-font-size-small, 12px);
  white-space: nowrap;
  text-align: center;
  border: none;
  border-radius: 0;
  animation: none;
  transform: translate(-50%, -50%);
}

.WidgetLoader-wrapper.compact {
  border-radius: 6px;
  min-height: 40px;
}

.WidgetLoader-wrapper.compact.loading, .WidgetLoader-wrapper.compact.loading:before {
  border-radius: 6px;
}

.WidgetLoader-wrapper.compact.loading:after {
  width: 16px;
  height: 16px;
}

.WidgetLoader-wrapper.compact.loading[data-message]:after {
  font-size: var(--MDsim-font-size-small, 11px);
}

.pain-assessment-content {
  gap: var(--MDsim-pain-widget-gap);
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.pain-assessment-modal .pain-assessment-content {
  align-items: center;
}

.pain-assessment-modal {
  width: var(--MDsim-pain-modal-width);
  max-width: 95vw;
}

.pain-assessment-modal.modal-base {
  border: 2px solid var(--MDsim-highlight-color);
  box-shadow: none !important;
}

.pain-assessment-modal .modal-column {
  width: 98% !important;
  max-width: 100% !important;
}

.modal-column .carousel-navigation {
  width: 50%;
}

.pain-assessment-gradient-area {
  width: auto;
  min-width: var(--MDsim-pain-gradient-width);
  z-index: 10;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.pain-assessment-modal .pain-assessment-gradient-area {
  position: relative;
}

.pain-gradient-area-wrapper {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  width: auto;
  height: 100%;
  display: flex;
}

.pain-gradient-container {
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: auto;
  height: 90%;
  min-height: 300px;
  display: flex;
}

.pain-gradient-stripe {
  background: linear-gradient(to top,
    var(--MDsim-gradient-dark-green) 0%,
    var(--MDsim-gradient-light-green) 10%,
    var(--MDsim-gradient-brillant-green) 20%,
    var(--MDsim-gradient-pale-green) 30%,
    var(--MDsim-gradient-light-yellow) 40%,
    var(--MDsim-gradient-yellow) 50%,
    var(--MDsim-gradient-orange) 60%,
    var(--MDsim-gradient-dark-orange) 70%,
    var(--MDsim-gradient-red) 80%,
    var(--MDsim-gradient-dark-red) 100%);
  border-radius: var(--MDsim-border-radius-large);
  flex: 1;
  width: 15px;
  box-shadow: 0 4px 12px #00000026;
}

.pain-gradient-label {
  font-size: var(--MDsim-font-size-xlarge);
  color: var(--MDsim-font-color);
  text-align: center;
  font-weight: bold;
}

.pain-gradient-label-top {
  margin-bottom: 4px;
}

.pain-gradient-label-bottom {
  margin-top: 4px;
}

.pain-tool-selector-container {
  flex: none;
  justify-content: center;
  align-items: center;
  width: auto;
  display: flex;
}

.pain-assessment-drawing-area {
  min-width: 0;
  height: 100%;
  margin: 0 auto;
  margin-left: calc(var(--MDsim-pain-gradient-width) + 4px + 60px);
  flex: auto;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.pain-assessment-modal .pain-assessment-drawing-area {
  align-items: center;
  margin-left: 0;
}

.pain-drawing-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

.pain-scalable-drawing-wrapper {
  border-radius: var(--MDsim-border-radius-large);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.pain-scalable-drawing-wrapper .svg-image-carousel {
  width: 100%;
  height: 100%;
}

.pain-recorded-path {
  opacity: .9;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 2px 4px #0003);
  transition: stroke-width .3s, opacity .3s;
}

.pain-recorded-path:hover {
  opacity: 1;
  filter: drop-shadow(0 4px 8px #0000004d);
}

.pain-recorded-path.selected {
  opacity: 1;
  stroke-dasharray: 2 2;
  filter: drop-shadow(0 4px 12px #0006);
  animation: 1.5s linear infinite dash-animation;
}

@keyframes dash-animation {
  to {
    stroke-dashoffset: -2px;
  }
}

.pain-current-path {
  opacity: .8;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 2px #0000001a);
}

.pain-path-tooltip {
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1500;
  font-size: var(--MDsim-font-size-small);
  background: #000000d9;
  border-radius: 8px;
  padding: 8px 10px;
  position: absolute;
  transform: translate(-50%, -120%);
  box-shadow: 0 4px 12px #00000040;
}

.pain-path-tooltip-level {
  font-weight: 700;
}

.pain-path-tooltip-type {
  opacity: .9;
}

.anatomy-svg-with-drawing {
  -webkit-user-select: none;
  user-select: none;
}

.pain-scalable-drawing-wrapper .svg-image-carousel .carousel-navigation .carousel-arrow-button {
  z-index: 1110;
  pointer-events: auto;
  position: absolute;
}

.pain-assessment-content.popup-open .pain-scalable-drawing-wrapper .svg-image-carousel .carousel-navigation {
  display: none !important;
}

.pain-scalable-drawing-wrapper .svg-image-carousel .carousel-base path, .pain-scalable-drawing-wrapper .svg-image-carousel .carousel-base ellipse, .pain-scalable-drawing-wrapper .svg-image-carousel .carousel-base circle, .pain-scalable-drawing-wrapper .svg-image-carousel .carousel-base line {
  stroke: var(--MDsim-highlight-color);
  stroke-width: 2px;
}

.pain-assessment-qualification-area {
  background-color: var(--MDsim-background-box-color);
  border-radius: var(--MDsim-border-radius-xlarge);
  border: 2px solid var(--MDsim-highlight-color);
  opacity: 1;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  align-self: center;
  width: 350px;
  min-width: 320px;
  max-width: 350px;
  height: fit-content;
  max-height: 85vh;
  animation: .2s ease-out forwards fadeInScale;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: scale(1);
  box-shadow: 0 4px 16px #0000001a;
}

.pain-assessment-qualification-area.closing {
  animation: .2s ease-out forwards fadeOutScale;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeOutScale {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(.95);
  }
}

.pain-qualification-widget {
  box-sizing: border-box;
  background-color: #0000;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: auto;
  max-height: calc(85vh - 40px);
  padding: 18px;
  display: flex;
  position: relative;
  overflow: hidden auto;
}

.pain-qualification-header {
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}

.pain-qualification-title {
  font-size: var(--MDsim-font-size-title);
  color: var(--MDsim-font-color);
  text-align: center;
  flex: 1;
  margin: 0;
  font-weight: bold;
}

.pain-level-section {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  display: flex;
}

.pain-qualification-label {
  font-size: var(--MDsim-font-size-large);
  color: var(--MDsim-font-color);
  margin: 0;
  font-weight: 600;
}

.pain-level-selector {
  flex-direction: row;
  gap: 0;
  width: 100%;
  display: flex;
}

.pain-level-button {
  cursor: pointer;
  width: 100%;
  height: 40px;
  font-size: var(--MDsim-font-size-large);
  color: var(--MDsim-font-color);
  text-shadow: 0 0 3px #000c;
  transition: var(--MDsim-transition-all);
  -moz-transition: var(--MDsim-transition-all);
  -webkit-transition: var(--MDsim-transition-all);
  z-index: 1;
  border: 2px solid #0000;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  display: flex;
  box-shadow: 0 0 0 2px #0000;
}

.pain-level-button.selected, .pain-level-button:hover {
  box-shadow: 0 0 0 2px var(--MDsim-selected-color);
  z-index: 2;
}

.pain-type-section {
  text-align: left;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  display: flex;
}

.pain-type-selector {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  display: flex;
}

.pain-type-button {
  flex: 0 0 calc(33.333% - var(--MDsim-pain-type-button-gap));
  border-radius: var(--MDsim-border-radius-large);
  background-color: var(--MDsim-transparent-color);
  border: none;
  border: 2px solid var(--MDsim-highlight-color);
  color: var(--MDsim-font-color);
  font-size: var(--MDsim-font-size-small);
  cursor: pointer;
  text-align: center;
  min-height: var(--MDsim-button-height);
  word-break: break-word;
  hyphens: auto;
  outline: none;
  justify-content: center;
  align-items: center;
  padding: 8px 4px;
  font-weight: 500;
  display: flex;
}

.pain-type-button:hover {
  background-color: var(--MDsim-highlight-color);
}

.pain-type-button.selected {
  background-color: var(--MDsim-highlight-color);
  color: var(--MDsim-font-color);
}

.pain-type-button:focus {
  outline: none;
}

.pain-qualification-actions {
  flex-direction: row;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  padding: 15px 0 5px;
  display: flex;
}

.pain-add-button, .pain-delete-button {
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-font-color);
  border-radius: var(--MDsim-border-radius-xlarge);
  cursor: pointer;
  font-size: var(--MDsim-font-size-small);
  width: 100%;
  height: var(--MDsim-button-height);
  box-shadow: none;
  border: none;
  flex: 1;
  padding: 10px 16px;
  font-weight: 600;
}

.pain-add-button:hover, .pain-delete-button:hover {
  box-shadow: none !important;
}

.pain-delete-button:hover {
  background-color: var(--MDsim-error-color) !important;
}

.pain-add-button:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.pain-save-button {
  font-size: var(--MDsim-font-size-medium);
  flex-shrink: 0;
  width: auto;
  min-width: 200px;
  min-height: 40px;
  margin: auto auto 20px;
  padding: 14px 32px;
  font-weight: 600;
}

@media (width <= 1200px) {
  .pain-assessment-qualification-area {
    width: min(380px, 30vw);
    min-width: 350px;
    max-width: 400px;
  }
}

@media (width <= 1000px) {
  .pain-assessment-qualification-area {
    width: min(350px, 28vw);
    min-width: 320px;
    max-width: 380px;
  }
}

@media (width >= 1400px) {
  .pain-assessment-qualification-area {
    width: 450px;
    max-width: 450px;
  }
}

@media (width <= 768px) {
  .pain-assessment-content {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .pain-assessment-qualification-area {
    width: 100%;
    max-width: 100%;
    min-width: unset;
  }

  .pain-assessment-gradient-area {
    flex-direction: row;
    order: 2;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 15px 0;
  }

  .pain-gradient-container {
    width: 60px;
    height: 200px;
  }

  .pain-assessment-drawing-area {
    order: 1;
    width: 100%;
    height: 60vh;
    min-height: 400px;
  }
}

.pain-tool-selector-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
  display: flex;
}

.pain-path-brush {
  filter: drop-shadow(0 3px 6px #0000004d);
  stroke-width: 6px !important;
}

@media (width <= 480px) {
  .pain-assessment-qualification-area {
    width: 100%;
    margin: 0 10px;
  }

  .pain-qualification-widget {
    padding: 15px;
  }

  .pain-level-selector {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }

  .pain-type-selector {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

.pain-assessment-tool-selector {
  background-color: var(--MDsim-background-box-color);
  border-radius: var(--MDsim-border-radius-xlarge);
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  height: fit-content;
  min-height: 240px;
  padding: 8px;
  display: flex;
}

.pain-tool-button {
  transition: var(--MDsim-transition-colors);
}

.pain-tool-button-selected {
  opacity: 1;
  background-color: var(--MDsim-highlight-color) !important;
}

.pain-tool-button:hover:not(.disabled) {
  transform: scale(1.1);
}

.App-textarea {
  box-sizing: border-box;
  background: var(--MDsim-background-box-color);
  color: var(--MDsim-background-font-color);
  vertical-align: top;
  resize: none;
  height: 100px;
  font-size: var(--MDsim-font-size-large);
  border: none;
  border-radius: 12px;
  outline: none;
  flex-grow: 1;
  padding: 16px;

  &::placeholder {
    color: var(--MDsim-highlight-color);
  }
}

.App-textbox-container {
  width: 100%;
}

.App-textbox-wrapper {
  width: 100%;
  display: inline-block;
  position: relative;
}

.App-textbox {
  width: 100%;
  height: var(--MDsim-button-height);
  font-size: var(--MDsim-font-size-large);
  border-radius: var(--MDsim-border-radius-xxlarge);
  cursor: pointer;
  color: var(--MDsim-background-font-color);
  background-color: var(--MDsim-background-box-color);
  box-sizing: border-box;
  border: 0;
  outline: none;
  padding: 0 18px;
  text-decoration: none;

  &::placeholder {
    color: var(--MDsim-highlight-color);
  }
}

.App-textbox-with-suffix {
  padding-right: 64px;
}

.App-textbox-suffix {
  color: var(--MDsim-highlight-color);
  font-size: var(--MDsim-font-size-large);
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
}

.App-textbox-mandatory {
  color: var(--MDsim-error-color);
  position: absolute;
  top: -15px;
  right: 10px;
}

.App-textbox-icon-button {
  height: calc(var(--MDsim-button-height) - 10px) !important;
  width: 30px !important;
  position: absolute !important;
  top: 50% !important;
  right: 5px !important;
  transform: translateY(-50%) !important;
}

.App-textbox-icon-button svg {
  width: 16px;
  height: 16px;
}

input::-ms-reveal {
  display: none;
}

input::-ms-clear {
  display: none;
}

.value-with-max-input {
  width: 100%;
  height: var(--MDsim-button-height);
  border-radius: var(--MDsim-border-radius-xxlarge);
  box-sizing: border-box;
  background-color: var(--MDsim-background-box-color);
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  display: flex;
}

.value-with-max-input.disabled {
  opacity: .6;
  cursor: not-allowed;
}

.value-with-max-field {
  min-width: 0;
  height: 100%;
  color: var(--MDsim-background-font-color);
  font-size: var(--MDsim-font-size-large);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  padding: 0 4px;
}

.value-with-max-field:disabled {
  cursor: not-allowed;
}

.value-with-max-field::placeholder {
  color: var(--MDsim-highlight-color);
}

.value-with-max-separator {
  color: var(--MDsim-highlight-color);
  -webkit-user-select: none;
  user-select: none;
  padding-inline: 4px;
  font-weight: 700;
}

.clinical-history-list {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.clinical-history-empty {
  text-align: center;
  color: var(--MDsim-font-color-secondary, #666);
  background-color: var(--MDsim-background-box-color);
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  display: flex;
}

.clinical-history-empty p {
  font-size: var(--MDsim-font-size-medium);
  margin: 8px 0;
}

.clinical-history-empty p:first-child {
  color: var(--MDsim-font-color);
  font-weight: 600;
}

.clinical-history-content::-webkit-scrollbar {
  width: 6px;
}

.clinical-history-content::-webkit-scrollbar-track {
  background: var(--MDsim-background-color, #f1f1f1);
  border-radius: 3px;
}

.clinical-history-content::-webkit-scrollbar-thumb {
  background: var(--MDsim-border-color, #ccc);
  border-radius: 3px;
}

.clinical-history-content::-webkit-scrollbar-thumb:hover {
  background: var(--MDsim-highlight-color, #0082a9);
}

.clinical-history-item {
  cursor: pointer;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 3px 16px;
  transition: background-color .2s;
  display: flex;
}

.clinical-history-item-date {
  color: var(--MDsim-highlight-color);
}

.clinical-history-item-right {
  align-items: center;
  gap: 8px;
  display: flex;
}

.clinical-history-delete-action {
  align-items: center;
  display: flex;
}

.clinical-history-writing-section {
  flex-direction: column;
  flex: 2.5;
  justify-content: center;
  align-items: start;
  gap: 15px;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
}

.clinical-history-entry {
  width: 100%;
  color: var(--MDsim-highlight-color);
  cursor: pointer;
  flex-direction: row;
  padding-inline: 10px;
  text-decoration: underline;
  display: flex;
}

.clinical-history-edit-modal {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 70%;
  height: 100%;
  padding: 20px;
  display: flex;
}

.form-section-title {
  font-size: var(--MDsim-font-size-large);
  color: var(--MDsim-highlight-color);
  text-align: left;
}

.form-health-info-item {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex;
}

.clinical-history-edit-modal .form-row {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 100%;
  display: flex;
}

.clinical-history-edit-modal .conditions-row {
  flex-wrap: wrap;
}

.clinical-history-edit-modal .notes-row {
  min-height: 150px;
}

.clinical-history-edit-modal .conditions-tabs {
  flex-wrap: wrap;
  justify-content: start;
  gap: 8px;
  width: 100%;
  display: flex;
}

.clinical-history-edit-modal .condition-tab {
  flex: 0 auto;
  min-width: 100px;
}

.clinical-history-edit-modal .condition-tab.App-button {
  background-color: var(--MDsim-transparent-color);
  outline: 2px solid var(--MDsim-highlight-color);
}

.clinical-history-edit-modal .condition-tab.App-button.active {
  background-color: var(--MDsim-highlight-color);
  color: var(--MDsim-background-color);
}

.clinical-history-bmi-display {
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 100px;
  padding: 10px 20px;
  display: flex;
}

.clinical-history-bmi-display .bmi-label {
  font-size: var(--MDsim-font-size-small);
  color: var(--MDsim-highlight-color);
  margin-bottom: 4px;
}

.clinical-history-bmi-display .bmi-value {
  font-size: var(--MDsim-font-size-large);
  color: var(--MDsim-font-color);
}

.clinical-history-edit-modal .button-container {
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  display: flex;
}

.clinical-history-modal-content {
  border-radius: 12px;
  flex-direction: column;
  width: 100%;
  height: 50vh;
  padding: 0;
  display: flex;
}

.clinical-history-modal-header {
  border-radius: 12px 12px 0 0;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  display: flex;
}

.clinical-history-modal-header .clinical-history-entry-date {
  color: var(--MDsim-highlight-color);
  cursor: default;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}

.clinical-history-modal-actions {
  gap: 8px;
  display: flex;
}

.clinical-history-modal-actions button {
  border: 1px solid var(--MDsim-highlight-color);
  color: var(--MDsim-highlight-color);
  cursor: pointer;
  background: none;
  padding: 6px 12px;
  font-size: 14px;
  transition: all .2s;
}

.clinical-history-modal-actions button:hover:not(:disabled) {
  background: var(--MDsim-highlight-color);
  color: var(--MDsim-background-color);
}

.clinical-history-modal-actions button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.clinical-history-copy-button.copied {
  color: #fff;
  background: #28a745;
  border-color: #28a745;
}

.clinical-history-delete-button {
  color: #fff !important;
  background: #dc3545 !important;
  border-color: #dc3545 !important;
}

.clinical-history-delete-button:hover {
  background: #c82333 !important;
  border-color: #c82333 !important;
}

.clinical-history-modal-body {
  box-sizing: border-box;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: 24px;
  display: flex;
}

.clinical-history-entry-content {
  height: 100%;
  color: var(--MDsim-font-color);
  white-space: pre-wrap;
  word-wrap: break-word;
  background: var(--MDsim-background-color);
  border: 1px solid rgba(var(--MDsim-highlight-color-rgb), .2);
  -webkit-user-select: text;
  user-select: text;
  border-radius: 8px;
  padding: 16px;
  font-size: 16px;
  line-height: 1.6;
}

.clinical-history-edit-section {
  flex-direction: column;
  gap: 16px;
  height: 100%;
  display: flex;
}

.clinical-history-edit-textarea {
  border: 2px solid var(--MDsim-highlight-color);
  background: var(--MDsim-background-color);
  color: var(--MDsim-font-color);
  resize: none;
  box-sizing: border-box;
  border-radius: 8px;
  height: 100%;
  padding: 16px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
}

.clinical-history-edit-textarea:focus {
  border-color: var(--MDsim-highlight-color);
  box-shadow: 0 0 0 3px rgba(var(--MDsim-highlight-color-rgb), .1);
  outline: none;
}

.clinical-history-edit-actions {
  justify-content: flex-end;
  gap: 12px;
  display: flex;
}

.clinical-history-edit-actions button {
  border: 2px solid var(--MDsim-highlight-color);
  color: var(--MDsim-highlight-color);
  cursor: pointer;
  background: none;
  min-width: 80px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s;
}

.clinical-history-save-button {
  background: var(--MDsim-highlight-color) !important;
  color: var(--MDsim-background-color) !important;
}

.clinical-history-save-button:hover {
  opacity: .9;
  transform: translateY(-1px);
  background: var(--MDsim-highlight-color) !important;
}

.clinical-history-cancel-button:hover {
  background: var(--MDsim-highlight-color);
  color: var(--MDsim-background-color);
}

.qol-row {
  flex-wrap: wrap;
  align-items: flex-end;
  row-gap: 10px;
}

.qol-selector-slot {
  flex: 1;
  min-width: 220px;
}

.qol-config-select {
  width: 100%;
}

.qol-pill-list {
  scrollbar-width: thin;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  margin-top: 12px;
  padding-bottom: 6px;
  display: flex;
  overflow: auto hidden;
}

.qol-pill-list::-webkit-scrollbar {
  height: 6px;
}

.qol-pill-list::-webkit-scrollbar-thumb {
  background: var(--MDsim-border-color, #ccc);
  border-radius: 8px;
}

.qol-pill {
  border-radius: var(--MDsim-border-radius-xxlarge);
  background: var(--MDsim-background-box-color);
  border: 2px solid var(--MDsim-highlight-color);
  font-size: var(--MDsim-font-size-small, 12px);
  flex: none;
  align-items: center;
  gap: 4px;
  max-width: 160px;
  padding: 4px 6px;
  line-height: 1.2;
  display: flex;
}

.qol-pill-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.qol-pill-value {
  color: var(--MDsim-highlight-color);
  white-space: nowrap;
}

.qol-pill-remove {
  color: var(--MDsim-font-color);
  cursor: pointer;
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
}

:root {
  --dt--gap: 20px;
  --dt--step-height: 16px;
}

.DigitalTwinDataInput-container {
  background-color: var(--MDsim-background-modal-color);
  border-radius: var(--MDsim-border-radius-large);
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.DigitalTwinDataInput-header {
  box-sizing: border-box;
  height: var(--MDsim-widget-box-title-height-large);
  border-radius: var(--MDsim-border-radius-large);
  background-color: var(--MDsim-button-color);
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 20px;
  display: flex;
}

.DigitalTwinDataInput-content {
  flex: 1;
  justify-content: start;
  align-items: flex-start;
  width: 100%;
  padding: 4% 0 1%;
  display: flex;
  overflow: hidden auto;
}

.DigitalTwinDataInput-wrapper {
  z-index: 2;
  box-sizing: border-box;
  gap: 20px;
  width: 100%;
  height: 100%;
  margin: 0 4%;
  display: flex;
}

.DigitalTwinDataInput-line {
  gap: var(--dt--gap);
  background-color: #0000;
  flex-direction: column;
  width: 2px;
  height: 100%;
  display: flex;
  position: relative;
  overflow: visible;
}

.DigitalTwinDataInput-marker {
  min-height: var(--dt--step-height);
  transition: flex .3s;
  position: relative;
}

.DigitalTwinDataInput-marker:not(:last-child):after {
  content: "";
  left: 50%;
  top: var(--dt--step-height);
  width: 2px;
  height: calc(100% + var(--dt--gap));
  background-color: var(--MDsim-font-color);
  z-index: 0;
  position: absolute;
  transform: translateX(-50%);
}

.DigitalTwinDataInput-marker:before {
  content: "";
  width: var(--dt--step-height);
  height: var(--dt--step-height);
  background-color: var(--MDsim-background-modal-color);
  outline: 2px solid var(--MDsim-font-color);
  z-index: 1;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.DigitalTwinDataInput-marker.selected {
  flex: 1;
}

.DigitalTwinDataInput-marker.selected:before {
  background-color: var(--MDsim-highlight-color);
}

.DigitalTwinDataInput-steps {
  gap: var(--dt--gap);
  flex-direction: column;
  width: 90%;
  height: 100%;
  display: flex;
}

.DigitalTwinDataInput-step {
  height: var(--dt--step-height);
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 10px;
  transition: flex .3s;
  display: flex;
  overflow: hidden;
}

.DigitalTwinDataInput-step.selected {
  flex: 1;
}

.DigitalTwinDataInput-step-title {
  font-size: var(--dt--step-height);
  color: var(--MDsim-font-color);
  text-align: center;
  z-index: 2;
  line-height: var(--dt--step-height);
}

.DigitalTwinDataInput-step-title.selected {
  font-weight: bold;
}

.DigitalTwinDataInput-step-subtitle {
  font-size: var(--dt--step-height);
  color: var(--MDsim-font-color);
  text-align: center;
  padding: 4px 0;
}

.DigitalTwinDataInput-step-subtitle-bold {
  font-weight: bold;
}

.DigitalTwinDataInput-step:not(.selected) .DigitalTwinDataInput-step-subtitle, .DigitalTwinDataInput-step:not(.selected) > :not(.DigitalTwinDataInput-step-title) {
  display: none;
}

.DigitalTwinDataInput-step-children {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  gap: 2%;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden scroll;
}

.DigitalTwinDataInput-footer {
  width: 100%;
  height: var(--MDsim-widget-box-title-height-large);
  box-sizing: border-box;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  margin-bottom: 4px;
  padding: 5px 10px 10px 5px;
  display: flex;
}

.DigitalTwinDataInput-step-section {
  flex-direction: column;
  justify-content: center;
  align-items: start;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: visible;
}

.DigitalTwinDataInput-step-section-title {
  color: var(--MDsim-font-color);
  text-align: start;
  z-index: 2;
  font-weight: bold;
  line-height: var(--dt--step-height);
}

.DigitalTwinDataInput-step-section-subtitle {
  color: var(--MDsim-highlight-color);
  text-align: start;
  padding: 6px 0;
}

.DigitalTwinDataInput-step-section-children {
  box-sizing: border-box;
  cursor: grab;
  align-items: start;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: auto hidden;
}

.DigitalTwinDataInput-step-section-children:active {
  cursor: grabbing;
}

.DigitalTwinDataInput-step-section-content {
  box-sizing: border-box;
  flex-flow: row;
  gap: 10px;
  width: fit-content;
  height: 100%;
  display: flex;
}

.DigitalTwinDataInput-instance-preview {
  border-radius: 10px;
  flex-grow: 0;
  flex-shrink: 0;
  width: 5vw;
  min-width: 5vw;
  height: 7vw;
}

.DigitalTwinDataInput-instance-preview .postural-image-thumbnail {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.DigitalTwinDataInput-step-section-content .ImportArea, .DigitalTwinDataInput-step-section-content > :last-child {
  flex-shrink: 0;
  min-width: 5vw;
}

.DigitalTwinPlaceholder-container {
  background-color: var(--MDsim-black-color);
  border-radius: 20px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.DigitalTwinPlaceholder-header {
  box-sizing: border-box;
  height: var(--MDsim-widget-box-title-height-large);
  background-color: var(--MDsim-button-color);
  border-radius: 20px;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 20px;
  display: flex;
}

.DigitalTwinPlaceholder-content {
  background-color: var(--MDsim-black-color);
  border-radius: 20px;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.DigitalTwinPlaceholder-wrapper {
  box-sizing: border-box;
  grid-template-rows: 4fr 1fr;
  height: 75%;
  margin-top: 3%;
  display: grid;
}

.DigitalTwinPlaceholder-icon {
  width: 100%;
  height: 100%;
}

.Text-area {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.Main-text {
  font-size: var(--MDsim-font-size-title-xlarge);
  color: var(--MDsim-font-color);
  font-weight: 600;
}

:root {
  --Percentage-alignment: 40%;
}

.DigitalTwinTimeline-container {
  background-color: var(--MDsim-background-modal-color);
  border-radius: 20px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.DigitalTwinTimeline-header {
  box-sizing: border-box;
  height: var(--MDsim-widget-box-title-height-large);
  background-color: var(--MDsim-button-color);
  border-radius: 20px;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 20px;
  display: flex;
}

.DigitalTwinTimeline-content {
  box-sizing: border-box;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding-top: 15%;
  display: flex;
  overflow: hidden auto;
}

.DigitalTwinTimeline-wrapper {
  box-sizing: border-box;
  flex-direction: column;
  width: fit-content;
  height: fit-content;
  min-height: 100%;
  display: flex;
  position: relative;
}

.DigitalTwinTimeline-line {
  background-color: var(--MDsim-highlight-color);
  width: 1.5px;
  left: var(--Percentage-alignment);
  z-index: 1;
  min-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}

.DigitalTwinTimeline-years {
  justify-content: center;
  align-items: space-between;
  z-index: 2;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  height: fit-content;
  display: flex;
  position: relative;
}

.DigitalTwinTimeline-top-marker {
  top: 0;
  left: var(--Percentage-alignment);
  background-color: var(--MDsim-highlight-color);
  justify-content: end;
  align-items: center;
  width: 50px;
  height: 1.5px;
  display: flex;
  position: absolute;
}

.DigitalTwinTimeline-top-marker-head {
  background-color: var(--MDsim-highlight-color);
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: relative;
}

.DigitalTwinTimeline-top-marker-text {
  color: var(--MDsim-highlight-color);
  width: 100px;
  position: absolute;
  left: 60px;
}

.DigitalTwinTimeline-year-block {
  z-index: 2;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  height: fit-content;
  display: flex;
  position: relative;
}

.DigitalTwinTimeline-year-marker {
  background-color: var(--MDsim-background-modal-color);
  border: 2px solid var(--MDsim-highlight-color);
  width: 10px;
  height: 10px;
  margin-left: var(--Percentage-alignment);
  border-radius: 50%;
  align-items: center;
  display: flex;
  position: relative;
  transform: translateX(-50%);
}

.DigitalTwinTimeline-year-marker-text {
  color: var(--MDsim-highlight-color);
  font-weight: 600;
  position: absolute;
  right: 20px;
}

.DigitalTwinTimeline-year-entries {
  width: fit-content;
  left: var(--Percentage-alignment);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  display: flex;
  position: relative;
}

.DigitalTwinTimeline-entry-marker {
  background-color: var(--MDsim-highlight-color);
  justify-content: end;
  align-self: flex-start;
  align-items: center;
  width: 50px;
  height: 1.5px;
  display: flex;
  position: relative;
}

.DigitalTwinTimeline-entry-marker-head {
  background-color: var(--MDsim-highlight-color);
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
}

.DigitalTwinTimeline-entry-marker .App-icon-button svg path {
  fill: var(--MDsim-highlight-color);
}

.DigitalTwinTimeline-entry-icon-row {
  align-items: center;
  gap: 4px;
  margin-left: 5px;
  display: flex;
  position: absolute;
  left: 100%;
}

.DigitalTwinTimeline-entry-icon-row .App-icon-button {
  margin-left: 0;
  position: static;
}

.DigitalTwinTimeline-entry-year {
  color: var(--MDsim-highlight-color);
  white-space: nowrap;
  text-wrap: wrap;
  width: 100%;
  padding-inline: 10px;
  font-weight: 600;
  position: absolute;
  right: 100%;
}

.DigitalTwinTimeline-entry-selected {
  color: var(--MDsim-font-color);
}

.DigitalTwinTimeline-entry-marker-head-selected, .DigitalTwinTimeline-entry-marker-selected {
  background-color: var(--MDsim-font-color);
}

.view-carousel {
  flex-direction: column;
  justify-content: end;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: visible;
}

.carousel-view-container {
  justify-content: center;
  align-items: start;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.carousel-view-container .App-remote-viewer {
  z-index: 2;
  width: 50%;
  height: 60vh;
  transform: translate3d(50%, -10%, 0);
}

.carousel-view-container .App-remote-viewer-slider-container {
  z-index: 20;
  justify-content: center;
  align-items: start;
  width: 50%;
  height: fit-content;
  display: flex;
  position: absolute;
  top: 10%;
  left: 25%;
}

.view-carousel .carousel-navigation {
  width: 100%;
}

.view-carousel .carousel-arrow-button {
  z-index: 10;
  height: 40%;
}

.PatientInformation-container {
  box-sizing: border-box;
  background-color: var(--MDsim-secondary-background-color);
  width: 100%;
  box-shadow: var(--MDsim-box-shadow);
  color: var(--MDsim-primary-text-color);
  border-radius: 10px;
  flex-direction: column;
  gap: 30px;
  display: flex;
}

.PatientInformation-header {
  box-sizing: border-box;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  padding-bottom: 10px;
  display: flex;
}

.PatientInformation-body {
  box-sizing: border-box;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  display: flex;
}

.PatientInformation-details {
  box-sizing: border-box;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  display: flex;
}

.PatientInformation-detail-item {
  align-items: baseline;
  gap: 5px;
  display: flex;
}

.PatientInformation-label {
  color: var(--MDsim-highlight-color);
  flex-shrink: 0;
  font-weight: 600;
}

.PatientInformation-conditions-section {
  flex-direction: column;
  gap: 6px;
  width: 100%;
  display: flex;
}

.PatientInformation-conditions-list {
  flex-wrap: wrap;
  display: flex;
}

.PatientInformation-condition-item {
  flex-shrink: 0;
}

.PatientInformation-quality-of-life {
  box-sizing: border-box;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  display: flex;
}

.PatientInformation-quality-of-life-items {
  flex-direction: column;
  gap: 5px;
  width: 100%;
  display: flex;
}

.PatientInformation-quality-of-life-item {
  border: 1px solid var(--MDsim-border-color);
  border-radius: 8px;
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.PatientInformation-quality-of-life-row {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.PatientInformation-quality-of-life-label {
  font-weight: var(--MDsim-font-weight-bold);
}

.PatientInformation-quality-of-life-score-value {
  align-items: baseline;
  gap: 4px;
  display: flex;
}

.score-value {
  margin-right: 4px;
}

.score-total, .score-separator {
  color: var(--MDsim-highlight-color);
}

.PatientInformation-quality-of-life-date {
  color: var(--MDsim-font-color-secondary);
}

.SpineMeasurements-container {
  box-sizing: border-box;
  background-color: var(--MDsim-secondary-background-color);
  width: 100%;
  box-shadow: var(--MDsim-box-shadow);
  color: var(--MDsim-primary-text-color);
  border-radius: 10px;
  flex-direction: column;
  gap: 30px;
  display: flex;
}

.SpineMeasurements-item {
  flex-direction: column;
  display: flex;
}

.SpineMeasurements-header {
  box-sizing: border-box;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  padding-bottom: 10px;
  display: flex;
}

.SpineMeasurements-body {
  box-sizing: border-box;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  display: flex;
}

.SpineMeasurements-details {
  box-sizing: border-box;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  display: flex;
}

.SpineMeasurements-detail-item {
  align-items: baseline;
  gap: 5px;
  width: 100%;
  display: flex;
}

.SpineMeasurements-label {
  color: var(--MDsim-highlight-color);
  flex-shrink: 0;
  font-weight: 600;
}

.SpineMeasurements-value {
  font-weight: 500;
}

.SpineMeasurements-unit {
  color: var(--MDsim-highlight-color);
  opacity: .8;
  margin-left: 2px;
}

.App-module-delete-digital-twin-modal-container {
  box-sizing: border-box;
  background-color: var(--MDsim-background-modal-color);
  width: 540px;
  height: auto;
  min-height: 320px;
  color: var(--MDsim-font-color);
  border-radius: 12px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 42px;
  display: flex;
  position: relative;
}

.App-module-delete-digital-twin-modal-close {
  z-index: 10;
  position: absolute;
  top: 15px;
  right: 15px;
}

.App-module-delete-digital-twin-modal-close svg {
  fill: var(--MDsim-font-color);
  stroke: var(--MDsim-font-color);
}

.App-module-delete-digital-twin-modal-header {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
  display: flex;
}

.App-module-delete-digital-twin-modal-header h2 {
  color: var(--MDsim-font-color);
  text-align: center;
  margin: 0;
  font-size: 1.8em;
  font-weight: bold;
}

.App-module-delete-digital-twin-modal-header svg {
  fill: var(--MDsim-font-color);
  stroke: var(--MDsim-font-color);
  width: 28px;
  height: 28px;
}

.App-module-delete-digital-twin-modal-body {
  text-align: center;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  width: 100%;
  display: flex;
}

.App-module-delete-digital-twin-modal-body .confirmation-question {
  color: var(--MDsim-font-color);
  word-wrap: break-word;
  text-align: center;
  margin: 0;
  font-size: 1.2em;
  line-height: 1.3;
}

.App-module-delete-digital-twin-modal-body .warning-message {
  color: var(--MDsim-font-color);
  opacity: .7;
  text-align: center;
  margin: 0;
  font-size: 1em;
  line-height: 1.3;
}

.App-module-delete-digital-twin-modal-actions {
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-top: 24px;
  display: flex;
}

.App-module-delete-digital-twin-modal-actions .delete-button {
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-font-color);
  min-width: 120px;
  transition: var(--MDsim-transition-all);
  border-radius: 50px;
  padding: 12px 40px;
  font-weight: 500;
}

.App-module-delete-digital-twin-modal-actions .delete-button:hover:not(:disabled) {
  box-shadow: 0 0 1.2em 0 var(--MDsim-button-color);
}

.App-module-delete-digital-twin-modal-actions .delete-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.DigitalTwinVisualization-container {
  background-color: var(--MDsim-black-color);
  border-radius: 20px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  overflow: hidden;
}

.DigitalTwinVisualization-header {
  box-sizing: border-box;
  height: var(--MDsim-widget-box-title-height-large);
  background-color: var(--MDsim-button-color);
  border-radius: 20px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px;
  display: flex;
}

.DigitalTwinVisualization-header .App-title-widgets {
  cursor: auto;
}

.DigitalTwinVisualization-date {
  opacity: .8;
  margin-left: 10px;
  font-size: .9em;
}

.DigitalTwinVisualization-content {
  grid-template-columns: .5fr 8fr;
  width: 100%;
  height: 100%;
  display: grid;
  overflow: hidden;
}

.DigitalTwinVisualization-content .compare {
  grid-template-columns: .5fr 8fr .5fr;
}

.DigitalTwinVisualization-header-right {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 25%;
  display: flex;
}

.DigitalTwinVisualization-twin-tab {
  flex-direction: column;
  grid-column: 1;
  display: flex;
  position: relative;
}

.DigitalTwinVisualization-twin-tab.compare {
  grid-column: 3;
}

.DigitalTwinVisualization-twin-container {
  box-sizing: border-box;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2vw;
  width: 100%;
  height: 100%;
  display: flex;
}

.DigitalTwinVisualization-twin.three-column {
  box-sizing: border-box;
  grid-column: 2;
  grid-template-columns: 1fr 4fr 1fr;
  gap: 15px;
  width: 100%;
  height: 100%;
  display: grid;
}

.DigitalTwinVisualization-twin:not(.three-column) {
  box-sizing: border-box;
  grid-column: 2;
  grid-template-columns: 1fr 5fr;
  gap: 10px;
  width: 100%;
  height: 100%;
  display: grid;
}

.DigitalTwinVisualization-twin.compared {
  grid-template-columns: 5fr 1fr;
}

.DigitalTwinVisualization-content.compare .DigitalTwinVisualization-twin:not(.three-column) {
  grid-template-columns: 1.5fr 3.5fr;
}

.DigitalTwinVisualization-content.compare .DigitalTwinVisualization-twin.compared {
  grid-template-columns: 3.5fr 1.5fr;
}

.DigitalTwinVisualization-twin-info-column {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 15px;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  overflow-y: auto;
}

.DigitalTwinVisualization-twin-info, .DigitalTwinVisualization-spine-measurements {
  box-sizing: border-box;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  overflow-y: auto;
}

.DigitalTwinVisualization-twin.three-column .DigitalTwinVisualization-twin-info, .DigitalTwinVisualization-twin.three-column .DigitalTwinVisualization-spine-measurements {
  overflow-y: auto;
}

.DigitalTwinVisualization-twin-info-column .DigitalTwinVisualization-twin-info, .DigitalTwinVisualization-twin-info-column .DigitalTwinVisualization-spine-measurements {
  flex-shrink: 0;
  height: auto;
  padding: 0;
  overflow-y: visible;
}

.DigitalTwinVisualization-content-container {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  position: relative;
  overflow: auto;
}

.DigitalTwinVisualization-display-toggle {
  position: absolute;
  bottom: 10px;
  left: 16px;
}

.comparison-twin-label {
  text-transform: uppercase;
}

.DigitalTwinVisualization-twin-content {
  box-sizing: border-box;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  display: flex;
}

.DigitalTwinVisualization-twin-image .pain-assessment-container {
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 85%;
  height: 70vh;
  display: flex;
}

.DigitalTwinVisualization-twin-image {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: end;
  justify-self: start;
  align-items: center;
  width: 50%;
  height: 100%;
  display: flex;
  overflow: visible;
}

.DigitalTwinVisualization-twin-image.compare {
  width: 100%;
}

.DigitalTwinVisualization-twin-image.compare .pain-assessment-container {
  width: 100%;
  height: 70vh;
}

.DigitalTwinVisualization-twin-image .image-carousel {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70vh;
  display: flex;
  position: relative;
}

.DigitalTwinVisualization-twin-image .carousel-image {
  flex-direction: column;
  justify-content: end;
  align-items: end;
  width: 200%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: visible;
}

.DigitalTwinVisualization-medical-twin-grid {
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  height: 100%;
  display: grid;
}

.DigitalTwinVisualization-medical-twin-carousel {
  grid-column: 1;
  width: 100%;
  height: 100%;
}

.DigitalTwinVisualization-medical-twin-carousel .DigitalTwinVisualization-twin-image {
  width: 100%;
}

.DigitalTwinVisualization-medical-twin-views {
  grid-column: 2;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: 100%;
  display: grid;
}

.DigitalTwinVisualization-medical-twin-axial {
  grid-row: 1;
  height: 100%;
}

.DigitalTwinVisualization-medical-twin-axial .image-viewer {
  outline: 2px dashed #13c7af;
}

.DigitalTwinVisualization-medical-twin-other {
  grid-row: 2;
  height: 100%;
}

.DigitalTwinVisualization-medical-twin-other .image-viewer {
  outline: 2px dashed #13c7af;
}

.DigitalTwinVisualization-medical-image {
  width: 100%;
  height: 100%;
}

.DigitalTwinVisualization-pain-grid, .DigitalTwinVisualization-posture-grid, .DigitalTwinVisualization-dx-grid {
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  display: flex;
}

.DigitalTwinVisualization-ct-grid, .DigitalTwinVisualization-mr-grid {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  height: 100%;
  display: grid;
}

.DigitalTwinVisualization-ct-grid.single-view, .DigitalTwinVisualization-mr-grid.single-view {
  width: 100%;
  height: 100%;
  display: flex;
}

.DigitalTwinVisualization-ct-grid.two-column, .DigitalTwinVisualization-mr-grid.two-column {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  height: 100%;
  display: grid;
}

.DigitalTwinVisualization-ct-grid.two-column > div, .DigitalTwinVisualization-mr-grid.two-column > div {
  height: 100%;
}

.DigitalTwinVisualization-ct-grid.multi-view .second-column, .DigitalTwinVisualization-mr-grid.multi-view .second-column {
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.DigitalTwinVisualization-ct-grid .first-column, .DigitalTwinVisualization-mr-grid .first-column {
  grid-area: 1 / 1;
  height: 100%;
}

.loading-indicator {
  width: 100%;
  height: 100%;
  color: var(--MDsim-font-color);
  font-size: var(--MDsim-font-size-large);
  text-align: center;
  background-color: #0003;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
}

.no-view-message {
  width: 100%;
  height: 100%;
  color: var(--MDsim-font-color);
  font-size: var(--MDsim-font-size-medium);
  text-align: center;
  opacity: .7;
  justify-content: center;
  align-items: center;
  display: flex;
}

.DigitalTwinVisualization-medical-image .App-remote-viewer-slider {
  margin-left: 5%;
  width: 80% !important;
}

.DigitalTwinVisualization-closing {
  pointer-events: none;
  animation: .5s ease-out forwards closeAnimation;
}

@keyframes closeAnimation {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(.8);
  }
}

.DigitalTwinVisualization-closing-posture {
  pointer-events: none;
  animation: .5s ease-out forwards closeAnimationPosture;
}

@keyframes closeAnimationPosture {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }

  100% {
    opacity: 0;
    transform: translateY(20px) rotate(5deg);
  }
}

.DigitalTwinVisualization-closing-medical {
  pointer-events: none;
  animation: .5s ease-out forwards closeAnimationMedical;
}

@keyframes closeAnimationMedical {
  0% {
    opacity: 1;
    filter: brightness();
    transform: scale(1);
  }

  100% {
    opacity: 0;
    filter: brightness(1.5);
    transform: scale(.9);
  }
}

.DigitalTwinVisualization-carousel-exit {
  z-index: 10;
  animation: .6s ease-out forwards carouselExitAnimation;
}

@keyframes carouselExitAnimation {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }

  100% {
    opacity: 0;
    transform: scale(.5) rotate(10deg) translateY(100px);
  }
}

.DigitalTwinVisualization-header-right .App-toggle-button {
  background-color: var(--MDsim-transparent-color);
  box-shadow: none;
}

.DigitalTwinVisualization-header-right .App-toggle-button:hover {
  background-color: var(--MDsim-highlight-color);
  box-shadow: 0 0 1em 0 var(--MDsim-highlight-color);
  opacity: .9;
}

.DigitalTwinVisualization-header-right .App-toggle-button-icon-container svg path {
  fill: var(--MDsim-icon-color);
}

.DigitalTwinVisualization-header-right .App-toggle-button-selected {
  background-color: var(--MDsim-icon-color);
  box-shadow: none;
}

.DigitalTwinVisualization-header-right .App-toggle-button-selected:hover {
  background-color: var(--MDsim-background-box-color);
  box-shadow: 0 0 1em 0 var(--MDsim-background-box-color);
  opacity: .9;
}

.DigitalTwinVisualization-header-right .App-toggle-button-selected .App-toggle-button-icon-container svg path {
  fill: var(--MDsim-highlight-color);
}

.pain-assessment-body-diagram {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.pain-orientation-label {
  font-size: var(--MDsim-font-size-small);
  color: var(--MDsim-font-color);
  text-align: center;
  text-transform: capitalize;
  z-index: 10;
  background-color: #0000004d;
  border-radius: 4px;
  padding: 4px 8px;
  font-weight: 600;
}

.pain-body-diagram-svg-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80%;
  display: flex;
  position: relative;
}

.pain-body-diagram-svg-container svg path {
  fill: var(--MDsim-highlight-color);
}

.pain-body-diagram-svg-with-paths {
  opacity: .95;
  width: 100%;
  height: 100%;
}

.pain-assessment-body-diagram .pain-path-tooltip {
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
  font-size: var(--MDsim-font-size-small);
  background: #000000d9;
  border-radius: 8px;
  padding: 8px 10px;
  position: absolute;
  transform: translate(-50%, -120%);
  box-shadow: 0 4px 12px #00000040;
}

.pain-assessment-body-diagram .pain-path-tooltip-level {
  font-weight: 700;
}

.pain-assessment-body-diagram .pain-path-tooltip-type {
  opacity: .9;
}

.Digital-twin-widgets-container {
  box-sizing: border-box;
  gap: var(--MDsim-patient-dashboard-grid-gap, 10px);
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 5px;
  display: grid;
  overflow: hidden;
}

.Digital-twin-widgets-container.empty, .Digital-twin-widgets-container.selection, .Digital-twin-widgets-container.selected {
  grid-template-columns: 1fr 6fr;
}

.Digital-twin-widgets-container.creation, .Digital-twin-widgets-container.edit {
  grid-template-columns: 3fr 2fr;
}

.Digital-twin-widgets-container > * {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

.add-new-container {
  background-color: var(--MDsim-background-placeholder-color);
  border-radius: 25px;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: 100%;
  display: flex;
}

.add-new-container .App-icon-button {
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  width: 30%;
  display: flex;
}

.add-new-container .App-icon-button svg {
  width: 100%;
  height: 100%;
}

.add-new-container .App-icon-button svg path, .add-new-container .App-icon-button svg circle {
  stroke: var(--MDsim-highlight-color) !important;
  stroke-width: .5px !important;
}

.add-new-label {
  color: var(--MDsim-highlight-color);
}

.message-container {
  border-radius: 25px;
  justify-content: start;
  align-items: center;
  margin: 5px;
  display: flex;
}

.message {
  color: var(--MDsim-highlight-color);
  margin-right: .25em;
}

.date-range-picker {
  width: 100%;
  font-size: 12px;
}

.date-range-container {
  justify-content: end;
  align-items: center;
  gap: 10px;
  display: flex;
}

.date-range-separator {
  color: var(--MDsim-background-font-color);
  font-weight: bold;
}

.date-range-picker .error-message {
  color: var(--MDsim-error-color);
  margin-top: 4px;
  font-size: 12px;
}

.search-filter-container {
  flex-direction: column;
  flex-shrink: 0;
  justify-content: start;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  display: flex;
}

.search-bar-container {
  flex-direction: row;
  gap: 5px;
  width: 100%;
  display: flex;
}

.import-button-container {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 5px;
  display: flex;
}

.calendar-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

@media (width <= 350px) {
  .search-filter-container {
    justify-content: center;
  }

  .calendar-container, .search-bar-container {
    justify-content: center;
    width: 100%;
  }
}

.patient-widget-shell {
  --patient-widget-controls-offset: 72px;
  --patient-widget-controls-padding: 12px 16px;
  box-sizing: border-box;
  flex-direction: column;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.patient-widget-content {
  min-height: 0;
  padding-bottom: var(--patient-widget-controls-offset);
  flex-direction: column;
  flex: 1;
  gap: 12px;
  display: flex;
  overflow-y: auto;
}

.patient-widget-controls {
  padding: var(--patient-widget-controls-padding);
  box-sizing: border-box;
  background: var(--MDsim-background-modal-color);
  z-index: 2;
  padding-block: 8px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.App-module-delete-clinical-history-modal-container {
  box-sizing: border-box;
  background-color: var(--MDsim-background-modal-color);
  width: 540px;
  height: auto;
  min-height: 320px;
  color: var(--MDsim-font-color);
  border-radius: 12px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 42px;
  display: flex;
  position: relative;
}

.App-module-delete-clinical-history-modal-close {
  z-index: 10;
  position: absolute;
  top: 15px;
  right: 15px;
}

.App-module-delete-clinical-history-modal-close svg {
  fill: var(--MDsim-font-color);
  stroke: var(--MDsim-font-color);
}

.App-module-delete-clinical-history-modal-header {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
  display: flex;
}

.App-module-delete-clinical-history-modal-header h2 {
  color: var(--MDsim-font-color);
  text-align: center;
  margin: 0;
  font-size: 1.8em;
  font-weight: bold;
}

.App-module-delete-clinical-history-modal-header svg {
  fill: var(--MDsim-font-color);
  stroke: var(--MDsim-font-color);
  width: 28px;
  height: 28px;
}

.App-module-delete-clinical-history-modal-body {
  text-align: center;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  width: 100%;
  display: flex;
}

.App-module-delete-clinical-history-modal-body .confirmation-question {
  color: var(--MDsim-font-color);
  word-wrap: break-word;
  text-align: center;
  margin: 0;
  font-size: 1.2em;
  line-height: 1.3;
}

.App-module-delete-clinical-history-modal-actions {
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-top: 24px;
  display: flex;
}

.App-module-delete-clinical-history-modal-actions .delete-button {
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-font-color);
  min-width: 120px;
  transition: var(--MDsim-transition-all);
  border-radius: 50px;
  padding: 12px 40px;
  font-weight: 500;
}

.App-module-delete-clinical-history-modal-actions .delete-button:hover:not(:disabled) {
  box-shadow: 0 0 1.2em 0 var(--MDsim-button-color);
}

.App-module-delete-clinical-history-modal-actions .delete-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}







#portal-root .draggable-window {
  background-color: var(--MDsim-background-box-color);
  border: 1px solid var(--MDsim-border-color);
  color: var(--MDsim-font-color);
  z-index: 9999;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  box-sizing: border-box;
  border-radius: 20px;
  min-width: 200px;
  min-height: 150px;
  position: fixed;
  overflow: hidden;
  box-shadow: 0 4px 6px #0000001a, 0 1px 3px #00000014;
}

#portal-root .draggable-window.fullscreen {
  border: none;
  border-radius: 0;
}

#portal-root .window-header {
  background-color: var(--MDsim-button-color);
  height: 40px;
  color: var(--MDsim-font-color);
  cursor: move;
  z-index: 10;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

#portal-root .window-header.fullscreen {
  cursor: default;
}

#portal-root .window-header .header-text {
  white-space: nowrap;
  flex-direction: column;
  flex-grow: 1;
  max-width: 80%;
  display: flex;
  overflow: hidden;
}

#portal-root .window-header .title {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  padding-bottom: 3px;
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
}

#portal-root .window-header .subtitle {
  opacity: .8;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 12px;
  overflow: hidden;
}

#portal-root .window-header button {
  color: var(--MDsim-font-color);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0 5px;
  font-size: 20px;
}

#portal-root .window-header button:hover {
  color: var(--MDsim-highlight-color);
}

#portal-root .window-header .header-buttons {
  align-items: center;
  gap: 5px;
  display: flex;
}

#portal-root .window-header .fullscreen-button {
  font-size: 16px;
  font-weight: bold;
}

#portal-root .window-content {
  color: var(--MDsim-font-color);
  box-sizing: border-box;
  background-color: #000;
  position: absolute;
  inset: 40px 0 0;
  overflow: hidden;
}

#portal-root .window-content img {
  object-fit: cover;
  height: 100%;
}

#portal-root .image-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

#portal-root .resize-handle {
  cursor: se-resize;
  z-index: 11;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
}

#portal-root .resize-handle.hidden {
  display: none;
}

#portal-root .resize-handle:after {
  content: "";
  border-right: 2px solid var(--MDsim-font-color);
  border-bottom: 2px solid var(--MDsim-font-color);
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: 6px;
  right: 6px;
}

.App-module-delete-instance-modal-container {
  box-sizing: border-box;
  background-color: var(--MDsim-background-modal-color);
  width: 540px;
  height: auto;
  min-height: 320px;
  color: var(--MDsim-font-color);
  border-radius: 12px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 42px;
  display: flex;
  position: relative;
}

.App-module-delete-instance-modal-close {
  z-index: 10;
  position: absolute;
  top: 15px;
  right: 15px;
}

.App-module-delete-instance-modal-close svg {
  fill: var(--MDsim-font-color);
  stroke: var(--MDsim-font-color);
}

.App-module-delete-instance-modal-header {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
  display: flex;
}

.App-module-delete-instance-modal-header h2 {
  color: var(--MDsim-font-color);
  text-align: center;
  margin: 0;
  font-size: 1.8em;
  font-weight: bold;
}

.App-module-delete-instance-modal-header svg {
  fill: var(--MDsim-font-color);
  stroke: var(--MDsim-font-color);
  width: 28px;
  height: 28px;
}

.App-module-delete-instance-modal-body {
  text-align: center;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  width: 100%;
  display: flex;
}

.App-module-delete-instance-modal-body .confirmation-question {
  color: var(--MDsim-font-color);
  word-wrap: break-word;
  text-align: center;
  margin: 0;
  font-size: 1.2em;
  line-height: 1.3;
}

.App-module-delete-instance-modal-actions {
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-top: 24px;
  display: flex;
}

.App-module-delete-instance-modal-actions .delete-button {
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-font-color);
  min-width: 120px;
  transition: var(--MDsim-transition-all);
  border-radius: 50px;
  padding: 12px 40px;
  font-weight: 500;
}

.App-module-delete-instance-modal-actions .delete-button:hover:not(:disabled) {
  box-shadow: 0 0 1.2em 0 var(--MDsim-button-color);
}

.App-module-delete-instance-modal-actions .delete-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.instance-item {
  border-radius: 25px;
  flex-direction: column;
  height: fit-content;
  margin-bottom: 0;
  display: flex;
}

.instance-title {
  background-color: var(--MDsim-background-modal-color);
  border: .5px solid var(--MDsim-highlight-color);
  cursor: pointer;
  border-radius: 25px;
  justify-content: flex-start;
  align-items: center;
  height: 5px;
  padding: 10px;
  display: flex;
}

.instance-title-left {
  flex-grow: 1;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  display: grid;
}

.instance-title-right {
  align-items: center;
  width: 30px;
  display: flex;
}

.instance-details {
  opacity: 0;
  flex: 1;
  max-height: 0;
  padding: 0 15px;
  transition: max-height .26s, opacity .2s, padding .2s;
  display: flex;
  overflow: hidden;
}

.instance-details.expanded {
  opacity: 1;
  max-height: 1000px;
  padding: 15px 0;
}

.instance-details-content {
  width: 100%;
  display: flex;
  overflow-x: auto;
}

.instance-thumbnail-container {
  flex-wrap: wrap;
  gap: 15px;
  height: fit-content;
  display: flex;
}

.instance-thumbnail-item {
  cursor: pointer;
  flex-shrink: 0;
  width: 10vh;
  height: 15vh;
}

.App-spinesim-study-arrow-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  transform: rotate(0);
}

.App-spinesim-study-arrow-icon.up {
  transform: rotate(-180deg);
}

.App-spinesim-study-arrow {
  margin-right: 10px;
}

@media (width <= 768px) {
  .instance-thumbnail-item {
    width: 80px;
    height: 150px;
  }
}

@media (width <= 480px) {
  .instance-thumbnail-item {
    width: 60px;
  }
}

.istance-header {
  flex-shrink: 0;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0;
  display: grid;
}

.istance-header-item {
  cursor: pointer;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  display: flex;
}

.sort-icon {
  margin-left: 5px;
}

.instances-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  display: flex;
}

.instances-list::-webkit-scrollbar {
  background: none;
  width: 0;
}

.medical-image-content {
  gap: 16px;
}

.medical-image-header {
  padding-inline: 4px;
}

.medical-image-instances, .medical-image-empty {
  flex: 1;
}

.patient-pain-assessment-list {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.patient-pain-assessment-empty {
  text-align: center;
  color: var(--MDsim-font-color-secondary, #666);
  background-color: var(--MDsim-background-box-color);
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  display: flex;
}

.dashboard-widget.maximized .patient-pain-assessment-list {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  display: grid;
  overflow-y: auto;
}

.dashboard-widget.maximized .pain-assessment-item {
  max-height: 350px;
}

.patient-pain-assessment-empty p {
  font-size: var(--MDsim-font-size-medium);
  margin: 8px 0;
}

.patient-pain-assessment-empty p:first-child {
  color: var(--MDsim-font-color);
  font-weight: 600;
}

.patient-pain-assessment-content::-webkit-scrollbar {
  width: 6px;
}

.patient-pain-assessment-content::-webkit-scrollbar-track {
  background: var(--MDsim-background-color, #f1f1f1);
  border-radius: 3px;
}

.patient-pain-assessment-content::-webkit-scrollbar-thumb {
  background: var(--MDsim-border-color, #ccc);
  border-radius: 3px;
}

.patient-pain-assessment-content::-webkit-scrollbar-thumb:hover {
  background: var(--MDsim-highlight-color, #0082a9);
}

.App-module-delete-pain-assessment-modal-container {
  box-sizing: border-box;
  background-color: var(--MDsim-background-modal-color);
  width: 540px;
  height: auto;
  min-height: 320px;
  color: var(--MDsim-font-color);
  border-radius: 12px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 42px;
  display: flex;
  position: relative;
}

.App-module-delete-pain-assessment-modal-close {
  z-index: 10;
  position: absolute;
  top: 15px;
  right: 15px;
}

.App-module-delete-pain-assessment-modal-close svg {
  fill: var(--MDsim-font-color);
  stroke: var(--MDsim-font-color);
}

.App-module-delete-pain-assessment-modal-header {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
  display: flex;
}

.App-module-delete-pain-assessment-modal-header h2 {
  color: var(--MDsim-font-color);
  text-align: center;
  margin: 0;
  font-size: 1.8em;
  font-weight: bold;
}

.App-module-delete-pain-assessment-modal-header svg {
  fill: var(--MDsim-font-color);
  stroke: var(--MDsim-font-color);
  width: 28px;
  height: 28px;
}

.App-module-delete-pain-assessment-modal-body {
  text-align: center;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  width: 100%;
  display: flex;
}

.App-module-delete-pain-assessment-modal-body .confirmation-question {
  color: var(--MDsim-font-color);
  word-wrap: break-word;
  text-align: center;
  margin: 0;
  font-size: 1.2em;
  line-height: 1.3;
}

.App-module-delete-pain-assessment-modal-actions {
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-top: 24px;
  display: flex;
}

.App-module-delete-pain-assessment-modal-actions .delete-button {
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-font-color);
  min-width: 120px;
  transition: var(--MDsim-transition-all);
  border-radius: 50px;
  padding: 12px 40px;
  font-weight: 500;
}

.App-module-delete-pain-assessment-modal-actions .delete-button:hover:not(:disabled) {
  box-shadow: 0 0 1.2em 0 var(--MDsim-button-color);
}

.App-module-delete-pain-assessment-modal-actions .delete-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.pain-assessment-item {
  background-color: var(--MDsim-background-box-color);
  border-radius: 12px;
  flex-direction: column;
  flex: none;
  min-height: 0;
  padding-block: 5px;
  padding-inline: 10px;
  transition: box-shadow .2s;
  display: flex;
  position: relative;
  overflow: visible;
  box-shadow: 0 2px 8px #0000001a;
}

.patient-pain-assessment-list .pain-assessment-item:first-child {
  flex: auto;
}

.pain-assessment-item:hover {
  box-shadow: 0 4px 12px #00000026;
}

.pain-assessment-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  display: flex;
}

.pain-assessment-date {
  font-size: var(--MDsim-font-size-large);
  color: var(--MDsim-highlight-color);
  flex-shrink: 0;
}

.pain-assessment-delete-action {
  align-items: center;
  display: flex;
}

.pain-assessment-orientations {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  min-height: 0;
  margin-bottom: 12px;
  display: grid;
}

.pain-assessment-orientation {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 0;
  display: flex;
}

.patient-pain-assessment-list .pain-assessment-item:first-child .pain-assessment-orientations {
  flex: 1;
}

.svg-container {
  aspect-ratio: 215 / 584;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-height: 100%;
  display: flex;
  position: relative;
}

.svg-container svg {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.svg-container .body-svg path {
  fill: var(--MDsim-highlight-color);
}

.pain-paths-overlay path {
  fill: none !important;
}

.body-svg {
  opacity: .9;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.pain-paths-overlay {
  z-index: 2;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.pain-assessment-item .pain-path-tooltip {
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
  font-size: var(--MDsim-font-size-small);
  background: #000000d9;
  border-radius: 8px;
  padding: 8px 10px;
  position: absolute;
  transform: translate(-50%, -120%);
  box-shadow: 0 4px 12px #00000040;
}

.pain-assessment-item .pain-path-tooltip-level {
  font-weight: 700;
}

.pain-assessment-item .pain-path-tooltip-type {
  opacity: .9;
}

.pain-scale-gradient {
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  display: flex;
}

.pain-scale-label {
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-font-color);
  text-align: center;
  min-width: 20px;
  font-weight: bold;
}

.pain-scale-bar {
  background: linear-gradient(to right,
    var(--MDsim-gradient-dark-green) 0%,
    var(--MDsim-gradient-light-green) 10%,
    var(--MDsim-gradient-brillant-green) 20%,
    var(--MDsim-gradient-pale-green) 30%,
    var(--MDsim-gradient-light-yellow) 40%,
    var(--MDsim-gradient-yellow) 50%,
    var(--MDsim-gradient-orange) 60%,
    var(--MDsim-gradient-dark-orange) 70%,
    var(--MDsim-gradient-red) 80%,
    var(--MDsim-gradient-dark-red) 100%);
  border-radius: 6px;
  flex: 1;
  height: 8px;
}

@media (width <= 768px) {
  .pain-assessment-orientations {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .pain-assessment-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .pain-assessment-summary {
    text-align: left;
  }

  .svg-container {
    max-height: 140px;
  }

  .pain-scale-gradient {
    gap: 8px;
  }

  .pain-scale-label {
    min-width: 16px;
    font-size: var(--MDsim-font-size-small);
  }

  .pain-scale-bar {
    height: 10px;
  }
}

@media (width <= 480px) {
  .pain-assessment-orientations {
    grid-template-columns: repeat(2, 1fr);
  }

  .svg-container {
    max-height: 110px;
  }

  .pain-scale-gradient {
    gap: 6px;
  }

  .pain-scale-bar {
    height: 8px;
  }
}

.App-module-delete-morphology-image-modal-container {
  box-sizing: border-box;
  background-color: var(--MDsim-background-modal-color);
  width: 540px;
  height: auto;
  min-height: 320px;
  color: var(--MDsim-font-color);
  border-radius: 12px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 42px;
  display: flex;
  position: relative;
}

.App-module-delete-morphology-image-modal-close {
  z-index: 10;
  position: absolute;
  top: 15px;
  right: 15px;
}

.App-module-delete-morphology-image-modal-close svg {
  fill: var(--MDsim-font-color);
  stroke: var(--MDsim-font-color);
}

.App-module-delete-morphology-image-modal-header {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
  display: flex;
}

.App-module-delete-morphology-image-modal-header h2 {
  color: var(--MDsim-font-color);
  text-align: center;
  margin: 0;
  font-size: 1.8em;
  font-weight: bold;
}

.App-module-delete-morphology-image-modal-header svg {
  fill: var(--MDsim-font-color);
  stroke: var(--MDsim-font-color);
  width: 28px;
  height: 28px;
}

.App-module-delete-morphology-image-modal-body {
  text-align: center;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  width: 100%;
  display: flex;
}

.App-module-delete-morphology-image-modal-body .confirmation-question {
  color: var(--MDsim-font-color);
  word-wrap: break-word;
  text-align: center;
  margin: 0;
  font-size: 1.2em;
  line-height: 1.3;
}

.App-module-delete-morphology-image-modal-actions {
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-top: 24px;
  display: flex;
}

.App-module-delete-morphology-image-modal-actions .delete-button {
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-font-color);
  min-width: 120px;
  transition: var(--MDsim-transition-all);
  border-radius: 50px;
  padding: 12px 40px;
  font-weight: 500;
}

.App-module-delete-morphology-image-modal-actions .delete-button:hover:not(:disabled) {
  box-shadow: 0 0 1.2em 0 var(--MDsim-button-color);
}

.App-module-delete-morphology-image-modal-actions .delete-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.gallery-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: hidden;
}

.patient-morphology-controls {
  flex-direction: row;
  width: 100%;
  display: flex;
}

.gallery-container::-webkit-scrollbar {
  background: none;
  width: 0;
}

.image-gallery {
  flex-direction: column;
  gap: 1rem;
  display: flex;
}

.date-section {
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 1rem;
  display: flex;
}

.date-header {
  border: 1px solid var(--MDsim-highlight-color);
  box-sizing: border-box;
  border-radius: 25px;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  width: 100%;
  padding-block: 5px;
  padding-inline: 15px;
  display: flex;
}

.date-section-title {
  color: var(--MDsim-font-color, #333);
}

.images-grid-wrapper {
  width: 100%;
}

.images-grid {
  grid-template-columns: repeat(auto-fill, 10vh);
  justify-content: center;
  gap: 1rem;
  display: grid;
}

.image-morphology-thumbnail-wrapper {
  aspect-ratio: 10 / 11;
  cursor: pointer;
  position: relative;
}

.morphology-thumbnail-overlay-text {
  background: #000000b0;
  border-radius: 15px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

.date-thumbnail {
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  padding: 5px;
  overflow: hidden;
}

.title-thumbnail {
  text-align: center;
  width: 100%;
  white-space: wrap;
  text-overflow: clip;
  overflow: hidden;
}

.morphology-thumbnail-image {
  object-fit: cover;
  background-color: var(--MDsim-background-box-color);
  border-radius: 15px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media (width <= 768px) {
  .calendar-container {
    flex-direction: row-reverse;
  }

  .date-range-picker-wrapper {
    opacity: 1;
    position: static;
    transform: none;
  }

  .date-section-title {
    font-size: 1.1rem;
  }
}

@media (width <= 480px) {
  .images-grid {
    grid-template-columns: 1fr;
  }

  .date-section-title {
    font-size: 1rem;
  }

  .date-section {
    gap: .75rem;
  }

  .image-gallery {
    gap: 1.5rem;
  }
}

.personal-information-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 100%;
  font-family: var(--MDsim-font-family);
  flex-direction: column;
  padding: 10px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.edit-icon-wrapper {
  z-index: 10;
  position: absolute;
  top: 15px;
  right: 15px;
}

.edit-icon {
  background: none;
  border: none;
  width: 20px;
  height: 20px;
  padding: 0;
}

.info-details-container {
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  display: flex;
}

.label-text, .info-item {
  font-size: var(--MDsim-font-size-large);

  &.label-text {
    color: var(--MDsim-highlight-color);
    margin-right: 4px;
  }

  &.info-item:not(:last-child) {
    margin-bottom: 5px;
  }
}

.name {
  text-overflow: ellipsis;
  width: 80%;
  padding-bottom: 10px;
  display: block;
  overflow: hidden;
}

.name-details, .address-info, .contacts-info {
  flex-direction: column;
  width: 100%;
  display: flex;
}

@media (width <= 600px) {
  .info-grid {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .name-details, .address-info, .contacts-info {
    width: 100%;
  }
}

.personal-information-edit-modal {
  background-color: var(--MDsim-background-modal-color);
  box-sizing: border-box;
  z-index: 1000;
  border-radius: 25px;
  flex-direction: column;
  gap: 15px;
  width: 90%;
  min-width: 300px;
  max-width: 650px;
  max-height: 90vh;
  padding: 60px 20px 20px;
  display: flex;
  position: fixed;
  top: 50%;
  left: 50%;
  overflow-y: auto;
  transform: translate(-50%, -50%);
}

.form-row {
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.form-row > * {
  flex: 1;
  width: calc(50% - 5px);
  min-width: 0;
  height: 100%;
}

.form-row > :only-child {
  width: 100%;
}

.create-mode .react-datepicker-popper {
  z-index: 1001;
}

.create-mode .react-datepicker__tab-loop {
  position: absolute;
  top: -250px;
}

.button-container {
  justify-content: flex-end;
  display: flex;
}

@media (width <= 768px) {
  .personal-information-edit-modal {
    width: 95%;
    padding: 50px 15px 15px;
  }

  .form-row {
    flex-direction: column;
  }

  .form-row > * {
    width: 100%;
  }
}

.App-module-delete-report-modal-container {
  box-sizing: border-box;
  background-color: var(--MDsim-background-modal-color);
  width: 540px;
  height: auto;
  min-height: 320px;
  color: var(--MDsim-font-color);
  border-radius: 12px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 42px;
  display: flex;
  position: relative;
}

.App-module-delete-report-modal-close {
  z-index: 10;
  position: absolute;
  top: 15px;
  right: 15px;
}

.App-module-delete-report-modal-close svg {
  fill: var(--MDsim-font-color);
  stroke: var(--MDsim-font-color);
}

.App-module-delete-report-modal-header {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
  display: flex;
}

.App-module-delete-report-modal-header h2 {
  color: var(--MDsim-font-color);
  text-align: center;
  margin: 0;
  font-size: 1.8em;
  font-weight: bold;
}

.App-module-delete-report-modal-header svg {
  fill: var(--MDsim-font-color);
  stroke: var(--MDsim-font-color);
  width: 28px;
  height: 28px;
}

.App-module-delete-report-modal-body {
  text-align: center;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  width: 100%;
  display: flex;
}

.App-module-delete-report-modal-body .confirmation-question {
  color: var(--MDsim-font-color);
  word-wrap: break-word;
  text-align: center;
  margin: 0;
  font-size: 1.2em;
  line-height: 1.3;
}

.App-module-delete-report-modal-actions {
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-top: 24px;
  display: flex;
}

.App-module-delete-report-modal-actions .delete-button {
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-font-color);
  min-width: 120px;
  transition: var(--MDsim-transition-all);
  border-radius: 50px;
  padding: 12px 40px;
  font-weight: 500;
}

.App-module-delete-report-modal-actions .delete-button:hover:not(:disabled) {
  box-shadow: 0 0 1.2em 0 var(--MDsim-button-color);
}

.App-module-delete-report-modal-actions .delete-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.report-item {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 12px 12px;
  transition: all .2s;
  display: flex;

  &:first-child {
    padding-top: 12px;
  }
}

.report-item:not(:last-child) {
  border-bottom: .5px solid rgba(var(--MDsim-highlight-color-rgb, 0, 130, 169), .8);
}

.report-item-date {
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-highlight-color);
  font-weight: 400;
}

.report-item-content {
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  display: flex;
}

.report-item-title {
  font-size: var(--MDsim-font-size-large);
  color: var(--MDsim-font-color);
  word-break: break-word;
  flex: 1;
}

.report-item-actions {
  flex-shrink: 0;
  gap: 8px;
  display: flex;
}

.report-item-actions svg .filled-path {
  fill: var(--MDsim-highlight-color);
}

.report-item-actions svg .stroke-path {
  stroke: var(--MDsim-highlight-color);
}

.report-item-actions svg path {
  fill: var(--MDsim-highlight-color);
  stroke: var(--MDsim-highlight-color);
}

.patient-reports {
  --patient-widget-controls-padding: 10px 12px;
}

.patient-reports-list {
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
  display: flex;
}

.patient-reports-content::-webkit-scrollbar {
  width: 6px;
}

.patient-reports-content::-webkit-scrollbar-track {
  background: var(--MDsim-background-color, #f1f1f1);
  border-radius: 3px;
}

.patient-reports-content::-webkit-scrollbar-thumb {
  background: var(--MDsim-border-color, #ccc);
  border-radius: 3px;
}

.patient-reports-content::-webkit-scrollbar-thumb:hover {
  background: var(--MDsim-highlight-color, #0082a9);
}

.patient-dashboard.fixed-layout {
  gap: var(--MDsim-patient-dashboard-grid-gap, 16px);
  box-sizing: border-box;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: grid;
}

.dashboard-widget {
  box-sizing: border-box;
  flex-direction: column;
  min-height: 0;
  transition: all .3s;
  display: flex;
  overflow: hidden;
}

.dashboard-widget.hidden {
  display: none;
}

.dashboard-widget.maximized {
  z-index: 10;
  position: relative;
}

.widget-content {
  box-sizing: border-box;
  flex-direction: column;
  flex: 1;
  padding: 10px;
  display: flex;
  overflow: auto;
}

@media (width <= 1024px) {
  .patient-dashboard.fixed-layout {
    grid-template-rows: repeat(4, minmax(200px, 1fr));
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-widget {
    grid-area: auto !important;
  }
}

@media (width <= 768px) {
  .patient-dashboard.fixed-layout {
    flex-direction: column;
    gap: 16px;
    display: flex;
    overflow-y: auto;
  }

  .dashboard-widget {
    flex-shrink: 0;
    min-height: 300px;
  }

  .dashboard-widget.maximized {
    z-index: 100;
    min-height: 100vh;
    position: fixed;
    inset: 0;
  }
}

.App-module-patients {
  --col-1: 19%;
  --col-2: 19%;
  --col-3: 19%;
  --col-4: 19%;
  --col-5: 15%;
  --col-filter: 10%;
  --col-actions: 14%;
  flex-direction: column;
  flex: 1;
  gap: 25px;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.DigitalTwinShortcut {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: 100%;
  padding: 30px;
  display: flex;
}

.DigitalTwinShortcut-image-wrapper {
  background-color: var(--MDsim-black-color);
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 50%;
  display: flex;
}

.DigitalTwinShortcut-navigation-buttons {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 50%;
  display: flex;
}

.patient-form-modal-column {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.modal-close-button-container {
  position: absolute;
  top: 10px;
  right: 10px;
}

.patient-form-modal .modal-title {
  text-align: start;
  width: 100%;
  color: var(--MDsim-font-color);
  font-size: 30px;
  font-weight: 600;
}

.patient-form-modal .modal-subtitle {
  text-align: center;
  color: var(--MDsim-font-color);
  width: 100%;
  font-size: 18px;
}

.patient-form-modal .upload-section {
  flex-direction: column;
  flex: 1;
  gap: 10px;
  width: 100%;
  display: flex;
  position: relative;
}

.patient-form-modal .drag-drop-area {
  border: 2px dashed var(--MDsim-icon-color);
  text-align: center;
  background-color: var(--MDsim-background-box-color);
  border-radius: 25px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  transition: height .3s;
  display: flex;
}

.patient-form-modal .personal-info-section {
  width: 100%;
}

.patient-form-modal .personal-information-edit-modal {
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  box-sizing: border-box;
  border-radius: 0;
  padding: 10px;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}

.patient-form-modal .form-row {
  gap: 10px;
  margin-bottom: 15px;
  display: flex;
}

.importing-overlay {
  width: 100%;
  height: 100%;
  color: var(--MDsim-font-color);
  z-index: 10000;
  background: #000000b3;
  border-radius: 25px;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

@media (width <= 768px) {
  .patient-form-modal {
    width: 95%;
    max-height: 85vh;
    padding: 15px;
  }

  .patient-form-modal-column {
    width: 95%;
  }

  .patient-form-modal .form-row {
    flex-direction: column;
  }

  .patient-form-modal .modal-subtitle {
    font-size: 16px;
  }

  .patient-form-modal .navigation-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .patient-form-modal .prev-button, .patient-form-modal .next-button, .patient-form-modal .back-button {
    min-width: 100%;
  }
}

.App-module-patients-search {
  background-color: var(--MDsim-background-modal-color);
  border-radius: 25px;
  flex-direction: column;
  gap: 25px;
  margin: 5px;
  padding: 25px;
  display: flex;
}

.App-module-patients-search-row {
  flex-flow: row;
  align-items: center;
  gap: 10px;
  width: 90%;
  display: flex;
}

.App-patient-filters-grid {
  grid-template-columns: var(--col-1) var(--col-2) var(--col-3) var(--col-4) var(--col-filter)
    auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  display: grid;
}

.App-patient-filters-grid > * {
  min-width: 0;
  max-width: 100%;
}

.App-patient-filters-spacer {
  pointer-events: none;
}

.App-module-patients-main-filters {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.App-module-patients-search-actions {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  display: flex;
}

.App-module-patients-search-expandable {
  box-shadow: inset 0 0 1em 0 var(--MDsim-background-color);
  border-radius: 25px;
  flex-direction: column;
  gap: 25px;
  height: 20px;
  padding: 10px;
  transition: height .5s ease-in-out;
  display: flex;
  position: relative;
  overflow: hidden;
}

.App-module-patients-search-expandable.expanded {
  height: fit-content;
}

.App-module-patients-search-expandable .App-module-patients-search-row {
  visibility: collapse;
  height: 0;
}

.App-module-patients-search-expandable.expanded .App-module-patients-search-row {
  visibility: visible;
  height: 100%;
  display: flex;
}

.App-module-patients-search-expandable-row {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}

.App-module-patients-search-expandable-row-arrow {
  justify-content: flex-end;
  margin-top: 5px;
  margin-right: 20px;
  display: flex;
}

.App-module-patients-search-expandable-row-arrow-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}

.App-module-patients-database {
  background-color: var(--MDsim-background-modal-color);
  border-radius: 25px;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 5px;
  display: flex;
  overflow: hidden;
}

.App-module-patients-result {
  flex-direction: row;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.App-module-patients-label {
  margin-top: 25px;
  margin-bottom: 10px;
  margin-left: 25px;
}

.App-module-patients-table-wrapper {
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden auto;
}

.App-patient-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 10px;
  width: 100%;
  padding: 0 25px 25px;
}

.App-patient-orderable-header {
  cursor: pointer;
}

.App-patient-orderable-head {
  flex-direction: row;
  justify-content: left;
  align-items: center;
  gap: 10px;
  display: flex;
}

.App-patient-table th, .App-patient-table td {
  text-align: left;
  padding-inline: 10px;
}

.App-patient-table tbody tr {
  height: var(--MDsim-patient-table-row-height);
  scroll-snap-align: center;
}

.App-patient-row {
  cursor: pointer;
}

.App-patient-row:nth-of-type(2n) {
  background-color: var(--MDsim-background-color);
}

.App-patient-row:nth-of-type(odd) {
  background-color: var(--MDsim-button-color);
}

.App-patient-table th:first-child, .App-patient-table td:first-child {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.App-patient-table th:last-child, .App-patient-table td:last-child {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

.App-patient-table tr:first-child th:first-child {
  border-top-left-radius: 25px;
}

.App-patient-table tr:first-child th:last-child {
  border-top-right-radius: 25px;
}

.App-patient-table tr:last-child td:first-child {
  border-bottom-left-radius: 25px;
}

.App-patient-table tr:last-child td:last-child {
  border-bottom-right-radius: 25px;
}

.App-patient-circle {
  border: 2px solid var(--MDsim-font-color);
  border-radius: 50%;
  width: 9px;
  height: 9px;
  margin-left: 10px;
  margin-right: 20px;
}

tr.selected .App-patient-circle {
  background-color: var(--MDsim-highlight-color);
  border-radius: 50%;
  width: 9px;
  height: 9px;
}

.App-patient-notfound-row {
  box-shadow: inset 0 0 10px var(--MDsim-error-color);
  border-radius: 25px;
}

.App-patient-arrow-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  transform: rotate(0);
}

.App-patient-table-actions-icon:hover {
  box-shadow: none;
  background-color: #0000;
}

.App-module-delete-patient-modal-container {
  box-sizing: border-box;
  background-color: var(--MDsim-background-modal-color);
  width: 540px;
  height: auto;
  min-height: 320px;
  color: var(--MDsim-font-color);
  border-radius: 12px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 42px;
  display: flex;
  position: relative;
}

.App-module-delete-patient-modal-close {
  z-index: 10;
  position: absolute;
  top: 15px;
  right: 15px;
}

.App-module-delete-patient-modal-close svg {
  fill: var(--MDsim-font-color);
  stroke: var(--MDsim-font-color);
}

.App-module-delete-patient-modal-header {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
  display: flex;
}

.App-module-delete-patient-modal-header h2 {
  color: var(--MDsim-font-color);
  text-align: center;
  margin: 0;
  font-size: 1.8em;
  font-weight: bold;
}

.App-module-delete-patient-modal-header svg {
  fill: var(--MDsim-font-color);
  stroke: var(--MDsim-font-color);
  width: 28px;
  height: 28px;
}

.App-module-delete-patients-modal-body {
  text-align: center;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  width: 100%;
  display: flex;
}

.App-module-delete-patients-modal-body .confirmation-question {
  color: var(--MDsim-font-color);
  word-wrap: break-word;
  text-align: center;
  margin: 0;
  font-size: 1.2em;
  line-height: 1.3;
}

.App-module-delete-patients-modal-body .warning-message {
  color: var(--MDsim-font-color);
  opacity: .7;
  text-align: center;
  margin: 0;
  font-size: 1em;
  line-height: 1.3;
}

.App-module-delete-patients-actions-container {
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-top: 24px;
  display: flex;
}

.App-module-delete-patients-actions-container .delete-button {
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-font-color);
  min-width: 120px;
  transition: var(--MDsim-transition-all);
  border-radius: 50px;
  padding: 12px 40px;
  font-weight: 500;
}

.App-module-delete-patients-actions-container .delete-button:hover:not(:disabled) {
  box-shadow: 0 0 1.2em 0 var(--MDsim-button-color);
}

.App-module-delete-patients-actions-container .delete-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.App-patient-table-header {
  background-color: var(--MDsim-background-modal-color);
  box-sizing: border-box;
  width: 100%;
  padding: 0 25px;
}

.App-patient-header-table {
  table-layout: fixed;
  border-collapse: separate;
  width: 100%;
}

.App-patient-header-table th {
  text-align: left;
  box-sizing: border-box;
  padding-block: 10px;
  padding-inline: 10px;
}

.settings-container {
  background-color: var(--MDsim-background-color);
  flex-direction: column;
  width: 90%;
  height: 90%;
  display: flex;
}

.settings-container-content {
  gap: var(--MDsim-app-grid-column-gap);
  flex-direction: row;
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
}

.settings-container-main {
  gap: var(--MDsim-app-grid-row-gap);
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
}

.settings-container-item {
  min-height: 0;
  padding: var(--MDsim-sidebar-padding);
  border-radius: var(--MDsim-border-radius-xlarge);
  background-color: var(--MDsim-background-modal-color);
  flex-direction: column;
  flex: 1;
  justify-content: start;
  align-items: flex-start;
  display: flex;
  overflow-y: auto;
}

.settings-container-item-header {
  margin-bottom: var(--MDsim-sidebar-elements-gap);
  flex-direction: column;
  gap: 8px;
  display: flex;

  & h3 {
    font-size: var(--MDsim-font-size-xlarge);
    margin: 0;
    padding: 0;
  }

  & p {
    font-size: var(--MDsim-font-size-medium);
    color: var(--MDsim-selected-color);
    margin: 0;
    padding: 0;
  }
}

.settings-container-regional-item {
  align-items: center;
  gap: var(--MDsim-sidebar-elements-gap);
  display: flex;
}

.settings-dropdown-selector {
  align-items: center;
  padding: 0 10px;
  display: flex;
}

.settings-region-content {
  gap: var(--MDsim-settings-items-gap);
  flex-direction: row;
  width: 100%;
  display: flex;
}

.settings-label {
  color: var(--MDsim-selected-color);
}

.settings-container-aside {
  width: var(--MDsim-right-side-bar-width-medium);
  min-height: 0;
  padding: var(--MDsim-sidebar-padding);
  border-radius: var(--MDsim-border-radius-xlarge);
  background-color: var(--MDsim-background-modal-color);
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

.dropdown-container {
  flex-direction: column;
  width: 100%;
  display: flex;
}

.dropdown-header {
  cursor: pointer;
  background-color: var(--MDsim-background-box-color);
  -webkit-user-select: none;
  user-select: none;
  border-radius: var(--MDsim-border-radius-xlarge, 20px);
  transition: var(--MDsim-transition-all);
  border: 2px solid #0000;
  outline: none;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  display: flex;
}

.dropdown-header:focus {
  outline: none;
}

.dropdown-header:focus-visible {
  border-color: var(--MDsim-selected-color);
  outline: none;
}

.dropdown-header:active {
  background-color: var(--MDsim-background-box-color);
}

.dropdown-label {
  color: var(--MDsim-text-color, var(--MDsim-font-color));
  font-weight: 500;
  font-size: var(--MDsim-font-size-medium);
}

.dropdown-arrow {
  color: var(--MDsim-selected-color);
  transition: var(--MDsim-transition-all);
  font-size: 12px;
}

.dropdown-arrow.open {
  transform: rotate(-180deg);
}

.dropdown-content {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.App-toggle-theme-switch {
  all: unset;
  width: var(--Toggle-theme-width);
  height: var(--Toggle-theme-height);
  cursor: pointer;
  border-radius: var(--Toggle-theme-height);
  transition: var(--MDsim-transition-all);
  border: 2px solid #0000;
  display: inline-block;
  position: relative;
}

.App-toggle-theme-switch:focus {
  outline: none;
}

.App-toggle-theme-switch:focus-visible {
  border-color: var(--MDsim-selected-color);
  outline: none;
}

.App-toggle-theme-slider {
  border-radius: var(--Toggle-theme-height);
  background-color: var(--MDsim-selected-color);
  box-shadow: 0 0 1em 0 var(--MDsim-button-color);
  position: absolute;
  inset: 0;
}

.App-toggle-theme-slider:before {
  content: "";
  height: var(--Toggle-theme-bubble-size);
  width: var(--Toggle-theme-bubble-size);
  left: var(--Toggle-theme-bubble-left);
  bottom: var(--Toggle-theme-bubble-bottom);
  background-color: var(--MDsim-button-color);
  border: var(--Toggle-theme-bubble-border) solid var(--MDsim-background-color);
  border-radius: 50%;
  transition: left .5s;
  position: absolute;
}

[data-theme="dark"] .App-toggle-theme-slider:before {
  left: calc(var(--Toggle-theme-width) -
      (var(--Toggle-theme-bubble-left) + var(--Toggle-theme-bubble-size) +
       var(--Toggle-theme-bubble-border) * 2));
}

.App-toggle-theme-slider:hover:before {
  box-shadow: 0 0 .5em 0 var(--MDsim-highlight-color);
}

.zooming-sensitivity-container {
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 250px;
  height: 20px;
  display: flex;
}

.zoom-arrow-button {
  color: var(--MDsim-font-color);
  cursor: pointer;
  transition: var(--MDsim-transition-opacity);
  -webkit-user-select: none;
  user-select: none;
  background: none;
  border: none;
  border-radius: 50%;
  outline: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  display: flex;
}

.zoom-arrow-button:hover, .zoom-arrow-button:active {
  opacity: .6;
}

.zoom-arrow-button:focus {
  outline: none;
}

.zoom-arrow-button:focus-visible {
  box-shadow: 0 0 0 2px var(--MDsim-selected-color);
  outline: none;
}

.zoom-slider {
  appearance: none;
  cursor: pointer;
  vertical-align: middle;
  width: 100%;
  height: 20px;
  transition: var(--MDsim-transition-all);
  background: none;
  border: 2px solid #0000;
  border-radius: 2px;
  outline: none;
  margin: 0;
  padding: 0;
}

.zoom-slider:focus {
  outline: none;
}

.zoom-slider:focus-visible {
  border-color: var(--MDsim-selected-color);
  outline: none;
}

.zoom-slider::-webkit-slider-runnable-track {
  background: var(--MDsim-selected-color);
  border: none;
  border-radius: 2px;
  width: 100%;
  height: 4px;
}

.zoom-slider::-webkit-slider-thumb {
  appearance: none;
  background: var(--MDsim-button-color);
  cursor: pointer;
  border: none;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  transition: transform .2s;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.zoom-slider::-webkit-slider-thumb:hover {
  transform: translateY(-50%) scale(1.2);
}

.zoom-slider::-moz-range-track {
  background: var(--MDsim-selected-color);
  border: none;
  border-radius: 2px;
  width: 100%;
  height: 4px;
}

.zoom-slider::-moz-range-thumb {
  background: var(--MDsim-button-color);
  cursor: pointer;
  border: none;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  transition: transform .2s;
}

.zoom-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
}

.zoom-slider::-ms-track {
  background: var(--MDsim-selected-color);
  color: #0000;
  border: none;
  border-radius: 2px;
  width: 100%;
  height: 4px;
  margin: 0;
  padding: 0;
}

.zoom-slider::-ms-fill-lower {
  background: var(--MDsim-selected-color);
  border-radius: 2px;
}

.zoom-slider::-ms-fill-upper {
  background: var(--MDsim-selected-color);
  border-radius: 2px;
}

.zoom-slider::-ms-thumb {
  background: var(--MDsim-button-color);
  cursor: pointer;
  box-sizing: border-box;
  border: none;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  margin: 0;
}

.zoom-slider::-ms-tooltip {
  display: none;
}

.contact-container {
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  overflow-y: auto;
}

.contact-inner-wrapper {
  box-sizing: border-box;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 800px;
  padding: 20px;
  display: flex;
}

.contact-header {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.contact-tabs {
  background-color: var(--MDsim-background-box-color);
  box-sizing: border-box;
  border-radius: 25px;
  flex-direction: row;
  gap: 12px;
  width: fit-content;
  margin: 0;
  padding: 5px;
  display: flex;
}

.contact-tab {
  cursor: pointer;
  min-width: 100px;
  height: 32px;
  color: var(--MDsim-background-font-color);
  box-sizing: border-box;
  background-color: #0000;
  border: none;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  padding: 10px 30px;
  transition: all .3s;
  display: flex;
}

.contact-tab:hover {
  background-color: var(--MDsim-background-modal-color);
}

.contact-tab.active {
  background-color: var(--MDsim-button-color);
  box-shadow: 0 0 .5em 0 var(--MDsim-highlight-color);
  color: var(--MDsim-background-font-color);
}

.contact-content {
  box-sizing: border-box;
  flex: 1;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.contact-form {
  flex-direction: column;
  gap: 25px;
  width: 100%;
  display: flex;
}

.form-section {
  flex-direction: column;
  gap: 10px;
  width: 100%;
  display: flex;
}

.form-label {
  color: var(--MDsim-highlight-color);
}

.error-message {
  color: var(--MDsim-error-color);
  margin-top: 5px;
  padding-left: 5px;
}

.file-drop-area {
  border: 2px dashed var(--MDsim-icon-color);
  text-align: center;
  background-color: var(--MDsim-background-box-color);
  cursor: pointer;
  border-radius: 15px;
  padding: 30px;
  transition: all .3s;
}

.file-drop-area:hover {
  border-color: var(--MDsim-highlight-color);
  box-shadow: 0 0 .5em 0 var(--MDsim-highlight-color);
}

.file-drop-area.dragging {
  border-color: var(--MDsim-highlight-color);
  box-shadow: 0 0 1em 0 var(--MDsim-highlight-color);
  background-color: var(--MDsim-background-modal-color);
}

.drop-area-content {
  flex-direction: column;
  align-items: center;
  gap: 15px;
  display: flex;
}

.attached-files-list {
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  display: flex;
}

.attached-file-item {
  background-color: var(--MDsim-background-box-color);
  border: 1px solid var(--MDsim-highlight-color);
  border-radius: 10px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  display: flex;
}

.file-name {
  color: var(--MDsim-background-font-color);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.file-size {
  color: var(--MDsim-icon-color);
  text-align: right;
  min-width: 60px;
}

.remove-file-btn {
  color: var(--MDsim-error-color);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 24px;
  transition: all .2s;
  display: flex;
}

.remove-file-btn:hover {
  color: var(--MDsim-warning-color);
  transform: scale(1.2);
}

.form-actions {
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
  padding: 10px 0;
  display: flex;
}

.call-info-section {
  background-color: var(--MDsim-background-box-color);
  text-align: center;
  border: 1px solid var(--MDsim-highlight-color);
  border-radius: 15px;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  display: flex;
}

@media (width <= 768px) {
  .contact-tabs {
    flex-direction: column;
    max-width: 100%;
  }

  .contact-tab {
    width: 100%;
  }

  .contact-content {
    padding: 0 10px;
  }

  .file-drop-area {
    padding: 20px;
  }
}

.support-container {
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
}

.support-categories-container {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px;
  display: flex;
}

.support-categories-section {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.support-category {
  background-color: var(--MDsim-background-box-color);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  transition: all .3s;
  display: flex;
}

.support-category:hover {
  background-color: var(--MDsim-background-modal-color);
  box-shadow: 0 0 .5em 0 var(--MDsim-highlight-color);
}

.support-category.selected {
  background-color: var(--MDsim-button-color);
  box-shadow: 0 0 .5em 0 var(--MDsim-highlight-color);
}

.support-content-container {
  width: 100%;
  box-shadow: 0 0 .5em 0 var(--MDsim-background-box-color);
  background-color: var(--MDsim-background-modal-color);
  box-sizing: border-box;
  border-radius: 25px;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.video-info {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.support-content-inner {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 2%;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
}

.support-section-header {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 20px 0;
  display: flex;
}

.support-section-title {
  color: var(--MDsim-text-color);
  text-align: center;
  margin: 0;
  padding: 0;
  font-size: 2.5rem;
  font-weight: bold;
}

.support-section-description {
  color: var(--MDsim-text-secondary-color);
  text-align: center;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.video-gallery {
  flex: 1;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 70vw;
  min-height: 0;
  padding: 10px;
  display: grid;
  overflow-y: auto;
}

.video-item {
  background-color: var(--MDsim-background-box-color);
  box-sizing: border-box;
  border-radius: 15px;
  flex-direction: column;
  align-items: center;
  gap: 2%;
  padding: 15px;
  display: flex;
}

.video-item:hover {
  box-shadow: 0 0 .5em 0 var(--MDsim-highlight-color);
}

.pdf-viewer {
  background-color: var(--MDsim-background-box-color);
  box-sizing: border-box;
  border-radius: 20px;
  flex-direction: column;
  flex: 1;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
}

.pdf-viewer iframe {
  background-color: var(--MDsim-background-modal-color);
}

.support-footer {
  background-color: var(--MDsim-background-modal-color);
  box-sizing: border-box;
  border-radius: 6px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px 20px;
  display: flex;
}

.support-footer > span {
  text-align: center;
  white-space: nowrap;
}

.support-footer-links {
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.support-footer-version {
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
}

.footer-link {
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  transition: color .2s;
}

.footer-link:hover {
  color: var(--MDsim-highlight-color);
  text-decoration: underline;
}

.ValidationPointLabel {
  z-index: 100;
  border-radius: 6px;
  flex-direction: column;
  min-width: 150px;
  display: flex;
  position: absolute;
}

.ValidationPointLabel-header {
  -webkit-user-select: none;
  user-select: none;
  border-bottom: 1px solid #ffffff1a;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  display: flex;
}

.ValidationPointLabel-title {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.ValidationPointLabel-content {
  padding: 12px;
}

.ValidationPointLabel-controls {
  align-items: center;
  gap: 8px;
  display: flex;
}

.ValidationPointLabel-select {
  flex: 1;
  min-width: 0;
}

.ValidationPointLabel-indicator {
  border: 1px solid var(--MDsim-font-color);
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: -5px;
  transform: translateY(-50%);
  box-shadow: 0 2px 8px #0000004d;
}

.region-container {
  background-color: var(--MDsim-background-box-color);
  border-radius: 20px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  overflow: hidden;
}

.region-header {
  box-sizing: border-box;
  height: var(--MDsim-widget-box-title-height-large);
  background-color: var(--MDsim-button-color);
  border-radius: 20px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px;
  display: flex;
  box-shadow: 0 4px 6px #0000001a;
}

.region-title {
  font-size: var(--MDsim-font-size-large);
  font-weight: bold;
}

.validation-confirmation-modal {
  width: 800px;
  height: 500px;
}

.validation-confirmation-content {
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  width: 80%;
  height: 100%;
  padding: 20px 0;
  display: flex;
}

.validation-confirmation-wrapper {
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  height: 100%;
  padding: 0 40px;
  display: flex;
}

.validation-confirmation-header {
  justify-content: center;
  align-items: center;
  gap: 12px;
  display: flex;
}

.validation-confirmation-header .App-warning-icon {
  width: 40px;
  height: 40px;
}

.validation-confirmation-title {
  font-size: var(--MDsim-font-size-title-xlarge);
  color: var(--MDsim-font-color);
  margin: 0;
}

.validation-confirmation-actions {
  justify-content: center;
  margin-top: 10px;
  display: flex;
}

.validation-confirmation-actions button {
  min-width: 120px;
}

.validation-timeline-container {
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 5%;
  display: flex;
}

.validation-timeline-container .App-button {
  min-width: 80px;
}

.validation-timeline-info-text {
  color: var(--MDsim-highlight-color);
}

.region-container.validation-timeline-widget {
  justify-content: flex-start;
  align-items: stretch;
}

.region-container.validation-timeline-widget > .validation-timeline-wrapper {
  flex: auto;
  min-height: 0;
}

.validation-timeline-wrapper {
  box-sizing: border-box;
  flex-direction: column;
  flex: auto;
  gap: 16px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 5%;
  display: flex;
  overflow: hidden;
}

.validation-timeline {
  flex: auto;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
}

.timeline-steps {
  position: relative;
}

.timeline-step {
  z-index: 1;
  gap: 16px;
  margin-bottom: 16px;
  display: flex;
  position: relative;
}

.timeline-step:last-child {
  margin-bottom: 0;
}

.timeline-step:not(:last-child):after {
  content: "";
  background-color: var(--MDsim-icon-color);
  z-index: 0;
  width: 2px;
  height: calc(100% + 16px);
  position: absolute;
  top: 24px;
  left: 11px;
}

.step-circle {
  border: 2px solid var(--MDsim-icon-color);
  background-color: var(--MDsim-background-box-color);
  cursor: pointer;
  z-index: 2;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 0;
  position: relative;
}

.step-circle.selected {
  background-color: var(--MDsim-button-color);
  border-color: var(--MDsim-button-color);
}

.step-circle.validated {
  background-color: var(--MDsim-selected-color);
}

.step-details {
  z-index: 2;
  flex: 1;
  position: relative;
}

.step-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.step-name {
  color: var(--MDsim-font-color);
}

.validation-navigation-buttons {
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.validation-navigation-bar {
  flex-shrink: 0;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-top: auto;
  display: flex;
}

.rerun-button-container {
  justify-content: flex-end;
  margin-top: 16px;
  display: flex;
}

.subtasks-container {
  margin-top: 8px;
}

.subtask-step-content {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.subtask {
  margin-bottom: 4px;
}

.subtask-rerun-section {
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  display: flex;
}

.subtask-rerun-section .App-widget-box-contain {
  border-radius: 0;
}

.subtasks-container label {
  color: var(--MDsim-highlight-color);
}

.subtask-rerun-section-content {
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
  padding: 8px 12px;
  display: flex;
  overflow: hidden;
}

.subtask-rerun-section-content .App-select-parent {
  outline: solid 1px var(--MDsim-highlight-color);
}

.Vertebra-select-info {
  color: var(--MDsim-highlight-color);
  text-align: justify;
  max-width: 100%;
  overflow: hidden;
}

.Vertebra-options {
  box-sizing: border-box;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  padding-inline: 0;
  display: flex;
  overflow: hidden;
}

.Vertebra-options .radio-buttons-flat-options {
  flex-wrap: wrap;
  justify-content: space-around;
}

.spine-filter-container {
  margin-top: 12px;
  margin-bottom: 8px;
}

.spine-filter-container .Display-filter-options {
  background-color: var(--MDsim-background-box-color);
  box-shadow: 0 0 1em 0 var(--MDsim-background-color);
  border-radius: 25px;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 2px;
  display: flex;
}

.spine-filter-container .Display-filter-option {
  color: var(--MDsim-disabled-color);
  cursor: pointer;
  text-align: center;
  font-size: var(--MDsim-font-size-small);
  background: none;
  border: none;
  border-radius: 23px;
  flex: 1;
  padding: 4px 12px;
  transition: all .3s;
}

.spine-filter-container .Display-filter-option.active {
  color: var(--MDsim-background-color);
  background-color: var(--MDsim-highlight-color);
  font-weight: bold;
}

.spine-filter-container .Display-filter-option:hover:not(.active) {
  color: var(--MDsim-font-color);
  background-color: rgba(var(--MDsim-highlight-color-rgb), .1);
}

.rerun-warning {
  color: var(--MDsim-warning-color, #d9534f);
}

.Validation-region-views {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 16px;
  display: flex;
  overflow: auto;
}

.Validation-dx-grid {
  gap: 16px;
  width: 100%;
  height: 100%;
  display: grid;
}

.Validation-dx-grid.single-view {
  grid-template-columns: 1fr;
}

.Validation-dx-grid.dual-view {
  grid-template-columns: 1fr 1fr;
}

.Validation-dx-grid .image-viewer {
  background-color: #000;
  min-height: 400px;
  overflow: hidden;
}

.Validation-visibility-overlay-tools-wrapper {
  z-index: 500;
  position: absolute;
  bottom: 16px;
  left: 16px;
}

.Validation-ct-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  width: 100%;
  height: 100%;
  display: grid;
}

.Validation-ct-grid .image-viewer {
  background-color: #000;
  min-height: 300px;
  overflow: hidden;
}

.Validation-mr-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  width: 100%;
  height: 100%;
  display: grid;
}

.Validation-mr-grid .image-viewer {
  background-color: #000;
  min-height: 300px;
  overflow: hidden;
}

.Validation-region-views .image-viewer {
  transition: opacity .3s ease-in-out;
}

.Validation-region-views .no-view-message {
  color: #666;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 18px;
  display: flex;
}

.Validation-region-tools-wrapper {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-inline: 10px;
  display: flex;
}

.Validation-tools {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  display: flex;
}

@media (width <= 1200px) {
  .Validation-dx-grid.dual-view {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
  }

  .Validation-ct-grid, .Validation-mr-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (width <= 768px) {
  .Validation-region-views {
    padding: 8px;
  }

  .Validation-dx-grid, .Validation-ct-grid, .Validation-mr-grid {
    gap: 8px;
  }

  .Validation-ct-grid, .Validation-mr-grid {
    grid-template-columns: 1fr;
  }
}

.Validation-region-views .view-loader {
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.Validation-drr-popup {
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
  display: flex;
}

.Validation-drr-popup-header {
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  display: flex;
}

.Validation-drr-popup-header .App-icon-button, .Validation-drr-popup .App-select-parent {
  margin: 0;
}

.Validation-remote-viewer-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.Validation-overlay-tools-container {
  z-index: 1000;
  background-color: #000000b3;
  border-radius: 5px;
  flex-direction: column;
  gap: 4px;
  width: fit-content;
  display: flex;
}

.Validation-overlay-tool {
  padding: 4px;
}

.Validation-overlay-option {
  cursor: pointer;
  align-items: center;
  gap: 6px;
  display: flex;
}

.Validation-option-circle {
  box-sizing: border-box;
  border: 2px solid #0000;
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

.Validation-option-circle.active {
  box-shadow: 0 0 6px #0006;
}

.callback-page {
  background: linear-gradient(135deg,
      var(--MDsim-background-color),
      var(--MDsim-background-box-color));
  min-height: 100vh;
  color: var(--MDsim-font-color);
  font-family: var(--MDsim-font-family);
  padding: 32px;
  position: relative;
}

@media (width <= 640px) {
  .callback-page {
    padding: 20px;
  }
}

.component-playground-plain {
  box-sizing: border-box;
  background-color: var(--MDsim-background-modal-color);
  flex-direction: column;
  justify-content: flex-end;
  align-items: end;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
}

.align-preview-controls {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.align-preview-shell {
  border-radius: var(--MDsim-border-radius-xxlarge);
  background-color: var(--MDsim-background-color);
  box-sizing: border-box;
  flex: 1;
  width: 400px;
  padding: 10px;
}

.logout-page {
  background: linear-gradient(135deg,
      var(--MDsim-background-color),
      var(--MDsim-background-box-color));
  min-height: 100vh;
  color: var(--MDsim-font-color);
  font-family: var(--MDsim-font-family);
  padding: 32px;
  position: relative;
}

@media (width <= 640px) {
  .logout-page {
    padding: 20px;
  }
}

.app-popup-overlay {
  z-index: 1000;
  backdrop-filter: blur(10px);
  background: #00000080;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.app-popup-content {
  z-index: 1001;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  overflow: auto;
}

.App-side-bar-container {
  flex-direction: row;
  align-items: center;
  width: auto;
  height: 100%;
  transition: margin .3s ease-in-out;
  display: flex;
}

.App-side-bar-container.left {
  margin-left: 25px;
}

.App-side-bar-container.right {
  flex-direction: row-reverse;
}

.App-side-bar-container.collapsed.left {
  margin-left: 0;
}

.App-side-bar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  height: 100%;
  transition: width .3s ease-in-out, padding .3s ease-in-out, opacity .3s ease-in-out;
  overflow: hidden;
}

.App-side-bar.left {
  box-shadow: 0 0 1em 0 var(--MDsim-background-box-color);
  border-radius: 25px;
}

.App-side-bar.right {
  box-shadow: 0 0 1em 0 var(--MDsim-background-box-color);
  border-radius: 25px 0 0 25px;
}

.App-side-bar.left.small {
  width: var(--MDsim-left-side-bar-width-small);
}

.App-side-bar.left.medium {
  width: var(--MDsim-left-side-bar-width-medium);
}

.App-side-bar.left.large {
  width: var(--MDsim-left-side-bar-width-large);
}

.App-side-bar.right.small {
  width: var(--MDsim-right-side-bar-width-small);
}

.App-side-bar.right.medium {
  width: var(--MDsim-right-side-bar-width-medium);
}

.App-side-bar.right.large {
  width: var(--MDsim-right-side-bar-width-large);
}

.App-side-bar::-webkit-scrollbar {
  display: none;
}

.App-side-bar-container.collapsed .App-side-bar.left {
  opacity: 0;
  width: 0;
  padding: 0;
}

.App-side-bar-tab {
  z-index: 2;
  cursor: pointer;
  background-color: var(--MDsim-background-box-color);
  width: 5px;
  height: 200px;
}

.App-side-bar-container.left .App-side-bar-tab {
  box-shadow: 0 0 1em 0 var(--MDsim-background-box-color);
  border-radius: 0 5px 5px 0;
}

.App-side-bar-container.right .App-side-bar-tab {
  display: none;
}

.sidebar-content {
  opacity: 1;
  flex-direction: column;
  height: 100%;
  transition: opacity .3s ease-in-out;
  display: flex;
  overflow: hidden;
}

.sidebar-content.hidden {
  opacity: 0;
}

.App-logos-container {
  z-index: 100;
  flex-direction: row;
  align-self: start;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding-left: 10px;
  display: flex;
  position: relative;
}

.App-logo-spinesim {
  height: var(--MDsim-navigation-bar-logo-height);
  cursor: pointer;
}

.App-logo-spinesim path {
  fill: var(--MDsim-font-color);
}

.App-logo-separator {
  height: calc(var(--MDsim-navigation-bar-logo-height) + 10px);
}

.App-logo-separator path {
  stroke: var(--MDsim-font-color);
}

.App-logo-hospital {
  height: var(--MDsim-navigation-bar-hospital-height);
  border-radius: 50%;
}

.App-info-container {
  box-sizing: border-box;
  background-color: var(--MDsim-background-box-color);
  border-radius: 12px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 340px;
  height: 420px;
  margin: 0 auto;
  padding: 60px 30px;
  line-height: 1.3;
  display: flex;
  position: relative;
  overflow: hidden;
}

.App-title-windows .App-logo-spinesim {
  width: auto;
  height: 24px;
}

.App-info-container-legal {
  justify-content: center;
  gap: 10px;
  width: min(520px, 92vw);
  padding: 40px 30px;
}

.App-legal-header {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
  display: flex;
}

.App-legal-md-box {
  box-sizing: border-box;
  border: 2px solid var(--MDsim-icon-color);
  font-size: 20px;
  font-weight: var(--MDsim-font-weight-bold);
  border-radius: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 30px;
  line-height: 1;
  display: flex;
}

.App-legal-spinesim {
  font-size: 22px;
  font-weight: var(--MDsim-font-weight-bold);
  line-height: 1;
}

.App-build-info {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  display: flex;
}

.App-link-button {
  cursor: pointer;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
}

.App-info-container .App-styled-link {
  color: var(--MDsim-highlight-color);
}

.App-ce-mark-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.App-ce-mark-content {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 470px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  overflow-x: hidden;
}

.App-legal-grid {
  grid-template-rows: auto auto auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  width: 100%;
  display: grid;
}

.App-legal-grid > * {
  justify-self: stretch;
}

.App-manufacturer-section {
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: grid;
}

.App-icon-manufacturer {
  width: 44px;
  height: 44px;
  color: var(--MDsim-icon-color);
}

.App-manufacturer-text {
  text-align: left;
  line-height: 1.2;
  font-size: var(--MDsim-font-size-medium);
  overflow-wrap: anywhere;
  min-width: 0;
}

.App-date-section {
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: grid;
}

.App-icon-date {
  opacity: .75;
  width: 44px;
  height: 44px;
  color: var(--MDsim-icon-color);
}

.App-date-text {
  font-size: var(--MDsim-font-size-medium);
  overflow-wrap: anywhere;
  min-width: 0;
}

.App-udi-section {
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: grid;
}

.App-icon-udi {
  width: 52px;
  height: 30px;
  color: var(--MDsim-icon-color);
  flex-shrink: 0;
}

.App-udi-text {
  text-align: left;
  line-height: 1.2;
  font-size: var(--MDsim-font-size-medium);
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
}

.App-ref-section {
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: grid;
}

.App-ref-box {
  box-sizing: border-box;
  border: 2px solid var(--MDsim-icon-color);
  width: 52px;
  height: 30px;
  font-size: 20px;
  font-weight: var(--MDsim-font-weight-bold);
  border-radius: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.App-ref-text {
  font-size: var(--MDsim-font-size-medium);
  overflow-wrap: anywhere;
  min-width: 0;
}

.App-ce-marks-row {
  grid-template-columns: auto auto auto;
  justify-content: start;
  align-items: center;
  column-gap: 20px;
  width: auto;
  min-width: 0;
  display: grid;
}

.App-icon-notified-body {
  width: 64px;
  height: 64px;
  color: var(--MDsim-icon-color);
  flex-shrink: 0;
}

.App-icon-book-info {
  width: 66px;
  height: 54px;
  color: var(--MDsim-icon-color);
  flex-shrink: 0;
}

.App-icon-book-info path, .App-icon-book-info rect, .App-icon-book-info circle {
  stroke: currentColor;
  fill: none !important;
}

.App-icon-book-info .App-icon-book-info-i {
  text-anchor: middle;
  font-family: Times New Roman, Times, serif;
  font-size: 28px;
  font-weight: 700;
  fill: currentColor !important;
  stroke: none !important;
}

.App-rx-only {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 30px;
  line-height: 1;
}

.App-process-details {
  text-align: right;
  width: auto;
  font-size: var(--MDsim-font-size-xsmall);
  opacity: .95;
  white-space: nowrap;
  place-self: end;
  line-height: 1;
}

.App-warning {
  text-align: center;
  font-size: var(--MDsim-font-size-small);
}

.App-copyright {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  display: flex;
}

.App-copyright-text {
  font-size: var(--MDsim-font-size-medium);
}

.setting-button {
  cursor: pointer;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.setting-button:hover {
  background-color: var(--MDsim-button-color);
  box-shadow: 0 0 1em 0 var(--MDsim-highlight-color);
}

.setting-button .icon-size-small svg {
  height: var(--MDsim-icon-svg-width-small);
  width: var(--MDsim-icon-svg-height-small);
}

.setting-button .icon-size-default svg {
  height: var(--MDsim-icon-svg-width);
  width: var(--MDsim-icon-svg-height);
}

.setting-button .icon-size-medium svg {
  height: var(--MDsim-icon-svg-height-medium);
  width: var(--MDsim-icon-svg-width-medium);
}

.setting-button .icon-size-large svg {
  height: var(--MDsim-icon-svg-height-large);
  width: var(--MDsim-icon-svg-width-large);
}

.setting-button .icon-size-xlarge svg {
  height: var(--MDsim-icon-svg-height-xlarge);
  width: var(--MDsim-icon-svg-width-xlarge);
}

.setting-button .icon-size-xxlarge svg {
  height: var(--MDsim-icon-svg-height-xxlarge);
  width: var(--MDsim-icon-svg-width-xxlarge);
}

.setting-button .icon-size-xxxlarge svg {
  height: var(--MDsim-icon-svg-height-xxxlarge);
  width: var(--MDsim-icon-svg-width-xxxlarge);
}

.setting-button .icon-size-xxxxlarge svg {
  height: var(--MDsim-icon-svg-height-xxxxlarge);
  width: var(--MDsim-icon-svg-width-xxxxlarge);
}

.user-dropdown {
  background-color: var(--MDsim-background-modal-color);
  z-index: 5000;
  opacity: 0;
  visibility: hidden;
  border-radius: 15px;
  width: 250px;
  transition: opacity .3s, transform .3s, visibility .3s;
  position: absolute;
  top: calc(100% + 30px);
  right: 0;
  overflow: hidden;
  transform: translateY(-20px);
  box-shadow: 0 4px 12px #00000026;
}

.user-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-dropdown:before {
  content: "";
  border-left: 10px solid #0000;
  border-right: 10px solid #0000;
  border-bottom: 10px solid var(--MDsim-background-modal-color);
  opacity: 0;
  transition: opacity .3s, transform .3s;
  position: absolute;
  top: -10px;
  right: 20px;
  transform: translateY(-10px);
}

.user-dropdown.active:before {
  opacity: 1;
  transform: translateY(0);
}

.user-info {
  padding: 16px;
  display: flex;
}

.user-photo {
  background-color: var(--MDsim-highlight-color);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  transition: transform .3s;
  display: flex;
  overflow: hidden;
  transform: scale(.8);
}

.user-dropdown.active .user-photo {
  transform: scale(1);
}

.user-photo svg {
  width: 70px;
  height: 70px;
  fill: var(--MDsim-background-modal-color);
  transition: fill .3s;
}

.user-details {
  opacity: 0;
  margin-left: 16px;
  transition: opacity .3s .1s, transform .3s .1s;
  transform: translateX(-10px);
}

.user-dropdown.active .user-details {
  opacity: 1;
  transform: translateX(0);
}

.user-details h3 {
  color: var(--MDsim-font-color);
  margin: 0;
  font-size: 16px;
}

.user-details .App-text-small .role-label {
  color: var(--MDsim-highlight-color);
  font-weight: bold;
}

.user-details p {
  color: var(--MDsim-icon-color);
  margin: 4px 0 0;
  font-size: 14px;
}

.user-settings {
  flex-direction: column;
  gap: 12px;
  padding: 8px 16px 16px;
  display: flex;
}

.user-settings .setting-button {
  background-color: var(--MDsim-header-color);
  opacity: 0;
  border-radius: 15px;
  height: 30px;
  padding: 8px 12px;
  transition: opacity .3s, transform .3s, background-color .2s, box-shadow .2s;
  transform: translateY(10px);
}

.user-dropdown.active .user-settings .setting-button {
  opacity: 1;
  transform: translateY(0);
}

.user-dropdown.active .user-settings .setting-button:first-child {
  transition-delay: .1s;
}

.user-dropdown.active .user-settings .setting-button:nth-child(2) {
  transition-delay: .2s;
}

.user-dropdown.active .user-settings .setting-button:nth-child(3) {
  transition-delay: .3s;
}

.user-settings .setting-button span {
  color: var(--MDsim-font-color);
  font-size: 14px;
}

.App-user-button-container {
  display: inline-block;
  position: relative;
}

.App-user-button {
  cursor: pointer;
  height: 22px;
  color: var(--MDsim-background-font-color);
  background-color: var(--MDsim-button-color);
  box-shadow: 0 0 1em 0 var(--MDsim-background-box-color);
  border: 0;
  border-radius: 25px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 4px 20px 4px 0;
  font-size: 12px;
  transition: all .3s;
  display: flex;
}

.App-user-button:hover {
  color: var(--MDsim-highlighted-font-color);
  background-color: var(--MDsim-highlight-color);
  box-shadow: 0 0 1em 0 var(--MDsim-highlight-color);
}

.App-user-button-icon {
  background-color: var(--MDsim-highlight-color);
  width: 26px;
  height: 26px;
  box-shadow: 0 0 1em 0 var(--MDsim-background-box-color);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  margin-left: 2px;
  transition: all .3s;
  display: flex;
}

.App-user-button-icon svg {
  width: 26px;
  height: 26px;
  fill: var(--MDsim-button-color);
  transition: fill .3s;
}

.App-user-button:hover .App-user-button-icon {
  background-color: var(--MDsim-button-color);
}

.App-user-button:hover .App-user-button-icon svg {
  fill: var(--MDsim-highlight-color);
}

.App-user-button.expandable {
  padding-right: 30px;
}

.App-user-button-arrow-icon {
  width: 12px;
  height: 12px;
  transition: transform .3s;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.App-user-button-arrow-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--MDsim-icon-color);
}

.App-user-button:hover .App-user-button-arrow-icon svg {
  fill: var(--MDsim-highlighted-font-color);
}

.App-top-bar-container {
  height: var(--MDsim-top-bar-height);
  flex-direction: row;
  align-items: center;
  width: 100%;
  display: flex;
}

.App-top-bar-left-side {
  padding-left: var(--MDsim-top-bar-left-padding);
  align-items: center;
  gap: var(--MDsim-top-bar-gap);
  flex-direction: row;
  flex: 1;
  display: flex;
}

.App-top-bar-right-side {
  justify-content: flex-end;
  align-items: center;
  gap: var(--MDsim-top-bar-right-gap);
  padding-right: var(--MDsim-top-bar-right-padding);
  flex-direction: row;
  flex: .8;
  display: flex;
}

.App-top-bar-action-buttons {
  justify-content: flex-end;
  align-items: center;
  gap: var(--MDsim-action-buttons-gap);
  padding-right: var(--MDsim-top-bar-action-buttons-right-padding);
  display: flex;
}

.App-top-bar-action-buttons .App-icon-button {
  flex-shrink: 0;
}

.top-bar-action-button {
  width: var(--MDsim-top-bar-action-buttons-width);
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.generate-report-popup {
  overflow: hidden;
}

.report-wrapper {
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.report-content {
  padding: var(--MDsim-modal-content-padding);
  padding-bottom: calc(var(--MDsim-modal-content-padding) + 60px);
  justify-content: stretch;
  gap: var(--MDsim-modal-section-gap);
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden auto;
}

.report-section {
  gap: var(--MDsim-modal-element-gap);
  box-shadow: inset 0 0 1em 0 var(--MDsim-background-color);
  padding: var(--MDsim-modal-content-padding);
  border-radius: var(--MDsim-border-radius-large);
  flex-direction: column;
  flex: auto;
  min-height: 0;
  display: flex;
}

.section-header {
  gap: var(--MDsim-modal-section-title-gap);
  flex-direction: column;
  display: flex;
  position: relative;
}

.section-title {
  font-size: var(--MDsim-font-size-title);
  color: var(--MDsim-font-color);
  text-align: start;
  margin: 0;
  font-weight: 600;
}

.section-subtitle {
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-font-color);
  opacity: .8;
  text-align: start;
  margin: 0;
}

.format-selector {
  position: absolute;
  top: 0;
  right: 0;
}

.format-dropdown {
  padding: var(--MDsim-modal-section-title-gap) var(--MDsim-modal-element-gap);
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-font-color);
  border: var(--MDsim-border-width-thin) var(--MDsim-border-style)
    var(--MDsim-button-color);
  border-radius: var(--MDsim-border-radius-small);
  font-size: var(--MDsim-font-size-medium);
  font-family: var(--MDsim-font-family);
  cursor: pointer;
}

.format-dropdown:hover {
  background-color: var(--MDsim-highlight-color);
}

.clinical-notes-textarea, .report-section .App-textarea {
  padding: var(--MDsim-modal-textarea-padding);
  background-color: var(--MDsim-background-box-color);
  color: var(--MDsim-font-color);
  border-radius: var(--MDsim-border-radius-medium);
  font-size: var(--MDsim-font-size-medium);
  font-family: var(--MDsim-font-family);
  flex: 1;
  overflow-y: auto;
}

.clinical-notes-textarea::placeholder, .report-section .App-textarea::placeholder {
  color: var(--MDsim-font-color);
  opacity: .5;
}

.clinical-notes-textarea:focus, .report-section .App-textarea:focus {
  border-color: var(--MDsim-highlight-color);
  outline: none;
}

.content-options {
  gap: var(--MDsim-top-bar-gap);
  margin-top: var(--MDsim-modal-small-gap);
  width: fit-content;
  display: flex;
}

.content-options .radio-buttons-flat-options {
  align-items: center;
  gap: var(--MDsim-modal-input-gap);
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-font-color);
  cursor: pointer;
  display: flex;
}

.radio-option input[type="radio"] {
  width: var(--MDsim-modal-radio-size);
  height: var(--MDsim-modal-radio-size);
  cursor: pointer;
  accent-color: var(--MDsim-highlight-color);
}

.section-checkboxes {
  gap: var(--MDsim-modal-small-gap);
  border-radius: var(--MDsim-border-radius-medium);
  flex-direction: column;
  flex: 0 auto;
  display: flex;
  overflow-y: auto;
}

.align-section {
  gap: var(--MDsim-modal-small-gap);
  background-color: var(--MDsim-button-color);
  border-radius: var(--MDsim-border-radius-xlarge);
  box-sizing: border-box;
  flex-direction: column;
  display: flex;
}

.checkbox-option {
  align-items: center;
  gap: var(--MDsim-modal-small-gap);
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-font-color);
  cursor: pointer;
  background-color: var(--MDsim-button-color);
  height: var(--MDsim-modal-checkbox-option-height);
  padding: 0 var(--MDsim-modal-element-gap);
  border-radius: var(--MDsim-border-radius-xlarge);
  display: flex;
}

.checkbox-option input[type="checkbox"] {
  width: var(--MDsim-modal-checkbox-size);
  height: var(--MDsim-modal-checkbox-size);
  cursor: pointer;
  accent-color: var(--MDsim-highlight-color);
}

.checkbox-option input[type="checkbox"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.plan-tabs {
  gap: var(--MDsim-modal-small-gap);
  padding-left: calc(var(--MDsim-modal-element-gap) * 2);
  margin-bottom: var(--MDsim-modal-small-gap);
  display: flex;
}

.plan-tabs.plan-tabs-empty {
  font-size: var(--MDsim-font-size-small);
  color: var(--MDsim-font-color);
  opacity: .7;
}

.plan-tabs .plan-tab {
  flex: 0 auto;
}

.plan-tab-element {
  background-color: var(--MDsim-transparent-color);
  border: var(--MDsim-border-width-thin) var(--MDsim-border-style)
    var(--MDsim-highlight-color);
  min-width: var(--MDsim-button-width);
}

.plan-tab-element.active {
  background-color: var(--MDsim-background-color);
  color: var(--MDsim-font-color);
}

.annexes-section {
  background-color: var(--MDsim-button-color);
  box-sizing: border-box;
  padding: var(--MDsim-modal-content-padding);
  border-radius: var(--MDsim-border-radius-large);
  flex-direction: column;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.annexes-title {
  font-size: var(--MDsim-font-size-large);
  color: var(--MDsim-font-color);
  text-align: start;
  margin: 0 0 var(--MDsim-modal-element-gap) 0;
  flex-shrink: 0;
  font-weight: 600;
}

.annexes-grid {
  flex-direction: row;
  align-items: flex-start;
  gap: 15px;
  width: 100%;
  height: fit-content;
  display: flex;
  overflow: auto hidden;
}

.annex-thumbnail-item {
  cursor: pointer;
  border: var(--MDsim-border-width-thin) var(--MDsim-border-style) transparent;
  border-radius: var(--MDsim-border-radius-small);
  background: none;
  flex-shrink: 0;
  width: 10vh;
  height: 15vh;
  margin: 0;
  padding: 0;
  transition: border-color .12s, box-shadow .12s, transform .12s;
  position: relative;
}

.annex-thumbnail-item .medical-image-thumbnail {
  width: 100%;
  height: 100%;
}

.annex-thumbnail-item.selected:after {
  content: "✓";
  background: var(--MDsim-highlight-color);
  width: 20px;
  height: 20px;
  color: var(--MDsim-font-color);
  border-radius: 50%;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  display: grid;
  position: absolute;
  top: 6px;
  right: 6px;
}

.annex-thumbnail-item.selected .medical-image-thumbnail {
  box-shadow: 0 4px 16px
    color-mix(in srgb, var(--MDsim-highlight-color) 40%, transparent);
}

.annex-placeholder {
  font-size: clamp(var(--MDsim-font-size-small),
    1.5vw,
    var(--MDsim-font-size-large));
  color: var(--MDsim-font-color);
  opacity: .5;
  font-weight: 600;
}

.report-actions {
  bottom: var(--MDsim-modal-content-padding);
  right: var(--MDsim-modal-content-padding);
  justify-content: flex-end;
  gap: var(--MDsim-modal-button-gap);
  z-index: 10;
  background-color: var(--MDsim-background-modal-color);
  padding: var(--MDsim-modal-element-gap);
  border-radius: var(--MDsim-border-radius-medium);
  display: flex;
  position: fixed;
}

.report-actions .App-button {
  min-width: var(--MDsim-modal-button-min-width);
}

.Navigation-Tab-State-Main {
  height: var(--MDsim-button-height);
  border: 2px solid var(--MDsim-button-color);
  border-radius: 25px;
  flex-direction: row;
  align-items: center;
  width: fit-content;
  display: flex;
}

.Navigation-Tab-State-Single {
  height: var(--MDsim-button-height);
  width: var(--MDsim-top-bar-action-buttons-width);
  background-color: var(--MDsim-button-color);
  cursor: pointer;
  border-radius: 25px;
  justify-content: center;
  align-items: center;
  transition: all .2s;
  display: flex;
}

.Navigation-Tab-State-Single:hover, .Navigation-Tab-State-Single.active {
  background-color: var(--MDsim-selected-color);
  color: var(--MDsim-highlighted-font-color);
}

.Navigation-Tab-State-Tabs {
  height: var(--MDsim-button-height);
  background-color: var(--MDsim-button-color);
  border-radius: 25px;
  flex-direction: row;
  align-items: center;
  display: flex;
}

.Navigation-Tab-State-Tab {
  height: 100%;
  width: var(--MDsim-top-bar-action-buttons-width);
  cursor: pointer;
  border-radius: 25px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all .2s;
  display: flex;
}

.DigitalTwin-State-Title {
  text-align: center;
}

.Navigation-Tab-State-Tab.disabled {
  cursor: not-allowed;
  opacity: .5;
}

.Navigation-Tab-State-Tabs .selected {
  background-color: var(--MDsim-selected-color);
  color: var(--MDsim-highlighted-font-color);
  box-shadow: 0 0 10px var(--MDsim-background-color);
}

.Navigation-Tab-State-Header {
  cursor: pointer;
  width: var(--MDsim-top-bar-action-buttons-width);
  transition: opacity .2s;
}

.Navigation-Tab-State-Header.disabled {
  cursor: not-allowed;
  opacity: .5;
}

.app-popup-content:has(.onboarding-popup) {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
}

.onboarding-popup {
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding: 24px;
  display: flex;
}

.onboarding-popup-content {
  background-color: var(--MDsim-background-modal-color);
  box-sizing: border-box;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 40px;
  display: flex;
  overflow-y: auto;
}

.onboarding-popup-inner {
  width: 100%;
  max-width: 500px;
  color: var(--MDsim-font-color);
  font-family: var(--MDsim-font-family);
  flex-direction: column;
  gap: 30px;
  display: flex;
}

.onboarding-welcome-section {
  text-align: center;
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.onboarding-title {
  color: var(--MDsim-font-color);
  margin: 0;
  font-size: 30px;
  font-weight: 600;
}

.onboarding-description {
  color: var(--MDsim-font-color);
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  font-size: 18px;
  display: flex;
}

.onboarding-acceptance-section {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.onboarding-instruction-text {
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-disabled-color);
  text-align: center;
  margin: 0 auto;
}

.onboarding-link-button {
  color: var(--MDsim-highlight-color);
  cursor: pointer;
  font-size: inherit;
  transition: var(--MDsim-transition-all, all .3s ease);
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font-family: inherit;
  text-decoration: underline;
}

.onboarding-link-button:hover {
  color: var(--MDsim-button-color);
  opacity: .8;
}

.onboarding-checkboxes {
  gap: var(--MDsim-modal-small-gap, 15px);
  border-radius: var(--MDsim-border-radius-medium, 10px);
  flex-direction: column;
  width: 100%;
  margin: 12px auto;
  display: flex;
}

.onboarding-checkboxes .checkbox-option {
  align-items: center;
  gap: var(--MDsim-modal-small-gap, 15px);
  width: 100%;
  font-size: var(--MDsim-font-size-medium);
  color: var(--MDsim-font-color);
  cursor: pointer;
  min-height: var(--MDsim-modal-checkbox-option-height, 50px);
  border-radius: var(--MDsim-border-radius-xlarge, 25px);
  transition: var(--MDsim-transition-all, all .3s ease);
  background-color: #0000;
  padding: 0;
  display: flex;
}

.onboarding-checkboxes .checkbox-option:hover {
  background-color: #0000;
}

.onboarding-checkboxes .checkbox-option input[type="checkbox"] {
  width: var(--MDsim-modal-checkbox-size, 20px);
  height: var(--MDsim-modal-checkbox-size, 20px);
  cursor: pointer;
  accent-color: var(--MDsim-highlight-color);
  flex-shrink: 0;
}

.onboarding-checkboxes .checkbox-option span {
  color: var(--MDsim-disabled-color);
  flex: 1;
  line-height: 1.4;
}

.onboarding-checkboxes .checkbox-option .highlight-text {
  color: var(--MDsim-font-color);
  font-weight: bold;
}

.onboarding-action-section {
  justify-content: center;
  width: 100%;
  padding-top: 10px;
  display: flex;
}

.onboarding-action-section .App-button {
  width: 100% !important;
  max-width: 100% !important;
}

.onboarding-action-section .App-button:disabled {
  background-color: var(--MDsim-disabled-color);
  cursor: not-allowed;
  opacity: .6;
}

.App-page {
  height: var(--MDsim-main-layout-height);
  width: var(--MDsim-main-layout-width);
  grid-template-rows: var(--MDsim-grid-template-rows);
  grid-template-columns: var(--MDsim-grid-template-columns);
  row-gap: var(--MDsim-app-grid-row-gap);
  column-gap: var(--MDsim-app-grid-column-gap);
  grid-template-areas: "topbar topbar topbar"
                       "sidebar placeholder rightsidebar"
                       "footer footer footer";
  display: grid;
  overflow: hidden;
}

.App-topBar {
  margin: 0 var(--MDsim-top-bar-margins);
  grid-area: topbar;
}

.App-sidebar {
  margin: calc(-1 * var(--MDsim-sidebar-padding));
  padding: var(--MDsim-sidebar-padding);
  height: var(--MDsim-content-area-height);
  box-sizing: border-box;
  grid-area: sidebar;
  overflow: hidden;
}

.App-placeholder {
  box-sizing: border-box;
  grid-area: placeholder;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: auto;
}

.App-rightsidebar {
  margin: calc(-1 * var(--MDsim-sidebar-padding));
  padding: var(--MDsim-sidebar-padding);
  height: var(--MDsim-content-area-height);
  box-sizing: border-box;
  grid-area: rightsidebar;
  position: relative;
  overflow: hidden;
}

.App-footer {
  grid-area: footer;
  position: relative;
}

.no-permission-container {
  background-color: var(--MDsim-background-color);
  height: 100%;
  color: var(--MDsim-font-color);
  font-family: var(--MDsim-font-family);
  justify-content: center;
  align-items: center;
  padding: 2rem;
  display: flex;
}

.no-permission-content {
  text-align: center;
  background-color: var(--MDsim-background-box-color);
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  padding: 2rem;
  box-shadow: 0 0 1em #0000001a;
}

.no-permission-title {
  color: var(--MDsim-selected-color);
  margin-bottom: 1rem;
  font-size: 3rem;
  font-weight: bold;
}

.no-permission-subtitle {
  font-size: 1.5rem;
  font-weight: semibold;
  color: var(--MDsim-icon-color);
  margin-bottom: 1.5rem;
}

.no-permission-message {
  color: var(--MDsim-font-color);
  margin-bottom: 2rem;
  font-size: 1rem;
}

.no-permission-button-wrapper {
  margin-top: 2rem;
}

[data-theme="dark"] .no-permission-container {
  background-color: var(--MDsim-background-color);
  color: var(--MDsim-font-color);
}

[data-theme="dark"] .no-permission-content {
  background-color: var(--MDsim-background-box-color);
}

.not-found-container {
  background-color: var(--MDsim-background-color);
  height: 100%;
  color: var(--MDsim-font-color);
  font-family: var(--MDsim-font-family);
  justify-content: center;
  align-items: center;
  padding: 2rem;
  display: flex;
}

.not-found-content {
  text-align: center;
  background-color: var(--MDsim-background-box-color);
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  padding: 2rem;
  box-shadow: 0 0 1em #0000001a;
}

.not-found-title {
  color: var(--MDsim-selected-color);
  margin-bottom: 1rem;
  font-size: 6rem;
  font-weight: bold;
}

.not-found-subtitle {
  font-size: 2rem;
  font-weight: semibold;
  color: var(--MDsim-icon-color);
  margin-bottom: 2rem;
}

.not-found-message {
  color: var(--MDsim-font-color);
  margin-bottom: 2rem;
  font-size: 1rem;
}

.not-found-button-wrapper {
  justify-content: center;
  display: flex;
}

.not-found-button, .not-found-nav-button {
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-highlighted-font-color);
  cursor: pointer;
  border: none;
  border-radius: 4px;
  align-items: center;
  margin: .5rem;
  padding: .5rem 1rem;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color .3s;
  display: inline-flex;
}

.not-found-button:hover, .not-found-nav-button:hover {
  background-color: var(--MDsim-highlight-color);
}

.not-found-button svg {
  width: var(--MDsim-icon-svg-width);
  height: var(--MDsim-icon-svg-height);
  margin-right: .5rem;
}

.not-found-nav {
  margin-top: 2rem;
}

.not-found-nav-buttons {
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
  display: flex;
}

[data-theme="dark"] .not-found-container {
  background-color: var(--MDsim-background-color);
  color: var(--MDsim-font-color);
}

[data-theme="dark"] .not-found-content {
  background-color: var(--MDsim-background-box-color);
}

[data-theme="dark"] .not-found-button, [data-theme="dark"] .not-found-nav-button {
  background-color: var(--MDsim-button-color);
  color: var(--MDsim-highlighted-font-color);
}

[data-theme="dark"] .not-found-button:hover, [data-theme="dark"] .not-found-nav-button:hover {
  background-color: var(--MDsim-highlight-color);
}

.server-error-container {
  background-color: var(--MDsim-background-color);
  height: 100%;
  color: var(--MDsim-font-color);
  font-family: var(--MDsim-font-family);
  justify-content: center;
  align-items: center;
  padding: 2rem;
  display: flex;
}

.server-error-content {
  text-align: center;
  background-color: var(--MDsim-background-box-color);
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  padding: 2rem;
  box-shadow: 0 0 1em #0000001a;
}

.server-error-code {
  color: var(--MDsim-selected-color);
  margin-bottom: .5rem;
  font-size: 6rem;
  font-weight: bold;
  line-height: 1;
}

.server-error-title {
  color: var(--MDsim-icon-color);
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: bold;
}

.server-error-subtitle {
  font-size: 1.5rem;
  font-weight: semibold;
  color: var(--MDsim-icon-color);
  margin-bottom: 1.5rem;
}

.server-error-message {
  color: var(--MDsim-font-color);
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
}

.server-error-countdown {
  color: var(--MDsim-icon-color);
  margin-bottom: 1.5rem;
  font-size: .9rem;
  font-style: italic;
}

.server-error-button-wrapper {
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 2rem;
  display: flex;
}

@media (width <= 768px) {
  .server-error-container {
    padding: 1rem;
  }

  .server-error-content {
    padding: 1.5rem;
  }

  .server-error-code {
    font-size: 4rem;
  }

  .server-error-title {
    font-size: 1.5rem;
  }

  .server-error-subtitle {
    font-size: 1.2rem;
  }

  .server-error-message {
    font-size: .9rem;
  }

  .server-error-button-wrapper {
    flex-direction: column;
    gap: .75rem;
  }
}

@media (width <= 480px) {
  .server-error-code {
    font-size: 3rem;
  }

  .server-error-title {
    font-size: 1.25rem;
  }

  .server-error-subtitle {
    font-size: 1rem;
  }
}

[data-theme="dark"] .server-error-container {
  background-color: var(--MDsim-background-color);
  color: var(--MDsim-font-color);
}

[data-theme="dark"] .server-error-content {
  background-color: var(--MDsim-background-box-color);
  box-shadow: 0 0 1em #0000004d;
}

[data-theme="dark"] .server-error-code {
  color: var(--MDsim-selected-color);
}

[data-theme="dark"] .server-error-title, [data-theme="dark"] .server-error-subtitle {
  color: var(--MDsim-icon-color);
}

[data-theme="dark"] .server-error-message, [data-theme="dark"] .server-error-countdown {
  color: var(--MDsim-font-color);
}

:root {
  --MDsim-navigation-bar-height: 70px;
  --MDsim-navigation-bar-tab-height: 5px;
  --MDsim-navigation-bar-tab-width: 100px;
}

.App-navigation-bar-container {
  z-index: 2;
  width: 100%;
  height: calc(var(--MDsim-navigation-bar-height) + var(--MDsim-navigation-bar-tab-height));
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
}

.App-navigation-bar-container.collapsed {
  height: var(--MDsim-navigation-bar-tab-height);
}

.App-navigation-bar {
  background-color: var(--MDsim-background-box-color);
  height: var(--MDsim-navigation-bar-height);
  box-shadow: 0 var(--MDsim-navigation-bar-tab-height) 1em -5px var(--MDsim-background-box-color);
  z-index: 3;
  border-radius: 0 0 25px 25px;
  flex-direction: row;
  width: 100%;
  display: flex;
  position: relative;
}

.App-navigation-bar.collapsed {
  height: 0;
}

.App-navigation-bar-tab {
  height: var(--MDsim-navigation-bar-tab-height);
  width: var(--MDsim-navigation-bar-tab-width);
  background-color: var(--MDsim-background-box-color);
  box-shadow: 0 0 1em 0 var(--MDsim-background-box-color);
  z-index: 2;
  cursor: pointer;
  border-radius: 0 0 5px 5px;
  position: relative;
}

.App-navigation-bar-tab:hover {
  box-shadow: 0 0 1em 0 var(--MDsim-highlight-color);
}

.App-navigation-bar-left-side {
  height: var(--MDsim-navigation-bar-height);
  flex-direction: row;
  flex: 1;
  align-self: start;
  align-items: center;
  gap: 12px;
  margin-left: 10px;
  display: flex;
}

.App-navigation-bar-right-side {
  height: var(--MDsim-navigation-bar-height);
  flex-direction: row;
  align-self: start;
  align-items: center;
  gap: 12px;
  margin-right: 10px;
  display: flex;
}

.App-navigation-bar.collapsed .App-navigation-bar-right-side, .App-navigation-bar.collapsed .App-navigation-bar-left-side {
  visibility: hidden;
  height: 0;
}

.App-navigation-bar-trick {
  visibility: hidden;
}

.App-button-navBar {
  height: var(--MDsim-form-controls-height);
  text-align: center;
  cursor: pointer;
  color: var(--MDsim-background-font-color);
  background-color: var(--MDsim-button-color);
  box-shadow: 0 0 1em 0 var(--MDsim-background-box-color);
  border: 0;
  border-radius: 25px;
  padding: 4px 20px;
  font-size: 12px;
  text-decoration: none;
}

.App-button-navBar:hover, .App-button-navBar:active {
  color: var(--MDsim-highlighted-font-color);
  background-color: var(--MDsim-highlight-color);
  box-shadow: 0 0 1em 0 var(--MDsim-highlight-color);
}

.colorCircles {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px;
  display: flex;
}

.circle {
  border: 1px solid var(--MDsim-background-box-color);
  background-color: attr(data-color-variable);
  width: 50px;
  height: 50px;
  box-shadow: 0 0 1em 0 var(--MDsim-background-box-color);
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.fontColor {
  background-color: var(--MDsim-font-color);
}

.iconColor {
  background-color: var(--MDsim-icon-color);
}

.selectedColor {
  background-color: var(--MDsim-selected-color);
}

.highlightColor {
  background-color: var(--MDsim-highlight-color);
}

.buttonColor {
  background-color: var(--MDsim-button-color);
}

.rowColor {
  background-color: var(--MDsim-row-color);
}

.functionColor {
  background-color: var(--MDsim-function-color);
}

.headerColor {
  background-color: var(--MDsim-header-color);
}

.backgroundBoxColor {
  background-color: var(--MDsim-background-box-color);
}

.backgroundColor {
  background-color: var(--MDsim-background-color);
}

.highlightedFontColor {
  background-color: var(--MDsim-highlighted-font-color);
}

.errorColor {
  background-color: var(--MDsim-error-color);
}

.typography span {
  display: block;
}

.controls-array {
  flex-direction: column;
  display: flex;
}

.control-item {
  flex-direction: row;
  margin-bottom: 10px;
  padding: 10px;
  display: flex;
}

.control-text {
  width: 300px;
}

.control-sample {
  flex: auto;
}

.test {
  background-color: brown;
  height: 70px;
}

.grid-layout {
  background-color: var(--MDsim-background-box-color);
}

.grid-layout div {
  background-color: var(--MDsim-background-color);
}

.remoteView {
  width: 100%;
  height: 100%;
  max-height: 500px;
  position: relative;
  overflow: hidden;
}

.remoteView img {
  pointer-events: none;
  z-index: 1 !important;
}

.control-icon-button {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.App-popup-demo {
  background-color: var(--MDsim-background-box-color);
  border-radius: 25px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 500px;
  display: flex;
}