:root {
	--customer-color: #000000;
	--customer-second-color: #ffffff;
	--customer-third-color: #4c96cf;
}

@font-face {
	font-family: 'HypMultimediaModalViewers';
	src: url('../fonts/HypMultimediaModalViewers.eot?d04vgr');
	src: url('../fonts/HypMultimediaModalViewers.eot?d04vgr#iefix')
	format('embedded-opentype'), url('../fonts/HypMultimediaModalViewers.ttf?d04vgr')
	format('truetype'), url('../fonts/HypMultimediaModalViewers.woff?d04vgr')
	format('woff'), url('../fonts/HypMultimediaModalViewers.svg?d04vgr#HypMultimediaModalViewers') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

.viewer {
	overflow: hidden;
}

.hidden{
	display: none !important;
}

.ui-360.ui-360-mouseout {
	display: initial;
}

.ui-360 .ui-360-buttons.customBar{
	position: absolute;
	background-color: transparent;
	height: 24px;
	padding: 0;
	line-height: 24px;
	bottom: 20px;
}


.ui-360 .ui-360-quick-zoom-tool.customQuickZoom{
	background-image:none;
	font-size: 20px;
	height: 40px;
	width: 40px;
	margin: 0;
	color:var(--customer-color);
	border: 1px solid transparent;
    border-radius: 50px;
    line-height: 38px;
	text-align: center;
}

.ui-360 .ui-360-quick-zoom-tool.customQuickZoom:hover{
	color:var(--customer-color);
	border: 1px solid var(--customer-third-color);
    border-radius: 50px;
    line-height: 38px;
}

.ui-360 .ui-360-quick-zoom-tool.customQuickZoom.ui-360-active{
	color:var(--customer-third-color);
}

.ui-360 .ui-360-zoomin-tool.customZoomIn{
	background-image:none;
	font-size: 20px;
	height: 40px;
	width: 40px;
	margin: 0;
	color:var(--customer-color);
	line-height: 40px;
	text-align: center;
}

.ui-360 .ui-360-zoomin-tool.customZoomIn:hover,.ui-360 .ui-360-zoomin-tool.customZoomIn.ui-360-active{
	color:var(--customer-color);
	border: 1px solid var(--customer-third-color);
    border-radius: 50px;
    line-height: 38px;
}

.ui-360 .ui-360-zoomout-tool.customZoomOut{
	background-image:none;
	font-size: 20px;
	height: 40px;
	width: 40px;
	margin: 0;
	color:var(--customer-color);
	line-height: 40px;
	text-align: center;
}

.ui-360 .ui-360-zoomout-tool.customZoomOut:hover,.ui-360 .ui-360-zoomout-tool.customZoomOut.ui-360-active{
	color:var(--customer-color);
	border: 1px solid var(--customer-third-color);
    border-radius: 50px;
    line-height: 38px;
}

.ui-360 .ui-360-pan-tool.customPan{
	background-image:none;
	font-size: 20px;
	height: 40px;
	width: 40px;
	margin: 0 0 0 -8px;
	color:var(--customer-color);
	border: 1px solid transparent;
    border-radius: 50px;
    line-height: 38px;
	text-align: center;
}

.ui-360 .ui-360-pan-tool.customPan:hover{
	color:var(--customer-color);
	border: 1px solid var(--customer-third-color);
    border-radius: 50px;
    line-height: 38px;
}

.ui-360 .ui-360-pan-tool.customPan.ui-360-active{
	color:var(--customer-third-color);
}

.ui-360 .ui-360-rotation.customRotation{
	position: absolute;
	background: rgba(0,0,0,0);
	background-image:none;
	height:24px;
	line-height: 24px;
	cursor: pointer !important;
	width: 60%;
    left: 20%;
    bottom: 10px;
}

.ui-360.ui-360-mobile .ui-360-rotation.customRotation{
	position: absolute;
	background: rgba(0,0,0,0);
	background-image:none;
	height:24px;
	line-height: 24px;
	cursor: pointer !important;
	width: 60%;
	left:  20%;
}

.ui-360 .ui-360-fullsize-toggler.customFullScreen, .ui-360 .ui-360-fullsize-toggler.customExitFullScreen{
	position: absolute;
	background-image:none;
	font-size: 20px;
	height: 24px;
	width: 24px;
	margin: 0;
	color:var(--customer-color);
	line-height: 24px;
	bottom: 0;
	text-align: center;
    display: none;
}

.ui-360 .ui-360-fullsize-toggler.customFullScreen:hover, .ui-360 .ui-360-fullsize-toggler.customExitFullScreen:hover{
	color:var(--customer-third-color);
}

.ui-360.ui-360-mouseout .slider{
	display: none;
}

.ui-360 .slider {
	position: absolute;
	bottom: 0px;
	left: 20%;
	z-index: 4001;
	width: 60%;
	height: 24px;
	line-height: 24px;
	pointer-events: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	bottom: 10px;
}
/*360 ICON on Mobile:  Center the contents*/
.ui-360.ui-360-mobile .slider{
	text-align: center;
}
/*360 ICON on Mobile:  Set the icon*/
/*
.ui-360.ui-360-mobile .slider::before{
	font-family: 'HypMultimediaModalViewers' !important;
	content: "\e901";
	font-size: 2rem;
}
*/

/* https://uxwing.com/360-degree-rotate-icon/ */
.ui-360.ui-360-mobile .slider {
    text-align: center;
    background-image: url('./images/360-degree-rotate.png');
    background-size: 48px 26px;
    background-repeat: no-repeat;
    height: 26px;
    left: calc(50% - 24px);
}


.ui-360 .slider input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	height: 24px;
	line-height: 24px;
	background: rgba(0,0,0,0);
}
/*360 ICON on Mobile:  Hide slider*/
.ui-360.ui-360-mobile .slider input[type=range]{
	display: none;
}

.ui-360 .slider input[type=range]:focus {
	outline: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

.ui-360 .slider input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	animate: 0.2s;
	background: #dbdbdb;
	border-radius: 31px;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

.ui-360 .slider input[type=range]::-webkit-slider-thumb {
	height: 8px;
    width: 202px;
	border-radius: 31px;
	background: var(--customer-third-color) /*url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIyMywxMiAxNiwxNyAxNiw3ICIvPgo8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjEsMTIgOCwxNyA4LDcgIi8+Cjwvc3ZnPgo=') no-repeat center center*/;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -2px;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	background-size: 18px;
}

.ui-360 .slider input[type=range]:focus::-webkit-slider-runnable-track {
	background: var(--customer-color);
}

.ui-360 .ui-360-mw.ui-360-mw-zi-lt, .ui-360 .ui-360-mw.ui-360-mw-zo-rb {
	border-left: 3px solid var(--customer-third-color) !important;
	border-top: 3px solid var(--customer-third-color) !important;
}

.ui-360 .ui-360-mw.ui-360-mw-zi-rt, .ui-360 .ui-360-mw.ui-360-mw-zo-lb {
	border-right: 3px solid var(--customer-third-color) !important;
	border-top: 3px solid var(--customer-third-color) !important;
}

.ui-360 .ui-360-mw.ui-360-mw-zi-lb, .ui-360 .ui-360-mw.ui-360-mw-zo-rt {
	border-left: 3px solid var(--customer-third-color) !important;
	border-bottom: 3px solid var(--customer-third-color) !important;
}

.ui-360 .ui-360-mw.ui-360-mw-zi-rb, .ui-360 .ui-360-mw.ui-360-mw-zo-lt {
	border-right: 3px solid var(--customer-third-color) !important;
	border-bottom: 3px solid var(--customer-third-color) !important;
}

.ui-360 .ui-360-selection {
	background-color: var(--customer-third-color) !important;
	border: 1px solid var(--customer-first-color) !important;
}
/*360 ICON on Mobile:  Hide the icon on title if present*/
.ui-360 .title{
	z-index: 4000;
    position: absolute;
    left: 5px;
    display: none;
}

.ui-360 .title .icons{
	margin-right: 5px;
}

.ui-360 .filename-title {
	font-weight: 600;
}

.ui-360 .icons {
    font-family: 'HypMultimediaModalViewers' !important;
    speak: never;
    font-style: normal;
    font-weight: 600;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ui-360 .icon-image:before {
    content: "\e90d";
}

.ui-360 .icon-camera:before {
    content: "\e90f";
}

.ui-360 .icon-file-empty:before {
    content: "\e924";
}

.ui-360 .icon-play2:before {
    content: "\ea15";
}

.ui-360 .icon-file-pdf:before {
    content: "\eadf";
}

.ui-360 .icon-3d_rotation:before {
    content: "\e900";
}

.ui-360 .icon-360:before {
    content: "\e901";
}