:root {
	--border-color: #72808e;
	--bg-dark: #3e4041;
	--color-text: rgb(232, 234, 237);
	--bg-dark-action: #35363a;
	--bg-blue: #aae1fb;
	--bg-green: #abece1;
	--bg-orange: #fbeccd;
	--bg-red: #f7b3bf;
	--bg-purple: #b9cbff;
	--color-blue: rgb(41,98,255);
	--color-green: rgb(11,183,175);
	--color-orange: rgb(238,157,1);
	--color-red: rgb(246,78,96);
	--color-purple: rgb(116,96,238);
	--color-search: #167495;
	--color-action-map: #20a8d8;
	--slider-border-color: rgb(50, 54, 57)
}

i.fal, i.far, i.fas {
	pointer-events: none !important;
}

#viewerContainer::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

#viewerContainer::-webkit-scrollbar-track {
	background: #f5f5f5;
}

#viewerContainer::-webkit-scrollbar-thumb {
	background-color: #ddd;
	border-radius: 20px;
	border: 0px solid #f5f5f5;
}

.custom-overflow {
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #ddd #f5f5f5;
}

	.custom-overflow::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}

	.custom-overflow::-webkit-scrollbar-track {
		background: #f5f5f5;
	}

	.custom-overflow::-webkit-scrollbar-thumb {
		background-color: #ddd;
		border-radius: 20px;
		border: 0px solid #f5f5f5;
	}

.modal.modal-fullscreen {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	padding: 0 !important;
	resize: none !important;
}

	.modal.modal-fullscreen .modal-dialog {
		position: fixed;
		margin: 0;
		width: 100%;
		height: 100%;
		padding: 0;
	}

.tooltip .arrow:before {
	border-top-color: black !important;
}

[vmodule-name="reviewfile"] {
	width: 100vw;
	height: 100vh;
}

.reviewfile_wrapper {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	background: #fff
}

.reviewfile_header {
	height: 35px;
	border-bottom: 1px solid var(--border-color);
	position: relative
}

	.reviewfile_header .title {
		line-height: 35px;
		padding-left: 15px;
		font-weight: 400;
		color: #20a8d8;
		/*text-transform: uppercase*/
	}

	.reviewfile_header .actions {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center
	}

		.reviewfile_header .actions a {
			height: 35px;
			width: 35px;
			display: flex;
			justify-content: center;
			align-items: center
		}

		.reviewfile_header .actions a:hover{
			text-decoration:none;
		}

.reviewfile_content {
	flex: 1;
	height: calc(100% - 80px);
	width: 100%;
	background-color: var(--bg-dark);
	color: var(--color-text);
}

	.reviewfile_content .wrapper_content {
		float: left;
		position: relative;
		height: 100%;
		width: 100%;
		transition: width 0.3s ease-in-out;
	}

		.reviewfile_content .wrapper_content .file_container {
			padding-left: 50px;
			padding-right: 50px;
		}

		.reviewfile_content .wrapper_content .btn-control {
			position: absolute;
			width: 50px;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			top: 50%;
			transform: translate(0, -50%);
			background: var(--bg-dark-action);
			border-radius: 50%;
			opacity: 1;
			visibility: visible;
			transition: opacity 0.5s ease-in, visibility .6s ease-in-out;
		}

			.reviewfile_content .wrapper_content .btn-control.hidden {
				opacity: 0;
				visibility: hidden
			}

		.reviewfile_content .wrapper_content .btn-control:hover {
			text-decoration:none;
		}

			.reviewfile_content .wrapper_content .btn-control.previous {
				left: 10px
			}

			.reviewfile_content .wrapper_content .btn-control.next {
				right: 10px
			}

		.reviewfile_content .wrapper_content .iframe-container {
			height: 100%;
			width: 100%;
			margin: 0;
			padding-left: 0px;
			padding-right: 0px;
		}

			.reviewfile_content .wrapper_content .iframe-container iframe {
				border: 0;
				height: 100%;
				width: 100%
			}

		.reviewfile_content .wrapper_content .image_container {
			height: 100%;
			width: 100%;
			text-align: center;
			margin: 0;
			overflow: hidden;
			position: relative;
			padding: 0
		}

			.reviewfile_content .wrapper_content .image_container img {
				position:absolute;
			}

		.reviewfile_content .wrapper_content .empty_container {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%
		}

			.reviewfile_content .wrapper_content .empty_container .content-error {
				text-align: center;
				padding: 20px;
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center
			}

			.reviewfile_content .wrapper_content .empty_container .icon-error {
				font-size: 10em;
				color: var(--color-red);
			}

			.reviewfile_content .wrapper_content .empty_container h2 {
				font-size: 2em;
				font-weight: bold;
			}

			.reviewfile_content .wrapper_content .empty_container p {
				font-style: italic;
				font-size: 1.1em;
				margin: 20px;
			}


	.reviewfile_content .slider_right {
		float: left;
		width: 0;
		height: 100%;
		transition: width 0.3s ease-in-out, border 0.3s ease-in-out;
	}

.reviewfile_footer {
	height: 45px;
	border-top: 1px solid var(--border-color);
	position: relative
}

	.reviewfile_footer .file-info {
		height: 100%;
		width: 40%;
		display: flex;
		justify-content: left;
		align-items: center;
		padding-left: 15px;
	}

	.reviewfile_footer .action-center {
		position: absolute;
		text-align: center;
		display: flex;
		justify-content: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-clip: content-box;
	}


	.reviewfile_footer .action-right {
		position: absolute;
		text-align: center;
		display: flex;
		justify-content: center;
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translate(0, -50%);
		background-clip: content-box;
	}

.open-right .slider_right {
	width: 140px;
	border-left: 1px solid var(--slider-border-color);
}

.open-right .wrapper_content {
	width: calc(100% - 140px);
}


.btn-action {
	height: 35px;
	width: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none
}

	.btn-action i {
		pointer-events: none !important
	}

	.btn-action:hover {
		text-decoration: none
	}

	.btn-action:hover i {
		font-weight: 500;
		-webkit-animation: jello-horizontal 0.9s both;
		animation: jello-horizontal 0.9s both;
	}

@-webkit-keyframes jello-horizontal {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	30% {
		-webkit-transform: scale3d(1.25, 0.75, 1);
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		-webkit-transform: scale3d(0.75, 1.25, 1);
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		-webkit-transform: scale3d(1.15, 0.85, 1);
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		-webkit-transform: scale3d(0.95, 1.05, 1);
		transform: scale3d(0.95, 1.05, 1);
	}

	75% {
		-webkit-transform: scale3d(1.05, 0.95, 1);
		transform: scale3d(1.05, 0.95, 1);
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes jello-horizontal {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	30% {
		-webkit-transform: scale3d(1.25, 0.75, 1);
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		-webkit-transform: scale3d(0.75, 1.25, 1);
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		-webkit-transform: scale3d(1.15, 0.85, 1);
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		-webkit-transform: scale3d(0.95, 1.05, 1);
		transform: scale3d(0.95, 1.05, 1);
	}

	75% {
		-webkit-transform: scale3d(1.05, 0.95, 1);
		transform: scale3d(1.05, 0.95, 1);
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}


.group-thumbnail {
	height: 100%;
	text-align: center;
	direction: rtl;
	overflow-x: hidden;
	padding: 10px 0px;
}

.custom-thumbnail {
	/*	-webkit-perspective: 1000px;
	perspective: 1000px;*/
	display: inline-block;
	margin: 5px 0px;
	cursor: pointer;
	direction: ltr;
}

	.custom-thumbnail.selected {
		transform: scale(1.2);
		margin: 10px 0px;
	}

		.custom-thumbnail.selected .front,
		.custom-thumbnail.selected .back {
			border: 1px solid var(--color-blue);
			border-color: #8ad4ee;
			box-shadow: 0 0 0 0.2rem rgb(32 168 216 / 25%);
		}

	.custom-thumbnail:not(.selected):hover .flipper {
		transform: scale(1.1);
		/*-webkit-transform: rotateY(180deg);
		transform: rotateY(180deg);*/
	}


	.custom-thumbnail,
	.custom-thumbnail .front,
	.custom-thumbnail .back {
		width: 100px;
		height: 100px;
		background: var(--color-text);
	}

		.custom-thumbnail .flipper {
			-webkit-transition: 0.6s;
			transition: 0.6s;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
			position: relative;
		}

		.custom-thumbnail img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.custom-thumbnail .front,
		.custom-thumbnail .back {
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			position: absolute;
			top: 0;
			left: 0;
			width: 100px;
			height: 100px;
			box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
		}

		.custom-thumbnail .front {
			z-index: 2;
			display: flex;
			justify-content: center;
			align-items: center;
		}

			.custom-thumbnail .front i {
				font-size: 5rem
			}

				.custom-thumbnail .front i.blue {
					color: var(--color-blue)
				}

				.custom-thumbnail .front i.green {
					color: var(--color-green)
				}

				.custom-thumbnail .front i.red {
					color: var(--color-red)
				}

				.custom-thumbnail .front i.orange {
					color: var(--color-orange)
				}

				.custom-thumbnail .front i.purple {
					color: var(--color-purple)
				}

		.custom-thumbnail .back {
			-webkit-transform: rotateY(180deg);
			transform: rotateY(180deg);
			display: flex;
			justify-content: center;
			align-items: center
		}

#btnSliderToggle.expand i:before {
	content: "\f424";
	font-family: "Font Awesome 5 Pro";
}

#btnSliderToggle i:before {
	content: "\f422";
	font-family: "Font Awesome 5 Pro";
}