/*
	Developed by
	
	Alexis Larrodé Álvaro
	
	alexis@cease.es
*/
html{
  -webkit-tap-highlight-color:transparent;
}
img{
	border:none;
}
body{
	margin:0px;
	padding:0px;
	-webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
	opacity:0;
}

#totalCont{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	min-height:380px;
	transition:background-color .2s ease-in-out;
	background-color:#ffffff;
}
	#unitSelectionPage{
		position:absolute;
		left:0px;
		top:0px;
		width:100%;
		height:100%;
		transition:opacity .2s ease-in-out;
		background-color:#ffffff;
	}
		#initLogoCont{
			position:absolute;
			left:50%;
			top:50%;
			width:324px;
			height:140px;
			margin-left:-140px;
			margin-top:-170px;
			background-image:url(../resources/web/logo_laportada.png);
			background-size:100%;
		}
		#initUnitsExplorer{
			position:absolute;
			left:0px;
			top:calc(50% - 50px);
			width:100%;
			height:auto;
			box-sizing:border-box;
			padding:20px;
			display:flex;
			flex-flow:row wrap;
			justify-content:center;
			overflow:auto;
		}
			.initUnit{
				position:relative;
				width:100px;
				height:150px;
				cursor:pointer;
				margin:20px 20px;
				background-image:url(../resources/web/galleryBlack.png);
				transition:opacity .2s ease-in-out, filter .2s ease-in-out;
				background-size:100%;
				background-position:0px 0px;
				background-repeat:no-repeat;
			}
			.initUnit:hover{
				opacity:0.6;
			}
				.initName{
					position:relative;
					left:0px;
					top:100px;
					width:100%;
					height:auto;
					font-family:helvetica, arial, sans-serif;
					font-size:15px;
					color:#000000;
					text-align:center;
					word-wrap: break-word;
					overflow-wrap: break-word;
				}
				@media (max-width:600px){
					.initUnit{
						width:70px !important;
						height:105px !important;
					}
					.initName {
						top:75px !important;
						font-size:11px !important;
					}
				}
		#upFolder{
			position:absolute;
			left:50%;
			top:50%;
			height:40px;
			width:40px;
			margin-top:-20px;
			margin-left:-20px;
			cursor:pointer;
			background-image:url(../resources/web/upArrow.png);
			background-size:100%;
			transition:opacity .2s ease-in-out;
		}
		#upFolder:hover{
			opacity:0.6;
		}
	#pageHeader{
		position:relative;
		left:0px;
		top:0px;
		width:100%;
		height:80px;
	}
		#headerLogo{
			position:absolute;
			right:0px;
			top:0px;
			height:80px;
			width:auto;
			transition:opacity .2s ease-in-out;
		}
		@media (max-width:600px){
			#headerLogo{
				top:15px;
				height:40px;
			}
		}
		#themeSwitchCont{
			position:relative;
			left:0px;
			width:200px;
			height:80px;
		}
			#themeSwitch{
				position:absolute;
				left:50%;
				top:50%;
				width:65px;
				height:40px;
				margin-top:-20px;
				margin-left:-80px;
				background-image:url(../resources/web/onOffContBlack.png);
				background-size:100%;
				cursor:pointer;
				transition:filter .2s ease-in-out;
			}
				#themeSwitchCircle{
					position:absolute;
					left:0px;
					top:0px;
					width:40px;
					height:40px;
					background-image:url(../resources/web/onOffCircleBlack.png);
					background-size:100%;
					transition:left .2s ease-in-out, filter .2s ease-in-out;
				}
			#themeSwitchName{
				position:absolute;
				left:50%;
				top:0px;
				height:80px;
				width:50%;
				box-sizing:border-box;
				font-family:helvetica, arial, sans-serif;
				font-size:15px;
				padding-top:30px;
				color:#000000;
				transition:color .2s ease-in-out;
			}
			@media (max-width:600px){
				#themeSwitchName{
					display:none;
				}
			}
	#folderTitle{
		position:relative;
		left:40px;
		top:0px;
		height:80px;
		width:calc(100% - 80px);
		text-align:center;
		font-family:helvetica, arial, sans-serif;
		font-size:30px;
		font-weight:bold;
		color:#000000;
		box-sizing:border-box;
		padding-top:20px;
		border-bottom:solid #000000 2px;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	@media (max-width:600px){
		#folderTitle{
			left:20px;
			height:50px;
			width:calc(100% - 40px);
			font-size:20px;
			padding-top:10px;
		}
		#pageBody{
			top:140px !important;
			height:calc(100% - 140px) !important;
		}
		/*
		#pdfViewer{
			top:140px !important;
			height:calc(100% - 140px) !important;
		}
		*/
	}
	#pageBody{
		position:absolute;
		left:0px;
		top:180px;
		width:100%;
		height:calc(100% - 180px);
		display:flex;
		flex-flow:row wrap;
		justify-content:center;
		overflow:auto;
		align-content:flex-start;
	}
		.itemCont{
			position:relative;
			width:100px;
			height:150px;
			cursor:pointer;
			margin:20px 20px;
			transition:opacity .2s ease-in-out, filter .2s ease-in-out;
			background-size:100% auto;
			background-position:0px 0px;
			background-repeat:no-repeat;
		}
		.itemCont:hover{
			opacity:0.6;
		}
			.itemRecentIcon{
				position:absolute;
				left: 6px;
				top: -8px;
				width:20px;
				height:20px;
				filter:invert(100%);
				background-image:url(../resources/web/itemRecentIcon.png);
				background-size:100%;
			}
			.itemDate{
				position:absolute;
				left:0px;
				top:79px;
				width:100%;
				height:20px;
				font-family:helvetica, arial, sans-serif;
				font-size:12px;
				font-weight:bold;
				color:#000000;
				text-align:center;
			}
			.itemName{
				position:relative;
				left:0px;
				top:100px;
				width:100%;
				height:auto;
				font-family:helvetica, arial, sans-serif;
				font-size:15px;
				color:#000000;
				text-align:center;
				word-wrap: break-word;
				overflow-wrap: break-word;
			}
			@media (max-width:600px){
				.itemCont{
					width:70px !important;
					height:105px !important;
				}
				.itemRecentIcon{
					left: 6px;
					top: -4px;
					width: 15px;
					height: 15px;
				}
				.itemDate{
					top:56px;
					font-size:8px;
				}
				.itemName {
					top:75px !important;
					font-size:11px !important;
				}
			}
/*Gallery styles*/
#imageGalleryCont{
	position:absolute;
	top:0;
	left:0;
	display:none;
	opacity:0;
	width:100%;
	height:100%;
	background-color:#292929;
	transition:opacity .2s ease-in-out;
}
	#imageGalleryBody{
		display:flex;
		height:100%;
		width:100%;
		overflow-x:auto;
		overflow-y:hidden;
		scroll-snap-type:x mandatory;
		-ms-overflow-style:none;
		scrollbar-width:none;
		scroll-behavior: smooth;
	}
	#imageGalleryBody::-webkit-scrollbar{
		display: none;
	}
		#imageGalleryBody .imageCont{
			display:flex;
			min-width:100%;
			scroll-snap-align:start;
			align-items:center;
		}
			#imageGalleryBody .imageCont img{
				width:100%;
				height:100%;
				object-fit:contain;
			}
	#closeGallery{
		position:Absolute;
		display:block;
		right:10px;
		top:10px;
		width:30px;
		height:30px;
		background-image:url('../resources/web/closeIcon.png');
		background-size:20px 20px;
		background-position:center center;
		background-repeat:no-repeat;
		background-color:#ffffff;
		border-radius:50%;
	}
/*==============*/
/*
#pdfCont{
	position:absolute;
	left:10px;
	top:10px;
	width:calc(100% - 20px);
	height:calc(100% - 20px);
	background-color:#ffffff;
	box-sizing:border-box;
	border:solid #292929 1px;
}
*/
#pdfViewer{
	position:absolute;
	left:50%;
	top:180px;
	/*
	height:calc(100% - 190px);
	width:calc(100% - 20px);
	*/
	height:0px;
	width:0px;
	border:solid #ffffff 2px;
	box-sizing:border-box;
	background-color:#292929;
	display:none;
	transition:top .2s ease-in-out, left .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out;
	overflow:hidden;
	border-radius:4px;
}
	#pdfNavControls{
		position:relative;
		left:0px;
		top:0px;
		width:100%;
		height:30px;
		font-family:helvetica, arial, sans-serif;
		font-size:15px;
		color:#000000;
		padding:5px;
	}
		#pdfNavControls button{
			height:20px;
			background-color:#ffffff;
			border: solid #ffffff 1px;
			color:#000000 !important;
			border-radius:4px;
			cursor:pointer;
		}
		#pdfNavControls button:hover{
			border:solid #ffffff 1px;
			background-color:#292929;
			color:#ffffff !important;
		}
			#zoom_out, #zoom_in{
				width:20px;
				height:20px;
			}
		#pdfNavControls input{
			width:50px;
			height:20px;
			background-color:#ffffff;
			border-radius:4px;
		}
	#pdfWindowControls{
		position:absolute;
		right:0px;
		top:0px;
		width:100px;
		height:30px;
		padding:7px 5px 5px 5px;
	}
		#pdfWindowControls button{
			float:right;
			height:20px;
			background-color:#ffffff;
			border: solid #ffffff 1px;
			color:#000000 !important;
			border-radius:4px;
			cursor:pointer;
			
		}
	#canvasCont{
		left:0px;
		top:0px;
		width:100%;
		height:calc(100% - 40px);
		background-color:#292929;
		text-align: center;
		box-sizing:border-box;
		overflow:auto;
	}
#ajaxLoaderCont{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	display:none;
	z-index:2;
}
	@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
	@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
	@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
	#ajaxLoaderSpinner{
		position:absolute;
		left:50%;
		top:50%;
		width:150px;
		height:150px;
		margin-left:-75px;
		margin-top:-75px;
		background-image:url(../resources/web/loaderSpinnerWhite.png);
		background-repeat:no-repeat;
		background-size:100%;
		font-family:helvetica,arial,sans-serif;
		font-size:40px;
		font-weight:normal;
		padding-top:0px;
		text-align:center;
		-webkit-animation:spin 4s linear infinite;
		-moz-animation:spin 4s linear infinite;
		animation:spin 4s linear infinite;
	}