/* Component com.ives.components.main.Main */
*{
	-webkit-overflow-scrolling: touch;
	user-select: none;
	-webkit-user-select: none;
	cursor: default;
}

html{
	height: 100%;
	overflow: hidden;
	width: 100%;
	position: fixed;
}

body{
	padding: 0;
	margin: 0;
	font-family: Sans-Serif;
	-webkit-overflow-scrolling: auto;
}

input, textarea, select{
	font-family: Sans-Serif;
	background: none;
	padding: .2em;
	border: 1px solid #000;
}

input[type=color]{
	border: none;
}

.simple-component{
	width: 100%;
	height: 100%;
}

select{
	cursor: pointer;
}

@keyframes logo {
	from {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 4cm;
	}
	to {
		top: 0%;
		left: 0%;
		transform: translate(0%, 0%);
		height: 2cm;
	}
}

@keyframes hideLogo {
	from { top: 0; } to { top: -4cm; }
}

@keyframes hideIves {
	from { bottom: 0; } to { bottom: -3cm; }
}

#mainComponent{
	position: absolute;
	background: #202020;
	overflow: hidden;
}

#mainComponent > *[data-content]{
	width: 100%;
	height: 100%;
}

#invisium{
	position: absolute;
	animation: logo 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) 1s both;
	padding: 0.5cm;
}

#invisium.hidden{
	animation: hideLogo 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

#ives{
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0.5cm;
	height: 2cm;
}

#ives.hidden{
	animation: hideIves 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

#unsupportedBrowser, #testOnly{
	position: absolute;
	bottom: 2em;
	width: 100%;
	text-align: center;
	color: #f00;
    background: #000;
	font-weight: bold;
    display: none;
}

/* Component com.ives.components.browse.DicomBrowse */
#browseComponent{
	text-align: center;
	position: relative;
}

#browseComponent > div{
	text-align: left;
	box-sizing: border-box;
	padding: 5%;
	height: 100%;
	margin: auto;
	overflow-y: auto;
	display: inline-block;
}

#browseComponent select{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0%);
	background: #fff;
}
/* Component com.ives.components.thumb.DicomThumb */
.thumbComponent{
	display: inline-block;
	position: relative;
	width: 5cm;
	height: 5cm;
}

.thumbComponent *{
	cursor: pointer;
}

.thumbComponent > div{
	display: inline-block;
	position: relative;
	left: 50%;
	transform: translate(-50%, 0%);
}

.thumbComponent > div div{
	position: absolute;
	top: 0;
	background: #000000;
	color: #ffffff;
	font-weight: bold;
	width: 100%;
	overflow-x: hidden;
}

@keyframes thumb {
	from {
		transform: scale(1.0) translate(-50%, 0%);
	}
	to {
		transform: scale(1.4) translate(-40%, 0%);
	}
}


@keyframes thumb2 {
	from {
		transform: scale(1.4) translate(-40%, 0%);
	}
	to {
		transform: scale(1.0) translate(-50%, 0%);
	}
}

.thumbComponent > div:hover{
	animation: thumb 0.2s ease-in both;
}

.thumbComponent > div{
	animation: thumb2 0.2s ease-in both;
}

/* Component com.ives.components.viewer.DicomViewer */
#viewer{
	display: flex;
	flex-direction: column;
}

#viewer > .content{
	flex-grow: 8;
	position: relative;
}

#viewer > div > div[data-content]{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
}

#viewer > div > div[data-content] > div{
	display: flex;
	flex-direction: row;
	flex-grow: 8;
	height: 1px; /* fox flex box streching */
}

#viewer > div > div[data-content] > div > div{
	flex-grow: 8;
	width: 1px; /* fox flex box streching */
}

#viewer #menu, #viewer #cine{
	background: #ffffff;
	padding: 0.2em;
}

#viewer #cine{
	text-align: center;
}

#viewer #menu > div div{
	display: inline-block;
	white-space: nowrap;
}

#viewer #menuContent{
	color: #0c7a9b;
	display: flex;
	flex-direction: row;

	height: 1.5cm;
	font-family: "Open Sans", sans-serif;
}

#viewer #menu .spacer{
	flex-grow: 8;
}

#viewer #menu > div div.vc{
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#viewer #menu label.checkbox{
	margin: 0 .5em;
}

#viewer #menu .mr{
	margin-right: 0.8cm;
}

.button {
	color: #0c7a9b;
	border: 1px solid transparent;
	background-image: none;
	display: inline-block;
	line-height: 0.8cm;
	position: relative;
}

*[data-group] > label {
	color: #0c7a9b;
	border: 1px solid transparent;
	background-image: none;
	height: 1.4cm;
	width: 1.4cm;
	display: inline-block;
	line-height: 0.8cm;
	position: relative;
}

*[data-group] > label > div.bg {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: top .4em center;
	background-size: auto 50%;
	filter: invert(37%) sepia(100%) saturate(676%) hue-rotate(154deg) brightness(101%) contrast(101%);
}

.dark *[data-group] > label > div.bg {
	filter: invert(97%) sepia(5%) saturate(462%) hue-rotate(318deg) brightness(114%) contrast(100%);
}

input, .button, .button *, *[data-group] *, label, label *{
	cursor: pointer;
}

*[data-group] > label > span {
	position: absolute;
	bottom: 0;
	width: 100%;
	filter: none;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	color: #27272b;
	font-size: 0.6em;
	text-align: center;
	line-height: 0.4cm;
}

.hide-labels span{
	display: none;
}

.hide-labels .no-icon span{
	display: inline;
}

.hide-labels .do-not-hide span{
	display: inline;
}

.button:empty, *[data-group] > label:empty {
	background-position: center center;
}

.button.no-icon span, *[data-group] > label.no-icon span {
	padding-bottom: 2em;
}

.button:hover, *[data-group] > label:hover{
	background-color: #0c4a6b;
	color: #ffffff;
	border: 1px solid #0096bf;
	cursor: pointer;
}

*[data-group] > input[type="radio"] {
	display:none;
}

*[data-group] > input[type="radio"]:checked + label{
	background-color: #0096bf;
	color: #ffffff;
	border: 1px solid #0c4a6b;
}

.mobile #viewer #menu{
	position: absolute;
	left: 0;
	top: 0;
	width: 5cm;
	height: 100%;
	z-index: 99;
	border-right: 2px solid #0096bf;
	box-shadow: 0px 0px 0.5cm 0px #0096bf;
	transform: translate(-99%);
}

.mobile #viewer #menu.hide{
	animation: hideMenu 0.3s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.mobile #viewer #menu.show{
	animation: showMenu 0.3s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
	z-index: 9999;
}

.mobile #viewer #menu div, .mobile #viewer #menu label{
	display: block;
}

.mobile #viewer #menuContent{
	flex-direction: column;
	overflow-y: auto;
	height: 100%;
}

.mobile #menu.hide-labels span{
	display: inline;
}

.mobile #viewer #menu div[data-group], .mobile  .mainGroup {
	margin-bottom: 0.8cm;
	margin-right: 0;
}

.mobile .mainMenu{
	margin-top: 0.8cm;
}

.mobile #viewer #menu > div div.vc {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.mobile #viewer #menu > div div{
	width: 100%
}

.mobile #viewer #menu *{
	box-sizing: border-box;
	border: 0;
}

.mobile #viewer #menu .mr {
	margin-right: 0;
}

@media (orientation:landscape){
	.mobile #viewer {
		flex-direction: row;
	}

	.mobile  #cine > div{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: center;
	}
}

#opener{
	display: none;
}

.mobile #opener{
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	width: 1cm;
	height: 1cm;
	background-image: url("assets/ui/icons/png/burger.png");
	background-position: 0.1cm center;
	background-size: auto 80%;
	background-color: #ffffff;
	border: 1px solid #0c7a9b;
	border-radius: 0 4px 4px 0;
	z-index: 999;
	border-left: 0;
}

@keyframes showMenu {
	from { transform: translate(-99%, 0%); } to { transform: translate(0%, 0%); }
}

@keyframes hideMenu {
	from { transform: translate(0%, 0%); } to { transform: translate(-99%, 0%); }
}

.dark{
	color-scheme: dark;
}

/* dark mode */
#viewer.dark #menu, #viewer.dark #cine{
	background: #27272b;
}

.dark .workspace{
	border: 1px solid #27272b;
}

.dark .popup .popup-main, .dark .slider .slider-main{
	background: #27272b;
}

.dark .tagsPopup, .dark .comparePopup{
	color: #c0c0c0;
}

.button span, *[data-group] > label span {
	color: #0c7a9b;
}

.dark .button span, .dark *[data-group] > label span {
	color: #c0c0c0;
}

div.dropdown{
	background-image: url("assets/dropdown.png");
	background-size: 20% auto;
	background-position: right center;
	background-repeat: no-repeat;
}

div.dropdown label{
	display: block;
	z-index: 99999;
}

div.dropdown label:nth-of-type(n+2){
	display: none;
	background-color: #ffffff;
}

.dark div.dropdown label:nth-of-type(n+2){
	background-color: #27272b;
}

div.dropdown:hover label:nth-of-type(n+2){
	display: block;
}

/******
 ICONS
******/
.r3d{ background-image: url("assets/ui/icons/png/3d.png"); }
.angle{ background-image: url("assets/ui/icons/png/angle.png"); }
.bolt{ background-image: url("assets/ui/icons/png/bolt.png"); }
.burger{ background-image: url("assets/ui/icons/png/burger.png"); }
.circle{ background-image: url("assets/ui/icons/png/circle.png"); }
.close{ background-image: url("assets/ui/icons/png/close.png"); }
.compare{ background-image: url("assets/ui/icons/png/compare.png"); }
.controls-forward{ background-image: url("assets/ui/icons/png/controls-forward.png"); }
.controls-next{ background-image: url("assets/ui/icons/png/controls-next.png"); }
.controls-pause{ background-image: url("assets/ui/icons/png/controls-pause.png"); }
.controls-play{ background-image: url("assets/ui/icons/png/controls-play.png"); }
.controls-prev{ background-image: url("assets/ui/icons/png/controls-prev.png"); }
.controls-rewind{ background-image: url("assets/ui/icons/png/controls-rewind.png"); }
.controls-stop{ background-image: url("assets/ui/icons/png/controls-stop.png"); }
.data{ background-image: url("assets/ui/icons/png/data.png"); }
.draw_circle{ background-image: url("assets/ui/icons/png/draw_circle.png"); }
.draw_shape{ background-image: url("assets/ui/icons/png/draw_shape.png"); }
.draw_square{ background-image: url("assets/ui/icons/png/draw_square.png"); }
.expand{ background-image: url("assets/ui/icons/png/expand.png"); }
.flip_left{ background-image: url("assets/ui/icons/png/flip_left.png"); }
.flip_right{ background-image: url("assets/ui/icons/png/flip_right.png"); }
.flip{ background-image: url("assets/ui/icons/png/flip.png"); }
.fullscren{ background-image: url("assets/ui/icons/png/fullscren.png"); }
.grid{ background-image: url("assets/ui/icons/png/grid.png"); }
.help{ background-image: url("assets/ui/icons/png/help.png"); }
.histogram{ background-image: url("assets/ui/icons/png/histogram.png"); }
.input{ background-image: url("assets/ui/icons/png/input.png"); }
.measure{ background-image: url("assets/ui/icons/png/measure.png"); }
.movecopy{ background-image: url("assets/ui/icons/png/movecopy.png"); }
.move_hori{ background-image: url("assets/ui/icons/png/move_hori.png"); }
.negative{ background-image: url("assets/ui/icons/png/negative.png"); }
.point{ background-image: url("assets/ui/icons/png/point.png"); }
.proportion{ background-image: url("assets/ui/icons/png/proportion.png"); }
.reload{ background-image: url("assets/ui/icons/png/reload.png"); }
.reseting{ background-image: url("assets/ui/icons/png/reseting.png"); }
.reset{ background-image: url("assets/ui/icons/png/reset.png"); }
.rois{ background-image: url("assets/ui/icons/png/rois.png"); }
.rotate_point{ background-image: url("assets/ui/icons/png/rotate_point.png"); }
.rotate{ background-image: url("assets/ui/icons/png/rotate.png"); }
.rules{ background-image: url("assets/ui/icons/png/rules.png"); }
.select{ background-image: url("assets/ui/icons/png/select.png"); }
.settings{ background-image: url("assets/ui/icons/png/settings.png"); }
.shape_line{ background-image: url("assets/ui/icons/png/shape_line.png"); }
.tooth{ background-image: url("assets/ui/icons/png/tooth.png"); }
.tweak{ background-image: url("assets/ui/icons/png/tweak.png"); }
.wand{ background-image: url("assets/ui/icons/png/wand.png"); }
.window{ background-image: url("assets/ui/icons/png/window.png"); }
.zoom{ background-image: url("assets/ui/icons/png/zoom.png"); }
.heart{ background-image: url("assets/ui/icons/png/heart.png"); }
.trash{ background-image: url("assets/ui/icons/png/trash.png"); }
.mirror{ background-image: url("assets/ui/icons/png/mirror.png"); }
.sync{ background-image: url("assets/ui/icons/png/sync.png"); }
.dark_mode{ background-image: url("assets/ui/icons/png/dark_mode.png"); }
.lang{ background-image: url("assets/ui/icons/png/lang.png"); }
.label{ background-image: url("assets/ui/icons/png/label.png"); }

/* Component com.ives.modules.ecg.ECG */
.ecg .ecg-container{
	position: absolute;
	bottom: 1cm;
	left: 50%;
	width: 80%;
	border: 2px solid #ffffff;
	background: #000000;
	transform: translate(-50%, 0);
	overflow: hidden;
	max-height: 80%;
	animation: hideECG 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
	display: none;
	flex-direction: column;
	pointer-events: all;
	color: #fff;
}

.ecg .ecg-container.show{
	animation: showHECG 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.ecg .controls{
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-shrink: 0;
	padding: .2em 0;
}

.ecg .controls div {
	padding: .2em 0;
}

.ecg .controls .fill {
	flex-grow: 8;
}

.ecg .controls .fill div{
	display: inline-block;
}

.ecg .controls .play{
	text-align: center;
}

.ecg .time{
	width: 8em;
	text-align: right;
}

.ecg .controls .play{
	font-weight: bold;
	text-decoration: underline;
	padding-right: .2em;
}

.ecg .controls > *{
	display: inline-block;
}

.ecg select, .ecg select option{
	color: #fff;
	background: #000;
}

.ecg .lines{
	overflow-y: auto;
	overflow-x: hidden;
	flex-grow: 8;
}

@keyframes showHECG {
	to { opacity: 1; }
}

@keyframes hideECG  {
	to { opacity: 0; }
}

/* Component com.ives.modules.ecg.ECGLineView */
.line-container{
	position: relative;
	background: #000000;
	overflow: hidden;
	border: 1px solid #fff;
	height: 3cm;
	background: #fff;
}

.line-container .timeMarker{
	position: absolute;
	width: 2px;
	height: 100%;
	top: 0;
	left: 50%;
	background: #f00;
	transform: translate(-50%, 0);
}

.line-container .label{
	position: absolute;
	top: 0;
	left: 0;
	color: #000;
	background: rgba(255, 255, 255, 0.4);
	padding: .5em;
}

.line-container .fineGrid{
	position: absolute;
	width: 100%;
	height: 100%;
}

/* Component com.ives.modules.measurements.Measurements */
.measurements .pointers{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.measurements .pointers .pointer{
	position: absolute;
}

.measurements .histogram-container{
	position: absolute;
	bottom: 1cm;
	left: 50%;
	width: 40%;
	height: 3cm;
	border: 2px solid #ffffff;
	background: #000000;
	transform: translate(-50%, 0);
	overflow: hidden;
	animation: hideHistogram 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
	display: none;
}

.measurements .histogram-container.mouseEnabled{
	pointer-events: all;
}

.measurements .histogram-container.show{
	animation: showHistogram 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.measurements .sectionMin, .measurements .sectionMax, .measurements .sectionValue, .measurements .histogramMarker{
	position: absolute;
	left: 0;
	color: #ffffff;
}

.measurements .histogramMarker{
	height: 100%;
	top: 0;
	width: 2px;
	background: #ff0000;
}

.measurements .sectionMax{
	top: 0;
}

.measurements .sectionMin{
	bottom: 0;
}

@keyframes showHistogram {
	to { opacity: 1; }
}

@keyframes hideHistogram  {
	to { opacity: 0; }
}

.rulersContainer{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.infoContainer{
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.rulersContainer div{
	position: absolute;
	color: #ffffff;
}

circle.handle{
	fill: #0096bf;
}

circle.handleClose{
	fill: #6caabb;
}

circle.handleSelected{
	fill: #ffffbf;
}

circle.handleInProgress{
	fill: #0c4a6b;
}

circle.handle, circle.handleSelected, circle.handleInProgress{
	display: none;
}

.mobile circle.handle, .mobile circle.handleClose, .mobile circle.handleSelected, .mobile circle.handleInProgress{
	display: unset;
}

/* Component com.ives.components.measpopup.MeasurementPopup */
.measurement-popup div{
    margin: 1em auto;
}

.prompt{
    color: white;
}

.button-selection .button{
    background-color: #c0c0c0;
    color: black;
    margin: auto;
    width: 100%;
    font-weight: bold;
    text-align: center;
}

.button-selection .button span{
    padding: 0;
    color: black;
}

/* Component com.ives.components.messagehandler.MessageHandler */
.message-handler{
	display: none;
}

/* Component com.ives.components.gridpopup.GridPopup */
.gridButton{
	width: 2cm;
	height: 2cm;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.gridButton span{
	padding: 0;
}

.gridButton.in-layout{
	background: #0c7a9b;
	color: #ffffff;
	border: 1px solid #ffffff;
}

/* Component com.ives.modules.mip.MIP */
.mip .holder{
	position: absolute;
	right: 0;
	top: 50%;
	color: #ffffff;
	display: none;
}

.mip .holder div{
	display: table-row;
}

.mip .holder div div{
	display: table-cell;
}

.mip .holder .value{
	width: 5em;
	text-align: center;
}

/* Component com.ives.modules.mpr.MPR */
.mpr .mprInfo{
	position: absolute;
	right: 0;
	bottom: 0;
	color: #ffffff;
	display: none;
}

.mpr-target .border{
	cursor: crosshair;
}

.mpr-move .border{
	cursor: move;
}

.mpr-rotate .border{
	cursor: url(assets/path133.png), nwse-resize;
}

/* Component com.ives.modules.vrc.VRC */
.vrc .holder{
	position: absolute;
	right: 0;
	top: 50%;
	color: #ffffff;
	display: none;
}

.vrc .holder div{
	display: table-row;
}

.vrc .holder div div{
	display: table-cell;
}

.vrc .holder .value{
	width: 5em;
	text-align: center;
}

.vrc select.luts{
	position: absolute;
	top: .5cm;
	right: .5cm;
	background: #ffffff;
	pointer-events: all;
	display: none;
}

/* Component com.ives.modules.adjustments.Adjustments */
.adjustments .histogram-container{
	position: absolute;
	bottom: 1cm;
	left: 50%;
	width: 40%;
	height: 3cm;
	border: 2px solid #ffffff;
	background: #000000;
	transform: translate(-50%, 0);
	overflow: hidden;
	animation: hideHistogram 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
	display: none;
	z-index: 9999;
}

.adjustments .histogram-container.show{
	animation: showHistogram 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.adjustments .windowMarker, .adjustments .windowCenter{
	position: absolute;
	width: 2px;
	height: 100%;
	top: 0;
	background: #ff0000;
	transform: translate(-50%, 0);
}

.adjustments .windowMarker{
	background: #00ff00;
}

@keyframes showHistogram {
	to { opacity: 1; }
}

@keyframes hideHistogram  {
	to { opacity: 0; }
}

/* Component com.ives.components.workspace.DicomWorkspace */
.workspace{
	border: 1px solid #ffffff;
	overflow: hidden;
	background: #000000;
	position: relative;
}

.workspace.selected{
	border: 1px solid #0c7a9b;
}

.workspace .border{
	display: none;
}

.workspace.selected .border{
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	box-shadow: inset 0px 0px 0.2cm 0.2cm rgba(12, 122, 155, 0.6);
}

.workspace .module{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.workspace .module svg.fill{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.workspace > div[data-content]{
	height: 100%;
}

.workspace > div[data-id=sliceInfo]{
	font-family: monospace;
	font-size: smaller;

	position: absolute;
	color: #ffffff;
	bottom: .5em;
	left: .5em;
	display: table;
}

.workspace > div[data-id=sliceInfo] > div{
	display: table-row;
}

.workspace > div[data-id=sliceInfo] > div > div{
	padding: 0.5em 0.5em 0 0;
	display: table-cell;
}

.text-right{
	text-align: right;
}

.progress-info{
	position: absolute;
	bottom: 1em;
	width: 40%;
	color: #ffffff;
	text-align: center;
	left:50%;
	transform: translate(-50%, 0);
	animation: hideProgress 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.progress-info.show{
	animation: showProgress 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.progress-info .progressbar{
	height: 0.1cm;
	background: #0c4a6b;
	position: relative;
}

.progress-info .progress{
	height: 100%;
	position: absolute;
	background: #0096bf;
	top: 0;
	left: 0;
}

.progress-info .progress.progress-lossless{
	background: #00f6bf;
}

@keyframes showProgress {
	to { opacity: 1; }
}

@keyframes hideProgress {
	to { opacity: 0; }
}

.closeButton{
	display: none;
	position: absolute;
	top: 0.5cm;
	right: 0.5cm;
	width: 0.5cm;
	height: 0.5cm;
	border-radius: 0.25cm;
	border: 2px solid #0c4a6b;
	background: url("assets/ui/icons/png/close.png") #ffffff;
	background-size:contain;
	cursor: pointer;
}

.closeButton:hover {
	border-color: #0096bf;
}

.mirrorWarning{
	text-transform: uppercase;
	color: #fff;
	background: #f00;
	padding: .2em;
	position: absolute;
	top: 1em;
	left: 50%;
	transform: translate(-50%, 0);
	font-weight: bold;
	display: none;
	text-align: center;
}

.slice-orientation{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.slice-orientation div{
	position: absolute;
	color: white;
	font-weight: bold;
	display: none;
}

.slice-orientation div span{
	pointer-events: all;
}

.slice-orientation div span:hover{
	color: #0096bf;
}

.sob, .sot{
	left: 50%;
	transform: translate(-50%, 0);
}

.sol, .sor{
	top: 50%;
	transform: translate(0, -50%);
}

.sob{
	bottom: 0;
}

.sol{
	left: 0;
}

.sor{
	right: 0;
}

.sot{
	top: 0;
}

.orientwarning{
	color: #fff;
	background: #f00;
}

/* Component com.ives.modules.compare.Compare */
.compareTable{
	flex-grow: 8;
	overflow-y: auto;
	overflow-x: hidden;
}

.compareTable > div{
	display: table-row;
	margin: 0.2em 0;
}

.compareTable img{
	pointer-events: none;
}

.compareTable > div > div{
	display: table-cell;
	padding: 0.2em 1em;
	vertical-align: top;
}

.comparePopup{
	display: flex;
	flex-direction: column;
	max-height: 80vh;
}

.filter{
	padding: 1em 0 2em 0;
	display: flex;
	flex-direction: row;
}

.filter span{
	font-weight: bold;
	padding: 0.2em 1em;
}

.filter input{
	flex-grow: 8;
	cursor: text;
	height: 1.5em;
	align-items: center;
	justify-content: center;
}

.comparePopup .fill, .comparePopup .infoContainer{
	display: none;
}

.closeOpenedSeries{
	font-weight: bold;
	text-decoration: underline;
}

.closeOpenedSeries span:hover{
	cursor: pointer;
}

/* Component com.ives.components.slider.Slider */
.slider{
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	top:0;
	left: 0;
	align-items: center;
	display: flex;
	justify-content: left;
	background: rgba(0,0,0,0.2);
	animation: showSliderBackground 0.5s ease-in both;
	z-index: 9999999;
}

.slider.hide{
	animation: hideSliderBackground 0.5s ease-in both;
}

@keyframes showSliderBackground {
	from { background: rgba(0,0,0,0.0); } to { background: rgba(0,0,0,0.2); }
}

@keyframes hideSliderBackground {
	from { background: rgba(0,0,0,0.2); } to { background: rgba(0,0,0,0.0); }
}

.slider .slider-main{
	pointer-events: all;
	background: #ffffff;
	padding: 1em;
	border: 1px solid #0c7a9b;
	border-radius: 4px;
	animation: showSlider 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
	min-width: 5cm;
	box-shadow: 0px 0px 0.5cm 0px #ffffff;
	max-width: 30%;
	max-height: 90%;
}

.slider-main .thumbComponent{
	width: auto;
	height: auto;
}

.slider-main .thumbComponent > div {
	animation: none;
}

.slider .slider-header{
	text-align: right;
}

.slider .slider-close{
	width: 0.5cm;
	height: 0.5cm;
	border-radius: 0.25cm;
	background: url("assets/ui/icons/png/close.png");
	background-size:contain;
	display: inline-block;
	cursor: pointer;
	filter: invert(97%) sepia(5%) saturate(462%) hue-rotate(318deg) brightness(114%) contrast(100%);
}

.slider .slider-bottom{
	text-align: center;
	margin: 0.1em;
}

.slider .slider-bottom .button{
	background-color: #0096bf;
	color: #ffffff;
	padding: 0 1em;
}

.slider .slider-bottom .button:hover{
	background-color: #0c7a9b;
}

.slider .slider-bottom .button span{
	padding: 0.1em;
}

.slider .slider-main.hide{
	animation: hideSlider 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

@keyframes showSlider {
	from { transform: translate(-50%, 0%); opacity: 0; } to { transform: translate(0%, 0%); opacity: 1; }
}

@keyframes hideSlider {
	from { transform: translate(0%, 0%); opacity: 1; } to { transform: translate(-50%, 0%); opacity: 0; }
}

/* Component com.ives.modules.tags.Tags */
.tagsTable{
	flex-grow: 8;
	overflow-y: auto;
	white-space: pre;
}

.tagsTable > div{
	display: table-row;
	margin: 0.2em 0;
}

.tagsTable .valueCol{
	max-width: 30em;
	overflow-x: auto;
	font-weight: bold;
}

.tagsTable > div > div{
	display: table-cell;
	padding: 0.2em 1em;
}

.tagsPopup{
	display: flex;
	flex-direction: column;
	max-height: 80vh;
}

.filter{
	padding: 1em 0 2em 0;
	display: flex;
	flex-direction: row;
}

.filter span{
	font-weight: bold;
	padding: 0.2em 1em;
}

.filter input{
	flex-grow: 8;
	cursor: text;
	height: 1.5em;
	align-items: center;
	justify-content: center;
}

/* Component com.ives.components.image.DicomImage */
.dicom-image{
	pointer-events: none;
	transform-origin: 0 0;
	display: inline-block;
}

.dicom-image img, .dicom-image image{
	image-rendering: -moz-crisp-edges; /* firefox */
	image-rendering: -o-crisp-edges; /* opera */
	image-rendering: -webkit-optimize-contrast; /* safari */
	image-rendering: pixelated; /* chrome */
}

.dicom-image svg{
	position: absolute;
}

.dicom-image svg *{
	color-interpolation-filters: sRGB;
	color-interpolation: sRGB;
	color-profile: sRGB;
	color-rendering: optimizeSpeed;
}

.dicom-image.mirrored > * {
	transform: scaleX(-1);
}

/* Component com.ives.modules.measurements.MeasurementInfo */
.measurements-info{
	position: absolute;
	color: #6caabb;
	padding: .2em;
	font-weight: bold;
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
	opacity: 0;
}

svg path.shadow{
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

.measurements .measurements-info.show{
	opacity: 1;
}

.measurements-info > div{
	display: table-row;
}

.measurements-info > div > div{
	display: table-cell;
	padding: .2em .2em;
}

/* Component com.ives.modules.info.Info */
.info > div[data-id=patientInfo]{
	position: absolute;
	color: #ffffff;
	text-align: right;

	font-family: monospace;
	font-size: smaller;
	top: .5em;
	right: .5em;
}

.info > div[data-id=patientInfo] p{
	margin: 0 0 0.5em 0;
}

/* Component com.ives.components.cube3d.Cube3D */
.cube-container{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 200px;
	height: 200px;
	perspective: 800px;
}

.cube{
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

.cube div {
	position: absolute;
	width: 200px;
	height: 200px;
	color: #fff;
	line-height: 200px;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000;
}

.cube .front  { transform: rotateY(   0deg ) translateZ( 100px ); background: #0ff; }
.cube .back   { transform: rotateX( 180deg ) translateZ( 100px ); background: #f0f; }
.cube .right  { transform: rotateY(  90deg ) translateZ( 100px ); background: #0f0; }
.cube .left   { transform: rotateY( -90deg ) translateZ( 100px ); background: #f00; }
.cube .top    { transform: rotateX(  90deg ) translateZ( 100px ); background: #00f; }
.cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); background: #ff0; }

/* Component com.ives.components.productlabel.ProductLabel */
.productLabel > img{
	width: 4cm;
	display: block;
	margin: auto;
}

.productLabel > div.table{
	display: table;
}

.productLabel > div.table > div{
	display: table-row;
}

.productLabel > div.table > div > *{
	display: table-cell;
	vertical-align: middle;
	padding: 0.5em;
}

.productLabel p{
	margin: 0.1em;
}

/* Component com.ives.components.popup.Popup */
.popup{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	align-items: center;
	display: flex;
	justify-content: center;
	background: rgba(0,0,0,0.8);
	animation: showPopupBackground 0.5s ease-in both;
	z-index: 9999999;
}

.popup.hide{
	animation: hidePopupBackground 0.5s ease-in both;
}

@keyframes showPopupBackground {
	from { background: rgba(0,0,0,0.0); } to { background: rgba(0,0,0,0.8); }
}

@keyframes hidePopupBackground {
	from { background: rgba(0,0,0,0.8); } to { background: rgba(0,0,0,0.0); }
}

.popup .popup-main{
	background: #ffffff;
	padding: 1em;
	border: 1px solid #0c7a9b;
	border-radius: 4px;
	animation: showPopup 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
	min-width: 5cm;
	box-shadow: 0px 0px 0.5cm 0px #ffffff;
	max-height: 90%;
}

.popup .popup-header{
	text-align: right;
}

.popup .popup-close{
	width: 0.5cm;
	height: 0.5cm;
	border-radius: 0.25cm;
	background: url("assets/ui/icons/png/close.png");
	background-size:contain;
	display: inline-block;
	cursor: pointer;
	filter: invert(97%) sepia(5%) saturate(462%) hue-rotate(318deg) brightness(114%) contrast(100%);
}

.popup .popup-bottom{
	text-align: center;
	margin: 0.1em;
}

.popup .popup-bottom .button{
	background-color: #0096bf;
	color: #ffffff;
	padding: 0 1em;
}

.popup .popup-bottom .button:hover{
	background-color: #0c7a9b;
}

.popup .popup-bottom .button span{
	padding: 0.1em;
}

.popup .popup-main.hide{
	animation: hidePopup 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

@keyframes showPopup {
	from { transform: translate(0%, -50%); opacity: 0; } to { transform: translate(0%, 0%); opacity: 1; }
}

@keyframes hidePopup {
	from { transform: translate(0%, 0%); opacity: 1; } to { transform: translate(0%, 50%); opacity: 0; }
}

/* Component com.ives.components.notifier.Notifier */
.notifier{
	position: absolute;
	bottom: 2em;
	width: 50%;
	min-height: 3em;
	transform: translate(50%, 0);
	pointer-events: none;
}

.notifier > div{
	animation: notificationAnimation 6.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
	background: #fff;
	border: 1px solid #0c7a9b;
	border-radius: 4px;
	box-shadow: 0px 0px 0.5cm 0px #ffffff;
	margin: 1em 0;
	padding: 0.5em 1em;
}

@keyframes notificationAnimation {
	0% { opacity: 0; }
	10% { opacity: 1;}
	90% { opacity: 1; max-height: 10em; margin: 1em 0; padding: 0.5em 1em; border-width: 1px;}
	100% { opacity: 0; max-height: 0; margin: 0; padding: 0 1em; border-width: 0;}
}

.notifier lmb, .notifier rmb{
	background-image: url("assets/left-click.png");
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	background-size: contain;
	vertical-align: middle;
}

.notifier rmb{
	background-image: url("assets/right-click.png");
}

.notifier kbd{
	display: inline-block;
	min-width: 1em;
	padding: .2em .3em;
	text-align: center;
	text-decoration: none;
	border-radius: .3em;
	border: none;
	cursor: default;
	user-select: none;
	background: rgb(250, 250, 250);
	background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
	color:  rgb(50, 50, 50);
	text-shadow: 0 0 2px rgb(255, 255, 255);
	box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	font-weight: bold;
}

/* Component com.ives.modules.roi.ROIPopup */
.roi-description{
	padding: 1em 0 2em 0;
	display: flex;
	flex-direction: row;
}

.roi-description span{
	font-weight: bold;
	padding: 0.2em 1em;
}

.roi-description input{
	flex-grow: 8;
	cursor: text;
	height: 1.5em;
	align-items: center;
	justify-content: center;
}

/* Component com.ives.modules.measurements.Pointer */
.pointer{
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	color: #6caabb;
	font-weight: bold;
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

.pointer div{
	padding-left: .6em;
}