<commit_before>.archive-main-section {
	position: absolute;
	top: @topspace + @subnav-height;
	bottom: 0;left: 0;right: 0;
	z-index: 1;
}

@archive-sidebar-width: 250px;

@archive-inner-topnav-height : 42px;
@archive-inner-subnav-height : 50px;

@archive-sidepreview-width : 440px;


.archive-sidebar {
	position:absolute;
	top:0px;bottom:0px;
	left:-@archive-sidebar-width+48;
	width:@archive-sidebar-width;
	.box-sizing(border-box);
	background-color:#e8e8e8;
	.box-shadow(inset -1px 0px 6px 0px rgba(0,0,0,.1));
	.transition(left 0.2s ease);
	border-right: 1px solid #d0d0d0;
	.header {
		.title {
			padding: 10px;
			font-size: 15px;
			.text-semibold();
			line-height: 28px;
		}
		.doopen {
			position: absolute;
			top: 9px;
			right: 8px;
			padding: 4px 8px;
			i {
				.opacity(60);
				.rotate(0);
				.transition(all 0.3s ease);
			}
		}
	}
	.content {
		position: absolute;
		top:50px;left:10px;bottom:0px;right:10px;
		overflow: auto;
	}
	z-index: 100;
	&.opened {
		.box-shadow(1px 0px 5px 0px rgba(0,0,0,.2));
		border-right: 2px solid #c0c0c0;
		left:0;
	}
}

.sidebar-sticked {
	.archive-sidebar {
		left:0 !important;
		.doopen i {
			.rotate(-180deg);
		}
	}
	.archive-content {
		left: @archive-sidebar-width !important;	
	}
}

.archive-content {
	position:absolute;
	top:0px; right:0px; bottom:0px;
	left:@tablist-width;
	height:auto;
	background-color:#f8f8f8;
	.transition(left 0.2s ease);
	&.wide {
		left:10px;
	}
	.archive-content-topnav {
		.box-sizing(border-box);
		height:@archive-inner-topnav-height;
		top: 0; left: 0; right: 0;
		padding-right: 2px;
		position:absolute;
		border-bottom:1px #e6e6e6 solid;
		background-color:#efefef;
		z-index: 3;
		.toggle-sidebar-button {
			width:25px;
			height:21px;
			display:block;
			position:relative;
			float:left;
			margin:3px 10px 0 0;
			.border-radius(0 5px 5px 0);
			background: #dadada url('../../images/collapse-sidebar.png') no-repeat 0px 0px;
			&.side-closed {
				background-position: 0px -21px;
			}
		}
		.title {
			color:#333;
			font-weight:bold;
			font-size:18px;	
			vertical-align:middle;
			line-height:26px;
			margin-left: 20px;
		}
		.info {
			color:#999;
			font-style:italic;
			font-size:14px;	
			vertical-align:middle;
		}
		.basket-tabs {
			
			> li {
				float: left;
				a {
					height: @archive-inner-topnav-height;
					line-height: @archive-inner-topnav-height;
					padding: 0 20px;
					border-right: 1px solid #e5e5e5;
					display: block;
					text-decoration: none;
					color: #6f6f6f;
					position: relative;
					b {
						color: #b6b6b6;
						font-weight: normal;
					}
					i {
						position: absolute;
						top:4px;
						right: 4px;
						height: 10px;
						line-height: 10px;
						padding: 2px 5px;
						.border-radius(7px);
						background: #4aa8eb;
						color: #fff;
						.text-semibold();
						font-size: 10px;
						font-style: normal;
					}
					&:hover {
						background: #e8e8e8;
						border-right-color: #dbdbdb;
					}
					&.active {
						background: #f8f8f8;
						border-bottom: 1px solid #f8f8f8;

					}
				}
			}
		}
		.flat-field {
			height: @archive-inner-topnav-height;
			line-height: @archive-inner-topnav-height;
			> a {
				display: block;
				border-left: 1px solid #dfdfdf;
				padding: 0 20px;
				line-height: @archive-inner-topnav-height;
				i, span {
					.opacity(60);
					margin-top: 0;
					vertical-align: middle;
				}
				&:hover {
					background: #e2e2e2 !important;
					border-left-color:#d0d0d0;
					i, span {
						.opacity(90);
					}
				}
			}
			&.open {
				> a {
					background: #e2e2e2;
				}
			}
			
		}
	}

	.archive-content-subnav {
		background-color:#f8f8f8;
		height:@archive-inner-subnav-height;
		.box-sizing(border-box);
	    left: 0;
	    right: 0;
	    top:@archive-inner-topnav-height;
		position:absolute;
		z-index:2;
		border-bottom:1px #e0e0e0 solid;
		border-top:1px #fcfcfc solid;
		padding: 10px 20px;
	}

	.archive-content-inner {
		position:absolute;
		background: @background-main;
		top: @archive-inner-topnav-height + @archive-inner-subnav-height;
	    right: @archive-sidepreview-width; //sidebar preview static + scrollbar rigth space
	    left: 0; bottom:0;
	    border-right: 1px solid #d0d0d0;
		.box-shadow(3px 0 5px -2px #d8d8d8);
		padding: 20px;
		overflow: auto;
		overflow-x: hidden;
		z-index: 1;
		&.statistics {
			right: 0;
		}
	}
}


.source-select {
	float: left;
	margin-right: 20px;
	.dropdown-toggle {
		text-align: left;	
		width:200px;
		height: 22px;
		line-height: 22px;
		.caret {
			float: right;
		}
	}
}
.source-select [class^="dropdown-icon-"] {
	margin: -2px 8px 0 10px;
}
.source-select .sf-dropdown {
	width:200px;
}




/* ====================================== */
   // item(news) urgency colors and labels  

	@outputItemColor1 : #005e84;
	@outputItemColor2 : #64a4bf;
	@outputItemColor3 : #b0cfdd;

	.output-item-label {
		width: 16px;
		height: 16px;
		.border-radius(8px);
		display: inline-block;
		text-align: center;
		color:#fff;
		font-size: 10px;
		.box-sizing(border-box);
		line-height: 16px;
		vertical-align: top;
		visibility: hidden;
		&.label-1 {
			background: @outputItemColor1;
			visibility: visible;
		}
		&.label-2 {
			background: @outputItemColor2;
			visibility: visible;
		}
		&.label-3 {
			background: @outputItemColor3;
			visibility: visible;
		}
	}



/* ====================================== */
  // item(news) status labels  (exmpl. canceled)

	.status-label {
		.box-sizing(border-box);
		height: 15px;
		padding: 4px 7px;
		background: #1f6681;
		.border-radius(2px);
		display: inline-block;
		font-size: 10px;
		color: #fff;
		line-height: 7px;
		margin: 5px 10px 0 2px;
		text-transform: uppercase;
		&.label-canceled {
			background:#1c1c1c;
			color: #ff5353;
		}
	}



/* ====================================== */
  // media-box styling

@sfbox_mediaHeight : 82px;
@sfbox_sidepadding : 5px;
@sfbox_minHeight : 210px;
@sfbox_minWidth : 130px;

@sfbox_mediaWidth : 150px;

	.media-box-generic () {
		height:auto;
		width: auto;
		min-height: @sfbox_minHeight;
		min-width: @sfbox_minWidth;

		border: 1px solid #d4d4d4;
		border-width: 1px 1px 3px 1px; 
		margin: 1px 12px 10px 1px;

		.border-radius(3px);
		padding:@sfbox_sidepadding;
		position:relative;
		float:left;
		display:block;
		cursor:pointer;
		background-color:#fff;
		
		&.archived {
			background: #f2f2f2 url(../../images/checkmark-big.png) no-repeat bottom right;
			.box-shadow-both(inset 0 2px 0 0 #e9e9e9, 0 0 0 2px #fff);
		}
		.loading-status { 
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 2;
			background: rgba(255,255,255,0.85) url('../../images/loading-large.gif') no-repeat 50% 50%;
		}

		.media {
			.box-sizing(border-box);
			height:@sfbox_mediaHeight; //+2 media border
			margin:0 2px 5px;
			display:block;
			position:relative;
			background: #f4f4f4;
			img {
				height: @sfbox_mediaHeight;
			}
			.caption {
				display: none;
			}
		}
		&.media-picture {
			
		}
		&.media-text,&.media-composite {
			.media {
				max-width: 140px;
				font-size: 12px;
				font-style: italic;
			}
			small {
				display: block;
				padding: 2px 5px;
			}
		}

		&.media-audio, &.media-video {
			.media {
				width: 140px;
				max-width: 140px;
				text-align: center;
				i {
					margin-top: 17px;
					.opacity(35);
				}
			}
		}

		h5 {
			position: absolute;
			left: @sfbox_sidepadding+2;
			right: @sfbox_sidepadding+2;
			width:auto;
			white-space:nowrap;
			overflow:hidden;
			text-overflow: ellipsis;
			height:18px;
			font-size:11px;
			color:#444;
			text-transform: uppercase;
		}
		dl {
			font-size:11px;
			position:relative;
			height:auto;
			margin:0 2px;
			padding-top: 20px;
			dt {
				width:auto;
				float: left;
				clear: left;
				color:#787878;
				line-height:16px;
				font-weight:normal;
			}
			dt:after {
				content : ":";
			}
			dd { 
				width:auto;
				color:#b4b4b4;
				line-height:16px;
				float:left;
				margin-left:4px;
				&.subject-line {
					max-width:90px;
					height:14px;
					overflow:hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
			}
		}
		.type-icon {
			position: absolute;
			bottom: 4px;
			left: 28px;
			.opacity(50);
		}

		.source {
			&:after {
				content: "" !important;
			}
		}
		.provider {
			color: #787878;
			margin-left: 0;
		}

		.urgency-label {
			position: absolute;
			bottom: 6px;
			left: 7px;
		}
	}



.mgrid-view {
	padding-bottom: 80px;
	.media-box {
		.media-box-generic;

		/* control buttons on the bottom */
		.item-functions {
			background: #fff;
			position: absolute;
			height: 32px;
			border-top: 1px solid #ccc;
			bottom: 0;
			left: 0;
			right: 0;
			display: none;
			.item-field {
				width: 31px;
				height: 32px;
				display: inline-block;
				border-right: 1px solid #f0f0f0;
				float: left;
				.box-sizing(border-box);
				padding: 8px 9px 8px 8px;
				span {
					display: none;
				}
				&:hover{
					background: #f0f0f0;
					border-color: #e0e0e0;
				}
				&.disabled {
					cursor: default;
					i {
						.opacity(50);
					}
					&:hover {
						background: #fff;
					}
				}
			}
			
		}
		&:hover {
			.item-functions {
				display: block;
			}
		}
		&.selected {
			border-color: #787878;
			.box-shadow(0 0 2px 1px #e0e0e0);
		}

	}
}

/* ====================================== */
  // media box list view 

@rightfield-width:200px;

.mlist-view, .compact-view {
	> div:first-child {
		.media-box {
			border-top: 3px solid #ebebeb;
		}
	}
	.media-box {
		position: relative;
		background: #fff;
		border-bottom: 1px solid #ebebeb;
		border-right: 2px solid #fff;
		min-height: 40px;
		overflow: hidden;
		padding-left:3px; 
		&:hover {
			background: #f4f4f4 !important;
			border-bottom-color: #e0e0e0;
			border-right: 2px solid #f4f4f4;
			cursor: pointer;
			.list-field {
				border-color:#ebebeb; 
			}
		}
		
		&.selected {
			background: #eff7fa !important;
			border-right: 2px solid #d8d8d8 !important;
			&:hover {
				.item-functions {
					background: #eff7fa;
					.item-field {
						&:hover {
							background: #d6e8ef;
						}
						&.disabled {
							&:hover {
								background: #d6e8ef;
							}
						}
					}
				}
			}
		}
		.loading-status { 
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 2;
			background: rgba(255,255,255,0.85) url('../../images/loading-large.gif') no-repeat 50% 50%;
		}
		&.archived {
			background: #f2f2f2;
			h5 {
				background: url('../../images/checkmark-big-full.png') no-repeat right 50%;
				background-size: 51px;
			}
		}
		.type-icon {
			
			i {
				.opacity(60);
				width: 24px;
				padding-left: 0;
				margin-left: -2px;
				margin-top: -3px;
			}
		}
		.list-field {
			border-left: 1px solid #f4f4f4;
			float: left;
			height: 16px;
			padding: 21px 11px 20px;
			.sf-checkbox-custom {
				margin:0; 
			}
			&.type-icon {
				padding: 10px 11px;
				height: 37px;
				text-align: center;
				.output-item-label {
					clear: both;
					float: left;
					margin-top: 4px;
				}
			}
			&.no-border {
				border:0;
			}
		}
		
		.media-info {

			.item-provider {
				font-size: 14px;
				color: #787878;
				margin-right: 15px;
				font-size: 12px;
				line-height: 16px;
				height: 100%;
				float: left;
			}
			h5 {
				font-size: 13px;
				color: #333;
				font-weight: normal;
				float: none;
				line-height: 16px;
				min-height: 16px;
				height: auto;
				margin-left: 85px;
				margin-right: @rightfield-width+5px;
				padding: 12px 25px 12px 11px;
				
				.main-title {
					font-style: normal;
					display: block;
					float: none;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.status-label {
					margin-top: 0;
					display: block;
					float: left;
				}
			}
			
			.meta-data-field {
				color: #aaa;
				font-size: 12px;
				margin-top: 3px;
				white-space: normal;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				height: 14px;
				line-height: 14px;
				.item-provider {
					height: 14px;
					line-height: 14px;
					margin-right: 5px;
				}
			}
			
		}
		.item-right {
			border-left: 0;
			width: @rightfield-width;
			position: absolute;
			right: 0;
			top:0;
			text-align: right;
			overflow: hidden;
			.item-functions {
				background: #f4f4f4;
				position: absolute;
				right: -@rightfield-width;
				top:0px;
				bottom: 0;
				width: @rightfield-width;
				.item-field {
					span {
						display: none;
					}
					float: right !important;
					border-left: 1px solid #d8d8d8;
					float: left;
					height: 16px;
					padding: 21px 11px 20px;
					&.type-icon {
						padding: 10px 11px;
						height: 37px;
						text-align: center;
					}
					&:hover {
						background: #e8e8e8;
					}
					&:last-child {
						float: right;
					}
					&.disabled {
						cursor: default;
						i {
							.opacity(30);
						}
						&:hover {
							background: #e8e8e8;
						}
					}
				}
				
			}
		}

		&.archived {
			background: #f8f8f8;
			.box-shadow(inset 0 2px 0 0px #f2f2f2);
			border-right: 2px solid #f8f8f8;
			.state-border {
				background: #2f93cd;
			}
			h5 {
				background: url('../../images/checkmark-big-full.png') no-repeat right 50%;
				background-size: 36px;
			}
			&.active {
				border-right: 2px solid #d8d8d8 !important;
			}
		}
		
		
		&:hover {
			.item-functions {
				right: 0;
			}
		}
		.state-border {
			position: absolute;
			width: 3px;
			left: 0;
			top:0;
			bottom: 0;
			background: #b70000;
		}

	}
	
}

.compact-view {

	.loading-status {
		background-size: 28px !important;
	}
	.list-field {
		padding: 12px 11px !important;
		&.type-icon {
			height: 16px !important;
		}
	}
	.item-field {
		padding: 12px 11px !important;
	}
	h5 {
		margin-left: 126px !important;
		.status-label {
			margin-top: 1px !important;
		}
	}

} 

/* ====================================== */
  // media box HOVER grid view 

.media-library-main-content-inner { position: absolute; }

.mgrid-view {
	.media-box {
		&.media-box-hover {

			.media-box-generic;
			position: absolute;
			min-height: @sfbox_minHeight + 65;
			border: 2px solid #4d4d4d !important;
			padding:2px;
			margin: 0px;
			position:absolute;
			.box-shadow(0px 0px 6px 0px #777777);
			z-index: 2;

			.media-select {
				padding: 1px 2px 1px 1px;
				background: rgb(255,255,255);
				position: absolute;
				top:14px;
				left: 2px;
				z-index: 1;
				.border-radius(0 0 2px 0 );
				.sf-checkbox-custom {
					margin:0;
				}
			}
			.drag-fake {
				height: 8px;
				margin:2px; 
				.opacity(30);
				background: url(../../images/drag_bg_large.png) repeat 0 0;				
			}
			.media {
				height: 100px;
				border: 0;
				min-width: @sfbox_minWidth + 21;
				padding: 0;
				img {
					border: 0;
					height: 100px;
				}
			
				/*this is not part of media-box
				.media-box-button {
					.media-box-button-generic;
				}
				*/
			}
			&.media-picture {
				
			}
			&.media-text,&.media-composite, {
				.media {
					max-width: 161px;
					padding: 0 5px;
				}
			}
			&.media-video, &.media-audio {
				.media {
					width: 161px;
					max-width: 161px;
					i {
						margin-top: 22px;
					}
				}
			}

			&.archived {
				background: #f2f2f2;
				.box-shadow(0px 0px 6px 0px #777777);
				.media-box-content {
					background:  url(../../images/checkmark-big.png) no-repeat bottom right;
				}
			}
			

			.media-box-content {
				position: absolute;
				bottom: 33px;
				top: 117px;
				left: 0;
				right: 0;

				h5 {
					left: 5px; right: 5px;
				}
				dl {
					margin: 2px 5px;
					dd {
						&.subject-line {
							width: 90px;
						}
					}
				}

				.type-icon {
					bottom: 5px;
				}
				.urgency-label {
					bottom: 7px;
				}
				.status-label {
					margin-left: 5px;
				}
			}

			
			

			/* control buttons on the bottom */
			.item-functions {
				background: #fff;
				position: absolute;
				height: 32px;
				border-top: 1px solid #ccc;
				bottom: 0;
				left: 0;
				right: 0;
				.thumb-field {
					width: 31px;
					height: 32px;
					display: inline-block;
					border-right: 1px solid #f0f0f0;
					float: left;
					.box-sizing(border-box);
					padding: 8px 9px 8px 8px;
					&:last-child {
						border-right: 0;
						width: auto;
						padding-right: 8px;
						float: right;
					}
					&:hover{
						background: #f0f0f0;
						border-color: #e0e0e0;
					}
					&.disabled {
						cursor: default;
						i {
							.opacity(50);
						}
						&:hover {
							background: #fff;
						}
					}
				}
				
			}
			

			&.selected {
				
				.item-functions {
					border-color: #7db6cd;
					.thumb-field {
						border-color: #bee2f2;
						&:hover {
							background: #c2e5f4;
						}
					}
				}
			}

			/*
			a.add-to-scratchpad {
				clear:both;
				width:20px;
				height:16px;
				background: url(../../images/add-to-scratchpad.png) no-repeat 0px 0px;
				display:block;
				bottom:0px;
				left:0px;
				margin-top:30px;
				vertical-align:top;
				&:hover {
					background: url(../../images/add-to-scratchpad-hover.png) no-repeat 0px 0px;
				}
				&.disable {
					width:0px;
					background:none;
					padding-left: 0px;
				}
			}	*/

			.popover {
				.popover-inner {
					width: 200px;
					.popover-content {
						color: #333;
					}
				}
				
			}

		}
	}
}


/* ====================================== */
  // SIDE PREVIEW

.side-preview {
	position: absolute;
	width: @archive-sidepreview-width; 
	top: @archive-inner-topnav-height + @archive-inner-subnav-height;
	right: 0; bottom: 0;
	background: #fff;
	.header {
		.box-sizing(border-box);
		position: absolute;
		left: 0; right: 0; top:0; height: 54px;
		padding:10px 22px ;
		border-bottom:1px solid #e2e2e2;
		background: #fafafa;
		.info-list {
			li {
				font-size: 12px;
				.text-light();
				color: #a1a1a1;
				span {
					.text-normal();
					color: #565656;
				}
			}
		}
		.word-count {
			font-size: 12px;
			.text-normal();
			color: #565656;
			i {
				font-style: normal;
			}
			span {
				.text-light();
				color: #a1a1a1;
			}
		}
	}
	.content {
		.box-sizing(border-box);
		position: absolute;
		left: 0; right: 0; top:54px; bottom: 0;
		padding: 10px 22px;
		overflow-y: auto;
		.date-info {
			.text-light();
			font-size: 12px;
			color: #a1a1a1;
		}
		.title {
			font-size: 17px;
			line-height: 22px;
			.text-semibold();
			margin: 15px 0;
			color: #333;
		}
		.core-content {
			font-size: 14px;
			.description {
				font-style: italic;
				color: #656565;
				margin-bottom: 15px;
			}
			.picture-preview {
				max-width: 100%;
				margin: 20px 0;
				img {
					max-width: 100%;
					height: auto;
				}
				&.loading {
					width: 100%;
					height: 200px;
					background: #f8f8f8 url(../../images/loading-large.gif) center center no-repeat;
				}
			}
		}
	}
}

.preview-backdrop {
	position: absolute;
	width: @archive-sidepreview-width; 
	top: @archive-inner-topnav-height + @archive-inner-subnav-height;
	right: 0; bottom: 0;
	background: #fff;
	.opacity(0);
	.transition(all ease 0.2s);
	&.show {
		.opacity(80);
	}
}

/* ====================================== */
  // Context menu

.context-menu {
		position: absolute;
		right: @archive-sidepreview-width;
		width: 250px;
		top: @archive-inner-topnav-height + @archive-inner-subnav-height;
		bottom: 0;
		background: #fff;
		border-right: 1px solid #dbdbdb;
		.box-shadow(2px 0 3px 0 #e8e8e8);
		.transition(all ease 0.3s);
		&.show {
			right: @archive-sidepreview-width - 250;
		}
		.title {
			font-size: 17px;
			.text-light();
			color: #333;
			padding: 10px 15px;
		}
		.context-list {
			padding: 10px 15px 20px;
			li {
				border : 1px solid #fff;
				border-bottom: 1px solid #e5e5e5;
				background: #e9f4f8;
				padding: 6px 13px;
				height: 21px;
				line-height: 21px;
				margin-bottom:7px;
				font-size: 14px;
				color: #333;
				.border-radius(2px);
				i {
					font-style: normal;
					color: #676565;
					.text-light();
				}
				&:hover, &.selected {
					background: #b3daf2;
					border-color: #4aa8eb;
					cursor: pointer;
				}
			}
		}
	}





/* ====================================== */
  // LIGHTBOX PREVIEW

@lightbox-bg : #000;
@lightbox-sidepane : 380px ;
@lightbox-toppane : 45px;
@lightbox-composite-width : 250px;

.lightbox-preview {
	&.modal {
		//reset modal styles
		position: fixed;
		.border-radius(0px);
		top:0 !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		background: @lightbox-bg !important;
		margin: 0 !important;
		width: auto !important;
	}

	.lightbox-right {
		width: @lightbox-sidepane;
		position: absolute;
		.box-sizing(border-box);
		right: 0;
		top: 0;
		bottom:0;
		background: @background-main;
		padding: 15px;
		//info boxes 
		.lightbox-title {
			font-size: 18px;
			font-weight: normal;
			max-width: 100%;
			height: 24px;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap; 
		}
		.lightbox-modified-info {
			color: #a9a9a9;
			font-size: 12px;
			display: block;
		}
		.lightbox-media-type {
			.opacity(40);
			float: none;
			margin-left: -2px;
		}
		.urgency-label {
			margin-top: 3px;
			margin-right: 5px;
		}
		.status-label {
			margin-top: 4px;
		}
		.lightbox-actions {
			margin-top: 10px;
			i {
				margin-right: 5px;
				&.icon-archive {
					margin-top: 0;
				}
			}
		}
		.lightbox-media-data {
			position: absolute;
			top:130px;
			left:15px;
			right: 5px;
			bottom: 15px;
			overflow: auto;
			padding-right: 10px;
		}
		.lightbox-descritpion {
			width: 100%;
			margin-top: 10px;
			color: #484848;
		}
		.tabmodule {
			margin: 20px 0;
		}
	}
	.lightbox-left {
		position: absolute;
		.box-sizing(border-box);
		right: @lightbox-sidepane;
		top: @lightbox-toppane;
		bottom:0;
		left:0;
		.lightbox-large-preview {
			text-align: center;
			img {
				max-width: 100%;
				height: auto!important;
				max-height: 100%;
			}
		}
		.lightbox-caption {
			background: rgba(0,0,0,0.7);
			color: #fff;
			position: absolute;
			bottom: 0;
			left:0;
			right: 0;
			padding: 10px 20px;
			text-align: center;
			font-size: 14px;
			line-height: 20px;
			.box-sizing(border-box);
		}
		.lightbox-paper {
			position: absolute;
			top: 50px; left: 50px; right: 50px; bottom: 50px;
			.lightbox-text {
				background: #fff;
				max-width: 800px;
				margin: 0px auto;
				height: 100%;
				position: relative;
				.border-radius(5px);
				.lightbox-title {
					position: absolute;
					top: 20px;
					left: 20px;
					right: 20px;
					height: 55px;
					font-size: 18px;
					line-height: 24px;
					border-bottom: 5px solid #e0e0e0;
				}
				.lightbox-fulltext {
					position: absolute;
					top: 110px;
					left: 30px;
					right: 30px;
					bottom: 20px;
					overflow: auto;
					small {
						color: #777;
					}
					.lightbox-fullcontent {
						margin: 20px 0;
					}
					p {
						font-size: 13px;
						line-height: 20px;
						margin-bottom: 15px;
					}
				}
			}
		}
		.lightbox-audio, .lightbox-video {
			background: #101010;
			margin: 50px;
			padding : 50px 0 ;
			text-align: center;
		}
	}
	
	.lightbox-composite {
		width: @lightbox-composite-width;
		.box-sizing(border-box);
		padding: 20px;
		background: #101010;
		position: absolute;
		.box-shadow(2px 0 3px 0 #000);
		top: @lightbox-toppane;
		bottom: 0;
		left: 0;
		overflow: auto;
		z-index: 2;
		&::-webkit-scrollbar {
			width:16px;
			border-left:1px solid #282828;
		}
		&::-webkit-scrollbar-thumb {
			border-right: 3px solid #101010;
			border-left: 1px solid #282828;
			background: #383838;
			box-shadow: inset 2px 0 0 0 #101010;
			
		}

		ul {
			list-style-type: none;
			margin:0; padding: 0;
			> li {		
				margin-bottom: 20px;
				float: left;
				.box-sizing(border-box);
				width: 192px;
				border: 1px solid #101010;
				.border-radius(2px);
				&:hover {
					cursor: pointer;
				}
				&.text {
					background: #f0f0f0;
					border-color:#f0f0f0;
					padding: 5px 10px;
					&:hover {
						background: #fff;
						border-color:#fff;
					}
				}
				&.picture {
					padding: 5px;
					border-color:#1b1b1b;
					background: #000;
					figure img {
						width: 180px;
					}
					&:hover {
						background: #101010;
						border-color:#333;
					}
				}
				&.audio, &.video {
					border-color:#1b1b1b;
					background: #000;
					padding: 15px 5px;
					text-align: center;
					.media {
						width: 48px;
						height: 48px;
						display: inline-block;
						background: url(../../images/file-types-icons-large-white.png) no-repeat 0 -144px;
						.opacity(40);
					}
					&:hover {
						background: #101010;
						border-color:#333;
						.media {
							.opacity(60);
						}
					}
				}
				&.video {
					.media {
						background-position: 0 -96px;
					}
				}
			}
		}

	}
	.lightbox-composite-preview {
		.lightbox-left {
			left: @lightbox-composite-width;
		}
	}
	
	.lightbox-composite {
		width: @lightbox-composite-width;
		.box-sizing(border-box);
		padding: 20px;
		background: #101010;
		position: absolute;
		.box-shadow(2px 0 3px 0 #000);
		top: @lightbox-toppane;
		bottom: 0;
		left: 0;
		overflow: auto;
		z-index: 2;
		&::-webkit-scrollbar {
			width:16px;
			border-left:1px solid #282828;
		}
		&::-webkit-scrollbar-thumb {
			border-right: 3px solid #101010;
			border-left: 1px solid #282828;
			background: #383838;
			box-shadow: inset 2px 0 0 0 #101010;
			
		}

		ul {
			list-style-type: none;
			margin:0; padding: 0;
			> li {		
				margin-bottom: 20px;
				float: left;
				.box-sizing(border-box);
				width: 192px;
				border: 1px solid #101010;
				&:hover {
					cursor: pointer;
				}
				&.text {
					background: #f0f0f0;
					border-color:#f0f0f0;
					.border-radius(2px);
					padding: 5px 10px;
					&:hover {
						background: #fff;
						border-color:#fff;
					}
				}
				&.picture {
					padding: 5px;
					border-color:#1b1b1b;
					background: #000;
					figure img {
						width: 180px;
					}
					&:hover {
						background: #101010;
						border-color:#333;
					}
				}
			}
		}

	}
	.lightbox-composite-preview {
		.lightbox-left {
			left: @lightbox-composite-width;
		}
	}
	.lightbox-top {
		position: absolute;
		.box-sizing(border-box);
		right: @lightbox-sidepane;
		top: 0;
		height: @lightbox-toppane;
		background: #191919;
		left:0;
		padding: 8px;
		text-align: center;
		.btn {
			.box-shadow-both(inset 0px 1px 0px 0px #383838, 0px 1px 0px 0px #292929);
			margin: 0 5px;
			i[class*="icon-"]{
				.opacity(80);
				margin-right: 5px;
			}
			&:hover {
				.box-shadow-both(inset 0px 1px 0px 0px #737373, 0px 1px 0px 0px #292929);
			}
		}
		.lightbox-close {
			width: 16px;
			height: 16px;
			display: block;
			position: absolute;
			right: 16px;
			top:16px;
			
			.opacity(70);
			&:hover {
				.opacity(100);
			}
		}
	}
	

}


.metadata-details-new {
	color:#777;
	position:relative;
	height:auto;
	margin:0;
	font-size: 12px;
	dt {
		width:100px;
		float: left;
		clear: left;
		font-weight:normal;
		color:#474747;
		margin-bottom:5px;
		line-height:16px;
		vertical-align:middle;

	}
	dt:after {
		content : ":";
	}
	dd { 
		width:245px;
		max-width: 245px;
		float:left;
		margin-left:0px;
		line-height:16px;
		margin-bottom:7px;
		vertical-align:middle;
		word-break: break-word;
	}
}

/* END OF LIGHTBOX PREVIEW */




/*modal window*/
@modalMaxImageWidth : 379px;
@modalMaxImageHeight : 250px;

.modal-body {
	.row-fluid {
		.span6 {
			figure {
				margin:0px;
				padding:0px;
				width:100%;
				max-width:@modalMaxImageWidth;
				height:auto;
				max-height:@modalMaxImageHeight;
			}
			dl {
				font-size:13px;
				color:#777;
				position:relative;
				height:auto;
				margin:0;
				dt {
					width:110px;
					float: left;
					clear: left;
					font-weight:normal;
					color:#474747;
					margin-bottom:5px;
					line-height:16px;
					vertical-align:middle;
				}
				dt:after {
					content : ":";
				}
				dd { 
					width:245px;
					max-width: 245px;
					float:left;
					margin-left:0px;
					line-height:16px;
					margin-bottom:5px;
					vertical-align:middle;
				}
				&.line-borders {
					width:379px;
					border-top:1px solid #e8e8e8;
					margin-top:15px;
					dt {
						border-bottom:1px solid #e8e8e8;
						vertical-align:top;
						line-height:20px;
						margin-bottom:0px;
					}
					dd {
						padding-right: 24px;
						border-bottom:1px solid #e8e8e8;
						vertical-align:top;
						line-height:20px;
						margin-bottom:0px;
					}
				}
			}	
			
			
		}
	}
}

.metadata-language {
	height: 38px;
	position: relative;
	z-index: 10;
}


.metadata-details {
	max-height: 350px;
	overflow-y: auto;
	overflow-x: hidden; 
	padding: 5px;
	input, textarea {
		border-color: #e0e0e0 !important;
		color: #585858;
		&:focus {
			border-color:  rgba(82, 168, 236, 0.8) !important;
			color:#000;
		}
	}
}
.edit-metadata-select {
	margin-top: 2px;
	height: 26px;
}


.modal-header {
	button.close {
		padding : 0;
		cursor: pointer;
		background: transparent;
		border:0;
		-webkit-appearance: none;
		&:hover {
			color: #b3b3b3;
		}
	}
}

.modal-body {
	.form-horizontal {
		margin:0 !important;
	}	
}

.btn.pull-right {
	margin-left: 10px;
}

.meta-description-text {
	height: 52px;
	max-width: 245px;
}

.close {
		&:hover {
			color: #b3b3b3;
		}
	}


/*scratchpad media box*/
.media-box-scratchpad {
	.media-box-generic;
	.box-shadow(0px 0px 6px 0px #000);
	border:1px solid #414141;
	.media-box-button {
		//.media-box-button-generic;
		
		&.right {
				right:0px;
				border-left:2px solid #fff;
				&.top {
					top:0px;
					border-bottom:2px solid #fff;
					a {
						width:16px;
						height:16px;
						.box-sizing(border-box);
						padding: 3px 4px 4px 4px;
						display:block;
						background:#333;
						&:hover {
							background:#08c;
						}
					}
				}
			}
	}
}





/* scratchpad slider */


.scratchpad-slider {
	width:auto;
	overflow: auto;
	&:focus {
		outline:0px;
	}
}

.horizontal-slider
{
	height: auto;
	max-height: 100%;
	&:focus {
		outline:0px;
	}
}

.slider-content {
	overflow:visible;
	height:180px;
	padding:5px 5px 0 5px;
}

.jspHorizontalBar
{
	height: 6px;
	.border-radius(3px);
}

.jspTrack
{
	background: #8d8d8d;
	position: relative;
	.border-radius(3px);
}

.jspDrag
{
	background: #666;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
	.border-radius(3px);
	&:hover {
		background:#4d4d4d;
	}
	&:active {
		background:#4d4d4d;
	}
}


/* uploads grid used for upload popup */
.uploads-grid {
	list-style-type: none;
	margin:60px 0 0;
	padding: 0;
	top:0;
	bottom:0;
	overflow: scroll;
	position: absolute;
	li {
		max-height: 100px;
		float: left;
		margin: 0 15px 15px 0;
		padding: 3px;
		border:1px solid #d0d0d0;
		position: relative;
		.add-button {
			position: absolute;
			background-color: #0079cc;
			left: 3px;
			top: 3px;
			width:16px;
			height: 18px;
			padding: 4px;
			display: none;
		}
		&:hover {
			background: #0079cc;
			border-color:#2d95dd;
			cursor:pointer;
			.box-shadow(0px 0px 3px #a0a0a0);
			.add-button {
				display: block !important;
			}
		}
		&.grid-selected {
			background: #0079cc;
			border-color:#2d95dd;
		}
		img {
			height: 100px;
			max-height: 100px;
		}
	}
}

/* drag area used in uploads grid */
.drag-area {
	background: #f8f8f8;
	border: 3px dashed #e0e0e0;
	position: absolute;
	top:0;
	left: 0;
	bottom: 0;
	right: 0;
}
.drag-area-title {
	width: 100%;
	background: url("../../images/dragfiles.png") no-repeat 50% 0;
	margin-top: 5%;
	padding-top: 100px;
	text-align: center;
	color:#a0a0a0;
	font-size: 24px;
}

.drag-area-button {
	text-align: center;
	margin-top: 30px;
}





/* SIDE FILTERS */

.filter-edit input[type="text"] {
	border: 1px solid #9D9D9D !important;
	.box-shadow(0px 1px 2px -1px #f0f0f0)!important;
	height: 24px !important;
	padding: 3px 5px !important;
	width: 100% ;
	margin-right: 5px ;
	.border-radius(4px) !important;
	overflow: hidden;
	float: left;
	display: block;
}

#MAFilter {
	padding-left: 24px !important;
}

#MAFilter:focus, .filter:focus {
	/*border-color: #f0f0f0 !important;*/
	-webkit-appearance:none !important;	
	outline:0 !important;
}

#MAFilterResults {
	font-family: Arial,Helvetica,sans-serif;
	border: 1px solid #909090;
	list-style-type: none;
	margin: 0;
	padding: 5px 0;
	width: 150px;
	z-index: 99;
	background: #fff;
	max-height: 300px;
	overflow-y: auto;
	overflow-x:	none;  
	box-shadow: 2px 2px 4px 0px #666;
}
#MAFilterResults li {
	color: #333;
	font-size: 12px;
	padding: 2px 10px;
	background-color: #fff;
}

.filter-list li 
{
	&:hover, &.hover 
	{
		color:#fff !important;
		background-color: #006DCC;
		background-image: -moz-linear-gradient(top, #198cef, #027bb8);
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#198cef), to(#027bb8));
		background-image: -webkit-linear-gradient(top, #198cef, #027bb8);
		background-image: -o-linear-gradient(top, #198cef, #027bb8);
		background-image: linear-gradient(to bottom, #198cef, #027bb8);
		background-repeat: repeat-x;
		border-color: #027bb8 #027bb8 #044781;
		border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff198cef', endColorstr='#ff027bb8', GradientType=0);
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
		cursor: pointer;
	}
}

.open {
	border-color: #b2b2b2;
}
/*
.tag-container {
	margin: 10px 0 0;
	padding: 0;
	list-style-type: none;
	width: auto;
	height: auto;
	clear: both;
	float: left;
}

.tag-container li {
	height: 16px;
	width: auto;
	float: left;
	padding: 2px 26px 2px 5px;
	color: #fff;
	line-height: 16px;
	font-size: 11px;
	margin: 5px 5px 0 0;
	border-radius: 3px !important;
	-webkit-border-radius: 3px !important;
	-moz-border-radius: 3px !important;
	display: block;
	position: relative;
}

.tag-container li.modifier-inc {
	background-color: #4a4a4a;
}

.tag-container li.modifier-ext {
	background-color: #237978;
}
.tag-container li.modifier-exc {
	background-color: #db0f0f;
}

.tag-container li a.closebutton { 
	position: absolute; 
	border-left: 1px dotted #939393;
	top:1px;
	right:0px; 
	display: block; 
	width: 20px; 
	height: 18px; 
	font-size: 1px; 
	background: url('../../images/close.png'); 
}
.tag-container li:hover { 
 	background-color: #313131;
 	cursor: pointer;
}

.range {
	width: 52px !important;
	margin-right: 5px !important;
}
.classic {
	width: 115px !important;
	margin-right: 0px !important;
}
*/
.open-filter-button {
	position: absolute;
	top: 3px;
	width: 20px;
	height: 19px;
	left: 3px;
	background: url("../../images/open-filters-icon.png") no-repeat 2px 2px;
	cursor: pointer;
}

#filter-modifiers a[data-modifier="inc"].active {
	background: #4a4a4a;
	color:#fff;
	text-shadow:none;
}
#filter-modifiers a[data-modifier="ext"].active {
	background: #237978;
	color:#fff;
	text-shadow:none;
}
#filter-modifiers a[data-modifier="exc"].active {
	background: #db0f0f;
	color:#fff;
	text-shadow:none;
}

#filter-modifiers .btn-mini {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	width: 33%;
}
#filter-modifiers .btn-mini:last-child {
	width: 34%;
}

.filter-value-container input {
	margin-top:3px;
}<commit_msg>Filter sidebar quick fix<commit_after>.archive-main-section {
	position: absolute;
	top: @topspace + @subnav-height;
	bottom: 0;left: 0;right: 0;
	z-index: 1;
}

@archive-sidebar-width: 250px;

@archive-inner-topnav-height : 42px;
@archive-inner-subnav-height : 50px;

@archive-sidepreview-width : 440px;


.archive-sidebar {
	position:absolute;
	top:0px;bottom:0px;
	left:-@archive-sidebar-width+48;
	width:@archive-sidebar-width;
	.box-sizing(border-box);
	background-color:#e8e8e8;
	.box-shadow(inset -1px 0px 6px 0px rgba(0,0,0,.1));
	.transition(left 0.2s ease);
	border-right: 1px solid #d0d0d0;
	.header {
		.title {
			padding: 10px;
			font-size: 15px;
			.text-semibold();
			line-height: 28px;
		}
		.doopen {
			position: absolute;
			top: 9px;
			right: 8px;
			padding: 4px 8px;
			i {
				.opacity(60);
				.rotate(0);
				.transition(all 0.3s ease);
			}
		}
	}
	.content {
		position: absolute;
		top:50px;left:10px;bottom:0px;right:10px;
		overflow: auto;
	}
	z-index: 100;
	&.opened {
		.box-shadow(1px 0px 5px 0px rgba(0,0,0,.2));
		border-right: 2px solid #c0c0c0;
		left:0;
	}
}

.sidebar-sticked {
	.archive-sidebar {
		left:0 !important;
		.doopen i {
			.rotate(-180deg);
		}
		&.opened {
			.box-shadow(inset -1px 0px 6px 0px rgba(0,0,0,.1));
			border-right: 1px solid #d0d0d0;
		}
	}
	.archive-content {
		left: @archive-sidebar-width !important;	
	}
}

.archive-content {
	position:absolute;
	top:0px; right:0px; bottom:0px;
	left:@tablist-width;
	height:auto;
	background-color:#f8f8f8;
	.transition(left 0.2s ease);
	&.wide {
		left:10px;
	}
	.archive-content-topnav {
		.box-sizing(border-box);
		height:@archive-inner-topnav-height;
		top: 0; left: 0; right: 0;
		padding-right: 2px;
		position:absolute;
		border-bottom:1px #e6e6e6 solid;
		background-color:#efefef;
		z-index: 3;
		.toggle-sidebar-button {
			width:25px;
			height:21px;
			display:block;
			position:relative;
			float:left;
			margin:3px 10px 0 0;
			.border-radius(0 5px 5px 0);
			background: #dadada url('../../images/collapse-sidebar.png') no-repeat 0px 0px;
			&.side-closed {
				background-position: 0px -21px;
			}
		}
		.title {
			color:#333;
			font-weight:bold;
			font-size:18px;	
			vertical-align:middle;
			line-height:26px;
			margin-left: 20px;
		}
		.info {
			color:#999;
			font-style:italic;
			font-size:14px;	
			vertical-align:middle;
		}
		.basket-tabs {
			
			> li {
				float: left;
				a {
					height: @archive-inner-topnav-height;
					line-height: @archive-inner-topnav-height;
					padding: 0 20px;
					border-right: 1px solid #e5e5e5;
					display: block;
					text-decoration: none;
					color: #6f6f6f;
					position: relative;
					b {
						color: #b6b6b6;
						font-weight: normal;
					}
					i {
						position: absolute;
						top:4px;
						right: 4px;
						height: 10px;
						line-height: 10px;
						padding: 2px 5px;
						.border-radius(7px);
						background: #4aa8eb;
						color: #fff;
						.text-semibold();
						font-size: 10px;
						font-style: normal;
					}
					&:hover {
						background: #e8e8e8;
						border-right-color: #dbdbdb;
					}
					&.active {
						background: #f8f8f8;
						border-bottom: 1px solid #f8f8f8;

					}
				}
			}
		}
		.flat-field {
			height: @archive-inner-topnav-height;
			line-height: @archive-inner-topnav-height;
			> a {
				display: block;
				border-left: 1px solid #dfdfdf;
				padding: 0 20px;
				line-height: @archive-inner-topnav-height;
				i, span {
					.opacity(60);
					margin-top: 0;
					vertical-align: middle;
				}
				&:hover {
					background: #e2e2e2 !important;
					border-left-color:#d0d0d0;
					i, span {
						.opacity(90);
					}
				}
			}
			&.open {
				> a {
					background: #e2e2e2;
				}
			}
			
		}
	}

	.archive-content-subnav {
		background-color:#f8f8f8;
		height:@archive-inner-subnav-height;
		.box-sizing(border-box);
	    left: 0;
	    right: 0;
	    top:@archive-inner-topnav-height;
		position:absolute;
		z-index:2;
		border-bottom:1px #e0e0e0 solid;
		border-top:1px #fcfcfc solid;
		padding: 10px 20px;
	}

	.archive-content-inner {
		position:absolute;
		background: @background-main;
		top: @archive-inner-topnav-height + @archive-inner-subnav-height;
	    right: @archive-sidepreview-width; //sidebar preview static + scrollbar rigth space
	    left: 0; bottom:0;
	    border-right: 1px solid #d0d0d0;
		.box-shadow(3px 0 5px -2px #d8d8d8);
		padding: 20px;
		overflow: auto;
		overflow-x: hidden;
		z-index: 1;
		&.statistics {
			right: 0;
		}
	}
}


.source-select {
	float: left;
	margin-right: 20px;
	.dropdown-toggle {
		text-align: left;	
		width:200px;
		height: 22px;
		line-height: 22px;
		.caret {
			float: right;
		}
	}
}
.source-select [class^="dropdown-icon-"] {
	margin: -2px 8px 0 10px;
}
.source-select .sf-dropdown {
	width:200px;
}




/* ====================================== */
   // item(news) urgency colors and labels  

	@outputItemColor1 : #005e84;
	@outputItemColor2 : #64a4bf;
	@outputItemColor3 : #b0cfdd;

	.output-item-label {
		width: 16px;
		height: 16px;
		.border-radius(8px);
		display: inline-block;
		text-align: center;
		color:#fff;
		font-size: 10px;
		.box-sizing(border-box);
		line-height: 16px;
		vertical-align: top;
		visibility: hidden;
		&.label-1 {
			background: @outputItemColor1;
			visibility: visible;
		}
		&.label-2 {
			background: @outputItemColor2;
			visibility: visible;
		}
		&.label-3 {
			background: @outputItemColor3;
			visibility: visible;
		}
	}



/* ====================================== */
  // item(news) status labels  (exmpl. canceled)

	.status-label {
		.box-sizing(border-box);
		height: 15px;
		padding: 4px 7px;
		background: #1f6681;
		.border-radius(2px);
		display: inline-block;
		font-size: 10px;
		color: #fff;
		line-height: 7px;
		margin: 5px 10px 0 2px;
		text-transform: uppercase;
		&.label-canceled {
			background:#1c1c1c;
			color: #ff5353;
		}
	}



/* ====================================== */
  // media-box styling

@sfbox_mediaHeight : 82px;
@sfbox_sidepadding : 5px;
@sfbox_minHeight : 210px;
@sfbox_minWidth : 130px;

@sfbox_mediaWidth : 150px;

	.media-box-generic () {
		height:auto;
		width: auto;
		min-height: @sfbox_minHeight;
		min-width: @sfbox_minWidth;

		border: 1px solid #d4d4d4;
		border-width: 1px 1px 3px 1px; 
		margin: 1px 12px 10px 1px;

		.border-radius(3px);
		padding:@sfbox_sidepadding;
		position:relative;
		float:left;
		display:block;
		cursor:pointer;
		background-color:#fff;
		
		&.archived {
			background: #f2f2f2 url(../../images/checkmark-big.png) no-repeat bottom right;
			.box-shadow-both(inset 0 2px 0 0 #e9e9e9, 0 0 0 2px #fff);
		}
		.loading-status { 
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 2;
			background: rgba(255,255,255,0.85) url('../../images/loading-large.gif') no-repeat 50% 50%;
		}

		.media {
			.box-sizing(border-box);
			height:@sfbox_mediaHeight; //+2 media border
			margin:0 2px 5px;
			display:block;
			position:relative;
			background: #f4f4f4;
			img {
				height: @sfbox_mediaHeight;
			}
			.caption {
				display: none;
			}
		}
		&.media-picture {
			
		}
		&.media-text,&.media-composite {
			.media {
				max-width: 140px;
				font-size: 12px;
				font-style: italic;
			}
			small {
				display: block;
				padding: 2px 5px;
			}
		}

		&.media-audio, &.media-video {
			.media {
				width: 140px;
				max-width: 140px;
				text-align: center;
				i {
					margin-top: 17px;
					.opacity(35);
				}
			}
		}

		h5 {
			position: absolute;
			left: @sfbox_sidepadding+2;
			right: @sfbox_sidepadding+2;
			width:auto;
			white-space:nowrap;
			overflow:hidden;
			text-overflow: ellipsis;
			height:18px;
			font-size:11px;
			color:#444;
			text-transform: uppercase;
		}
		dl {
			font-size:11px;
			position:relative;
			height:auto;
			margin:0 2px;
			padding-top: 20px;
			dt {
				width:auto;
				float: left;
				clear: left;
				color:#787878;
				line-height:16px;
				font-weight:normal;
			}
			dt:after {
				content : ":";
			}
			dd { 
				width:auto;
				color:#b4b4b4;
				line-height:16px;
				float:left;
				margin-left:4px;
				&.subject-line {
					max-width:90px;
					height:14px;
					overflow:hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
			}
		}
		.type-icon {
			position: absolute;
			bottom: 4px;
			left: 28px;
			.opacity(50);
		}

		.source {
			&:after {
				content: "" !important;
			}
		}
		.provider {
			color: #787878;
			margin-left: 0;
		}

		.urgency-label {
			position: absolute;
			bottom: 6px;
			left: 7px;
		}
	}



.mgrid-view {
	padding-bottom: 80px;
	.media-box {
		.media-box-generic;

		/* control buttons on the bottom */
		.item-functions {
			background: #fff;
			position: absolute;
			height: 32px;
			border-top: 1px solid #ccc;
			bottom: 0;
			left: 0;
			right: 0;
			display: none;
			.item-field {
				width: 31px;
				height: 32px;
				display: inline-block;
				border-right: 1px solid #f0f0f0;
				float: left;
				.box-sizing(border-box);
				padding: 8px 9px 8px 8px;
				span {
					display: none;
				}
				&:hover{
					background: #f0f0f0;
					border-color: #e0e0e0;
				}
				&.disabled {
					cursor: default;
					i {
						.opacity(50);
					}
					&:hover {
						background: #fff;
					}
				}
			}
			
		}
		&:hover {
			.item-functions {
				display: block;
			}
		}
		&.selected {
			border-color: #787878;
			.box-shadow(0 0 2px 1px #e0e0e0);
		}

	}
}

/* ====================================== */
  // media box list view 

@rightfield-width:200px;

.mlist-view, .compact-view {
	> div:first-child {
		.media-box {
			border-top: 3px solid #ebebeb;
		}
	}
	.media-box {
		position: relative;
		background: #fff;
		border-bottom: 1px solid #ebebeb;
		border-right: 2px solid #fff;
		min-height: 40px;
		overflow: hidden;
		padding-left:3px; 
		&:hover {
			background: #f4f4f4 !important;
			border-bottom-color: #e0e0e0;
			border-right: 2px solid #f4f4f4;
			cursor: pointer;
			.list-field {
				border-color:#ebebeb; 
			}
		}
		
		&.selected {
			background: #eff7fa !important;
			border-right: 2px solid #d8d8d8 !important;
			&:hover {
				.item-functions {
					background: #eff7fa;
					.item-field {
						&:hover {
							background: #d6e8ef;
						}
						&.disabled {
							&:hover {
								background: #d6e8ef;
							}
						}
					}
				}
			}
		}
		.loading-status { 
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 2;
			background: rgba(255,255,255,0.85) url('../../images/loading-large.gif') no-repeat 50% 50%;
		}
		&.archived {
			background: #f2f2f2;
			h5 {
				background: url('../../images/checkmark-big-full.png') no-repeat right 50%;
				background-size: 51px;
			}
		}
		.type-icon {
			
			i {
				.opacity(60);
				width: 24px;
				padding-left: 0;
				margin-left: -2px;
				margin-top: -3px;
			}
		}
		.list-field {
			border-left: 1px solid #f4f4f4;
			float: left;
			height: 16px;
			padding: 21px 11px 20px;
			.sf-checkbox-custom {
				margin:0; 
			}
			&.type-icon {
				padding: 10px 11px;
				height: 37px;
				text-align: center;
				.output-item-label {
					clear: both;
					float: left;
					margin-top: 4px;
				}
			}
			&.no-border {
				border:0;
			}
		}
		
		.media-info {

			.item-provider {
				font-size: 14px;
				color: #787878;
				margin-right: 15px;
				font-size: 12px;
				line-height: 16px;
				height: 100%;
				float: left;
			}
			h5 {
				font-size: 13px;
				color: #333;
				font-weight: normal;
				float: none;
				line-height: 16px;
				min-height: 16px;
				height: auto;
				margin-left: 85px;
				margin-right: @rightfield-width+5px;
				padding: 12px 25px 12px 11px;
				
				.main-title {
					font-style: normal;
					display: block;
					float: none;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.status-label {
					margin-top: 0;
					display: block;
					float: left;
				}
			}
			
			.meta-data-field {
				color: #aaa;
				font-size: 12px;
				margin-top: 3px;
				white-space: normal;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				height: 14px;
				line-height: 14px;
				.item-provider {
					height: 14px;
					line-height: 14px;
					margin-right: 5px;
				}
			}
			
		}
		.item-right {
			border-left: 0;
			width: @rightfield-width;
			position: absolute;
			right: 0;
			top:0;
			text-align: right;
			overflow: hidden;
			.item-functions {
				background: #f4f4f4;
				position: absolute;
				right: -@rightfield-width;
				top:0px;
				bottom: 0;
				width: @rightfield-width;
				.item-field {
					span {
						display: none;
					}
					float: right !important;
					border-left: 1px solid #d8d8d8;
					float: left;
					height: 16px;
					padding: 21px 11px 20px;
					&.type-icon {
						padding: 10px 11px;
						height: 37px;
						text-align: center;
					}
					&:hover {
						background: #e8e8e8;
					}
					&:last-child {
						float: right;
					}
					&.disabled {
						cursor: default;
						i {
							.opacity(30);
						}
						&:hover {
							background: #e8e8e8;
						}
					}
				}
				
			}
		}

		&.archived {
			background: #f8f8f8;
			.box-shadow(inset 0 2px 0 0px #f2f2f2);
			border-right: 2px solid #f8f8f8;
			.state-border {
				background: #2f93cd;
			}
			h5 {
				background: url('../../images/checkmark-big-full.png') no-repeat right 50%;
				background-size: 36px;
			}
			&.active {
				border-right: 2px solid #d8d8d8 !important;
			}
		}
		
		
		&:hover {
			.item-functions {
				right: 0;
			}
		}
		.state-border {
			position: absolute;
			width: 3px;
			left: 0;
			top:0;
			bottom: 0;
			background: #b70000;
		}

	}
	
}

.compact-view {

	.loading-status {
		background-size: 28px !important;
	}
	.list-field {
		padding: 12px 11px !important;
		&.type-icon {
			height: 16px !important;
		}
	}
	.item-field {
		padding: 12px 11px !important;
	}
	h5 {
		margin-left: 126px !important;
		.status-label {
			margin-top: 1px !important;
		}
	}

} 

/* ====================================== */
  // media box HOVER grid view 

.media-library-main-content-inner { position: absolute; }

.mgrid-view {
	.media-box {
		&.media-box-hover {

			.media-box-generic;
			position: absolute;
			min-height: @sfbox_minHeight + 65;
			border: 2px solid #4d4d4d !important;
			padding:2px;
			margin: 0px;
			position:absolute;
			.box-shadow(0px 0px 6px 0px #777777);
			z-index: 2;

			.media-select {
				padding: 1px 2px 1px 1px;
				background: rgb(255,255,255);
				position: absolute;
				top:14px;
				left: 2px;
				z-index: 1;
				.border-radius(0 0 2px 0 );
				.sf-checkbox-custom {
					margin:0;
				}
			}
			.drag-fake {
				height: 8px;
				margin:2px; 
				.opacity(30);
				background: url(../../images/drag_bg_large.png) repeat 0 0;				
			}
			.media {
				height: 100px;
				border: 0;
				min-width: @sfbox_minWidth + 21;
				padding: 0;
				img {
					border: 0;
					height: 100px;
				}
			
				/*this is not part of media-box
				.media-box-button {
					.media-box-button-generic;
				}
				*/
			}
			&.media-picture {
				
			}
			&.media-text,&.media-composite, {
				.media {
					max-width: 161px;
					padding: 0 5px;
				}
			}
			&.media-video, &.media-audio {
				.media {
					width: 161px;
					max-width: 161px;
					i {
						margin-top: 22px;
					}
				}
			}

			&.archived {
				background: #f2f2f2;
				.box-shadow(0px 0px 6px 0px #777777);
				.media-box-content {
					background:  url(../../images/checkmark-big.png) no-repeat bottom right;
				}
			}
			

			.media-box-content {
				position: absolute;
				bottom: 33px;
				top: 117px;
				left: 0;
				right: 0;

				h5 {
					left: 5px; right: 5px;
				}
				dl {
					margin: 2px 5px;
					dd {
						&.subject-line {
							width: 90px;
						}
					}
				}

				.type-icon {
					bottom: 5px;
				}
				.urgency-label {
					bottom: 7px;
				}
				.status-label {
					margin-left: 5px;
				}
			}

			
			

			/* control buttons on the bottom */
			.item-functions {
				background: #fff;
				position: absolute;
				height: 32px;
				border-top: 1px solid #ccc;
				bottom: 0;
				left: 0;
				right: 0;
				.thumb-field {
					width: 31px;
					height: 32px;
					display: inline-block;
					border-right: 1px solid #f0f0f0;
					float: left;
					.box-sizing(border-box);
					padding: 8px 9px 8px 8px;
					&:last-child {
						border-right: 0;
						width: auto;
						padding-right: 8px;
						float: right;
					}
					&:hover{
						background: #f0f0f0;
						border-color: #e0e0e0;
					}
					&.disabled {
						cursor: default;
						i {
							.opacity(50);
						}
						&:hover {
							background: #fff;
						}
					}
				}
				
			}
			

			&.selected {
				
				.item-functions {
					border-color: #7db6cd;
					.thumb-field {
						border-color: #bee2f2;
						&:hover {
							background: #c2e5f4;
						}
					}
				}
			}

			/*
			a.add-to-scratchpad {
				clear:both;
				width:20px;
				height:16px;
				background: url(../../images/add-to-scratchpad.png) no-repeat 0px 0px;
				display:block;
				bottom:0px;
				left:0px;
				margin-top:30px;
				vertical-align:top;
				&:hover {
					background: url(../../images/add-to-scratchpad-hover.png) no-repeat 0px 0px;
				}
				&.disable {
					width:0px;
					background:none;
					padding-left: 0px;
				}
			}	*/

			.popover {
				.popover-inner {
					width: 200px;
					.popover-content {
						color: #333;
					}
				}
				
			}

		}
	}
}


/* ====================================== */
  // SIDE PREVIEW

.side-preview {
	position: absolute;
	width: @archive-sidepreview-width; 
	top: @archive-inner-topnav-height + @archive-inner-subnav-height;
	right: 0; bottom: 0;
	background: #fff;
	.header {
		.box-sizing(border-box);
		position: absolute;
		left: 0; right: 0; top:0; height: 54px;
		padding:10px 22px ;
		border-bottom:1px solid #e2e2e2;
		background: #fafafa;
		.info-list {
			li {
				font-size: 12px;
				.text-light();
				color: #a1a1a1;
				span {
					.text-normal();
					color: #565656;
				}
			}
		}
		.word-count {
			font-size: 12px;
			.text-normal();
			color: #565656;
			i {
				font-style: normal;
			}
			span {
				.text-light();
				color: #a1a1a1;
			}
		}
	}
	.content {
		.box-sizing(border-box);
		position: absolute;
		left: 0; right: 0; top:54px; bottom: 0;
		padding: 10px 22px;
		overflow-y: auto;
		.date-info {
			.text-light();
			font-size: 12px;
			color: #a1a1a1;
		}
		.title {
			font-size: 17px;
			line-height: 22px;
			.text-semibold();
			margin: 15px 0;
			color: #333;
		}
		.core-content {
			font-size: 14px;
			.description {
				font-style: italic;
				color: #656565;
				margin-bottom: 15px;
			}
			.picture-preview {
				max-width: 100%;
				margin: 20px 0;
				img {
					max-width: 100%;
					height: auto;
				}
				&.loading {
					width: 100%;
					height: 200px;
					background: #f8f8f8 url(../../images/loading-large.gif) center center no-repeat;
				}
			}
		}
	}
}

.preview-backdrop {
	position: absolute;
	width: @archive-sidepreview-width; 
	top: @archive-inner-topnav-height + @archive-inner-subnav-height;
	right: 0; bottom: 0;
	background: #fff;
	.opacity(0);
	.transition(all ease 0.2s);
	&.show {
		.opacity(80);
	}
}

/* ====================================== */
  // Context menu

.context-menu {
		position: absolute;
		right: @archive-sidepreview-width;
		width: 250px;
		top: @archive-inner-topnav-height + @archive-inner-subnav-height;
		bottom: 0;
		background: #fff;
		border-right: 1px solid #dbdbdb;
		.box-shadow(2px 0 3px 0 #e8e8e8);
		.transition(all ease 0.3s);
		&.show {
			right: @archive-sidepreview-width - 250;
		}
		.title {
			font-size: 17px;
			.text-light();
			color: #333;
			padding: 10px 15px;
		}
		.context-list {
			padding: 10px 15px 20px;
			li {
				border : 1px solid #fff;
				border-bottom: 1px solid #e5e5e5;
				background: #e9f4f8;
				padding: 6px 13px;
				height: 21px;
				line-height: 21px;
				margin-bottom:7px;
				font-size: 14px;
				color: #333;
				.border-radius(2px);
				i {
					font-style: normal;
					color: #676565;
					.text-light();
				}
				&:hover, &.selected {
					background: #b3daf2;
					border-color: #4aa8eb;
					cursor: pointer;
				}
			}
		}
	}





/* ====================================== */
  // LIGHTBOX PREVIEW

@lightbox-bg : #000;
@lightbox-sidepane : 380px ;
@lightbox-toppane : 45px;
@lightbox-composite-width : 250px;

.lightbox-preview {
	&.modal {
		//reset modal styles
		position: fixed;
		.border-radius(0px);
		top:0 !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		background: @lightbox-bg !important;
		margin: 0 !important;
		width: auto !important;
	}

	.lightbox-right {
		width: @lightbox-sidepane;
		position: absolute;
		.box-sizing(border-box);
		right: 0;
		top: 0;
		bottom:0;
		background: @background-main;
		padding: 15px;
		//info boxes 
		.lightbox-title {
			font-size: 18px;
			font-weight: normal;
			max-width: 100%;
			height: 24px;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap; 
		}
		.lightbox-modified-info {
			color: #a9a9a9;
			font-size: 12px;
			display: block;
		}
		.lightbox-media-type {
			.opacity(40);
			float: none;
			margin-left: -2px;
		}
		.urgency-label {
			margin-top: 3px;
			margin-right: 5px;
		}
		.status-label {
			margin-top: 4px;
		}
		.lightbox-actions {
			margin-top: 10px;
			i {
				margin-right: 5px;
				&.icon-archive {
					margin-top: 0;
				}
			}
		}
		.lightbox-media-data {
			position: absolute;
			top:130px;
			left:15px;
			right: 5px;
			bottom: 15px;
			overflow: auto;
			padding-right: 10px;
		}
		.lightbox-descritpion {
			width: 100%;
			margin-top: 10px;
			color: #484848;
		}
		.tabmodule {
			margin: 20px 0;
		}
	}
	.lightbox-left {
		position: absolute;
		.box-sizing(border-box);
		right: @lightbox-sidepane;
		top: @lightbox-toppane;
		bottom:0;
		left:0;
		.lightbox-large-preview {
			text-align: center;
			img {
				max-width: 100%;
				height: auto!important;
				max-height: 100%;
			}
		}
		.lightbox-caption {
			background: rgba(0,0,0,0.7);
			color: #fff;
			position: absolute;
			bottom: 0;
			left:0;
			right: 0;
			padding: 10px 20px;
			text-align: center;
			font-size: 14px;
			line-height: 20px;
			.box-sizing(border-box);
		}
		.lightbox-paper {
			position: absolute;
			top: 50px; left: 50px; right: 50px; bottom: 50px;
			.lightbox-text {
				background: #fff;
				max-width: 800px;
				margin: 0px auto;
				height: 100%;
				position: relative;
				.border-radius(5px);
				.lightbox-title {
					position: absolute;
					top: 20px;
					left: 20px;
					right: 20px;
					height: 55px;
					font-size: 18px;
					line-height: 24px;
					border-bottom: 5px solid #e0e0e0;
				}
				.lightbox-fulltext {
					position: absolute;
					top: 110px;
					left: 30px;
					right: 30px;
					bottom: 20px;
					overflow: auto;
					small {
						color: #777;
					}
					.lightbox-fullcontent {
						margin: 20px 0;
					}
					p {
						font-size: 13px;
						line-height: 20px;
						margin-bottom: 15px;
					}
				}
			}
		}
		.lightbox-audio, .lightbox-video {
			background: #101010;
			margin: 50px;
			padding : 50px 0 ;
			text-align: center;
		}
	}
	
	.lightbox-composite {
		width: @lightbox-composite-width;
		.box-sizing(border-box);
		padding: 20px;
		background: #101010;
		position: absolute;
		.box-shadow(2px 0 3px 0 #000);
		top: @lightbox-toppane;
		bottom: 0;
		left: 0;
		overflow: auto;
		z-index: 2;
		&::-webkit-scrollbar {
			width:16px;
			border-left:1px solid #282828;
		}
		&::-webkit-scrollbar-thumb {
			border-right: 3px solid #101010;
			border-left: 1px solid #282828;
			background: #383838;
			box-shadow: inset 2px 0 0 0 #101010;
			
		}

		ul {
			list-style-type: none;
			margin:0; padding: 0;
			> li {		
				margin-bottom: 20px;
				float: left;
				.box-sizing(border-box);
				width: 192px;
				border: 1px solid #101010;
				.border-radius(2px);
				&:hover {
					cursor: pointer;
				}
				&.text {
					background: #f0f0f0;
					border-color:#f0f0f0;
					padding: 5px 10px;
					&:hover {
						background: #fff;
						border-color:#fff;
					}
				}
				&.picture {
					padding: 5px;
					border-color:#1b1b1b;
					background: #000;
					figure img {
						width: 180px;
					}
					&:hover {
						background: #101010;
						border-color:#333;
					}
				}
				&.audio, &.video {
					border-color:#1b1b1b;
					background: #000;
					padding: 15px 5px;
					text-align: center;
					.media {
						width: 48px;
						height: 48px;
						display: inline-block;
						background: url(../../images/file-types-icons-large-white.png) no-repeat 0 -144px;
						.opacity(40);
					}
					&:hover {
						background: #101010;
						border-color:#333;
						.media {
							.opacity(60);
						}
					}
				}
				&.video {
					.media {
						background-position: 0 -96px;
					}
				}
			}
		}

	}
	.lightbox-composite-preview {
		.lightbox-left {
			left: @lightbox-composite-width;
		}
	}
	
	.lightbox-composite {
		width: @lightbox-composite-width;
		.box-sizing(border-box);
		padding: 20px;
		background: #101010;
		position: absolute;
		.box-shadow(2px 0 3px 0 #000);
		top: @lightbox-toppane;
		bottom: 0;
		left: 0;
		overflow: auto;
		z-index: 2;
		&::-webkit-scrollbar {
			width:16px;
			border-left:1px solid #282828;
		}
		&::-webkit-scrollbar-thumb {
			border-right: 3px solid #101010;
			border-left: 1px solid #282828;
			background: #383838;
			box-shadow: inset 2px 0 0 0 #101010;
			
		}

		ul {
			list-style-type: none;
			margin:0; padding: 0;
			> li {		
				margin-bottom: 20px;
				float: left;
				.box-sizing(border-box);
				width: 192px;
				border: 1px solid #101010;
				&:hover {
					cursor: pointer;
				}
				&.text {
					background: #f0f0f0;
					border-color:#f0f0f0;
					.border-radius(2px);
					padding: 5px 10px;
					&:hover {
						background: #fff;
						border-color:#fff;
					}
				}
				&.picture {
					padding: 5px;
					border-color:#1b1b1b;
					background: #000;
					figure img {
						width: 180px;
					}
					&:hover {
						background: #101010;
						border-color:#333;
					}
				}
			}
		}

	}
	.lightbox-composite-preview {
		.lightbox-left {
			left: @lightbox-composite-width;
		}
	}
	.lightbox-top {
		position: absolute;
		.box-sizing(border-box);
		right: @lightbox-sidepane;
		top: 0;
		height: @lightbox-toppane;
		background: #191919;
		left:0;
		padding: 8px;
		text-align: center;
		.btn {
			.box-shadow-both(inset 0px 1px 0px 0px #383838, 0px 1px 0px 0px #292929);
			margin: 0 5px;
			i[class*="icon-"]{
				.opacity(80);
				margin-right: 5px;
			}
			&:hover {
				.box-shadow-both(inset 0px 1px 0px 0px #737373, 0px 1px 0px 0px #292929);
			}
		}
		.lightbox-close {
			width: 16px;
			height: 16px;
			display: block;
			position: absolute;
			right: 16px;
			top:16px;
			
			.opacity(70);
			&:hover {
				.opacity(100);
			}
		}
	}
	

}


.metadata-details-new {
	color:#777;
	position:relative;
	height:auto;
	margin:0;
	font-size: 12px;
	dt {
		width:100px;
		float: left;
		clear: left;
		font-weight:normal;
		color:#474747;
		margin-bottom:5px;
		line-height:16px;
		vertical-align:middle;

	}
	dt:after {
		content : ":";
	}
	dd { 
		width:245px;
		max-width: 245px;
		float:left;
		margin-left:0px;
		line-height:16px;
		margin-bottom:7px;
		vertical-align:middle;
		word-break: break-word;
	}
}

/* END OF LIGHTBOX PREVIEW */




/*modal window*/
@modalMaxImageWidth : 379px;
@modalMaxImageHeight : 250px;

.modal-body {
	.row-fluid {
		.span6 {
			figure {
				margin:0px;
				padding:0px;
				width:100%;
				max-width:@modalMaxImageWidth;
				height:auto;
				max-height:@modalMaxImageHeight;
			}
			dl {
				font-size:13px;
				color:#777;
				position:relative;
				height:auto;
				margin:0;
				dt {
					width:110px;
					float: left;
					clear: left;
					font-weight:normal;
					color:#474747;
					margin-bottom:5px;
					line-height:16px;
					vertical-align:middle;
				}
				dt:after {
					content : ":";
				}
				dd { 
					width:245px;
					max-width: 245px;
					float:left;
					margin-left:0px;
					line-height:16px;
					margin-bottom:5px;
					vertical-align:middle;
				}
				&.line-borders {
					width:379px;
					border-top:1px solid #e8e8e8;
					margin-top:15px;
					dt {
						border-bottom:1px solid #e8e8e8;
						vertical-align:top;
						line-height:20px;
						margin-bottom:0px;
					}
					dd {
						padding-right: 24px;
						border-bottom:1px solid #e8e8e8;
						vertical-align:top;
						line-height:20px;
						margin-bottom:0px;
					}
				}
			}	
			
			
		}
	}
}

.metadata-language {
	height: 38px;
	position: relative;
	z-index: 10;
}


.metadata-details {
	max-height: 350px;
	overflow-y: auto;
	overflow-x: hidden; 
	padding: 5px;
	input, textarea {
		border-color: #e0e0e0 !important;
		color: #585858;
		&:focus {
			border-color:  rgba(82, 168, 236, 0.8) !important;
			color:#000;
		}
	}
}
.edit-metadata-select {
	margin-top: 2px;
	height: 26px;
}


.modal-header {
	button.close {
		padding : 0;
		cursor: pointer;
		background: transparent;
		border:0;
		-webkit-appearance: none;
		&:hover {
			color: #b3b3b3;
		}
	}
}

.modal-body {
	.form-horizontal {
		margin:0 !important;
	}	
}

.btn.pull-right {
	margin-left: 10px;
}

.meta-description-text {
	height: 52px;
	max-width: 245px;
}

.close {
		&:hover {
			color: #b3b3b3;
		}
	}


/*scratchpad media box*/
.media-box-scratchpad {
	.media-box-generic;
	.box-shadow(0px 0px 6px 0px #000);
	border:1px solid #414141;
	.media-box-button {
		//.media-box-button-generic;
		
		&.right {
				right:0px;
				border-left:2px solid #fff;
				&.top {
					top:0px;
					border-bottom:2px solid #fff;
					a {
						width:16px;
						height:16px;
						.box-sizing(border-box);
						padding: 3px 4px 4px 4px;
						display:block;
						background:#333;
						&:hover {
							background:#08c;
						}
					}
				}
			}
	}
}





/* scratchpad slider */


.scratchpad-slider {
	width:auto;
	overflow: auto;
	&:focus {
		outline:0px;
	}
}

.horizontal-slider
{
	height: auto;
	max-height: 100%;
	&:focus {
		outline:0px;
	}
}

.slider-content {
	overflow:visible;
	height:180px;
	padding:5px 5px 0 5px;
}

.jspHorizontalBar
{
	height: 6px;
	.border-radius(3px);
}

.jspTrack
{
	background: #8d8d8d;
	position: relative;
	.border-radius(3px);
}

.jspDrag
{
	background: #666;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
	.border-radius(3px);
	&:hover {
		background:#4d4d4d;
	}
	&:active {
		background:#4d4d4d;
	}
}


/* uploads grid used for upload popup */
.uploads-grid {
	list-style-type: none;
	margin:60px 0 0;
	padding: 0;
	top:0;
	bottom:0;
	overflow: scroll;
	position: absolute;
	li {
		max-height: 100px;
		float: left;
		margin: 0 15px 15px 0;
		padding: 3px;
		border:1px solid #d0d0d0;
		position: relative;
		.add-button {
			position: absolute;
			background-color: #0079cc;
			left: 3px;
			top: 3px;
			width:16px;
			height: 18px;
			padding: 4px;
			display: none;
		}
		&:hover {
			background: #0079cc;
			border-color:#2d95dd;
			cursor:pointer;
			.box-shadow(0px 0px 3px #a0a0a0);
			.add-button {
				display: block !important;
			}
		}
		&.grid-selected {
			background: #0079cc;
			border-color:#2d95dd;
		}
		img {
			height: 100px;
			max-height: 100px;
		}
	}
}

/* drag area used in uploads grid */
.drag-area {
	background: #f8f8f8;
	border: 3px dashed #e0e0e0;
	position: absolute;
	top:0;
	left: 0;
	bottom: 0;
	right: 0;
}
.drag-area-title {
	width: 100%;
	background: url("../../images/dragfiles.png") no-repeat 50% 0;
	margin-top: 5%;
	padding-top: 100px;
	text-align: center;
	color:#a0a0a0;
	font-size: 24px;
}

.drag-area-button {
	text-align: center;
	margin-top: 30px;
}





/* SIDE FILTERS */

.filter-edit input[type="text"] {
	border: 1px solid #9D9D9D !important;
	.box-shadow(0px 1px 2px -1px #f0f0f0)!important;
	height: 24px !important;
	padding: 3px 5px !important;
	width: 100% ;
	margin-right: 5px ;
	.border-radius(4px) !important;
	overflow: hidden;
	float: left;
	display: block;
}

#MAFilter {
	padding-left: 24px !important;
}

#MAFilter:focus, .filter:focus {
	/*border-color: #f0f0f0 !important;*/
	-webkit-appearance:none !important;	
	outline:0 !important;
}

#MAFilterResults {
	font-family: Arial,Helvetica,sans-serif;
	border: 1px solid #909090;
	list-style-type: none;
	margin: 0;
	padding: 5px 0;
	width: 150px;
	z-index: 99;
	background: #fff;
	max-height: 300px;
	overflow-y: auto;
	overflow-x:	none;  
	box-shadow: 2px 2px 4px 0px #666;
}
#MAFilterResults li {
	color: #333;
	font-size: 12px;
	padding: 2px 10px;
	background-color: #fff;
}

.filter-list li 
{
	&:hover, &.hover 
	{
		color:#fff !important;
		background-color: #006DCC;
		background-image: -moz-linear-gradient(top, #198cef, #027bb8);
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#198cef), to(#027bb8));
		background-image: -webkit-linear-gradient(top, #198cef, #027bb8);
		background-image: -o-linear-gradient(top, #198cef, #027bb8);
		background-image: linear-gradient(to bottom, #198cef, #027bb8);
		background-repeat: repeat-x;
		border-color: #027bb8 #027bb8 #044781;
		border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff198cef', endColorstr='#ff027bb8', GradientType=0);
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
		cursor: pointer;
	}
}

.open {
	border-color: #b2b2b2;
}
/*
.tag-container {
	margin: 10px 0 0;
	padding: 0;
	list-style-type: none;
	width: auto;
	height: auto;
	clear: both;
	float: left;
}

.tag-container li {
	height: 16px;
	width: auto;
	float: left;
	padding: 2px 26px 2px 5px;
	color: #fff;
	line-height: 16px;
	font-size: 11px;
	margin: 5px 5px 0 0;
	border-radius: 3px !important;
	-webkit-border-radius: 3px !important;
	-moz-border-radius: 3px !important;
	display: block;
	position: relative;
}

.tag-container li.modifier-inc {
	background-color: #4a4a4a;
}

.tag-container li.modifier-ext {
	background-color: #237978;
}
.tag-container li.modifier-exc {
	background-color: #db0f0f;
}

.tag-container li a.closebutton { 
	position: absolute; 
	border-left: 1px dotted #939393;
	top:1px;
	right:0px; 
	display: block; 
	width: 20px; 
	height: 18px; 
	font-size: 1px; 
	background: url('../../images/close.png'); 
}
.tag-container li:hover { 
 	background-color: #313131;
 	cursor: pointer;
}

.range {
	width: 52px !important;
	margin-right: 5px !important;
}
.classic {
	width: 115px !important;
	margin-right: 0px !important;
}
*/
.open-filter-button {
	position: absolute;
	top: 3px;
	width: 20px;
	height: 19px;
	left: 3px;
	background: url("../../images/open-filters-icon.png") no-repeat 2px 2px;
	cursor: pointer;
}

#filter-modifiers a[data-modifier="inc"].active {
	background: #4a4a4a;
	color:#fff;
	text-shadow:none;
}
#filter-modifiers a[data-modifier="ext"].active {
	background: #237978;
	color:#fff;
	text-shadow:none;
}
#filter-modifiers a[data-modifier="exc"].active {
	background: #db0f0f;
	color:#fff;
	text-shadow:none;
}

#filter-modifiers .btn-mini {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	width: 33%;
}
#filter-modifiers .btn-mini:last-child {
	width: 34%;
}

.filter-value-container input {
	margin-top:3px;
}
{'fraction_non_alphanumeric': 0.14856421075263038, 'fraction_numerical': 0.0531584675956409, 'mean_word_length': 2.007962491411018, 'pattern_counts': {'":': 6, '<': 3, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1191849', 'n_tokens_mistral': 38658, 'n_tokens_neox': 28495, 'n_words': 5552}