html {
   height: 100%;
}

body{
	background-color:#f9f9f9;
	font-family:Verdana, Geneva, sans-serif;
	min-height: 100%;
}

pre{
	font-family:Verdana, Geneva, sans-serif;
	line-height:32px;
	font-size:12px;
	padding:1%;
}

pre img{
	margin-bottom:-5px;
}

h1{
	padding: 15px 0;
	margin:0;
	text-transform:uppercase;
	font-size:1.5em;
}

hr {
    border: none;
    height: 1px;
    color: #FFF; /* old IE */
    background-color: #FFF; /* Modern Browsers */
}

a{
	text-decoration:none;
	color: #494949;
}

a:active, a:hover {
    outline-width: unset;
}
audio, video{
	position:absolute;
    transform: rotate(0.00001deg); /*Chrome GPU decoding bug hack*/
}

form{
	line-height:1;
}

[type="submit"]{
    border: none;
    padding: 8px 20px;
    border-radius: 10px;
    background-color:#f1f1f1;
    color:#494949;
    font-weight:bold;
}

[type="submit"]:hover{
    background-color:#ebebeb;
    color:#de188a;
    cursor:pointer;
}

.hidden{
	display:none !important;
}

#logo{
	height:60px;
	background: #000;
	background-image: linear-gradient(to left, #000000, #000000, #223968);
	z-index: 100;
	position: relative;
	border-radius: 0 0 10px 10px;
	margin: 0 3%;
	transition: all 0.25s cubic-bezier(0.500, 0, 0, 1);
}

#logo img{
	width:90px;
	margin: 10px 1.66%;
}


#wrapper{
	position:relative;
	max-width:1622px;
	margin:auto;
}

#content{
	padding:20px 1%;
	background:#FFF;
	position:relative;
	margin:20px 3%;
	border-radius:10px;
}

#content hr{
	clear:both;
	margin:0;
	height:0;
}

#parentDir{
	font-size:0.8em;
	text-transform:uppercase;
	text-align: right;
	position:absolute;
	top:10px;
	right:2%;
	
}

#playableItems,#otherItems{
	clear:both;
}

#playableItems{
	margin-top:10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#playableItemsHeader{
	flex-basis:100%;
	max-width:100%;
	margin: 5px 0.5%;
}

.itemsHeader{
	flex-basis: 100%;
	width:100%;
	margin: 0 0.5%;
}

.itemsHeader .folder{
	float:left;
	margin-bottom:0;
	margin-top:6px;
	max-width:100%;
}

#playableItems.closed .player{
	max-width:none;
	width:100%;
}

#playableItems.closed .show, #playableItems .hide, #playableItems .imgPreview{
	display:initial;
}

#playableItems .show, #playableItems.closed .hide, #playableItems.closed .imgPreview, #playableItems.closed .mejs__container{
	display:none
}

#playableItems h1, .toggleOtherItems{
	margin-right:0.5%;
	display:inline-block;
}

#otherItems{
	margin:0 0.5%;
}

#otherItems p{
	font-size:0.9em;
}

.itemLink{
	display:table;
	width:100%;
}

.itemLink:focus{
    border-radius:10px;
}

#menu{
	position:relative;
	margin: 0 0.5%;
}

#menu div{
	background:#f8f8f8;
	line-height:0;
	border-radius:10px;
	margin:2px;
	float:right;
	min-width:40px;
	text-align:center;
}

#menu div a{
	overflow:hidden;
	display:inline-block;
	padding:2px 0;
	min-width:40px;
	border-radius:10px;
}

#menu div ul a{
	width:100%;
	margin-right:10px;
}

#menu div a:hover{
	background:#f1f1f1;
}


.downThemAll{
	position:relative;
	border-radius:10px;
	overflow:hidden;
}

.downThemAll.bottom{
	margin:10px 0.5%;
	float:right;
}

#menu .downThemAll a, .downThemAll a{
	display:block;
	border-radius:10px;
	background:#F8F8F8;
	font-weight:bold;
	z-index:100;
	padding: 2px 10px;
	line-height:36px;
	overflow:hidden;
}

.downThemAll a:hover{
	background:#f1f1f1;
}

#menu .downThemAllLoading, .downThemAllLoading{
	position:absolute;
	bottom:0;
	height:5px;
	left:0;
	width:0%;
	z-index:1000;
	-webkit-transition: width 200ms ease;
	   -moz-transition: width 200ms ease;
	     -o-transition: width 200ms ease;
		transition: width 200ms ease;
	margin:0;
	border:none;
	min-width:0;
}

.orderBy a{
	width:38px;
}

.orderByName{
	margin-right:4px;
}


#menu div i{
	padding:10px;
}

#menu .downThemAll i{
	padding:0px;
}

.previewMeta{
    padding: 10px 1%;
}

.downloadLink{
	margin: 10px 0;
}

.downloadLink, .folder{
	border-radius:10px;
	position:relative;
	background:#f8f8f8;
}

.folder{
	margin-bottom:10px;
}

.button a{
	padding:10px;
	display:table;
	word-break:break-all;
	border-radius:0 0 0 10px;
	width: 20px;
	text-align: center;
}

.folder a:hover .fa-folder:before, .folder a:focus .fa-folder:before, .ui-droppable-hover .itemLink .fa-folder:before{
	content: "\f07c";
}

.downloadLink:hover, .folder:hover,.folder:focus, .folder.ui-droppable-hover{
	background:#f1f1f1;
}

.fileType, .fileInfo, .downloadButton{
	display:table-cell;
	vertical-align:middle;
}

.fileType{
	vertical-align:middle;
	font-size:1.5em;
	width:2%;
	padding-left:10px;
}

.fileInfo{
	padding:13px;
}

.fileName{
	font-weight:bold;
	line-break:anywhere;
}

.downloadButton{
	text-align:right;
	vertical-align:middle;
	padding-right: 10px;
}

#otherItems .downloadButton, #playableItems.closed .downloadButton{
	min-width:120px;
}

#connexion{
	padding:0 1%;
}

#connexion h1{
	padding-bottom:0;
	margin-top:20px;
}

.folder p{
	display:inline-block;
	width:33.3%;
}

.button{
	z-index:1000;
	display:none;
	position:absolute;
	top: 0;
	right:0;
	color:#494949;
	font-size:20px;
	background : #f8f8f8;
	border-radius : 0 0 0 10px;
}

.toolboxButtons{
	z-index:1000;
	display:none;
	position:absolute;
	top: 0;
	right:0;
	color:#494949;
	font-size:20px;
	background : #f8f8f8;
	border-radius : 0 0 0 10px;
}

.th .toolboxButtons, .th-large .toolboxButtons{
    position:relative;
}

#otherItems .toolboxButtons{
	border-radius : 0 10px 0 10px;
}

#otherItems.th .toolboxButtons, #otherItems.th-large .toolboxButtons{
    text-align:center;
}

.toolboxButtons div{
	display:inline-block;
}

.toolboxButtons div a{
	padding:10px;
	width:20px;
	text-align:center;
	display:block;
	font-size:0.9em;
}

#menu .optionsList{
	display:none;
	position:absolute;
	z-index:100;
	margin-left:0;
	margin-top:5px;
	text-align:left;
	max-width:300px;
}

.optionsList ul{
	list-style: none;
	margin:0;
	padding:5px;
}

.optionsList li{
	font-weight: bold;
	color: #494949;
}

.optionsList input{
    margin:10px 10px 10px 20px;
    float:right;
    accent-color:#de188a;
}

.optionsList button{
    width:100%;
}

#content .optionsList hr{
	height:1px;
	color: #f1f1f1;
	border-color: #f1f1f1;
	background-color: #f1f1f1;
    margin-top: 15px;
}

.addUser{
	display:block;
}


.player{
	position:relative;
	width:49%;
	margin:0.5%;
	background: #f8f8f8;
	overflow:hidden;
	border:2px solid #f8f8f8;	
	border-radius: 10px;
	 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box; 
	height:100%;
}

.player.many{
	width:32%;
	margin:0.66%;
}

.many.verticalMode{
	width:23.66%;
}

.closed .player,.closed .player.many{
	width:99%;
	margin:5px 0.5%;
	border:none;

}

.player img{
	max-width:100%;
	height:auto;
}

.player.verticalMode{
	max-width:540px;	
}

.imgPreview a{
	display:block;
	text-align:center;
}

.videoWrapper{
	position:relative;
	height:0;
	width:100%;
	padding-bottom:56.25%;
	overflow:hidden;
}

.audioWrapper{
	background:#000;
}

.verticalMode .videoWrapper{
	padding-bottom:177.66%;
}

.rotate video, .rotate .mejs__poster{
    transform: rotate(90deg) scale(0.56);
}

.closed .videoWrapper{
	padding-bottom:0;
	-webkit-transition: padding-bottom 200ms cubic-bezier(0.230, 1.000, 0.320, 1.000); 
	   -moz-transition: padding-bottom 200ms cubic-bezier(0.230, 1.000, 0.320, 1.000); 
	     -o-transition: padding-bottom 200ms cubic-bezier(0.230, 1.000, 0.320, 1.000); 
		transition: padding-bottom 200ms cubic-bezier(0.230, 1.000, 0.320, 1.000); /* easeOutQuint */
}

.dropzone{
	background: #f8f8f8;
	border: none;
	border-radius: 10px;
	margin: 0 0.5%;
	min-height:auto;
	font-weight: bold;
	color: #494949;
	padding: 0;
	overflow:hidden;
}

.dropzone .dz-message{
	margin:0;
}

.dropzone:hover{
	color: #de188a;
}

.dropzone .dz-preview.dz-file-preview .dz-image{
	background :#f1f1f1;
}

.dropzone .dz-message{
	overflow:hidden;
	height:45px;
	max-height:45px;
	transition: max-height 0.25s cubic-bezier(0.500, 0, 0, 1);
}

.closed.dropzone .dz-message{
	max-height:0;
	overflow:hidden;
}

.dropzone .dz-message .dz-button{
	margin-top:13px;
}

#babylonjsLoadingDiv img{
	max-height:70%;
}

#babylonjsLoadingDiv div{
    height:100%;
}

#babylonjsLoadingDiv div img{
    max-height:100%;
}

.threeD canvas{
    position:absolute;
}

.fullscreenButton{
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 1.5em;
    filter: drop-shadow(0 0 2px #888);
}

.fullscreenButton a, .fullscreenButton a:hover, .fullscreenButton a:focus{
    color:#FFF;
}

.fullscreen .fullscreenButton{
    right:20px;
    bottom:20px;
    font-size:2.5em;
    position: fixed;
    z-index: 1000;
}

.fullscreen canvas{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    padding: 0;
    margin: 0;
    width: 100%;
    height:100%;
    z-index:1000;
}

.popup{
	z-index:5000;
	position:fixed;
	background-color: rgba(255, 255, 255, 0.75);
	top:0;
	left:0;
	bottom:0;
	right:0;
	overflow:auto;
}

.popup p{
	margin: 5px 0px 3px 0px
}

.popup hr{
    height: 1px;
    color: #f1f1f1;
    border-color: #f1f1f1;
    background-color: #f1f1f1;
    padding:0;
    margin:10px 0;
}

.form{
	background: #f8f8f8;
	position:absolute;
	width:270px;
	left:50%;
	top:40%;
	padding:25px;
	margin-left:-160px;
	border-radius:10px;
}

.delUserPopup ul{
    padding:0;
}
.delUserPopup li{
    list-style:none;
}

.delUserPopup button{
    float:right;
}

.delUserPopup form{
    line-height:22px;
}

.role{
    float: left;
    padding: 4px 10px 4px 0;
    width: 20px;
}

.reportForm{
	background: #f8f8f8;
	border: 1px solid #f1f1f1;
	position: relative;
	width:76%;
    max-width:1500px;
    margin:auto;
	top:10%;
	padding: 0 2%;
}

.reportForm ul{
    padding : 0;
}

.folderItemName{
    font-weight:bold;
}

.toggleAllItems p{
    text-align:right;
    margin-right:8px;
}

.showFolderItems{
    float:right;
}

.reportForm ul ul{
    display:none;
    padding-left:20px;
}

.reportForm .showMoreItems ul{
    display:block;
}

.reportForm .showMoreItems ul ul{
    display:none;
}

.reportForm .showMoreItems .showMoreItems ul{
    display:block;
}

.reportForm li{
    padding : 10px;
    margin-bottom:2px;
    list-style-type: none;
    background-color: #f1f1f1;
}

.googleanalytics .form{
	max-width: 80%;
	width: 80%;
	top:10%;
	bottom:10%;
	left: 9%;
	margin: 0;
	overflow: auto;
	padding:1%;
}

.google-visualization-table,.google-visualization-table-table{
	width:100%;
}

.charts{
	font-size:90%;
}

#timeline,#pageViews{
	width:49%;
	min-height:300px;
	vertical-align:top;
	float:left;
}

#pageViews{
	float:right;
}

#pageViews{
	max-height: 300px;
	overflow: auto;

}

#events{
	display: inline-block;
	max-height: 64%;
	min-width:100%;
	overflow: auto;
}

#events td, #events th, #pageViews td,#pageViews th{
	word-wrap: break-word;
	word-break: break-word;
	white-space: normal;
	height:30px;
}

#events tr td:first-child{
	width:40%;
}

#view-selector{
	display:none;
}

#dates-selector,#eventsType{
	margin:10px 1px;
	display: inline-block;
	width:100%;
}

.charts section{
	border: 1px solid #f1f1f1;
	margin-bottom:2%;
}

.form h3{
	margin:5px 0;
	color: #494949;
}

.form input{
	margin:5px 0;
}

.form .close, .reportForm .close{
	position:absolute;
	top:8px;
	right:10px;
}

.vrview{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}

.vrview .videoSrc{
	display:none
}

.vrview iframe{
	width:100%;
	height:100%;
}

.controls{
	display:table;
	width:100%;
	color:#FFF;
	line-height:24px;
	background:#000;
}

.closed .controls{
	display:none;
}

.controls div{
	display:table-cell;
	padding:12px;
}

.controls .toggleplay{
	width:5px;
	cursor: pointer;
}

.controls .time{
	display:none;
}

.playerCenter .controls .time{
	display:table;
}

.controls .togglemute{
	cursor: pointer;
	text-align:right;
	width:5px;
}

.about{
	position:relative;
	height:22px;
	color:#494949;
	width:95%;
	margin:auto;
	overflow:hidden;
	line-height:19px;
	font-weight:bold;
}

.about a{
	color:#494949;
}

.about a:hover{
	color:#494949;
	text-decoration:underline;
}

.title,.dl{
	position:absolute;
	top:0;
	margin:0;
}

.title{
	left:0;
}

.dl{
	right:0;
	background:#f8f8f8;
	text-transform:uppercase;
}

#adress{
	margin:10px 3%;
	margin-top:0;
	font-size:0.9em;
	display:inline-block;
}

#adress a{
	text-transform:uppercase;
}

.fancybox-button--share {
  display: none !important;
}

.mejs__poster{
	background-size:contain;
}

.mejs__inner, .mejs__layers, .mejs__layer{
	width:100%;
	height:100%;
	overflow:hidden;
}

.mejs__time-buffering{
	display:none;
}

.mejs__time-buffering, .mejs__time-current, .mejs__time-hovered, .mejs__time-loaded{
	-webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
	transition: all .5s linear;
}

.mejs__time-handle, .mejs__time-hovered{
	display:none;
}

.mejs__audio .mejs__mediaelement{
	background:none;
}

.mejs__audio .mejs__controls{
	background:#000;
}

.mejs__overlay-button {
	display:none;
}

.mejs__container{
	width:100%;
	height:100%;
	position:absolute;
	min-height:55px;
	background:none;
}

.mejs__audio{
	position:relative;
}

.mejs__container-fullscreen{
	background:#000;
}

.mejs__time-float{
	border:none;
}

.mejs__loop-button{
	cursor:pointer;
	color:#FFF;
	font-size:18px;
	text-align:center;
}

.mejs__loop-button i{
	line-height:40px;
	margin:auto;
}

.mejs__button>button:focus {
    outline: none;
}

.mejs__button.mejs__captions-button{
	opacity:0.5;
}

.mejs__button.mejs__captions-button.mejs__captions-enabled{
	opacity:1;
}

.mejs-sourcechooser-selector input, .mejs__sourcechooser-selector input{
	margin-top:6px;
}

.mejs-sourcechooser-selector label, .mejs__sourcechooser-selector label{
	font-family: monospace;
	font-weight:bold;
	width: 2ch;
	overflow: hidden;
	white-space: nowrap;
	padding:5px 20px 5px 10px;
}

.mejs-sourcechooser-button .mejs-sourcechooser-selector, .mejs__sourcechooser-button .mejs__sourcechooser-selector{
	right:auto;
	width:55px;
	height:52px !important
}

.mejs__time.mejs__duration-container,.mejs__time.mejs__currenttime-container{
	display:none;
}

.mejs-sourcechooser-selector li, .mejs__sourcechooser-selector li{
	padding:0;
}

.droppableParentFolder{
	max-height:45px;
	transition: all 0.25s cubic-bezier(0.500, 0, 0, 1);
	overflow:hidden;
    display:flex;
    max-width:100%;
}

.droppableParentFolder.closed{
	max-height:0 !important;
    margin-bottom:0;
}

.droppableParentFolder .fileName{
	white-space: nowrap;
}

.ui-draggable-dragging{
	width:300px !important;
}

.ui-draggable-dragging.player{
	height:auto !important;
}

.ui-draggable-dragging .videoWrapper, .ui-draggable-dragging .imgPreview, .ui-draggable-dragging .audioWrapper{
	display:none !important;
}

.ui-draggable-dragging .toolboxButtons, .ui-draggable-dragging .fileSize, .ui-draggable-dragging .downloadButton{
	display:none !important;
}

.ui-droppable-hover .itemLink{
	color:#de188a !important;
}

@media only screen and (max-width: 1700px) {

	.player,.player.many{
		width:49%;
		margin:0.5%;
	}
	.player.verticalMode{
		width:23.66%;
	}
	.playerCenter{
		margin:10px auto;
		display:block;
	}

}

@media only screen and (min-width: 1080px) {

	#otherItems.th .folder, #otherItems.th-large .folder{
		display:inline-block;
		width:15.6666%;
		margin-left:0.5%;
		margin-right:0.5%;
		vertical-align:top;
		overflow:hidden;
	}

	#otherItems.th-large .folder{
		width:24%;
		margin-left:0.5%;
		margin-right:0.5%;
	}

    #otherItems.th .droppableParentFolder, #otherItems.th-large .droppableParentFolder{
        display:block;
        clear:both;
        max-height:100px;
    }


	.th .folder .fileType, .th .folder .fileInfo,.th-large .folder .fileType, .th-large .folder .fileInfo{
		display:block;
		width:auto;
		text-align:center;
		margin:auto;
	}

	.th .folder .fileType, .th-large .folder .fileType{
		font-size:2.5em;
	}

	.th .folder .downloadLink a, .th .folder a, .th-large .folder .downloadLink a, .th-large .folder a{
		word-break:normal;
	}
}


@media only screen and (max-width: 1080px) {

	.downThemAllText{
		display:none;
	}
	
	#menu .downThemAll a{
		padding:2px 0;
	}

	.folderView{
		display:none;	
	}

	.folder p{
		width:50%;
	}

	.player, .player.many{
		width:98%;
		margin:1%;
	}
	.player.verticalMode{
		width:31.33%;	
	}
	.playerCenter{
		margin:10px auto;
		display:block;
	}

	#timeline,#pageViews,#events{
		width:98%;
		float:left;
		font-size:0.7em;
	}
	
	.googleanalytics .form{
		max-width:98%;
		width:98%;
		top:0;
		left:0;
		right:0;
		bottom:0;
	}
	
	.charts{
		font-size:60%;
	}
}

@media only screen and (max-width: 710px) {


	h1{
		padding:10px 0;
		font-size:1.2em;
	}

	p{
		font-size:0.8em;
	}

	#logo img{
		margin:10px 4%;
		width:80px;
	}
	
	#menu .optionsList{
		right:0;
	}

	#content{
		padding:20px 4%;
	}

	#adress{
		margin:4%;
	}

	.folder p{
		width:100%;
	}

	.about{
		height:17px;
	}

	.downloadButton{
		display:none;
	}

	.downThemAll.top, .downThemAll.bottom{
		position:relative;
		float:none;
		text-align:center;
	}
	.player.verticalMode{
		width:48%;	
	}
	#parentDir{
		right:4%;
	}
}
@media only screen and (max-width: 500px) {
	.player.verticalMode{
		width:98%;	
	}
}