$simple-line-font-path: "~simple-line-icons/fonts/" !default;
$simple-line-font-family: "simple-line-icons" !default;
$simple-line-icon-prefix: "slicon-" !default;

@import '~simple-line-icons/scss/simple-line-icons';

.pdf-light-viewer {
	padding: 40px 0 20px;
	position: relative;
	margin-top: 20px;
	text-align: center;

	[class^="slicon-"]:before,
	[class*=" slicon-"]:before {
		font-family: 'simple-line-icons';
	}

	.initially-hidden {
		display: none;
	}

	.animated {
		-webkit-transition:margin-left 0.5s;
		-moz-transition:margin-left 0.5s;
		-ms-transition:margin-left 0.5s;
		-o-transition:margin-left 0.5s;
		transition:margin-left 0.5s;
	}

	.pdf-light-viewer-magazine-viewport {
		display: block;
		z-index: 101;
		margin-bottom: 0px;

		.shadow {
			-webkit-transition: -webkit-box-shadow 0.3s;
			-moz-transition: -moz-box-shadow 0.3s;
			-o-transition: -webkit-box-shadow 0.3s;
			-ms-transition: -ms-box-shadow 0.3s;

			box-shadow:
				0px 2px 2px 0px rgba(0, 0, 0, 0.14),
				0px 3px 1px -2px rgba(0, 0, 0, 0.2),
				0px 1px 5px 0px rgba(0, 0, 0, 0.12);
		}

		.next-button,
		.previous-button {
			width:22px;
			position:absolute;
			bottom:20px;
		}

		.next-button {
			right:-22px;
			-webkit-border-radius:0 15px 15px 0;
			-moz-border-radius:0 15px 15px 0;
			-ms-border-radius:0 15px 15px 0;
			-o-border-radius:0 15px 15px 0;
			border-radius:0 15px 15px 0;
		}

		.previous-button {
			left:-22px;
			-webkit-border-radius:15px 0 0 15px;
			-moz-border-radius:15px 0 0 15px;
			-ms-border-radius:15px 0 0 15px;
			-o-border-radius:15px 0 0 15px;
			border-radius:15px 0 0 15px;
		}

		.previous-button-hover,
		.next-button-hover {
			background-color:rgba(0,0,0, 0.2);
		}

		.previous-button-hover,
		.previous-button-down {
			background-image:url(../img/arrows.png);
			background-position:-4px 284px;
			background-repeat:no-repeat;
		}

		.previous-button-down,
		.next-button-down {
			background-color:rgba(0,0,0, 0.4);
		}

		.next-button-hover,
		.next-button-down {
			background-image:url(../img/arrows.png);
			background-position:-38px 284px;
			background-repeat:no-repeat;
		}

		.zoom-in .next-button,
		.zoom-in .previous-button {
			display:none;
		}

		.pdf-light-viewer-magazine-viewport-container {
			position:relative;
			width: 100%;
			margin:auto;
		}

		.pdf-light-viewer-magazine {
			margin-left: auto !important;
			margin-right: auto !important;

			.even .gradient {
				position:absolute;
				top:0;
				left:0;
				width:100%;
				height:100%;

				background-image:linear-gradient(to right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);

				box-shadow:0 0 20px rgba(0,0,0,0.2);
			}

			.odd .gradient {
				position:absolute;
				top:0;
				left:0;
				width:100%;
				height:100%;

				background-image: linear-gradient(to left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
			}

			.page {
				background-color:white;
				background-repeat:no-repeat;
				background-size:100% 100%;
				padding: 0 !important;

				box-shadow:
					0px 2px 2px 0px rgba(0, 0, 0, 0.14),
					0px 3px 1px -2px rgba(0, 0, 0, 0.2),
					0px 1px 5px 0px rgba(0, 0, 0, 0.12);

				img {
					-webkit-touch-callout: none;
					-webkit-user-select: none;
					-khtml-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
					margin:0;
				}
			}
		}

		.loader {
			background-image:url(../img/loader.gif);
			width:22px;
			height:22px;
			position:absolute;
			top:280px;
			left:219px;
		}
	}

    &.pdf-light-viewer-fullscreen {
        padding: 0;
        background: #fff;
		overflow: auto;
        width: 100%;
        height: 100%;
        width: 100vw;
        height: 100vh;
        margin-top: 0px;

		.slicon-size-fullscreen {
			display: none;
		}

		.slicon-size-actual {
			display: inline;
		}

        .pdf-light-viewer-magazine-viewport.with-nav-top {
            margin-bottom: 80px;
            position: relative;

            .pdf-light-viewer-features-bottom-toolbar-panel {
                bottom: -52px;
            }
        }

        .pdf-light-viewer-magazine-viewport.with-nav-bottom {
            margin-top: 45px;
        }
    }


	.pdf-light-viewer-features-top-panel {
		list-style: none;
		position: static;
        display: inline-block;
		text-align: center;
		background-image: linear-gradient(to bottom, #ffffff 0%, #fefefe 57%, #F6F6F6 100%);
		border-radius: 6px;
		padding: 8px;
		margin: 10px 0;
		box-shadow:
			1px 2px 2px 0px rgba(0, 0, 0, 0.14),
			0px 3px 2px -1px rgba(0, 0, 0, 0.2),
			0px 1px 5px 0px rgba(0, 0, 0, 0.12);

		li {
			display: inline-block;
			vertical-align: middle;
			margin: 0px 4px;

			&:after {
				content: '';
				display: inline-block;
				vertical-align: middle;
				border-left: 1px solid LightGray;
				height: 25px;
				margin-left: 6px;
			}

			&:last-child {
				&:after {
					display: none;
					margin-left: 0px;
				}
			}

			a,
			button,
			span {
				border: none;
				background: transparent;
				text-decoration: none;
				border: none;
				font-size: 25px;
				line-height: 35px;
				color: RoyalBlue;
				display: inline-block;
				vertical-align: middle;
				margin: 0;
				padding: 0;
			}

			button:hover {
				border: none;
				outline: none;
				box-shadow: none;
			}

			a {
				&:hover {
					text-decoration: none;
					border: none;
				}

				&:focus {
					outline: none;
				}
			}

			span {
				color: #777;
			}

            .pdf-light-viewer-goto-page-input {
                font-size: 17px !important;
                display: inline-block;
                text-align: center;
                width: 25px;
                border: none;
                padding: 3px 0 !important;
                margin: 0;
                border-bottom: 1px solid RoyalBlue;
                transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
                background: transparent;
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, RoyalBlue 4%)  !important;
                background-position: -25px 0;
                background-size: 25px 100%;
                background-repeat: no-repeat;
                color: #777;
                box-shadow: none;

                &:focus {
                    box-shadow: none;
                    outline: none;
                    background-position: 0 0;
                }
            }
		}
	}

    .pdf-light-viewer-features-bottom-toolbar-panel {
        @extend .pdf-light-viewer-features-top-panel;
        top: auto;
        bottom: -32px;
		right: 80px;
		border-radius: 6px;
    }

	.pdf-light-viewer-magazine-thumbnails {
		text-align: center;

		.pdf-light-viewer-features-bottom-panel {
			display: inline-block;
			text-align: center;
			background-image: linear-gradient(to bottom, #ffffff 0%, #fefefe 57%, #F6F6F6 100%);
			border-radius: 6px;
			padding: 3px 8px;
			margin: 10px;
			box-shadow:
				1px 2px 2px 0px rgba(0, 0, 0, 0.14),
				0px 3px 2px -1px rgba(0, 0, 0, 0.2),
				0px 1px 5px 0px rgba(0, 0, 0, 0.12);
		}

		.bx-wrapper {
			margin: 0px auto 20px;
			box-shadow: none;
			background: transparent;
			border-color: transparent;
			padding: 0 30px;

			.bx-pager {
				padding-top: 0px;
				bottom: 0px;
				position: static;

				a {
					background: #777;

					&.active {
						background: RoyalBlue;
					}
				}
			}

			.bx-controls-direction a {
				z-index: 10;
				text-indent: 1px;
				font-size: 26px;
				color: RoyalBlue;
			}

			.bx-controls-direction a,
			.bx-controls-direction a:hover {
				text-decoration: none;
				border: none;
			}

			.bx-prev {
				left: -5px;
				background: transparent;
			}

			.bx-next {
				right: -5px;
				background: transparent;
			}

			.bx-viewport {
				box-shadow: none;
				border: none;
			}
		}

		ul {
			margin:0;
			padding:0;
			height: 180px;
			text-align:center;
			//-webkit-transform:scale3d(0.5, 0.5, 1);
			//-moz-transform:scale3d(0.5, 0.5, 1);
			//-o-transform:scale3d(0.5, 0.5, 1);
			//-ms-transform:scale3d(0.5, 0.5, 1);
			//transform:scale3d(0.5, 0.5, 1);
			-webkit-transition:-webkit-transform ease-in-out 100ms;
			-moz-transition:-moz-transform ease-in-out 100ms;
			-ms-transition:-ms-transform ease-in-out 100ms;
			-o-transition:-o-transform ease-in-out 100ms;
			transition:transform ease-in-out 100ms;
		}

		li {
			padding:15px 0px;
			margin: 0;
			list-style:none;
		}

		.pdf-light-viewer-slide {
			display: block;
			box-shadow:
				0px 2px 2px 0px rgba(0, 0, 0, 0.14),
				0px 3px 1px -2px rgba(0, 0, 0, 0.2),
				0px 1px 5px 0px rgba(0, 0, 0, 0.12);
			background: #fff;
			text-align: center;
			cursor: pointer;
			border: 1px solid rgba(0, 0, 0, 0.08);

			a {
				display: inline-block;
			}

			img {
				max-width: 73px;
				max-height: 100px;
				display: inline-block;
			}

			span {
				clear: both;
				display: block;
			}

			&.current {
				box-shadow:
					0px 2px 2px 0px rgba(65, 105, 225, 0.14),
					0px 3px 1px -2px rgba(65, 105, 225, 0.2),
					0px 1px 5px 0px rgba(65, 105, 225, 0.12);
				border: 1px solid rgba(65, 105, 225,0.23);
			}

			&.thumb-hover {
				box-shadow:
					0 3px 6px rgba(65, 105, 225,0.16),
					0 3px 6px rgba(65, 105, 225,0.23);
				border: 1px solid rgba(65, 105, 225,0.23);
			}
		}
	}

    .pdf-light-viewer-magazine-thumbnails {
        .pdf-light-viewer-features-top-nav-panel {
            @extend .pdf-light-viewer-features-bottom-panel;
			border-radius: 6px;
        }
    }


	.thumbanils-touch ul {
		-webkit-transform:none;
		-moz-transform:none;
		-o-transform:none;
		-ms-transform:none;
		transform:none;
	}

	.exit-message {
		position: absolute;
		top:10px;
		left:0;
		width:100%;
		height:40px;
		z-index:10000;

		> div {
			width:140px;
			height:30px;
			margin:auto;
			background:rgba(0,0,0,0.5);
			text-align:center;
			font:12px arial;
			line-height:30px;
			color:white;
			border-radius:10px;
		}
	}

    .pdf-light-viewer-print-options-contaner {
		display: none;
	}

}

body .pdf-light-viewer-tips {
	margin-left: -12px;
	background: transparent;
	border-color: transparent;

	.qtip-tip {
		background: #fff;
	}

	.qtip-content {
		background-image: linear-gradient(to bottom, #ffffff 0%, #fefefe 57%, #F6F6F6 100%);
		border-radius: 6px;
		padding: 12px 24px;
		box-shadow:
			1px 2px 2px 0px rgba(0, 0, 0, 0.14),
			0px 3px 2px -1px rgba(0, 0, 0, 0.2),
			0px 1px 5px 0px rgba(0, 0, 0, 0.12);

		ul {
			padding: 0;
			margin: 0;
		}

		li {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		a {
			color: RoyalBlue;
			text-decoration: none;
			font-size: 16px;
			line-height: 24px;
		}
	}
}