/* ===================================================
PDF Inline Viewer
=================================================== */

#viewerContainer {
    inset: 37px 0 0;
}

#toolbarViewer {
	display: flex; 
	justify-content: center; 
	background-color: #c7e4d9;
}

#toolbarViewerLeft {
	display: flex; 
	justify-content: space-between; 
	width:100%;
}

.navButton {
	display: flex; 
	justify-content: center; 
	width: 30%;
}

.zoomButton {
	display: flex; 
	justify-content: center; 
	width: 24.5%;
}

.toolbarButton::before {
		background-color: #c7e4d9;
		background-size: contain;
		top: 2px;
		width: 26px;
		height: 26px;
}

.toolbarButton p {
	margin-top: 3px;
}

.toolbarButton {
	width: 50%;
}

#previous {
	width: 55%;

	&::before {
		-webkit-mask-image: url("../images/arrow_buttons_small_up.png");
		mask-image: url("../images/arrow_buttons_small_up.png");
		background-image: url("../images/arrow_buttons_small_up.png");
		left: 82%;
	}

	&:hover::before {
		background-image: url("../images/arrow_buttons_small_up_hover.png");
	}
}

#next {

	width: 45%;

	&::before {
		-webkit-mask-image: url("../images/arrow_buttons_small_down.png");
		mask-image: url("../images/arrow_buttons_small_down.png");
		background-image: url("../images/arrow_buttons_small_down.png");
		left: 3%;
	}

	&:hover::before {
		background-image: url("../images/arrow_buttons_small_down_hover.png");
	}
}

#zoomOut {

	width: 53%;

	&::before {
		-webkit-mask-image: url("../images/button_zoom_out.png");
		mask-image: url("../images/button_zoom_out.png");
		background-image: url("../images/button_zoom_out.png");
		left: 2%;
	}

	&:hover::before {
		background-image: url("../images/button_zoom_out_hover.png");
	}
}

#zoomIn {

	width: 47%;

	&::before {
		-webkit-mask-image: url("../images/button_zoom_in.png");
		mask-image: url("../images/button_zoom_in.png");
		background-image: url("../images/button_zoom_in.png");
		left: 71%;
	}

	&:hover::before {
		background-image: url("../images/button_zoom_in_hover.png");
	}
}

#pageNumber {
	background-color: #c7e4d9;
	border: none;
	width: 18px;
	margin: 0px;
	padding: 0px;
	padding-top: 4px;
	font-size: 15px !important;
}

.toolbarLabel {
	padding: 0; 
	margin: 0; 
	font-size: 15px;
}

.pdfButtonLabel {
	padding-bottom: 6px;
	font-size: 15px !important;

	&:hover {
		text-decoration: underline;
	}
}

.labelLeft {
	float: left;
}
 
.labelRight {
	float: right;
}

.splitToolbarButton:focus, 
.splitToolbarButton:hover {
	background-color: #c7e4d9;
}

.splitToolbarButton:focus-visible,
.splitToolbarButton > .toolbarButton:focus-visible {
	outline: 2px solid #00008B !important;
	background-color: #c7e4d9;
}

.toolbarButton:focus, 
.toolbarButton:hover {
	background-color: #c7e4d9;
}

.toolbarButton:focus-visible {
	outline: 2px solid #00008B !important;
	background-color: #c7e4d9;
}

.toolbarButton p:focus, 
.toolbarButton p:hover {
	background-color: #c7e4d9;
}

.toolbarButton p:focus-visible {
	outline: 2px solid #00008B !important;
	background-color: #c7e4d9;
}

.splitToolbarButton > .toolbarButton:is(:hover),
.dropdownToolbarButton:hover{
	background-color: #c7e4d9;
}

.toolbarButton:is(:hover) {
	background-color:var(--button-hover-color);
}

.toolbarButton, .dropdownToolbarButton, .secondaryToolbarButton, .dialogButton, #toolbarViewerLeft {
	color: #535353 !important;
}

#toolbarContainer {
	height: 37px;
}

#toolbarViewer {
    height: 37px;
}

.loadingInput {
	display: table;
}

.splitToolbarButton {
    margin: 4px;
}

.pageIndex {
	padding-top: 2px;
	width: 13%;
}

#pageNumber, .toolbarField, .toolbarLabel {
	color: #535353 !important;

}

#pageNumber, .toolbarField, .toolbarLabel {
	color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3)) !important;

}
  
@media all and (max-width: 840px) {
	.navButton {
		width: 34%;
	}

	.zoomButton {
        width: 27.5%;
    }
}

@media all and (max-width: 750px) {
	.navButton {
		width: 37%;
	}

	.zoomButton {
        width: 31%;
    }
}

@media all and (max-width: 690px) {
	.navButton {
		width: 42%;
	}

	.zoomButton {
        width: 33%;
    }

	.toolbarButton p {
		font-size: 14px;
		margin-top: 6px;
	}
}

@media all and (max-width: 620px) {
	.toolbarButton p {
		font-size: 14px;
		margin-top: 6px;
	}
}

@media all and (max-width: 560px) {

	.toolbarButton p {
		font-size: 14px;
		margin-top: 6px;
	}

	.zoomButton {
        width: 36%;
    }

	.navButton {
		width: 44%;
	}
}

@media all and (max-width: 470px) {

	.splitToolbarButton {
		margin-left: 0;
	}

	.toolbarButton {
		margin: 0;
		padding: 0;
		padding-top: 5px;
	}

	.toolbarButton p {
			font-size: 12px;
			margin-top: 2px;
		}

	#previous::before {
		left: 77%;
	}

	#next::before {
		left: 2%;
	}

	#zoomIn {
		width: 50%;
	}

	#zoomOut {
		width: 50%;
	}

	#zoomIn::before {
		left: 60%;
		}

	#zoomOut::before {
		left: -5%;
	}

	.navButton {
		width: 47%;
	}

	.zoomButton {
        width: 38%;
		margin-left: 4px;
    }

	#viewerContainer {
		inset: 42px 0 0;
		overflow:hidden;
	}
	
	#pageNumber {
		font-size: 12px !important;
	}

	.toolbarLabel {
		font-size: 12px;
		margin-right: 0;
	}
}

@media all and (max-width: 400px) {

	.toolbarButton::before {
			width: 18px;
			height: 18px;
			top: 6px;
		}

	.toolbarButton p {
		font-size: 11px;
		margin-top: 2px;
	}

	.navButton {
		width: 44%;
	}
	
	#pageNumber {
        font-size: 11px !important;
    }

	.toolbarLabel {
        font-size: 11px;
    }

	.splitToolbarButton {
		margin-left:0;
	}

	.zoomButton {
		margin-left: 0;
		margin-right: 0;
	}

	#previous::before {
		left: 80%;
	}

	#zoomIn::before {
		left: 64%;
	}

	#next::before {
        left: 1%;
    }

	#zoomOut::before {
        left: -6%;
    }

	.pageIndex {
		width: 14%;
	}
}

@media all and (max-width: 350px) {

	.toolbarLabel {
		padding-right: 5px;
	}

	.hiddenSmallerView {
		display: none;
	}

	#previous::before {
        left: 79%;
    }

	#zoomIn::before {
        left: 62%;
    }

	.splitToolbarButton {
        margin-top: 6px;
		margin-right: 4px;
    }
}