#pathologyContainer {
	width: 22em;
}

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

#pathologyContainer #apToolbar {
	width: 19%;
	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: 93vh;
    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 {
	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;
}

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

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

.apToolbar div {
	padding: 4px;	
}
   
.apToolbar input{
    display: none;
}
   
.apToolbar label{
    color:#999;
    display:inline-block;
}
     
.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;
}

.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: block;
}

.roiGroup {
	height: 2em;	
	padding: 1px !important;
	cursor: pointer;
}

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

.roiGroupImg {
	max-width: 100%;
	max-height: 100%;
}

.saveRoi {
	height: 2em;
}

.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: 1.5em;
    padding-bottom: 0.5em;
    padding-left: 0.25em;
}

.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 {
	cursor: pointer;
	opacity: 0.5;
	margin-bottom: 0.3em;
}

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

.svg-layer .svg-layer-img {
	height: 1em;
    cursor: pointer;
}