/**
 * Global styling for the site
 * 
 * Author: Tim Timmermans
 */

/**
 * Global styling
 */
a:active, a:focus {
    outline:none;
}

body {
	padding: 0px;
	margin: 0px;	
	font-family: "Trebuchet MS";
	font-size: 12px;	
	cursor: default;	
}

	/* IMAGE */
	img { border: none }

	/* INPUT */
	.globalButton {
		background: url('../../../public/img/web/v2/input_button_bg.png') 0px 0px repeat-x;
		border: 1px solid #cacaca;	
		height: 27px;
		color: #3c93dd;
		font-size: 14px;		
		cursor: pointer;
		
	}
	.globalButton:hover {
		border: 1px solid gray;	
	}
	
	.dlLogin {
	   margin-left: auto;
	   text-align:center;
	}
	
	/* used for HR */
	div.hr {
		height: 3px;
		border: none;
		padding: 0px;
		border: 0px;	
		background: url('../../../public/img/web/v2/h1_border.png') 0px 0px repeat-x;		
	}
	
	/* FORM */
	form {
		margin: 0px;
		border-top: 1px solid #cacaca;
	}
	    span.selected {
			border: 1px solid #c7ffc3;
			background-color: #f3fef2;
		}
		
		form dl {
			border-top: 1px dotted #cacaca;
			padding: 4px 0px 2px 0px;			
			margin: 1px 0px;
		}
		form dl.selected {
			background: #fffada url('../../../public/img/web/v2/dt_selected_bg.png') 0px 0px repeat-x;	
		}
		form dl.selected:hover {
			background: #fffada url('../../../public/img/web/v2/dt_selected_bg.png') 0px 0px repeat-x;	
		}
		
		form dl:hover {
			background: url('../../../public/img/web/v2/dt_hover_bg.png') 0px 0px repeat-x;
			background-position: bottom left;
		}
			form dl:hover dt label {
				font-weight: bold;	
			}
		form dl.noHover {
			background: #fff;	
		}
			form dl.noHover:hover dt label {
				font-weight: normal;	
			}
			
			form dl dt {
				float: left;				
			}
				form dl dt label {
					color: #a6c949;
					font-size: 14px;
					padding-left: 5px;
					line-height: 23px;
					
				}
			form dl dd {
				margin-left: 250px;
			}
			form dl dd span.text {
				display: block;
				
				margin-top: 2px;
			}
			form dl dd p,
			form dl dt p {
				color: #3c93dd;	
				margin: 0px;
				font-size: 11px;
			}
			
	/* Custom */
	div.dotted {
		border-bottom: 1px dotted #cacaca;		
		height: 5px;	
	}
	
	div.customsearch form {
		border: none;
		float: left;		
	}	
		div.customsearch label {
			display: none;
		}
/**
 * TOP Section
 * @includes: header, header right and license status
 */

/* HEADER */
div#header {		
	height: 80px;
	background: url('../../../public/img/web/v2/header_bg.png') 0px 0px repeat-x;
}
	div#header img {
		float: left;
		padding: 10px 0px 0px 7px;	
	}
	div#headerRight {		
		float: right;	
		margin: 20px 20px 0px;	
	}
		div#headerRight ul {
			padding: 0px;
			margin: 0px;	
			list-style: none;
			float: left;
		}
			div#headerRight ul li {
				float: left;
				background: url('../../../public/img/web/v2/header_right_bg.png') 0px 0px repeat-x;
				height: 32px;
				font-family: "Trebuchet MS";
				font-size: 14px;
				padding: 0px 10px 0px 10px;
				line-height: 29px;
			}
				div#headerRight ul li img {
					float: none;
					padding: 0px;		
				}
				div#headerRight ul li a {
					color: #3c93dd;	
					text-decoration: none;
				}
					div#headerRight ul li a:hover { text-decoration: underline; }
				
				div#headerRight ul li.icon a {
					margin-top: 5px;
					display: block;
					width: 18px;
					height: 19px;					
				}
								
				div#headerRight ul li.home a {
					background: url('../../../public/img/icons/home_button.png') 0px 0px no-repeat;		
				}
				div#headerRight ul li.home a.active {
					background: url('../../../public/img/icons/home_button_active.png') 0px 0px no-repeat;		
				}
					div#headerRight ul li.home a:hover {
						background: url('../../../public/img/icons/home_button_hover.png') 0px 0px no-repeat;		
					}
					
				div#headerRight ul li.configuration a {
					background: url('../../../public/img/icons/config_button.png') 0px 0px no-repeat;		
				}
				div#headerRight ul li.configuration a.active {
					background: url('../../../public/img/icons/config_button_active.png') 0px 0px no-repeat;		
				}
					div#headerRight ul li.configuration a:hover {
						background: url('../../../public/img/icons/config_button_hover.png') 0px 0px no-repeat;		
					}
				
				div#headerRight ul li.qplayer a {
					background: url('../../../public/img/icons/q-player-normal.png') 0px 0px no-repeat;		
				}
				div#headerRight ul li.qplayer a.active {
					background: url('../../../public/img/icons/q-player-active.png') 0px 0px no-repeat;		
				}
					div#headerRight ul li.qplayer a:hover {
						background: url('../../../public/img/icons/q-player-hover.png') 0px 0px no-repeat;		
					}
					
			div#headerRight ul li.spacer {
				background: url('../../../public/img/web/v2/header_right_spacer.png') 0px 0px no-repeat;
				width: 2px;	
				padding: 0px;
			}
			div#headerRight ul li.right {
				background: url('../../../public/img/web/v2/header_right_right.png') 0px 0px no-repeat;
				width: 7px;
				padding: 0px;	
			}
			div#headerRight ul li.left {
				background: url('../../../public/img/web/v2/header_right_left.png') 0px 0px no-repeat;
				width: 5px;
				padding: 0px;	
			}	

/**
 * Content section, the wrapper holds the content on the right place
 */
div#wrapper {	
	margin-left: 231px;
	padding: 10px 20px 0px 10px;
	
}

div#wrapper-maintenance {	
	
	padding: 10px 20px 0px 10px;
	
}
    div.clear {
    	clear: both;
    }
    
/**
 * Footers
 */
div#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px; 
   background:#6cf;
}

/* 
* Global messages (errors & notices)
* Displayed at the top of the wrapper div.
*/

div#upgradeNotice {
	background: url('../../../public/img/web/v2/notice_left.png') left center no-repeat; 
	height: 60px;	
	margin: 5px 26px 15px 0px;	
}

div#globalWarning,
div#globalNotice, 
div#globalError {
	background: url('../../../public/img/web/v2/notice_left.png') left center no-repeat; 
	height: 60px;	
	margin: 5px 26px 15px 0px;	
	display: none;
}
	div#globalWarning h3,
	div#globalNotice h3, 
	div#globalError h3,
	div#upgradeNotice h3 {
		padding: 5px 10px 0px 10px;
		color: #758f2f;	
		font-weight: bold;
		font-size: 14px;
		margin: 0px;		
	}
	div#globalWarning p,
	div#globalNotice p, 
	div#globalError p,
	div#upgradeNotice p {
		color: #758f2f;
		font-size: 14px;
		margin: 0px;
		padding: 5px 10px;
	}
	div#globalWarning a,
	div#globalNotice a, 
	div#globalError a,
	div#upgradeNotice a{
		display: block;
		float: right;
		height: 60px;
		width: 26px;
		margin-right: -26px;
		background: url('../../../public/img/web/v2/notice_right.png') 0px 0px no-repeat; 
	}
	
	div#globalWarning a.button,
	div#globalNotice a.button,
	div#globalError a.button {
		display: inline;
		float: none;
		height: auto;
		width: auto;
		margin-right: 0px;
		background: none;	
       	text-decoration: none;
     	color: #3c93dd;
	}
		div#globalWarning a.button:hover,
		div#globalNotice a.button:hover,
		div#globalError a.button:hover {
			text-decoration: underline;	
		}
	

div#globalError {
	background: url('../../../public/img/web/v2/error_left.png') left center no-repeat; 
}
	div#globalError h3,
	div#globalError p { 
		color: #a70000;
	}
	div#globalError a {
		background: url('../../../public/img/web/v2/error_right.png') 0px 0px no-repeat; 
	}

div#globalWarning {
	background: url('../../../public/img/web/v2/warning_left.png') left center no-repeat; 
}
	div#globalWarning h3,
	div#globalWarning p { 
		color: #c36b02;
	}
	div#globalWarning a {
		background: url('../../../public/img/web/v2/warning_right.png') 0px 0px no-repeat; 
	}
	
	

/**
 * Tabs  
 */
div#tabs {
	position: absolute;	
	top: 40px;		
	height: 40px;
	/* width: 600px; */	
}
	div#tabs ul {		
		padding: 0px;
		margin: 0px;	
		list-style: none;				
	}
		div#tabs ul li {
			background: url('../../../public/img/web/v2/tab_right.png') top right no-repeat;
			float: left;
			padding-right: 29px;						
			margin: 10px 0px 0px 1px;							
		}
			div#tabs ul li a {
				display: block;
				padding-left: 30px;
				color: black;
				line-height: 30px;
				text-decoration: none;
				background: url('../../../public/img/web/v2/tab_left.png') top left no-repeat;				
				height: 30px;
				color: #3c93dd;
			}
			div#tabs ul li a:hover {
				text-decoration: underline;	
			}
			
		div#tabs ul li.active {		
			background: url('../../../public/img/web/v2/tab_active_right.png') bottom right no-repeat;		
			margin: 0px -1px 0px 0px;			
		}
			div#tabs ul li.active a {
				display: block;				
				height: 40px;
				font-weight: bold;	
				color: #3c93dd;				
				font-size: 14px;
				background: url('../../../public/img/web/v2/tab_active_left.png') bottom left no-repeat;	
			}
			div#tabs ul li.active a:hover {
				text-decoration: none;	
			}

			
/**
 * CONTENT
 * 
 * Main div for displaying the content
 * @includes: global styling
 */	
div#content {		
	text-align: left;	
}
	/* Global styling */
	div#content h1 {
		font-size: 24px;
		color: #3c93dd;
		background: url('../../../public/img/web/v2/h1_bg.png') bottom left repeat-x;
		font-weight: normal;
		padding: 0px 0px 10px 10px;
		margin: 0px;
	}
	div#content h2 {
		border-bottom: 1px dotted #ccc;
		color: gray;
	}
		div#content h2 span {
			color: #3c93dd;	
		}

        div#content h2 a {
            color: #3c93dd;
            text-decoration: underline;
        }

	
	div#headWithContent {
		background: url('../../../public/img/web/v2/head_with_content_bg.png') bottom center repeat-x;
		overflow: none;
		padding: 0px 0px 0px 10px;
	}
	div#headWithContent h1 {
		margin: 0px;
		padding: 0px;
		background: none;		
		color: #3c93dd;		
		position: relative;	
	}
	div#headWithContent p {
		color: #9a9898;	
		margin: 0px;	
		padding: 0px;
	}
	
	/* INFO */
	div.info {
		margin-left: 10px;
	}
		div.info h3 {
			color: #cacaca;
			font-weight: bold;
			font-size: 14px;
			margin: 0px;
		}
		div.info p {
			margin: 0px;
			color: #3c93dd;	
		}	
		
/**
 * LEFT
 * Left secton of the page
 * 
 * includes: menu
 */
div#left {
	top: 50;
	left: 0;
	position: absolute;
	width: 220px;
	border-right: 1px dotted #cacaca;	
}

    div#menuButton {
        position: absolute;
        width: 10px;
        height: 35px;
        left: 220px;
    }
        div#menuButton a {
            display: block;
            height: 35px;
            width: 10px;
        }
        div#menuButton a.collapse {
            background: url('../../../public/img/web/v2/menu_collapse_active.png') 0px 0px no-repeat;
        }
        div#menuButton a.collapse:hover {
            background: url('../../../public/img/web/v2/menu_collapse_hover.png') 0px 0px no-repeat;
        }
        div#menuButton a.expand {
            display: none;
            background: url('../../../public/img/web/v2/menu_expand_active.png') 0px 0px no-repeat;
        }
        div#menuButton a.expand:hover {
            background: url('../../../public/img/web/v2/menu_expand_hover.png') 0px 0px no-repeat;
        }

	/* MENU */
	div#menu {				
		width: 182px;
		margin: 15px 0px 0px 20px;
	}
		div#menu ul {
			padding: 0px;
			margin: 0px;
			list-style: none;
			cursor: default;
		}
			div#menu ul li {			
				background: url('../../../public/img/web/v2/menu_head_item_bg.png') 0px 0px no-repeat;	
				width: 182px;											
			}
				div#menu ul li img {
					margin-top: -10px;
					float: left;
					margin-right: 8px;	
				}
				div#menu ul li h2 {
					margin: 0px;
					color: #fff;
					font-family: "Trebuchet MS";
					font-size: 14px;
					height: 32px;
					font-weight: normal;
					line-height: 27px;	
					padding-left: 5px;							
				}
				div#menu ul li ul {
					margin: 0px 0px 20px 3px;	
				}
					div#menu ul li ul li {
						width: 140px;
						/*padding: 3px 0px 2px 35px;*/
						padding-left: 35px;
						
						background: #fff url('../../../public/img/web/v2/menu_item_bullet.png') 15px 9px no-repeat;						
						border-bottom: 1px dotted #cacaca;						
					}
						div#menu ul li ul li a {
							font-size: 14px;
							color: #6f6f6f;
							line-height: 25px;						
							text-decoration: none;
						}
	                    div#menu ul li ul li a:hover {
	                    	text-decoration: underline;
	                    	color: #3c93dd;
	                    }
	                    	div#menu ul li ul li ul {
	                    		padding: 0px;
	                    		margin: 0px;
							}
								div#menu ul li ul li ul li {	
									border: none;
									padding: 3px 0px 2px 20px;
									background: #fff url('../../../public/img/web/v2/menu_item_bullet.png') 0px 7px no-repeat;								
									margin: 0px;	
															
								}
									div#menu ul li ul li ul li a {
										line-height: 17px;
									}
								

/*
 * Global styles
 */	            
div.clear-both {
	clear: both; 
}

div.float-left {
	float: left;
}
div.float-right {
	float: right;
}


.countButton {
	background: rgb(255, 255, 255);
	padding: 1px 2px;
	position: absolute;
	margin-right: 2px;
	margin-top: -1px;
	border: 1px solid rgb(193, 193, 193); 
	height: 14px; 
	text-align: center; 
	line-height: 14px; 
	margin-left: -28px; 
	display: inline-block; 
	white-space: nowrap; 
	min-width: 15px;
}
.countButtonNub {
	left: -7px; 
	top: 4px; 
	width: 5px; 
	height: 0px; 
	position: relative; 
	z-index: 2;
}
	.countButtonNub s {
		border-width: 4px 0px 4px 5px; 
		border-style: solid; 
		border-color: transparent rgb(215, 215, 215); 
		top: 1px; 
		display: block; 
		position: relative;
	}
	.countButtonNub i {
		border-width: 4px 0px 4px 5px; 
		border-style: solid; 
		border-color: transparent rgb(215, 215, 215); 
		display: block; 
		position: relative;
		left: -2px; 
		top: -7px; 
		border-left-color: rgb(255, 255, 255);
	}


/* Templates Ontwerpen 
* @TODO: uitzoeken & verwijderen
* */
div.eslModelPreview {
	text-align: center;
	font-weight: bold;
	font-size: 14px;
}
div#template_preview img {
	border: 1px solid black;	
}
div#linkProductTemplates {
	float: right;	
}

div.table {
    display: table;
}
div.tableHeader {
    display: table-row;  
	font-weight: bold;
	font-size: 14px;
}
div.tableRow {
    display: table-row;    
}
div.tableCell {
    display: table-cell;
    padding: 4px;
}


div.eslSubsetInfoDiv {
	height: 400px;
	overflow-y: scroll;
}

.tableHeading {
	font-weight: bold;
	vertical-align: top;
}

div.segmentElement{
	float:left;
}

td.segmentElement {
	vertical-align: text-top;
}

.selectedProduct {
	display: block;
	border: 1px solid gray;
	background-color: #eeeeee;
	padding: 2px;
}

div.configuration_block {
	padding-left: 20px;
}

/**
 * 
 * ImageLibrary
 * 
 */
div#imgpreview{
	position:fixed;
	border: 1px solid black;	
	display:none;
	z-index: 99999;
}

li.PainterSelectimage a{
	color: #3c93dd;	
	text-decoration: none;	
	vertical-align:top;
}

li.PainterSelectimage {
	height: 22px;
}

	

div#loadingContent {
	display: none;
	position: absolute;	
	width:85px;
	height:95px;
	margin: auto;
	top:0;
	left:0;
	right:0;
	bottom:0;
		
	z-index: 750;	
}

td div.image-text-cell {
	float:left;
	font-size: 11px;
	padding-left: 3px;
}

td img.image-cell {
	float:left;
}


.orientationTable
{
    display: table;
}

.orientationRow
{
   display: table-row;
}

.orientationCell
{
	display: table-cell;
	padding: 5px;
	vertical-align: bottom;
}

.ColRowClass 
{
	width:40px;
}

/**
* QPlayer
*/

dl.no-hover-bg:hover {
	background: none;
}

.playlist-items-select {
	max-height: 500px;
	overflow-y: auto;
}

.playlist-items {
	padding-left: 0px;
}

	.add-item-holder {
		padding-bottom: 15px;
	}

	.playlist-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 7px 2px;
	}

		.playlist-item:nth-child(odd) {
			background: #f4f4f4;
		}

		.playlist-item:nth-child(even) {
			background: #ffffff;
		}

		.playlist-item div,
		.playlist-item img {
			cursor: pointer;
		}

		.playlist-item .drag,
		.playlist-item .duplicate,
		.playlist-item .remove,
		.playlist-item .visibility {
			width: 34px;
		}

		.playlist-item .visibility.invisible {
			opacity: 0.4;
		}

		.playlist-item .duplicate,
		.playlist-item .drag {
			opacity: 0.5;
		}

		.playlist-item .drag,
		.playlist-item .drag img {
			cursor: move;
		}

		.playlist-item .drag:hover,
		.playlist-item .duplicate:hover {
			opacity: 0.9;
		}
			.playlist-item .drag img,
			.playlist-item .remove img {
				width: 20px;
			}

			.playlist-item .duplicate img {
				width: 17px;
			}

		.playlist-item .state {
			width: 20px;
		}
			.playlist-item .state img {
				width: 16px;
			}

		.playlist-item .name {
			width: 210px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 0px 15px;
		}

			.playlist-item .name .type {
				color: #aaa;
			}

			.playlist-item .name img {
				position: relative;
				top: 2px;
			}

		
		.playlist-item .resolution {
			width: 72px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 0px 15px;
		}

		.playlist-item .orientation {
			width: 72px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 0px 15px;
		}
			

		.playlist-item .status {
			width: 150px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 0px 15px;
		}

		.playlist-item .iid {
			width: 25px;
			overflow: hidden;
			padding: 0px 5px;
		}

		.playlist-item .remarks {
			width: 150px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 0px 10px;
		}

		.playlist-item .thumb {
			width: 40px;
			height: 40px;
			border-radius: 4px;
		}

.playlist-row {
	display: flex; 
	flex-direction: row; 
	align-items: center; 
	gap: 4px;
	margin-bottom: 3px;
}

#choices {
	display: flex;
	flex-direction: row;
	align-items: top;
}

	#choices .choice {
		display: inline-block;
		width: 120px;
		height: 120px;
		border-radius: 10px;
		background: #f4f4f4;
		box-sizing: border-box;
		margin-right: 10px;
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
		cursor: pointer;
		transition: box-shadow 0.4s ease-out;
	}

		#choices .choice:hover {
			box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
		}

		#choices .choice .choice-img,
		#choices .choice .choice-label {
			display: flex;
			flex-direction: row;
			
			justify-content: center;
			box-sizing: border-box;
		}

		#choices .choice .choice-img {
			height: 85px;
			align-items: center;
			
		}

			#choices .choice .choice-img img {
				height: 40px;
				opacity: 0.5;
				transition: opacity 0.4s ease-out;
			}

			#choices .choice:hover .choice-img img {
				opacity: 0.8;
			}

		#choices .choice .choice-label {
			height: 35px;
			align-items: top;
		}

.progressBarHolder {
	margin-top: 15px;
	width: 320px;
	height: 36px;
}

.progressBarHolder.small {
	width: 160px;
	margin-top: 0px;
	height: auto;
}

.progressBarLabel {
	font-size: 10px;
	text-align: center;
	padding-bottom: 5px;
	color: #666;
}

	.progressBarLabel img {
		height: 10px;
	}
	
.progressBar {
	background-color: #f3f3f3;
	border-radius: 8px;
}

	.progressBar.with-border {
		border: 1px solid #c5c5c5;
	}

.progressBarFill {
	width: 0;
	height: 20px;
	background-color: #4caf50;
	text-align: center;
	line-height: 20px;
	color: white;
	border-radius: 8px;
}

#init-holder,
#preview-holder {
	width: 640px;
    height: 360px;
    background: #000;
    color: #fff;
    /* text-align: center; */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
	flex-direction: column;
}

#video-holder {
	width: 640px;
    height: 360px;
    background: #000000;
    color: #fff;
}

.iframe-holder {
    width: 1920px;
    height: 1080px;
    background: #000000;
    color: #fff;
    transform: scale(0.3333); /* 640 / 1920 = 0.3333 en 360 / 1080 = 0.3333 */
    transform-origin: top left; /* Zorgt ervoor dat het schalen gebeurt vanaf de bovenkant en linkerkant */
}

	.iframe-preview-holder-portrait .iframe-holder {
		transform: scale(0.1875);
	}

	.iframe-preview-holder-portrait,
	.iframe-preview-holder-landscape {
		margin-left: 250px;
	}

#iframe-preview-holder {
    width: 640px;
    height: 360px;
	padding: 10px 0px;
	margin-left: 250px;
}


.flex-row {
	display: flex;
	align-items: center;
	flex-direction: row;
}

.divider-header {
	background: url(../../../public/img/web/v2/table_th_bg.png) top left repeat-x;
	text-align: left;
	color: #fff;
	font-size: 14px;
	margin: 0px;
	padding: 5px 10px;
}

.divider-description {
	font-size: 10px;
	padding: 0px 6px;
	color: #3c93dd;
}


.preview-container {
	border: none;
	position: fixed; 
	/* top: calc(100vh - 388px - 20px); 
	left: 245px; */
	cursor: move;
	display: none;
	width: 640px;
    /* height: 384px; */
	z-index: 500;
	background: #666;
	padding-top: 0px;
	left: 15%;
	top: 30%;
	
}

	.preview-container.active {
		top: 30% !important;  /* Midden van het scherm */
		left: 12% !important;
		/*transform: translate(-50%, -50%); /* Perfect gecentreerd */
		display: block;
	}

		.preview-container.active .preview-header-bg-move {
			display: none;
		}

	.preview-container:hover {
		background: #666;
	}

	.preview-container .preview-header {
		background-color: #ccc;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 4px 8px;
		font-size: 14px;
		
	}

		.preview-container .preview-header .preview-header-text {
			margin-right: auto;
			text-align: left;
			
		}

		.preview-container .preview-header .preview-header-close {
			margin-left: auto;
			text-align: right;
			width: 50px;
			cursor: pointer;
		}

		.preview-container .preview-header .preview-header-part,
		.preview-container .preview-header .preview-header-bg-move {
			margin-left: auto;
			text-align: right;
			cursor: pointer;
		}

	.preview-container .preview-modified {
		background-color: #f4f4f4;
		text-align: center;
		padding: 4px 8px;
		font-size: 12px;
	}

	.preview-container .preview-nav {
		background: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 10px 15px;
		font-size: 12px;
	}

		.preview-container .preview-nav .preview-prev {
			margin-right: auto;
			cursor: pointer;
			padding: 8px 0px;
		}

		.preview-container .preview-nav .preview-nr-container {
			margin: 0 auto;
			cursor: pointer;
			text-align: center;
		}

		.preview-container .preview-nav .preview-next {
			margin-left: auto;
			cursor: pointer;
			padding: 8px 0px;
		}

		.preview-container #preview-name {
			font-weight: bold;
			padding-bottom: 5px;
		}

		.preview-container #toggle-play,
		.preview-container #toggle-pause {
			padding-top: 5px;
		}

		.preview-container #video-holder.left-rotated #video-player {
			transform: rotate(90deg) translateX(140px); /* 90 graden linksom draaien */
			transform-origin: center; /* Roteren om het midden van het element */
		}

		.preview-container #video-holder.right-rotated #video-player {
			transform: rotate(-90deg) translateX(-140px); /* 90 graden rechstom draaien */
			transform-origin: center; /* Roteren om het midden van het element */
		}

		.preview-container #video-holder.left-rotated,
		.preview-container #video-holder.right-rotated {
			height: 640px;
			background: #333333;
		}

		/* .preview-container.landscape #iframe_portrait {
			display: none;
		}
		
		.preview-container.landscape #iframe_landscape {
			display: block;
		}
		
		.preview-container.portrait #iframe_portrait {
			display: block;
		}
		
		.preview-container.portrait #iframe_landscape {
			display: none;
		}

		.preview-container.portrait #iframe-holder {
			width: 1080px;
			height: 1920px;
			transform: scale(0.1885);
			transform-origin: top left;
			margin-left: 213px;
		} */

		
	.preview-container.preview-container-small {
		width: 480px;
	}
		.preview-container.preview-container-small #video-holder.left-rotated,
		.preview-container.preview-container-small #video-holder.right-rotated {
			height: 480px;
		}

		
.overlay-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0); /* Transparant bij start */
	z-index: 400;
	display: none;
	transition: background-color 0.5s ease; /* Fade-in transitie */
}

.overlay-bg.active {
	background-color: rgba(0, 0, 0, 0.8); /* Zwarte transparante overlay */
	display: block;
}

.ui-dialog  {
	background: #fffafa !important;
}

.ui-button-text-only .ui-button-text {
	padding: 0px !important;
	font-weight: normal !important;
}

.dialogButton {
	background: url('../../../public/img/web/v2/input_button_bg.png') 0px 0px repeat-x !important;
	border: 1px solid #cacaca !important;	
	height: 27px !important;
	color: #3c93dd !important;
	font-size: 14px !important;		
	cursor: pointer !important;
	padding: 1px 6px !important;
	
}
.dialogButton:hover {
	border: 1px solid gray !important;	
}

#fileList {
    list-style-type: none; /* Verwijder de bullets */
    padding: 0; /* Verwijder eventuele standaard padding van de lijst */
    margin: 0; /* Verwijder eventuele standaard marge van de lijst */
	max-height: 500px;
	overflow-y: auto;
	width: 100%;
}
	#fileList .file-item {
		margin: 5px;
		display: inline-block;
		border: 1px solid #eee;
		border-radius: 5px;
		width: 146px;
		text-align: center;
		background: #fff;
	}

		#fileList .file-item:hover {
			border: 1px solid #aaa;
			transition: border 0.3s ease-out;
			cursor: pointer;
		}	

		#fileList .file-item img {
			width: 146px;
			border-radius: 5px 5px 0px 0px;
		}

		#fileList .file-item .file-title {
			font-size: 11px;
			line-height: 22px;
			width: 100%;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			padding: 5px 10px;
			box-sizing: border-box;
		}

		#fileList .file-item .file-size,
		#fileList .file-item .file-mtime {
			font-size: 9px;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			color: #333;
			padding-bottom: 5px;
			
		}

#pl_form {
	border: 4px solid transparent;
	margin-left: -4px;
}
	#pl_form.drag-over {
		border: 4px dashed #aaa;
	}

#upload-progress-container {
	display: none;
}

#file-list {
	max-width: 900px;
	padding: 0px;
	margin: 0px;
	margin-bottom: 30px;

}
	#file-list .file-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		border: 1px solid transparent;
		padding: 5px;
	}

	#file-list .file-row:hover {
		border: 1px solid #aaa;
		transition: border 0.3s ease-out;
		cursor: pointer;
	}
	
	#file-list .file-row.file-row-head {
		font-weight: bold;
		padding-left: 10px;
	}

	#file-list .file-row:nth-child(odd) {
			background: #f4f4f4;
		}

	#file-list .file-row:nth-child(even) {
		background: #ffffff;
	}

		#file-list .file-row div {
			padding-right: 20px;
		}

		#file-list .file-row .file-checkbox {
			width: 40px;
			padding-right: 10px;
		}

		#file-list .file-row .file-thumb {
			width: 40px;
		}

			#file-list .file-row .file-thumb img {
				width: 40px;
				border-radius: 5px;
			}

		#file-list .file-row .file-title {
			box-sizing: border-box;
			width: 400px;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		#file-list .file-row .file-size,
		#file-list .file-row .file-mtime {
			color: #333;
			
		}

		#file-list .file-row .file-size {
			width: 80px;
			text-align: right;
		}
		#file-list .file-row .file-mtime {
			width: 140px;
			text-align: right;
		}

		#file-list .file-row .file-mimetype {
			width: 110px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		#file-list .file-row .file-usages {
			width: 240px;
		}

		
.colorSelector {
	cursor: pointer;
}

.colorpicker {
	z-index: 500;
}

	.colorpicker input:focus {
		outline: none;
	}

	.colorpicker input {
		color: #fff;
	}
	
.qplayer-status-table {

}
	.qplayer-status-table td {
		padding: 2px 5px 2px 0px;
	}

	.qplayer-status-table td.td-value {
		font-weight: 600;
		padding-left: 10px;
	}


.button-row {
	position: sticky;
	z-index: 99;
	background: #fff;
	bottom: 0px;
}



a#image-link,
a#video-link {
	position: relative;
	width: 76px;
	height: 76px;
	overflow: hidden;
}

	a#image-link .file-resolution,
	a#video-link .file-resolution {
		position: absolute;
		bottom: 0px;
		right: 0px;
		background: rgba(0,0,0,0.6);
		font-size: 8px;
		padding: 2px;
		color: #fff;
	}

.table-header {
	display: flex;
	align-items: center;
	width: 100%;
	text-align: left;
	height: 29px;
	color: #fff;
	font-size: 14px;
}

.table-header .left {
	background: url('../../../public/img/web/v2/table_th_left.png') top right no-repeat;
	width: 3px;
	height: 29px;
}

.table-header .middle {
	background: url('../../../public/img/web/v2/table_th_bg.png') top left repeat-x;
	flex-grow: 1;
	height: 29px;
	display: flex;
	align-items: center;
	padding-left: 10px; /* Adjust for spacing */
}

.table-header .right {
	background: url('../../../public/img/web/v2/table_th_right.png') top left no-repeat;
	width: 3px;
	height: 29px;
}



.container {
	width: 80%;
	margin: auto;
}

.row {
	display: flex;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
}

.custom-label {
	flex: 1;
	font-weight: bold;
}

.custom-select-container {
	flex: 1;
}

.custom-select {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: white;
}

/* template block preview */
.block-preview-img-container {
	position: relative;
	/* Zorgt ervoor dat de container goed werkt met andere positioneringen */
	width: 100%;
	/* Optioneel, stel de breedte in */
	height: 200px;
	/* Geef de container een vaste hoogte of gebruik een percentage */
	overflow: hidden;
	/* Zorgt ervoor dat niets buiten de container zichtbaar is */
	background: linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0),
		linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
	background-size: 20px 20px;
	/* Grootte van de blokjes */
	background-position: 0 0, 10px 10px;
	/* Verschuift de lagen om het patroon te cre�ren */
	height: 200px;
	/* Hoogte van je container */

	margin-bottom: 10px;
}

.block-preview-img-container>.block-preview-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.preview-img-holder {
	height: 160px; 
	text-align: right; 
	margin-top: 15px;
}

.block-preview-img-holder {
	position: relative;
}

.refresh-icon-holder {
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 100;
	cursor: pointer;
}