#pathologyContainer {
	width: 22em;
}

#pathologyContainer.horizontal,
#pathologyContainer.closed {
	width: 3.5em;
}

#pathologyContainer #apToolbar {
	width: 18%;
	float: right;
}

#pathologyContainer.horizontal #apToolbar,
#pathologyContainer.closed #apToolbar {
	width: 100%;
	float: left;
}

.apScoutDiv {
	background: rgba(255, 255, 0, 0.0);
	z-index: 0;
	position: absolute;
	box-shadow: #717171 3px -2px 7px 0px;
}

.apScoutDivArea {
	background: rgba(255, 255, 0, 0.0);
	width: 100%;
	height: 100%;
}

.apScoutTitle {
	background: #2e353a;
	width: 3em;
	height: 1.5em;
	display: block;
	top: -1.5em;
	float: right;
	margin-top: -1.5em;
	opacity: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.apScoutMapSize {
	width: 1.2em;
	height: 1.2em;
	float: right;
	background: #2e353a;
	margin: 0.1em;
	border-radius: 0.1em;
	opacity: 0.7;
}

.apScoutMapSize:hover {
	opacity: 1.0;
}

.apScoutMapVis {
	width: 1.2em;
	height: 1.2em;
	float: right;
	background: #2e353a;
	margin: 0.1em;
	border-radius: 0.1em;
	opacity: 0.7;
}

.apScoutMapVis:hover {
	opacity: 1.0;
}

.scoutLayerImg {
	width: 100%;
}

.scoutSizeImg {
	width: 100%;
}


.apColorResetButton {
	border: none;
	cursor: pointer;
	min-width: 6em;
	min-height: 2em;
	color: #FFFFFF;
	background-color: #6c757d;
	border-radius: 3px;
	font-size: 0.9em;
	margin: 0.8em 0.8em 0 0;
	float: right;
}

.apColorResetButton:hover {
  background-color: #5a6268;
}

.apColorResetButton.btn-primary {
  background-color: #5b96d6;
}

.apColorResetButton.btn-primary:hover {
  background-color: #0069d9;
}

.apColorResetButton.btn-danger {
  background-color: #ca5b66;
}

.apColorResetButton.btn-danger:hover {
  background-color: #c82333;
}

.apColorWindow {
	font-family: "Arial";
	color: white;
	position: absolute;
	width: 0px;
	height: 0px;
	background: #2e353a;
	opacity: 1em;
	display: none;
	z-index: 0;
	/* padding: 0.5em; */
	width: 20em;
	height: 17.5em;
	user-select: none;
	top: 10px;
	left: 10px;
	z-index: 100;
	border: 1px solid #00a9db;
}

.apColorTitle {
	/* padding-bottom: 2em; */
	/* padding-top: 0em; */
	/* cursor: -webkit-grab; */
	/* margin: 2em; */
	height: 1em;
	cursor: move;
}

.apCloseImg {
	right: 1em;
	float: right;
	height: 1.5em;
	/* margin: -0.5em; */
	opacity: 0.7;
}

.apResetLabel {
	opacity: 1.0;
	height: 1.5em;
}


.apResetDiv {
	opacity: 0.7;
	float: right;
	background: #00a9db;
	height: 1.5em;
	padding-left: 1em;
	padding-right: 1em;
	margin-top: 0.5em;
	border-radius: 0.1em;
	margin-right: 0.6em;
}

.apResetDiv:hover {
	opacity: 1.0;
}

.apCloseImg:hover {
	opacity: 1.0;
	cursor: pointer;
}

.apColorImage {
	font-family: "Arial";
	width: 1em;
	height: 1em;
}

.slider {
	-webkit-appearance: none;
	width: 90%;
	height: 1em;
	background: #4d5357;

	outline: none;
	/* opacity: 0.7; */
	-webkit-transition: .2s;
	transition: opacity .2s;
	margin:0em 0em 0.5em 0em;
}

.slider:hover {
	opacity: 1;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1em;
	height: 1.2em;
	background: #cbae4a;
	cursor: pointer;
	border-radius: 0.2em;
}

.slider::-moz-range-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1em;
	height: 1.2em;
	background: #cbae4a;
	cursor: pointer;
	border-radius: 0.2em;
}


.apImageLabel {
	background: rgba(255, 255, 255, 0);
	z-index: 0;
	position: absolute;
	text-align: right;
}

.apImageLabelImage {
	position: relative;
	vertical-align: bottom;
	width: 15rem;
}

.magnificationX2:hover {
	width: 30rem;
}

.magnificationX3:hover {
	width: 38rem;
}

.magnificationX5:hover {
	width: 60rem;
}

.apToolbar {
	font-family: "Arial";
	color: white;
	background: rgba(255, 255, 255, 0);
	z-index: 0;
	height: 100%;
}

.thumbHider {
	display: block;
	opacity: 0.7;
	margin-bottom: 2rem;
}

.thumbHider:hover {
	opacity: 1.0;
	cursor: pointer;
}

.thumbHiderImage {
	width: 40%;
	position: relative;
	left: 0px;
	top: 10px;
}

.hidden {
	visibility: hidden;
}

.apPreviews {
	font-family: "Arial";
	color: #ffffffff;
	background: rgba(255, 255, 255, 0);
	display: none;
	z-index: 0;
}

.apPreviews.vertical {
	width: 81%;
	max-height: 95vh;
	overflow-y: auto;
}

#pathologyContainer.closed .apPreviews.vertical {
	width: 0;
}

.apPreviews.horizontal {
	width: 100vw;
	height: 11em;
	overflow-x: auto;
	overflow-y: hidden;
}

.apPreviews.horizontal.lbp-open {
	/* if you modify this width check out if the littleBigPanel  opens correctly*/
	width: 79vw;
}

#main-layout.west.inner .apPreviews.horizontal {
	width: 50vw;
}

.apPreview {
	background: rgba(77, 83, 87, 1.0);
	color: white;
	display: inline-block;
	padding: 2px;
	border: 2px solid;
	position: relative;
	text-align: center;
	margin: 0.2em 0.25em;
}

#panel-left .apPreview.landscape.small {
	width: 26%;
	height: 2.2em;
}

#panel-left .apPreview.landscape.medium {
	width: 42%;
	height: 3.2em;
}

#panel-left .apPreview.landscape.large {
	width: 93%;
	height: 6.5em;
}

#panel-left .apPreview.portrait.small {
	width: 26%;
	height: 7em;
}

#panel-left .apPreview.portrait.medium {
	width: 42%;
	height: 11em;
}

#panel-left .apPreview.portrait.large {
	width: 93%;
	height: 20em;
}

#horizontalPreviewsDiv .apPreview.landscape.small {
	width: 3em;
	height: 2em;
}

#horizontalPreviewsDiv .apPreview.landscape.medium {
	width: 5em;
	height: 3em;
}

#horizontalPreviewsDiv .apPreview.landscape.large {
	width: 15em;
	height: 6em;
}

#horizontalPreviewsDiv .apPreview.portrait.small {
	width: 1.2em;
	height: 1.9em;
}

#horizontalPreviewsDiv .apPreview.portrait.medium {
	width: 2em;
	height: 3.2em;
}

#horizontalPreviewsDiv .apPreview.portrait.large {
	width: 3.8em;
	height: 7em;
}

.apPreviewImage {
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	z-index: 1;
}

.selectedSorting {
	opacity: 1 !important;
}

.apPreviewSortAlphabetic {
	bottom: 3px;
	right: 3px;
	padding-left: 0.5em;
	float: right;
	width: 1.5em;
	height: 1.1em;
	opacity: 0.7;
}

.apPreviewSortDate {
	bottom: 3px;
	right: 3px;
	padding-left: 0.5em;
	float: right;
	width: 1.9em;
	height: 1.1em;
	opacity: 0.7;
}

.apPreviewSortAlphabetic:hover {
	opacity: 1.0;
	cursor: pointer;
}
.apPreviewSortDate:hover {
	opacity: 1.0;
	cursor: pointer;
}

.apBlock {
	background: rgba(255, 255, 255, 0);
	display: block;
	border-bottom: 1px solid #94B4EB;
	margin: 0.5em;
	padding-bottom: 0.25em;
}

.apBlockHorizontal {
	display: block;
	border-bottom: none;
	border-right: 1px solid #94B4EB;
	padding-right: 1em;
}

.horizontalTrayRow {
	display: flex;
}

.apBlockLabel {
	font-size: 0.75em;
	padding-top: 3px;
	color: white;
}

.apBlockHeader {
	font-size: 0.8em;
	padding-top: 0.1em;
	height: 1.4em;
	padding-bottom: 0.5em;
}

.apSpecimen {
	background: rgba(255, 255, 255, 0.15);
	display: block;
	border-left: 1px solid#94B4EB;
	margin: 0.5em;
	margin-bottom: 1em;
}

.apPreviewsHeader {
	padding: 0.3em 0.5em;
	margin: 0.5em 0.5em 1em;
	background-color: #191b1e;
	display: grid;
	grid-gap: 0.3em;
	grid-template-columns: 5fr 1fr;
	grid-template-rows: auto;
	grid-template-areas:
			"caseData pathoOovObjects"
			"caseDescription caseDescription";
}

.apPreviewsHeader #caseData {
	font-size: 0.7em;
	grid-area: caseData;
}

.apPreviewsHeader #pathoOovObjects {
	grid-area: pathoOovObjects;
}

.apPreviewsHeader #caseDescription {
	font-size: 0.8em;
	grid-area: caseDescription;
	display: -webkit-box;
	max-height: 6.5em;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.apPreviews.horizontal .apPreviewsHeader {
	grid-template-rows: 1fr 2fr;
	min-width: 10em;
	max-width: 10em;
	margin-bottom: unset;
}

#headerCaseDescription {
	font-size: 0.8em;
}

.apPreviews.horizontal .apPreviewsHeader #headerCaseDescription {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	overflow: hidden;
	-webkit-box-orient: vertical;
}

.apSpecimenHorizontal {
	display: flex;
	margin-bottom: unset;
}

#apToolbarColumn {
	position: absolute;
	right: 0;
	width: 4em;
}

/* .apToolbar div {
	padding: 0px 0px;
} */

.apToolbar .zoom-levels div {
	padding-bottom: 0.2em;
}

.zoom-levels input{
	display: none;
}

.apToolbar label{
	color:#999;
	display:inline-block;
	width: 100%;
}

.apToolbar span.big {
	background-color: rgba(255, 255, 255, 0.15);
	border-radius: 50% 50% 50% 50%;
	display: inline-block;
	height: 8px;
	padding: 4px;
	width: 8px;
	margin-right: 4px;
}

.apToolbar span.small {
	border-radius: 50% 50% 50% 50%;
	display: block;
	height: 100%;
	transition: background 0.4s ease 0s;
	width: 100%;
}

.apToolbar input[type="radio"]:checked + label {
	color: #FFFFFF;
}

.apToolbar input[type="radio"]:checked + label span.small {
	background-color: rgba(235, 196, 71, 0.8);
	opacity: 1;
}

.apToolbar .circle .big{
	height:8px;
	width: 8px;
	padding : 4px;
	border:2px solid deepskyblue;
}

.apToolbar input[type="radio"]:checked + label.circle span.small {
	background-color :skyblue;
}

.layers-container {
	position: relative;
}

#layers-disabler {
	cursor: not-allowed;
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

#layers-disabler.active {
	z-index: 3;
}

.roiBar {
	display: inline-flex;
    flex-wrap: wrap;
}

.roiGroup {
	cursor: pointer;
}

.roiGroup.disabled {
	cursor: not-allowed;
}

.roiGroupImg {
	width: 1.5em;
    margin-right: 0.3em;
}

.saveRoi {
	width: 1.5em;
	color: #A3A3A3;
	margin-top: 0.5em;
	cursor: pointer;
}

.saveRoi:hover {
	color: #c0c0c0;
}

.saveRoiImg {
	max-width: 85%;
	max-height: 85%;
	padding-top: 5px;
	opacity: 0.7;
	user-select: none;
}

.saveRoiImg:hover {
	opacity: 1.0;
	cursor: pointer;
}

.saveRoi.disabled .saveRoiImg:hover {
	opacity: 0.7;
	cursor: not-allowed;
}

.roiLabel {
	padding-top: 1em;
	padding-bottom: 0.1em;
}

.apPreviewCheck {
	bottom: -4.5px;
	right: 0.5px;
	z-index: 2;
	position: absolute;
	width: 15px;
}

.apPreviewCheck svg {
	fill: #4bb944;
	stroke: #24292d;
	stroke-width: 5px;
}

.bookmark {
	position: absolute;
	z-index: 2;
	left: -9px;
	top: -9px;
	width: 15px;
	cursor: pointer;
}

.bookmark.favourite svg{
	fill: #ffeb3b;
	stroke: #24292d;
	stroke-width: 5px;
}

.bookmark svg{
	fill: gray;
	stroke: black;
	stroke-width: 5px;
}

.svg-layer {
	opacity: 0.5;
	margin-bottom: 0.0em;
	margin-right: 0.3em;
}

.svg-layer.enabled {
	opacity: 1.0;
}

.svg-layer .svg-layer-img {
	height: 1em;
	margin-bottom: 0.8em;
}

.cancer-classification {
	width: 1.3em;
    position: absolute;
    right: -10px;
    top: -9px;
}

.svg-item {
	display: flex;
	cursor: pointer;
}

.svg-label {
	opacity: 0.5;
	margin-bottom: 0.3em;
	width: 2em;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.svg-label.enabled {
	opacity: 1.0;
}

#slider-opacity {
  -webkit-appearance: none;
  height: 2px;
  width: 80%;
  margin-bottom: 1rem;
}

/* track */
#slider-opacity::-webkit-slider-runnable-track {
    height: 3px;
    cursor: pointer;
}

/* thumb */
#slider-opacity::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 12px;
    width: 12px;
    background: #20A8D8;
    margin-top: -5px;
    border-radius: 50%;
}