/* REDESIGN STYLES START*/
:root {
  --Viewer-BG: #000;
  --Primary-Surface: #1C1C1E;
  --Viewer-Border: #3D3C41;
  --Viewer-Surface: #1C1C1E;
  --Viewer-Hover: #3F3F3F;
  --Brand-Primary: #00C5A0;
  --Viewer-Gray-Light: #949396;
  --Viewer-on-Surface: #2C2C2E;
  --Viewer-Accent: #003228;
  --Brand-Palette-green-700: #008C72;
  --Brand-Palette-green-100: #B0EDE2;
  --Viewer-Pressed: #00241D
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden; /* Prevent body scrolling */
  
  background: var(--Viewer-BG,#000);
  color: var(--Primary-White, #FFF);
  font-family: 'Inter';
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.layout {
  position: relative;
  display: flex;
  height: calc(100vh - 80px); /* full height minus navbar */
  width: 100vw;
  padding: 0 16px 16px 16px;
  align-items: flex-start;
  gap: 1rem;
  flex-shrink: 0;
}

/* SIDEBAR START */
.sidebar {
  width: 158px;
  height: 100%;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem
}

.thumbnail-container{
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* scroll only vertically if needed */
    align-items: flex-start;
    gap: 1rem;
    scrollbar-color: var(--Viewer-Border) var(--Viewer-BG);
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to bottom, 
    transparent 0px, 
    black 10px, 
    black calc(100% - 10px), 
    transparent 100%);
  mask-image: linear-gradient(to bottom, 
    transparent 0px, 
    black 10px, 
    black calc(100% - 10px), 
    transparent 100%);
}

/* Study Tabs Styling */
.study-tabs-container {
    display: none; /* Hidden by default, shown when multiple studies exist */
    padding: 12px 16px;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--Viewer-Surface, #1C1C1E);
    border-bottom: 1px solid var(--Viewer-Border, #3D3C41);
    border-radius: 16px 16px 0 0;
}

.study-tabs-container.active {
    display: flex;
}

.study-tab {
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.study-tab:hover {
    opacity: 0.8;
}

.study-tab.active {
    border: 2px solid var(--Brand-Primary, #00C5A0);
}

.study-tab-date {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.study-tab-patient {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.9;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.thumbnail-card{
    position: relative;
    background: var(--Primary-Surface,#1C1C1E);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 0 4px;
    cursor: pointer;
    max-width: 132px;
    border: 2px solid transparent;
}


.thumbnail-title{
    font-size: 12px;
    padding: 8px 4px 0 4px;
}

.thumbnail-data{
    font-size: 12px;
    padding: 8px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.data-detail{
    display: flex;
    gap: 4px;
}

.thumbnail-image{
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    background: var(--Viewer-BG,#000)
}

.thumbnail-image canvas{
    border-radius: 8px;
}

.thumbnail-card:hover .thumbnail-overlay {
  opacity: 1;
}

.thumbnail-card:hover {
  border: 2px solid var(--Viewer-Border, #3D3C41);
}

.thumbnail-card:hover .thumbnail-title{
  color: var(--Brand-Primary, #00C5A0);
}



.thumbnail-overlay {
  position: absolute;
  inset: 0;
  /* background: rgba(0,0,0,0.6); */
  color: white;
  border-radius: 8px;
  pointer-events: auto;
  opacity: 0;
  
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 8px;

}

.profileDropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
  border-radius: 8px;
  background: var(--Viewer-on-Surface, #2C2C2E);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.80);
  padding: 8px;
  bottom:50px;
}


.profileDropdown-content a{
    display: flex;
    padding: 8px 12px 8px 8px;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--Viewer-White, #FFF);
    font-size:12px;
}

.profileDropdown-content a:hover{
    border-radius: 8px;
    background: var(--Viewer-Accent, #003228)
}

.action-container{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* SIDEBAR END */

/* BUTTONS START */
/* THUMBNAIL BUTTONS */

.thumbnail-overlay button{
    border-radius: 8px;
    background: var(--Viewer-Accent, #003228);;
    border: none;
    color: var(--Viewer-White, #FFF);
    width: 100%;
    padding: 8px;
    display: flex;
    gap: 4px;
    cursor: pointer;
    font-size: 12px;
}

.thumbnail-overlay button:hover{
     background: var(--Brand-Palette-green-900, #005343);
}

.thumbnail-overlay button:active{
     background: var(--Viewer-Pressed, #00241D);
}

/* ACTION BUTTONS */

.action-btn{
    width: 128px;
    display: flex;
    padding:  8px;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    background: var(--Viewer-Surface, #1C1C1E);
    border: 1px solid transparent;
    color: var(--Viewer-White, #FFF);
    font-size: 12px;
    cursor: pointer;
}

.action-btn div{
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-btn:hover{
  background-color: var(--Viewer-Hover, #3F3F3F);
}

.action-btn:focus{
    border-radius: 8px;
    border: 1px solid var(--Brand-Palette-green-700, #008C72);
    background: var(--Viewer-Accent, #003228);
}

/* MODAL BUTTONS */
.close-btn, .download-btn {
    border-radius: 8px;
    border: none;
    background: var(--Viewer-on-Surface, #2C2C2E);
    display: flex;
    padding: 8px 12px 8px 8px;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: #fff;
}

.close-btn:hover, .download-btn:hover{
   background: var(--Viewer-Hover);
}

.download-btn{
  white-space: nowrap;
}

.link-btn{display: inline;}

.link-btn:hover{
    color: #fff; 
    text-decoration: none;
}

/* TOOLBAR BUTTONS */
.tool{
    display: flex;
    padding: 6px;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    border:2px solid transparent;
    box-sizing: border-box;
    background: var(--Primary-Surface, #1C1C1E);
    cursor: pointer;
    position: relative;
}

.tool:hover, .highlighted-tool-group .tool:hover {
  background: var(--Viewer-Accent, #003228);
}

.tool:active, .highlighted-tool-group  .tool:active {
  background: var(--Viewer-Pressed, #00241D);
}

.highlighted-tool-group  .tool{
  background: var(--Viewer-on-Surface, #2C2C2E);
}

.tool.active .icon{
  color: var(--Brand-Palette-green-100, #B0EDE2);
}

.tool.active, .highlighted-tool-group  .tool.active {
  background: var(--Viewer-Accent, #003228);
  border: 2px solid var(--Brand-Palette-green-700, #008C72);
}

/* Local button drag-drop styles */
#localBtn {
  min-width: 80px;
  padding: 6px 12px;
  justify-content: center;
}

#localBtn.drag-over {
  background: var(--Viewer-Accent, #003228);
  border: 2px dashed var(--Brand-Palette-green-500, #00C5A0);
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

#localBtn.processing {
  opacity: 0.6;
  pointer-events: none;
}

/* BUTTONS END */

/* Main content */
.main-content {
  flex: 1 0 0;
  align-self: stretch;
  overflow: hidden; /* Prevent vertical scroll */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 16px;
  border: 1px solid var(--Viewer-Border, #3D3C41);
  background: var(--Viewer-BG, #000);
}

.patient-banner{
    border-radius: 8px 8px 0 0;
    background: var(--Viewer-Surface, #1C1C1E);
    display: flex;
    padding: 12px;
    align-items: center;
    gap: 16px;
    font-size:  12px;
}

.patient-data-label{
  color: #B7B7B7;
}

.patient-data{
    display: flex;
    gap:4px;
}
/* MODALS */

.mdl {
  display: none; 
  position: fixed;
  z-index: 3000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; 
  background-color: rgba(0, 0, 0, 0.5); 
}

.mdl-content {
  display: flex;
  flex-direction: column;
  background: var(--Viewer-Surface, #1C1C1E);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#examsHistoryModal .mdl-content, #drawListModal .mdl-content{
    border-radius: 16px;
    border: 1px solid var(--Viewer-Border, #3D3C41);
    margin: 10% auto;
    width: 1000px;
}


.mdl-title{
  display: flex;
  align-items: center;
  gap: 4px
}

.mdl-header-details{
    display: flex;
    align-items: center;
    gap: 12px;
}

.mdl-header{
  display: flex;
  justify-content: space-between;
  padding: 16px;
}

.mdl-footer{
  display: flex;
  justify-content: space-between;
  padding: 16px;
  align-items: center;
}

.seperator{
    color: #2C2C2E;
}

#tagsModal input, #drawListModal input{
    padding: 8px;
    border-radius: 8px;
    background: var(--Viewer-on-Surface, #2C2C2E);
    border: none;
    color: #fff;
}

#drawListModal input[type="color"]{
    padding: 0px;
}

#tagsModal .highlighted{
    background: var(--Brand-Palette-green-800, #006C58);
}

#tagsModal .mdl-content{
    height: 100%
}

#tagsModal .mdl-body{
    flex: 1 1 auto;
    background-color: var(--Viewer-Surface, #1C1C1E);;
}

#helpModal .mdl-body{
    padding: 16px;
}

#helpModal p{
    margin: 0 0 10px;
}

#helpModal h1, 
#helpModal h2, 
#helpModal h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

#table-search::placeholder{
    color: #fff;
}


/* TABLES */

#examsHistoryModal table,  #drawListModal table{
  margin: 16px 0 24px 0;
  width: 100%;
  border-collapse: collapse;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}
 table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border-bottom: 1px solid var(--Viewer-Border);
  padding: 16px;
  text-align: left;
}

#examsHistoryModal th {
  color: #B7B7B7;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.55px;
}

#gridTable td{
    background: #1c1c1e;
    border-radius: 4px;
    border: 0.5px solid transparent;
}

#gridTable{
    border-collapse:separate;
}



/* HEADER START */
.navbar {
  height: 80px;
  color: white;
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 1rem;
}

.logo{
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar{
    display: flex;
    align-items: center;
    gap: 24px;  
    overflow-x: auto;
    scrollbar-color: var(--Viewer-Border) var(--Viewer-BG);
    scrollbar-width: thin;
}

.tool-group-buttons{
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.tool-group{
  display: flex;
  flex-direction: column;
}

.tool-group-text{
  --Brand-Primary: #00C5A0;
  color: var(--Viewer-Gray-Light, #949396);
  font-size: 12px;
  text-align: center;
}

.icon{
    display: flex;
    width: 1.3rem;
    height: 1.3rem;
    padding: 2px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    color: var(--Viewer-White, #FFF);;
}


#tooltiptext {
  display: none;
  z-index: 1000;
  position: fixed;
  font-family: Inter;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 4px;
  background: var(--Viewer-Hover, #3F3F3F);
  box-shadow: 0 4px 16px 0 #000;
  color: var(--Viewer-White, #FFF);
  white-space: nowrap;
  pointer-events: none;
}

#tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--Viewer-Hover, #3F3F3F) transparent;
}

/* .tool:hover .tooltiptext {
  visibility: visible;
} */

.highlighted-tool-group {
  display: flex;
  gap: 1rem;
  background: var(--Viewer-Surface, #1C1C1E);
  border-radius: 12px;
  padding: 8px;
}

.tool:disabled{
    opacity: 0.25;
    cursor: not-allowed;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
  border-radius: 8px;
  background: var(--Viewer-on-Surface, #2C2C2E);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.80);
  padding: 8px;
  top:50px;
}

.toolsDropdown-content{
    position: absolute;
    z-index: 1;
    border-radius: 8px;
    background: var(--Viewer-on-Surface, #2C2C2E);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.80);
    padding: 8px;
    top: 50px;
}

/* Wider width for tools with multiple controls */
.wl.toolsDropdown-content,
.draw.toolsDropdown-content,
.filter.toolsDropdown-content {
    min-width: 300px;
}

/* Filter controls row - horizontal layout for filter dropdown + actions */
.filterControlsRow {
    display: flex;
    gap: 8px;
    align-items: center;
}

.filterWrapper {
    flex: 0 0 auto;
    min-width: 120px;
    max-width: 150px;
}

.filterActionsContainer {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
}

/* Horizontal container for window level dropdowns */
.windowlevel-dropdowns-container,
.draw-dropdowns-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Filter buttons container for Sobel/Sharpen */
.filter-buttons-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sobelLi,
.sharpenLi {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Threshold filter controls container */
.thresholdControls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.threshold-inputs-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.threshold-inputs-wrapper .inputMin,
.threshold-inputs-wrapper .inputMax {
    width: 60px;
    flex-shrink: 0;
}

.threshold-inputs-wrapper .threshold-reset {
    flex-shrink: 0;
}

.thresholdSliderContainer {
    margin-top: 8px;
    width: 100%;
}

.wlWrapper,
.cmWrapper,
.shapeWrapper,
.colourWrapper {
    flex: 1;
    min-width: 0; /* Allow flexbox to shrink properly */
}

.toolsDropdown-content select, .dropdown-content select{
    background: var(--Website-BG-1, #060606);
    border: 1px solid var(--Brand-Palette-green-900, #005343);
    border-radius: 8px;
    padding: 0.6rem;
    color: #fff;
    cursor: pointer;
    width: 100%;
}

.toolsDropdown-content input, .dropdown-content input{
    background: var(--Website-BG-1, #060606);
    border: 1px solid var(--Brand-Palette-green-900, #005343);
    border-radius: 8px;
    padding: 0.6rem;
    color: #fff;
    cursor: pointer;
}

.toolsDropdown-content input:focus,  .dropdown-content input:focus {
    border: 1px solid var(--Brand-Primary, #00C5A0);
    background: var(--Viewer-Accent, #003228);
    color: #fff;
    outline: none;
}

.toolsDropdown-content input[type="color"]{
    cursor: pointer;
    padding: 0rem;
}

.toolsDropdown-content input::placeholder, .dropdown-content input::placeholder{
    color: #fff;
    padding:10px;
}

.toolsDropdown-content button, .dropdown-content button{
    border-radius: 8px;
    border: none;
    background: var(--Viewer-Surface, #1C1C1E);
    cursor: pointer;
    color: #fff;
    padding: 0.6rem;
}

.toolsDropdown-content button:hover, .dropdown-content button:hover{
    background: var(--Viewer-Hover);
}


.toolsDropdown-content  .slider.slider-horizontal .slider-track, 
.toolsDropdown-content  .slider.slider-horizontal .slider-selection{
    background: var(--Viewer-Surface, #1C1C1E);;
}

.toolsDropdown-content .slider-handle.round{
    background: var(--Viewer-Border, #3D3C41);;
}

input[type="checkbox"] {
  accent-color: var(--Brand-Palette-green-700, #008C72);
}

/* HEADER END */

/* SCROLLER OVERIDE START*/
#viewerDisplay .slider.slider-vertical .slider-track,
#fullScreenDisplay .slider.slider-vertical .slider-track,
#viewerDisplay .slider.slider-vertical .slider-selection,
#fullScreenDisplay .slider.slider-vertical .slider-selection{
    background: #000;
}
#viewerDisplay .slider.slider-vertical .slider-handle,
#fullScreenDisplay .slider.slider-vertical .slider-handle{
    background: var(--Viewer-Border);
}

/* SCROLLER OVERIDE END*/

/* KEY TOGGLE */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--Viewer-Hover, #3F3F3F);
  -webkit-transition: .4s;
  transition: .4s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .toggle-slider {
  background-color: var(--Brand-Palette-green-700, #008C72);
}

input:focus + .toggle-slider {
  box-shadow: 0 0 1px var(--Brand-Palette-green-700, #008C72);
}
input:checked + .toggle-slider:before {
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}
.toggle-slider.round {
  border-radius: 34px;
}

.toggle-slider.round:before {
  border-radius: 50%;
}

.key-toggle-container{
    border-radius: 8px;
    background: var(--Viewer-Surface, #1C1C1E);
    display: flex;
    align-items: center;
    padding: 6px 10px;
    gap: 4px;
    font-size: 12px;
}
/* INFO LAYER */
.list-inline>li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}

/* REDESIGN STYLES END*/

#imageDisplay{
    overflow-y: overlay;
}
.hovered{
    border-radius: 4px !important;
    border: 0.5px solid var(--Brand-Palette-green-700, #008C72)!important;
    background: var(--Viewer-Accent, #003228)!important;
}
/* Layers */
.infoXBar{
    color:white;
    position:absolute !important;
    bottom:8px;
    padding-right: 200px;
    right: 0px;
    left: 0px;
    mix-blend-mode: difference;
}
.infoYBar{
    color:white;
    position:absolute !important;
    left:50px;
    margin-top:20px;
    margin-left:0;
    mix-blend-mode: difference;
}
.imgTable .infoXBar{
    color:white;
    position:absolute !important;
    bottom:8px;
    padding-right: 200px;
    right: 0px;
    left: 0px;
    top:0px;
    margin-top:170px;
    mix-blend-mode: difference;
}
.imgTable .infoYBar{
    color:white;
    position:absolute !important;
    left:50px;
    margin-top:100px;
    margin-left:0;
    mix-blend-mode: difference;
}
.imgTable .layerDialog{
    border: 1px ridge silver;
}
.rotateYbar{
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}
.right{ padding-left: 0px !important; }
.left{ padding-right: 0px !important; }

.leftLabel{position:absolute!important;width:150px;height:40px;padding:0;margin:auto;left:0;top:100px;bottom:120px;pointer-events:none;}
.leftText{color:yellow;position:absolute!important;left:0;margin-top:0px;margin-left:20px;font-size:medium;}
.bottomLabel{color:yellow;position:absolute !important;bottom:28px;right:0;left:0;font-size:medium;pointer-events:none;}
.rightLabel{position:absolute!important;width:150px;height:40px;padding:0;margin:auto;right:20!important;top:100px;bottom:120px;pointer-events:none;}
.rightText{color:yellow;position:absolute!important;right:0;margin-top:0px;margin-right:10px;font-size:medium;}
.topLabel{position:absolute !important;width:150px;height:40px;padding:0;margin:auto;top:10px;right:0;left:0;color:yellow;font-size:medium;pointer-events:none;}
.Ybar{
    position:absolute !important;
    width:150px;
    height:40px;
    padding:0;
    margin:auto;
    left:0;
    top:100px;
    bottom:120px;
    margin-right:100px;
    margin-left:-35px;
    mix-blend-mode: difference;
}
.Xbar{
    position:absolute !important;
    width:150px;
    height:40px;
    padding:0;
    margin:auto;
    bottom:10px;
    right:0;
    left:0;
    mix-blend-mode: difference;
}
.greenlight{
    border: 2px solid var(--Brand-Primary, #00C5A0) !important;
}

.layerDialog{
    width:auto!important;
    height: auto;
    background-color: black;
    padding: 0;
    margin: auto;
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: inline-block;
    vertical-align: middle;
    float: none;
 }
.layerContainer { width: inherit; padding: 0; margin: 0; position: !absolute; top: 0; left: 0; bottom: 0; right: 0; }
.konvajs-content canvas{ margin:auto !important; bottom:0 !important; right:0 !important; }
.imageLayer {
    width:auto;
    height: auto;
    padding: 0;
    margin: auto;
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: rotate(0deg);
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg);
    filter: "FlipH";
    -ms-filter: "FlipH";
}
.drawDiv { width:auto; height: auto;padding: 0; margin: auto; position: absolute !important; top: 0; left: 0; bottom: 0; right: 0; pointer-events: none; }
.dropBox { border: 5px dashed #ccc; }
.dropBox.hover { border: 5px dashed #cc0; }

/* Info */
.infotl { position: absolute !important; top: 0; left: 0; text-align: left; color: #fff; pointer-events: none;}

.patient-name-overlay {
    display: block;
    padding: 2px 6px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: 3px;
    margin-bottom: 8px;
    margin-top: 20px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.study-color-indicator {
    display: inline-block;
    width: 26px;
    height: 10px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.infotr { position: absolute !important; top: 0; right: 20px !important; text-align: right; color: #fff; pointer-events: none;}
.infobl { position: absolute !important; bottom: 0; left: 0; text-align: left; color: #fff; pointer-events: none;}
.infobr {  margin: 0px; position: absolute !important; bottom: 0; right: 20px !important; text-align: right; pointer-events: none;}
.infotl,
.infotr,
.infobl,
.infobr {
    /* Fallback style: adaptive class is applied at runtime. */
    mix-blend-mode: normal;
    color: #fff;
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.95),
         1px -1px 0 rgba(0, 0, 0, 0.95),
        -1px  1px 0 rgba(0, 0, 0, 0.95),
         1px  1px 0 rgba(0, 0, 0, 0.95);
}

/* Adaptive contrast classes toggled by infoController sampling logic. */
.overlay-contrast-light {
    color: #fff !important;
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.95),
         1px -1px 0 rgba(0, 0, 0, 0.95),
        -1px  1px 0 rgba(0, 0, 0, 0.95),
         1px  1px 0 rgba(0, 0, 0, 0.95);
}

.overlay-contrast-dark {
    color: #111 !important;
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.95),
         1px -1px 0 rgba(255, 255, 255, 0.95),
        -1px  1px 0 rgba(255, 255, 255, 0.95),
         1px  1px 0 rgba(255, 255, 255, 0.95);
}

/* Orientation sub-labels are created with inline color; force inherit for contrast classes. */
.top-sub,
.left-sub,
.right-sub,
.bot-sub,
.orientation li {
    color: inherit !important;
}
.key-image{margin-bottom:20px;}
.slright {position: absolute !important; top: 0; bottom:0; right: 0; text-align: right;}
.slider-handle{
    /*background-color:#3399ff!important;*/
    height:20px!important;
    width:10px!important;
    /*background-image: -webkit-linear-gradient(top,#3399ff 0,#3399ff 100%);*/
    /*margin-top:0px!important;*/
}
.slider.slider-vertical{
    margin: auto;
    position: absolute !important;
    right: 0;
}
.tooltip-arrow{
    border-right-width: 0px !important;
}
.tooltip-inner{
    padding-left: 0px;
    padding-right: 0px
}
#mySlider{
    margin: auto;
    position: absolute !important;
    right: 0;
    width:20px;
}
.plot { position: absolute !important; width: 100px; height: 50px; bottom: 0; left: 0; text-align: left; }
.infoLayer ul { margin: 0px; padding: 0px; list-style-type: none; font-size: 14px; }
.infoLayer canvas { margin: 0; padding: 2px; }
/* Tag list */

/* .highlighted { background: #f87217; } */

.colour-map-info{ width:98px !important; height: 10px !important; }
#pageHeader h1 { display: inline-block; margin: 0; color: #fff; }
#pageHeader a { color: #ddf; }
#pageHeader .toolbar {  float: right; padding-top:150px; z-index: 1500; }
.toolList ul { padding: 0; }
.toolList li { list-style-type: none; }
/* #pageMain { height: 92%; width: 99%; bottom: 5px; left: 5px; background-color: #000; } */

.dropBox { margin: 20px; }
.ui-icon { zoom: 125%; }

li button, li input { margin: 0; }
.history_list { width: 100%; }

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 18px;
    z-index:1500;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

#myProgress {
    position: relative;
    width: 100%;
    height: 30px;
    background-color: white;
}
#progressbar {
    position: absolute;
    width: 1%;
    height: 100%;
    background-color: #333;
    color:#fff;
}
.tags{
    width:100%;
}
.dwv-version > .container-fluid{
    padding-right: 0px !important;
}
#Patient{
    padding-top: 5px;
    padding-left:0px;
    padding-right:0px;
}
#patientBanner {
    border: 3px solid silver;
    background-color: #333;
    color: silver;
    right:0px;
    top:90px;
    margin:0px;
}
#fullNameLatin{
    text-transform:capitalize;
}
.protocolName{
    font-size: 9pt ;
}
.well{
    background-color: #333;
}
.modal-backdrop{
    z-index:0;
}
.modal-dialog{
    width: 40% !important;
}
.toolBtn{
    margin-left: 5px;
}
.hidden{
    display: none;
}
.dropdown-menu{
    z-index:1200 !important;
}

.seriesInfo {
    background-color:#fff;
    position:absolute;
    //z-index:9999;
    color: #333;
    line-height: 30px;
    font-size:15px;
    outline: medium none;
    text-align: center;
    margin:auto;
    right:0px;
    left:0px;
}
.examsList{
    width:100%;
}
.examsList tr{
    cursor:pointer;
}
.selectExam{
    background-color:dimgray;
}
.toggle{
    min-height:29px !important;
    height:29px !important;
}
.toggle label{
    padding-top: 4px;
}
#Profile{
    padding-left:7px;
    padding-right:7px;
}
.examsStyle{
    background-color:#333;
    color:#fff;
    border: 1px solid gray;
}

#patientInfo{
    padding-left: 0px;
}
.evoImage{
    padding-top: 0px !important;
}
nav{
    padding-top: 0px !important;
}
#rLeft{
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
#flipV{
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}


#myTable tr{
    height: 220px;
}
#myTable td div{
    height:200px;
    position: relative;
}

.slider-horizontal .slider-handle{
    border-radius: unset;
    margin-left: -5px !important;
    height: 10px !important;
}

.borderless td, .borderless th{
    border: none !important;
}

.dropdown{
    padding: 0px;
}

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

.dropdown-item > button {
    margin-right:2px;
}

.keyImage{
    border-color: green !important;
}

#inputRows{ color:#333; }
#inputColumns{ color:#333; }
.close{ color:#fff !important; }
.oflow{overflow-y:scroll}
@media print{
    @page {
        size: landscape;
        margin: 10mm;  /* 10mm margin on all sides */
    }
    
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Hide everything by default */
    body * {
        visibility: hidden !important;
    }
    
    /* Hide UI elements that shouldn't print */
    .navbar, 
    .sidebar,
    #sidebar,
    #thumbnailsDisplay,
    .btn, 
    button,
    .toolbar,
    .infoLayer,
    .controls,
    hr,
    .drawDiv,
    .patient-banner,
    #fullScreenDisplay,
    #imageDisplay,
    #myTable,
    #imagesDiv > aside,
    .main-content > *:not(#viewerDisplay),
    #studyTabsContainer,
    #dwv > *:not(#imagesDiv) {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Show only viewerDisplay and its container */
    #imagesDiv,
    .main-content {
        visibility: visible !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        page-break-inside: avoid !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    /* Keep scale bars visible with their original size */
    .Xbar,
    .Ybar,
    .infoXBar,
    .infoYBar {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Make viewer display full page */
    #viewerDisplay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        /* Size automatically filled by fixed positioning - not affected by zoom */
        visibility: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background-color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        overflow: hidden !important;
    }
    
    #viewerDisplay * {
        visibility: visible !important;
    }
    
    /* Make toPrint visible */
    .toPrint,
    .toPrint * {
        visibility: visible !important;
    }
    
    /* Prevent page breaks */
    #viewerDisplay,
    .toPrint {
        page-break-before: avoid !important;
        page-break-after: avoid !important;
        page-break-inside: avoid !important;
    }
    
    /* If there's a table or grid layout, make it fill the space */
    #viewerDisplay table,
    #viewerDisplay > .table {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        table-layout: fixed !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background-color: white !important;
        page-break-inside: avoid !important;
        box-sizing: border-box !important;
    }
    
    #viewerDisplay table td,
    #viewerDisplay table th,
    #viewerDisplay .grid {
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        background-color: white !important;
        page-break-inside: avoid !important;
        overflow: hidden !important;
        position: relative !important;
        min-width: 0 !important;
        min-height: 0 !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Prevent page breaks on table rows */
    #viewerDisplay table tr {
        page-break-inside: avoid !important;
        page-break-before: avoid !important;
        page-break-after: avoid !important;
    }
    
    /* Ensure all grid containers have white background */
    #viewerDisplay .layerDialog,
    #viewerDisplay [id^="grid"] {
        background-color: white !important;
        max-width: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }
    
    /* Specific constraint for layerDialog in grid cells */
    #viewerDisplay td .layerDialog {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }
    
    /* Position patient data at top with minimal height */
    .toPrint{
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 2mm 2mm !important;
        background: white !important;
        color: black !important;
        z-index: 1000 !important;
        font-size: 10pt !important;
        max-height: 12mm !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
    }
    
    .toPrint > div {
        display: flex !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }
    
    .toPrint .patient-data-label {
        color: #666666 !important;
    }
    
    /* Hide hr elements inside patient data */
    .toPrint hr {
        display: none !important;
    }
    
    /* Adjust viewerDisplay when patient data is present */
    .toPrint ~ #viewerDisplay {
        top: 12mm !important;
        bottom: 0 !important;
        /* Height automatically calculated from top and bottom - not affected by zoom */
    }
    
    /* Ensure canvases and images fit with proper aspect ratio */
    /* Exclude scale bars (Xbar, Ybar) from resizing */
    #viewerDisplay canvas:not(.Xbar):not(.Ybar):not(.Xbar):not(.Ybar),
    #viewerDisplay img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }
    
    /* Specific handling for grid cell canvases to ensure they fit */
    #viewerDisplay td canvas:not(.Xbar):not(.Ybar),
    #viewerDisplay .grid canvas:not(.Xbar):not(.Ybar) {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }
    
    /* Scale bars at 50% size for printing */
    #viewerDisplay canvas.Xbar {
        transform: scale(0.5) !important;
        transform-origin: center !important;
    }
    
    #viewerDisplay canvas.Ybar {
        transform: rotate(90deg) scale(0.5) !important;
        transform-origin: center !important;
    }
    
    /* Container divs should not add extra space */
    #viewerDisplay .imageLayer,
    #viewerDisplay .konvajs-content,
    #viewerDisplay .layerDialog {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        background-color: white !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Ensure layerContainer has white background */
    #viewerDisplay .layerContainer {
        background-color: white !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Hide all modals during print */
    .mdl,
    #tagsModal,
    #helpModal,
    #drawListModal,
    #mpr-modal,
    #petct-modal,
    #examsHistoryModal {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* ==================== NEW: Print Container Styles ==================== */
    /* Show only the print container with captured screenshot */
    #printContainer,
    #printContainer * {
        display: block !important;
        visibility: visible !important;
    }
    
    #printContainer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: white !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        page-break-inside: avoid !important;
        z-index: 10000 !important;
    }
    
    /* Patient banner in print container */
    #printContainer .toPrint {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 2mm !important;
        background: white !important;
        color: black !important;
        font-size: 10pt !important;
        max-height: 12mm !important;
        overflow: hidden !important;
        z-index: 10001 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
    }
    
    #printContainer .toPrint > div {
        display: flex !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }
    
    #printContainer .toPrint .patient-data-label {
        color: #B7B7B7 !important;
    }
    
    #printContainer .toPrint hr {
        display: none !important;
    }
    
    /* The captured screenshot image */
    #printContainer > img {
        max-width: 100% !important;
        max-height: calc(100% - 12mm) !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin-top: 12mm !important;
    }

}
.loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid var(--Brand-Primary, #00C5A0);;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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

.ContrastBolusAgent{
    font-weight: bold;
}

.show {
    display: block;
}

/* ── Volume-cache DB loading spinner ── */
@keyframes vp-cache-spin {
    to { transform: rotate(360deg); }
}

.vp-cache-spinner {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.35);
}

.vp-cache-spinner::after {
    content: '';
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(0, 197, 160, 0.25);
    border-top-color: #00C5A0;
    animation: vp-cache-spin 0.75s linear infinite;
}