:root {
  --label-font-size: 11pt;
  --annotation-font-size: 10pt;
  --side-column-title-font-size: 10pt;
  --main-width: 760px;
  --main-description-width: 680px;
  --side-width: 400px;
  --side-description-width: 360px;
  --all-width: 1500px;
  --content-width: 1160px;
  --toolbar-width: 284px;
  --margin-vertical-main: 20px;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

/*
#container-main {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
*/


.resize-button-container {
  float:left;
}

body {
  margin-left: 0px;
  margin-right: 0px;
}

#container-all {
  width: var(--all-width);
  margin-left: auto;
  margin-right: auto;
}

#container-main {
  width: var(--content-width);
  padding-left: var(--toolbar-width);
  margin-left: 30px;
}

#container-toolbar {
  width: var(--toolbar-width);
  height: 100%;
  display: inline;
  padding-left: 8px;
  padding-right: 8px;
}

.module-description-container {
  width:var(--content-width);
}

.main-description-container {
  float:left;
  padding-left: 60px;
  padding-right: 10px;
  max-width:var(--main-description-width);
}

#overview-description-container {
  padding-left: 30px;
}

.module-content-container {
  clear:both;
}

.module-heading-container {
  border-top: 1px solid #000; 
  width:var(--content-width);
  text-align: center;
}

.main-container {
  float:left;
  width:var(--main-width);
}

.side-container {
  float:right;
  padding-left: 20px;
  padding-right: 20px;
  width: var(--side-description-width);
}

.hidden-element-select {
  max-width: 78px;
}

.noselect, .side-column-title, .col-header-text, .tick, .label {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
  }

.show-less, .show-more {
  font-style: italic;
  cursor: pointer;
}

.device-expand, .phase-label, .instrument-label, .device-label, .col-header-text {
  cursor: pointer;
}

.side-column-title {
  font-size: var(--side-column-title-font-size);
  fill: grey;
}

.module-description {
  margin-top: 0px;
  margin-bottom: 5px;
  fill: grey;
}

.label {
  font-family: Tahoma, sans-serif;
  font-size: var(--label-font-size);
}

.derived-label, .chart-label {
  font-size: var(--annotation-font-size);
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
}

label {
  font-family: Tahoma, sans-serif;
}

text {
  font-family: Tahoma, sans-serif;
}

.module-container {
  margin-bottom: 10px;
}

.module-heading {
  font-size: 24pt;
  margin-top: 5px;
  margin-bottom: 10px;
}

.brush-handle {
  cursor: ew-resize;
}

.highlight-handle.horizontal {
  cursor: ew-resize;
}

.highlight-handle.vertical {
  cursor: ns-resize;
}

.highlight-rect {
  fill: rgba(255, 255, 51, 0.4);
  stroke: rgb(209, 209, 0, 0.6);
  stroke-width: 1;
}

.highlight-rect.former {
  fill: none;
  /*fill: rgba(255, 255, 51, 0);*/
}

.highlight-handle.former {
  display: none;
}


.brush-rect {
  fill: rgb(209, 209, 209);
  stroke: rgb(70, 70, 70);
  stroke-width: 1;
  opacity: 0.4;
}

.element-rect {
  fill: rgba(240, 240, 240, 0.8);
  stroke: rgb(200, 200, 200);
  stroke-width: 1;
}

.element-rect:hover {
  fill: rgba(200, 200, 200, 0.8);
}

select {
  /*box-shadow: rgba(45, 35, 66, 0.185) 0 2px 0px,rgba(45, 35, 66, 0.082) 0 0px 3px -3px,#d6d6e749 0 -3px 0 inset;*/
  transition: box-shadow .15s,transform .15s;
  will-change: box-shadow,transform;
}

select:focus {
  box-shadow: rgba(45, 35, 66, 0.185) 0 2px 0px;
}

select:hover {
  box-shadow: rgba(45, 35, 66, 0.185) 0 2px 0px;
  transform: translateY(-1px);
}

/* CSS */
button {
  align-items: center;
  appearance: none;
  background-color: #FCFCFD;
  border-radius: 2px;
  border-width: 1px;
  box-shadow: rgba(45, 35, 66, 0.185) 0 2px 0px,rgba(45, 35, 66, 0.082) 0 0px 3px -3px,#d6d6e749 0 -3px 0 inset;
  box-sizing: border-box;
  /*color: #36395A;*/
  cursor: pointer;
  /*display: inline-flex; */
  /*font-family: "JetBrains Mono",monospace;*/
  /*height: 48px;*/
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  /*padding-left: 10px;
  padding-right: 10px;*/
  position: relative;
  /*text-align: left;*/
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  /*font-size: 18px;*/
}

#zoom-in-button, #align-point-select {
  width: 66px;
}

#filter-remove-button,#filter-keep-button, #reset-view-button, #apply-alignment-button {
  margin-top: 4px;
  width: 244px;
}

#zoom-out-button,#reset-highlight-button {
  width: 120px;
}

#align-phase-select, #brush-mode-select, #surgery-type-select, #derived-scale-select {
  width: 175px;
}

button:focus {
  box-shadow: rgba(45, 35, 66, 0.185) 0 2px 0px,rgba(45, 35, 66, 0.082) 0 7px 3px -3px,#D6D6E7 0 -3px 0 inset;
}

button:hover {
  box-shadow: rgba(45, 35, 66, 0.185) 0 2px 0px,rgba(45, 35, 66, 0.082) 0 7px 3px -3px,#D6D6E7 0 -3px 0 inset;
  transform: translateY(-1px);
}

button:active {
  box-shadow: #D6D6E7 0 3px 7px inset;
  transform: translateY(1px);
}

.module-hide-button, .module-reveal-button {
  -ms-transform: translateY(-25%);
  transform: translateY(-25%);
  color:grey;
  font-size: 12pt;
}

.tool-block {
  padding-bottom: 18px;
  margin-bottom: 14px;
  padding-top: 1px;
  padding-left: 5px;
  background-color: rgb(245, 245, 245);
  border-radius: 5px;
}

.tool-description {
  fill: grey;
  margin-top: 6px;
  margin-bottom: 0px;
}

#retrieve-procedures-description {
  margin-top: 14px;
  padding-left: 13px;
}

.tool-buttons-container {
  padding-left: 13px;
  padding-top: 8px;
}

.description-highlight {
  text-decoration: underline;
  font-size: 12pt;
}

.description-highlight:hover {
  box-shadow: rgba(45, 35, 66, 0.185) 0 2px 0px,rgba(45, 35, 66, 0.082) 0 0px 3px -3px,#d6d6e749 0 -3px 0 inset;
}

.sticky {
  position: fixed; /*To make un-sticky, comment here and the body of the function f.updateOffsetDivHeight*/
  background-color: rgb(225, 225, 225);
  z-index: 99;
  padding: 4px;
}